/* ============================================================
   PolyDrobe — Public Design System
   The category standard for a collaborative structured-data
   product, executed at the craft level of Figma / Notion /
   Airtable. Light neutral ground, hairline rules, generous
   spacing, ONE disciplined accent, and real product UI shown
   at legible scale.

   Replaces the retired "Neon Wardrobe" (purple->cyan gradient
   text, glow-at-rest, near-black-plus-neon sections, glass).
   See .impeccable/surfaces/templates-web-landing-page-v3-html.md
   for the direction contract. Legacy token NAMES are retained
   as aliases so every public page inherits the new world
   without a rule-by-rule rewrite; the values are all new.

   Type: Schibsted Grotesk (display/body) · Sora (wordmark only)
         · JetBrains Mono (data and identifiers only)
   ============================================================ */

/* Metric-matched fallback for Schibsted Grotesk (display=swap).
   Arial-metric system faces scaled so text wraps the same before
   and after the web font swaps in; without it the hero H1 wrapped
   to 3 lines in the fallback and pushed the page down (load CLS).
   Values measured against Schibsted 400/700 in Chromium; re-measure
   if the family or the weights change. */
@font-face {
  font-family: 'Schibsted Grotesk Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
  font-weight: 100 500;
  size-adjust: 104%; ascent-override: 93.9%; descent-override: 24.8%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Schibsted Grotesk Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold');
  font-weight: 600 900;
  size-adjust: 101.7%; ascent-override: 96.1%; descent-override: 25.4%; line-gap-override: 0%;
}

:root {
  /* ---- The one accent ------------------------------------ */
  --brand:    #a413ec;  /* retained brand mark hue */
  --accent:   #7d17c9;  /* primary fill; white text 6.6:1 */
  --accent-d: #6610a8;  /* hover / pressed */
  --accent-l: #7d17c9;  /* no dark surfaces remain; keep one legible accent */
  --accent-t: #f6efff;  /* tint surface */

  /* Legacy aliases — one accent, no second general-purpose hue */
  --purple:   #7d17c9;
  --purple-l: #9a3fdd;
  --magenta:  #7d17c9;
  --cyan:     #7d17c9;
  --cyan-d:   #6610a8;
  --lime:     #7d17c9;

  /* ---- Surfaces ------------------------------------------ */
  --white:    #ffffff;
  --cream:    #ffffff;  /* page ground is now plain white */
  --cream-2:  #f4f2f7;  /* secondary banded surface */
  --surface:  #faf9fb;
  --deep:     #1b1920;  /* neutral near-black, not purple-black */
  --deep-2:   #232128;

  /* ---- Text ---------------------------------------------- */
  --ink:      #16141a;  /* 16.6:1 on white */
  --ink-2:    #4a4753;  /* 8.9:1 on white */
  --ink-3:    #6b6875;  /* 5.4:1 on white — muted, still AA */
  /* Retained names, now resolving to the ink scale: every public surface is
     light, so a dark-context text colour here would render near-white on white. */
  --d1:       #16141a;
  --d2:       #4a4753;
  --d3:       #6b6875;

  /* ---- Lines --------------------------------------------- */
  --line:     #e6e3ec;
  --line-2:   #d6d2de;

  /* ---- Data colours (semantic only, never decoration) ---- */
  --ok:       #0f7b4f;
  --warn:     #8a5a00;
  --err:      #b3261e;
  --info:     #175cd3;

  /* Gradients retired: aliased to solids so any remaining
     background-clip:text renders as solid ink, not a ramp. */
  --grad:      #7d17c9;
  --grad-warm: #7d17c9;
  --grad-text: #16141a;

  --font-display: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', system-ui, -apple-system, sans-serif;
  --font-body:    'Schibsted Grotesk', 'Schibsted Grotesk Fallback', system-ui, -apple-system, sans-serif;
  --font-wm:      'Sora', 'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Tool-grade radii, not soft blobs */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Depth is minimal and functional: real offset + soft blur,
     never a zero-offset coloured halo. */
  --sh-sm:   0 1px 2px rgba(16,14,20,0.06), 0 1px 3px rgba(16,14,20,0.04);
  --sh:      0 4px 12px -2px rgba(16,14,20,0.08), 0 2px 4px -1px rgba(16,14,20,0.05);
  --sh-lg:   0 12px 32px -8px rgba(16,14,20,0.12), 0 4px 8px -2px rgba(16,14,20,0.06);
  --sh-glow: 0 12px 32px -8px rgba(16,14,20,0.12), 0 4px 8px -2px rgba(16,14,20,0.06);
  --sh-cyan: 0 12px 32px -8px rgba(16,14,20,0.12), 0 4px 8px -2px rgba(16,14,20,0.06);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  260ms;

  --max: 1200px;
  --pad: 28px;
}

* , *::before, *::after { box-sizing: border-box; }
/* In-page anchors clear the 73px sticky header instead of relying on the
   104px section padding to hide the overlap. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
:target { scroll-margin-top: 88px; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; }
::selection { background: var(--purple); color: #fff; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--purple); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { left: 16px; }

/* Keyboard focus — visible ring on every interactive control (WCAG 2.4.7). */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 4px rgba(125,23,201,0.28);
}
/* These surfaces used to be dark and took a cyan ring. They are all light
   now, so the cyan ring scored ~1.8:1 against white and failed SC 1.4.11.
   One accent ring everywhere. */
/* Disclosure cards (.faq-item, .acc) clip to their radius with overflow:hidden,
   and their <summary> fills the card's padding box — so the ring above, drawn
   2px outside the summary plus a 4px halo, lands entirely in the clipped region
   and never renders. These are the primary controls on the help page, so the
   indicator is drawn inward instead: nothing has to escape the card.
   SC 2.4.7 Focus Visible, SC 2.4.11 Focus Appearance. */
.faq-item > summary:focus-visible,
.acc > summary:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: -4px;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 6px rgba(125,23,201,0.12);
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.gradient-text { color: var(--ink); font-weight: 700; }

/* eyebrow / labels */
.eyebrow { display: none; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.eyebrow .idx { display: none; }
.eyebrow.on-dark { color: var(--cyan); }
.label { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* ── Buttons (pill, flat, one accent) ───────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  white-space: nowrap; border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn .ico { width: 19px; height: 19px; transition: transform var(--dur) var(--ease); }
.btn--primary { background: var(--grad); color: #fff; box-shadow: var(--sh-glow); background-size: 140% 140%; }
.btn--primary:hover { background: var(--accent-d); box-shadow: var(--sh); }
.btn--primary:hover .ico { transform: translateX(4px); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: var(--purple-l); }
/* HISTORICAL NAMES: --glass and --lime date from the retired Neon Wardrobe.
   Neither is glass or lime any more (both are flat, one-accent variants);
   they keep their names only because shipping templates reference them. */
.btn--lime { background: var(--accent); color: #fff; box-shadow: var(--sh-sm); font-weight: 700; }
.btn--lime:hover { background: var(--accent-d); box-shadow: var(--sh); }
.btn--lime:hover .ico { transform: translateX(4px); }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: 16px; }
.btn--block { width: 100%; }
/* Disabled buttons read as "not yet available" with legible text rather than a
   washed-out low-contrast gradient. */
.btn[disabled], .btn:disabled { background: var(--cream-2); color: var(--ink-3); border-color: var(--line); box-shadow: none; cursor: not-allowed; }
.btn[disabled] .ico, .btn:disabled .ico { color: var(--ink-3); }
.btn[disabled]:hover, .btn:disabled:hover { transform: none; box-shadow: none; }
.btn--on-ink { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn--on-ink:hover { background: var(--cream-2); transform: translateY(-2px); }
.btn--quiet { background: var(--cream); color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { background: var(--cream-2); transform: translateY(-2px); }

.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--purple); transition: gap var(--dur) var(--ease); }
.arrow-link .ico { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.arrow-link:hover { gap: 12px; }

.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
.nav-cta .btn--sm { box-shadow: var(--sh-sm); }

/* ── NAV (full-bleed, adaptive) ─────────────────────── */
/* No public page has a dark hero any more, so the header is solid from the
   first pixel and never sits transparent over dark art. The `.solid` class and
   its scroll toggle are retired — every rule below is unconditional. */
main:not(.auth-form-panel) { margin-top: 0; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px -22px rgba(16,14,20,0.35);
}
.nav-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.brand img { width: 26px; height: 26px; }
.brand .wm { font-family: var(--font-wm); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); font-weight: 500; font-size: 14.5px; color: var(--ink-2); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav-link:hover { color: var(--accent); background: var(--accent-t); }
.nav-cta { display: flex; align-items: center; gap: 6px; justify-self: end; }
.nav-login { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; color: var(--ink); transition: color var(--dur) var(--ease); }
.nav-login:hover { color: var(--accent); }
.nav-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--ink); border: 1px solid var(--line); justify-self: end; }
.nav-burger .ico { width: 22px; height: 22px; }
.mobile-menu { display: flex; flex-direction: column; align-items: stretch; gap: 4px; max-width: var(--max); margin: 0 auto; padding: 12px var(--pad) 18px; background: var(--white); border-radius: 0 0 var(--r-lg) var(--r-lg); border-bottom: 1px solid var(--line); }
.mobile-menu[hidden] { display: none; }
.mobile-menu .nav-link { color: var(--ink-2); border-radius: var(--r-sm); padding: 13px 14px; }
.mobile-menu .nav-link:hover { background: var(--accent-t); color: var(--accent); }

/* ── HERO (light, flat) ─────────────────────────────── */
.hero { position: relative; background: var(--white); color: var(--ink); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before { content: none; }
.hero-grid-bg { display: none; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; padding-block: 92px 96px; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.hero h1 .hl { color: var(--accent); }
.hero-lede { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-meta dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.hero-meta dd { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ── HERO: Transmute (art on top, variant record below) ───────────────── */
.htx-hero .htx-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  grid-template-areas: "h1 fig" "lede fig" "cta fig" "meta fig";
  grid-template-rows: auto auto auto 1fr;
  column-gap: 72px;
  padding-block: 60px 60px;
}
.htx-hero .htx-inner > * { min-width: 0; }
.htx-hero h1 { grid-area: h1; }
.htx-hero .hero-lede { grid-area: lede; }
.htx-hero .hero-cta { grid-area: cta; }
.htx-hero .hero-meta { grid-area: meta; align-self: end; margin-bottom: 0; }
.htx-hero .htx { grid-area: fig; }
.htx .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.htx { margin: 0; }

/* the art: five cut-outs, the checked variant shown; the morph canvas and the armour button on top */
.htx-art { position: relative; aspect-ratio: 1; }
.htx-img { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.htx-canvas { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: 1; }
.htx.is-morphing .htx-canvas { opacity: 1; }
.htx.is-morphing .htx-img { visibility: hidden; }
.htx-hit { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-lg); }
/* taps: no grey flash over the art (the morph is the feedback), no double-tap zoom delay */
.htx-hit, .htx-sw input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.htx-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; box-shadow: 0 0 0 4px rgba(125,23,201,0.28); }

/* the picker: the five variant images, nothing else */
.htx-pick { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.htx-row { display: flex; gap: 10px; }
.htx-sw { position: relative; display: block; flex: none; width: 44px; height: 44px; border-radius: var(--r); background: var(--deep-2); cursor: pointer;
  transition: transform var(--dur) var(--ease), outline-color var(--dur) var(--ease); }
.htx-sw img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; border-radius: inherit; }
.htx-sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.htx-sw:hover { transform: translateY(-2px); outline: 2px solid var(--line-2); outline-offset: 2px; }
.htx-sw:has(input:checked) { outline: 2px solid var(--accent); outline-offset: 2px; }
.htx-sw:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(125,23,201,0.28); }

/* the record: one variant at a time; all five stacked in one cell so the height never changes */
.htx-rec { display: grid; margin-top: 16px; }
.htx-rc { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start;
  visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--ease), visibility var(--dur); }
.htx-name { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.htx-sub { margin: 4px 0 10px; display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.htx-sub span { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-3); }
.htx-sub i { font-style: normal; color: var(--ink-3); }
.htx-sub b { font-weight: 600; color: var(--ink-2); }
.htx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.htx-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 9px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.htx-pill i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.htx-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.htx-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-2); white-space: nowrap; }
.htx-tag span { color: var(--ink-3); margin-right: 4px; }

/* selection: the checked variant image decides the art and the record */
.htx:has(.htx-sw:nth-child(1) input:checked) .htx-img:nth-child(1), .htx:has(.htx-sw:nth-child(2) input:checked) .htx-img:nth-child(2),
.htx:has(.htx-sw:nth-child(3) input:checked) .htx-img:nth-child(3), .htx:has(.htx-sw:nth-child(4) input:checked) .htx-img:nth-child(4),
.htx:has(.htx-sw:nth-child(5) input:checked) .htx-img:nth-child(5) { display: block; }
.htx:has(.htx-sw:nth-child(1) input:checked) .htx-rc:nth-child(1), .htx:has(.htx-sw:nth-child(2) input:checked) .htx-rc:nth-child(2),
.htx:has(.htx-sw:nth-child(3) input:checked) .htx-rc:nth-child(3), .htx:has(.htx-sw:nth-child(4) input:checked) .htx-rc:nth-child(4),
.htx:has(.htx-sw:nth-child(5) input:checked) .htx-rc:nth-child(5) { visibility: visible; opacity: 1; }
@supports not selector(:has(*)) {
  .htx-img:nth-child(2) { display: block; }
  .htx-rc:nth-child(2) { visibility: visible; opacity: 1; }
  .htx-sw { pointer-events: none; }
}

/* responsive: 1081-1199 narrows the art column; <=1080 stacks; <=640 phone */
@media (max-width: 1199px) {
  .htx-hero .htx-inner { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 56px; }
}
@media (max-width: 1080px) {
  .htx-hero .htx-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "lede" "fig" "cta" "meta"; grid-template-rows: none; padding-block: 44px 52px; }
  .htx-hero .htx { max-width: 460px; margin-top: 24px; }
  .htx-hero .hero-cta { margin-top: 28px; }
}
@media (max-width: 640px) {
  .htx-row { justify-content: space-between; gap: 6px; }
  .htx-sw { width: 56px; height: 56px; }
  .htx-rc { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .htx-tags { flex-direction: row; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .htx-rc, .htx-sw { transition: none; }
  .htx-sw:hover { transform: none; }
  .htx-canvas { display: none; }
}
.app-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lg); }

.app-frame__bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; background: var(--surface); border-bottom: 1px solid var(--line); }
.app-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9cfe6; }
.app-frame__url { min-width: 0; margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-frame img { width: 100%; height: auto; }

/* Spec chip icon tile (light, hairline — no glass, no dark ground). */
.sc-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(15,123,79,0.10); color: var(--ok); display: grid; place-items: center; }
.sc-ico .ico { width: 18px; height: 18px; }

/* ── Sections ───────────────────────────────────────── */
.section { padding: 104px 0; position: relative; }
/* A real band, not the white-to-white gradient this used to be: --cream now
   resolves to white, so the alternation the markup asks for rendered as nothing.
   Same treatment as .quote-sec — banded surface between two hairlines. */
.section-soft { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); }
.section-head p { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
/* The lede keeps its 56ch measure, so its box is narrower than the head it sits
   in; centring the head and the text alignment left that box hugging the left
   edge and the sentence reading ~32px left of the heading it belongs to. */
.section-head.center p { margin-inline: auto; }
/* The help guide's headings run long enough at 54px to orphan a word; balance
   them there rather than changing every section head in the system. */
.help-nav ~ .section .section-head h2 { text-wrap: balance; }

/* ── Problem note ───────────────────────────────────── */
/* Not a testimonial: the <blockquote>/<cite> framing was removed because the
   line is a stated problem, not an attributable quote. No quotation glyphs,
   and the size steps down out of pull-quote scale into the title/lede range so
   the tag change is visible rather than cosmetic. */
.quote-sec { padding: 96px 0; position: relative; background: var(--surface); border-block: 1px solid var(--line); overflow: hidden; }
.problem-note { max-width: 780px; }
.problem-note__text { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.42; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
/* Display-scale emphasis inside the problem note: at 21–27px display weight
   the accent colour reads as stress, not as a link. */
.problem-note__text mark { background: none; color: var(--accent); font-weight: 700; }
.problem-note__tail { margin: 20px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); font-weight: 500; }

/* ── Capabilities (icon · rule · text) ──────────────── */
/* Renamed from the historical `.features--dark`: this is a banded LIGHT
   section (--cream-2) and the old name described a surface that no longer
   exists. Sole consumer is landing_page_v3.html, renamed with it. */
.features--band { background: var(--cream-2); position: relative; overflow: hidden; }
.features--band::before { content: none; }
.features--band .wrap { position: relative; z-index: 1; }
.features--band .section-head h2 { color: var(--ink); }
.features--band .section-head p { color: var(--ink-2); }

.feature-table { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; row-gap: 64px; }
.feat { display: grid; grid-template-columns: 28px 1fr; column-gap: 18px; align-items: start; }
.feat-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--accent); margin-top: 2px; transition: color var(--dur) var(--ease); }
.feat:hover .feat-ico { color: var(--accent-d); }
.feat-ico .ico { width: 24px; height: 24px; stroke-width: 1.7; }
.feat-body { min-width: 0; }
.feat h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.feat-rule { display: block; width: 88px; height: 1px; background: var(--line-2); margin: 16px 0; transform: scaleX(0.727); transform-origin: left center; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.feat:hover .feat-rule { transform: scaleX(1); background: var(--accent); }
.feat p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 42ch; }
.feat-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.feat-tags span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 11px; }

/* ── Product tour (alternating side-by-side rows) ───── */
.showcase { background: var(--white); }
.tour-rows { display: flex; flex-direction: column; gap: 88px; }
.tour-row { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 60px; align-items: center; }
/* Even rows lead with the shot; swap the tracks too so the frame always sits
   in the wider column and each crop renders at the same ~0.9x scale. */
.tour-row:nth-child(even) { grid-template-columns: 1.08fr 0.92fr; }
.tour-row:nth-child(even) .tour-text { order: 2; }
.tour-row:nth-child(even) .tour-shot { order: 1; }
.tour-text h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1.06; color: var(--ink); }
.tour-text p { margin-top: 16px; font-size: 17px; line-height: 1.62; color: var(--ink-2); max-width: 44ch; }
.tour-text .sc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tour-text .sc-pills span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 13px; }
.tour-shot .sc-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--cream); box-shadow: var(--sh-lg); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tour-shot:hover .sc-frame { box-shadow: var(--sh-lg); }
.sc-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sc-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9cfe6; }
.sc-bar .u { min-width: 0; margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tour crops (DESIGN.md "Do": the real app at 1:1, cropped to a window,
   never a whole browser shrunk to a thumbnail). Each row ships an art-directed
   WebP crop cut from a 3x capture — ~600px wide for the desktop frame, plus a
   ~300px "-m" crop for phones via <picture> — so every edge is authored in the
   asset itself and the same composition holds at every viewport. The intrinsic
   width/height attributes reserve the box; nothing is offset or clipped here. */
.tour-screen { background: var(--cream); }
.tour-screen img { width: 100%; height: auto; display: block; }

@media (max-width: 980px) {
  .tour-rows { gap: 56px; }
  .tour-row, .tour-row:nth-child(even) { grid-template-columns: 1fr; gap: 28px; }
  .tour-row:nth-child(even) .tour-text { order: 2; }
  .tour-row:nth-child(even) .tour-shot { order: 1; }
  .tour-row .tour-text { order: 2; }
  .tour-row .tour-shot { order: 1; }
}

/* ── Pricing ────────────────────────────────────────── */
.price-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.price-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 30px; display: flex; flex-direction: column; box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.price-col:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.price-col.featured { background: var(--white); color: var(--ink); border-color: var(--accent); border-width: 2px; box-shadow: var(--sh); position: relative; overflow: hidden; }
.price-col.featured::before { content: none; }
.price-col.featured > * { position: relative; z-index: 1; }
.price-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); display: flex; align-items: center; justify-content: space-between; }
.price-col.featured .price-name { color: var(--accent); }
.price-name .tag { font-size: 12px; color: #fff; background: var(--grad); padding: 3px 10px; border-radius: var(--r-pill); letter-spacing: 0.05em; }
.price-amt { display: flex; align-items: baseline; gap: 7px; margin-top: 20px; }
.price-amt .n { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -0.035em; color: var(--ink); }
.price-col.featured .price-amt .n { color: var(--ink); }
.price-amt .p { font-size: 13px; color: var(--ink-3); }
.price-col.featured .price-amt .p { color: var(--ink-3); }
.price-blurb { margin-top: 12px; font-size: 14.5px; color: var(--ink-3); line-height: 1.5; min-height: 44px; }
.price-col.featured .price-blurb { color: var(--ink-2); }
.price-feats { list-style: none; padding: 22px 0; margin: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.price-col.featured .price-feats { border-color: var(--line); }
.price-feats li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink); }
.price-col.featured .price-feats li { color: var(--ink-2); }
.price-feats .ico { width: 20px; height: 20px; color: var(--purple); flex-shrink: 0; margin-top: 1px; }
.price-col.featured .price-feats .ico { color: var(--accent); }
.price-note { margin-top: 26px; text-align: center; font-size: 14px; color: var(--ink-3); }

/* ── FAQ ────────────────────────────────────────────── */
.faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.faq-item[open] { border-color: rgba(125,23,201,0.3); box-shadow: var(--sh); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 24px; display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .q-idx { display: none; }
.faq-item .q-txt { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
.faq-item summary .ico { width: 24px; height: 24px; color: var(--purple); transition: transform var(--dur) var(--ease); }
.faq-item[open] summary .ico { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 24px 24px; font-size: 16px; color: var(--ink-2); line-height: 1.65; max-width: 72ch; }

/* ── CTA (gradient block) ───────────────────────────── */
.cta-final { padding: 40px 0 110px; }
.cta-final .wrap { position: relative; }
.cta-box { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--accent-t); border: 1px solid var(--line); padding: 72px 56px; text-align: center; box-shadow: none; }
.cta-box::before { content: none; }
.cta-box .cta-grid-bg { display: none; }
.cta-box > *:not(.cta-grid-bg) { position: relative; z-index: 1; }
.cta-box .q-key { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 22px; }
.cta-box h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); max-width: 20ch; margin: 0 auto; text-wrap: balance; }
.cta-box h2 mark { background: none; color: var(--accent); font-weight: 700; }
.cta-box p { margin: 20px auto 0; color: var(--ink-2); font-size: 17px; max-width: 54ch; line-height: 1.55; }
.cta-actions { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.cta-box .cta-proof { margin-top: 26px; font-family: var(--font-mono); font-size: 13px; color: var(--d3); max-width: none; text-wrap: balance; }
.cta-form { display: flex; gap: 10px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.cta-input { flex: 1; min-width: 240px; max-width: 340px; padding: 0 18px; height: 48px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color var(--dur) var(--ease); }
.cta-input::placeholder { color: var(--d3); }
/* Tailwind's forms layer puts a #2563eb ring and border on a focused input.
   Both are overridden here so the one accent stays the only focus colour. */
.cta-input:focus { border-color: var(--purple-l); box-shadow: 0 0 0 4px rgba(125,23,201,0.16); }
.cta-input:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
/* The native search clear button ships blue and off-grid; draw it from the palette. */
.cta-input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; cursor: pointer; opacity: 0.55;
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat;
}
.cta-input::-webkit-search-cancel-button:hover { opacity: 1; background: var(--purple); }
/* Newsletter form (waiting_list/form.html) inside the dark .cta-box */
.cta-subscribe { width: 100%; max-width: 460px; margin: 0 auto; }
.cta-form-error { margin: 12px auto 0; font-size: 13px; color: var(--err); }
.cta-consent { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin: 0 auto 16px; max-width: 440px; font-size: 13px; line-height: 1.5; color: var(--ink-2); text-align: left; }
.cta-consent input[type="checkbox"] { margin-top: 0; width: 24px; height: 24px; accent-color: var(--accent); flex-shrink: 0; }
/* Subscribe button loading state (HTMX) */
.cta-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(22,20,26,0.25); border-top-color: var(--ink); border-radius: 50%; animation: cta-spin 0.6s linear infinite; }
.cta-subscribe.htmx-request .cta-spinner { display: inline-block; }
.cta-subscribe.htmx-request .cta-label { opacity: 0.7; }
@keyframes cta-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cta-spinner { animation: none; } }

/* ── Hero proof row + centered heads ────────────────── */
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero-proof li { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--d3); }
.hero-proof .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.section-head--center { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: 56px; }
.section-head--center .eyebrow { justify-content: center; }
.sc-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--magenta), var(--purple)); flex-shrink: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--purple); text-decoration: none; transition: gap var(--dur) var(--ease); }
.link-arrow:hover { gap: 10px; }

/* ── Features · bento ───────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bv-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.bv-name { color: var(--d1); }
.bv-tag { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; }
.bv-tag--legendary { background: rgba(138,90,0,0.10); color: var(--warn); }
.bv-child { padding-left: 14px; }
.bv-branch { color: var(--d3); }
.bv-price { margin-left: auto; color: var(--ok); }
.bv-price--amber { color: var(--warn); }
.bento-term { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-prompt { color: var(--purple-l); }
.bt-cmd { color: var(--d1); }
.bt-cursor { color: var(--purple-l); animation: bt-blink 1s step-end infinite; }
@keyframes bt-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bt-cursor { animation: none; } }

/* ── Import strip ───────────────────────────────────── */
.import { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.import-copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.import-copy p { margin-top: 16px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 42ch; }
.import-copy .link-arrow { margin-top: 22px; }
.import-copy .eyebrow { margin-bottom: 18px; }
.import-sec { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.import-cards { display: flex; flex-direction: column; gap: 12px; }
.import-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); padding: 16px 18px; box-shadow: var(--sh-sm); }
.import-card--dim { opacity: 0.62; transform: translateY(2px) scale(0.985); }
.ic-row { display: flex; align-items: center; gap: 11px; }
.ic-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.ic-ico .ico { width: 18px; height: 18px; }
.ic-ico--green { background: rgba(15,123,79,0.10); color: var(--ok); }
.ic-ico--purple { background: rgba(125,23,201,0.12); color: var(--purple); }
.ic-name { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-status { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ok); background: rgba(15,123,79,0.08); border: 1px solid rgba(15,123,79,0.22); border-radius: var(--r-pill); padding: 4px 11px; }
.ic-status--sync { color: var(--accent); background: var(--accent-t); border-color: rgba(125,23,201,0.22); }
.ic-stats { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.ic-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); opacity: 0.5; }

/* ── Pricing (2-up) ─────────────────────────────────── */
.price-table--2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }
.price-foot-note { font-size: 13px; line-height: 1.5; color: var(--ink-2); text-align: center; margin: 2px 0 14px; }
/* Secondary route out of the Pro card, under the button that now starts the
   trial. Centred in the flex column without stretching to block width. */
.price-compare { align-self: center; margin-top: 14px; font-size: 14px; }

/* ── Footer (slim) ──────────────────────────────────── */
.footer--slim { background: var(--white); border-top: 1px solid var(--line); padding: 48px 0; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer--slim .brand .wm { color: var(--ink); }
.footer-copy { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 1024px) {
  .bento { grid-template-columns: 1fr; }
  .import-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .price-table--2 { grid-template-columns: 1fr; }
}

/* ── Footer ─────────────────────────────────────────── */
.footer { background: var(--white); border-top: 1px solid var(--line); padding: 0; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px 64px; flex-wrap: wrap; padding: 56px 0 40px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .brand .wm { color: var(--ink); }
.footer-brand { flex: 0 1 320px; }
.footer-brand p { margin: 0; font-size: 14.5px; color: var(--ink-3); max-width: 32ch; line-height: 1.6; }
/* Three grouped columns replace the flat 7-link row: mono uppercase heads over
   44px links, per DESIGN.md's Footer + Tap-Target rules. */
.footer-cols { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 56px; }
.footer-col h3 { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
/* No global list reset in this file — every list resets locally. */
.footer-col ul { list-style: none; margin: 0; padding: 0; }
/* The feature-request trigger is a <button> (modal, not navigation) — reset its
   chrome so it reads and measures exactly like the sibling links. */
.footer-col a,
.footer-col button { display: flex; align-items: center; min-height: 44px; font-family: inherit; font-size: 14.5px; text-align: left; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; transition: color var(--dur) var(--ease); }
.footer-col a:hover,
.footer-col button:hover { color: var(--accent); }
.footer-bot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 8px 0 44px; }
.footer-bot .copy { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--line); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.footer-social a:hover { background: var(--accent); color: #fff; border-color: transparent; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-mark { display: none; }
/* Bottom-row cluster: language selector + social buttons. */
.footer-right { display: flex; align-items: center; gap: 14px; }

/* Language selector — components/language_selector.html is shared with the app
   shell, so it is styled from here, scoped to the public surfaces, rather than
   by editing the component. Its trigger renders ~20px tall by default. */
.footer [data-testid="language-selector-toggle"],
.auth-lang [data-testid="language-selector-toggle"] {
  min-height: 44px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 14px; color: var(--ink-2);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.footer [data-testid="language-selector-toggle"]:hover,
.auth-lang [data-testid="language-selector-toggle"]:hover { color: var(--accent); background: var(--accent-t); }

/* ── Icons base ─────────────────────────────────────── */
.ico { width: 24px; height: 24px; flex-shrink: 0; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

/* ── Motion ─────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.ln { display: block; overflow: hidden; padding-bottom: 0.12em; }
.ln > i { display: block; font-style: normal; transition: transform 1000ms var(--ease); transition-delay: var(--li, 0ms); }
.js [data-reveal]:not(.in) .ln > i { transform: translateY(120%); }
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .ln > i { transform: none !important; }
  .sc-shot { opacity: 1 !important; transform: none !important; }
  .sc-shot:not(.is-active) { display: none; }
  [data-parallax] { transform: none !important; }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-block: 64px 72px; }

  .feature-table { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 36px; }
  .footer-brand { flex: 0 1 auto; }
  .footer-cols { width: 100%; }
}
@media (max-width: 860px) {
  .nav-wrap { grid-template-columns: 1fr auto; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  /* QA gh-117 — the brand lockup measured 136×29, the only sub-44px touch
     target on the public pages. Grow the hit area to the 44px floor without
     resizing the mark; the footer margin absorbs the extra 15px so spacing
     below the lockup stays where it was. */
  .brand { min-height: 44px; }
  .footer-brand .brand { margin-bottom: 11px; }
  .steps { grid-template-columns: 1fr; }
  .price-table { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --pad: 18px; }
  .section { padding: 70px 0; }
  .feature-table { grid-template-columns: 1fr; }
  .hero-cta, .cta-actions { flex-direction: column; }
  .hero-cta .btn, .cta-actions .btn { width: 100%; }
  .footer-top { gap: 32px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
  .cta-box { padding: 52px 26px; }
}

/* ════════════════════════════════════════════════════
   SUBPAGES (Pricing · Blog · Help · Changelog)
   ════════════════════════════════════════════════════ */

/* ── Sub-page hero (light, centered, compact) ───────── */
.subhero { position: relative; background: var(--white); color: var(--ink); overflow: hidden; border-bottom: 1px solid var(--line); }
.subhero::before { content: none; }
.subhero .wrap { position: relative; z-index: 2; }
.subhero-inner { text-align: center; max-width: 760px; margin: 0 auto; padding-block: 108px 76px; }
.subhero .eyebrow { justify-content: center; margin-bottom: 22px; color: var(--cyan); }
.subhero .eyebrow::before { background: var(--cyan); }
.subhero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.subhero h1 .hl { color: var(--accent); }
.subhero-lede { margin: 22px auto 0; font-size: 19px; line-height: 1.62; color: var(--d2); max-width: 56ch; }
.subhero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.subhero-meta { display: flex; gap: 14px 30px; justify-content: center; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.subhero-meta li { list-style: none; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.subhero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

@media (max-width: 700px) { .subhero-inner { padding-block: 84px 56px; } }

/* ── Active nav link ────────────────────────────────── */
.nav-link.is-active { color: var(--accent); background: var(--accent-t); }

/* ════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════ */
.billing-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 38px; }
/* A bare 12px <button> rendered ~19px tall; structure it to the 44px floor. */
.billing-toggle .bt-label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; transition: color var(--dur) var(--ease); }
.billing-toggle .bt-label.active { color: var(--ink); font-weight: 600; }
.billing-switch { width: 52px; height: 28px; border-radius: var(--r-pill); background: var(--cream-2); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); padding: 0; }
.billing-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease); }
.billing-switch.annual { background: rgba(125,23,201,0.25); border-color: rgba(125,23,201,0.4); }
.billing-switch.annual::after { transform: translateX(24px); background: var(--accent-d); box-shadow: var(--sh-sm); }
.billing-save { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; background: var(--lime); padding: 4px 10px; border-radius: var(--r-pill); }

.price-amt[hidden] { display: none !important; }
.price-amt .n .cur { font-size: 28px; vertical-align: top; line-height: 1.4; margin-right: 1px; }
.price-addon { font-size: 13px; line-height: 1.5; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; margin: 18px 0 4px; }
.price-addon strong { color: var(--ink); font-weight: 600; }
.price-sub { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.price-col.featured .price-sub { color: var(--d2); }
.price-feats .feat-group { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.price-col.featured .price-feats .feat-group { color: var(--d3); }
.price-cta-note { text-align: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); margin-top: 12px; }
.price-col.featured .price-cta-note { color: var(--cyan); }

/* Comparison table */
.compare-wrap { max-width: 880px; margin: 0 auto; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare-table th, .compare-table td { padding: 16px 22px; text-align: center; font-size: 15px; border-bottom: 1px solid var(--line); }
.compare-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); padding-bottom: 18px; border-bottom: 2px solid var(--line); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; width: 46%; color: var(--ink); font-weight: 500; }
.compare-table thead th:first-child { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.compare-table th.pro-col, .compare-table td.pro-col { color: var(--purple); }
.compare-table tbody td { color: var(--ink-2); font-family: var(--font-mono); font-size: 13.5px; }
.compare-table tbody td:first-child { font-family: var(--font-display); font-size: 15px; }
.compare-table tbody tr:hover td { background: rgba(125,23,201,0.04); }
.compare-table .ico { width: 20px; height: 20px; }
.compare-table .yes { color: var(--ok); }
.compare-table .no { color: var(--ink-3); }
.compare-cards { display: none; }

@media (max-width: 760px) {
  .compare-table { display: none; }
  .compare-cards { display: flex; flex-direction: column; gap: 16px; max-width: 460px; margin: 0 auto; }
  .compare-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); padding: 24px; box-shadow: var(--sh-sm); }
  .compare-card.pro { border-color: rgba(125,23,201,0.3); }
  .compare-card h3 { font-family: var(--font-display); font-size: 19px; margin-bottom: 14px; }
  .compare-card.pro h3 { color: var(--purple); }
  .compare-card dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; font-size: 14px; }
  .compare-card dt { color: var(--ink-2); }
  .compare-card dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
}

/* ════════════════════════════════════════════════════
   BLOG
   ════════════════════════════════════════════════════ */
.blog-rss { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--d2); transition: color var(--dur) var(--ease); }
.blog-rss:hover { color: var(--cyan); }
.blog-rss .ico { width: 15px; height: 15px; }

.featured-card { position: relative; display: block; border-radius: var(--r-lg); border: 1px solid rgba(125,23,201,0.18); background: var(--white); overflow: hidden; padding: 48px 52px; box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.featured-card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: rgba(125,23,201,0.25); }
.featured-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.featured-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--r-pill); background: rgba(125,23,201,0.1); border: 1px solid rgba(125,23,201,0.2); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); }
.featured-date { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.featured-card h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); max-width: 22ch; transition: color var(--dur) var(--ease); }
.featured-card:hover h2 { color: var(--purple); }
.featured-excerpt { margin-top: 14px; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); max-width: 62ch; }
.featured-bottom { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.tag-filter { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 36px; margin-bottom: 44px; border-bottom: 1px solid var(--line); }
.tag-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.tag-pill:hover { color: var(--purple); border-color: var(--purple-l); }
.tag-pill.active { color: #fff; background: var(--purple); border-color: var(--purple); font-weight: 600; }

.posts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.post-card { display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--white); padding: 28px 28px 24px; box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: rgba(125,23,201,0.22); }
.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.post-ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.post-ico .ico { width: 21px; height: 21px; }
.post-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.post-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.28; letter-spacing: -0.02em; color: var(--ink); transition: color var(--dur) var(--ease); text-wrap: balance; }
.post-card:hover h3 { color: var(--purple); }
.post-card .excerpt { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
/* Documented tag pill: mono 12px, banded fill, hairline border, ink-2 label.
   Up to 5 per card across 6 cards had made accent tint the page's wallpaper. */
.card-tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

/* Category icon tiles — ONE treatment, matching .feat-ico. These hues used to
   run indigo / green / amber / blue / pink alongside the accent; none of them
   encoded record state, and two were raw Tailwind values. Category is carried
   by the icon's shape, not by a colour. */
.ic-assets,
.ic-ai,
.ic-gamedev,
.ic-economy,
.ic-tools,
.ic-migrate { background: var(--accent-t); border: 1px solid var(--line); color: var(--accent); }

@media (max-width: 760px) {
  .posts-grid { grid-template-columns: 1fr; }
  .featured-card { padding: 32px 26px; }
}

/* Blog detail (prose) */
.blog-detail { background: var(--white); }
/* 760px measured ~89 characters a line. Cap the reading measure at 68ch. */
.blog-prose { max-width: 68ch; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.blog-prose h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.025em; color: var(--ink); margin: 48px 0 16px; line-height: 1.15; }
.blog-prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin: 36px 0 12px; }
.blog-prose h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 28px 0 10px; }
.blog-prose p { margin: 0 0 20px; }
.blog-prose a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.blog-prose a:hover { color: var(--purple-l); }
.blog-prose ul, .blog-prose ol { margin: 0 0 20px; padding-left: 24px; }
.blog-prose li { margin-bottom: 8px; }
.blog-prose blockquote { margin: 28px 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--line-2); color: var(--ink); font-style: italic; }
.blog-prose img { border-radius: var(--r); border: 1px solid var(--line); margin: 28px 0; }
.blog-prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--cream-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
/* Code panels sit on --surface on this surface (see .api-code) — the inherited
   near-black block was the last dark panel on a light-first page. */
.blog-prose pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; overflow-x: auto; margin: 0 0 24px; }
.blog-prose pre code { background: none; border: none; padding: 0; color: var(--ink); font-size: 13px; line-height: 1.7; }
.blog-prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.blog-prose th, .blog-prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.blog-prose th { background: var(--cream); font-family: var(--font-display); color: var(--ink); }
.blog-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--purple); }

/* ════════════════════════════════════════════════════
   LEGAL (Terms · Privacy) — Read mode on the public shell
   ════════════════════════════════════════════════════ */
.legal-detail { background: var(--white); }

/* Two mono date pills under the document title — the documented tag-pill
   vocabulary (mono 12px, banded fill, hairline border, ink-2 label). */
.legal-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.legal-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

/* "English only" callout — the documented --warn data colour, not a raw amber. */
.legal-notice { max-width: 68ch; margin: 0 auto 40px; padding: 14px 18px; border-radius: var(--r); border: 1px solid rgba(138,90,0,0.22); background: rgba(138,90,0,0.06); color: var(--warn); font-size: 14.5px; line-height: 1.6; }

/* Prose column — mirrors .blog-prose: same 68ch measure, heading ramp, link
   treatment and list spacing, so a legal page reads like every other Read page. */
.legal-prose { max-width: 68ch; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.legal-prose > :first-child { margin-top: 0; }
.legal-prose h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.025em; color: var(--ink); margin: 48px 0 16px; line-height: 1.15; }
.legal-prose h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.025em; color: var(--ink); margin: 48px 0 16px; line-height: 1.15; }
.legal-prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin: 36px 0 12px; }
.legal-prose h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 28px 0 10px; }
.legal-prose p { margin: 0 0 20px; }
.legal-prose a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--purple-l); }
.legal-prose ul, .legal-prose ol { margin: 0 0 20px; padding-left: 24px; }
.legal-prose li { margin-bottom: 8px; }
.legal-prose strong { color: var(--ink); font-weight: 600; }
.legal-prose blockquote { margin: 28px 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--line-2); color: var(--ink); font-style: italic; }
.legal-prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 6px; color: var(--ink); }
.legal-prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.legal-prose th, .legal-prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.legal-prose th { background: var(--surface); font-family: var(--font-display); color: var(--ink); }
/* The 375px overflow was fixed at source (three bare URLs relabelled); this is
   only a safety net for a future long token, and unlike `anywhere` it breaks a
   word only when it would otherwise overflow. */
.legal-prose { overflow-wrap: break-word; }

/* ════════════════════════════════════════════════════
   HELP
   ════════════════════════════════════════════════════ */
.help-label .ico { width: 15px; height: 15px; }
.section-head.center .help-label { justify-content: center; }

/* Quick-start timeline */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tl-step { text-align: center; position: relative; }
.tl-num { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; background: var(--white); border: 2px solid var(--purple); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--purple); position: relative; z-index: 1; }
.tl-step::before { content: ""; position: absolute; top: 27px; left: calc(-50% - 1px); right: calc(50% + 27px); height: 2px; background: var(--line); z-index: 0; }
.tl-step:first-child::before { display: none; }
.tl-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; }
.tl-step p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* Accordions (workflows / API / faq share .acc) */
.acc-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.acc { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; box-shadow: var(--sh-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.acc[open] { border-color: rgba(125,23,201,0.28); box-shadow: var(--sh); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; }
.acc summary::-webkit-details-marker { display: none; }
.acc-ico { width: 42px; height: 42px; min-width: 42px; border-radius: 10px; background: var(--accent-t); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); }
.acc-ico .ico { width: 20px; height: 20px; }
.acc-txt { flex: 1; }
.acc-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.acc-sub { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.acc-chev { width: 22px; height: 22px; margin-top: 10px; color: var(--ink-3); transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.acc[open] .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 0 24px 24px 82px; }
.acc-body p { max-width: 68ch; }
.acc-body ul { list-style: none; padding: 0; margin: 0; }
.acc-body--api { padding-left: 24px; }
.acc-body li { position: relative; max-width: 68ch; padding-left: 18px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.acc-body li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); opacity: 0.5; }
@media (max-width: 640px) { .acc-body { padding-left: 24px; } }

/* ── Help: on-this-page nav + client-side search ─────────────────────── */
.help-nav { position: sticky; top: 73px; z-index: 60; background: var(--white); border-bottom: 1px solid var(--line); }
/* Two columns on one row. This used to be a wrapping flex row, which dropped the
   search box onto a second line flush left and made the sticky bar 147px tall —
   a fifth of the viewport permanently occupied on a page built for reading. The
   field column is capped tight so all six pills clear one row at the 1200px
   content width; below that (and in longer locales) the pill row wraps and the
   field stays pinned to the first row rather than floating against a taller block.
   The cap is per-locale: a fixed 200px gave a 162px content box, which cut the
   German placeholder ("Diesen Leitfaden durchsuchen…", 221px) mid-word in 6 of
   the 12 configured locales. The script measures the placeholder at the field's
   own font and publishes --help-search-w; short locales now ask for less than
   200px and long ones get what they need, so no locale pays for another's. */
.help-nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, var(--help-search-w, 200px), 300px); align-items: start; gap: 8px 20px; padding: 14px 0; }
.help-nav-toc { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.help-nav-toc .label { flex: 0 0 auto; padding-top: 15px; }
/* The pill row wraps rather than scrolling: a guide's contents list must never
   hide an entry, and the 12 locales vary too much in label length for any fixed
   width budget to hold. The band publishes its measured height to the root as
   --help-nav-h so the anchor offset tracks whatever height it ends up at. */
.help-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.help-toc > li { flex: 0 0 auto; }
.help-toc .tag-pill { padding: 8px 14px; }
.help-search { display: flex; margin-top: -2px; }
.help-search .cta-input { min-width: 0; max-width: none; width: 100%; }
/* The count line sits under the field and aligns to it, so the resting bar is
   only as tall as the field itself and grows only while a query is active. */
.help-nav .help-search-status { text-align: right; }
/* The empty state is a whole sentence, not a count: inside the field column it
   wrapped to four lines in a 200px ribbon with ~900px of band empty beside it,
   and took the sticky bar from 81px to 195px for the one state that most needs
   calm. It gets its own row across the full band, where its 54ch measure is
   reachable and it costs a single line of height. */
.help-nav .help-search-empty { grid-column: 1 / -1; text-align: left; margin-top: 2px; }
.help-search-status { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.help-search-empty { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; max-width: 54ch; }
/* Desktop: the band is sticky, so an in-page anchor must clear 73px of header
   plus the measured band plus 28px of air. The negative scroll-margin cancels the
   section's own 104px of top padding, which otherwise landed every heading 360px
   down a 900px viewport. Net effect: the heading arrives ~28px under the band. */
@media (min-width: 861px) {
  html:has(.help-nav) { scroll-padding-top: calc(73px + var(--help-nav-h, 83px) + 28px); }
  .help-nav ~ .section { scroll-margin-top: -104px; }
}
/* A short desktop window has the same problem as a narrow one. The pill row
   wraps in sk/de/es/fr/pl/vi/ja, which puts the band at 125px; with the 73px
   header that is 198px of permanent chrome — 33% of a 600px-tall viewport and
   28% of a 700px one, against the ~20% budget the band was rebuilt to respect.
   Below 700px tall the band scrolls away with the page instead of holding that
   ground, and the anchor offset drops its share to match. */
@media (min-width: 861px) and (max-height: 700px) {
  .help-nav { position: static; }
  html:has(.help-nav) { scroll-padding-top: calc(73px + 28px); }
}
@media (max-width: 860px) {
  /* Below this the TOC and the field stack, so the band is too tall to stick —
     it would bury every anchor target under its own chrome. Let it scroll away. */
  .help-nav { position: static; }
  .help-nav-inner { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
  .help-nav-toc { width: 100%; min-width: 0; flex-direction: column; align-items: stretch; gap: 8px; }
  .help-nav-toc .label { padding-top: 0; }
  .help-toc { min-width: 0; }
  .help-search .cta-input { min-width: 0; width: 100%; max-width: none; }
  .help-search { width: 100%; }
  .help-nav .help-search-status { text-align: left; margin-left: 0; }
}

/* API guide code blocks */
.api-step { margin-bottom: 26px; }
.api-step:last-child { margin-bottom: 0; }
.api-step h4, .api-step .api-step-title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 6px; }
.api-step p { max-width: 68ch; font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0 0 12px; }
.api-code { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--ink); white-space: pre; margin: 0; }
.api-code::-webkit-scrollbar { height: 7px; }
.api-code::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

/* Role cards */
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.role-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); padding: 30px 28px; box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.role-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.role-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; }
.role-ico .ico { width: 24px; height: 24px; }
/* One tint for every icon tile. The glyph tells the three roles apart; a hue
   per role would be the data colours doing decoration, which DESIGN.md forbids. */
.role-ico.owner, .role-ico.editor, .role-ico.viewer { background: var(--accent-t); border: 1px solid var(--line); color: var(--accent); }
.role-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.role-card .role-desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); min-height: 44px; }
.role-perms { list-style: none; padding: 0; margin: 16px 0 18px; }
.role-perms li { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.role-perms .ico { width: 17px; height: 17px; flex-shrink: 0; }
/* Included rows read at full ink with an accent tick; excluded rows recede to
   muted ink and a dash. No green — a permission is not a record state. */
.role-perms li.yes { color: var(--ink); }
.role-perms li.yes .ico { color: var(--accent); }
.role-perms li.no { color: var(--ink-3); }
.role-perms li.no .ico { color: var(--ink-3); }
.role-badge { display: inline-block; align-self: flex-start; margin-top: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill); }
.role-badge.billable { background: rgba(125,23,201,0.08); color: var(--purple); border: 1px solid rgba(125,23,201,0.15); }
.role-badge.free { background: var(--white); color: var(--ink-2); border: 1px solid var(--line-2); }

/* Troubleshooting */
.trouble-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 820px; margin: 0 auto; }
.trouble-card { display: flex; align-items: flex-start; gap: 15px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-sm); transition: border-color var(--dur) var(--ease); }
.trouble-card:hover { border-color: var(--purple-l); }
.trouble-ico { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; background: var(--accent-t); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); }
.trouble-ico .ico { width: 19px; height: 19px; }
.trouble-card h4, .trouble-card .trouble-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 5px; }
.trouble-card p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 68ch; }

@media (max-width: 920px) {
  .timeline { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .tl-step:nth-child(odd)::before { display: none; }
  .tl-step:nth-child(even)::before { left: calc(-50% + 3px); }
  .roles-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 600px) {
  /* The horizontal connector cannot survive a single column, and switching it off
     left four numerals floating in a centred column over ~1,100px. A left spine
     keeps the four steps reading as one sequence and halves the height. */
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .tl-step { display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; text-align: left; padding-bottom: 28px; }
  .tl-num { width: 36px; height: 36px; margin: 0; font-size: 15px; grid-row: span 2; }
  .tl-step h3 { align-self: center; margin-bottom: 4px; }
  .tl-step p { grid-column: 2; }
  .tl-step:nth-child(odd)::before,
  .tl-step:nth-child(even)::before { display: block; content: ""; position: absolute; top: 42px; bottom: 6px; left: 17px; right: auto; width: 2px; height: auto; background: var(--line); }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-step:nth-child(odd):last-child::before,
  .tl-step:nth-child(even):last-child::before { display: none; }
}

/* ════════════════════════════════════════════════════
   CHANGELOG (reverse-chron timeline)
   ════════════════════════════════════════════════════ */
.cl-timeline { max-width: 820px; margin: 0 auto; position: relative; padding-left: 34px; }
.cl-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.cl-entry { position: relative; margin-bottom: 56px; }
.cl-entry:last-child { margin-bottom: 0; }
.cl-entry::before { content: ""; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--purple); box-shadow: 0 0 0 5px rgba(125,23,201,0.08); }
.cl-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.cl-version { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--purple); background: rgba(125,23,201,0.08); border: 1px solid rgba(125,23,201,0.18); border-radius: var(--r-pill); padding: 3px 11px; }
.cl-entry h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.025em; color: var(--ink); margin-bottom: 14px; }
.cl-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.cl-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-pill); }
/* Modifiers are namespaced (cl-tag--*) to avoid colliding with Tailwind's
   global `.fixed` utility (which set position:fixed on the "Fixed" badge). */
.cl-tag--new { background: rgba(15,123,79,0.08); color: var(--ok); border: 1px solid rgba(15,123,79,0.22); }
.cl-tag--improved { background: rgba(23,92,211,0.08); color: var(--info); border: 1px solid rgba(23,92,211,0.22); }
.cl-tag--fixed { background: rgba(138,90,0,0.08); color: var(--warn); border: 1px solid rgba(138,90,0,0.22); }
.cl-body { color: var(--ink-2); }
.cl-body h2 { font-size: 18px; margin: 24px 0 10px; color: var(--ink); }
.cl-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); margin: 20px 0 8px; }
.cl-body ul { padding-left: 20px; margin: 0 0 16px; }
.cl-body li { margin-bottom: 6px; line-height: 1.6; }
.cl-body p { margin: 0 0 14px; line-height: 1.7; }
.cl-body a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }

/* ════════════════════════════════════════════════════
   SIMPLE PAGES (403 / 404 error)
   ════════════════════════════════════════════════════ */
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 120px 0 90px; }
.error-page .code { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); }
.error-page h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 6vw, 68px); letter-spacing: -0.03em; color: var(--ink); margin: 14px 0; text-wrap: balance; }
.error-page p { font-size: 18px; color: var(--ink-2); max-width: 46ch; margin: 0 auto 30px; line-height: 1.6; }


/* ════════════════════════════════════════════════════
   AUTH PAGES (login / signup / password-reset / activation)
   Split-panel layout: lavender brand panel + white form card.
   Imported from the claude.ai/design "PolyDrobe Auth" + "Forgot
   Password" mocks. ALL class names are namespaced with `auth-`
   to avoid colliding with Tailwind utilities and app classes
   (the bare design names .input/.field/.tab/.btn-primary/etc.
   would collide — e.g. Tailwind's .fixed regression). Local
   design vars are mapped to the existing :root tokens where they
   match; auth-specific values are inlined.
   ════════════════════════════════════════════════════ */

.auth-shell {
  /* Alias the shared v3 :root tokens so auth styling tracks the design system.
     Only genuinely auth-specific values (purple-hover/soft, radius) are inlined. */
  --auth-purple: var(--purple);
  --auth-purple-hover: #9310d6;        /* auth-specific darker hover for the solid CTA */
  --auth-purple-soft: #f5e8ff;         /* auth-specific tint for icon badges */
  --auth-card-bg: var(--white);
  --auth-border: var(--line);
  --auth-border-input: var(--line);
  --auth-border-input-hover: var(--purple-l);
  --auth-ink: var(--ink);
  --auth-ink-strong: var(--ink);
  --auth-ink-2: var(--ink-2);
  --auth-ink-3: var(--ink-3);          /* #6f6685 — clears WCAG AA on the light card */
  --auth-radius: 10px;
  --auth-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --auth-dur: 180ms;
  --auth-dur-hover: 120ms;
  --auth-shadow-card: 0 1px 2px rgba(20, 12, 25, 0.04);
  --auth-shadow-pop: 0 1px 2px rgba(20, 12, 25, 0.05), 0 12px 36px -12px rgba(20, 12, 25, 0.14);

  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: start center;
  position: relative;
  /* clip, not hidden: hidden makes the shell a scroll container, which kept
     the split brand panel's `position: sticky` from sticking to the viewport
     and left a bare strip under it once the form column outgrew 100dvh. */
  overflow: clip;
  color: var(--auth-ink);
  /* Flat ground. This used to carry a purple radial, a SECOND blue-400 radial
     (One Accent Rule) and a masked 24px dot grid — the retired world's
     grid-bloom backdrop, and the only place all three survived. */
  background: var(--surface);
}

.auth-brand-panel,
.auth-form-panel {
  position: relative;
  z-index: 1;
}

/* Split layout (desktop) */
.auth-shell[data-layout="split"] {
  grid-template-columns: 1fr 1fr;
  place-items: stretch;
}

.auth-brand-panel {
  display: none;
}
.auth-shell[data-layout="split"] .auth-brand-panel {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 48px;
  color: var(--auth-ink);
  /* Flat accent tint. The inherited four-step ramp ran lavender into two blue
     steps (#e9f0fe, #dcecff) — a second hue on a one-accent surface. */
  background: var(--accent-t);
  border-right: 1px solid var(--line);
}
/* Reset-flow brand panel is static (not sticky) — same ground. */
.auth-shell[data-layout="split"][data-brand="static"] .auth-brand-panel {
  position: relative;
}

.auth-bp-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-bp-top img {
  width: 28px;
  height: 28px;
}
.auth-bp-top .auth-wm {
  font-family: var(--font-wm);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--auth-ink);
}
.auth-bp-slogan-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}
.auth-bp-slogan {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--auth-ink-strong);
  margin: 0;
  max-width: 12ch;
}
.auth-bp-slogan .hl {
  color: var(--purple);
}

.auth-form-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: clamp(40px, 8vh, 96px) 24px;
}

.auth-card {
  width: 100%;
  max-width: 404px;
}

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--auth-ink-2);
  transition: color var(--auth-dur) var(--auth-ease), gap var(--auth-dur) var(--auth-ease);
}
.auth-back-link:hover {
  color: var(--auth-purple);
  gap: 9px;
}
.auth-back-link .material-symbols-outlined {
  font-size: 18px;
}

/* Language selector on the auth surface: 12 locales ship, and these pages carry
   no header or footer, so the switcher sits with the back-link row. */
.auth-lang { display: flex; justify-content: flex-end; margin: -8px 0 8px; }
/* Brand-panel proof block: a static record fragment + the landing hero's
   de-risking facts. Must not be squeezed by the flex:1 slogan wrap above it. */
.auth-bp-proof { flex-shrink: 0; margin-top: 28px; }
/* Below ~880px tall the panel cannot hold slogan + proof without slicing the
   facts row mid-glyph; the slogan carries the panel on its own there. */
@media (max-height: 880px) { .auth-bp-proof { display: none; } }
.auth-bp-proof .rec { box-shadow: var(--sh-sm); }
.auth-bp-proof .rec-row { grid-template-columns: 28px minmax(0,1fr) auto auto auto 32px; }
.rec-st { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 9px; }
.rec-st--ok { color: var(--ok); background: rgba(15,123,79,0.08); border-color: rgba(15,123,79,0.22); }
.rec-st--dep { color: var(--ink-3); background: var(--cream-2); border-color: var(--line); }
/* Banner-position error, mirroring .auth-notice's own top gap. */
.auth-error--banner { margin-top: 22px; }

/* Inline wordmark shown only when the brand panel is hidden (≤880px). */
.auth-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.auth-mark img {
  width: 26px;
  height: 26px;
}
.auth-mark .auth-wm {
  font-family: var(--font-wm);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--auth-ink);
}
.auth-shell[data-layout="split"] .auth-mark {
  display: none;
}

/* Log in / Sign up tab switcher (real links, active state per page). */
.auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 5px;
  background: #ece7f2;
  border-radius: var(--auth-radius);
  margin-bottom: 30px;
}
.auth-tabs .auth-glider {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  background: var(--auth-card-bg);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(20, 12, 25, 0.07), 0 1px 1px rgba(20, 12, 25, 0.04);
  transition: transform var(--auth-dur) var(--auth-ease);
}
.auth-shell[data-mode="signup"] .auth-tabs .auth-glider {
  transform: translateX(100%);
}
.auth-tab {
  position: relative;
  z-index: 1;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--auth-ink-2);
  border-radius: 7px;
  transition: color var(--auth-dur) var(--auth-ease);
}
.auth-tab:hover {
  color: var(--auth-ink);
}
.auth-tab[aria-current="page"] {
  color: var(--auth-purple);
  font-weight: 700;
}

/* Combined card: show only the active mode's content; the JS tab toggle flips
   `data-mode` on `.auth-shell` for a smooth in-place switch (no page reload). */
.auth-shell[data-mode="login"] .signup-only { display: none; }
.auth-shell[data-mode="signup"] .login-only { display: none; }

.auth-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--auth-ink-strong);
}
.auth-head p {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--auth-ink-2);
}
/* On login/signup the subtitle reserves height so the card doesn't jump. */
.auth-shell[data-mode] .auth-head p {
  min-height: 47px;
}
.auth-head p strong {
  color: var(--auth-ink);
  font-weight: 600;
}
.auth-head p a {
  color: var(--auth-purple);
  font-weight: 600;
}
.auth-head p a:hover {
  color: var(--auth-purple-hover);
  text-decoration: underline;
}

/* Icon badge (reset-sent / complete / activation states). */
.auth-icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--auth-purple-soft);
  color: var(--auth-purple);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.auth-icon-badge .material-symbols-outlined {
  font-size: 28px;
}
.auth-icon-badge--success {
  background: rgba(39, 174, 96, 0.12);
  color: #1f8f4d;
}
.auth-icon-badge--danger {
  background: rgba(214, 69, 63, 0.1);
  color: #d6453f;
}

/* Small uppercase eyebrow label above the heading (activation-sent). */
.auth-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--auth-purple);
}

/* Mono pill showing the pending email address (activation-sent). */
.auth-email-token {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 8px 13px;
  border: 1px solid var(--auth-border-input);
  border-radius: var(--r-pill);
  background: var(--auth-card-bg);
  box-shadow: var(--auth-shadow-card);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--auth-ink);
}
.auth-email-token .material-symbols-outlined {
  font-size: 16px;
  color: var(--auth-purple);
}

/* Bordered notes card with stacked icon-tile rows (activation-sent). */
.auth-notes {
  margin-top: 24px;
  border: 1px solid var(--auth-border-input);
  border-radius: 12px;
  background: var(--auth-card-bg);
  overflow: hidden;
  box-shadow: var(--auth-shadow-card);
}
.auth-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
}
.auth-note + .auth-note {
  border-top: 1px solid var(--auth-border);
}
.auth-note .auth-note-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--auth-purple-soft);
  color: var(--auth-purple);
  display: grid;
  place-items: center;
}
.auth-note .auth-note-ic .material-symbols-outlined {
  font-size: 17px;
}
.auth-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--auth-ink-2);
}
.auth-note p strong {
  color: var(--auth-ink);
  font-weight: 600;
}

/* Social (Google) button. */
.auth-btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 48px;
  margin-top: 26px;
  border-radius: var(--auth-radius);
  border: 1px solid var(--auth-border-input);
  background: var(--auth-card-bg);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--auth-ink);
  box-shadow: var(--auth-shadow-card);
  transition: border-color var(--auth-dur) var(--auth-ease), background var(--auth-dur) var(--auth-ease), box-shadow var(--auth-dur) var(--auth-ease);
}
.auth-btn-social:hover {
  background: #faf8fc;
  border-color: var(--auth-border-input-hover);
  box-shadow: var(--auth-shadow-pop);
}
.auth-btn-social[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: var(--auth-shadow-card);
}
.auth-btn-social svg {
  width: 18px;
  height: 18px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--auth-ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--auth-border);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Reset/confirm forms get a top margin (no Google button above). */
.auth-form--spaced {
  margin-top: 28px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.auth-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--auth-ink);
}
.auth-field .auth-forgot {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--auth-purple);
}
.auth-field .auth-forgot:hover {
  color: var(--auth-purple-hover);
  text-decoration: underline;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input-wrap .auth-lead {
  position: absolute;
  left: 13px;
  color: var(--auth-ink-3);
  font-size: 19px;
  pointer-events: none;
  display: flex;
}
/* `.auth-input` is also emitted by the Django form widgets (email/password),
   so widget-rendered fields pick up this exact look without extra JS. */
.auth-input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px 0 42px;
  border-radius: var(--auth-radius);
  background: var(--auth-card-bg);
  border: 1px solid var(--auth-border-input);
  color: var(--auth-ink);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color var(--auth-dur) var(--auth-ease), box-shadow var(--auth-dur) var(--auth-ease);
}
.auth-input::placeholder {
  color: var(--auth-ink-3);
}
.auth-input:hover {
  border-color: var(--auth-border-input-hover);
}
.auth-input:focus {
  border-color: var(--auth-purple);
  box-shadow: 0 0 0 3px rgba(125,23,201, 0.12);
}
.auth-input.has-toggle,
.auth-input-wrap:has(.auth-toggle-pw) .auth-input {
  padding-right: 44px;
}

.auth-toggle-pw {
  position: absolute;
  right: 5px;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--auth-ink-3);
}
.auth-toggle-pw:hover {
  color: var(--auth-ink);
}
.auth-toggle-pw .material-symbols-outlined {
  font-size: 20px;
}

/* Custom legal-consent checkbox (visible; .box turns purple when ticked). */
.auth-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--auth-ink-2);
  cursor: pointer;
  user-select: none;
}
.auth-remember input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.auth-remember .auth-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--auth-border-input);
  background: var(--auth-card-bg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--auth-dur) var(--auth-ease);
}
.auth-remember .auth-box .material-symbols-outlined {
  font-size: 15px;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: all var(--auth-dur) var(--auth-ease);
}
.auth-remember input:checked + .auth-box {
  background: var(--auth-purple);
  border-color: var(--auth-purple);
}
.auth-remember input:checked + .auth-box .material-symbols-outlined {
  opacity: 1;
  transform: scale(1);
}
.auth-remember input:focus-visible + .auth-box {
  box-shadow: 0 0 0 3px rgba(125,23,201, 0.2);
}
.auth-remember.legal {
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--auth-ink-2);
  cursor: default;
}
.auth-remember.legal .auth-box {
  margin-top: 1px;
  cursor: pointer;
}
.auth-remember.legal a {
  color: var(--auth-purple);
  font-weight: 600;
  text-decoration: none;
}
.auth-remember.legal a:hover {
  color: var(--auth-purple-hover);
  text-decoration: underline;
}

.auth-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border-radius: var(--auth-radius);
  background: var(--auth-purple);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  /* Neutral ink at a real offset — a coloured halo is the retired glow. */
  box-shadow: var(--sh-sm);
  transition: background var(--auth-dur) var(--auth-ease), transform var(--auth-dur-hover) var(--auth-ease), box-shadow var(--auth-dur) var(--auth-ease);
}
.auth-btn-primary:hover {
  background: var(--auth-purple-hover);
  box-shadow: var(--sh);
}
.auth-btn-primary:active {
  transform: translateY(1px);
}
.auth-btn-primary[disabled] {
  background: var(--cream-2);
  color: var(--ink-2);
  box-shadow: none;
  cursor: not-allowed;
}
.auth-btn-primary[disabled]:hover {
  box-shadow: none;
}
.auth-btn-primary .material-symbols-outlined {
  font-size: 20px;
  transition: transform var(--auth-dur) var(--auth-ease);
}
.auth-btn-primary:not([disabled]):hover .material-symbols-outlined {
  transform: translateX(3px);
}

/* Outline button (reset "Back to log in"). */
.auth-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 28px;
  border-radius: var(--auth-radius);
  border: 1px solid var(--auth-border-input);
  background: var(--auth-card-bg);
  color: var(--auth-ink);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--auth-shadow-card);
  transition: border-color var(--auth-dur) var(--auth-ease), background var(--auth-dur) var(--auth-ease), box-shadow var(--auth-dur) var(--auth-ease);
}
.auth-btn-outline:hover {
  background: #faf8fc;
  border-color: var(--auth-border-input-hover);
  box-shadow: var(--auth-shadow-pop);
}
.auth-btn-outline .material-symbols-outlined {
  font-size: 20px;
}

.auth-terms {
  font-size: 12px;
  line-height: 1.55;
  color: var(--auth-ink-3);
  margin: 14px 0 0;
  text-align: center;
}
.auth-terms a {
  color: var(--auth-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--auth-border-input);
}
.auth-terms a:hover {
  color: var(--auth-ink);
}

.auth-alt {
  margin-top: 26px;
  text-align: center;
  font-size: 13.5px;
  color: var(--auth-ink-3);
}
.auth-alt a {
  color: var(--auth-purple);
  font-weight: 600;
}
.auth-alt a:hover {
  color: var(--auth-purple-hover);
}

/* Inline field + non-field error blocks. */
.auth-error {
  font-size: 13px;
  line-height: 1.45;
  color: var(--err);
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.22);
  border-radius: var(--auth-radius);
  padding: 9px 12px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.auth-error .material-symbols-outlined {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.auth-error p {
  margin: 0;
}
.auth-error--field {
  padding: 7px 11px;
}

/* Access-denied / info notice banner. */
.auth-notice {
  font-size: 13px;
  line-height: 1.45;
  color: var(--warn);
  background: rgba(138, 90, 0, 0.08);
  border: 1px solid rgba(138, 90, 0, 0.22);
  border-radius: var(--auth-radius);
  padding: 10px 13px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 22px;
}
.auth-notice .material-symbols-outlined {
  font-size: 19px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-fade-up {
    opacity: 0;
    transform: translateY(14px);
    animation: authFadeUp 560ms var(--auth-ease) forwards;
  }
  @keyframes authFadeUp {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (max-width: 880px) {
  .auth-shell[data-layout="split"] {
    grid-template-columns: 1fr;
    place-items: start center;
  }
  .auth-shell[data-layout="split"] .auth-brand-panel {
    display: none;
  }
  .auth-shell[data-layout="split"] .auth-mark {
    display: flex;
  }
}
@media (max-width: 480px) {
  .auth-shell,
  .auth-shell[data-layout="split"] {
    padding: 24px 18px;
  }
}


/* ============================================================
   Record fragment — the product-surface component the usage
   cross-reference and the auth brand panel reuse.
   Live markup, legible at 1:1, replacing the shrunken
   screenshot the old hero decorated with floating cards.
   ============================================================ */
.rec { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; }
.rec-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.rec-crumb { min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-crumb span { color: var(--ink-3); margin: 0 4px; }
.rec-count { flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.rec-count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-list { list-style: none; margin: 0; padding: 0; }
.rec-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto 32px; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rec-row:last-child { border-bottom: 0; }
.rec-row--dim { opacity: 0.62; }
.rec-sw { width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid rgba(16,14,20,0.10); }
.rec-sw--a { background: #6d5bd0; } .rec-sw--b { background: #c2703a; }
.rec-sw--c { background: #2f7d8c; } .rec-sw--d { background: #8d8a97; }
.rec-name { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rec-id { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-cat { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.rec-rar { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; border: 1px solid transparent; }
.rec-rar--leg  { color: #8a5a00; background: #fdf3dd; border-color: #f0dcae; }
.rec-rar--epic { color: #6610a8; background: var(--accent-t); border-color: #e2d0f7; }
.rec-rar--rare { color: #175cd3; background: #eaf1fd; border-color: #cfe0fa; }
.rec-rar--dep  { color: var(--ink-2); background: var(--cream-2); border-color: var(--line-2); }
.rec-ver { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.rec-cap { padding: 14px 18px; background: var(--surface); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* ── Usage cross-reference — the record model at depth ──────────────────
   Same frame component as the hero fragment, different structure: one
   record branching into the places it is used. The four hairlines ARE the
   diagram — that is why they are CSS and not an illustration, and why this
   section ships zero SVG and zero icons.

   Static by design. No hover on the cards: they are not links (you cannot
   open a fictional bundle), so a hover affordance would promise a click
   that does not exist. The page's one authored motion moment is the hero's
   transmute; a second one would demote the first.
   ---------------------------------------------------------------------- */
.rec--xref .rec-list .rec-row { border-bottom: 0; padding-bottom: 6px; }

.xref-meta { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Each fact is one unbreakable run so a wrap never orphans a `·`. */
.xref-meta > span { white-space: nowrap; }
/* A description is prose, not a fact: let it wrap inside the cell. */
.xref-meta--desc > span { white-space: normal; }
/* 18px row padding + 28px swatch + 14px grid gap = the .rec-name edge. */
.xref-meta--subject { padding: 0 18px 16px 60px; }

.xref-fan { position: relative; display: grid; place-items: center; height: 64px; background: var(--white); }
/* Centre stub: subject row down to the label. */
.xref-fan::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 22px; background: var(--line); }
/* The label sits ON the line, interrupting it — the branch point. */
.xref-fan .label { position: relative; z-index: 1; background: var(--white); padding: 0 14px; }
/* Horizontal rule spanning the two column centres … */
.xref-fan__line { position: absolute; left: 25%; right: 25%; top: 32px; height: 1px; background: var(--line); }
/* … and its two drops into the cards below. */
.xref-fan__line::before,
.xref-fan__line::after { content: ""; position: absolute; top: 0; width: 1px; height: 32px; background: var(--line); }
.xref-fan__line::before { left: 0; }
.xref-fan__line::after { right: 0; }

/* No border-top. The crossbar, its two drops and a full-width rule directly
   beneath them close a rectangle, and the fan stops reading as a branch and
   starts reading as an empty container. The drops land on the cards' top
   edge instead, pointing at each kind label. */
.xref-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xref-use { display: grid; align-content: start; gap: 8px; padding: 22px 24px; background: var(--white); }
.xref-use + .xref-use { border-left: 1px solid var(--line); }
.xref-use .rec-name { font-size: 15px; }
/* The margin shorthand also clears .ic-status's own margin-left:auto. */
.xref-use .ic-status { margin: 6px 0 0; justify-self: start; }

/* Data colour: encodes a bundle whose availability window has not opened. */
.ic-status--info { color: var(--info); background: rgba(23, 92, 211, 0.08); border-color: rgba(23, 92, 211, 0.22); }

/* The page's own conclusion, outside the frame on purpose: the product shows
   the usages, the page names the problem. Inside the frame any sentence reads
   as product chrome, i.e. as an automated verdict the app cannot make. */
.xref-note { max-width: 60ch; margin: 30px auto 0; text-align: center; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
/* At body scale, accent-coloured bold text is the page's link signature, and
   "this page" is not a link. Emphasis here is a tinted highlight instead: the
   accent stays in the ground, the text stays ink, and nothing invites a click. */
.xref-note mark { background: var(--accent-t); color: var(--ink); font-weight: 600; border-radius: var(--r-sm); padding: 0.08em 0.3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

@media (max-width: 900px) {
  /* .rec-row drops to a 24px swatch here: 18 + 24 + 14 = 56px. */
  .xref-meta--subject { padding-left: 56px; }
}
/* The two cards collapse at 767, not earlier. Measured: they hold two columns
   with no wrap and no overflow down to 780px (widest unbreakable meta run is
   112px in a 361px column), and stacking sooner leaves a 1140px frame with one
   narrow column of content in it. Reusing 767 also keeps this component on the
   breakpoints the surface already has. */
@media (max-width: 767px) {
  .xref-uses { grid-template-columns: minmax(0, 1fr); }
  .xref-use + .xref-use { border-left: 0; border-top: 1px solid var(--line); }
  /* One column: the fan collapses to a single spine and the crossbar goes. */
  .xref-fan { height: 56px; }
  .xref-fan::before { height: 100%; }
  .xref-fan__line { display: none; }
  .xref-use { padding: 18px 20px; }
  /* One fact per line, so the separators go. Must out-specify
     `.xref-meta > span` above, or the dots become their own lines. */
  .xref-meta > span { display: block; }
  .xref-meta > .xref-sep { display: none; }
  .xref-note { font-size: 16px; }
}

/* Closing section */
.cta-actions { display: flex; justify-content: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.price-trust { justify-content: center; }
.price-trust { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 24px; }
.cta-news { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.cta-news__title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 0 0 16px; }

@media (max-width: 900px) {
  .rec-row { grid-template-columns: 24px minmax(0,1fr) auto; row-gap: 8px; }
  .rec-cat, .rec-ver { display: none; }
}

/* Grid items default to min-width:auto, so a nowrap mock URL inside the
   tour frame floors the 1fr track and pushes the whole row past the
   viewport. Let the tracks actually shrink, and let the URL truncate. */
.tour-row > * { min-width: 0; }
.sc-frame, .sc-bar { min-width: 0; }
.sc-bar .u { flex: 1 1 auto; min-width: 0; }
.rec, .rec-bar, .rec-list, .rec-row, .xref-uses, .xref-use { min-width: 0; }
.hero-inner > * { min-width: 0; }

.rec-row[hidden] { display: none; }

/* A real thumbnail in the swatch slot of the usage cross-reference. */
.rec-sw--img { display: block; object-fit: cover; background: var(--surface); }

/* The shared app-era feature-request modal is included on every public page and
   is reachable by signed-in visitors. It is the last Space Grotesk on this
   surface; re-face it here rather than forking the shared component. */
body.v3 [x-show="showFeatureRequestModal"],
body.v3 [x-show="showFeatureRequestModal"] h1,
body.v3 [x-show="showFeatureRequestModal"] h2,
body.v3 [x-show="showFeatureRequestModal"] h3,
body.v3 [x-show="showFeatureRequestModal"] .font-display { font-family: var(--font-body); }

/* ── Cookie consent on the public + auth shells (#136) ─────────────────
   components/cookie_consent.html renders these classes when included with
   `public_shell=True`; the app shell keeps its Tailwind skin. */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
@media (min-width: 640px) { .consent { left: auto; max-width: 400px; } }
.consent-text { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.consent-text a { color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.consent-text a:hover { color: var(--accent-d); }
.consent-actions { display: flex; gap: 8px; }
.consent-actions .btn { flex: 1; }
/* While the banner shows, cookie_consent.html puts .pd-consent-open on <html>:
   pad the shell's last block so its controls scroll clear of the banner
   (#171). 240px covers the tallest locale's banner (204px at 390px) + 16px. */
.pd-consent-open .footer,
.pd-consent-open .auth-form-panel { padding-bottom: 240px; }

/* ── Request-a-feature modal on the public shell (#137) ────────────────
   feature_requests/modal.html renders .fr-overlay/.fr-dialog when included
   with `public_shell=True`. form.html / success.html are shared HTMX
   fragments that do not know the shell, so their app classes (.pd-input,
   .btn-secondary, the submit button) are restyled here by scope. */
.fr-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.65); overflow-y: auto; }
.fr-dialog { width: 100%; max-width: 520px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); color: var(--ink); }
.fr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.fr-head h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.fr-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); color: var(--ink-2); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.fr-close:hover { color: var(--ink); border-color: var(--line-2); }
.fr-close .ico { width: 18px; height: 18px; }
.fr-spinner { display: flex; justify-content: center; padding: 48px 0; color: var(--accent); }
.fr-spinner svg { width: 32px; height: 32px; }
.fr-dialog label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.fr-dialog .pd-input { width: 100%; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; box-shadow: none; }
.fr-dialog .pd-input::placeholder { color: var(--d3); }
.fr-dialog .pd-input:focus { outline: none; border-color: var(--purple-l); box-shadow: 0 0 0 4px rgba(125,23,201,0.16); }
.fr-dialog form > .mt-8 { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.fr-dialog .btn-secondary, .fr-dialog form button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; text-transform: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fr-dialog .btn-secondary { background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.fr-dialog .btn-secondary:hover { border-color: var(--purple-l); box-shadow: var(--sh); }
.fr-dialog form button[type="submit"] { background: var(--accent); color: #fff; border: 1px solid transparent; box-shadow: var(--sh-sm); }
.fr-dialog form button[type="submit"]:hover { background: var(--accent-d); box-shadow: var(--sh); }
.fr-dialog h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.fr-dialog #feature-request-content p { color: var(--ink-2); }