/* Dogware Studio: design system v3 · light-first Dogware Flex spine + Studio signature (task #99876).
   Rubik (Latin display) · Heebo (Hebrew) · Space Mono (prices/numbers).
   Logical properties ONLY (inset/start/end), so HE (RTL) and EN (LTR) mirror for free.
   Studio's two signature colours (#99873): ink #0E0E10 + gold #C6A15B. White content spine,
   ink hero/footer bands keep our dark drama, gold threaded as the warm accent.
   GOLD CONTRAST RULE (memorize): on white, gold #C6A15B is 2.43:1 → decorative/large-UI only.
   Any gold as TEXT/LINK/BORDER on white uses deep-gold #8A6D1E (--accent-ink, 4.9:1 AA).
   On the ink band, full gold #C6A15B is AA everywhere (7.94:1). Gold fill + ink text = 7.94:1. */

:root {
  --bg: #FFFFFF;             /* page background (light-first spine) */
  --ink: #0E0E10;            /* Studio ink: literal dark (text-on-gold, bands) */
  --surface: #F7F9FC;        /* raised / soft panel bg on white */
  --card: #F7F9FC;           /* card bg on white */
  --line: #E2E8F0;           /* hairlines on white */
  --text: #0E0E10;           /* body text, 19.28:1 on white */
  --muted: #64748B;          /* muted text, 4.76:1 on white */

  /* Studio v5: PLAYFUL LIGHT multi-colour system (operator #99876: replace gold → light pink/blue/green/yellow).
     Light tints are FILLS (ink text on them = 11–14:1 AA). Deep -ink shades are colour-as-text on white (≥5:1 AA). */
  --c-pink: #F6B8CE;   --c-pink-ink: #B83A64;    /* rose text 5.49:1 */
  --c-blue: #A9D2F3;   --c-blue-ink: #1D6FB8;    /* blue text 5.23:1 */
  --c-green: #A9E0BE;  --c-green-ink: #1E7D46;   /* green text 5.15:1 */
  --c-yellow: #F3DE9A; --c-yellow-ink: #8A6410;  /* amber text 5.37:1 */

  --accent: #F6B8CE;         /* primary light fill: decorative (ink text on it = AA) */
  --accent-ink: #B83A64;     /* colour-as-text/link/border on white (rose, 5.49:1 AA) */
  --on-accent: #0E0E10;      /* ink text on any light fill (≥11:1) */
  --grad: linear-gradient(120deg, #F6B8CE 0%, #A9D2F3 34%, #A9E0BE 67%, #F3DE9A 100%);  /* the 4-colour sweep */

  /* ink band context (hero / footer / sticky action bar) */
  --band-ink: #0E0E10;
  --invert: #F7F7F9;         /* text on the ink band, 18.02:1 */
  --invert-muted: #A0A0A8;   /* muted on the ink band, 7.43:1 */

  /* legacy aliases, repointed so existing rules stay AA on the new light spine */
  --violet: #B83A64;         /* colour-as-text/border on white → rose (AA) */
  --violet-soft: #B83A64;    /* link → rose (AA) */
  --lime: #F6B8CE;           /* action fill + light colour text ON ink bands (pastel on ink = AA) */
  --lime-ink: #0E0E10;       /* ink text on the light fill */

  --radius: 12px;
  --radius-lg: 20px;
  --maxw: 1160px;
  --font: "Heebo", "Rubik", "Segoe UI", Arial, sans-serif;
  --font-latin: "Rubik", "Heebo", "Segoe UI", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --shadow: 0 12px 30px rgba(14,14,16, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
html:lang(en) body { font-family: var(--font-latin); }

.skip-link {
  position: absolute;
  inset-block-start: -52px;
  inset-inline-start: 8px;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  z-index: 200;
  transition: inset-block-start .15s;
}
.skip-link:focus { inset-block-start: 0; }

a { color: var(--accent-ink); }
a:hover { color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  background: rgba(255,255,255, .90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid transparent;
}
.site-header.is-scrolled { border-block-end-color: var(--line); box-shadow: 0 6px 24px rgba(14,14,16, .08); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.brand {
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: clamp(18px, 5.4vw, 21px);
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand em {
  font-style: normal;
  color: var(--accent-ink);   /* deep-gold: AA as the wordmark accent on the white header */
}
.brand small { font-weight: 600; font-size: 13px; color: var(--muted); margin-inline-start: 8px; }

.site-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }
.site-nav a {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 15.5px;
  padding: 10.5px 13px;   /* ≥44px tap target */
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.site-nav a:hover { color: var(--text); background: rgba(184,58,100, .14); }
.site-nav a.lang-toggle { border: 1px solid var(--line); font-family: var(--font-latin); }
.site-nav a.lang-toggle:hover { border-color: var(--violet); }
.site-nav a.nav-cta {
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 700;
  padding-inline: 18px;
}
.site-nav a.nav-cta:hover { background: #EF9DBB; color: var(--lime-ink); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto; /* edge rule: trigger stays flush to the row end, LTR and RTL */
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  inline-size: 44px;
  min-block-size: 44px;
}
.nav-toggle-bars {
  display: inline-block;
  inline-size: 18px;
  block-size: 2px;
  background: var(--text);
  box-shadow: 0 -6px 0 var(--text), 0 6px 0 var(--text);
}
@media (max-width: 860px) {
  .site-header .wrap { flex-wrap: wrap; } /* wrap serves only the full-width nav panel below */
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; inline-size: 100%; }
  .site-nav.is-open {
    display: block;
    background: var(--bg);                          /* solid panel, no page bleed-through */
    max-block-size: calc(100dvh - 80px);
    overflow: auto;
  }
  .site-header.nav-open { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.nav-locked { overflow: hidden; }            /* scroll-lock while the menu is open */
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; padding-block: 10px 14px; }
  .site-nav a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 17px; }
  .site-nav a.nav-cta { text-align: center; margin-block-start: 6px; }
}

/* ---------- hero (ink band: Studio's dark signature over the light spine) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 96px 84px;
  background: var(--band-ink);
  color: var(--invert);
  /* re-scope the content tokens so every hero child inverts for free */
  --text: var(--invert);
  --muted: var(--invert-muted);
  --line: rgba(247,247,249, .14);
  --card: #17171B;
  --surface: #131316;
}
/* ghost/secondary control on the ink band; ink-on-dark border is invisible, use a light rule */
.hero .btn-ghost { color: var(--invert); border-color: rgba(247,247,249, .28); }
.hero .btn-ghost:hover { background: rgba(247,247,249, .10); color: var(--invert); }
.hero .wrap { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: rgba(19,19,22, .7);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  margin-block-end: 22px;
}
.hero-badge::before {
  content: "";
  inline-size: 8px; block-size: 8px;
  border-radius: 50%;
  background: var(--lime);
}

.hero h1 {
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.015em;
  margin: 0 0 20px;
  max-width: 17em;
}
.hero h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lede { font-size: 20px; color: var(--muted); max-width: 36em; margin: 0 0 30px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .note { color: var(--muted); font-size: 14.5px; margin-block-start: 16px; }

.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 34px; }
.hero-chips span {
  border: 1px solid var(--line);
  background: rgba(19,19,22, .65);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
}
.hero-chips b { color: var(--lime); font-family: var(--font-mono); font-weight: 700; }

/* ---------- buttons ---------- */
.cta {
  display: inline-block;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 800;
  font-size: 17px;
  padding: 15px 32px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
  box-shadow: 0 6px 22px rgba(184,58,100, .18);
}
.cta:hover { background: #EF9DBB; color: var(--lime-ink); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(184,58,100, .26); }
.cta[disabled] { opacity: .6; cursor: wait; transform: none; }
.btn-ghost {
  display: inline-block;
  color: var(--text);
  font-weight: 700;
  font-size: 16.5px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid var(--violet);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: rgba(184,58,100, .16); color: var(--text); }

/* ---------- sections ---------- */
.section { padding-block: 84px; border-block-start: 1px solid var(--line); scroll-margin-block-start: 76px; }
.section-kicker {
  color: var(--violet-soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.section > .wrap > h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 12px; }
.section .section-sub { color: var(--muted); margin: 0 0 40px; max-width: 44em; font-size: 17.5px; }
.subsection { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; margin-block: 56px 8px; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-3px); border-color: #CBD5E1; box-shadow: var(--shadow); }
/* balance keeps a card title from dropping its last token onto a line of its own
   (#101573: 'בניית חנות אונליין: WooCommerce מ-א' עד ת'' orphaned ת' at desktop) */
.card h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.35; text-wrap: balance; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; flex: 1; }
.card .price {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 700;
  color: var(--accent-ink);   /* deep-gold: gold price numerals as text on the white card */
  letter-spacing: -.02em;
}
.card .price small { font-family: var(--font); font-size: 13.5px; font-weight: 400; color: var(--muted); display: block; margin-block-start: 2px; }
.card .market { font-size: 13.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(160,160,168, .7); }

/* featured (flagship) card */
.card.featured {
  background: var(--card);
  border: 1.5px solid var(--c-pink-ink);   /* no-gradient (#99876): solid rose border; was 4-colour gradient border */
}
.card.featured::before {
  content: attr(data-flag);
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 22px;
  background: var(--grad);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* why-AI cards */
.why .cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.why .card h3 { font-size: 19px; }
.why .card p { flex: none; }
.why .card .why-kicker {
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.why .card .why-proof {
  margin-block-start: auto;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--violet);
  color: var(--muted);
  font-size: 14.5px;
}
.why .bridge { margin-block-start: 36px; font-size: 18px; font-weight: 600; }

/* ---------- portfolio ---------- */
.folio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.folio figure {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.folio figure:hover { transform: translateY(-3px); border-color: #CBD5E1; box-shadow: var(--shadow); }
.folio .thumb {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  font-weight: 800; font-size: 26px; color: var(--ink);
}
.folio img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.folio figcaption { padding: 16px 20px 18px; font-size: 15px; color: var(--muted); }
.folio figcaption strong { color: var(--text); display: block; font-size: 16.5px; margin-block-end: 3px; }

/* ---------- tables (pricing credits + article compare) ---------- */
.compare {
  inline-size: 100%; border-collapse: collapse; margin-block: 22px; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--card);
}
.compare caption { text-align: start; color: var(--muted); font-size: 14px; margin-block-end: 8px; }
.compare th, .compare td { padding: 13px 16px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: top; }
.compare thead th {
  background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.compare tbody tr:last-child td { border-block-end: 0; }
.compare tbody tr:hover td { background: rgba(184,58,100, .06); }
.compare .num { color: var(--accent-ink); font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent-ink);
  border-radius: var(--radius); padding: 20px 24px; margin-block: 24px;
}
.callout p { margin: 0; }

/* ---------- quote section ---------- */
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }

.quote-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  max-width: 760px;
}
.field { margin-block-end: 20px; }
.field label { display: block; font-weight: 700; font-size: 15.5px; margin-block-end: 7px; }
.field .hint { font-size: 14px; color: var(--muted); margin-block-start: 6px; }
.field input, .field select, .field textarea {
  inline-size: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  padding: 12px 14px;
  min-block-size: 46px;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--violet); }
.field textarea { min-block-size: 130px; resize: vertical; }
.field input[dir="ltr"] { text-align: start; }
fieldset.field { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
fieldset.field legend { font-weight: 700; padding-inline: 6px; }

.steps {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.steps h3 { margin: 0 0 18px; font-size: 19px; font-weight: 800; }
.steps ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: flex; gap: 14px; padding-block: 12px; }
.steps li + li { border-block-start: 1px solid var(--line); }
.steps li::before {
  content: counter(step);
  flex: none;
  inline-size: 34px; block-size: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(184,58,100, .18);
  color: var(--violet-soft);
  font-family: var(--font-mono);
  font-weight: 700;
}
.steps li strong { display: block; color: var(--text); font-size: 16px; }
.steps li span { color: var(--muted); font-size: 14.5px; }
.steps .steps-note { color: var(--muted); font-size: 14px; margin: 16px 0 0; }

/* form feedback (site.js + server-rendered) */
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px; block-size: 1px; overflow: hidden;
}
.field [aria-invalid="true"] { border-color: #F97066; border-width: 2px; }
.field-error { color: #B42318; font-size: 15px; margin-block: 6px 0; }
.field-error::before { content: "⚠ "; }
.panel { border-radius: var(--radius); padding: 20px 24px; margin-block: 20px; max-width: 760px; }
.panel h2 { margin-block-start: 0; }
.panel:focus { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.panel-success { background: #ECFDF3; border: 1px solid #6CE9A6; color: #054F31; }
.panel-error { background: #FEF3F2; border: 1px solid #FDA29B; color: #B42318; }
.panel-error a { color: #B42318; }
.form-status { min-block-size: 1.5em; color: var(--muted); }

/* ---------- standalone narrow pages (/quote/) ---------- */
.main-narrow { max-inline-size: 780px; padding-block: 48px 72px; }
.main-narrow h1 { font-size: clamp(30px, 4.6vw, 44px); font-weight: 900; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 14px; }
.main-narrow .intro { color: var(--muted); font-size: 18px; margin: 0 0 6px; }
.main-narrow .required-note { color: var(--muted); font-size: 14.5px; margin: 0 0 26px; }
.main-narrow .quote-form { margin-block-start: 4px; }
.contact-line { color: var(--muted); font-size: 15px; margin-block-start: 22px; }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 95;
  display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(14,14,16, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--line);
}
.sticky-cta .cta { display: block; text-align: center; padding-block: 13px; box-shadow: none; }
@media (max-width: 860px) {
  .sticky-cta { display: block; }
  .sticky-cta.is-hidden { display: none; }
  body { padding-block-end: 74px; }
}

/* ---------- blog / articles ---------- */
.crumbs { color: var(--muted); font-size: 14px; padding-block: 22px 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }

.article { padding-block: 20px 40px; }
.article-head { max-width: 46rem; margin-block-end: 8px; }
.article-head h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 900; line-height: 1.18; margin: 8px 0 14px; }
.article-head h1 em {
  font-style: normal;
  color: var(--accent-ink);   /* deep-gold: AA display accent on the white article spine */
}
.article-meta { color: var(--muted); font-size: 15px; margin: 0 0 6px; }
.article-lede { font-size: 20px; color: var(--muted); max-width: 42rem; margin: 10px 0 0; }

.article-body { max-width: 46rem; }
.article-body h2 { font-size: 28px; font-weight: 800; margin-block: 40px 12px; }
.article-body h3 { font-size: 21px; font-weight: 700; margin-block: 26px 8px; }
.article-body p { margin-block: 0 16px; }
.article-body ul, .article-body ol { margin-block: 0 18px; padding-inline-start: 1.3em; }
.article-body li { margin-block-end: 8px; }
.article-body strong { color: var(--text); }
.article-body a { text-decoration: underline; }

.toc {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 24px; margin-block: 26px;
}
.toc strong { display: block; margin-block-end: 10px; }
.toc ol { margin: 0; padding-inline-start: 1.2em; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); text-decoration: underline; }

.article-cta {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px; margin-block: 34px;
  text-align: center;
}
.article-cta h2 { margin-block: 0 8px; }
.article-cta p { color: var(--muted); margin-block: 0 18px; }

.faq { margin-block: 30px; }
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px 20px; margin-block-end: 12px;
}
.faq summary { font-weight: 700; cursor: pointer; padding-block: 14px; }
.faq details[open] summary { margin-block-end: 4px; }
.faq details p { color: var(--muted); margin-block: 0 14px; }

.article-related { border-block-start: 1px solid var(--line); margin-block-start: 40px; padding-block-start: 24px; }
.article-related strong { display: block; margin-block-end: 8px; }
.article-related a { display: inline-block; margin-inline-end: 18px; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .hero { padding-block: 60px 52px; }
  .section { padding-block: 56px; }
  .quote-form { padding: 24px 18px; }
  .hero-actions .cta, .hero-actions .btn-ghost { inline-size: 100%; text-align: center; }
  /* wide compare tables scroll inside their focusable wrapper (a11y: scrollable-region-focusable) */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
  .compare th, .compare td { white-space: nowrap; }
  /* the credits table has prose cells, so wrap instead of forcing a wide scroll */
  .compare.credits th, .compare.credits td { white-space: normal; padding: 10px 8px; font-size: 14px; }
}

/* ==========================================================================
   Dogware Group: endorsed footer (identical group-wide)
   Spine tokens; per-site vars set inline on .dw-footer. Endorsement bar is
   IDENTICAL group-wide: do not edit its text/mark/order.
   ========================================================================== */
.dw-footer{
  --dw-ink:#0E0E10; --dw-line:#262629; --dw-text:#F7F7F9;
  --dw-muted:#A0A0A8; --dw-violet:#F6B8CE;
  --dw-surface:#0E0E10;
  --dw-accent:#F6B8CE;
  background:var(--dw-surface);
  color:var(--dw-muted);
  font-family:'Heebo','Rubik',system-ui,sans-serif;
  font-size:15px; line-height:1.6;
  border-block-start:1px solid var(--dw-line);
  padding-block:44px 0;
}
.dw-footer *{box-sizing:border-box}
.dw-footer .dw-wrap{max-inline-size:1160px;margin-inline:auto;padding-inline:24px}
.dw-footer .dw-top{
  display:grid;grid-template-columns:1.4fr 2fr;gap:40px 32px;
  padding-block-end:36px;
}
.dw-footer .dw-brand .dw-name{
  font-family:'Rubik','Heebo',sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.02em;color:var(--dw-text);margin-block-end:10px;
}
.dw-footer .dw-brand p{max-inline-size:38ch;margin:0}
.dw-footer .dw-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dw-footer .dw-col h4{
  font-family:'Rubik','Heebo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dw-text);
  margin-block:0 12px;
}
.dw-footer .dw-col a{display:block;color:var(--dw-muted);text-decoration:none;
  padding-block:10px;transition:color .15s}   /* ≥44px tap target */
.dw-footer .dw-col a:hover,
.dw-footer .dw-col a:focus-visible{color:var(--dw-accent)}
.dw-footer a:focus-visible{outline:2px solid var(--dw-accent);outline-offset:3px;border-radius:3px}
.dw-footer .dw-bar{
  border-block-start:1px solid var(--dw-line);
  padding-block:20px;margin-block-start:8px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  font-size:14px;
}
.dw-footer .dw-endorse{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--dw-muted);font-weight:600;
}
.dw-footer .dw-endorse svg{inline-size:20px;block-size:20px;flex:none}
.dw-footer .dw-endorse a{color:inherit;text-decoration:none}
.dw-footer .dw-endorse a:hover{color:var(--dw-violet)}
.dw-footer .dw-copy{color:var(--dw-muted);opacity:.8}
.dw-footer .dw-legal{margin-inline-start:auto;display:flex;gap:16px}
.dw-footer .dw-legal a{color:var(--dw-muted);text-decoration:none}
.dw-footer .dw-legal a:hover{color:var(--dw-accent)}
/* ≥44px tap targets on the bar links without changing the bar's visual height */
.dw-footer .dw-bar a{padding-block:12px;margin-block:-12px}
@media (max-width:720px){
  .dw-footer .dw-top{grid-template-columns:1fr;gap:28px}
  .dw-footer .dw-cols{grid-template-columns:1fr 1fr}
  .dw-footer .dw-bar{flex-direction:column;align-items:flex-start}
  .dw-footer .dw-legal{margin-inline-start:0}
}

/* header contract: brand + trigger share one line down to 320px */
@media (max-width: 360px) {
  .brand small { display: none; }
}