/* RenameWise — marketing site.
 *
 * Colour comes entirely from tokens.css, which is GENERATED from the app's
 * gui/theme.py PALETTE. Nothing here hard-codes a brand hex: marketing-only
 * shades are derived with color-mix() from those tokens, so the light and dark
 * themes both follow the product automatically and the site cannot drift from
 * the app it is selling.
 *
 * The component vocabulary (.btn, .pill, .chip, .card, the dashed drop zone,
 * the left status stripe, the red/green name diff) is deliberately the SAME
 * vocabulary the app uses — a visitor who downloads the app should recognise
 * the interface they were just looking at.
 */

/* ==========================================================================
   1. Derived tokens
   ========================================================================== */

:root {
  /* spacing scale */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* radii — matched to the app: 10px controls, 12-16px cards, 999px pills */
  --r-sm: 8px;  --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  --wrap: 1160px;
  --wrap-narrow: 760px;
  --wrap-play: 940px;

  /* Elevation, derived from --text so it deepens correctly in dark mode. */
  --sh-sm: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
  --sh-md: 0 6px 18px -8px color-mix(in srgb, var(--text) 30%, transparent);
  --sh-lg: 0 18px 48px -18px color-mix(in srgb, var(--text) 38%, transparent);
  --sh-xl: 0 40px 90px -30px color-mix(in srgb, var(--text) 45%, transparent);

  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Category hues, verbatim from webui/text.py PROFILE_CHIP_COLORS. These
     deliberately avoid the brand blue so a "Filing" label never reads as a
     button — the "blue means four things" finding. */
  /* Deepened from #7c5cff / #2e8b57: white on those was 4.35 and 4.25,
   * under AA for a 10.9px chip. Now 5.55 and 5.28, same hues. */
  --cat-filing: #6a45f5;
  --cat-product: #277a4c;
  --cat-descriptive: #6b7280;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;          /* clears the sticky header on anchors */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  color-scheme: light dark;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 750;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.7rem); letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand_hover); text-decoration: underline; }

img, svg, video { max-width: 100%; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: .88em;
}
code {
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .12em .4em;
}
kbd {
  background: var(--surface);
  border: 1px solid var(--border_strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .1em .45em;
  font-size: .82em;
  color: var(--text_muted);
  white-space: nowrap;
}
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-7) 0; }

::selection { background: var(--brand_soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: var(--on_brand);
  padding: 12px 20px; border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; text-decoration: none; }

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

/* ==========================================================================
   3. Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.wrap-narrow { max-width: var(--wrap-narrow); }
/* Between narrow and full: wide enough for the playground's four controls to
 * sit on one row and for a long filename not to wrap. */
.wrap-play { max-width: var(--wrap-play); }

.section { padding-block: clamp(var(--s-8), 7vw, var(--s-10)); }
.section-tight { padding-block: clamp(var(--s-7), 5vw, var(--s-8)); }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }

.section-head { max-width: 680px; margin-bottom: var(--s-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p {
  margin-top: var(--s-3);
  font-size: 1.13rem;
  color: var(--text_muted);
  text-wrap: pretty;
}

/* A small uppercase label above a heading — the app's #sectionCaption. */
.eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-3);
}

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack-lg { display: grid; gap: var(--s-5); }
.center { text-align: center; }
.muted { color: var(--text_muted); }
.faint { color: var(--text_faint); font-size: .92rem; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   4. Controls — matched to the app's QSS / style.css metrics
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 11px 20px;
  border: 1px solid var(--border_strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease,
              transform .1s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.btn:active { transform: scale(.975); }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  /* --on_brand, never #fff: dark mode brightens --brand, where white is
   * 2.78:1 and near-black is 6.39:1. */
  color: var(--on_brand);
  box-shadow: 0 8px 22px -10px var(--brand);
}
.btn-primary:hover {
  background: var(--brand_hover);
  border-color: var(--brand_hover);
  color: var(--on_brand);
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--text_muted); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }

.btn-lg { padding: 14px 28px; font-size: 1.02rem; border-radius: var(--r-lg); }
.btn-sm { padding: 7px 14px; font-size: .87rem; }
.btn-block { width: 100%; }

.btn[aria-disabled="true"] {
  pointer-events: none;
  background: var(--disabled_bg);
  border-color: var(--border);
  color: var(--disabled_text);
  box-shadow: none;
}

/* Pills — 1:1 with the app's privacy / engine-status pills. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border_strong);
  background: var(--surface);
  color: var(--text_muted);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.pill-ok { color: var(--ok_text); background: var(--ok_soft); border-color: var(--ok_border); }
.pill-warn { color: var(--warn_text); background: var(--warn_soft); border-color: var(--warn_border); }
.pill-brand { color: var(--brand); background: var(--brand_soft); border-color: var(--selected_border); }

.pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* Category chips, matching the app's per-card chip. */
.chip-cat {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9px;
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  vertical-align: middle;
}
.chip-filing { background: var(--cat-filing); }
.chip-product { background: var(--cat-product); }
.chip-descriptive { background: var(--cat-descriptive); }

/* ==========================================================================
   5. Header / navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: 66px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--text);
  flex: none;
}
.brand-link:hover { color: var(--text); text-decoration: none; }
.brand-link img { width: 30px; height: 30px; border-radius: 7px; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--s-3);
  flex: 1;
}
.nav-links a {
  padding: 8px 13px;
  border-radius: var(--r-sm);
  color: var(--text_muted);
  font-size: .93rem;
  font-weight: 550;
}
.nav-links a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--brand); background: var(--brand_soft); }

.nav-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.theme-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--border_strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text_muted);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.theme-btn:hover { background: var(--hover); color: var(--text); }
.theme-btn svg { width: 17px; height: 17px; }
/* Show exactly one glyph for the resolved theme. */
.theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn .i-sun { display: none; }
  :root:not([data-theme]) .theme-btn .i-moon { display: block; }
}

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--border_strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}
.nav-toggle svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset: 66px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--s-3) var(--s-5) var(--s-5);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-lg);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s var(--ease);
  }
  .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: 13px 12px; font-size: 1rem; }
  .nav-toggle { display: grid; }
  .nav-cta { display: none; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(var(--s-7), 6vw, var(--s-9));
  padding-bottom: clamp(var(--s-7), 5vw, var(--s-8));
  text-align: center;
  overflow: hidden;
}
/* The app's drop zone opens with "a whisper-soft brand halo behind the logo —
   the first-impression moment". This is that halo, at page scale. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%; top: -260px;
  width: min(1200px, 130vw); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--brand) 15%, transparent) 0%,
              transparent 62%);
  pointer-events: none;
  z-index: -1;
}

/* The hero's category line. Its own class rather than .eyebrow, which is used
   15x elsewhere at .72rem — restyling that would resize every section header
   on the site. Sized to be read at a glance yet stay clearly subordinate to
   the h1; see the comment at its markup in index.html for why not equal. */
.hero-kicker {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--brand);
}

.hero h1 { margin-bottom: var(--s-4); }
.hero-sub {
  max-width: 620px;
  margin: 0 auto var(--s-6);
  font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem);
  color: var(--text_muted);
  text-wrap: pretty;
}
.hero-sub strong { color: var(--text); font-weight: 650; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-bottom: var(--s-4);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: center;
  font-size: .85rem;
  color: var(--text_faint);
}
/* Moved below the CTA (see index.html), so the spacing flipped with it: it now
   separates itself from the meta row above rather than from the headline. */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: center; margin-top: var(--s-5);
}

/* ==========================================================================
   7. App window mockup — the product, rebuilt from its own components
   ========================================================================== */

.app-shot {
  margin-top: var(--s-7);
  border-radius: var(--r-xl);
  border: 1px solid var(--border_strong);
  background: var(--surface);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  user-select: none;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.win-dots { display: flex; gap: 7px; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.win-dots i:nth-child(1) { background: #ff5f57; }
.win-dots i:nth-child(2) { background: #febc2e; }
.win-dots i:nth-child(3) { background: #28c840; }
.win-title {
  flex: 1; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--text_muted);
  margin-right: 44px;                  /* optically centre against the dots */
}

.win-body { display: flex; min-height: 430px; }

/* sidebar — 76px icon rail, exactly as webui/assets/style.css */
.win-side {
  width: 76px; flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 14px 6px;
}
.win-brand {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px; margin-bottom: 12px;
  background: linear-gradient(160deg, var(--brand), var(--brand_hover));
  color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .04em;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--brand) 60%, transparent);
}
.win-nav {
  width: 100%; padding: 8px 2px 6px;
  border-radius: 9px;
  display: grid; gap: 2px; justify-items: center;
  color: var(--text_muted); position: relative;
}
.win-nav .g { font-size: 17px; line-height: 1; }
.win-nav .l { font-size: 10px; }
.win-nav.on { color: var(--brand_hover); background: var(--brand_soft); }
.win-nav.on::before {
  content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}

.win-main { flex: 1; min-width: 0; padding: 16px 18px; display: grid; gap: 9px; align-content: start; }

.win-toolbar { display: flex; align-items: center; gap: 8px; }
.win-field {
  flex: 1; min-width: 0;
  padding: 7px 11px;
  border: 1px solid var(--border_strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text_muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-btn {
  padding: 7px 13px;
  border: 1px solid var(--border_strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-weight: 550; flex: none;
}
.win-btn.primary {
  /* The mockup's Analyze/Rename buttons — same --on_brand rule as the real
   * .btn-primary, since this is a picture of that exact control. */
  background: var(--brand); border-color: var(--brand);
  color: var(--on_brand); font-weight: 600;
}
.win-pills { display: flex; gap: 6px; flex: none; }
.win-pill {
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 550; white-space: nowrap;
  border: 1px solid var(--border_strong); color: var(--text_muted);
  background: var(--surface);
}
.win-pill.ok { color: var(--ok_text); background: var(--ok_soft); border-color: var(--ok_border); }

.win-list { display: grid; gap: 8px; margin-top: 2px; }

/* one review row — the app's .rcard, left status stripe and all */
.rrow {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px 9px 11px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.rrow[data-status="done"] { border-left-color: var(--success_line); }
.rrow[data-review="1"] { box-shadow: inset 3px 0 0 var(--warn_text); }

.rthumb {
  width: 42px; height: 42px; flex: none;
  border-radius: 8px;
  background: var(--thumb_bg);
  display: grid; place-items: center;
  font-size: 18px;
}
.rcol { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rname {
  font-weight: 600; font-size: 14px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rname .ext { color: var(--text_faint); font-weight: 500; }
.rsub {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text_muted);
  overflow: hidden; white-space: nowrap;
}
.rsub .old { color: var(--text_faint); }
.rsub .arrow { color: var(--text_faint); flex: none; }
.rmeta { display: flex; align-items: center; gap: 6px; flex: none; }

.rbadge {
  font-size: 10px; font-weight: 650;
  color: var(--warn_text); background: var(--warn_soft);
  border: 1px solid var(--warn_border); border-radius: var(--r-pill);
  padding: 1px 8px; white-space: nowrap;
}

/* The name diff — the app's inline old→new token highlighting. */
.d-del {
  /* down_text (4.76:1), not danger (3.56:1) — this is small type on a
   * tinted chip, so it needs the darker of the two red tokens. */
  color: var(--down_text); background: var(--danger_soft);
  border-radius: 3px; padding: 0 2px; text-decoration: line-through;
}
.d-add {
  color: var(--ok_text); background: var(--ok_soft);
  border-radius: 3px; padding: 0 2px; font-weight: 600;
}

.win-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text_muted);
}
.win-foot .grow { flex: 1; }

@media (max-width: 720px) {
  .app-shot { font-size: 11.5px; }
  .win-side { display: none; }
  .win-body { min-height: 0; }
  .win-main { padding: 12px; }
  .win-pills, .win-toolbar .win-btn { display: none; }
}

/* ==========================================================================
   8. Before / after transformation strip
   ========================================================================== */

.xform-list { display: grid; gap: var(--s-2); }
.xform {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr;
  align-items: center;
  gap: var(--s-4);
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  font-family: var(--mono);
  font-size: .87rem;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.xform:hover {
  border-color: var(--selected_border);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.xform-old { color: var(--text_faint); text-decoration: line-through; overflow-wrap: anywhere; }
.xform-arrow { color: var(--text_faint); font-family: var(--font); }
.xform-new { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.xform-new .hl { color: var(--ok_text); }

@media (max-width: 640px) {
  .xform { grid-template-columns: 1fr; gap: var(--s-1); text-align: left; }
  .xform-arrow { display: none; }
}

/* ==========================================================================
   9. Cards / features
   ========================================================================== */

.card {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card-hover:hover {
  border-color: var(--selected_border);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--text_muted); font-size: .95rem; }

.card-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand_soft);
  color: var(--brand);
  margin-bottom: var(--s-4);
}
.card-icon svg { width: 21px; height: 21px; }
.card-icon.ok { background: var(--ok_soft); color: var(--ok_text); }
.card-icon.violet {
  background: color-mix(in srgb, var(--cat-filing) 13%, transparent);
  color: var(--cat-filing);
}

/* numbered steps — the app's .ovl-step vocabulary */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.step { display: flex; gap: var(--s-4); align-items: flex-start; }
.step-n {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand_soft);
  /* brand_hover, not brand: the fill is brand_soft, where plain brand is
   * 4.28:1. The darker brand tone on the same fill is 5.17:1. */
  color: var(--brand_hover);
  font-weight: 700;
  font-size: .95rem;
}
.step h3 { margin-bottom: var(--s-1); }
.step p { color: var(--text_muted); font-size: .95rem; }

/* ==========================================================================
   10. Privacy band
   ========================================================================== */

.privacy-band {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ok_text) 7%, var(--bg)),
      var(--bg));
  border-block: 1px solid var(--ok_border);
}
.privacy-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}
.net-list { display: grid; gap: var(--s-5); }
.net-group { display: grid; gap: var(--s-3); }
/* The caption carries the claim, so it has to be readable before the marks
 * are — it is the thing that stops the panel being ambiguous. */
.net-cap {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin: 0;
}
.net-cap-private { color: var(--ok_text); }
.net-cap-wire { color: var(--text_muted); }
.net-item {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.net-mark {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
}
/* Green confirms the privacy claim; the wire items are neutral because they
 * are facts, not warnings. No red on this panel at all — see index.html. */
.net-mark.private { background: var(--ok_soft); color: var(--ok_text); border: 1px solid var(--ok_border); }
.net-mark.wire { background: var(--hover); color: var(--text_muted); border: 1px solid var(--border_strong); }
.net-item b { display: block; font-size: .95rem; }
.net-item span { font-size: .88rem; color: var(--text_muted); }

@media (max-width: 860px) { .privacy-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   11. Interactive naming playground
   ========================================================================== */

.play {
  border: 1px solid var(--border_strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.play-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.ctrl { display: grid; gap: 5px; }
.ctrl-cap {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text_faint);
}
.select {
  width: 100%;
  padding: 9px 32px 9px 11px;
  border: 1px solid var(--border_strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: .92rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236b7789' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.play-out { padding: var(--s-5); display: grid; gap: var(--s-3); }
.play-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-4);
  align-items: baseline;
}
.play-key {
  font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text_faint);
}
.play-val {
  font-family: var(--mono);
  font-size: clamp(.88rem, .8rem + .45vw, 1.1rem);
  overflow-wrap: anywhere;
}
.play-val.old { color: var(--text_faint); text-decoration: line-through; }
.play-val.new { color: var(--text); font-weight: 650; }
.play-val.new .date { color: var(--brand); }
.play-note {
  padding: var(--s-3) var(--s-5) var(--s-5);
  font-size: .85rem;
  color: var(--text_faint);
}
@media (max-width: 560px) {
  .play-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   12. Comparison table
   ========================================================================== */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
table.cmp th, table.cmp td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.cmp thead th {
  background: var(--bg);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text_muted);
}
table.cmp thead th.hi { color: var(--brand); }
table.cmp tbody tr:last-child th,
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tbody th { font-weight: 600; color: var(--text); width: 32%; }
/* Our own column, actually emphasised. At 4% brand the tint was below the
 * threshold of perception, so the column that is supposed to win read exactly
 * like the two it is being compared against. 9% plus side rails and a heavier
 * weight makes it the thing the eye lands on. */
table.cmp th.hi, table.cmp td.hi {
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  border-inline: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
table.cmp td.hi { font-weight: 600; color: var(--text); }
table.cmp thead th.hi { border-top: 2px solid var(--brand); }
table.cmp tbody tr:last-child td.hi { border-bottom: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
table.cmp .y { color: var(--ok_text); font-weight: 700; }
table.cmp .n { color: var(--text_faint); }

/* ==========================================================================
   13. FAQ accordion
   ========================================================================== */

.faq { display: grid; gap: var(--s-2); }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .16s ease;
}
.faq details[open] { border-color: var(--selected_border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: 17px 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--hover); }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text_faint);
  border-bottom: 2px solid var(--text_faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-body { padding: 0 20px 18px; color: var(--text_muted); font-size: .95rem; }
.faq-body > :first-child { margin-top: 0; }

/* ==========================================================================
   14. Pricing
   ========================================================================== */

.price-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--border_strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  margin-bottom: var(--s-6);
}
.price-toggle button {
  border: 0; background: transparent;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--text_muted);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.price-toggle button.on { background: var(--brand); color: var(--on_brand); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: start;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  height: 100%;
}
.plan.featured {
  border-color: var(--brand);
  box-shadow: var(--sh-lg);
}
.plan-flag {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--on_brand);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-name { font-size: 1.05rem; font-weight: 700; }
.plan-for { color: var(--text_muted); font-size: .88rem; margin-top: 3px; min-height: 2.6em; }
.plan-price {
  display: flex; align-items: baseline; gap: 5px;
  margin: var(--s-4) 0 2px;
}
.plan-amount { font-size: 2.5rem; font-weight: 750; letter-spacing: -.04em; }
.plan-per { color: var(--text_muted); font-size: .9rem; }
.plan-note { color: var(--text_faint); font-size: .82rem; min-height: 1.4em; }
.plan .btn { margin: var(--s-5) 0; }
.plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-feats li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .91rem; margin: 0;
}
.plan-feats svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--ok_text); }
.plan-feats .off { color: var(--text_faint); }
.plan-feats .off svg { color: var(--text_faint); }

@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ==========================================================================
   15. Prose (privacy, terms, help)
   ========================================================================== */

.prose { font-size: 1.02rem; }
.prose h2 {
  font-size: 1.6rem;
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
  scroll-margin-top: 90px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.15rem;
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  scroll-margin-top: 90px;
}
.prose ul, .prose ol { margin-bottom: 1.2em; }
.prose li { margin-bottom: .55em; }
.prose > p, .prose li { color: var(--text_muted); }
.prose strong { color: var(--text); font-weight: 650; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.prose th { font-weight: 650; color: var(--text); }
.prose td { color: var(--text_muted); }

.callout {
  display: flex; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 1.4em;
  font-size: .95rem;
}
.callout p { color: var(--text_muted); }
.callout strong { color: var(--text); }
.callout.ok { border-left-color: var(--ok_text); background: var(--ok_soft); border-color: var(--ok_border); }
.callout.ok p, .callout.ok strong { color: var(--ok_text); }
.callout.warn { border-left-color: var(--warn_text); background: var(--warn_soft); border-color: var(--warn_border); }
.callout.warn p, .callout.warn strong { color: var(--warn_text); }
/* The Gatekeeper note in the download hero: constrained and centred to match
 * the hero column rather than running the full section width. */
.callout.first-launch {
  max-width: 620px; margin: var(--s-6) auto 0; text-align: left;
}
/* Same treatment for the "licences aren't on sale yet" note above the plans. */
.callout.pre-launch {
  max-width: 680px; margin: var(--s-6) auto 0; text-align: left;
  border-left-color: var(--brand);
  background: var(--brand_soft); border-color: var(--selected_border);
}
.callout.pre-launch p { color: var(--text); }

/* page header for interior pages */
.page-head {
  padding-block: clamp(var(--s-7), 5vw, var(--s-8)) var(--s-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.page-head h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.page-head p { margin-top: var(--s-3); color: var(--text_muted); font-size: 1.1rem; max-width: 640px; }

/* table of contents */
.toc {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: var(--s-7);
}
.toc-cap {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text_faint);
  margin-bottom: var(--s-2);
}
.toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s-5); }
.toc li { margin-bottom: 6px; font-size: .93rem; break-inside: avoid; }
@media (max-width: 560px) { .toc ul { columns: 1; } }

/* ==========================================================================
   16. CTA + footer
   ========================================================================== */

.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(var(--s-7), 5vw, var(--s-9)) var(--s-5);
  text-align: center;
  background: linear-gradient(160deg, var(--brand), var(--brand_hover));
  /* Every colour in this band is derived from --brand / --on_brand rather
   * than hard-coded #fff, so the band FLIPS POLARITY with the theme. Dark
   * mode brightens --brand to #6f97ff, on which white text is 2.78:1 — the
   * band was the largest remaining instance of that failure. With --on_brand
   * it is 6.39:1 in dark and 4.90:1 in light, and the inner button inverts
   * with it (light: white pill, brand label; dark: near-black pill, brand
   * label) instead of becoming unreadable. */
  color: var(--on_brand);
  overflow: hidden;
}
.cta-band h2 { color: var(--on_brand); margin-bottom: var(--s-3); }
/* 88%, not 82% — the mix is against the band, so every point of transparency
 * is contrast spent on a paragraph that still has to clear AA. */
.cta-band p {
  color: color-mix(in srgb, var(--on_brand) 88%, transparent);
  max-width: 520px; margin-inline: auto;
}
.cta-band .btn {
  background: var(--on_brand); border-color: var(--on_brand); color: var(--brand);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.cta-band .btn:hover {
  background: color-mix(in srgb, var(--on_brand) 92%, var(--brand));
  color: var(--brand_hover);
}
.cta-band .btn-outline {
  background: transparent;
  border-color: color-mix(in srgb, var(--on_brand) 45%, transparent);
  color: var(--on_brand); box-shadow: none;
}
.cta-band .btn-outline:hover {
  background: color-mix(in srgb, var(--on_brand) 14%, transparent);
  color: var(--on_brand);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.cta-fine {
  margin-top: var(--s-4); font-size: .85rem;
  color: color-mix(in srgb, var(--on_brand) 82%, transparent);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
.footer-brand p {
  margin-top: var(--s-3);
  color: var(--text_muted);
  font-size: .9rem;
  max-width: 300px;
}
/* h3, not h4: these followed an <h2> on every page, so the document outline
 * skipped a level site-wide. Styled small, but the level is honest. */
.footer-col h3 {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text_faint);
  margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 2px; }
/* inline-block + vertical padding takes these from a 17px-tall tap target to
 * 24px+ (WCAG 2.2 §2.5.8). They sit in a stacked list, so the inline-text
 * exemption does not apply to them the way it does to links inside prose. */
.footer-col a {
  display: inline-block; padding: 4px 0;
  min-height: 24px; line-height: 1.5;
  color: var(--text_muted); font-size: .92rem;
}
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text_faint);
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   17. Reveal-on-scroll + responsive tail
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s var(--ease);
}

@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
}

/* The site respects the same reduced-motion contract as the app. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cta-band, .theme-btn, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}