/* ─────────────────────────────────────────────────────────────────────────────
 *  NEXFAN sales page — editorial style, DARK canvas ("broadsheet at midnight").
 *
 *  Monochrome discipline: no chromatic colour. Serif display (Fraunces,
 *  self-hosted) carries the brand; system sans runs the UI. Near-black canvas,
 *  bone ink, pill buttons, hairline borders, no gradients.
 *
 *  Dark-mode inversion rule: to make something "pop" we flip it to LIGHT
 *  (the featured plan, primary buttons, the 0% scale-break) instead of
 *  darkening it — darkening a card on a dark page just makes it disappear.
 *
 *  Hierarchy rule: analytical sections are LEFT-aligned with the heading and
 *  its lede side by side. Centring is reserved for pricing, contact and the
 *  final CTA, so it still means something when it happens.
 * ────────────────────────────────────────────────────────────────────────────*/

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  font-style: normal;
}

:root {
  --bg: #0a0a0b;
  --bg-alt: #101012;
  --surface: #151517;
  --surface-2: #1c1c1f;
  --line: #2a2a2e;
  --line-soft: #1f1f22;
  --fg: #fafafb;
  --fg-mid: #cfcfd3;
  --fg-dim: #9a9a9f;
  --fg-faint: #6d6d72;
  --ink: #0a0a0b;
  --light: #fafafb;

  --radius: 18px;
  --wrap: 1140px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.009em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 .4em;
  color: var(--fg);
  text-wrap: pretty;
}
h1 { font-size: clamp(2.7rem, 5.4vw, 4.3rem); line-height: 1.04; letter-spacing: -.022em; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.012em; }
h4 { font-family: var(--sans); }
p  { margin: 0 0 1rem; text-wrap: pretty; }
a  { color: var(--fg); text-decoration: none; }
a:hover { color: #fff; }

.eyebrow, .sec-num {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint);
}
.ital { font-style: italic; color: var(--fg-dim); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.left { text-align: left; }
.center .cta-row { justify-content: center; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--light); color: var(--ink); padding: 10px 16px; }
.skip:focus { left: 8px; top: 8px; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,11,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; font-size: 1.05rem; color: var(--fg); }
.brand-mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
  background: var(--light); color: var(--ink); font-family: var(--serif); font-size: .9rem;
}
/* The monogram is wide (roughly 5:3), so it's sized on width and left to find
   its own height — fixing both would squash it. currentColor means the same
   symbol reads dark on the light tile here and light on dark elsewhere. */
.nf { width: 17px; height: auto; display: block; color: inherit; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { position: relative; color: var(--fg-dim); font-size: .9rem; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--fg); }
/* Underline wipes in from the left rather than blinking on, so the marker
   feels like it's tracking the scroll instead of jumping between links. */
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.nav-links a.active { color: var(--fg); }
.nav-links a.active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav-links a::after { transition: none; } }
.nav-cta { white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; color: var(--fg); font-size: 1.35rem; cursor: pointer; padding: 4px 8px; line-height: 1; }

/* Config warning: shows only while config.js still holds placeholders. */
.config-bar {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: 12px 28px; text-align: center;
  font-family: var(--mono); font-size: .78rem; color: var(--fg-mid);
}

/* ── Buttons (pills) ──────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  background: var(--light); color: var(--ink); border: 1px solid var(--light);
  font-family: var(--sans); font-weight: 500; font-size: .95rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-sm { padding: 9px 20px; font-size: .85rem; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 76px 0 80px; border-bottom: 1px solid var(--line-soft); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.hero-copy .eyebrow { display: block; margin-bottom: 24px; }
.hero-copy h1 { margin-bottom: 24px; }
.lede { font-size: 1.14rem; color: var(--fg-mid); max-width: 540px; margin: 0; }

/* Three-cell stat rule: the numbers that decide the sale, at display size. */
.hero-stats {
  display: flex; align-items: stretch; margin: 38px 0 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-stats > div { padding: 20px 28px; border-right: 1px solid var(--line); }
.hero-stats > div:first-child { padding-left: 0; }
.hero-stats > div:last-child { border-right: 0; padding-right: 0; }
.hero-stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: 3.4rem; line-height: 1; letter-spacing: -.03em; }
.hero-stats b em { font-style: normal; font-size: 1.6rem; color: var(--fg-dim); }
.hero-stats span { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin-top: 8px; }

.micro { color: var(--fg-faint); font-size: .85rem; margin-top: 14px; }
.micro.center { text-align: center; margin-top: 22px; }

/* ── Phone mockup ─────────────────────────────────────────────────────── */
.phone-stage { display: flex; justify-content: center; }
.phone {
  position: relative; width: 288px; aspect-ratio: 9 / 19.5;
  background: #050506; border-radius: 44px; padding: 11px;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.phone.sm { width: 100%; max-width: 258px; border-radius: 40px; padding: 10px; box-shadow: 0 24px 56px rgba(0,0,0,.55); }
.phone-screen {
  position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: var(--surface-2); display: block;
}
.phone.sm .phone-screen { border-radius: 31px; }
.phone-screen img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: repeating-linear-gradient(135deg, #17171a, #17171a 14px, #141417 14px, #141417 28px);
  color: var(--fg-dim); padding: 24px;
}
.shot-ph .mk { width: 46px; height: 46px; border-radius: 12px; background: var(--light); color: var(--ink); display: grid; place-items: center; font-family: var(--serif); font-size: 1.4rem; }
.shot-ph .mk .nf { width: 28px; }
.shot-ph span { font-family: var(--mono); font-size: .72rem; line-height: 1.6; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding: 96px 0; }
.section.alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }
.sec-num { display: block; margin: 0 0 18px; }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.sec-head h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); }
.sec-head p { color: var(--fg-mid); font-size: 1.05rem; margin: 0; }
.section-lede { color: var(--fg-mid); text-align: center; max-width: 620px; margin: 0 auto 56px; font-size: 1.05rem; }
.narrow h2 { text-align: center; margin-bottom: 20px; }

/* ── Pillars ──────────────────────────────────────────────────────────── */
.grid-3 { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.pillar { background: var(--surface); padding: 32px; }
.pillar h3 { margin-bottom: .5em; font-size: 1.35rem; }
.pillar p { color: var(--fg-dim); font-size: .96rem; margin: 0; }

/* ── Six differentiators ──────────────────────────────────────────────── */
.feat6 { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.fcard { background: var(--surface); padding: 34px 30px; }
/* The cards used to open with a serif glyph (7 / AI / $$ / ▶ / ▲ / 1). Removed
   at the client's request — the rule goes with the markup rather than being
   left behind as dead weight. The heading now leads, so it carries the top
   margin the glyph used to provide. */
.fcard h3 { margin-bottom: .5em; }
.fcard p { color: var(--fg-dim); font-size: .95rem; margin: 0; }

/* Full audit: reference material, deliberately demoted behind a disclosure. */
.audit { margin-top: 32px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.audit summary { cursor: pointer; padding: 22px 30px; font-weight: 600; font-size: .95rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.audit summary::-webkit-details-marker { display: none; }
.audit summary em { font-style: normal; color: var(--fg-faint); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.audit[open] summary em::before { content: 'Close'; }
.audit[open] summary em { font-size: 0; }
.audit[open] summary em::before { font-size: .8rem; }
.audit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px 32px; padding: 8px 30px 32px; }
.audit-grid h4 { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 14px; }
.audit-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.audit-grid li { color: var(--fg-dim); font-size: .85rem; line-height: 1.45; }

/* ── Tour ─────────────────────────────────────────────────────────────── */
.tour { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; justify-items: center; }
.tour-item { max-width: 340px; }
.tour-item .phone-stage { margin-bottom: 28px; }
.tour-item .eyebrow { display: block; margin-bottom: 12px; }
.tour-item h3 { font-size: 1.45rem; margin-bottom: .5em; }
.tour-item p { color: var(--fg-dim); font-size: .95rem; margin: 0; }

/* ── Install ──────────────────────────────────────────────────────────── */
.install-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
/* `min-width: 0` is what makes the terminal actually scroll instead of shoving
   the whole page sideways. A grid item's default min-width is auto, meaning it
   refuses to shrink below its content's min-content width — and the install
   command is one long unbreakable line. So the column grew to ~440px inside a
   319px phone, `overflow-x: auto` on the <pre> never got a chance to engage,
   and the entire document became 92px wider than the screen. That is the
   "page wobbles left and right" symptom: every section then scrolls sideways,
   not just the terminal.
   Applied to all the two-column grids, because any of them can be handed
   unbreakable content later and fail the same way. */
.install-grid > *, .hero-grid > *, .sec-head > *, .fb-grid > *, .invert-grid > * { min-width: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.steps li { background: var(--surface); padding: 26px 28px; display: grid; grid-template-columns: 36px 1fr; gap: 18px; align-items: start; }
.step-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fg); color: var(--fg); font-family: var(--serif); font-size: 1rem; }
.steps h3 { margin: 4px 0 .35em; font-size: 1.2rem; }
.steps p { color: var(--fg-dim); font-size: .92rem; margin: 0; }

/* Reassurance sits ABOVE the terminal — non-technical buyers bounce at the
   curl line before they ever reach a note printed underneath it. */
.pre-note { color: var(--fg-mid); font-size: .95rem; margin: 0 0 18px; }
.pre-note b { color: var(--fg); font-weight: 600; }

.terminal {
  background: #050506; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.terminal-bar span { width: 11px; height: 11px; border-radius: 50%; background: #333; }
.terminal-bar em { margin-left: auto; font-style: normal; font-size: .74rem; color: var(--fg-faint); font-family: var(--mono); }
.terminal pre { margin: 0; padding: 22px 20px; overflow-x: auto; font-family: var(--mono); font-size: .78rem; line-height: 1.75; color: #d4d4d4; }
.c-prompt { color: var(--fg-faint); }
.c-flag { color: #cbcbcb; }
.c-ok { color: #fff; }

/* ── Comparison table ─────────────────────────────────────────────────── */
.compare { margin-top: 56px; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); font-size: .93rem; vertical-align: top; }
.compare thead th { color: var(--fg-faint); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding-block: 14px; }
.compare tbody th[scope="row"] { color: var(--fg); font-weight: 600; }
.compare tbody td { color: var(--fg-dim); }
.compare .col-us { color: var(--fg); background: var(--surface); border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-weight: 500; }
.compare thead .col-us { color: var(--fg); }
.compare tbody tr:last-child .col-us { border-bottom: 1px solid var(--line); }

/* Phones: stop being a table.
   A 3-column comparison cannot fit 375px, and the honest options are a
   sideways scroll or a different shape. Sideways scrolling loses: the content
   that matters most — our column — is the one off-screen, and nothing on a
   phone advertises that a region scrolls. People simply read the first two
   columns and conclude that's the whole comparison.
   So each row becomes its own card: the row heading on top, then the two
   answers stacked and labelled from `data-label`. Same markup, same semantics
   for a screen reader (the row headings are real <th scope="row">), no
   horizontal movement anywhere. */
@media (max-width: 720px) {
  .compare { margin-top: 40px; overflow-x: visible; }
  .compare table { min-width: 0; }
  /* thead only labels columns that no longer exist side by side; the
     per-cell data-labels replace it. */
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr {
    border: 1px solid var(--line-soft); border-radius: 14px;
    margin-bottom: 12px; overflow: hidden; background: var(--bg-alt);
  }
  .compare tbody th[scope="row"] {
    padding: 13px 16px; font-size: .93rem;
    background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
  }
  .compare tbody td {
    display: flex; align-items: baseline; gap: 14px;
    padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: .92rem;
  }
  .compare tbody tr td:last-child { border-bottom: 0; }
  /* The label is the column header, reattached to each value. min-width keeps
     the two values aligned with each other down the card. */
  .compare tbody td::before {
    content: attr(data-label);
    flex: none; min-width: 62px;
    color: var(--fg-faint); font-size: .66rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
  }
  /* Our row keeps the light-surface emphasis; the side borders were doing the
     work of a column edge that no longer exists. */
  .compare .col-us { background: var(--surface); border-left: 0; border-right: 0; }
  .compare tbody tr:last-child .col-us { border-bottom: 0; }
}

/* ── Scale break ──────────────────────────────────────────────────────────
 * The page's one landmark: full-bleed light, one enormous number. Without a
 * moment like this the whole page reads at a single flat volume. */
.invert { padding: 104px 0; background: var(--light); color: var(--ink); }
.invert-grid { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.big-num { font-family: var(--serif); font-size: clamp(7rem, 16vw, 15rem); line-height: .82; letter-spacing: -.05em; }
.invert-lede { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.22; letter-spacing: -.018em; margin: 0 0 20px; }
.invert-sub { color: #55555a; font-size: 1rem; margin: 0; max-width: 46ch; }

/* ── Pricing ──────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 34px 30px; display: flex; flex-direction: column; }
.plan h3 { font-size: 1.5rem; margin-bottom: .25em; }
.plan-blurb { color: var(--fg-dim); font-size: .9rem; margin: 0; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 4px; }
.plan-price b { font-family: var(--serif); font-weight: 400; font-size: 2.9rem; letter-spacing: -.02em; line-height: 1; color: var(--fg); }
.plan-price span { color: var(--fg-dim); font-size: .86rem; }
.plan ul { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 11px; }
.plan li { position: relative; padding-left: 22px; color: var(--fg-dim); font-size: .92rem; }
.plan li::before { content: ''; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); opacity: .7; }
.plan .btn { margin-top: auto; width: 100%; text-align: center; }
.plan-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--light); color: var(--ink); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.plan-error { color: var(--fg); font-size: .85rem; margin: 12px 0 0; }
.placeholder-warn { display: block; background: var(--surface-2); border: 1px dashed var(--fg-dim); color: var(--fg-mid); border-radius: 8px; padding: 10px 12px; font-size: .8rem; font-family: var(--mono); margin: 14px 0; }

/* Featured plan: INVERT to light so it pops on the dark page. */
.plan.hot { background: var(--light); border-color: var(--light); color: var(--ink); }
.plan.hot h3, .plan.hot .plan-price b { color: var(--ink); }
.plan.hot .plan-blurb, .plan.hot .plan-price span { color: #55555a; }
.plan.hot li { color: #3a3a3d; }
.plan.hot li::before { background: var(--ink); opacity: 1; }
.plan.hot .plan-tag { background: var(--ink); color: var(--light); }
.plan.hot .btn { background: var(--ink); color: var(--light); border-color: var(--ink); }
.plan.hot .btn:hover { background: #000; border-color: #000; color: var(--light); }

/* ── Includes grid ────────────────────────────────────────────────────── */
.includes { margin-top: 48px; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 36px; background: var(--bg-alt); }
.includes h3 { text-align: center; margin-bottom: 28px; }
.includes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.includes li { position: relative; padding-left: 22px; color: var(--fg-dim); font-size: .88rem; }
.includes li::before { content: ''; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); }

/* ── FAQ (grouped, so 17 questions stay scannable) ────────────────────── */
.faq-group { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 36px 0; border-top: 1px solid var(--line); }
.faq-group > h3 { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); margin: 6px 0 0; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--fg-dim); font-size: 1.3rem; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: '–'; }
.faq details p { color: var(--fg-dim); font-size: .96rem; margin: 0 0 20px; max-width: 68ch; }

/* ── Feedback form ────────────────────────────────────────────────────── */
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.fb-lede { color: var(--fg-mid); font-size: 1.05rem; margin: 0; }
.form { display: grid; gap: 18px; }
.field-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.form label { display: grid; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--fg); }
.form label span em { font-style: normal; font-weight: 400; color: var(--fg-dim); }
.form input, .form textarea, .form select { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); padding: 13px 15px; font: inherit; font-size: .95rem; width: 100%; font-weight: 400; }
.form textarea { resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--fg-faint); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--fg); }
.form .btn { justify-self: start; }
.form-status { font-size: .9rem; margin: 0; min-height: 1.4em; color: var(--fg-dim); }
.form-status.ok { color: var(--fg); font-weight: 600; }
.form-status.err { color: var(--fg); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Founder note ─────────────────────────────────────────────────────────
   Set in the serif at reading size rather than as a pull-quote: it should read
   like a person talking, not like a testimonial the marketing team wrote. */
.founder { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; margin-top: 26px; }
/* Set by app.js when there is no photo, or when the file fails to load. Without
   it the empty second track survives and the note is squeezed into the auto
   column instead of using the full width. */
.founder.no-photo { grid-template-columns: 1fr; }
.founder-photo {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); background: var(--surface); display: block;
}
.founder-note { font-family: var(--serif); font-size: 1.24rem; line-height: 1.42; color: var(--fg-mid); margin: 0 0 .7em; }
.founder-note:last-of-type { margin-bottom: 18px; }
.founder-sig { margin: 0; display: grid; gap: 2px; }
.founder-sig b { font-size: .98rem; color: var(--fg); }
.founder-sig span { font-size: .88rem; color: var(--fg-dim); }

/* ── Contact ──────────────────────────────────────────────────────────── */
.contact-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }
.contact-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 22px; min-width: 210px; transition: border-color .15s; }
.contact-card:hover { border-color: var(--fg); }
.contact-card .ico { display: flex; color: var(--fg-dim); }
.contact-card b { display: block; font-size: .95rem; color: var(--fg); }
.contact-card small { color: var(--fg-dim); font-size: .82rem; }

/* ── Final CTA + footer ───────────────────────────────────────────────── */
.final { padding: 116px 0; background: var(--bg-alt); border-top: 1px solid var(--line-soft); }
.final h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -.024em; margin-bottom: 22px; }
.final .lede { color: var(--fg-mid); margin-left: auto; margin-right: auto; max-width: 520px; }

.footer { border-top: 1px solid var(--line-soft); padding: 30px 0; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; color: var(--fg-dim); font-size: .88rem; }
.footer-legal { display: grid; gap: 6px; }
.footer p { margin: 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer a { color: var(--fg-dim); }
.footer a:hover { color: var(--fg); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid, .sec-head, .invert-grid, .install-grid, .fb-grid { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .hero-grid, .install-grid, .fb-grid { gap: 40px; }
  .faq-group { grid-template-columns: 1fr; gap: 14px; }
  .big-num { font-size: clamp(6rem, 22vw, 10rem); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-links {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--bg);
    border-bottom: 1px solid var(--line); padding: 8px 28px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
  .nav-links a:last-child { border-bottom: 0; }
  /* In the stacked menu the underline would collide with the row dividers,
     so the active row is marked with a left bar and full-strength text. */
  .nav-links a::after {
    left: -14px; right: auto; top: 13px; bottom: 13px;
    width: 2px; height: auto; border-radius: 2px;
    transform: scaleY(0); transform-origin: top;
  }
  .nav-links a.active::after { transform: scaleY(1); }
  .nav-toggle { display: block; margin-left: auto; }
  .section, .invert { padding: 68px 0; }
  .hero { padding: 52px 0 60px; }
  .final { padding: 84px 0; }
  .hero-stats { flex-direction: column; }
  .hero-stats > div { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-stats > div:last-child { border-bottom: 0; }
  .field-row { grid-template-columns: 1fr; }
  /* Photo above the words, not beside them — a 132px circle next to a 40ch
     column leaves the text nowhere to go on a phone. */
  .founder { grid-template-columns: 1fr; gap: 22px; }
  .founder-photo { width: 96px; height: 96px; }
  /* Wrap the install command instead of scrolling it. Shrinking the type to
     .66rem was an attempt to make one long line fit, and it failed twice over:
     10.6px is below what anyone reads comfortably, and it still didn't fit —
     the line was 438px in a 317px box, so it scrolled sideways anyway.
     Wrapping removes the horizontal movement entirely, which then buys back
     the type size. `pre-wrap` keeps the deliberate line breaks and the
     indentation; `break-word` handles the long --license=… run. Copy and paste
     still yields the same command. */
  .terminal pre { font-size: .72rem; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
  .cta-row .btn { flex: 1 1 100%; text-align: center; }
  .audit summary, .audit-grid { padding-inline: 20px; }
  /* .68rem lands at 10.9px on a phone — under the ~12px floor where uppercase
     letterspaced text stops being readable and starts being decoration. */
  .audit-grid h4 { font-size: .78rem; letter-spacing: .1em; }
  .includes { padding: 26px 22px; }

  /* Touch targets. The menu button was a 30px-high glyph — the one control a
     phone visitor MUST hit to navigate, and the smallest thing on the page.
     44px is the accepted minimum; negative margin keeps the header height and
     the visual alignment unchanged while the hit area grows. */
  .nav-toggle {
    display: grid; place-items: center;
    min-width: 44px; min-height: 44px; margin-right: -8px;
  }
  .brand { min-height: 44px; }
  /* Footer and fine-print links were 16–17px tall — fine with a mouse, a
     coin-toss with a thumb. */
  .footer nav a, .footer-legal a { display: inline-block; padding: 7px 0; }
  .footer nav { gap: 14px 22px; }
}

/* ── Buy modal — name + licence email, collected before Stripe ───────────── */
.buy-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 6, 8, .78);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  overscroll-behavior: contain;
}
.buy-modal.hidden { display: none; }

.buy-card {
  width: 100%; max-width: 430px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px 22px;
  max-height: 90vh; overflow-y: auto;
}
.buy-card h3 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 6px; font-weight: 400; }
.buy-sub { color: var(--fg-dim); font-size: .9rem; margin: 0 0 20px; }

.buy-card label {
  display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-dim); margin: 15px 0 7px;
}
.buy-card input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem;
  color: var(--fg); background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px;
}
.buy-card input:focus { outline: none; border-color: var(--fg-dim); }
.buy-card input::placeholder { color: var(--fg-faint); }

/* The consent row is boxed and full-contrast rather than styled like the
   small print below it. Terms you have to agree to shouldn't look like terms
   you're meant to skim past. */
/* Scoped under .buy-card deliberately: `.buy-card label` above is one class
   plus one element, so a bare `.buy-agree` loses to it on specificity and the
   consent text comes out in the uppercase field-caption style. A block of legal
   text set in caps is measurably harder to read — the opposite of what a term
   someone must actually understand before agreeing to it needs to be. */
.buy-card .buy-agree {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  margin: 20px 0 0; padding: 14px 15px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-alt);
  font-size: .84rem; line-height: 1.5; color: var(--fg-mid);
  text-transform: none; letter-spacing: normal;
}
.buy-card .buy-agree:hover { border-color: #3a3a40; }
.buy-card .buy-agree input {
  flex: none; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--light); cursor: pointer;
}
.buy-card .buy-agree strong { color: var(--fg); }
.buy-card .buy-agree a { text-decoration: underline; text-underline-offset: 2px; }
.buy-error { color: #ff8b8b; font-size: .85rem; min-height: 1.1em; margin: 12px 0 0; }

.buy-actions { display: flex; gap: 10px; margin-top: 18px; }
.buy-actions .btn { flex: 1; justify-content: center; }
.buy-actions .btn.primary { background: var(--light); color: var(--ink); border-color: var(--light); }

.buy-note { color: var(--fg-faint); font-size: .78rem; margin: 14px 0 0; line-height: 1.5; }

@media (max-width: 480px) {
  .buy-card { padding: 22px 18px 18px; }
  .buy-actions { flex-direction: column-reverse; }
}
.buy-opt { color: var(--fg-faint); text-transform: none; letter-spacing: 0; font-size: .72rem; }
.buy-hint { color: var(--fg-faint); font-size: .76rem; margin: 7px 0 0; line-height: 1.5; }