/* =====================================================================
   Spec2JIRA — site.css
   "Structured Confidence" design system (binding spec: _redesign-docs/03)
   Single stylesheet for the whole site. Built in Phase 1; later pages are
   styled against this file and must NOT edit it. All 23 components live here,
   including ones the homepage does not use.

   Table of contents
     1.  Design tokens (:root)          §2 of spec
     2.  Reset & base
     3.  Typography base
     4.  Layout primitives (container, section, eyebrow, grad-text, on-dark)
     5.  Accessibility (skip-link, sr-only, focus-visible)      [comp 22]
     C1  Nav                                                    [comp 1]
     C2  Buttons                                                [comp 2]
     C3  Hero (dark)                                            [comp 3]
     C4  Product visual                                         [comp 4]
     C5  Logo / platform-trust strip                            [comp 5]
     C6  Card                                                   [comp 6]
     C7  Use-case card                                          [comp 7]
     C8  Dark band                                              [comp 8]
     C9  Stat / stats band                                      [comp 9]
     C10 Step row                                               [comp 10]
     C11 Value item                                             [comp 11]
     C12 Plan (pricing) card                                    [comp 12]
     C13 Callout                                                [comp 13]
     C14 Prose / prose-legal                                    [comp 14]
     C15 Table                                                  [comp 15]
     C16 Docs layout                                            [comp 16]
     C17 Code / pre                                             [comp 17]
     C18 Step card                                              [comp 18]
     C19 FAQ item                                               [comp 19]
     C20 Final CTA band                                         [comp 20]
     C21 Footer                                                 [comp 21]
     C23 Reveal-on-scroll                                       [comp 23]
     6.  Extra content helpers (lead, hero-note, compare grid, marker lists)
     7.  Utilities
     8.  Responsive
   ===================================================================== */

/* =====================================================================
   0. SELF-HOSTED FONTS  (SIL OFL 1.1 — see /assets/fonts/OFL-NOTICE.txt)
   Inter variable (100–900) + Space Grotesk variable (300–700), latin
   subset only; characters outside the range fall back to the system
   stack. Self-hosted: zero external requests (privacy-first).
   ===================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   1. DESIGN TOKENS  (spec §2 — single source of truth)
   ===================================================================== */
:root {
  /* ---- Colour: ink scale (dark surfaces) ---- */
  --ink-900: #0B1526;   /* darkest hero/footer background */
  --ink-800: #0F1D33;   /* dark band background */
  --ink-700: #16263F;   /* dark card surface */
  --ink-600: #23364F;   /* dark card border/hover */

  /* ---- Colour: brand ---- */
  --blue-600: #1D6FE0;  /* primary buttons, links on light */
  --blue-500: #2684FF;  /* brand blue, icons, accents */
  --blue-300: #7DB3FF;  /* links/accents on dark */
  --violet-500: #7C5CFC;/* secondary accent */
  --grad-brand: linear-gradient(135deg, #2684FF 0%, #7C5CFC 100%);

  /* ---- Colour: light surfaces ---- */
  --paper: #FFFFFF;
  --mist-50: #F6F8FB;   /* section alt background */
  --mist-100: #EDF1F7;  /* chips, wells */
  --line-200: #DDE3EC;  /* borders on light */

  /* ---- Colour: text ---- */
  --text-900: #101B2C;  /* headings on light */
  --text-700: #3E4C61;  /* body on light */
  --text-500: #64748B;  /* muted on light */
  --text-inv: #F2F6FC;  /* headings on dark */
  --text-inv-muted: #A8B6CC; /* body on dark */

  /* ---- Colour: semantic ---- */
  --ok-600: #0E8A5F;    --ok-bg: #E7F6EF;
  --warn-600: #B25E09;  --warn-bg: #FDF1E2;
  --info-bg: #EAF2FF;
  --danger-600: #C4322E;

  /* ---- Typography ---- */
  --font-sans: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", "Segoe UI Variable Display", "Segoe UI",
               system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-hero:   clamp(2.5rem, 5.5vw + 0.5rem, 4.25rem);  /* w800, lh 1.05 */
  --fs-h1:     clamp(2.2rem, 4vw + 0.4rem, 3.25rem);
  --fs-h2:     clamp(1.7rem, 2.5vw + 0.4rem, 2.35rem);  /* w800, lh 1.15 */
  --fs-h3:     1.25rem;                                  /* w700 */
  --fs-body-l: 1.155rem;                                 /* leads, lh 1.65 */
  --fs-body:   1rem;                                     /* lh 1.7 */
  --fs-small:  0.9rem;
  --fs-eyebrow:0.8rem;                                   /* w700, uppercase */

  /* ---- Space, radius, elevation ---- */
  --container: 1140px;
  --gutter: 24px;
  --section-pad: clamp(4.5rem, 9vw, 7.5rem);

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgb(16 27 44 / .06), 0 1px 3px rgb(16 27 44 / .10);
  --shadow-m: 0 6px 24px -8px rgb(16 27 44 / .18);
  --shadow-l: 0 24px 64px -24px rgb(16 27 44 / .28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-hover: 160ms;
  --dur-reveal: 500ms;
}

/* =====================================================================
   2. RESET & BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: rgb(38 132 255 / .22); }

/* =====================================================================
   3. TYPOGRAPHY BASE
   ===================================================================== */
h1, h2, h3, h4 { color: var(--text-900); font-weight: 800; line-height: 1.15; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

/* Display face: headlines, wordmark, display numerals.
   Space Grotesk's wght axis caps at 700 — declared weights above 700
   clamp to the axis maximum, so everything below renders at 700. */
h1, h2, .nav-logo,
.stat .num, .step-row .num, .plan .price, .step-card .step-num,
.wf-num, .error-code {
  font-family: var(--font-display);
  font-weight: 700;
}
p  { text-wrap: pretty; }

strong { color: var(--text-900); font-weight: 700; }

/* =====================================================================
   4. LAYOUT PRIMITIVES
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--alt { background: var(--mist-50); }

/* Eyebrow — the signature typographic move (spec §2.2: "gradient or blue
   text"). Solid --blue-600 on light for AA (small uppercase text); the
   gradient is reserved for dark scopes, where contrast is inverted and safe. */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--blue-600);
}
.hero-dark .eyebrow,
.cta-final .eyebrow,
.on-dark .eyebrow,
.band-dark .eyebrow {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Gradient text for key phrases. */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section heading block (eyebrow + h2 + optional lead). */
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 14px; }
.section-head .lead { margin-bottom: 0; }

/* Dark-scope: flip text colours to the inverse tokens. */
.on-dark { color: var(--text-inv-muted); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark strong { color: var(--text-inv); }
.on-dark a { color: var(--blue-300); }

/* =====================================================================
   5. ACCESSIBILITY  [component 22]
   ===================================================================== */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--ink-900);
  color: var(--text-inv);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-weight: 600;
  transition: top var(--dur-hover) var(--ease-out);
}
.skip-link:focus { top: 0; text-decoration: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =====================================================================
   C1. NAV  [component 1]
   Sticky, translucent light, blurred. Same component on every page.
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-200);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

/* Wordmark: "Spec" ink / "2" gradient / "JIRA" blue. */
.nav-logo {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-900);
  white-space: nowrap;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo .l2 {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-logo .ljira { color: var(--blue-600); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-menu > a:not(.btn) {
  color: var(--text-700);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  transition: color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.nav-menu > a:not(.btn):hover { color: var(--blue-600); background: var(--mist-100); text-decoration: none; }
.nav-menu .btn { margin-left: 8px; }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-s);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle:hover { background: var(--mist-100); }
.nav-toggle-bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-900);
  border-radius: 2px;
  transition: transform var(--dur-hover) var(--ease-out),
              opacity var(--dur-hover) var(--ease-out);
}
.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   C2. BUTTONS  [component 2]
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover { background: #1B64C9; transform: translateY(-1px); box-shadow: var(--shadow-m); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-200);
  color: var(--text-900);
}
.btn-ghost:hover { border-color: var(--blue-300); color: var(--blue-600); transform: translateY(-1px); }
.on-dark .btn-ghost, .btn-ghost.on-dark {
  border-color: var(--ink-600);
  color: var(--text-inv);
}
.on-dark .btn-ghost:hover, .btn-ghost.on-dark:hover {
  border-color: var(--blue-300);
  color: #fff;
  background: rgb(255 255 255 / .05);
}

.btn-lg { padding: 17px 28px; font-size: 1.05rem; }
.btn-sm { padding: 10px 16px; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* =====================================================================
   C3. HERO (dark)  [component 3]
   ===================================================================== */
.hero-dark {
  position: relative;
  background: var(--ink-900);
  color: var(--text-inv-muted);
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
}
/* Two radial glows + subtle 56px grid. */
.hero-dark::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 12% 8%, rgb(38 132 255 / .16), transparent 60%),
    radial-gradient(50% 50% at 92% 30%, rgb(124 92 252 / .14), transparent 62%);
  pointer-events: none;
}
.hero-dark::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 80%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 80%);
  pointer-events: none;
}
.hero-dark > .container { position: relative; z-index: 1; }

.hero-inner { max-width: 820px; margin-inline: auto; text-align: center; }
.hero-inner .eyebrow { margin-bottom: 20px; }
.hero-title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-inv);
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero-lead {
  font-size: var(--fs-body-l);
  line-height: 1.65;
  color: var(--text-inv-muted);
  max-width: 660px;
  margin: 0 auto 32px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 22px;
}

/* =====================================================================
   C4. PRODUCT VISUAL  [component 4] — the flagship vignette (pure CSS)
   ===================================================================== */
.product-visual {
  --pv-gap: clamp(14px, 3vw, 34px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pv-gap);
  max-width: 1000px;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
}

.pv-card {
  background: var(--paper);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  padding: 18px;
  transition: transform var(--dur-hover) var(--ease-out);
  will-change: transform;
}
.pv-doc { transform: rotate(-1.5deg); }
.pv-backlog { transform: rotate(1.5deg); }
.product-visual:hover .pv-doc,
.product-visual:hover .pv-backlog { transform: rotate(0deg); }

/* Left — Confluence-style doc */
.pv-doc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-200);
}
.pv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-200); }
.pv-dot:nth-child(1) { background: #F6786A; }
.pv-dot:nth-child(2) { background: #F5C24B; }
.pv-dot:nth-child(3) { background: #57C08A; }
.pv-doc-title {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-500);
  letter-spacing: 0.01em;
}
.pv-doc-icon {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--info-bg);
  color: var(--blue-500);
  display: grid; place-items: center;
}
.pv-lines { display: flex; flex-direction: column; gap: 9px; }
.pv-line { height: 8px; border-radius: 4px; background: var(--mist-100); }
.pv-line.head { height: 11px; background: linear-gradient(90deg, var(--blue-300), var(--mist-100)); }
.w-95 { width: 95%; } .w-90 { width: 90%; } .w-80 { width: 80%; }
.w-75 { width: 75%; } .w-70 { width: 70%; } .w-65 { width: 65%; }
.w-60 { width: 60%; } .w-55 { width: 55%; } .w-45 { width: 45%; } .w-40 { width: 40%; }

/* Center — pipeline */
.pv-pipeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pv-arrow {
  position: relative;
  width: 64px; height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
}
.pv-arrow::before {
  content: "";
  position: absolute;
  left: 4px; right: 16px;
  top: 50%; height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--grad-brand);
}
.pv-arrow::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--violet-500);
}
.pv-pulse {
  position: absolute;
  left: 4px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(38 132 255 / .35);
  animation: pv-run 2.4s var(--ease-out) infinite;
}
@keyframes pv-run {
  0%   { left: 4px;  opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 40px; opacity: 0; }
}
.pv-chip {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--grad-brand);
  box-shadow: var(--shadow-m);
  white-space: nowrap;
}

/* Right — Jira-style backlog tree */
.pv-backlog { display: flex; flex-direction: column; gap: 8px; }
.pv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  background: var(--mist-50);
  border: 1px solid var(--line-200);
}
.pv-row.sub {
  margin-left: 22px;
  background: var(--paper);
  border-style: dashed;
  padding-block: 6px;
}
.pv-tag {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pv-tag.epic { background: var(--violet-500); }
.pv-tag.story { background: var(--blue-500); }
.pv-tag.sub { background: var(--text-500); }
.pv-row-line { height: 7px; border-radius: 4px; background: var(--mist-100); flex: 1; min-width: 24px; }
.pv-pill {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.pv-pill.ac { color: var(--ok-600); background: var(--ok-bg); }
.pv-pill.sp { color: var(--blue-600); background: var(--info-bg); }
.pv-dep {
  align-self: flex-end;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--violet-500);
  padding: 3px 9px;
  border: 1px dashed var(--violet-500);
  border-radius: var(--radius-pill);
  margin-top: 2px;
}

/* =====================================================================
   C5. LOGO / PLATFORM-TRUST STRIP  [component 5]
   ===================================================================== */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  padding: 16px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: var(--shadow-s);
}
.logo-strip li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-500);
}
.logo-strip li:not(:last-child)::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line-200);
}
.logo-strip .dot-blue { color: var(--blue-600); }

/* =====================================================================
   C6. CARD  [component 6]
   ===================================================================== */
.card {
  background: var(--paper);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-m);
  padding: clamp(24px, 3vw, 32px);
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.card.hover:hover,
a.card:hover,
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
  border-color: var(--blue-300);
  text-decoration: none;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-700); }

.icon-chip {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 1.25rem;
  background: var(--info-bg);
  color: var(--blue-600);
}
.icon-chip.grad { background: var(--grad-brand); color: #fff; }
.icon-chip.violet { background: #F0EBFF; color: var(--violet-500); }
.icon-chip.ok { background: var(--ok-bg); color: var(--ok-600); }

/* Card grids */
.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Dark card surface (for cards inside dark bands). */
.on-dark .card {
  background: var(--ink-700);
  border-color: var(--ink-600);
}
.on-dark .card p { color: var(--text-inv-muted); }
.on-dark .card.hover:hover,
.on-dark a.card:hover,
.on-dark .card-hover:hover { border-color: var(--blue-300); }

/* =====================================================================
   C7. USE-CASE CARD  [component 7]
   ===================================================================== */
.usecase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usecase-card .tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.usecase-card h3 { margin: 0; }
.usecase-card p { flex: 1; }
.usecase-card .arrow {
  align-self: flex-start;
  margin-top: 4px;
  font-weight: 700;
  color: var(--blue-600);
  transition: transform var(--dur-hover) var(--ease-out);
}
.usecase-card:hover .arrow { transform: translateX(4px); }
.usecase-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--violet-500);
  background: #F0EBFF;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* =====================================================================
   C8. DARK BAND  [component 8]
   ===================================================================== */
.band-dark {
  background: var(--ink-800);
  color: var(--text-inv-muted);
}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4, .band-dark strong { color: var(--text-inv); }
.band-dark a:not(.btn) { color: var(--blue-300); }

/* =====================================================================
   C9. STAT / STATS BAND  [component 9]
   ===================================================================== */
.stats-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-s);
}
.stat {
  padding: clamp(24px, 4vw, 40px) 24px;
  text-align: center;
}
.stat + .stat { border-left: 1px solid var(--line-200); }
.stat .num {
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .cap {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--text-500);
  line-height: 1.5;
}
.on-dark .stats-band, .band-dark .stats-band {
  background: transparent;
  border-color: var(--ink-600);
  box-shadow: none;
}
.on-dark .stat + .stat, .band-dark .stat + .stat { border-left-color: var(--ink-600); }
.on-dark .stat .cap, .band-dark .stat .cap { color: var(--text-inv-muted); }

/* =====================================================================
   C10. STEP ROW  [component 10] — compact horizontal steps
   ===================================================================== */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.step-row { display: flex; flex-direction: column; gap: 8px; }
.step-row .num {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 2px var(--blue-300);
  margin-bottom: 4px;
}
.step-row h3 { margin: 0; }
.step-row p { color: var(--text-700); font-size: var(--fs-small); }
.on-dark .step-row .num, .band-dark .step-row .num {
  -webkit-text-stroke-color: rgb(125 179 255 / .55);
}
.on-dark .step-row p, .band-dark .step-row p { color: var(--text-inv-muted); }

/* =====================================================================
   C11. VALUE ITEM  [component 11]
   ===================================================================== */
.value-item {
  padding-left: 22px;
  border-left: 3px solid transparent;
  border-image: var(--grad-brand) 1;
}
.value-item h3 { margin-bottom: 8px; }
.value-item p { color: var(--text-700); }
.on-dark .value-item p, .band-dark .value-item p { color: var(--text-inv-muted); }

/* =====================================================================
   C12. PLAN (pricing) CARD  [component 12]
   ===================================================================== */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  padding: 36px;
  box-shadow: var(--shadow-s);
}
.plan .plan-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-500);
}
.plan .price {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-900);
  margin: 12px 0 4px;
}
.plan .price .per { font-size: 0.95rem; font-weight: 600; color: var(--text-500); }
.plan .plan-desc { color: var(--text-700); margin-bottom: 20px; }
.plan .plan-features { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 24px; }
.plan .plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--text-700);
}
.plan .plan-features li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--blue-600); }
.plan .plan-features li.muted { color: var(--text-500); }
.plan .plan-features li.muted svg { color: var(--text-500); }
.plan .plan-foot { margin-top: auto; font-size: var(--fs-small); color: var(--text-500); }

.plan-pill {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  color: var(--blue-600);
  background: var(--info-bg);
}
.plan-pill.soon { color: var(--violet-500); background: #F0EBFF; }

/* Featured — gradient border via padding/border-box trick. */
.plan-featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-l);
}
@media (min-width: 861px) { .plan-featured { transform: scale(1.02); } }

/* Coming-soon — dashed + muted. */
.plan-soon {
  border-style: dashed;
  background: var(--mist-50);
  box-shadow: none;
}
.plan-soon .price { color: var(--violet-500); }

/* =====================================================================
   C13. CALLOUT  [component 13]
   ===================================================================== */
.callout {
  background: var(--info-bg);
  border-radius: var(--radius-m);
  border-left: 4px solid var(--blue-500);
  padding: 20px 22px;
  color: var(--text-900);
}
.callout p { color: var(--text-700); }
.callout p + p { margin-top: 10px; }
.callout .callout-title { display: block; font-weight: 700; margin-bottom: 4px; color: var(--text-900); }
.callout.warn { background: var(--warn-bg); border-left-color: var(--warn-600); }
.callout.warn .callout-title { color: var(--warn-600); }
.callout.ok { background: var(--ok-bg); border-left-color: var(--ok-600); }
.callout.ok .callout-title { color: var(--ok-600); }
.on-dark .callout, .band-dark .callout {
  background: rgb(38 132 255 / .10);
  color: var(--text-inv);
  border-left-color: var(--blue-300);
}
.on-dark .callout p, .band-dark .callout p { color: var(--text-inv-muted); }

/* =====================================================================
   C14. PROSE / PROSE-LEGAL  [component 14]
   Long-form article scope for about + legal pages.
   ===================================================================== */
.prose { max-width: 72ch; color: var(--text-700); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  font-size: clamp(1.5rem, 2vw + 0.4rem, 1.9rem);
}
.prose h3 { margin-top: 1.8em; margin-bottom: 0.4em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { line-height: 1.75; }
.prose a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { margin-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.5em; line-height: 1.7; }
.prose ul li::marker { color: var(--blue-500); }
.prose ol li::marker { color: var(--text-500); font-weight: 700; }
.prose strong { color: var(--text-900); }
.prose hr {
  border: 0;
  height: 3px;
  width: 48px;
  margin: 2.5em 0;
  border-radius: 2px;
  background: var(--grad-brand);
}
.prose blockquote {
  border-left: 4px solid var(--blue-500);
  padding-left: 18px;
  color: var(--text-500);
  font-style: italic;
}

/* Legal variant — slightly smaller, numbered-heading friendly. */
.prose-legal { font-size: 0.97rem; }
.prose-legal p, .prose-legal li { font-size: 0.97rem; }
.prose-legal h2 { font-size: 1.35rem; margin-top: 2em; }
.prose-legal h3 { font-size: 1.1rem; }

/* =====================================================================
   C15. TABLE  [component 15]
   ===================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-m);
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th, .table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-200);
  vertical-align: top;
}
.table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-500);
  background: var(--mist-50);
  white-space: nowrap;
}
.table tbody tr:nth-child(even) { background: var(--mist-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td strong { color: var(--text-900); }

/* =====================================================================
   C16. DOCS LAYOUT  [component 16]
   ===================================================================== */
.docs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}
.docs-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
}
.docs-sidebar .group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-500);
  margin: 20px 0 8px;
}
.docs-sidebar .group-label:first-child { margin-top: 0; }
.docs-sidebar a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line-200);
  color: var(--text-700);
  font-size: var(--fs-small);
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.docs-sidebar a:hover { color: var(--blue-600); border-left-color: var(--blue-300); text-decoration: none; }
.docs-sidebar a.active { color: var(--blue-600); font-weight: 600; border-left-color: var(--blue-500); }
.docs-content { min-width: 0; }
.docs-content > section { scroll-margin-top: 88px; }

/* Sidebar-as-accordion under 960px (details/summary). */
.docs-accordion { display: none; }

/* =====================================================================
   C17. CODE / PRE  [component 17]
   ===================================================================== */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
:not(pre) > code {
  background: var(--mist-100);
  color: var(--text-900);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
pre {
  background: var(--ink-900);
  color: var(--text-inv);
  border-radius: var(--radius-m);
  padding: 20px;
  overflow-x: auto;
  font-size: var(--fs-small);
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}
pre code { background: none; color: inherit; padding: 0; }

/* =====================================================================
   C18. STEP CARD  [component 18] — big numbered cards (get-api-key)
   ===================================================================== */
.step-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-m);
  padding: 28px;
}
.step-card .step-num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.step-card h3 { margin-bottom: 8px; }
.step-card p { color: var(--text-700); font-size: var(--fs-small); }

/* =====================================================================
   C19. FAQ ITEM  [component 19] — JS-free disclosure
   ===================================================================== */
.faq-item {
  border-bottom: 1px solid var(--line-200);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-900);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  color: var(--blue-600);
  transition: transform var(--dur-hover) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 0 22px; color: var(--text-700); max-width: 68ch; }
.faq-item .faq-body a { color: var(--blue-600); text-decoration: underline; }

/* =====================================================================
   C20. FINAL CTA BAND  [component 20]
   ===================================================================== */
.cta-final {
  position: relative;
  background: var(--ink-900);
  color: var(--text-inv-muted);
  overflow: hidden;
  text-align: center;
}
.cta-final::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 20% 10%, rgb(38 132 255 / .16), transparent 60%),
    radial-gradient(50% 60% at 85% 90%, rgb(124 92 252 / .16), transparent 62%);
  pointer-events: none;
}
.cta-final > .container { position: relative; z-index: 1; }
.cta-final h2 { color: var(--text-inv); margin-bottom: 16px; text-wrap: balance; }
.cta-final .lead { color: var(--text-inv-muted); max-width: 620px; margin: 0 auto 28px; }
.cta-final .hero-cta { justify-content: center; }
.cta-final .cta-note { margin-top: 20px; }

/* =====================================================================
   C21. FOOTER  [component 21]
   ===================================================================== */
.site-footer {
  background: var(--ink-900);
  color: var(--text-inv-muted);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand .nav-logo { color: var(--text-inv); font-size: 1.25rem; }
.footer-brand .nav-logo .ljira { color: var(--blue-300); }
.footer-tagline { margin: 14px 0 16px; color: var(--text-inv-muted); font-size: var(--fs-small); max-width: 32ch; line-height: 1.6; }
.footer-meta { font-size: var(--fs-small); color: var(--text-inv-muted); }
.footer-meta span { display: block; margin-top: 4px; }
.footer-col h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-inv);
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  color: var(--text-inv-muted);
  font-size: var(--fs-small);
  transition: color var(--dur-hover) var(--ease-out);
}
.footer-col a:hover { color: var(--blue-300); text-decoration: none; }
.footer-col a .ext { opacity: 0.7; font-size: 0.85em; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 24px;
  border-top: 1px solid var(--ink-600);
  font-size: var(--fs-small);
  color: var(--text-inv-muted); /* AA on --ink-900 */
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 18px; min-height: 0; }
.footer-bottom a { color: var(--text-inv-muted); }
.footer-bottom a:hover { color: var(--blue-300); text-decoration: none; }

/* =====================================================================
   C23. REVEAL-ON-SCROLL  [component 23]
   Default visible (no-JS safe). Hidden state applies only when <html> has
   the .js flag, and never under reduced-motion.
   ===================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.js .reveal.reveal-in { opacity: 1; transform: none; }
.js .reveal.delay-1 { transition-delay: 60ms; }
.js .reveal.delay-2 { transition-delay: 120ms; }
.js .reveal.delay-3 { transition-delay: 180ms; }
.js .reveal.delay-4 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pv-pulse { animation: none; opacity: 1; }
  .btn, .card, .pv-card, .usecase-card .arrow { transition: none !important; }
}

/* =====================================================================
   6. EXTRA CONTENT HELPERS
   ===================================================================== */
.lead {
  font-size: var(--fs-body-l);
  line-height: 1.65;
  color: var(--text-700);
}
.on-dark .lead, .band-dark .lead { color: var(--text-inv-muted); }

.hero-note, .cta-note {
  font-size: 0.84rem;
  color: var(--text-inv-muted);
  line-height: 1.6;
}
.eyebrow-links a { color: var(--blue-600); font-weight: 600; }
.section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--blue-600);
}
.section-link:hover { text-decoration: none; }
.section-link .arrow { transition: transform var(--dur-hover) var(--ease-out); }
.section-link:hover .arrow { transform: translateX(4px); }
.on-dark .section-link, .band-dark .section-link { color: var(--blue-300); }

/* Before/after comparison (transcription-tax section). */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.compare-card .compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.compare-card .compare-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.compare-card.today { background: var(--mist-50); }
.compare-card.today .compare-label { color: var(--warn-600); }
.compare-card.after { border-color: var(--blue-300); }
.compare-card.after .compare-label { color: var(--blue-600); }

/* Marker lists (check / cross). */
.marker-list { display: flex; flex-direction: column; gap: 12px; }
.marker-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.55;
  color: var(--text-700);
}
.marker-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
}
.marker-list.check li::before {
  background-color: var(--ok-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E8A5F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.marker-list.cross li::before {
  background-color: var(--warn-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B25E09' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* =====================================================================
   7. UTILITIES
   ===================================================================== */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.measure { max-width: 640px; }
.measure-narrow { max-width: 520px; }
.flow > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 14px; }
.cluster.center { justify-content: center; }
.full-bleed { width: 100%; }
.muted { color: var(--text-500); }
.nowrap { white-space: nowrap; }

/* =====================================================================
   8. RESPONSIVE
   ===================================================================== */

/* Product visual stacks under 900px (arrow rotates 90°). */
@media (max-width: 900px) {
  .product-visual {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
    gap: 8px;
  }
  .pv-doc, .pv-backlog { transform: none; }
  .pv-pipeline { flex-direction: row; gap: 16px; padding-block: 4px; }
  .pv-arrow { transform: rotate(90deg); }
}

/* Tablet */
@media (max-width: 860px) {
  /* Nav → hamburger */
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-200);
    box-shadow: var(--shadow-m);
    transform-origin: top;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-hover) var(--ease-out),
                transform var(--dur-hover) var(--ease-out),
                visibility 0s linear var(--dur-hover);
  }
  .nav-open .nav-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--dur-hover) var(--ease-out),
                transform var(--dur-hover) var(--ease-out);
  }
  .nav-menu > a:not(.btn) { padding: 12px; font-size: 1rem; }
  .nav-menu .btn { margin-left: 0; margin-top: 8px; }
  .nav-menu .btn-sm { padding: 13px 16px; font-size: 1rem; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .step-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }

  /* Docs sidebar → top accordion */
  .docs-layout { grid-template-columns: 1fr; gap: 24px; }
  .docs-sidebar { position: static; display: none; }
  .docs-accordion {
    display: block;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-m);
    background: var(--paper);
  }
  .docs-accordion summary {
    padding: 14px 18px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .docs-accordion summary::-webkit-details-marker { display: none; }
}

/* Phone */
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line-200); }
  .on-dark .stat + .stat, .band-dark .stat + .stat { border-top-color: var(--ink-600); }
  .step-grid { grid-template-columns: 1fr; }
  .plan-featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn, .cta-final .hero-cta .btn { width: 100%; }
}