/* ============================================================
   Plagcheck — design tokens
   ============================================================ */
:root {
  --ink: #14161A;
  --ink-2: #161622;
  --ink-soft: #262A30;
  --muted: #525252;
  --muted-2: #9A9A95;
  --line: #E8E7E6;
  --line-2: #EDEDED;
  --paper: #FFFFFF;
  --paper-2: #F7F7F5;
  --paper-3: #F4F7F7;
  --paper-4: #F2F5F4;
  --primary: #AFED75;
  --primary-2: #70DB0D;
  --primary-soft: #EDF6E5;
  --secondary: #7C5CFF;
  --secondary-2: #5B3DF5;
  --secondary-soft: #ECE9FF;
  --secondary-ink: #FFFFFF;
  --primary-ink: var(--ink);
  --primary-ico-bg: var(--ink);
  --primary-ico-fg: #F4F3F2;
  --secondary-ico-bg: var(--paper);
  --secondary-ico-fg: var(--ink);
  --dark-ico-fg: var(--ink);
  --btn-primary-fill: var(--primary); --btn-primary-text: var(--primary-ink); --btn-primary-circle: var(--primary-ico-bg); --btn-primary-arrow: var(--primary-ico-fg);
  --btn-secondary-fill: var(--secondary); --btn-secondary-text: var(--secondary-ink); --btn-secondary-circle: var(--secondary-ico-bg); --btn-secondary-arrow: var(--secondary-ico-fg);
  --btn-dark-fill: var(--ink); --btn-dark-text: #F4F3F2; --btn-dark-circle: var(--primary); --btn-dark-arrow: var(--dark-ico-fg);
  --btn-outline-fill: var(--surface); --btn-outline-text: var(--text); --btn-outline-circle: var(--ink); --btn-outline-arrow: #F4F3F2;
  --btn-ghost-fill: transparent; --btn-ghost-text: var(--text); --btn-ghost-circle: var(--ink); --btn-ghost-arrow: #F4F3F2;
  --success: #147238;
  --alert: #E26A3B;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  --shadow-1: 0 7px 30px -12px rgba(15,18,20,0.04);
  --shadow-2: 0 10px 36px -12px rgba(15,18,20,0.06);
  --shadow-3: 0 24px 50px -12px rgba(15,18,20,0.10);
  --shadow-primary: 0 18px 40px -16px rgba(89,219,57,0.55);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max-w: 1300px;
  --pad-x: clamp(20px, 4vw, 60px);

  /* Gap between a .section-head and the content block beneath it.
     Owned by .section-head (margin-bottom); responsive steps below. */
  --section-head-gap: 60px;

  /* Fluid type-scale. Edit one token here → propagates to every page.
     Each is clamp(min, vw-scaled, max). Mins are tuned so .h-display and
     .h-1 fit a 375px viewport without overflow; smaller scales (body,
     eyebrow, mono) compress only modestly because they already fit. */
  --fs-display: clamp(40px, 7vw, 84px);
  --fs-h-1:     clamp(30px, 4.4vw, 60px);
  --fs-h-2:     clamp(24px, 2.6vw, 34px);
  --fs-body-lg: clamp(16px, 1.3vw, 18px);
  --fs-body:    clamp(14px, 1vw, 15px);
  --fs-eyebrow: clamp(11px, 0.85vw, 12px);
  --fs-mono:    clamp(10px, 0.8vw, 11px);
  /* Bespoke 11/11.5px sizes used across kickers, labels, captions —
     tokenised so they collapse to 10px on phone via the clamp floor. */
  --fs-11:      clamp(10px, 0.8vw, 11px);
  --fs-11-5:    clamp(10px, 0.85vw, 11.5px);

  /* Card padding tokens — semantic sizes that auto-compact on phone
     (see @media ≤720px). Components consume these instead of literal
     px values so a single edit propagates everywhere. */
  --pad-snug:  22px;
  --pad-card:  24px;
  --pad-roomy: 28px;
  --pad-xl:    48px;
  /* Big section-internal spacing (between section-head and content,
     between hero/section blocks, etc). Phone override below shrinks
     it proportionally so layouts don't feel airy on small viewports. */
  --space-lg:  60px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --bg: #FFFFFF;
  --bg-start: var(--paper-4);
  --bg-stop: 200px;
  --surface: #FFFFFF;
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-muted-2: var(--muted-2);
  --border: var(--line);
  --nav-bg: rgba(255,255,255,0.78);
  --code-bg: #0F1116;
  --link: #147238;
  --link-hover: #0E5C2C;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0B0D11;
  --bg-start: #14181E;
  --surface: #181C22;
  --surface-2: #1F242C;
  --surface-3: #14181E;
  --paper-2: #1F242C;
  --paper-3: #14181E;
  --paper-4: #0F1116;
  --text: #F4F3F2;
  --text-muted: #B6B6B0;
  --text-muted-2: #7A7A75;
  --muted: #B6B6B0;
  --muted-2: #7A7A75;
  --border: #2A2D33;
  --btn-outline-fill: var(--surface); --btn-outline-text: var(--text); --btn-outline-circle: var(--text); --btn-outline-arrow: var(--ink);
  --btn-ghost-fill: transparent; --btn-ghost-text: var(--text); --btn-ghost-circle: var(--text); --btn-ghost-arrow: var(--ink);
  --line: #2A2D33;
  --nav-bg: rgba(15,17,22,0.78);
  --primary-soft: rgba(175,237,117,0.14);
  --shadow-1: 0 7px 30px -12px rgba(0,0,0,0.45);
  --shadow-2: 0 10px 36px -12px rgba(0,0,0,0.55);
  --shadow-3: 0 24px 50px -12px rgba(0,0,0,0.7);
  --shadow-primary: 0 18px 40px -16px rgba(89,219,57,0.35);
  --link: var(--primary);
  --link-hover: var(--primary-2);
  --success: #4ADE80;
  color-scheme: dark;
}

html.theme-anim,
html.theme-anim body,
html.theme-anim .card,
html.theme-anim .chip,
html.theme-anim .nav-link {
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-start) 0%, var(--bg) var(--bg-stop, 200px));
  background-repeat: no-repeat;
}
body {
  font-family: var(--font-sans);
  color: var(--text);
  font-feature-settings: "ss01", "ss02", "cv11";
  text-wrap: pretty;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/images/pattern-bg.png") repeat 0 0;
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}
[data-theme="dark"] body::before { opacity: 0.1; }

/* Cursor dot-glow — lime dots light up under the pointer, revealed
   through a soft radial mask. `.dot-glow` is injected by script.js
   (mouse + fine-pointer only; skipped on touch / reduced-motion), so
   no markup changes per page. The inner layer tiles the SAME dot grid
   as `body::before` (same png, same 20px cell, both fixed from 0,0),
   so the lime dots land exactly on the base dots — no doubling. Only
   --mx/--my change per frame, and the layer is isolated on its own GPU
   compositor layer (translateZ), so nothing else on the page repaints. */
.dot-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  transform: translateZ(0);
  -webkit-mask-image: radial-gradient(circle at var(--mx, -300px) var(--my, -300px), #000 0, #000 90px, transparent 240px);
          mask-image: radial-gradient(circle at var(--mx, -300px) var(--my, -300px), #000 0, #000 90px, transparent 240px);
}
.dot-glow.is-on { opacity: 0.85; }
[data-theme="dark"] .dot-glow.is-on { opacity: 0.6; }
.dot-glow-dots {
  position: absolute;
  inset: 0;
  background: var(--primary-2);
  -webkit-mask-image: url("../assets/images/pattern-bg.png");
          mask-image: url("../assets/images/pattern-bg.png");
  -webkit-mask-size: 20px 20px;
          mask-size: 20px 20px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   Type utilities
   ============================================================ */
.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fs-mono); color: var(--text); }
.mono.muted { color: var(--text-muted-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--primary-2);
  box-shadow: 0 0 0 0 rgba(112,219,13,0.45);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(112,219,13,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(112,219,13,0); }
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.035em; font-weight: 600; }
.h-display {
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.h-1 {
  font-size: var(--fs-h-1);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.h-2 {
  font-size: var(--fs-h-2);
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.body-lg { font-size: var(--fs-body-lg); line-height: 1.58; letter-spacing: -0.01em; color: var(--text-muted); }
.body { font-size: var(--fs-body); line-height: 1.55; color: var(--text-muted); }
.body-sm { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }

.block { display: block; }
.flex-spacer { flex: 1; }
/* Responsive text helpers — swap a full label for a shorter one on phone
   without duplicating components. .phone-only hidden ≥721, shown ≤720;
   .phone-hide is the inverse. */
.phone-only { display: none; }
@media (max-width: 720px) {
  .phone-only { display: inline; }
  .phone-hide { display: none; }
}

/* ============================================================
   Layout
   ============================================================ */
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section { padding: clamp(72px, 9vw, 120px) 0; }
/* Dark first section extends its dark surface up behind the sticky nav (admin section tool). */
section.asec-dark-top { position: relative; }
section.asec-dark-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 240px; background: var(--asec-top-bg, #0B0D11); pointer-events: none; }

/* ============================================================
   Buttons / chips / cards / pills
   ============================================================ */
/* Schema: pill button with optional .ico circle on the right.
   Sizes: btn-lg (56px) · btn-md (48px, default) · btn-sm (42px) — match Figma 114:3380.
   Colors: btn-dark · btn-primary · btn-outline (gray) · btn-ghost (white).
   Ico-circle rule: contrast vs button bg — dark bg → lime ico, light bg → ink ico. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease-out), background .2s, color .2s, box-shadow .25s;
  will-change: transform;
}
.btn .ico {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform .35s var(--ease-out);
}
.btn .ico svg { transition: transform .35s var(--ease-out); }
.btn:hover .ico svg { transform: rotate(45deg); }

/* Sizes — symmetric outer padding on all four sides. The label-span owns its
   horizontal breathing room via .btn > span:not(.ico) padding (see below).
   This keeps the button balanced when stretched (justify-content / flex on
   text), since neither side is asymmetrically padded against the .ico. */
.btn,
.btn-md {
  height: 48px;
  padding: 8px;
  font-size: 15px;
}
.btn .ico,
.btn-md .ico { width: 32px; height: 32px; }
.btn .ico svg,
.btn-md .ico svg { width: 16px; height: 16px; }

.btn-lg {
  height: 56px;
  padding: 10px;
  font-size: 16px;
}
.btn-lg .ico { width: 36px; height: 36px; }
.btn-lg .ico svg { width: 20px; height: 20px; }

.btn-sm {
  height: 42px;
  padding: 6px;
  font-size: 14px;
}
.btn-sm .ico { width: 30px; height: 30px; }
.btn-sm .ico svg { width: 16px; height: 16px; }

.btn-xs {
  height: 36px;
  padding: 6px;
  font-size: 13px;
}
.btn-xs .ico { width: 24px; height: 24px; }
.btn-xs .ico svg { width: 16px; height: 16px; }

/* Label — horizontal padding replaces the old `gap` between text and .ico
   AND the old asymmetric left button-padding. Markup convention: button text
   MUST be wrapped in a <span>, e.g. `<span>Label</span>`. Without the wrapper,
   text glyphs sit flush against the button's outer padding. */
.btn > span:not(.ico),
.btn-md > span:not(.ico) { padding: 0 10px; }
.btn-lg > span:not(.ico) { padding: 0 10px; }
.btn-sm > span:not(.ico) { padding: 0 8px; }
.btn-xs > span:not(.ico) { padding: 0 10px; }

/* Stretched modifier — button fills its container, the label-span takes the
   remaining width and centers the glyph; the .ico (if present) stays docked
   to the right. Works because the button's outer padding is already symmetric. */
.btn-block { width: 100%; }
.btn-block > span:not(.ico) { flex: 1; text-align: center; }

/* Color variants */
.btn-primary { background: var(--btn-primary-fill); color: var(--btn-primary-text); }
.btn-primary:hover { background: var(--primary-2); box-shadow: var(--shadow-primary); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary .ico { background: var(--btn-primary-circle); color: var(--btn-primary-arrow); }
.btn-secondary { background: var(--btn-secondary-fill); color: var(--btn-secondary-text); }
.btn-secondary:hover { background: var(--secondary-2); }
.btn-secondary .ico { background: var(--btn-secondary-circle); color: var(--btn-secondary-arrow); }
.btn-secondary:active { transform: translateY(1px); }

.btn-dark { background: var(--btn-dark-fill); color: var(--btn-dark-text); }
.btn-dark:hover { background: #000; box-shadow: 0 14px 30px -16px rgba(0,0,0,0.6); }
.btn-dark .ico { background: var(--btn-dark-circle); color: var(--btn-dark-arrow); }

.btn-outline {
  background: var(--btn-outline-fill); color: var(--btn-outline-text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn-outline:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--text-muted-2);
}
.btn-outline .ico { background: var(--btn-outline-circle); color: var(--btn-outline-arrow); }

.btn-ghost { background: var(--btn-ghost-fill); color: var(--btn-ghost-text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost .ico { background: var(--btn-ghost-circle); color: var(--btn-ghost-arrow); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 500; font-size: 12.5px; color: var(--text);
  transition: background .2s, transform .2s var(--ease-out);
}
.chip:hover { background: var(--surface); transform: translateY(-1px); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }

.tag-dark {
  display: inline-flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 14px 0 10px; border-radius: 999px;
  background: var(--ink); color: #F4F3F2;
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.04em;
}
.tag-dark::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 12px rgba(175,237,117,0.8); animation: blip 1.6s ease-in-out infinite; }
@keyframes blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .65; transform: scale(.85); }
}

.status-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--primary-soft);
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-11);
  letter-spacing: 0.04em; color: var(--text); text-transform: uppercase;
}
[data-theme="dark"] .status-pill { color: var(--primary); }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--success); }

.divider { height: 1px; background: var(--border); width: 100%; }

/* Standalone section divider — drop between two sections (or anywhere in <main>)
   without nesting it inside either neighbour. Width matches the CONTENT area
   inside .wrap on every breakpoint (max-w outer minus pad-x on each side):
   - viewport < max-w → width = 100% - 2 * pad-x
   - viewport ≥ max-w → width = max-w - 2 * pad-x   (so it aligns with .wrap's
     inner content, not the outer max-w box)
   Vertical spacing is intentionally 0; surrounding .section padding provides it. */
hr.section-divider, .section-divider {
  display: block;
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 0 auto;
  width: calc(min(100%, var(--max-w)) - 2 * var(--pad-x));
}

/* ============================================================
   Reveal animation (scroll-driven)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Section heads
   ============================================================ */
.section-head {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
  margin-bottom: var(--section-head-gap);
}
.section-head-main { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.section-head-main h2 { max-width: 640px; }
.section-head-right { max-width: 380px; color: var(--muted); }

/* ============================================================
   Logo
   ============================================================ */
.logo { display: inline-flex; align-items: center; color: var(--text); }
.logo-svg { display: block; height: auto; }
.nav .logo-svg { width: var(--logo-w, 178px); height: var(--logo-h, auto); }

/* ============================================================
   Nav
   ============================================================ */
.nav-wrap {
  position: sticky; top: 12px; z-index: 40;
  padding-left: var(--pad-x); padding-right: var(--pad-x);
  width: 100%; pointer-events: none;
}
.nav {
  margin: 0 auto;
  max-width: var(--max-w);
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--border);
  opacity: 0.96;
  border-radius: 999px;
  box-shadow: 0 7px 30px -12px rgba(15,18,20,0.04);
  transition: box-shadow .35s var(--ease-out), border-color .35s, opacity .35s;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 22px;
  height: 62px;
  pointer-events: auto;
}
.nav.scrolled {
  opacity: 1;
  box-shadow: 0 14px 40px -18px rgba(15,18,20,0.18);
}
.nav-links { display: flex; gap: 28px; }
.nav-link {
  font-weight: 500; font-size: 14px; color: var(--text);
  position: relative; padding: 6px 2px; display: inline-block;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--text); border-radius: 2px;
  transition: right .35s var(--ease-out);
}
.nav-link:hover::after { right: 0; }
.nav-link[aria-current="page"]::after { right: 0; }
.nav-cta { display: flex; gap: 8px; align-items: center; }
/* Burger — direct child of .nav, positioned LEFT of logo on tablet/mobile.
   Hidden on desktop (>1100), shown at ≤1100. */
.nav > button[aria-label="Menu"] {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: transparent; border-radius: 999px;
  color: var(--text);
  flex-shrink: 0;
  transition: background .2s;
}
.nav > button[aria-label="Menu"]:hover { background: var(--surface-2); }
.nav > button[aria-label="Menu"] { position: relative; }
.nav-menu-icon {
  position: absolute; inset: 0; margin: auto;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.nav-menu-icon-x { opacity: 0; transform: rotate(-45deg); }
.nav > button[aria-expanded="true"] .nav-menu-icon-burger {
  opacity: 0; transform: rotate(45deg);
}
.nav > button[aria-expanded="true"] .nav-menu-icon-x {
  opacity: 1; transform: rotate(0);
}
/* CTA suffix " — free" — visible on desktop, hidden at ≤1100px when the
   primary button shrinks to btn-xs sizing. */
.nav-cta-suffix { display: inline; }

/* ============================================================
   Mobile / tablet open menu (≤1100px)
   ============================================================ */
.nav-menu {
  position: fixed; inset: 0;
  z-index: 30;                       /* sits below .nav-wrap (z:40) so the X stays clickable */
  background: var(--bg);
  display: none;                     /* hidden on desktop — only shown ≤1100 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.nav-menu.is-open { opacity: 1; pointer-events: auto; }
.nav-menu-inner {
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 100px var(--pad-x) 40px;  /* 100px = nav-top(12) + nav-height(62) + breathing(26) */
  display: flex; flex-direction: column;
  gap: 28px;
  overflow-y: auto;
}
.nav-menu-eyebrow { color: var(--text-muted); }
.nav-menu-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.nav-menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  font-size: clamp(24px, 5.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: color .25s var(--ease-out);
  /* Per-link stagger reveal — initial state */
  opacity: 0; transform: translateY(10px);
}
.nav-menu-link:hover { color: var(--primary); }
.nav-menu-link > span:first-child { flex: 1; min-width: 0; }
.nav-menu-link-arrow {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  flex-shrink: 0;
  transition: background .25s var(--ease-out), color .25s, transform .25s;
}
.nav-menu-link:hover .nav-menu-link-arrow {
  background: var(--primary); color: var(--ink);
  transform: translate(2px, -2px);
}
.nav-menu-link-arrow svg { width: 14px; height: 14px; }
.nav-menu-cta {
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: 12px;
  opacity: 0; transform: translateY(10px);  /* whole block fades in last */
}
/* Reveal cascade on open — links 1..5 stagger, CTAs as final beat. */
.nav-menu.is-open .nav-menu-link,
.nav-menu.is-open .nav-menu-cta {
  opacity: 1; transform: translateY(0);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), color .25s, background .25s;
}
.nav-menu.is-open li:nth-child(1) .nav-menu-link { transition-delay: 80ms; }
.nav-menu.is-open li:nth-child(2) .nav-menu-link { transition-delay: 130ms; }
.nav-menu.is-open li:nth-child(3) .nav-menu-link { transition-delay: 180ms; }
.nav-menu.is-open li:nth-child(4) .nav-menu-link { transition-delay: 230ms; }
.nav-menu.is-open li:nth-child(5) .nav-menu-link { transition-delay: 280ms; }
.nav-menu.is-open .nav-menu-cta { transition-delay: 340ms; }

@media (max-width: 1100px) {
  .nav-menu { display: block; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: var(--space-lg); padding-bottom: clamp(48px, 6.5vw, 80px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 24px; }
.hero-left { display: flex; flex-direction: column; gap: 32px; }
.pill-new {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  width: fit-content;
}
.pill-new-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--primary); }
.pill-new-dot span { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); display: block; }
.pill-new-text { font-size: var(--fs-11-5); letter-spacing: 0.04em; }

.hero-title { display: flex; flex-direction: column; }
.hero-title-row { display: inline-flex; align-items: center; gap: 18px; }

/* Per-line mask reveal — text rises from below an overflow:hidden mask.
   Stagger via per-element --rise-delay (set inline). Triggers on page load. */
.line-rise {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.line-rise-inner {
  display: inline-block;
  transform: translateY(110%);
  animation: lineRise 1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--rise-delay, 0ms);
  will-change: transform;
}
@keyframes lineRise { to { transform: translateY(0); } }

.hero-bar {
  display: inline-block;
  width: 120px; height: 14px; border-radius: 999px; background: var(--primary);
  transform-origin: left center;
  transform: scaleX(0);
  animation: growBar 900ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms forwards;
}
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .line-rise-inner { transform: none; animation: none; }
  .hero-bar { transform: scaleX(1); animation: none; }
}

.hero-lead { max-width: 600px; margin: 0; }

.upload-card {
  padding: 16px; border-radius: 22px;
  border-color: var(--primary-2);
  animation: uploadCardPulse 2.6s var(--ease-in-out) infinite;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
/* Idle border breathes from a very light line gray up to the brand green
   — slow, subtle, paused once focused / drag-hovered / reduced-motion. */
@keyframes uploadCardPulse {
  0%, 100% { border-color: var(--line); }
  50%      { border-color: var(--primary-2); }
}
/* Hover: freezes the pulse at its green endpoint and deepens the drop
   shadow — no positional lift, just the contrast change as the cue. */
.upload-card:hover {
  animation: none;
  border-color: var(--primary-2);
  box-shadow: var(--shadow-3);
}
/* Active state mirrors the .field-input focus signature (see #ds-last in the
   design system): ink border + soft-lime focus ring stacked over the card's
   own drop shadow so the lift is preserved. */
.upload-card:focus-within {
  animation: none;
  border-color: var(--text);
  box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-2);
  outline: none;
}
.upload-card.is-over {
  animation: none;
  border-color: var(--primary-2);
  box-shadow: 0 24px 60px -22px rgba(89,219,57,0.45);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .upload-card { animation: none; }
}
.upload-row { display: flex; flex-direction: column; gap: 16px; padding: 6px 0; }
.upload-input {
  border: 0; outline: 0; width: 100%; background: transparent;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--text);
  padding: 0;
}
.upload-input::placeholder { color: var(--text-muted-2); }
.upload-controls { display: flex; align-items: center; gap: 12px; }
.upload-attach {
  width: 40px; height: 40px; border-radius: 12px; background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  transition: background .2s, transform .2s var(--ease-out);
}
.upload-attach:hover { background: #EFEFEC; transform: rotate(90deg); }
[data-theme="dark"] .upload-attach:hover { background: #262A30; }
.upload-hint { font-size: var(--fs-11-5); letter-spacing: 0.02em; text-transform: none; line-height: 1.4; }
.upload-scan .scan-ico-spin { display: none; }
.upload-scan.is-busy .scan-ico-default { display: none; }
.upload-scan.is-busy .scan-ico-spin { display: block; }
.upload-divider { margin: 12px 0; }
.upload-foot { display: flex; align-items: center; gap: 8px; }
.upload-meta { letter-spacing: 0.04em; text-transform: none; }

/* "Paste URL" pill expands into a slim pill-shaped URL input + ink arrow
   submit button. Borrows the .chip pill geometry + .field-input focus signature
   (ink border on focus-within) so it sits in the same visual family.
   Explicit [hidden] override because .chip { display: inline-flex } and the
   .upload-url-form rule below both beat the UA `[hidden] { display: none }`. */
.upload-url-chip[hidden],
.upload-url-form[hidden] { display: none; }
.upload-url-form {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px;
  padding: 0 4px 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  flex: 1; min-width: 0; max-width: 360px;
  transition: border-color .2s var(--ease-out), background .2s;
}
.upload-url-form:focus-within {
  border-color: var(--text);
  background: var(--surface);
}
.upload-url-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-sans); font-weight: 500; font-size: 12.5px;
  color: var(--text); height: 28px; padding: 0;
}
.upload-url-input::placeholder { color: var(--text-muted-2); }
.upload-url-submit {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--ink); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .25s var(--ease-out);
}
.upload-url-submit:hover { background: #000; transform: translateX(2px); }

/* Hero right (report card) */
.hero-right { display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }
.report-card-wrap { width: 100%; max-width: 460px; flex: 1; display: flex; flex-direction: column; }
.report-card {
  padding: var(--pad-snug); border-radius: 28px; box-shadow: var(--shadow-3);
  flex: 1;
  display: flex; flex-direction: column; gap: 16px; justify-content: space-between;
}
/* Stats + snippet stay glued together with their normal gap; the card's
   space-between only stretches the head ↔ ring ↔ foot gaps above. */
.report-card-foot { display: flex; flex-direction: column; gap: 16px; }
.report-head { display: flex; justify-content: space-between; align-items: center; }
.report-file { display: flex; gap: 10px; align-items: center; }
.report-file-badge {
  width: 32px; height: 32px; border-radius: 8px; background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: 0.06em; color: var(--text);
}
.report-file-name { font-weight: 600; font-size: 13.5px; }
.report-file-meta { font-size: var(--fs-11); margin-top: 4px; letter-spacing: 0.02em; text-transform: none; }

.ring-wrap {
  display: flex; justify-content: center; align-items: center; padding: 8px 0; position: relative;
}
.ring-svg {
  width: clamp(160px, 22vw, 220px); height: clamp(160px, 22vw, 220px);
  transform: rotate(-90deg);
}
.ring-fg { transition: stroke-dashoffset .1s linear; }
.ring-tick { transition: stroke-dashoffset .1s linear; }
.ring-center { position: absolute; text-align: center; }
.ring-value { display: inline-flex; align-items: baseline; gap: 6px; }
.ring-num { font-weight: 600; font-size: clamp(38px, 5.4vw, 52px); letter-spacing: -0.04em; line-height: 1; }
.ring-pct { font-weight: 500; font-size: clamp(14px, 1.6vw, 18px); color: var(--muted); }
.ring-label { font-size: 10px; letter-spacing: 0.08em; margin-top: 6px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-box {
  background: var(--paper-2); border-radius: 16px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .2s;
}
.stat-box:hover { background: #EFEFEC; }
[data-theme="dark"] .stat-box:hover { background: #262A30; }
.stat-row { display: flex; align-items: center; gap: 8px; }
.stat-dot { width: 8px; height: 8px; border-radius: 999px; }
.stat-val { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
.stat-suffix { font-weight: 500; font-size: 14px; color: var(--muted); }

.snippet {
  background: var(--paper-2); border-radius: 16px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.snippet-head { display: flex; justify-content: space-between; }
.snippet-head .mono { font-size: var(--fs-11); letter-spacing: 0.08em; }
.snippet-text { margin: 0; font-size: 13.5px; line-height: 1.58; letter-spacing: -0.01em; color: var(--text); }
.snippet-text mark { background: rgba(175,237,117,0.7); padding: 0 2px; border-radius: 3px; color: var(--ink); }

/* ============================================================
   Mission
   ============================================================ */
.mission { padding: 20px 0 0; }
.mission-grid {
  display: grid; grid-template-columns: 310px 1fr; gap: 24px;
  padding: 0 0 clamp(72px, 9vw, 120px);
  align-items: start;
}
.mission-body { display: flex; flex-direction: column; gap: var(--space-lg); }
.mission-title {
  font-weight: 600;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.3; letter-spacing: -0.025em;
  margin: 0; max-width: 970px; color: var(--text);
}
/* Scroll-linked word ink: script.js splits .mission-title into .word spans and
   sets each word's data-ink (rest → green → done) from scroll position. Three
   crisp, discrete states — no blended half-tones, no colour gradient across the
   text. Rest is the final text at low opacity (faint); the wave front flips a
   few words to solid green; passed words snap to solid final text. State changes
   are instant (no transition) to keep colours sharp. No-JS / reduced-motion
   never adds .is-staggered, so the h2 renders as plain var(--text) text. */
.mission-title .word { color: var(--text); opacity: .22; }
.mission-title .word[data-ink="green"] { color: var(--primary-2); opacity: 1; }
.mission-title .word[data-ink="done"]  { color: var(--text);   opacity: 1; }
.mission-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mission-stat {
  border-left: 1px solid var(--text-muted-2);
  padding: 16px 0 8px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.mission-stat-row { display: inline-flex; align-items: center; gap: 6px; }
.mission-stat-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: var(--text);
}
.mission-stat-suffix {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--text-muted);
}
.mission-stat-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   Steps
   ============================================================ */
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.step-card {
  border-radius: 28px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: var(--pad-snug);
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .35s var(--ease-out), box-shadow .35s;
  box-shadow: var(--shadow-1);
  min-height: 380px;
}
.step-card[data-active="true"] {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -22px rgba(15,18,20,0.18);
}
.step-card-dark {
  background: var(--ink-2);
  color: #F4F3F2;
  border-color: transparent;
}
.step-card-dark[data-active="true"] {
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.55);
}
.step-head { display: flex; justify-content: space-between; align-items: center; }
.step-head-left { display: flex; align-items: center; gap: 10px; }
.step-head-labels { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 3px; }
.step-num { font-weight: 600; font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -0.04em; line-height: 1; color: inherit; }
.step-label-eyebrow {
  font-size: 9.5px; letter-spacing: 0.08em; line-height: 1;
  color: var(--text-muted-2);
}
.step-label {
  font-size: 10.5px; letter-spacing: 0.06em; line-height: 1;
  color: var(--text);
}
.step-card-dark .step-label-eyebrow { color: rgba(244,243,242,0.55); }
.step-card-dark .step-label { color: #F4F3F2; }
.step-head-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--primary-2); flex-shrink: 0;
}
.step-demo { flex: 1; display: flex; align-items: stretch; }
.step-text { display: flex; flex-direction: column; gap: 8px; }
.step-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.step-body { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.step-card-dark .step-body { color: rgba(244,243,242,0.7); }

.demo-input {
  width: 100%; border-radius: 16px; border: 1.5px dashed var(--line);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; justify-content: space-between;
  background: var(--paper-2);
}
.demo-input-hint { font-size: 10.5px; letter-spacing: 0.08em; }
.demo-input-row { display: flex; gap: 8px; align-items: center; }
.demo-input-row .chip { background: var(--surface); }

/* Mini upload card — animated demo (step 1) */
.demo-upload {
  width: 100%; min-width: 0;
  background: var(--paper-2);
  border-radius: 16px;
  padding: 16px;
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
}
.demo-upload-card {
  width: 100%; min-width: 0;
  background: var(--surface);
  border: 0.75px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 7px 26px -9px rgba(15,18,20,0.06);
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.demo-upload.is-in .demo-upload-card { opacity: 1; transform: translateY(0); }

/* Demo cursor (mock pointer) */
.demo-upload-cursor {
  position: absolute;
  width: 16px; height: 19px;
  pointer-events: none;
  z-index: 3;
  /* Default = text-input target X/Y, but pushed below the card + invisible */
  top: 56px;
  right: 68px;
  left: auto;
  opacity: 0;
  transform: translateY(110px);
  transition:
    opacity .35s var(--ease-out),
    top .6s var(--ease-out),
    right .6s var(--ease-out),
    transform .65s var(--ease-out);
  filter: drop-shadow(0 2px 4px rgba(15,18,20,0.18));
}
.demo-upload-cursor svg { width: 100%; height: 100%; display: block; }

/* Cursor at the text input — rises from below to here */
.demo-upload.is-cursor-input .demo-upload-cursor {
  opacity: 1;
  transform: translateY(0);
}
/* Cursor glides over to the Scan button (continuous move from text → button) */
.demo-upload.is-cursor-button .demo-upload-cursor {
  opacity: 1;
  top: 82px;
  right: 34px;
  transform: translateY(0);
}
/* Click scale-down */
.demo-upload.is-cursor-press .demo-upload-cursor {
  transform: translateY(0) scale(0.86);
  transition: opacity .35s var(--ease-out), top .55s var(--ease-out), right .55s var(--ease-out), transform .12s var(--ease-out);
}
/* Fade out in place after click (added on top of is-cursor-button) */
.demo-upload.is-cursor-exit .demo-upload-cursor {
  opacity: 0;
}

.demo-upload-input {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-11-5); color: var(--text); line-height: 1.2;
  height: 18px;
  display: flex; align-items: center;
  padding: 4px 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.demo-upload-placeholder { color: var(--text-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-upload.is-typing .demo-upload-placeholder { display: none; }
.demo-upload-typed { color: var(--text); white-space: pre; }
.demo-upload-caret {
  display: none;
  width: 1px; height: 12px;
  background: var(--text);
  margin-left: 1px;
  animation: demoCaretBlink 0.9s steps(2, end) infinite;
}
.demo-upload.is-typing .demo-upload-caret { display: inline-block; }
@keyframes demoCaretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.demo-upload-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.demo-upload-attach {
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--paper-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.demo-upload-hint {
  font-size: 8.5px; letter-spacing: 0.04em; line-height: 1.35;
  color: var(--text-muted-2); text-transform: none;
  white-space: nowrap; flex-shrink: 0;
}
.demo-upload-scan {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: #F4F3F2;
  border-radius: 999px; padding: 6px 8px 6px 12px;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-11-5);
  transition: background .25s var(--ease-out), transform .15s var(--ease-out), box-shadow .25s var(--ease-out);
  flex-shrink: 0;
}
.demo-upload-scan-ico {
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--primary); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease-out);
}
.demo-upload.is-hover .demo-upload-scan {
  background: #000;
  box-shadow: 0 10px 24px -10px rgba(20,22,26,0.55);
  transform: translateY(-1px);
}
.demo-upload.is-hover .demo-upload-scan-ico { transform: rotate(45deg); }
.demo-upload.is-press .demo-upload-scan { transform: translateY(0) scale(0.97); }

.demo-upload-divider { height: 0.75px; background: var(--border); width: 100%; }

.demo-upload-foot { display: flex; align-items: center; gap: 7px; padding-bottom: 2px; flex-wrap: nowrap; min-width: 0; }
.demo-upload-from,
.demo-upload-meta {
  font-size: 8.5px; letter-spacing: 0.06em;
  color: var(--text-muted-2); text-transform: none;
  white-space: nowrap; flex-shrink: 0;
}
.demo-upload-chip {
  background: var(--paper-2); border: 0.75px solid var(--border);
  border-radius: 999px; padding: 5px 9px;
  font-family: var(--font-sans); font-weight: 500; font-size: 9.5px;
  color: var(--text);
  white-space: nowrap; flex-shrink: 0;
}

/* Mini stats card — animated demo (step 3) */
.demo-stats {
  width: 100%; min-width: 0;
  background: var(--paper-2);
  border-radius: 16px;
  padding: 16px;
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
}
.demo-stats-card {
  width: 100%; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 11px;
  box-shadow: 0 7px 26px -9px rgba(15,18,20,0.06);
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.demo-stats.is-in .demo-stats-card { opacity: 1; transform: translateY(0); }

.demo-stats-row { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.demo-stats-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.demo-stats-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.demo-stats-row[data-color="ink"] .demo-stats-dot { background: var(--ink); }
.demo-stats-row[data-color="lime"] .demo-stats-dot { background: var(--primary); }
.demo-stats-row[data-color="accent"] .demo-stats-dot { background: var(--primary-2); }
.demo-stats-label {
  font-size: 9.5px; letter-spacing: 0.06em; line-height: 1;
  color: var(--text-muted-2); text-transform: uppercase;
  white-space: nowrap;
}
.demo-stats-val { display: inline-flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
.demo-stats-num {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 13px; letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.demo-stats-pct {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-11); color: var(--muted);
}

.demo-stats-bar {
  height: 6px; width: 100%;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}
[data-theme="dark"] .demo-stats-bar { background: rgba(244,243,242,0.10); }
.demo-stats-bar-fill {
  display: block; height: 100%; width: 0%;
  border-radius: 10px;
  transition: width 1.1s var(--ease-out);
}
.demo-stats-row[data-color="ink"] .demo-stats-bar-fill { background: var(--ink); }
.demo-stats-row[data-color="lime"] .demo-stats-bar-fill { background: var(--primary); }
.demo-stats-row[data-color="accent"] .demo-stats-bar-fill { background: var(--primary-2); }
[data-theme="dark"] .demo-stats-row[data-color="ink"] .demo-stats-bar-fill { background: var(--text); }

.demo-stats-foot { display: flex; align-items: center; gap: 6px; padding-top: 4px; min-width: 0; }
.demo-stats-foot-ico {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--primary); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.demo-stats-foot-text {
  font-size: 9.5px; letter-spacing: 0.04em; line-height: 1;
  color: var(--text); text-transform: none; white-space: nowrap;
}

.demo-scan {
  width: 100%; border-radius: 16px; background: var(--ink-soft);
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  height: 180px;
}
.demo-scan-head { display: flex; justify-content: space-between; align-items: flex-start; }
.demo-scan-pill { background: var(--primary) !important; color: var(--ink) !important; }
.demo-scan-pill::before { display: none; }
.demo-scan-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); }

.demo-scan-num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.demo-scan-time {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 24px; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--primary);
}
.demo-scan-caption {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted-2);
}

/* Scrolling bar feed — pattern repeated 2× in JS, translateY 0 → -50% seamlessly loops */
.demo-scan-bars-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.demo-scan-bars {
  display: flex; flex-direction: column;
  width: 100%;
  animation: scanScroll 12s linear infinite;
}
.dsb {
  height: 6px;
  border-radius: 999px;
  margin-bottom: 6px;
  flex-shrink: 0;
  width: 0;
  opacity: 0;
  background: rgba(244,243,242,0.06); /* "scanning beam" — initial neutral state */
  animation-name: dsbAppear;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--bar-delay, 0s);
  /* per-bar --bar-w (target width), --bar-final (final color), --bar-delay set inline by JS */
}
@keyframes scanScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
/* Each bar's animation cycle = scroll cycle (12s). Delay is computed so the
   growth phase (5–13% of keyframes) starts exactly when the bar enters the
   viewport from below. The opacity fade-in (0→5%) and fade-out (92→100%)
   hide the width snap which happens off-screen. */
@keyframes dsbAppear {
  0%   { opacity: 0; width: 0;            background: rgba(244,243,242,0.06); }
  5%   { opacity: 1; width: 0;            background: rgba(244,243,242,0.06); }
  13%  { opacity: 1; width: var(--bar-w); background: rgba(244,243,242,0.06); }
  15%  { opacity: 1; width: var(--bar-w); background: var(--bar-final); }
  92%  { opacity: 1; width: var(--bar-w); background: var(--bar-final); }
  100% { opacity: 0; width: var(--bar-w); background: var(--bar-final); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-scan-bars { animation: none; }
  .dsb { animation: none; opacity: 1; width: var(--bar-w); background: var(--bar-final); }
}

.demo-report { width: 100%; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label { font-size: 12px; font-weight: 500; width: 130px; flex-shrink: 0; color: var(--text); }
.bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.bar-fill {
  height: 100%; width: 0%; background: var(--primary); border-radius: 999px;
  transition: width 1.2s var(--ease-out);
}
.bar-fill-dark { background: var(--text); }
.bar-value { font-size: 10.5px; letter-spacing: 0.06em; width: 60px; text-align: right; color: var(--muted); text-transform: none; }
.demo-report-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px 0; border-top: 1px solid var(--line);
}
.demo-report-foot .mono { font-size: 10.5px; letter-spacing: 0.08em; }
.demo-report-avg { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; }

/* ============================================================
   Bento
   ============================================================ */
/* Alternating section fill (light cool-gray, theme-flippable) */
#inside, #reviews, #heritage, #compare, #inside-scan, #audience { background-color: var(--surface-3); }

.bento-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 24px; align-items: stretch; }
.bento-dark {
  position: relative;
  background: var(--ink-2); color: #F4F3F2; border-radius: 28px;
  padding: var(--pad-card); min-height: 460px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.bento-dark-head { display: flex; justify-content: space-between; align-items: center; }
.bento-dark-head .mono { color: rgba(244,243,242,0.5); font-size: 10.5px; letter-spacing: 0.08em; }
.bento-dark-body {
  align-self: center; margin: 28px 0;
  font-size: 16px; line-height: 1.7; color: rgba(244,243,242,0.85); max-width: 460px;
}
.bento-dark-body .hl {
  background: linear-gradient(transparent 60%, rgba(175,237,117,0.35) 60%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 2px; border-radius: 3px; color: #F4F3F2;
  transition: background .3s ease;
}
.bento-dark:hover .hl { background: linear-gradient(transparent 0%, rgba(175,237,117,0.35) 0%); }
.bento-dark-pills { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.bento-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(244,243,242,0.06); border: 1px solid rgba(244,243,242,0.08);
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.06em;
}
.bento-pill-dot { width: 6px; height: 6px; border-radius: 999px; }
.bento-pill-v { color: #F4F3F2; }
.bento-dark-title { margin: 0; font-size: 28px; letter-spacing: -0.03em; font-weight: 600; }
.bento-dark-sub { margin: 10px 0 0; color: rgba(244,243,242,0.6); font-size: 13.5px; }

.small-bento-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; }
.small-bento {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px;
  display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.small-bento:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(15,18,20,0.12); }
.small-bento-head { display: flex; justify-content: space-between; align-items: center; }
.small-bento-head .mono { font-size: 10.5px; letter-spacing: 0.08em; }
.small-bento-row { display: flex; align-items: center; gap: 16px; }
.small-bento-title { font-weight: 600; font-size: 32px; letter-spacing: -0.03em; line-height: 1; flex: 1; }
.small-bento-graphic { width: 70px; height: 50px; flex-shrink: 0; }
.small-bento-body { margin-top: auto; }

/* ---------- Bento top redesign: AI fingerprint + Multilingual + Journals ---------- */
/* Shared numbered pill */
.bento-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; padding: 6px;
  border-radius: 999px;
  background: var(--paper-2); color: var(--text);
  font-size: var(--fs-11); text-transform: none; letter-spacing: 0;
}
.bento-num-lime { background: var(--primary); color: var(--ink); }

/* Left — AI fingerprint dark tile */
.bento-ai {
  position: relative;
  background: var(--ink); color: #F4F3F2;
  border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  overflow: hidden;
}
.bento-ai-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bento-ai-meta { display: flex; align-items: center; gap: 10px; }
.bento-ai-label { font-size: var(--fs-11); letter-spacing: 0.08em; color: #F4F3F2; }
.bento-engine {
  display: inline-flex; align-items: center;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--ink-soft);
  font-size: var(--fs-11); letter-spacing: 0.06em; color: var(--muted-2); text-transform: none;
}

/* Stacked mock-doc cards */
.bento-ai-stack {
  position: relative; flex: 1;
  display: flex; align-items: flex-end;
  padding-top: 50px;
}
.bento-doc-ghost {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
}
.bento-doc-ghost-1 { width: 94%; height: calc(100% - 30px); z-index: 2; }
.bento-doc-ghost-2 { width: 88%; height: calc(100% - 14px); z-index: 1; }
.bento-doc {
  position: relative; z-index: 3; width: 100%;
  background: rgba(45,45,45,0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232,231,230,0.10);
  border-radius: 18px; padding: var(--pad-roomy);
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
}
.bento-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bento-doc-avatar { width: 50px; height: 50px; border-radius: 999px; object-fit: cover; }
.bento-doc-ref { font-size: 10px; letter-spacing: 0.04em; color: var(--muted-2); text-transform: none; }
.bento-doc-text {
  margin: 0; font-size: 20px; line-height: 1.6; letter-spacing: -0.01em; color: #F4F3F2;
}
.bento-doc-text .hl {
  background: linear-gradient(transparent 58%, rgba(175,237,117,0.4) 58%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 1px; color: #F4F3F2; font-weight: 600;
  transition: background .3s ease;
}
.bento-ai:hover .bento-doc-text .hl { background: linear-gradient(transparent 0%, rgba(175,237,117,0.4) 0%); }
.bento-doc-tags { display: flex; gap: 12px; flex-wrap: wrap; }
.bento-flag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--primary); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.04em;
}
.bento-flag-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); }
.bento-conf {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--ink); border: 1px solid var(--ink-soft);
  font-size: var(--fs-11); letter-spacing: 0.04em; color: var(--muted-2); text-transform: none;
}
.bento-conf-num { color: var(--primary); font-size: 10px; }

.bento-ai-foot { display: flex; flex-direction: column; gap: 12px; }
.bento-ai-title { margin: 0; font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.bento-ai-sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted-2); }

/* Right — 2 stacked light tiles */
.bento-right { display: flex; flex-direction: column; gap: 16px; }
.bento-sm {
  flex: 1;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.bento-sm:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(15,18,20,0.12); }
.bento-sm-top { display: flex; align-items: center; gap: 12px; }
.bento-sm-label { font-size: var(--fs-11); letter-spacing: 0.08em; color: var(--text-muted); }
.bento-sm-mid { display: flex; align-items: center; gap: 32px; }
.bento-sm-mid-top { align-items: flex-start; }
.bento-sm-img { width: 110px; height: 110px; object-fit: contain; flex-shrink: 0; }
.bento-sm-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.bento-sm-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; }
.bento-sm-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* Language chips */
.bento-lang-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.bento-lang {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  background: var(--paper-2); color: var(--text);
  font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.02em;
}
.bento-lang-more { color: var(--text-muted); }

/* Journal skeleton list */
.bento-journal { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bento-journal-list { display: flex; flex-direction: column; gap: 16px; }
.bento-journal-item { display: flex; gap: 8px; align-items: flex-start; }
.bento-journal-avatar { width: 21px; height: 21px; border-radius: 999px; background: var(--line); flex-shrink: 0; }
.bento-journal-lines { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.bento-journal-title-line { height: 5px; width: 42%; border-radius: 20px; background: var(--line); }
.bento-journal-line { height: 4px; width: 100%; border-radius: 20px; background: var(--line); opacity: 0.7; }
.bento-journal-line.short { width: 82%; }
.bento-journal-stat { font-size: var(--fs-11); letter-spacing: 0.04em; color: var(--text-muted); text-transform: none; }
.bento-journal-stat-num { font-weight: 700; color: var(--text); }

.bento-bottom-section { padding-top: clamp(72px, 9vw, 120px); }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.profile-card {
  border-radius: 24px; padding: var(--pad-roomy) var(--pad-card); min-height: 320px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  /* Layout: head sticks to top with consistent gap → graphic sits at the
     same y across all cards → body pushed to the bottom via margin-top:auto.
     Replaces `justify-content: space-between` which let the graphic drift
     based on neighbour heights, so icons no longer aligned across cards. */
  display: flex; flex-direction: column; gap: 16px;
  cursor: pointer;
  transition: background .35s var(--ease-out), color .35s var(--ease-out),
              border-color .35s var(--ease-out), transform .35s var(--ease-out),
              box-shadow .35s var(--ease-out);
}
.profile-card:hover {
  background: var(--ink); color: #F4F3F2;
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 24px 40px -22px rgba(15,18,20,0.45);
}
/* Legacy permanent-dark variant (kept for design-system demos) */
.profile-card-dark { background: var(--ink-2); color: #F4F3F2; border-color: transparent; }
.profile-card-dark .profile-kicker { color: rgba(244,243,242,0.55); }
.profile-card-dark .profile-text { color: rgba(244,243,242,0.7); }

.profile-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.profile-head-left { display: flex; align-items: center; gap: 12px; }
.profile-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 7px 10px;
  border-radius: 999px;
  background: var(--paper-2); color: var(--text);
  font-size: var(--fs-11); text-transform: none; letter-spacing: 0.04em;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.profile-card:hover .profile-num { background: var(--primary); color: var(--ink); }

.profile-kicker {
  font-size: 12px; letter-spacing: 0.08em; color: var(--text);
  transition: color .35s var(--ease-out);
}
.profile-card:hover .profile-kicker { color: #F4F3F2; }

.profile-arrow-btn {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--primary); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.6);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
  flex-shrink: 0;
}
.profile-arrow-btn svg { transition: transform .35s var(--ease-out); }
.profile-card:hover .profile-arrow-btn { opacity: 1; transform: scale(1); }
.profile-card:hover .profile-arrow-btn:hover svg { transform: translate(2px, -2px); }

.profile-graphic {
  width: 90px; height: 90px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.profile-graphic img { width: 100%; height: 100%; object-fit: contain; display: block; }

.profile-body { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.profile-title {
  margin: 0; font-size: clamp(18px, 1.95vw, 22px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.18;
}
.profile-text {
  margin: 0; font-size: 13px; line-height: 1.58; letter-spacing: -0.01em;
  color: var(--text-muted);
  transition: color .35s var(--ease-out);
}
.profile-card:hover .profile-text { color: rgba(244,243,242,0.7); }

.analyzed-wrap { margin-top: 32px; }
.analyzed-strip {
  background: var(--primary); border-radius: 24px; padding: 16px 22px;
  display: flex; align-items: center; gap: 22px; color: var(--ink);
}
.analyzed-sl { display: flex; flex-direction: column; gap: 2px; }
.analyzed-kicker { font-size: var(--fs-11); letter-spacing: 0.08em; color: var(--ink); }
.analyzed-mid { display: flex; align-items: baseline; gap: 8px; }
.analyzed-word { font-weight: 600; font-size: 34px; letter-spacing: -0.02em; }
.analyzed-daily { font-size: 14px; letter-spacing: 0.02em; color: var(--ink); text-transform: none; }
.wave { flex: 1; display: flex; justify-content: center; align-items: center; gap: 4px; }
.wave-bar {
  width: 4px; background: var(--ink); border-radius: 2px;
  opacity: 0; transform: scaleY(0.2); transform-origin: center;
  transition: transform .6s var(--ease-out), opacity .4s;
}
.wave.in .wave-bar { opacity: 1; transform: scaleY(1); }

/* ============================================================
   Reviews
   ============================================================ */
.reviews-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.reviews-head-left { display: flex; flex-direction: column; gap: 18px; }
.reviews-title { max-width: 700px; }
.reviews-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.reviews-stars { display: flex; gap: 4px; color: var(--text); }
.reviews-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.reviews-score-num { font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; }
.reviews-score-caption { font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-muted-2); text-transform: none; }

.reviews-grid { margin-top: var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }

/* Featured — dark card with swappable background image */
.reviews-featured {
  position: relative; overflow: hidden;
  border-radius: 28px; padding: 36px;
  min-height: 532px;
  display: flex; flex-direction: column;
  color: #F4F3F2;
  background: var(--ink);
}
.reviews-featured-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transition: opacity .45s var(--ease-out), transform .7s var(--ease-out);
}
.reviews-featured-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 1; }
.reviews-featured-content {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  transition: opacity .4s var(--ease-out), transform .45s var(--ease-out);
}
/* Crossfade while paging to the next big review */
.reviews-featured.is-swapping .reviews-featured-bg { opacity: 0; transform: scale(1.05); }
.reviews-featured.is-swapping .reviews-featured-content { opacity: 0; transform: translateY(10px); }
.reviews-featured-top { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; }
.reviews-quote-mark { font-family: var(--font-sans); font-weight: 700; font-size: 56px; line-height: 0.4; color: var(--primary); }
.reviews-featured-quote {
  margin: 0; font-size: 24px; font-weight: 500; line-height: 1.38;
  letter-spacing: -0.02em; color: #F4F3F2; max-width: 400px;
}
.reviews-featured-author { display: flex; align-items: center; gap: 14px; }
.reviews-featured-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; padding: 14px 11px; border-radius: 999px;
  background: var(--primary); color: var(--ink);
  font-family: var(--font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em;
  flex-shrink: 0;
}
.reviews-featured-id { display: flex; flex-direction: column; gap: 3px; }
.reviews-featured-name { font-weight: 600; font-size: 15px; color: #F4F3F2; }
.reviews-featured-role { font-size: 10.5px; letter-spacing: 0.02em; color: rgba(244,243,242,0.7); text-transform: none; }

/* 2×2 review cards */
.reviews-cards {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px;
  transition: opacity .4s var(--ease-out), transform .45s var(--ease-out);
}
/* Crossfade in sync with the featured card while paging */
.reviews-cards.is-swapping { opacity: 0; transform: translateY(10px); }
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 22px; padding: var(--pad-card);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 192px;
  transition: transform .4s var(--ease-out), box-shadow .4s,
              background-color .3s var(--ease-out), color .3s, border-color .3s;
}
/* The accent look (lime / ink invert) is both a permanent modifier
   (.review-card-accent, used in the DS demo) AND the hover state for plain
   .review-card. Each accent rule below is duplicated onto :hover. */
.review-card-accent,
.review-card:hover { background: var(--primary); border-color: transparent; color: var(--ink); }
.review-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -20px rgba(15,18,20,0.18); }
.review-head { display: flex; justify-content: space-between; align-items: center; }
.review-stars { display: flex; gap: 2px; color: var(--text); transition: color .3s; }
.review-card-accent .review-stars,
.review-card:hover .review-stars { color: var(--ink); }
.review-source {
  padding: 3px 8px; border-radius: 999px;
  background: var(--paper-2); color: var(--text);
  font-size: 9.5px; letter-spacing: 0.04em;
  transition: background-color .3s, color .3s;
}
.review-card-accent .review-source,
.review-card:hover .review-source { background: var(--ink); color: var(--primary); }
.review-text { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.48; letter-spacing: -0.01em; }
.review-foot { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  background: var(--primary); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  transition: background-color .3s, color .3s;
}
.review-card-accent .review-avatar,
.review-card:hover .review-avatar { background: var(--ink); color: var(--primary); }
.review-id { display: flex; flex-direction: column; gap: 2px; }
.review-name { font-weight: 600; font-size: 13px; }
.review-role { font-size: 9.5px; letter-spacing: 0.04em; color: var(--text-muted-2); transition: color .3s; }
.review-card-accent .review-role,
.review-card:hover .review-role { color: rgba(20,22,26,0.55); }

.reviews-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
.reviews-arrows { display: flex; gap: 10px; }
.rv-arrow {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  transition: background .2s, transform .2s var(--ease-out);
}
.rv-arrow:hover { background: var(--paper-2); transform: translateY(-1px); }
/* "Read more reviews" uses the standard outline button, but with a lime ico circle (per Figma) */
.reviews-more .ico { background: var(--primary); color: var(--ink); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.faq-grid { margin-top: var(--space-lg); display: flex; align-items: flex-start; gap: 16px; }
.faq-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.faq-row {
  border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  padding: 18px 24px; transition: background .25s, border-color .25s;
}
.faq-row.is-open { background: var(--faq-bg, var(--surface-2)); border-color: var(--faq-bg, var(--surface-2)); }
.faq-row-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  text-align: left;
}
.faq-q { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; line-height: 1.38; color: var(--text); }
.faq-toggle {
  width: 28px; height: 28px; border-radius: 999px; background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  transition: background .2s, color .2s, transform .35s var(--ease-out);
  flex-shrink: 0; margin-left: 16px;
}
.faq-row.is-open .faq-toggle { transform: rotate(180deg); background: var(--ink); color: #F4F3F2; }
/* Both icons ship in the markup; CSS picks the one for the row's state, so the
   script never injects HTML — it only toggles .is-open. */
.faq-toggle .faq-ico-minus { display: none; }
.faq-row.is-open .faq-toggle .faq-ico-plus { display: none; }
.faq-row.is-open .faq-toggle .faq-ico-minus { display: block; }
.faq-body { overflow: hidden; height: 0; transition: height .4s var(--ease-out); }
.faq-a { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 560px; }

/* ============================================================
   Pricing
   ============================================================ */
.pricing-section { background: var(--surface-3); }
.pricing-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.pricing-head-left { display: flex; flex-direction: column; gap: 18px; }
.pricing-title { max-width: 520px; }
.pricing-head-right { display: inline-flex; align-items: center; gap: 14px; }
.pricing-save { padding: 6px 12px; background: var(--primary); border-radius: 999px; font-size: var(--fs-11); letter-spacing: 0.06em; color: var(--ink); }

.tabs {
  position: relative; display: inline-flex; padding: 4px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
}
.tabs-pill {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px);
  background: var(--text); border-radius: 999px;
  transform: translateX(0); width: 0;
  transition: transform .35s var(--ease-out), width .35s var(--ease-out);
}
.tab {
  position: relative; padding: 8px 14px; border-radius: 999px;
  font-weight: 500; font-size: 13px; color: var(--text);
  transition: color .25s;
}
.tab.tab-active { color: var(--bg); }

.pricing-grid {
  margin-top: var(--space-lg);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
/* Per-card tab-switch microanimation. Speed (.7s) matches the site-wide
   .reveal-stagger so the initial scroll-reveal of the prices and the tab
   swap feel identical. Stagger (0/70/140ms) reuses the existing
   .reveal-stagger.in > *:nth-child delays, so cards fade out 1→2→3 and
   then in 1→2→3.

   Two hidden states (asymmetric magnitudes — user-driven decision):
     OUT  → translateY(-6px) : 6px upward (half of IN), feels lighter.
     IN   → translateY(+12px): 12px coming up from below.
   Between OUT-end and IN-start the cards snap (transition: none) from
   -6px to +12px so the IN phase always starts from "below". */
.pricing-grid > .price-card {
  transition: opacity .33s var(--ease-out), transform .33s var(--ease-out);
}
/* Pricing-only stagger override (1/3 of the site-wide .reveal-stagger.in
   nth-child delays) — keeps the 1→2→3 cadence felt but ~3× snappier. */
.pricing-grid > .price-card:nth-child(2) { transition-delay: 25ms; }
.pricing-grid > .price-card:nth-child(3) { transition-delay: 50ms; }
.pricing-grid[data-swap="out"] > .price-card { opacity: 0; transform: translateY(-6px); }
.pricing-grid[data-swap="pre-in"] > .price-card {
  opacity: 0; transform: translateY(12px);
  transition: none;
}
.price-card {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 28px; padding: var(--pad-roomy);
  display: flex; flex-direction: column; gap: 24px;
  transition: transform .35s var(--ease-out), box-shadow .35s;
  position: relative; overflow: hidden;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(15,18,20,0.22); }
.price-card-dark {
  background: var(--ink); color: #F4F3F2; border-color: transparent;
  box-shadow: 0 30px 50px -15px rgba(0,0,0,0.18);
}

.price-top { display: flex; flex-direction: column; gap: 10px; }
.price-name-row { display: flex; justify-content: space-between; align-items: center; min-height: 24px; }
.price-name { font-size: 13px; letter-spacing: 0.08em; color: var(--ink); }
.price-card-dark .price-name { color: #fff; }
.price-popular {
  font-size: 10.5px; letter-spacing: 0.06em; padding: 5px 10px;
  border-radius: 999px; background: var(--primary); color: var(--ink);
}

.price-num-row { display: flex; align-items: center; gap: 8px; }
.price-whole { font-weight: 600; font-size: clamp(40px, 5.5vw, 60px); letter-spacing: -0.04em; line-height: 1; }
.price-tail { display: flex; flex-direction: column; }
.price-frac { font-weight: 600; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.01em; line-height: 1.1; }
.price-mo { font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-muted-2); text-transform: none; }

/* Rate box ($/1,000 words + tagline) */
.price-rate {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--paper-2); border-radius: 12px; padding: 8px 12px;
}
.price-card-dark .price-rate { background: rgba(247,247,247,0.10); }
.price-rate-head { display: flex; align-items: center; gap: 8px; }
.price-rate-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--primary-2); flex-shrink: 0; }
.price-rate-text { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-muted); }
.price-card-dark .price-rate-text { color: #F4F3F2; }
.price-rate-num { color: var(--link); }
.price-card-dark .price-rate-num { color: var(--primary); }
.price-rate-desc { font-size: 12px; line-height: 1.5; letter-spacing: -0.01em; color: var(--text-muted-2); }

/* Feature list */
.price-notes { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.price-note { display: flex; gap: 16px; align-items: flex-start; }
.price-check {
  width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
  background: var(--primary); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.price-check svg { width: 12px; height: 12px; }
.price-note-text { display: flex; flex-direction: column; gap: 2px; }
.price-note-title { font-size: 14px; font-weight: 500; color: var(--text); }
.price-card-dark .price-note-title { color: #F4F3F2; }
.price-note-sub { font-size: var(--fs-11); letter-spacing: 0.04em; color: var(--text-muted-2); text-transform: none; }

/* CTAs */
.price-cta { margin-top: auto; width: 100%; justify-content: center; }
.price-cta.btn-outline { background: var(--surface-2); }
.price-cta.btn-primary { padding-left: 8px; padding-right: 8px; }
.price-cta.btn-primary > span:not(.ico) { flex: 1; text-align: center; }
.price-cta.btn-primary .ico { background: var(--paper); color: var(--ink); }

/* Pricing dots — hidden on desktop/tablet, shown only when the grid becomes
   a horizontal snap-scroller on phone (see @media ≤720px). */
.pricing-dots { display: none; }
.pricing-dot {
  appearance: none; background: var(--border); border: 0; padding: 0;
  width: 8px; height: 8px; border-radius: 999px; cursor: pointer;
  transition: background .25s var(--ease-out), width .25s var(--ease-out);
}
.pricing-dot.is-active { background: var(--ink); width: 24px; }

/* ============================================================
   CTA
   ============================================================ */
/* CTA section sits flush against a plain (un-filled) section above it,
   otherwise white-on-white double padding leaves a big empty gap.
   When the preceding sibling IS a gray-fill section (alternating list +
   .pricing-section), restore the standard .section top padding for breathing room. */
.cta-section { padding-top: 0; padding-bottom: var(--space-lg); }
:is(#inside, #reviews, #heritage, #compare, #inside-scan, #audience, .pricing-section) + .cta-section {
  padding-top: clamp(72px, 9vw, 120px);
}
/* Dark-by-design card: the markup carries data-theme="dark" so the semantic
   text tokens resolve to their on-dark values by default, and flip cleanly
   when the section editor re-themes the strip (light/dark). */
.cta-strip {
  background: var(--ink-2); color: var(--text); border-radius: 28px;
  padding: var(--pad-xl); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  position: relative; overflow: hidden;
}
.cta-left { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.cta-kicker { font-size: var(--fs-11); letter-spacing: 0.08em; color: var(--text-muted-2); }
.cta-kicker-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); margin-right: 10px; }
.cta-title { color: var(--text); max-width: 600px; display: flex; flex-direction: column; }
.cta-sub { color: var(--text-muted); max-width: 460px; margin: 0; }
/* On the dark banner, lift the kicker + sub for stronger contrast on the dark
   surface (only while the strip is dark — a re-themed light banner keeps the
   softer muted tones). */
.cta-strip[data-theme="dark"] .cta-kicker { color: var(--text-muted); }
.cta-strip[data-theme="dark"] .cta-sub { color: var(--text); }

/* cta-title line-rise — gated on .cta-strip.in so it fires on scroll, not page load */
.cta-title .line-rise-inner { animation: none; }
.cta-strip.in .cta-title .line-rise-inner {
  animation: lineRise 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--rise-delay, 0ms);
}

.cta-panel {
  position: relative; overflow: hidden;
  border-radius: 28px; padding: var(--pad-roomy);
  background: linear-gradient(130deg, #fff 0%, var(--primary) 100%);
  color: var(--ink);
  display: flex; flex-direction: column;
  min-height: 360px;
}
.cta-panel-body { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.cta-panel-logo {
  position: absolute; top: 10px; right: 12px;
  width: auto; height: auto; max-width: none;
  pointer-events: none;
}
.cta-panel-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.cta-panel-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--ink);
}
.cta-panel-arrow svg { width: 26px; height: 26px; }
.cta-panel-title {
  position: relative; z-index: 1;
  margin: 0; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.03em; line-height: 1; font-weight: 600;
}
.cta-panel-meta { position: relative; z-index: 1; font-size: var(--fs-11); letter-spacing: 0.06em; color: var(--ink); }
.cta-panel-btn { position: relative; z-index: 1; width: 100%; margin-top: 20px; padding-left: 10px; padding-right: 10px; }
.cta-panel-btn > span:not(.ico) { flex: 1; text-align: center; }
.cta-glow {
  position: absolute; right: -100px; top: -100px;
  width: 320px; height: 320px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(175,237,117,0.18), transparent);
  pointer-events: none;
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--surface); padding: 64px 0; }
.footer-top { display: flex; gap: 24px; align-items: stretch; }

.footer-brand { width: 417px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.footer-logo { display: inline-flex; }
.footer-brand-foot { display: flex; flex-direction: column; gap: 16px; }
.footer-tagline { margin: 0; max-width: 380px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.footer-status { align-self: flex-start; }
.footer-status::before { background: var(--primary-2); }

.footer-cols { flex: 1; min-width: 0; display: flex; gap: 24px; }
.footer-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-head { font-size: var(--fs-11); letter-spacing: 0.08em; color: var(--text-muted-2); }
.footer-list { display: flex; flex-direction: column; gap: 14px; }
.footer-list li { font-size: 14px; line-height: 1.5; }
.foot-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); transition: color .2s; }
.foot-link:hover { color: var(--link-hover); }
.footer-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--primary); color: var(--ink);
  font-size: 9px; letter-spacing: 0.04em;
}

.footer-offices { display: flex; flex-direction: column; gap: 14px; }
.footer-office { font-size: 14px; line-height: 1.5; color: var(--text-muted); white-space: pre-line; }
.footer-office-divider { height: 1px; width: 100%; background: var(--border); }

.footer-divider { height: 1px; width: 100%; background: var(--border); margin: var(--space-lg) 0; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-copy { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.footer-lang { display: flex; gap: 18px; }
.footer-lang .mono { font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted-2); text-transform: none; }
.footer-lang-active { color: var(--link); }

/* ============================================================
   Form fields (labelled inputs, select, textarea, checkbox)
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; }
.field-label .field-req { color: var(--success); margin-left: 2px; }
.field-label .field-opt { color: var(--text-muted-2); font-weight: 400; }

.field-input, .field-select, .field-textarea {
  width: 100%;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s;
}
.field-input, .field-select { height: 50px; padding: 0 16px; }
.field-textarea { min-height: 148px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.field-input::placeholder, .field-textarea::placeholder { color: var(--text-muted-2); }
.field-input:focus, .field-select:focus, .field-textarea:focus {
  outline: none;
  border-color: var(--text);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

/* Select: native chevron removed, custom one drawn on the wrapper */
.field-select-wrap { position: relative; }
.field-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; cursor: pointer; }
.field-select-wrap::after {
  content: ""; position: absolute; right: 19px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* Checkbox */
.field-check { display: flex; gap: 12px; align-items: flex-start; }
.field-check input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0; margin: 1px 0 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; position: relative;
  transition: background .2s, border-color .2s;
}
.field-check input:checked { background: var(--primary); border-color: var(--primary); }
.field-check input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
.field-check input:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-soft); }
.field-check-label { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.field-check-label a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .field-check-label a { color: var(--primary); }

/* Success / status banner */
.form-status {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 18px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--success) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 38%, var(--border));
  color: var(--success); font-size: 14px; font-weight: 500;
}
/* Gap to the content below only when the banner leads other elements
   (e.g. above the contact form). No trailing space when it's the last child. */
.form-status:not(:last-child) { margin-bottom: 24px; }
.form-status-ico { display: inline-flex; flex-shrink: 0; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-hero { padding-top: 76px; padding-bottom: clamp(56px, 7vw, 96px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: start; }

.contact-intro { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; }
.contact-title { display: flex; flex-direction: column; }
.contact-lead { max-width: 440px; margin: 0; }
.contact-anchors { display: flex; flex-wrap: wrap; gap: 10px; }

.contact-details { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 4px; }
.contact-detail { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--border); }
.contact-detail-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-detail-body { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.contact-detail-value { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.45; }
.contact-detail-value a { transition: color .2s; }
.contact-detail-value a:hover { color: var(--link-hover); }

.contact-form-card { padding: clamp(24px, 3vw, 40px); }
.contact-form-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.contact-form-title { font-size: 24px; letter-spacing: -0.03em; }
.contact-submit { width: 100%; justify-content: center; }

/* Help cards */
.contact-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.help-card {
  padding: var(--pad-roomy); display: flex; flex-direction: column; gap: 20px;
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.help-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.help-card-ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.help-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.help-card-title { font-size: 21px; letter-spacing: -0.025em; line-height: 1.15; }
.help-card-text { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.help-card .btn { align-self: flex-start; }

/* Utility: section that butts directly against the section above it.
   Used by contact-banner, pricing trust strip, etc. */
.section-flush-top { padding-top: 0; }

/* Global banner (image block + offices) */
.contact-banner {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 48px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: clamp(28px, 4vw, 56px); overflow: hidden;
}
.contact-banner-media { display: flex; align-items: center; justify-content: center; }
.contact-banner-media img { width: clamp(160px, 18vw, 220px); height: auto; filter: drop-shadow(0 24px 40px rgba(15,18,20,0.12)); }
.contact-banner-body { display: flex; flex-direction: column; gap: 24px; }
.contact-banner-title { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }
.contact-banner-text { color: var(--text-muted); max-width: 460px; margin: 0; }
.contact-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 4px; }
.contact-office { display: flex; flex-direction: column; gap: 8px; }
.contact-office-name { font-size: 15px; font-weight: 500; color: var(--text); }
.contact-office-addr { font-size: 14px; line-height: 1.5; color: var(--text-muted); white-space: pre-line; }

/* ============================================================
   About page
   ============================================================ */
.about-hero { padding-top: 76px; padding-bottom: clamp(40px, 5vw, 64px); }
.about-hero-inner { max-width: 840px; display: flex; flex-direction: column; gap: 28px; }
.about-hero-title { display: flex; flex-direction: column; }
.about-hero-lead { max-width: 620px; margin: 0; }
.about-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Value cards ("What we stand for") — static informational cards */
.about-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { padding: var(--pad-roomy); display: flex; flex-direction: column; gap: 16px; }
.value-card-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.value-card-title { font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; }
.value-card-text { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* Timeline — year | content rows separated by dividers */
.timeline { display: flex; flex-direction: column; margin: 0; padding-left: 0; list-style: none; }
.timeline-item {
  display: grid; grid-template-columns: 132px 1fr; gap: 32px;
  padding: var(--pad-card) 0; border-top: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: 1px solid var(--border); }
.timeline-year { font-size: 14px; color: var(--text-muted); padding-top: 3px; }
.timeline-content { display: flex; flex-direction: column; gap: 6px; }
.timeline-title { font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; }
.timeline-text { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 620px; }

/* ============================================================
   Pricing page
   ============================================================ */
.pricing-page-hero { padding-top: 76px; padding-bottom: clamp(36px, 5vw, 60px); }
.pricing-page-hero-inner { max-width: 840px; display: flex; flex-direction: column; gap: 28px; }
.pricing-page-title { display: flex; flex-direction: column; }
.pricing-page-lead { max-width: 620px; margin: 0; }

/* Trust strip — 4 quick promises in one card */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--pad-card) 8px;
}
.trust-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 24px; border-left: 1px solid var(--border);
}
.trust-item:first-child { border-left: 0; }
.trust-item-ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: clamp(10px, 1.5vw, 16px);
}
/* Icon glyph rendered via mask from assets/icons/*.svg.
   Set `--ico: url(../assets/icons/name.svg)` inline on the .trust-item-ico to
   pick the icon. background uses the element's color, so it stays theme-aware
   (lime in trust-strip-dark, ink in light). Requires HTTP serving — file://
   blocks cross-origin SVG loads in Chrome/Edge. */
.trust-item-ico[style*="--ico"]::after {
  content: "";
  display: block;
  width: 24px; height: 24px;
  background-color: currentColor;
  -webkit-mask-image: var(--ico);
          mask-image: var(--ico);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}
.trust-item-title { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.trust-item-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

/* Dark variant — flips bg + colors. Add `.trust-strip-dark` alongside
   `.trust-strip`. Lime icons on a subtle dark container give the same
   visual rhythm as .step-card-dark / .cta-strip. */
.trust-strip-dark {
  background: var(--ink-2);
  color: #F4F3F2;
  border-color: transparent;
}
.trust-strip-dark .trust-item {
  border-left-color: rgba(244, 243, 242, 0.12);
  border-top-color: rgba(244, 243, 242, 0.12);
}
.trust-strip-dark .trust-item-ico {
  background: rgba(244, 243, 242, 0.08);
  color: var(--primary);
}
.trust-strip-dark .trust-item-title { color: #F4F3F2; }
.trust-strip-dark .trust-item-sub { color: rgba(244, 243, 242, 0.65); }

/* Plan comparison table */
.compare-wrap {
  background: var(--compare-bg, var(--surface)); border: 1px solid var(--compare-border, var(--border));
  border-radius: var(--r-xl); overflow-x: auto;
}
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.compare-table th, .compare-table td {
  padding: 16px 20px; text-align: center; font-size: 14.5px;
  border-bottom: 1px solid var(--compare-border, var(--border));
}
.compare-table thead th {
  font-weight: 500; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text); background: var(--compare-head-bg, var(--surface-2));
}
.compare-table thead .compare-col-popular { color: var(--link); }
[data-theme="dark"] .compare-table thead .compare-col-popular { color: var(--primary); }
.compare-table tbody th {
  text-align: left; font-weight: 500; color: var(--text);
  width: 38%; background: var(--compare-bg, var(--surface));
}
.compare-table tbody td { color: var(--text-muted); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
/* Subtle accent tint on the popular (3rd) column */
.compare-table thead th:nth-child(3),
.compare-table tbody td:nth-child(3) { background: var(--compare-highlight, rgba(175,237,117,0.06)); }
[data-theme="dark"] .compare-table thead th:nth-child(3),
[data-theme="dark"] .compare-table tbody td:nth-child(3) { background: var(--compare-highlight, rgba(175,237,117,0.05)); }
.compare-check {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--success);
}
[data-theme="dark"] .compare-check { color: var(--primary); }
.compare-dash { color: var(--text-muted-2); }

/* ============================================================
   Plagiarism Checker page — big hero form
   ============================================================ */
.check-hero { padding-top: 72px; padding-bottom: clamp(48px, 6vw, 80px); }
.check-hero-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-bottom: 40px; }
.check-hero-title { display: flex; flex-direction: column; }
.check-hero-lead { max-width: 600px; margin: 0; }
.check-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 24px; align-items: start;
}

/* Main form card */
.check-form { padding: clamp(20px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.check-form-tabs {
  position: relative;
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border-radius: var(--r-pill);
  width: fit-content;
}
/* Sliding pill behind the active tab. JS sets --tab-pill-x / --tab-pill-w
   from the active .check-tab's offsetLeft / offsetWidth; CSS animates. */
.check-form-tabs::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: var(--tab-pill-w, 0);
  transform: translateX(var(--tab-pill-x, 0));
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15,18,20,0.08);
  border-radius: var(--r-pill);
  transition: transform .3s var(--ease-out), width .3s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.check-tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--r-pill);
  font-weight: 500; font-size: 14px; color: var(--text-muted);
  background: transparent;
  transition: color .25s var(--ease-out);
}
.check-tab:hover { color: var(--text); }
.check-tab.is-active { color: var(--text); }
.check-tab svg { width: 16px; height: 16px; }

.check-form-pane { display: flex; flex-direction: column; gap: 18px; }
.check-form-pane[hidden] { display: none; }

/* Dashed dropzone */
.check-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 280px; padding: 40px 24px; text-align: center;
  border: 2px dashed var(--border); border-radius: var(--r-lg);
  background: var(--surface-2);
  transition: border-color .25s var(--ease-out), background .25s;
}
.check-dropzone.is-over {
  border-color: var(--primary-2); background: var(--primary-soft);
}
.check-dropzone-files { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 4px; }
.check-file {
  display: inline-flex; align-items: flex-end; justify-content: center;
  width: 50px; height: 64px; padding-bottom: 8px;
  border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-mono); font-weight: 500; font-size: 10px;
  letter-spacing: 0.06em; color: var(--text-muted);
  position: relative;
}
.check-file::before {
  content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px;
  background: linear-gradient(225deg, var(--surface-2) 50%, transparent 50%);
  border-bottom: 1px solid var(--border); border-left: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.check-file-1 { transform: translateY(4px) rotate(-3deg); }
.check-file-2 { z-index: 1; background: var(--primary-soft); border-color: var(--primary); color: var(--link); transform: translateY(-6px); }
.check-file-3 { transform: translateY(4px) rotate(3deg); }
.check-dropzone-hint { color: var(--text-muted-2); font-size: 13px; margin-top: -4px; }

/* Textarea pane */
.check-textarea { min-height: 280px; resize: vertical; }
.check-form-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  justify-content: space-between;
}
/* Let the encrypt text fill the remaining row width (wrapping to multi-line
   if needed) so the submit button stays anchored to the right edge instead
   of wrapping below when the text gets long. */
.check-form-meta-left { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.check-form-meta > .btn { flex-shrink: 0; }
.check-wordcount { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; }
.check-wordcount strong { color: var(--text); font-weight: 600; }
.check-form-foot {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 13px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.check-form-foot svg { width: 14px; height: 14px; color: var(--text-muted-2); flex-shrink: 0; }
/* Inline "Encrypted in transit" reassurance sits inside .check-form-meta-left,
   next to the wordcount / supported-formats info — replaces the standalone
   .check-form-foot row that sat below both meta + CTA. */
.check-form-encrypt {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 12px; line-height: 1.4;
}
.check-form-encrypt svg { width: 12px; height: 12px; color: var(--text-muted-2); flex-shrink: 0; }

/* Top header row of .check-form: tabs left + pane-specific info right on
   desktop; stacks under the tabs on tablet/phone. .check-wordcount belongs
   to the Paste pane, .check-form-formats to Upload — :has() shows whichever
   pane is currently active. */
.check-form-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.check-form-formats {
  display: inline-flex; flex-direction: column; gap: 2px;
  align-items: flex-end; text-align: right;
}
/* Paste active → hide formats; Upload active → hide wordcount. */
.check-form:has(.check-form-pane[data-pane="paste"]:not([hidden])) .check-form-head .check-form-formats { display: none; }
.check-form:has(.check-form-pane[data-pane="upload"]:not([hidden])) .check-form-head .check-wordcount { display: none; }
@media (max-width: 1100px) {
  .check-form-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .check-form-formats { align-items: flex-start; text-align: left; }
}

/* ============================================================
   Check-form flow states — selected-file list, progress bars,
   inline errors, the "analyzing…" stage and the result card
   (free-preview numbers OR locked report). Driven by JS in
   script.js; the report itself lives in the user cabinet, so the
   terminal state here always funnels toward sign-up.
   ============================================================ */

/* Compact the dropzone once at least one file is queued — JS hides
   it entirely and shows the list + an "add more" trigger, but the
   compact rule keeps the drag target usable on the drop-more path. */
.check-form-pane.has-files .check-dropzone { display: none; }
.check-dropzone.is-full { opacity: .55; pointer-events: none; }
.check-form-pane.is-over .check-dropzone { border-color: var(--primary-2); background: var(--primary-soft); }

/* ---- Selected-file list ---- */
.check-filelist { display: flex; flex-direction: column; gap: 10px; }
.check-filelist[hidden] { display: none; }
.check-file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2);
}
.check-file-row-ico {
  flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 9px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted);
}
.check-file-row-ico svg { width: 16px; height: 16px; }
.check-file-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.check-file-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.check-file-row-name {
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.check-file-row-size {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  color: var(--text-muted-2); white-space: nowrap; flex-shrink: 0;
}
.check-file-row.is-done .check-file-row-size { color: var(--success); }
.check-file-remove {
  flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center;
  border: none; border-radius: 8px; background: transparent; color: var(--text-muted-2);
  cursor: pointer; transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.check-file-remove:hover { background: var(--surface-3); color: var(--text); }
.check-file-remove svg { width: 14px; height: 14px; }

/* ---- Reusable progress bar ---- */
.check-progress {
  position: relative; height: 5px; border-radius: 99px; overflow: hidden;
  background: var(--surface-3);
}
.check-progress-bar {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 99px; background: var(--primary-2);
  transition: width .2s var(--ease-out);
}
.check-file-row.is-done .check-progress-bar { background: var(--success); }

/* ---- "Add more files" trigger under the list ---- */
.check-addmore {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--success);
  transition: color .2s var(--ease-out);
}
.check-addmore:hover { color: var(--ink); }
[data-theme="dark"] .check-addmore:hover { color: var(--primary); }
.check-addmore svg { width: 14px; height: 14px; }
.check-addmore[hidden] { display: none; }

/* ---- Inline error banner ---- */
.check-error {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--alert) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--alert) 42%, var(--border));
  color: var(--text); font-size: 13.5px; line-height: 1.45;
}
.check-error[hidden] { display: none; }
.check-error svg { width: 16px; height: 16px; color: var(--alert); flex-shrink: 0; margin-top: 1px; }
.check-error strong { font-weight: 600; }

/* The injected upload scan button is hidden until files are queued. */
.check-scan[hidden] { display: none; }

/* ---- Analyzing… stage (text scan) ---- */
.check-scanning {
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  text-align: center; padding: 48px 24px;
}
.check-scanning[hidden] { display: none; }
.check-scanning-label { font-size: 15px; font-weight: 500; color: var(--text); }
.check-scanning-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted-2); }
.check-scanning .check-progress { width: min(360px, 80%); height: 6px; }

/* ---- Result card (terminal state) ---- */
.check-result { display: none; }
.check-form[data-stage="scanning"] .check-form-head,
.check-form[data-stage="scanning"] .check-form-pane,
.check-form[data-stage="result"] .check-form-head,
.check-form[data-stage="result"] .check-form-pane { display: none; }
.check-form[data-stage="result"] .check-result {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; padding: 8px 0 4px;
}
.check-result-badge {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--success);
}
.check-result-badge.is-lock { background: var(--surface-3); color: var(--text-muted); }
.check-result-badge svg { width: 26px; height: 26px; }
[data-theme="dark"] .check-result-badge { color: var(--primary); }
.check-result-title { font-size: clamp(20px, 3vw, 25px); letter-spacing: -0.02em; }
.check-result-lead { color: var(--text-muted); max-width: 48ch; line-height: 1.5; }

.check-figures {
  position: relative; display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap; margin: 4px 0;
}
.check-figure {
  min-width: 148px; padding: 20px 26px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.check-figure-num { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.check-figure-num.is-good { color: var(--success); }
.check-figure-num.is-warn { color: var(--alert); }
.check-figure-label {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
}
/* Locked: blur the numbers behind a lock chip so the shape of the
   report is visible but the values are gated. */
.check-figures.is-locked .check-figure-num { filter: blur(9px); user-select: none; }
.check-result-lockchip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.check-result-lockchip svg { width: 13px; height: 13px; color: var(--text-muted); }

.check-result-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 6px;
}
@media (max-width: 560px) {
  .check-result-actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Aside "Included with every scan" */
.check-aside { padding: 32px; display: flex; flex-direction: column; gap: 20px; align-self: start; }
.check-aside-title { font-size: 17px; letter-spacing: -0.02em; }
.check-aside-list { display: flex; flex-direction: column; gap: 14px; }
.check-aside-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--text); line-height: 1.4; }
.check-aside-ico {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--primary); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.check-aside-ico svg { width: 12px; height: 12px; }
.check-aside-foot { display: flex; align-items: center; gap: 14px; padding-top: 4px; border-top: 1px solid var(--border); padding-top: 18px; }
.check-aside-stars { display: inline-flex; gap: 2px; color: var(--primary-2); }
[data-theme="dark"] .check-aside-stars { color: var(--primary); }
.check-aside-score { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.check-aside-score .mono { font-size: 10.5px; letter-spacing: 0.04em; }

/* Showcase slides — placeholder cards for future screenshots */
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.showcase-card { padding: var(--pad-snug); display: flex; flex-direction: column; gap: 16px; }
.showcase-card-media {
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted-2); font-family: var(--font-mono); font-size: var(--fs-11);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.showcase-card-title { font-size: 17px; letter-spacing: -0.02em; line-height: 1.25; }
.showcase-card-text { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* ============================================================
   Auth pages (sign in / sign up) — shared
   ============================================================ */

/* Minimal topbar replaces the site nav on auth pages: logo top-left,
   close (X) top-right. position: fixed so it overlays without taking
   vertical space; pointer-events: none on the bar lets clicks pass
   through the empty space between logo and X (children get :auto). */
.auth-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pad-card);
  pointer-events: none;
}
.auth-topbar > * { pointer-events: auto; }
.auth-close {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, transform .2s var(--ease-out);
}
.auth-close:hover { background: var(--ink); color: #F4F3F2; }
.auth-close svg { width: 14px; height: 14px; }

/* Auth hero — fills the full viewport (topbar is fixed and doesn't push
   content down), content vertically centered. */
.auth-hero {
  padding-top: clamp(20px, 4vw, 40px);
  padding-bottom: clamp(40px, 6vw, 80px);
  min-height: 100vh;
  display: flex; align-items: center;
}
.auth-hero > .wrap { width: 100%; }

.auth-form { padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; }
/* Form top-row: logo left, close-X right. Shown only on tablet+phone where
   the fixed .auth-topbar overlay is hidden (rule below in the ≤1100 block). */
.auth-form-topbar {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
}
/* Cancel the mobile-nav .logo margin overrides (margin-left:8px tablet,
   margin-left:auto on phone) — those exist to position the nav logo and
   would otherwise nudge or centre the form logo here. */
.auth-form-topbar .logo { margin: 0; }
.auth-form-head { display: flex; flex-direction: column; gap: 8px; }
.auth-form-title { font-size: 26px; letter-spacing: -0.03em; line-height: 1.2; }
.auth-form-sub { color: var(--text-muted); font-size: 14.5px; line-height: 1.5; margin: 0; }

.auth-pane { display: flex; flex-direction: column; gap: 18px; }
.auth-pane[hidden] { display: none; }

/* Social row — two buttons side-by-side so the sign-up form fits on
   one screen. Stacks back to single column on narrow phones. */
.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-social-btn { width: 100%; justify-content: center; }
.auth-social-btn > .auth-social-ico { padding: 0; }
.auth-social-ico { display: inline-flex; align-items: center; }
.auth-social-ico svg { width: 18px; height: 18px; display: block; }

/* "or use email" divider */
.auth-or {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted-2);
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Field-row variant: label + inline link (e.g. "Password [Forgot?]") */
.auth-field-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.auth-link { color: var(--link); font-size: 13px; font-weight: 500; transition: color .2s; }
[data-theme="dark"] .auth-link { color: var(--primary); }
.auth-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.auth-submit { width: 100%; justify-content: center; margin-top: 4px; }

.auth-foot {
  font-size: 13.5px; color: var(--text-muted);
  margin: 8px 0 0; text-align: center;
}

/* ============================================================
   Auth — Variant A (split-screen with brand panel)
   ============================================================ */
.auth-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px; align-items: stretch;
}
.auth-side {
  background: var(--ink-2); color: #F4F3F2;
  border-radius: var(--r-2xl);
  padding: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  min-height: 500px;
}
/* Background image fills the panel; JS sets src from a random testimonial.
   Hidden until loaded to avoid broken-image flash, then fades to 40% opacity. */
.auth-side-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.auth-side-bg.is-loaded { opacity: 0.2; }
/* Lift every non-bg/non-glow child above the bg image. Glow keeps its
   absolute positioning (excluded from the rule) and gets z-index explicitly. */
.auth-side > *:not(.auth-side-bg):not(.auth-side-glow) {
  position: relative;
  z-index: 1;
}
.auth-side-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-11); letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(244,243,242,0.55);
}
.auth-side-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--primary); box-shadow: 0 0 12px rgba(175,237,117,0.8);
}
.auth-side-quote-mark {
  display: block; font-size: 80px; line-height: 0.6;
  color: var(--primary); margin: auto 0 12px;
}
.auth-side-quote {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.25;
  margin: 0; color: #F4F3F2; max-width: 480px;
}
.auth-side-author { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; }
.auth-side-name { font-size: 15px; font-weight: 500; color: #F4F3F2; }
.auth-side-role {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-11); letter-spacing: 0.04em;
  color: rgba(244,243,242,0.65);
}
.auth-side-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 32px;
  padding-top: 28px; border-top: 1px solid rgba(244,243,242,0.15);
}
.auth-side-stat { display: flex; flex-direction: column; gap: 4px; }
.auth-side-stat-num {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.025em; color: var(--primary);
}
.auth-side-stat-label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(244,243,242,0.65);
}
.auth-side-glow {
  position: absolute; right: -120px; top: -120px;
  z-index: 1;
  width: 320px; height: 320px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(175,237,117,0.18), transparent);
  pointer-events: none;
}

/* ============================================================
   Auth — Variant B (centered with trust-strip below)
   ============================================================ */
.auth-centered { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.auth-centered .auth-form { width: 100%; max-width: 480px; }

/* Auth form tabs (Sign in / Create account) take the full card width on
   desktop and phone — each tab grabs 50%. Tablet (721-1100) keeps the
   default inline pill since the card is wider relative to the labels. */
@media (min-width: 1101px) {
  #authForm .check-form-tabs { display: flex; width: 100%; }
  #authForm .check-tab { flex: 1; justify-content: center; }
}
.auth-centered .trust-strip { width: 100%; max-width: 920px; }

/* ============================================================
   AI Detector page — centered hero + full-width form (distinct
   first-screen variant vs the plagiarism checker)
   ============================================================ */
.ai-hero { padding-top: 72px; padding-bottom: clamp(48px, 6vw, 80px); }
.ai-hero-head {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 760px; margin: 0 auto 40px; text-align: center;
  align-items: center;
}
.ai-hero-title { display: flex; flex-direction: column; align-items: center; }
.ai-hero-lead { max-width: 620px; margin: 0; }

/* Full-width form card — uses the shared .check-form internals (tabs,
   dropzone, textarea) but spans the entire wrap. No side aside. */
.ai-form { width: 100%; }

/* Models chip row — shows what AI models we detect, mono kicker + chips */
.ai-models {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px;
}
.ai-models-label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-11); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted-2);
  margin-right: 4px;
}
.ai-model-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text);
}
.ai-model-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--primary);
}

/* Big alternating slide rows for product showcases — replaces tiny
   3-in-a-row cards. Media + detailed text side-by-side. */
.showcase-rows {
  display: flex; flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
}
.showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.showcase-row:nth-child(even) .showcase-row-media { order: 2; }
.showcase-row-media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-2xl);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted-2);
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-11); letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--pad-card);
  text-align: center;
}
.showcase-row-content { display: flex; flex-direction: column; gap: 16px; }
.showcase-row-num {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--link);
}
.showcase-row-title {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.03em; line-height: 1.15; margin: 0;
}
.showcase-row-text {
  font-size: 15px; line-height: 1.6;
  color: var(--text-muted); margin: 0;
  max-width: 480px;
}
.showcase-row-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px; padding: 0;
}
.showcase-row-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.showcase-row-list li::before {
  content: ""; flex-shrink: 0; margin-top: 7px;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--primary);
}

/* ============================================================
   Legal pages (privacy, terms, cookie policy, etc.)
   ============================================================ */
.legal-hero {
  padding-top: var(--space-lg);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.legal-hero-inner {
  max-width: 840px;
  display: flex; flex-direction: column; gap: 18px;
}
.legal-hero-lead { max-width: 640px; margin: 0; }
.legal-hero-meta {
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.legal-hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
.legal-hero-meta-label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted-2);
}
.legal-hero-meta-value { font-size: 14px; font-weight: 500; color: var(--text); }

/* Two-column body: TOC sidebar + content area */
.legal-grid {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px; align-items: start;
}
.legal-toc {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 2px;
}
.legal-toc-label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted-2);
  margin-bottom: 12px;
}
.legal-toc a {
  display: block;
  padding: 6px 0;
  font-size: 13.5px; line-height: 1.4;
  color: var(--text-muted);
  transition: color .2s, padding-left .2s var(--ease-out);
}
.legal-toc a:hover { color: var(--text); padding-left: 4px; }
.legal-toc a.is-active { color: var(--link); font-weight: 500; }
[data-theme="dark"] .legal-toc a.is-active { color: var(--primary); }

/* Content typography */
.legal-content { max-width: 720px; }
.legal-section { margin-bottom: 56px; scroll-margin-top: 100px; }
.legal-section:last-child { margin-bottom: 0; }
.legal-section-num {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-11); letter-spacing: 0.06em;
  color: var(--success);
  display: block; margin-bottom: 8px;
}
[data-theme="dark"] .legal-section-num { color: var(--primary); }
.legal-section h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.025em; line-height: 1.2;
  margin: 0 0 20px;
}
.legal-section h3 {
  font-size: 17px; letter-spacing: -0.02em; line-height: 1.3;
  margin: 28px 0 10px;
}
.legal-section p {
  font-size: 15px; line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.legal-section ul, .legal-section ol {
  margin: 0 0 16px;
  padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  list-style: none;
}
.legal-section li {
  font-size: 15px; line-height: 1.65;
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
}
.legal-section ul li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--primary);
}
.legal-section ol { counter-reset: legal-list; }
.legal-section ol li {
  counter-increment: legal-list;
  padding-left: 28px;
}
.legal-section ol li::before {
  content: counter(legal-list) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-weight: 500;
  color: var(--success);
}
[data-theme="dark"] .legal-section ol li::before { color: var(--primary); }
.legal-section strong { color: var(--text); font-weight: 600; }
.legal-section a {
  color: var(--link);
  text-decoration: underline; text-underline-offset: 2px;
}
[data-theme="dark"] .legal-section a { color: var(--primary); }

/* ============================================================
   SEO / Learn — editorial long-form block for the landing. Eyebrow +
   H2 head, a large lead statement (mission-title scale), then rows of
   left subhead rail / right prose. A "Show more" button reveals the
   rest. Body typography (h4–h6, lists, callout, terms, .compare-table)
   is built on the same tokens as .legal-section so it stays theme-aware.
   ============================================================ */
.seo { --seo-rail: 280px; --seo-gap: 32px; }
.seo-head { margin-bottom: 20px; }
.seo-head .eyebrow { margin-bottom: 14px; }
/* Title — reviews-head h2 scale (.h-1 + 700px measure) */
.seo-title { font-size: var(--fs-h-1); line-height: 1.04; letter-spacing: -0.04em; max-width: 700px; margin: 0; }
.seo-meta {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-11); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted-2); margin: 10px 0 0;
}
/* Big lead statement — mission-title scale, indented to align with the prose column */
.seo-statement {
  font-weight: 600; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.3; letter-spacing: -0.025em;
  color: var(--text); max-width: 660px;
  margin: 0 0 var(--space-lg) calc(var(--seo-rail) + var(--seo-gap));
}
/* Scroll-linked word ink (script.js splits into .word + sets data-ink) —
   same three discrete states as .mission-title. */
.seo-statement .word { color: var(--text); opacity: .22; }
.seo-statement .word[data-ink="green"] { color: var(--primary-2); opacity: 1; }
.seo-statement .word[data-ink="done"] { color: var(--text); opacity: 1; }
/* Editorial rows: sticky left subhead rail + right prose column */
.seo-rows { display: flex; flex-direction: column; }
.seo-row {
  display: grid; grid-template-columns: var(--seo-rail) 1fr; gap: var(--seo-gap); align-items: start;
  padding: 30px 0; border-top: 1px solid var(--border);
}
.seo-row-head { position: sticky; top: 96px; }
.seo-kicker {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-11); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary-2); margin-bottom: 10px;
}
.seo-row-head h3 { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.22; letter-spacing: -0.025em; margin: 0; color: var(--text); }
.seo-row .seo-prose { max-width: 660px; margin: 0; }
.seo-more[hidden] { display: none; }
.seo-more-btn { margin: 28px 0 0 calc(var(--seo-rail) + var(--seo-gap)); }
.seo-more-btn .ico svg { transition: transform .25s var(--ease-out); }
.seo-more-btn.is-open .ico svg { transform: rotate(180deg); }
.seo-prose h3 {
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.25; letter-spacing: -0.025em;
  margin: 46px 0 12px;
}
.seo-prose h4 {
  font-size: 17px; line-height: 1.3; letter-spacing: -0.02em;
  margin: 30px 0 8px;
}
.seo-prose h5 {
  font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--text); margin: 24px 0 6px;
}
.seo-prose h6 {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-11); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted-2); margin: 22px 0 6px;
}
.seo-prose p {
  font-size: 15.5px; line-height: 1.72; color: var(--text-muted);
  margin: 0 0 16px;
}
.seo-prose ul, .seo-prose ol {
  margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
  list-style: none;
}
.seo-prose li {
  font-size: 15.5px; line-height: 1.65; color: var(--text-muted);
  padding-left: 26px; position: relative;
}
.seo-prose ul li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--primary);
}
.seo-prose ol { counter-reset: seo-list; }
.seo-prose ol li { counter-increment: seo-list; padding-left: 36px; }
.seo-prose ol li::before {
  content: counter(seo-list); position: absolute; left: 0; top: 0;
  width: 23px; height: 23px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  color: var(--primary-ink); background: var(--primary);
}
.seo-prose p strong, .seo-prose li strong { color: var(--text); font-weight: 600; }
.seo-prose a {
  color: var(--link); text-decoration: underline; text-underline-offset: 2px;
  transition: color .2s var(--ease-out);
}
.seo-prose a:hover { color: var(--link-hover); }
[data-theme="dark"] .seo-prose a { color: var(--primary); }

/* Callout — a highlighted key takeaway, accent rule on the left */
.seo-callout {
  margin: 24px 0 28px; padding: 18px 22px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: var(--r-md);
}
.seo-callout p { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.62; }
.seo-callout p + p { margin-top: 10px; }

/* Key-terms glossary (definition list) */
.seo-terms { margin: 0 0 18px; padding: 0; border-top: 1px solid var(--border); }
.seo-terms div {
  display: grid; grid-template-columns: 190px 1fr; gap: 6px 24px;
  padding: 15px 0; border-bottom: 1px solid var(--border);
}
.seo-terms dt { font-weight: 600; color: var(--text); font-size: 15px; }
.seo-terms dd { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* Shared compare table inside prose: fit the narrow column, stay neutral
   (no "popular" column tint — this is an explanatory, not a ranked, table) */
.seo-prose .compare-wrap { margin: 8px 0 26px; }
.seo-prose .compare-table { min-width: 520px; }
.seo-prose .compare-table th:nth-child(3),
.seo-prose .compare-table td:nth-child(3),
[data-theme="dark"] .seo-prose .compare-table th:nth-child(3),
[data-theme="dark"] .seo-prose .compare-table td:nth-child(3) { background: transparent; }

@media (max-width: 860px) {
  .seo { --seo-rail: 0px; --seo-gap: 0px; }
  .seo-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .seo-row-head { position: static; }
}
@media (max-width: 720px) {
  .seo-terms div { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
}

/* ============================================================
   Cookies banner — bottom-left card on the landing, shown after 5s
   ============================================================ */
.cookies-overlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  pointer-events: none; /* visual dim only; clicks pass through */
}
.cookies-overlay.is-shown { opacity: 1; }

.cookies-banner {
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 60;
  max-width: 420px;
  padding: var(--pad-card);
  opacity: 0; transform: translateY(20px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
}
.cookies-banner.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookies-banner-title { font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
.cookies-banner-text { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 12px 0 0; }
.cookies-banner-text a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .cookies-banner-text a { color: var(--primary); }
.cookies-banner-actions { display: flex; gap: 10px; margin-top: 20px; }
.cookies-banner-actions .btn { flex: 1; }

/* ============================================================
   404 — "no match found" error page
   Scan-themed 404 used by 404.html: the middle "0" is a radar-sweep
   orb (reuses the report-ring metaphor), and the missing URL is framed
   as a scan that returned no match. Centered, viewport-filling hero.
   ============================================================ */
.error-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 200px);
  overflow: hidden;
}
.error-inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}

/* Giant 404 — two display numerals flanking the scan orb (the "0").
   The 4s are solid ink; the 0 is the accented scanner — intentional
   hierarchy. Digits reuse the line-rise mask reveal from the hero. */
.error-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 18px);
  line-height: 0.9;
  margin-top: 4px;
}
.error-digit {
  font-size: clamp(86px, 22vw, 240px);
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--text);
}

/* Scan orb = the "0". A faint ring outlines the zero; a short lime arc
   sweeps it like a radar pointer (= still searching); a soft lime glow
   sits behind; a magnifier marks the empty result. */
.error-orb {
  position: relative;
  flex-shrink: 0;
  width: clamp(84px, 20vw, 220px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.error-orb::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 48%, transparent) 0%, transparent 66%);
  filter: blur(10px);
  opacity: 0.9;
  z-index: -1;
}
[data-theme="dark"] .error-orb::before { opacity: 0.55; }
.error-orb-svg { width: 100%; height: 100%; display: block; }
.error-orb-track { stroke: color-mix(in srgb, var(--text) 16%, transparent); }
.error-orb-sweep {
  stroke: var(--primary-2);
  transform-box: view-box;
  transform-origin: 110px 110px;
  animation: orbSweep 3.6s linear infinite;
}
@keyframes orbSweep { to { transform: rotate(360deg); } }
.error-orb-center {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--primary-2);
  animation: orbFloat 3s var(--ease-in-out) infinite;
}
.error-orb-center svg { width: clamp(30px, 6.5vw, 60px); height: auto; }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .error-orb-sweep, .error-orb-center { animation: none; }
}

.error-title { max-width: 16ch; }
.error-lead { max-width: 540px; margin: 0; }

.error-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 2px;
}

.error-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin-top: 10px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.error-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  :root { --section-head-gap: 44px; } /* tablet */
  /* Tablet nav: burger appears LEFT of logo, nav-links + Sign in hidden,
     primary button shrinks to .btn-xs sizing (and "— free" suffix drops). */
  .nav > button[aria-label="Menu"] { display: inline-flex; }
  .nav-links { display: none; }
  /* Tablet: logo sits right after burger; auto-margin pushes CTA to the far right. */
  .logo { margin-left: 8px; margin-right: auto; }
  .nav-cta .btn-ghost { display: none; }
  .nav-cta-suffix { display: none; }
  .nav-cta a.btn:last-child { height: 36px; font-size: 13px; }
  .nav-cta a.btn:last-child .ico { width: 24px; height: 24px; }
  .nav { padding: 10px 16px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-right { align-items: flex-start; }
  .report-card-wrap { max-width: 100%; }
  .mission-grid { grid-template-columns: minmax(0, 1fr); }
  /* `1fr` shorthand is `minmax(auto, 1fr)` — auto = min-content. With the
     nowrap chips/buttons inside the step demos, that min-content widens
     the track past the viewport. `minmax(0, 1fr)` lets the track shrink
     freely; .demo-upload/.demo-scan/.demo-stats already have overflow:hidden
     so their content clips cleanly inside the card. */
  .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .bento-top { grid-template-columns: minmax(0, 1fr); }
  /* Tablet: the two right-side bento tiles sit side-by-side (50/50) since
     the bento-top grid collapsed to one column and the row has space. */
  .bento-right { flex-direction: row; }
  /* Language chips are tighter on tablet so more EN/UA/DE pills fit per row
     in the narrower bento-sm card. */
  .bento-lang { font-size: 13px; }
  /* Tablet: 3-up row like desktop (was a 2-col split) — the cards have
     enough min-content room to hold their eyebrow/title/body/chip. */
  .profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews-grid { grid-template-columns: minmax(0, 1fr); }
  .reviews-featured { min-height: 420px; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  /* Tablet: even 50/50 split between text and CTA-panel (desktop is 1.4fr/1fr). */
  .cta-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-top { flex-direction: column; gap: 48px; }
  .footer-brand { width: 100%; }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contact-intro { position: static; }
  .contact-help-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-banner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-banner-media { order: -1; }
  .about-values-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: 8px 0; padding: 20px 8px; }
  .trust-item:nth-child(3) { border-left: 0; }
  .check-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .showcase-grid { grid-template-columns: 1fr 1fr; }
  /* Tablet + phone: drop the brand-panel side; auth becomes form-only
     (mirrors the .auth-centered layout from signin-alt.html). The fixed
     viewport-corner topbar is replaced by the in-form .auth-form-topbar. */
  .auth-split {
    display: flex; justify-content: center;
  }
  .auth-side { display: none; }
  .auth-split .auth-form { width: 100%; max-width: 480px; }
  .auth-topbar { display: none; }
  .auth-form-topbar { display: flex; }
  .showcase-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .showcase-row:nth-child(even) .showcase-row-media { order: 0; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal-toc {
    position: static;
    padding: 20px 24px;
    background: var(--surface-3);
    border-radius: var(--r-xl);
  }
}

/* FAQ: two full-width columns down to 768px, single column below.
   align-items:stretch makes the single column fill the block (base is flex-start). */
@media (max-width: 768px) {
  .faq-grid { flex-direction: column; align-items: stretch; }
}

@media (max-width: 720px) {
  :root {
    --section-head-gap: 32px; /* phone */
    /* Phone-tighter padding tokens — 22/24 → 18, 28 → 20. */
    --pad-snug:  18px;
    --pad-card:  18px;
    --pad-roomy: 20px;
    --pad-xl:    24px;
    --space-lg:  40px;
  }
  /* Mobile nav: logo recenters (auto-margin both sides);
     primary button becomes lime icon-only square (32x32). */
  .nav { padding: 10px 12px; }
  .logo { margin-left: auto; margin-right: auto; }
  /* Header CTA on phone: ALWAYS icon-only circle (text never fits). */
  .nav-cta a.btn:last-child {
    height: 32px; width: 32px;
    padding: 0; border-radius: 999px; position: relative;
  }
  .nav-cta a.btn:last-child > span:not(.ico) { display: none; }
  .nav-cta a.btn:last-child .ico {
    background: transparent; color: var(--ink);
    width: 100%; height: 100%;
  }
  .nav-cta a.btn:last-child .ico svg { width: 16px; height: 16px; }
  /* If the icon was removed via the editor, draw a fallback arrow so it is never empty. */
  .nav-cta a.btn:last-child:not(:has(.ico))::after {
    content: ""; position: absolute; inset: 0; background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4'/%3E%3Cpath d='M5.5 4H12V10.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4'/%3E%3Cpath d='M5.5 4H12V10.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  }
  .mission-stats { grid-template-columns: minmax(0, 1fr); }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .reviews-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .reviews-head { grid-template-columns: minmax(0, 1fr); }
  .reviews-rating { align-items: flex-start; }
  .reviews-score { align-items: flex-start; text-align: left; }
  .reviews-featured { min-height: 380px; }
  .reviews-featured-quote { font-size: 20px; }
  .pricing-head { grid-template-columns: minmax(0, 1fr); }
  /* Pricing on mobile: horizontal scroll-snap carousel — one card per view,
     dots below indicate progression. Negative margins break out of .wrap
     padding so the scroller goes edge-to-edge; scroll-padding restores
     visual inset so the snapped card sits with var(--pad-x) on each side. */
  .pricing-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    /* overflow-y is forced to `auto` when overflow-x is non-visible; large
       padding-bottom is the buffer that keeps card shadows from clipping. */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    gap: 16px;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    padding: 4px var(--pad-x) 64px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-grid::-webkit-scrollbar { display: none; }
  /* Card is narrower than viewport so the next card peeks ~50px on the right
     — a visible hint that the carousel can be swiped. */
  .pricing-grid > .price-card {
    flex: 0 0 calc(100vw - 3 * var(--pad-x) - 16px);
    min-width: 0;
    scroll-snap-align: start;
  }
  .pricing-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Pull dots up into the scroller's 64px shadow-buffer so the visible
       gap card → dots looks normal (~24px) instead of 88px. */
    margin-top: -40px;
  }
  .footer-cols { flex-direction: column; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
  /* Analyzed-strip on mobile: stack — text on top, wave middle, full-width
     CTA at bottom. Even at 375px the row layout can't fit "35 MILLION WORDS"
     + wave + "Start checking" together; column orientation gives every
     element its full row width. */
  .analyzed-strip {
    flex-direction: column; align-items: stretch;
    padding: 22px 20px; gap: 18px; border-radius: 22px;
  }
  /* Phone reverts the bento-right siblings back to a stack — at 375px two
     side-by-side bento tiles get too cramped (image + chips inside each). */
  .bento-right { flex-direction: column; }
  /* Text block lays out as a single centered row on phone:
     [35 MILLION WORDS] [analyzed] [/ daily]. */
  .analyzed-sl {
    flex-direction: row; align-items: baseline;
    justify-content: center; gap: 8px;
  }
  .analyzed-kicker { font-size: 10px; }
  .analyzed-word { font-size: 22px; }
  .analyzed-daily { font-size: 12px; }
  .wave { min-width: 0; height: 32px; }
  .wave-bar { width: 3px; }
  .analyzed-cta {
    width: 100%; justify-content: center;
    height: 44px; font-size: 14px;
  }
  .analyzed-cta .ico { width: 30px; height: 30px; }
  .analyzed-cta .ico svg { width: 14px; height: 14px; }
  /* Hero-bar can't fit inline next to "otherwise." at narrow widths
     (≤375 overflows). Stack the bar under the text and scale it down
     proportionally (120×14 → 80×10, keeps ~8:1 ratio). */
  .hero-title { font-size: 48px; }
  .hero-title-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Tabs container goes full-width; each tab takes 50% of the row.
     The sliding pill re-measures via window.resize (script.js). */
  .check-form-tabs { display: flex; width: 100%; }
  .check-tab { flex: 1; justify-content: center; }
  /* Profile-card titles get larger on phone — each card has the full row
     to itself in single-column stack, so a bigger headline reads better. */
  .profile-title { font-size: 24px; }
  .hero-bar { width: 80px; height: 10px; }
  /* Upload-card on phone: shrink padding, hide file-extensions hint (its
     content overflows together with the Scan CTA in one row), stretch the
     Scan button to fill the remaining width next to attach. In the foot
     the "150 words · free · no card" meta drops onto its own full-width
     line below the chips so all four bits still surface. */
  .upload-card { padding: 14px; }
  .upload-hint { display: none; }
  .upload-controls { gap: 10px; }
  /* Scan CTA hugs its content; the .flex-spacer between attach and scan
     pushes the button to the right edge of the row. */
  .upload-foot { flex-wrap: wrap; row-gap: 10px; column-gap: 8px; }
  .upload-meta { flex-basis: 100%; }
  /* FAQ rows on phone: proportionally shrink chrome so each row reads
     tighter against the narrow viewport. */
  .faq-row { padding: 14px 18px; }
  .faq-toggle { margin-left: 12px; }
  .faq-a { margin-top: 10px; }
  /* CTA strip switches to vertical stack only on phone. Tablet (≤1100,
     >720) keeps the horizontal 1.4fr / 1fr split since content fits.
     Padding shrinks via the --pad-xl token, not a hardcoded value. */
  .cta-strip { grid-template-columns: minmax(0, 1fr); }
  /* Logo decoration overflows the narrower mobile panel at its intrinsic
     size — clamp it. Desktop stays at auto/intrinsic. */
  .cta-panel-logo { width: clamp(165px, 24vw, 330px); max-width: 100%; }
  /* Reviews-foot arrows are redundant on phone — the carousel becomes a
     stack/swipe surface and the prev/next button row would just clutter the
     "Read N more reviews" CTA. */
  .reviews-arrows { display: none; }
  .reviews-foot { justify-content: center; }
  /* .btn-lg → .btn-md sizing on phone (56→48 height) so big CTAs don't
     dominate the small viewport. Ico-circle and font shrink proportionally. */
  .btn-lg { height: 48px; font-size: 15px; }
  .btn-lg .ico { width: 32px; height: 32px; }
  .btn-lg .ico svg { width: 16px; height: 16px; }
  /* .bento-ai/.bento-sm desktop padding (32px) isn't tokenised, so the
     mobile compaction still lives here. .bento-doc already uses
     var(--pad-roomy), no mobile override needed. */
  .bento-ai, .bento-sm { padding: var(--pad-card); }
  .bento-doc-text { font-size: 17px; }
  .bento-ai-title { font-size: 28px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .contact-offices { grid-template-columns: minmax(0, 1fr); }
  .about-values-grid { grid-template-columns: minmax(0, 1fr); }
  .timeline-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cookies-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .trust-strip { grid-template-columns: minmax(0, 1fr); padding: 8px 8px; }
  .trust-item { border-left: 0; border-top: 1px solid var(--border); padding: 16px 16px; }
  .trust-item:first-child { border-top: 0; }
  .showcase-grid { grid-template-columns: minmax(0, 1fr); }
  .check-dropzone { min-height: 220px; padding: 28px 16px; }
  .check-form-meta { flex-direction: column; align-items: stretch; }
  .check-form-meta .btn { width: 100%; justify-content: center; }
  .auth-side-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .auth-social { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Button variant editor — dev-only in-page tool (script.js gated
   to localhost). Floating toggle + hover pencil handle + popup.
   ============================================================ */
.btnedit-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 130;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-2);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.btnedit-toggle:hover { border-color: var(--text-muted-2); }
.btnedit-toggle.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.btnedit-toggle-ico { display: inline-flex; }
.btnedit-toggle-ico svg, .btnedit-pencil svg { width: 14px; height: 14px; }

.btnedit-overlay {
  position: fixed; z-index: 128; pointer-events: none;
  border: 1.5px dashed var(--primary-2); border-radius: 12px;
  display: none;
}
.btnedit-overlay.is-shown { display: block; }
.btnedit-pencil {
  position: fixed; z-index: 129; width: 26px; height: 26px;
  display: none; place-items: center;
  border: none; border-radius: 50%;
  background: var(--ink); color: var(--primary); cursor: pointer;
  box-shadow: var(--shadow-2);
}
.btnedit-pencil.is-shown { display: grid; }
.btnedit-pencil:hover { background: #000; }

.btnedit-pop {
  position: fixed; z-index: 131; width: 268px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
  font-family: var(--font-sans);
}
.btnedit-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.btnedit-pop[hidden] { display: none; }
.btnedit-head { display: flex; align-items: center; justify-content: space-between; }
.btnedit-title { font-size: 12px; color: var(--text); }
.btnedit-x {
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--text-muted-2); cursor: pointer; border-radius: 6px; display: grid; place-items: center;
}
.btnedit-x:hover { background: var(--surface-2); color: var(--text); }
.btnedit-x svg { width: 13px; height: 13px; }
.btnedit-field {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted-2);
}
.btnedit-field select {
  font-family: var(--font-sans); font-size: 13px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; outline: none;
}
.btnedit-field select:focus { border-color: var(--primary-2); }
.btnedit-preview-label { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted-2); }
.btnedit-preview {
  display: flex; align-items: center; justify-content: center;
  padding: 18px; border-radius: var(--r-md); border: 1px dashed var(--border);
  background: var(--surface-2); min-height: 64px;
}
.btnedit-actions { display: flex; gap: 8px; }
.btnedit-reset, .btnedit-save {
  flex: 1; padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.btnedit-reset { background: transparent; border-color: var(--border); color: var(--text); }
.btnedit-reset:hover { border-color: var(--text-muted-2); }
.btnedit-save { background: var(--ink); color: #fff; }
.btnedit-save:hover { background: #000; }
.btnedit-resetall {
  border: none; background: transparent; cursor: pointer; align-self: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted-2); padding: 2px;
}
.btnedit-resetall:hover { color: var(--alert); }

/* Button editor — export-changes panel (dev-only) */
.btnedit-export-btn {
  position: fixed; left: 18px; bottom: 62px; z-index: 130;
  display: none; align-items: center; gap: 7px;
  padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-2);
  transition: border-color .2s var(--ease-out);
}
.btnedit-export-btn.is-shown { display: inline-flex; }
.btnedit-export-btn:hover { border-color: var(--text-muted-2); }
.btnedit-export-btn svg { width: 13px; height: 13px; }

.btnedit-export {
  position: fixed; left: 18px; bottom: 104px; z-index: 131;
  width: 360px; max-width: calc(100vw - 36px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
  font-family: var(--font-sans);
}
.btnedit-export.is-open { opacity: 1; transform: none; pointer-events: auto; }
.btnedit-export[hidden] { display: none; }
.btnedit-export-body {
  margin: 0; max-height: 320px; overflow: auto;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; white-space: pre-wrap; word-break: break-word;
}
.btnedit-copy {
  flex: 1; padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; background: var(--ink); color: #fff;
  transition: background .15s;
}
.btnedit-copy:hover { background: #000; }

/* ============================================================
   Dev nav — cross-page Launcher / Landing / Design switcher
   (dev-only; injected by script.js + design-system.js)
   ============================================================ */
.devnav {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 124;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
}
.devnav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; color: var(--text-muted); text-decoration: none;
  transition: color .15s var(--ease-out), background .15s var(--ease-out);
}
.devnav-link:hover { color: var(--text); background: var(--surface-2); }
.devnav-link.is-here { color: var(--ink); background: var(--primary); }
.devnav-home { padding: 7px 11px; }
.devnav-home svg { width: 15px; height: 15px; }

/* Button editor — scope hint (shared vs this-page) */
.btnedit-scope {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted-2); margin-top: -4px;
}
.btnedit-scope.is-shared { color: var(--primary-2); }

/* Disabled buttons */
.btn:disabled, .btn[disabled] { opacity: .45; box-shadow: none; pointer-events: none; }