/*
  Mentioned — marketing homepage.

  Why this is not site.css: site.css is the shared design system behind ~25
  static pages, the /app dashboard (src/dashboard.ts) and the shared result
  page (src/share.ts). This redesign changes the palette, the type scale and
  the nav/footer shape, so folding it into site.css would restyle all of them
  in one commit. The homepage is the first page onto the new system; the rest
  follow page by page, and until then each file owns its own look.

  The page ships no client JavaScript of its own beyond the checker form, so
  everything here is static: no transitions that need a frame budget, no
  container queries, no media queries either — every grid is auto-fit/minmax or
  flex-wrap and all display type is clamp(), which is what makes 390px and
  1600px the same stylesheet.

  Sections
    1. Tokens
    2. Base + shared primitives (wrap, section, buttons, marks)
    3. Nav
    4. Hero + floating fragments
    5. Product shot (the dashboard, rebuilt in markup)
    6. Trust band
    7. Checker — the one live form on the page
    8. Logo grid
    9. Numbers band
   10. Product cards
   10b. Feature band (two alternating rows on a wash)
   11. Comparison matrix
   12. Pricing
   13. FAQ
   14. Closing CTA + footer
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  --ink: #0f1115;
  --body: #474b57;
  --muted: #5b6070;
  --ink-soft: #282c36;
  --ink-dim: #3a3e49;

  --blue: #1d4ed8;
  --blue-hover: #1739a8;
  --purple: #7c3aed;
  --wash: #eef3fe;
  --tint: #e9effd;

  --success: #15803d;
  --success-bg: #eafaf0;
  --warn: #9a5209;
  --warn-bg: #fdf6e7;
  --danger: #b3423a;
  --danger-bg: #fdf1ef;

  --rival-strong: #8a93a6;
  --rival-weak: #c9cedb;

  --border: #e3e6ee;
  --border-light: #ebedf2;
  --border-faint: #f1f2f6;
  --surface: #fbfbfc;
  --grid: #f4f5f9;

  /* Gellix is licensed and self-hosted in production. Plus Jakarta Sans is the
     free stand-in that ships today: same geometric-sans lane, same tall
     x-height and near-circular bowls, so the headline weight reads the way the
     brand font does rather than merely fitting the same box. Figtree stays
     behind it as a second fallback. Dropping the licensed file in is a
     one-line change, not a reflow. */
  --font: "Twemoji Country Flags", Gellix, "Plus Jakarta Sans", Figtree, Arial, ui-sans-serif,
    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* The wash the nav and the hero share, so there is no seam between them. */
  --hero-tint: #f7f6fe;

  --grad-primary: linear-gradient(142deg, #6d3ef0 0%, #3c4ae0 48%, #1d4ed8 100%);
  --grad-plan: linear-gradient(180deg, #2563eb, #1a46c4);

  --sh-card: 0 1px 3px rgba(15, 17, 21, 0.05), 0 18px 40px -24px rgba(15, 17, 21, 0.22);
  --sh-frag: 0 1px 2px rgba(15, 17, 21, 0.04), 0 18px 40px -22px rgba(15, 17, 21, 0.24);
  --sh-shot: 0 30px 80px -30px rgba(15, 17, 21, 0.28);
  --sh-btn: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 28px -12px rgba(29, 78, 216, 0.7);
  --sh-btn-sm: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px -8px rgba(88, 45, 225, 0.55);

  --wrap: 1300px;
  --gutter: 32px;

  /* Compatibility aliases. The checker's result markup is built in JavaScript
     (see the render() block in index.html) and names these tokens inline, as it
     did when the page linked site.css. Keeping the names means the redesign did
     not have to touch the one script on the page that spends API budget. */
  --bg: #ffffff;
  --bg-raised: var(--surface);
  --accent: var(--blue);
  --accent-soft: var(--tint);
  --hit: var(--success);
  --hit-soft: var(--success-bg);
  --miss: var(--danger);
  --radius-md: 12px;
}

/* ==========================================================================
   2. BASE + SHARED PRIMITIVES
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font); margin: 0; }
p { margin: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
::selection { background: #dbe6fe; }

svg { flex: 0 0 auto; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 88px 0 0; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sec-head { max-width: 660px; margin-bottom: 34px; }
.sec-head.center { margin-inline: auto; text-align: center; max-width: 640px; }
.sec-head h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.034em;
  color: var(--ink);
}
.sec-head p { font-size: 16.5px; line-height: 1.6; color: var(--body); }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- The logo lockup. Three bars, tall-short-tall, drawn to cap height beside
       the wordmark. Four sizes; the SVG carries the accessible name. --------- */
.lockup { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); }
.lockup svg { display: block; }
.lockup-word { font-weight: 800; letter-spacing: -0.035em; }

/* --- Buttons. No transform on hover: a 54px pill that moves under the cursor
       reads as a toy, and this one spends real API budget. ------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  border: 0;
}
.btn-grad { background: var(--grad-primary); color: #fff; box-shadow: var(--sh-btn-sm); }
.btn-grad:hover { color: #fff; }
.btn-arrow {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.17);
}

.btn-nav { gap: 10px; height: 38px; padding: 0 5px 0 17px; font-size: 13.5px; font-weight: 650; }
.btn-nav .btn-arrow { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.16); }

.btn-hero { gap: 14px; height: 54px; padding: 0 7px 0 26px; font-size: 16px; font-weight: 660; }
.btn-hero .btn-arrow { width: 40px; height: 40px; }
.btn-grad.btn-hero { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 28px -12px rgba(88, 45, 225, 0.6); }

.btn-outline {
  gap: 11px;
  height: 54px;
  padding: 0 26px;
  border: 1px solid #dfe2ea;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 640;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.05);
}
.btn-outline:hover { color: var(--ink); }
.btn-outline .btn-arrow { width: 24px; height: 24px; border: 1px solid var(--border); background: none; }

/* ==========================================================================
   3. NAV
   ========================================================================== */

/* The nav has no edge of its own at the top of the page: it sits on the hero's
   wash (the hero reaches up behind it — see `.hero`), so the two read as one
   surface. Once you scroll past the hero it needs to separate from the white
   content running under it, and that is the only reason the scroll animation
   below exists. Browsers without scroll-driven animations keep the tinted bar,
   which is legible on its own — the upgrade is polish, not the mechanism. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--hero-tint);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}

@supports (animation-timeline: scroll()) {
  .nav {
    animation: nav-lift linear both;
    animation-timeline: scroll(root);
    animation-range: 40px 150px;
  }
  @keyframes nav-lift {
    to {
      background: rgba(255, 255, 255, 0.88);
      border-bottom-color: var(--border-light);
    }
  }
}
.nav-inner { display: flex; align-items: center; gap: 34px; height: 66px; }
.nav .lockup-word { font-size: 16.5px; }
.nav-links { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--body);
  padding: 7px 11px;
  border-radius: 7px;
}
.nav-links a:hover { background: #f3f4f8; color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-login { font-size: 13.5px; font-weight: 600; color: var(--body); }
.nav-login:hover { color: var(--ink); }

/* ==========================================================================
   4. HERO
   ========================================================================== */

/* -66px/+66px is the nav's own height: the hero starts underneath it and pads
   itself back down, so the wash and both glows run behind the nav and the seam
   between them disappears. The wash then fades to white by the time the
   product shot bleeds off the bottom. */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: -66px;
  padding-top: 66px;
  background: linear-gradient(180deg, var(--hero-tint) 0%, #faf9ff 62%, #ffffff 100%);
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(64% 42% at 50% 2%, rgba(29, 78, 216, 0.1) 0%, rgba(29, 78, 216, 0) 70%),
    radial-gradient(40% 30% at 88% 8%, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0) 68%);
}
.hero-row {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px var(--gutter) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 34px 26px;
}
.hero-head { flex: 1 1 100%; min-width: 0; text-align: center; align-self: flex-start; }
.hero-head h1 {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.hero-lede { margin: 24px auto 0; max-width: 58ch; font-size: 19px; line-height: 1.55; color: var(--body); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.hero-fine { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* Both fragments sit on their own wrapped flex line, so `align-items: stretch`
   cannot equalise them against the headline. The shared min-height is what
   makes them the same height — remove it and the right card grows a ragged
   edge the moment a rival name wraps. */
.frag {
  flex: 1 1 200px;
  max-width: 246px;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 14px 15px;
  box-shadow: var(--sh-frag);
}
.frag-l { transform: rotate(-1.6deg); }
.frag-r { transform: rotate(1.4deg); }
.frag-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.frag-fig { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.frag-fig .v {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chip-up {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  background: var(--success-bg);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}
.frag-spark { flex: 1; min-height: 54px; display: block; margin-top: 11px; }
.frag-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-top: 12px; }
.frag-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.frag-row-head span:first-child { font-size: 12px; font-weight: 650; }
.frag-row-head .n { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-dim); }
.frag-bar { height: 5px; display: block; margin-top: 5px; }
.frag-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-faint);
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ==========================================================================
   5. PRODUCT SHOT
   ========================================================================== */

.shot-wrap { position: relative; max-width: 1440px; margin: 0 auto; padding: 52px var(--gutter) 0; }
.shot {
  position: relative;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 -1px 0 #fff, var(--sh-shot);
}
.shot-grid { display: grid; grid-template-columns: 212px minmax(0, 1fr); min-width: 0; }
.shot-rail { border-right: 1px solid #eceef3; background: var(--surface); padding: 16px 12px; }
.shot-brand { display: flex; align-items: baseline; gap: 7px; padding: 0 6px 14px; }
.shot-brand .lockup-word { font-size: 13px; }
.shot-plan {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: #f2f3f8;
  border-radius: 4px;
  padding: 2px 5px;
}
.shot-nav { display: flex; flex-direction: column; gap: 1px; }
.shot-nav i {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 550;
  font-style: normal;
  color: #545966;
}
.shot-nav i.on { font-weight: 700; color: var(--ink); background: var(--wash); }
.shot-nav i svg { opacity: 0.9; }
.shot-nav .n { margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--muted); }
.shot-nav i.on .n { color: var(--blue); }

.shot-top { display: flex; align-items: center; gap: 12px; padding: 0 22px; height: 46px; border-bottom: 1px solid #eceef3; }
.shot-crumb { font-size: 11.5px; color: var(--muted); }
.shot-crumb .sep { color: #c2c6d2; margin: 0 6px; }
.shot-crumb .here { font-weight: 650; color: var(--ink); }
.shot-topright { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.shot-seg { display: flex; border: 1px solid #eceef3; border-radius: 7px; overflow: hidden; font-family: var(--mono); }
.shot-seg span { padding: 4px 9px; font-size: 10.5px; color: var(--muted); }
.shot-seg span.on { font-weight: 600; color: var(--blue); background: var(--wash); }
.shot-sample {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid #eceef3;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.shot-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.shot-body { padding: 22px 24px 26px; }
.shot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.shot-head h3 { margin: 0 0 5px; font-size: 20px; font-weight: 730; letter-spacing: -0.026em; }
.shot-head p { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 60ch; }
.shot-swept { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.shot-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.14);
}

.shot-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; }
.shot-tile { border: 1px solid #eceef3; border-radius: 11px; padding: 13px 14px; background: #fff; }
.shot-tile .l {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.shot-tile .f { display: flex; align-items: flex-end; gap: 7px; margin-top: 7px; }
.shot-tile .v { font-size: 25px; font-weight: 830; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.shot-tile .s { margin-top: 6px; font-size: 10.5px; color: var(--muted); line-height: 1.45; }
.delta {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  color: var(--success);
  background: var(--success-bg);
}

.shot-panel { border: 1px solid #eceef3; border-radius: 13px; padding: 16px 18px 10px; }
.shot-panelhead { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.shot-panelhead h4 { margin: 0; font-size: 13.5px; font-weight: 720; letter-spacing: -0.016em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legend .k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--body); }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); }
.chart text.m { font-family: var(--mono); }
.chart text.halo { stroke: #fff; stroke-width: 3.5; stroke-linejoin: round; paint-order: stroke; }

/* ==========================================================================
   6. TRUST BAND
   ========================================================================== */

/* No rules above or below and no fill: the row of names is the only thing on
   it, spaced far enough apart to read as a row of marks rather than a list. */
.trust { background: #fff; }
.trust-inner { padding: 52px var(--gutter) 8px; text-align: center; }
.trust-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(28px, 4.4vw, 62px);
  align-items: center;
  justify-content: center;
  margin-top: 26px;
}
.trust-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.trust-logo { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; }
.trust-logo svg { width: 100%; height: auto; }
/* DeepSeek is the one brand with no open logo set to draw from, so it keeps a
   monogram in its own blue rather than a hand-traced approximation of a mark
   we would get subtly wrong. */
.mono-mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.trust-name { font-size: 18px; font-weight: 700; letter-spacing: -0.028em; color: #242833; }
.pill-mono {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ==========================================================================
   7. CHECKER
   ========================================================================== */

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
  max-width: 1110px;
  margin: 0 auto;
  align-items: start;
}
/* The max-width is what the column happens to be in the two-up layout. It only
   shows once the worked example beside it is gone (a real result has landed),
   and it stops the form stretching to the full 1060px on its own. */
.check-form {
  max-width: 545px;
  margin-inline: auto;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sh-card);
  padding: 22px 24px 24px;
}
.check-form form { display: flex; flex-direction: column; gap: 13px; }
.field label { display: block; font-size: 13.5px; font-weight: 640; color: var(--ink-dim); margin-bottom: 7px; }
.field-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 17px;
  border: 1px solid #e0e3ec;
  border-radius: 999px;
  background: #fcfcfd;
}
.field-pill:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12); }
.field-pill input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.field-pill input::placeholder { font-weight: 500; color: #9ba0ae; }

.byok {
  border: 1px dashed #dadde6;
  border-radius: 14px;
  background: #fafbfc;
  padding: 11px 14px;
}
.byok > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  color: var(--body);
  line-height: 1.45;
}
.byok > summary::-webkit-details-marker { display: none; }
.byok-tag { margin-left: auto; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.byok-privacy { border-left: 3px solid var(--border); padding-left: 10px; margin: 0 0 12px; }
.byok-remember { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-top: 12px; }
.byok-link { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; }

.prow { border-top: 1px solid var(--border-faint); padding: 10px 0; }
.prow:first-child { border-top: 0; }
.prow-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.prow-model { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.prow-free {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--muted);
}
.prow input[type="password"] {
  width: 100%;
  margin-top: 8px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid #e0e3ec;
  border-radius: 999px;
  background: #fcfcfd;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}

.check-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--grad-primary);
  color: #fff;
  font: inherit;
  font-size: 16.5px;
  font-weight: 670;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 24px -12px rgba(88, 45, 225, 0.6);
}
.check-submit:disabled { opacity: 0.62; cursor: default; }
.check-submit .q { font-family: var(--mono); font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.88); }
.hint { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.check-status { margin-top: 16px; min-height: 1.4em; text-align: center; font-size: 13.5px; color: var(--muted); }
.check-error { margin-top: 16px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--danger); }

/* --- The worked example. Labelled, and hidden the moment a real result
       renders, so a demonstration score is never on screen beside a live one. */
.result-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 26px 28px 28px; }
.result-rule { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.result-rule .l {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.result-rule .line { flex: 1; height: 1px; background: var(--border-light); }
.result-rule .r { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.result-score { display: flex; align-items: flex-end; gap: 15px; }
.result-score .big { font-size: 58px; font-weight: 850; letter-spacing: -0.05em; line-height: 0.86; font-variant-numeric: tabular-nums; }
.result-score .big span { color: #8a8f9d; }
.result-score .named { font-size: 16px; font-weight: 700; color: var(--warn); }
.result-score .sub { font-size: 14px; color: var(--muted); margin-top: 3px; }
.answer {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 12px;
  padding: 13px 14px;
}
mark { border-radius: 3px; padding: 0 3px; color: var(--ink); }
mark.rival { background: #f2f3f8; box-shadow: inset 0 -2px 0 #a3a8b6; }
mark.you { background: var(--tint); font-weight: 700; box-shadow: inset 0 -2px 0 var(--blue); }
.result-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; font-size: 13px; color: var(--muted); }
.result-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.result-legend .sw { width: 10px; height: 10px; border-radius: 3px; }

/* Live result, rendered by the checker script. */
.live-result { max-width: 1060px; margin: 18px auto 0; }
.verdict {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 20px;
  border-radius: 14px;
  background: var(--tint);
  border: 1px solid var(--border);
}
.scorebig { font-size: 38px; display: block; margin-bottom: 4px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.qcard p { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; color: var(--body); background: #fff; }
.pstrip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 13px; }
.ptag { border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; color: var(--muted); background: #fff; }
.ptag.err { color: var(--danger); }
.pblock { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pblock:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.plabel { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.share { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-quiet {
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.btn-quiet:hover { background: #f4f4f8; color: var(--ink); }
.capture { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.field-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.field-inline input {
  flex: 1 1 220px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #e0e3ec;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.field-inline .btn { height: 44px; padding: 0 20px; font-size: 14px; font-weight: 650; }

/* ==========================================================================
   8. THE CONSTELLATION — what we read

   A scene rather than a grid: the mark in the middle, the five assistants on an
   inner ring and the sites they lean on further out. Positions are percentages
   of a 1200x560 box computed on two ellipses (no two circles come closer than
   58px), and every circle is sized as a percentage of that same width, so the
   whole scene scales without a single fixed pixel. Below 760px it stops being a
   scene and becomes a wrapped row — see section 15.
   ========================================================================== */

.constellation {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 8px auto 0;
  aspect-ratio: 1200 / 560;
}
.orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
.node { position: absolute; transform: translate(-50%, -50%); }
.node-mark {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #edeaf7;
  box-shadow: 0 2px 5px rgba(15, 17, 21, 0.04), 0 18px 34px -22px rgba(15, 17, 21, 0.26);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* The name sits under the circle rather than inside it: three of these brands
   start with G and two with C, so an initial alone names nothing. */
.node-name {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.node-mark svg { width: 42%; height: auto; }
.node-src .node-mark svg { width: 40%; }
.node-src .node-mark { color: var(--muted); font-weight: 700; font-size: 12px; }
.node-center { left: 50%; top: 50%; width: 10.67%; }
.node-center .node-mark {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 8px 26px -8px rgba(15, 17, 21, 0.5);
}
.node-center svg { width: 42%; height: auto; }

/* One container query, so the type in a circle scales with the circle. */
@supports (container-type: inline-size) {
  .constellation { container-type: inline-size; }
  .node-mark { font-size: clamp(12px, 1.6cqw, 21px); }
  .node-src .node-mark { font-size: clamp(10px, 1.25cqw, 16px); }
  .node-name { font-size: clamp(10px, 1.05cqw, 13px); }
}

.reads-legend {
  max-width: 780px;
  margin: 6px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.reads-legend b { color: var(--ink-dim); font-weight: 700; }

/* ==========================================================================
   9. NUMBERS BAND
   ========================================================================== */

.band {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ink);
  padding: clamp(34px, 4vw, 54px) clamp(24px, 3.4vw, 48px);
}
.band-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(44% 66% at 84% 6%, rgba(37, 99, 235, 0.34) 0%, rgba(37, 99, 235, 0) 66%),
    radial-gradient(38% 56% at 10% 96%, rgba(124, 58, 237, 0.24) 0%, rgba(124, 58, 237, 0) 66%);
}
.band-head { position: relative; max-width: 42ch; margin-bottom: clamp(30px, 3.4vw, 44px); }
.band-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.1vw, 38px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.034em;
  color: #fff;
}
.band-head p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
.band-rule { position: relative; height: 1px; background: rgba(255, 255, 255, 0.12); margin-bottom: clamp(30px, 3.4vw, 42px); }
.band-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px 40px; }
.band-n { font-size: clamp(34px, 3.6vw, 46px); font-weight: 850; letter-spacing: -0.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.band-l { margin-top: 12px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.68); max-width: 26ch; }

/* ==========================================================================
   10. PRODUCT CARDS
   ========================================================================== */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.pcard {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pcard-head { padding: 24px 24px 4px; }
.pcard-head h3 { margin: 11px 0 6px; font-size: 20px; font-weight: 720; letter-spacing: -0.024em; }
.pcard-head p { font-size: 13.8px; line-height: 1.6; color: var(--body); }
.pcard-head .eyebrow { color: var(--blue); }
/* flex:1 + centred column so a short visual stays optically centred when the
   grid row is stretched by a taller sibling. */
.pcard-vis {
  margin: 18px 0 0;
  padding: 18px 24px 22px;
  border-top: 1px solid var(--border-faint);
  background: var(--surface);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.pcard.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.pcard.dark .pcard-head h3 { color: #fff; }
.pcard.dark .pcard-head p { color: rgba(255, 255, 255, 0.68); }
.pcard.dark .pcard-head .eyebrow { color: #93c5fd; }
.pcard.dark .pcard-vis {
  margin: 18px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 16px 17px;
  gap: 0;
}
.pcard-fig { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 12px; }
.pcard-fig .n { font-size: 32px; font-weight: 850; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.pcard-fig .l { padding-bottom: 3px; font-size: 12px; color: var(--muted); }
.pcard-fig .delta { margin-left: auto; margin-bottom: 4px; font-family: inherit; font-size: 11.5px; padding: 2px 9px; }

.rankrows { display: flex; flex-direction: column; justify-content: space-between; gap: 11px; flex: 1; }
.rankrow { display: grid; grid-template-columns: 112px minmax(0, 1fr) 30px; gap: 11px; align-items: center; }
.rankrow .l { font-size: 12px; font-weight: 650; }
.rankrow .l.dim { font-weight: 600; color: var(--muted); }
.rankrow .n { font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-align: right; color: var(--ink-dim); }
.track { height: 16px; border-radius: 8px; background: #eceef3; overflow: hidden; }
.track span { display: block; height: 100%; border-radius: 8px; }

.receipt-meta { font-family: var(--mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.5); margin-bottom: 9px; }
.receipt-body { font-size: 13.4px; line-height: 1.74; color: rgba(255, 255, 255, 0.92); }
.receipt-body mark { color: #fff; padding: 0 4px; }
.receipt-body mark.rival { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.34); }
.receipt-body mark.you { background: rgba(96, 165, 250, 0.26); font-weight: 700; box-shadow: inset 0 -2px 0 #60a5fa; }
.receipt-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
.receipt-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.receipt-legend .sw { width: 10px; height: 10px; border-radius: 3px; }

.heat { border-collapse: separate; border-spacing: 4px 7px; width: 100%; }
.heat th {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
  padding-bottom: 4px;
}
.heat td.rowh { padding: 8px 8px 8px 0; font-size: 11.5px; font-weight: 550; color: var(--ink-dim); white-space: nowrap; text-align: left; }
.heat td.rowh.you { font-weight: 800; color: var(--ink); }
.heat td.c { text-align: center; padding: 9px 6px; border-radius: 7px; font-family: var(--mono); font-size: 11px; font-weight: 600; }
/* Value bands. The two lightest keep dark ink — re-check contrast before
   touching a mid-tone. */
.hb0 { background: #f4f7fe; color: var(--ink-dim); }
.hb20 { background: #e4ecfd; color: #1e3a8a; }
.hb40 { background: #c7dbfe; color: #1e3a8a; }
.hb60 { background: #93c5fd; color: #16255c; }
.hb70 { background: #1d4ed8; color: #fff; }
.hb80 { background: #1e3a8a; color: #fff; }

/* ==========================================================================
   10b. FEATURE BAND — two alternating rows on a wash

   The one tinted movement on the page. Each row is a claim on one side and the
   piece of the product that proves it on the other, sitting in a collage: a
   panel, two cards floating off its corners, and dashed guides behind the lot.
   The guides are decoration, but the panels are not — every one of them is a
   real screen's markup at the size it renders.
   ========================================================================== */

.band-soft { background: linear-gradient(180deg, #fbfaff 0%, #f6f4fe 46%, #fbfaff 100%); padding: 96px 0 100px; margin-top: 88px; }
.band-soft .section { padding: 0; }

/* min() so the 360px ideal never becomes a floor wider than the phone. */
.frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 44px 60px; align-items: center; }
.frow + .frow { margin-top: 92px; }

.pill-eyebrow {
  display: inline-block;
  padding: 7px 17px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.frow h2 {
  margin: 20px 0 16px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.034em;
  max-width: 17ch;
}
.frow-lede { font-size: 16.5px; line-height: 1.6; color: var(--body); max-width: 46ch; }

/* --- The accordion. Native <details>, so it works with JS off. ------------ */
.acc { margin-top: 26px; border-top: 1px solid #e6e1f4; }
.acc details { border-bottom: 1px solid #e6e1f4; }
.acc summary { display: flex; align-items: center; gap: 13px; padding: 17px 0; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc .acc-t { flex: 1; font-size: 15.5px; font-weight: 650; letter-spacing: -0.018em; color: var(--ink); }
.acc .acc-chev { flex: 0 0 auto; transition: transform 0.18s ease; color: var(--muted); }
.acc details[open] .acc-chev { transform: rotate(180deg); }
.acc p { margin: 0 0 18px; padding-left: 30px; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 52ch; }
.acc .acc-demo { margin: 0 0 18px 30px; }

.blist { display: flex; flex-direction: column; gap: 13px; margin-top: 24px; }
.blist div { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 48ch; }
.blist .dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--blue); }

/* --- The collage ---------------------------------------------------------- */
.collage { position: relative; padding: 40px 30px 46px; }
.guides { position: absolute; inset: 0; pointer-events: none; }
.guides span { position: absolute; border: 0 dashed #ded8f3; }
.guides .h { left: 0; right: 0; border-top-width: 1px; }
.guides .v { top: 0; bottom: 0; border-left-width: 1px; }
.guides .box { inset: 24px 14px; border-width: 1px; }

.cpanel {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--sh-card);
}
/* Pushed right on purpose: the stat card floats over the panel's top-left
   corner, and a header sitting under it is a header nobody can read. */
.cpanel-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-bottom: 13px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-faint);
  font-size: 12.5px;
  color: var(--muted);
}
.cpanel-head .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--wash);
  color: var(--blue);
  border-radius: 5px;
  padding: 3px 7px;
}
.crun { display: flex; gap: 13px; align-items: baseline; padding: 9px 0; }
.crun .t { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.crun .q { font-size: 13px; font-weight: 550; color: var(--ink); }
.cpanel-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-faint);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--blue);
}

.crow { display: grid; grid-template-columns: 108px minmax(0, 1fr) 30px; gap: 11px; align-items: center; padding: 7px 0; }
.crow .l { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.crow .l.you { font-weight: 800; color: var(--ink); }
.crow .n { font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-align: right; color: var(--ink-dim); }

.cfloat {
  position: absolute;
  z-index: 2;
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 13px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(15, 17, 21, 0.05), 0 20px 40px -22px rgba(15, 17, 21, 0.3);
}
.cfloat-tl { top: 4px; left: 0; }
.cfloat-br { right: 0; bottom: 6px; }
.cfloat .f-top { display: flex; align-items: center; gap: 9px; }
.cfloat .f-n { font-size: 22px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--success); }
.cfloat .f-l { margin-top: 5px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.cfloat .f-up { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--success-bg); }
.cfloat .f-file { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cfloat .f-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.cfloat .f-row { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.cfloat .f-bar { width: 46px; height: 4px; border-radius: 2px; background: #eceef3; }

/* ==========================================================================
   11. COMPARISON MATRIX
   ========================================================================== */

.matrix-scroll { border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; background: #fff; }
.matrix { min-width: 760px; }
.matrix-row { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border-faint); }
.matrix-head { background: var(--surface); border-bottom: 1px solid var(--border-light); }
.matrix-head > div { padding: 14px 16px; border-left: 1px solid var(--border-light); }
.matrix-head > div:first-child {
  border-left: 0;
  padding: 15px 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.matrix-us { background: #f6f8fe; }
.matrix-head .matrix-us { display: flex; align-items: baseline; gap: 7px; }
.matrix-head .lockup-word { font-size: 13px; }
.matrix-rival .name { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
.matrix-rival .note {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.matrix-q { padding: 15px 20px; }
.matrix-q .q { font-size: 14px; font-weight: 650; }
.matrix-q .sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.matrix-cell { padding: 15px 16px; border-left: 1px solid var(--border-faint); display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.matrix-cell.matrix-us { font-weight: 600; color: var(--ink); }
.ic {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 800;
}
.ic-yes { background: var(--tint); color: var(--blue); }
.ic-part { background: var(--warn-bg); color: var(--warn); }
.ic-no { background: var(--grid); color: var(--muted); }
.matrix-note { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 80ch; }

/* ==========================================================================
   12. PRICING
   ========================================================================== */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; max-width: 820px; margin-inline: auto; }
.plan { border: 1px solid var(--border); border-radius: 18px; background: #fff; padding: 26px; }
.plan.lead { border: 1.5px solid var(--blue); box-shadow: 0 12px 32px -18px rgba(29, 78, 216, 0.4); }
.plan-name { font-size: 13px; font-weight: 750; letter-spacing: -0.02em; }
.plan-price { display: flex; align-items: flex-end; gap: 8px; margin-top: 16px; }
.plan-price .a { font-size: 46px; font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.plan-price .p { padding-bottom: 6px; font-size: 13.5px; color: var(--muted); }
.plan-list { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }
.plan-list div { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.plan-list svg { margin-top: 2px; }
.plan-inset { margin-top: 18px; padding: 12px 13px; border: 1px dashed #dadde6; border-radius: 12px; background: var(--surface); }
.plan-inset .h { font-size: 12.5px; font-weight: 680; }
.plan-inset p { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 48px;
  margin-top: 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 720;
  color: #fff;
}
.plan-cta:hover { color: #fff; }
.plan-cta .btn-arrow { width: 26px; height: 26px; }
.plan-cta.blue { background: var(--grad-plan); box-shadow: var(--sh-btn); }
.plan-cta.ink { background: var(--ink); font-weight: 700; }
.plan-cta.ink:hover { background: #000; }
.plan-cta.ink .btn-arrow { background: rgba(255, 255, 255, 0.16); }
.plan-foot { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }

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

.faq { max-width: 760px; margin: 0 auto; }
.faq > h2 {
  margin: 0 0 30px;
  text-align: center;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.034em;
}
.faq details { border-top: 1px solid var(--border-light); }
.faq summary { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { flex: 1; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.45; color: var(--ink); }
.faq summary .plus {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  margin-top: 1px;
}
.faq p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.68; color: var(--body); max-width: 70ch; }
.faq-end { border-top: 1px solid var(--border-light); }

/* ==========================================================================
   14. CLOSING CTA + FOOTER
   ========================================================================== */

.cta { position: relative; overflow: hidden; border-radius: 22px; background: var(--ink); padding: clamp(40px, 4.6vw, 70px) clamp(26px, 3.6vw, 56px); text-align: center; }
.cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 72% at 50% 0%, rgba(37, 99, 235, 0.36) 0%, rgba(37, 99, 235, 0) 68%),
    radial-gradient(36% 56% at 14% 96%, rgba(124, 58, 237, 0.24) 0%, rgba(124, 58, 237, 0) 66%);
}
.cta-inner { position: relative; max-width: 660px; margin: 0 auto; }
.cta h2 { margin: 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.03; font-weight: 800; letter-spacing: -0.034em; color: #fff; }
.cta p { margin: 20px auto 0; font-size: 17.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 50ch; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; justify-content: center; }
.btn-white { gap: 13px; height: 54px; padding: 0 7px 0 26px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; }
.btn-white:hover { color: var(--ink); }
.btn-white .btn-arrow { width: 40px; height: 40px; background: var(--blue); }
.btn-wire { height: 54px; padding: 0 26px; border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; font-size: 16px; font-weight: 640; background: none; }
.btn-wire:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

.site-footer { margin-top: 88px; border-top: 1px solid var(--border-light); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px 44px; padding: 52px var(--gutter) 44px; max-width: var(--wrap); margin: 0 auto; }
.footer-grid .lockup-word { font-size: 16px; }
.footer-blurb { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 34ch; }
.footer-col .h { font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.footer-col div { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: var(--body); }
.footer-col a:hover { color: var(--blue); }
.footer-bar { border-top: 1px solid var(--border-faint); }
.footer-bar-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px var(--gutter) 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
}
.footer-bar-inner .r { margin-left: auto; display: flex; gap: 20px; }
.footer-bar-inner a { color: var(--muted); }
.footer-bar-inner a:hover { color: var(--blue); }

/* ==========================================================================
   15. THE ONE NARROW BREAKPOINT

   Every grid above is auto-fit/minmax and every display size is clamp(), so
   the layout reflows on its own down to about 760px. Two things cannot:

   - The nav is a single row of fixed-width items (lockup, four anchors, log in,
     the CTA pill). Below ~760px that row is wider than the viewport and pushes
     the whole document sideways. The four anchors are the part that goes: they
     are in-page jumps a scrolling reader reaches anyway, and every one of them
     is also in the footer. The CTA stays, because it is the point of the nav.
   - The dashboard shot's 212px rail is fixed by definition, which leaves the
     screen it is illustrating about a hundred pixels to draw in. On a phone the
     rail is dropped and the shot becomes the Overview screen itself.
   ========================================================================== */

@media (max-width: 760px) {
  .nav-inner { gap: 14px; }
  .nav-links { display: none; }

  .shot-grid { grid-template-columns: minmax(0, 1fr); }
  .shot-rail, .shot-seg { display: none; }
  .shot-top { padding: 0 16px; }
  .shot-body { padding: 18px 16px 20px; }
  .shot-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rankrow { grid-template-columns: 96px minmax(0, 1fr) 26px; gap: 9px; }

  /* The constellation stops being a scene and becomes a row of marks: on a
     phone the orbits are illegible and the circles would be thumbnail-sized. */
  .constellation { aspect-ratio: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
  .orbits { display: none; }
  .node { position: static; transform: none; width: 54px; }
  .node-mark { font-size: 14px; }
  .node-src .node-mark { font-size: 11.5px; }
  .node-name { display: none; }
  .node-center { width: 70px; order: -1; }

  .band-soft { padding: 68px 0 72px; }
  .frow + .frow { margin-top: 64px; }
  .collage { padding: 34px 8px 40px; }
  .cfloat { position: static; margin-top: 14px; }
  .guides { display: none; }
  .crow { grid-template-columns: 92px minmax(0, 1fr) 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .frag-l, .frag-r { transform: none; }
}