/* ============================================================
   graf — marketing site stylesheet.

   TOKENS ARE IMPORTED, NOT RESTATED. The design-review copy of
   this file carried its own hardcoded palette lifted from the
   product mockups, which is two places one value has to agree
   and therefore two places it can drift. `tokens.css` is the
   single vocabulary and `check_contrast.py` is the gate that
   proves it; a restated palette is invisible to that gate.
   Changed when the site was scaffolded, 2026-08-13.

   Site-only additions live below the fold marked SITE-ONLY.
   ============================================================ */
@import url("tokens.css");

:root{
  /* Aliases the site's own rules use. Every value resolves to a
     token above — nothing here introduces a colour. */
  --navy-900: var(--chrome-900);
  --navy-800: var(--chrome-800);
  --navy-700: var(--chrome-700);

  /* The gold that sits on a navy band. It is the dark mode's own
     --gold-ink (#E8A33D), which the contrast gate clears at 7.25:1
     on every dark ground — named here rather than re-entered as a
     hex, because the .plane band is a dark ground inside a light
     page and cannot pick the value up from a mode. */
  --gold-lt: #E8A33D;

  /* Two more on-chrome inks, and the same reasoning: the .plane band is a dark
     ground inside a light page, so it cannot pick these up from a mode. They are
     the dark mode's own semantic inks, named rather than re-entered as hex —
     --teal-ink and --gold-ink at #4FC2A3 and #E8A33D clear 7.14:1 and 7.25:1 on
     every dark ground, which the contrast gate already proves.
     Added 2026-08-13 when the colour-literal gate found two lighter values here:
     lighter values the tokens had no equivalent for, so this is the design-system
     change DESIGN.md §8.5 requires rather than a local hardcode. */
  --teal-on-chrome: #4FC2A3;
  --gold-on-chrome: #E8A33D;

  /* Translucent overlays on the navy band. White and the chrome inks at low alpha
     are structure — hairlines, card grounds, dashed borders — not semantic colour,
     and a token per opacity would be a vocabulary of one use each. They are named
     here so they are stated once and the gate can see them. */
  --chrome-veil:   rgba(255,255,255,.055);
  --chrome-edge:   rgba(255,255,255,.14);
  --chrome-edge-2: rgba(255,255,255,.24);
  --chrome-edge-3: rgba(255,255,255,.38);
  --chrome-field:  rgba(255,255,255,.08);
  --chrome-field-edge: rgba(255,255,255,.30);
  --teal-veil:   rgba(44,156,122,.18);
  --teal-edge:   rgba(138,231,198,.50);
  --gold-veil:   rgba(200,145,47,.20);
  --gold-edge:   rgba(243,206,134,.50);
  --muted-edge:  rgba(165,186,214,.45);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --gut:34px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;
  -webkit-font-smoothing:antialiased;line-height:1.5}
.lbl{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
a{color:var(--blue-ink)}

.sheet{max-width:1560px;margin:0 auto;background:var(--card);min-height:100vh;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  display:flex;flex-direction:column}
.band{padding:52px var(--gut);border-bottom:1px solid var(--rule)}
.band.grey{background:var(--ground)}
.band.tight{padding-top:34px;padding-bottom:34px}
.band>.lbl{margin-bottom:16px;display:block}

/* ── SITE-ONLY: marketing masthead ────────────────────────── */
.site-hd{padding:22px var(--gut);border-bottom:2px solid var(--navy-900);
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;background:var(--card);
  position:sticky;top:0;z-index:20}
/* THE MARK IS THE SVG LOCKUP, not set type. graf-lockup.svg draws the
   wordmark in `currentColor` and pins the dot to the amber brand, so it
   takes the ground it sits on while the dot stays constant — which is why
   the same file serves a light masthead and the .plane band, and only the
   footer needs the -dark variant against navy.
   Height, not width, is the control: the lockup's viewBox is wider than it
   is tall and a width-driven rule makes the mark's optical size depend on
   its own aspect ratio. */
.site-hd .mk{display:inline-flex;align-items:center;color:var(--navy-900);
  text-decoration:none;line-height:1}
.site-hd .mk img{height:34px;width:auto;display:block}
.site-nav{display:flex;gap:4px;margin-left:22px;flex-wrap:wrap}
.site-nav a{font-size:16px;font-weight:700;color:var(--ink-2);text-decoration:none;padding:8px 13px;
  border-radius:6px}
.site-nav a:hover{color:var(--navy-900);background:var(--ground)}
.site-hd .cta{margin-left:auto;display:flex;gap:11px;align-items:center}

button,.btn{font-family:var(--sans);font-size:15px;font-weight:700;padding:11px 19px;border-radius:6px;
  border:1px solid var(--rule-2);background:var(--card);color:var(--navy-900);cursor:pointer;
  text-decoration:none;display:inline-block;line-height:1.2}
.btn.p{background:var(--gold);color:var(--on-brand);border-color:var(--gold)}
.btn.dark{background:var(--navy-900);color:var(--on-chrome);border-color:var(--navy-900)}
.btn.ghost-d{background:transparent;color:var(--on-chrome);border-color:var(--chrome-edge-3)}

/* ── hero ─────────────────────────────────────────────────── */
.hero{padding:70px var(--gut) 62px;border-bottom:1px solid var(--rule)}
.hero .eyebrow{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--blue-ink);
  text-transform:uppercase;margin-bottom:18px}
.hero h1{font-size:60px;font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--navy-900);
  max-width:19ch}
.hero h1 em{font-style:normal;color:var(--gold-ink)}
.hero .sub{font-size:21px;color:var(--ink-2);margin-top:22px;max-width:62ch;line-height:1.5}
.hero .acts{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;align-items:center}
.hero .flags{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--gold-ink);
  text-transform:uppercase;margin-top:26px}

/* ── generic prose + grids ────────────────────────────────── */
h2.sec{font-size:34px;font-weight:750;letter-spacing:-.025em;color:var(--navy-900);max-width:26ch;
  line-height:1.15}
h3{font-size:19px;font-weight:700;color:var(--navy-900)}
p.lead{font-size:18px;color:var(--ink-2);line-height:1.6;max-width:76ch;margin-top:14px}
p.body{font-size:16px;color:var(--ink-2);line-height:1.55;max-width:80ch;margin-top:12px}
.cardgrid{display:grid;gap:16px;margin-top:28px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--rule-2);
  border-radius:7px;padding:20px 22px 22px}
.card.teal{border-top-color:var(--teal)} .card.red{border-top-color:var(--red);background:var(--red-band)}
.card.gold{border-top-color:var(--gold)} .card.navy{border-top-color:var(--navy-700)}
.card.blue{border-top-color:var(--blue)} .card.purple{border-top-color:var(--purple)}
.card .v{font-size:52px;font-weight:750;letter-spacing:-.04em;line-height:1;margin:12px 0 8px;
  font-variant-numeric:tabular-nums;color:var(--navy-900)}
.card .n{font-size:15px;color:var(--ink-2);line-height:1.45}
.card.teal .v{color:var(--teal)} .card.red .v{color:var(--red)} .card.red .lbl{color:var(--red)}
.card.gold .v{color:var(--gold-ink)}
.card p{font-size:15px;color:var(--ink-2);line-height:1.5;margin-top:9px}
.hatch{background:repeating-linear-gradient(135deg,var(--ground),var(--ground) 7px,var(--hatch-b) 7px,var(--hatch-b) 14px)}

/* ── navy command band ────────────────────────────────────── */
.plane{background:var(--navy-900);color:var(--on-chrome);padding:52px var(--gut)}
.plane h2{font-size:34px;font-weight:750;letter-spacing:-.025em;max-width:28ch;line-height:1.15}
.plane h2 i{font-style:normal;color:var(--gold-lt)}
.plane .lbl{color:var(--on-chrome-3)}
.plane p{font-size:17px;color:var(--on-chrome-2);line-height:1.6;max-width:80ch;margin-top:16px}
.plane p b{color:var(--on-chrome)}
.plane .flow{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-lt);margin-top:22px}
.cap{background:var(--chrome-veil);border:1px solid var(--chrome-edge);border-radius:7px;
  padding:16px 18px 17px;display:flex;gap:13px}
.cap .ix{width:26px;height:26px;border-radius:4px;flex:none;display:grid;place-items:center;
  font-size:14px;font-weight:700;background:var(--blue);color:var(--on-chrome)}
.cap .nm{font-size:16px;font-weight:700}
.cap .st{font-size:15px;margin-top:6px;line-height:1.45;color:var(--on-chrome-2)}
.cap .pill{display:inline-block;font-size:14px;font-weight:700;padding:3px 9px;border-radius:4px;
  margin-top:10px;border:1px solid}
.cap.live .ix{background:var(--teal)}
.cap.live .pill{color:var(--teal-on-chrome);border-color:var(--teal-edge);background:var(--teal-veil)}
.cap.part .ix{background:var(--gold)}
.cap.part .pill{color:var(--gold-on-chrome);border-color:var(--gold-edge);background:var(--gold-veil)}
.cap.out{background:transparent;border-style:dashed;border-color:var(--chrome-edge-2)}
.cap.out .ix{background:transparent;border:2px dashed var(--chrome-edge-3);color:var(--on-chrome-2)}
.cap.out .nm{color:var(--on-chrome-2)}
.cap.out .pill{color:var(--on-chrome-2);border-color:var(--muted-edge);border-style:dashed}

/* ── SITE-ONLY: the two-column claim/counterclaim ─────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);border-radius:7px;
  overflow:hidden;margin-top:28px}
.vs>div{padding:22px 24px 24px}
.vs>div:first-child{background:var(--red-band);border-right:1px solid var(--rule)}
.vs>div:last-child{background:var(--teal-band)}
.vs .lbl{margin-bottom:10px;display:block}
.vs>div:first-child .lbl{color:var(--red)}
.vs>div:last-child .lbl{color:var(--teal-ink)}
.vs .q{font-size:19px;font-weight:700;color:var(--navy-900);line-height:1.4}
.vs p{font-size:15px;color:var(--ink-2);margin-top:10px;line-height:1.5}

/* ── SITE-ONLY: product shot frame ────────────────────────── */
.shot{border:1px solid var(--rule-2);border-radius:8px;overflow:hidden;background:var(--card);
  margin-top:28px}
.shot .cap-b{background:var(--navy-900);color:var(--on-chrome);padding:13px 20px;display:flex;gap:30px;
  flex-wrap:wrap;align-items:center;font-size:14px}
.shot .cap-b .k{font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--on-chrome-3)}
.shot .cap-b b{color:var(--on-chrome);margin-left:8px}
.shot .cap-b .flow{margin-left:auto;font-weight:700;letter-spacing:.1em;color:var(--gold-lt);
  text-transform:uppercase}

/* ── SITE-ONLY: waitlist form ─────────────────────────────── */
.form{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;max-width:560px}
.form input{flex:1;min-width:250px;font-family:var(--sans);font-size:16px;padding:12px 15px;
  border:1px solid var(--rule-2);border-radius:6px;color:var(--ink);background:var(--card)}
.form input::placeholder{color:var(--ink-3)}
.form.on-dark input{background:var(--chrome-field);border-color:var(--chrome-field-edge);color:var(--on-chrome)}
.form.on-dark input::placeholder{color:var(--on-chrome-2)}
.note{font-size:14px;color:var(--ink-3);margin-top:12px;line-height:1.5;max-width:70ch}
.plane .note{color:var(--on-chrome-2)}

/* ── SITE-ONLY: footer ────────────────────────────────────── */
.foot{background:var(--navy-900);color:var(--on-chrome-2);padding:34px var(--gut);display:flex;gap:40px;
  flex-wrap:wrap;font-size:15px;margin-top:auto}
/* The footer sits on navy, so it takes the -dark lockup, whose wordmark is
   a fixed light ink rather than `currentColor`. */
.foot .mk{height:28px;width:auto;display:block}
.foot a{color:var(--on-chrome-2);text-decoration:none;display:block;margin-top:8px}
.foot a:hover{color:var(--on-chrome)}
.foot .col b{color:var(--on-chrome);font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* ── SITE-ONLY: option chrome (review only, not shipped) ──── */
.optbar{background:var(--navy-800);color:var(--on-chrome);padding:11px 20px;font-size:15px;display:flex;
  gap:18px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:40}
.optbar b{font-weight:700}
.optbar a{color:var(--gold-on-chrome);text-decoration:none;font-weight:700}
.optbar .sp{margin-left:auto;color:var(--on-chrome-2);font-size:14px}

@media (max-width:1180px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .g4,.g3,.g2,.vs{grid-template-columns:1fr}
  .hero h1{font-size:42px} h2.sec,.plane h2{font-size:27px}
  :root{--gut:18px}
}