/* =====================================================================
   site-light.css — bright, US-SaaS "sellable" theme for the homepage.
   Scoped under body.lite so it only repaints index.html; every other
   page keeps the dark site.css until the look is propagated.
   Loaded AFTER site.css, so these rules win.
   ===================================================================== */

body.lite {
  /* --- palette flip: white base, ink text, vivid accents --- */
  --bg: #FFFFFF;
  --bg-deep: #F4F7FE;      /* tinted section band */
  --bg-deepest: #0B1220;   /* keep a deep footer/ticker for grounding */
  --panel: #FFFFFF;
  --panel-2: #F5F8FF;
  --card: #FFFFFF;
  --card-hover: #F7FAFF;
  --side: #F5F8FF;

  --line: #E5EAF2;
  --line-strong: #D3DBEA;
  --line-blue: rgba(37, 99, 235, 0.16);
  --line-blue-soft: rgba(37, 99, 235, 0.10);
  --line-blue-faint: rgba(37, 99, 235, 0.07);

  --text: #0B1526;   /* headings / primary ink */
  --body: #44506A;   /* body copy */
  --soft: #33405A;
  --muted: #56617A;
  --faint: #7A879E;

  --blue: #2563EB;
  --blue-bright: #3B82F6;
  --blue-light: #2563EB;   /* was pale; darken so it reads on white */
  --blue-lighter: #1D4ED8;
  --green: #0E9F6E;        /* darker green for contrast on white */
  --gold: #B7791F;

  --navy-1: #EAF1FF;
  --navy-2: #DCE8FF;
  --navy-3: #C9DBFF;
  --teal: #17B8A6;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.09);
  --shadow-md: 0 6px 22px -8px rgba(21,45,105,.16), 0 2px 8px rgba(16,24,40,.05);
  --shadow-lg: 0 30px 70px -28px rgba(21,45,105,.30);

  background: var(--bg);
  color: var(--text);
}

/* ---------- typography punch ---------- */
body.lite .sec-head h2,
body.lite .hero h1 { color: var(--text); }
body.lite h1, body.lite h2, body.lite h3 { color: var(--text); }
body.lite p { color: var(--body); }
body.lite a { color: var(--blue); }
body.lite a:hover { color: var(--blue-lighter); }

/* Gradient accent word available via <span class="grad"> if wanted */
body.lite .grad {
  background: linear-gradient(90deg, var(--blue), var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- announcement banner ---------- */
body.lite .banner {
  background: linear-gradient(100deg, #EAF1FF, #DCE8FF 55%, #EAF1FF);
  color: #123; border-bottom: 1px solid var(--line);
}
body.lite .banner__new { background: var(--blue); color: #fff; }
body.lite .banner a { color: var(--blue); }

/* =====================================================================
   Slim header (Palantir): logo left, primary button + hamburger right.
   The link bar collapses into a drawer at EVERY width, not just mobile.
   The existing .nav__toggle JS already works at all sizes — it was only
   hidden by a desktop CSS rule.
   ===================================================================== */
body.lite .nav__toggle {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--text);
  cursor: pointer; border-radius: 4px; transition: border-color .18s, background .18s;
}
body.lite .nav__toggle:hover { border-color: var(--blue); color: var(--blue); background: #F6F9FF; }
body.lite .nav__toggle svg { width: 18px; height: 18px; }
body.lite .nav.open .nav__toggle { border-color: var(--blue); color: var(--blue); }

/* link bar becomes a full-width drawer under the bar */
body.lite .nav__links {
  display: none; position: absolute; top: 64px; left: 0; right: 0; z-index: 60;
  flex-direction: column; align-items: stretch; gap: 0; margin: 0;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 10px 40px 18px; box-shadow: 0 20px 40px -24px rgba(21,45,105,.30);
}
body.lite .nav.open .nav__links { display: flex; }
body.lite .nav__links a {
  padding: 15px 2px; font-size: 15.5px; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--line);
}
body.lite .nav__links a:last-child { border-bottom: none; }
body.lite .nav__links a:hover { color: var(--blue); }
body.lite .nav__right { gap: 12px; }
@media (max-width: 860px) { body.lite .nav__links { padding-left: 20px; padding-right: 20px; } }

/* ---------- nav: white, sticky, soft shadow ---------- */
body.lite .nav { background: none; border-bottom: none; }
body.lite .nav__group, body.lite .nav__right {
  background: rgba(255,255,255,.88);
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px -24px rgba(15,25,45,.45);
}
body.lite .brand, body.lite .brand:hover { color: var(--text); }
body.lite .brand__word { color: var(--text); }
body.lite .mark { background: #EAF1FF; }
body.lite .nav__links a { color: var(--muted); }
body.lite .nav__links a:hover { color: var(--text); }
body.lite .nav__toggle { color: var(--text); }
body.lite .chip-beta { border-color: rgba(37,99,235,.4); color: var(--blue); }

/* ---------- buttons: vivid, with depth ---------- */
body.lite .btn--primary,
body.lite .btn--dark {
  background: linear-gradient(180deg, #2F6BFF, #1D4ED8);
  color: #fff; box-shadow: 0 8px 20px -8px rgba(29,78,216,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
body.lite .btn--primary:hover,
body.lite .btn--dark:hover { background: linear-gradient(180deg, #3B82F6, #2456C8); color:#fff; }
body.lite .btn--outline {
  border: 1px solid var(--line-strong); color: var(--text); background:#fff;
  box-shadow: var(--shadow-sm);
}
body.lite .btn--outline:hover { border-color: var(--blue); color: var(--blue); }
body.lite .btn--white-outline { border: 1px solid #fff; color:#fff; }

/* ---------- kicker: Palantir-style monospaced technical eyebrow ---------- */
body.lite .kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--muted);
  display: inline-flex; align-items: center; gap: 9px;
}
body.lite .kicker::before {
  content: ""; width: 22px; height: 1px; background: var(--blue);
  border-radius: 0;
}
body.lite .kicker--green { color: var(--muted); }
body.lite .kicker--green::before { background: var(--green); }

/* ---------- hero ---------- */
body.lite .hero { border-bottom: 1px solid var(--line); background: #fff; }
body.lite .hero__top { background:
  radial-gradient(1100px 460px at 78% -10%, #EAF1FF 0%, rgba(234,241,255,0) 60%),
  radial-gradient(760px 420px at 8% 120%, #E7FBF4 0%, rgba(231,251,244,0) 55%),
  #FFFFFF;
}
/* soften decorative glows on white */
body.lite .beta-bg__grid { opacity: .35; }
body.lite .hero__top .beta-bg__orb--a { background: rgba(37,99,235,.14); }
body.lite .hero__top .beta-bg__orb--b { background: rgba(23,184,166,.12); }
body.lite .section--living .beta-bg__orb--a { background: rgba(37,99,235,.08); }
body.lite .section--living .beta-bg__orb--b { background: rgba(23,184,166,.07); }
body.lite .section--living .beta-bg__grid { opacity: .25; }

/* Header + hero as ONE continuous section (Palantir): the nav sits flush on
   the hero, the copy and the product band share one unbroken backdrop, and
   the dead strip between them is removed so the mock is visible in-viewport. */
body.lite .nav { border-bottom: none; }
body.lite .hero { border-bottom: 1px solid var(--line); }
/* The opening screen fills the browser: banner + nav + hero copy occupy
   exactly one viewport, so the product mock begins below the fold.
   --chrome is the measured banner+nav height, set by initHeroFill(). */
body.lite .hero__top {
  min-height: calc(100svh - var(--chrome, 112px));
  display: flex; align-items: center;
}
body.lite .hero__inner { width: 100%; padding-top: 40px; padding-bottom: 40px; gap: 22px; }
body.lite .hero__content { gap: 22px; }

/* Drop the CTAs three background squares (the grid is 44px, so 3 x 44).
   The row reserves the same distance as padding, so the offset can't
   overlap what follows and the hero still centres correctly. */
body.lite .hero__row { --cta-drop: 132px; padding-bottom: var(--cta-drop); }
body.lite .hero__row .btn-row { transform: translateY(var(--cta-drop)); }
/* Short viewports don't have the room — fall back to two squares, then one. */
@media (max-height: 860px) { body.lite .hero__row { --cta-drop: 88px; } }
@media (max-height: 740px) { body.lite .hero__row { --cta-drop: 44px; } }
/* the band's gradient started 90px down, leaving a gap — run it to the top */
body.lite .hero__band::before {
  top: 0;
  background: linear-gradient(160deg, #EAF1FF 0%, #F4F8FF 42%, #E8FBF4 100%);
  opacity: 1;
}
body.lite .hero__band .container { padding-bottom: 56px; }
body.lite .mock {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  border-radius: 16px;
}
body.lite .mock__side { background: #F7FAFF; border-right: 1px solid var(--line); }
body.lite .mock__item { color: var(--muted); }
body.lite .mock__item--on { background: #EAF1FF; color: var(--blue-lighter); border-left-color: var(--blue); }
body.lite .mock__org { color: var(--muted); border-top: 1px solid var(--line); }
body.lite .mock__title { color: var(--text); }
body.lite .kpi { background: #F7FAFF; border: 1px solid var(--line); border-radius: 12px; }
body.lite .kpi--hl { border-color: rgba(37,99,235,.35); background: #EFF5FF; }
body.lite .kpi__v { color: var(--text); }
body.lite .mcard { background: #F7FAFF; border: 1px solid var(--line); border-radius: 12px; }
body.lite .badge-ok { background: #E7F8F0; color: #0E7A54; }
body.lite .badge-dim { color: var(--faint); }
body.lite .postings__row { color: var(--soft); }

/* ---------- built-on strip ---------- */
body.lite .builton { background: #F7FAFF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.lite .builton__word { color: #33405A; }

/* ---------- stat band (new markup) ---------- */
body.lite .statband { background: #fff; border-bottom: 1px solid var(--line); }
body.lite .statband__inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-md);
}
body.lite .stat { background: #fff; padding: 30px 26px; display:flex; flex-direction:column; gap:8px; }
body.lite .stat__v {
  font-family: var(--sans); font-size: clamp(34px, 4vw, 46px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg, #2F6BFF, #1D4ED8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.lite .stat__k { font-size: 14.5px; line-height: 1.5; color: var(--body); }
body.lite .stat__k b { color: var(--text); font-weight: 700; }
@media (max-width: 760px){
  body.lite .statband__inner { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Tabbed product showcase — tab buttons swap a screen panel (Palantir).
   ===================================================================== */
body.lite .ptabs { background: #fff; border-bottom: 1px solid var(--line); }
body.lite .ptabs__bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 26px;
}
body.lite .ptab {
  appearance: none; cursor: pointer; font-family: var(--sans);
  font-size: 14px; font-weight: 500; color: var(--muted);
  padding: 9px 16px; background: #F4F7FE; border: 1px solid transparent;
  border-radius: 4px; transition: background .18s, color .18s, border-color .18s;
}
body.lite .ptab:hover { color: var(--text); background: #EAF1FF; }
body.lite .ptab { position: relative; overflow: hidden; }
body.lite .ptab[aria-selected="true"] {
  background: #fff; color: var(--text); font-weight: 600;
  border-color: var(--line-strong); box-shadow: inset 0 -2px 0 var(--line);
}
/* Progress bar: fills over the 4s auto-advance so the rotation is visible
   rather than surprising. Only animates while .is-auto is on the bar —
   the JS drops that class whenever the timer isn't running (hover, off
   screen, hidden tab, or the visitor has taken manual control), and then
   the fill just sits full-width as a static underline. */
body.lite .ptab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--blue); transform-origin: left;
}
body.lite .ptabs__bar.is-auto .ptab[aria-selected="true"]::after {
  animation: ptabFill 4s linear forwards;
}
@keyframes ptabFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  body.lite .ptabs__bar.is-auto .ptab[aria-selected="true"]::after { animation: none; }
}
body.lite .ptabs__seeall {
  margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  padding: 9px 14px; border: 1px solid var(--line-strong); color: var(--muted);
  border-radius: 4px;
}
body.lite .ptabs__seeall:hover { border-color: var(--blue); color: var(--blue); }

/* Large showcase panel sitting tight under the chip row, with a dark
   label card on the left — Palantir's tabs-over-panel composition. */
body.lite .ppanel { display: none; border: 1px solid var(--line); background: #fff; border-radius: 8px; overflow: hidden; }
body.lite .ppanel.is-on { display: grid; grid-template-columns: 400px 1fr; }
body.lite .ppanel__copy {
  padding: 36px 34px; background: #0E1B34;
  display: flex; flex-direction: column; gap: 14px;
}
body.lite .ppanel__k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: #7FB0FF;
}
body.lite .ppanel__t { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: #fff; }
body.lite .ppanel__d { font-size: 15px; line-height: 1.6; color: #B7C6E6; }
body.lite .ppanel__list { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
body.lite .ppanel__list div { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: #DCE6F8; }
body.lite .ppanel__list .a { color: #43C99A; flex: none; }
body.lite .ppanel__more { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; color: #7FB0FF; }

/* the "screen" side — a mini product surface built from the same tokens */
body.lite .pscreen { padding: 28px 30px; background: #F7FAFF; display: flex; flex-direction: column; gap: 12px; min-height: 300px; }
body.lite .pscreen__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
body.lite .pscreen__title { font-size: 14.5px; font-weight: 600; color: var(--text); }
body.lite .pscreen__rows { display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 12px; }
body.lite .pscreen__row {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 11px 13px; background: #fff; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); white-space: nowrap;
}
body.lite .pscreen__row b { color: var(--text); font-weight: 600; }
body.lite .pscreen__row .ok { color: #0E7A54; }
body.lite .pscreen__row .warn { color: #D6455B; }
body.lite .pscreen__row .au { color: var(--gold); }
body.lite .pscreen__foot { margin-top: auto; padding-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* ---- workflow sketches: each tab gets a differently-shaped diagram ---- */
body.lite .wflow { padding: 30px 30px 26px; background: #F7FAFF; display: flex; flex-direction: column; gap: 16px; min-height: 300px; }
body.lite .wflow__cap {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--faint);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
body.lite .wnode {
  background:#fff; border:1px solid var(--line-strong); border-radius:4px;
  padding:11px 13px; min-width:0;
}
body.lite .wnode__k { font-family: var(--mono); font-size:9.5px; letter-spacing:.14em; color: var(--faint); display:block; margin-bottom:3px; }
body.lite .wnode__t { display:block; font-size:13px; font-weight:600; color: var(--text); line-height:1.25; }
body.lite .wnode__s { display:block; font-size:11.5px; color: var(--muted); margin-top:4px; line-height:1.35; }
body.lite .wnode--ok { border-color: rgba(14,159,110,.45); background:#F2FBF7; }
body.lite .wnode--gate { border-color: var(--blue); background:#EFF5FF; box-shadow: inset 0 -2px 0 var(--blue); }
body.lite .wnode--bad { border-color: rgba(214,69,91,.4); background:#FDF3F4; }
body.lite .wnode--dark { background: var(--brand-ink, #0E1B34); border-color:#0E1B34; }
body.lite .wnode--dark .wnode__k { color: rgba(255,255,255,.55); }
body.lite .wnode--dark .wnode__t { color:#fff; }
body.lite .wnode--dark .wnode__s { color: rgba(255,255,255,.72); }

/* horizontal chain */
body.lite .wrow { display:flex; align-items:stretch; gap:0; }
body.lite .wrow > .wnode { flex:1; display:flex; flex-direction:column; justify-content:center; }
body.lite .warr { flex:0 0 26px; display:grid; place-items:center; color: var(--blue-light); font-size:15px; }
/* vertical chain */
body.lite .wcol { display:flex; flex-direction:column; gap:0; }
body.lite .warrd { height:18px; display:grid; place-items:center; color: var(--blue-light); font-size:13px; }
/* branch (two outcomes from one gate) */
body.lite .wsplit { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* fan (one source → many outputs) */
body.lite .wfan { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
body.lite .wflow__note { margin-top:auto; padding-top:12px; font-family: var(--mono); font-size:10.5px; color: var(--faint); line-height:1.5; }
body.lite .wtag {
  display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  padding:2px 7px; border-radius:999px; background:#EAF1FF; color:var(--blue); margin-left:6px;
}
body.lite .wtag--ok { background:#E7F8F0; color:#0E7A54; }
body.lite .wtag--bad { background:#FBE9EC; color:#C1394E; }
@media (max-width: 900px) {
  body.lite .ppanel.is-on { grid-template-columns: 1fr; }
  body.lite .ppanel__copy { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ---------- generic sections ---------- */
body.lite .section { border-bottom: 1px solid var(--line); background: #fff; }
body.lite .section--deep { background: #F4F7FE; }
body.lite .grid-1px { background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
body.lite .grid-1px > * { background: #fff; }

/* pillars / opcards / earlycards / checks */
body.lite .pillar h3, body.lite .opcard h3, body.lite .earlycard h3 { color: var(--text); }
body.lite .pillar p, body.lite .opcard p, body.lite .earlycard p { color: var(--body); }
body.lite .pillar__tag.c-green, body.lite .c-green { color: var(--green); }
body.lite .pillar__tag.c-blue, body.lite .c-blue { color: var(--blue); }
body.lite .pillar__tag.c-light, body.lite .c-light { color: var(--blue-lighter); }
body.lite .earlycard__n, body.lite .pillar__n { color: var(--blue); }
body.lite .check__t { color: var(--text); }
body.lite .check__s { color: var(--body); }

/* chips */
body.lite .chip { border: 1px solid var(--line-strong); color: var(--muted); background:#fff; }
body.lite .chip--green { background: #E7F8F0; border-color: rgba(14,159,110,.3); color: #0E7A54; }
body.lite .chip--blue { background: #EAF1FF; border-color: rgba(37,99,235,.3); color: var(--blue); }
body.lite .chip--gold { background: #FBF3E1; border-color: rgba(183,121,31,.3); color: var(--gold); }

/* ---------- ticker: keep it deep for rhythm/contrast ---------- */
body.lite .ticker { background: #0B1220; border-color: #0B1220; }
body.lite .ticker .tick { color: #AFC0E0; }
body.lite .ticker .green { color: #43C99A; }
body.lite .ticker .blue { color: #6FA8FF; }

/* ---------- beta strip ---------- */
body.lite .betastrip { background:#fff; border-bottom: 1px solid var(--line); }
body.lite .betastrip__copy { color: var(--body); }
body.lite .betastrip__live { color: var(--green); }

/* ---------- module flip cards: flat bordered lattice (Palantir) ----------
   The grid already draws shared 1px hairlines (gap:1px over a line bg).
   Cells must be FLAT — no per-cell border, radius, or shadow — so the
   gridlines read as one lattice, not a row of floating cards. */
body.lite .flip-grid--modules { background: var(--line); border: 1px solid var(--line); border-radius: 0; }
body.lite .fcard--sm .fcard__face {
  background: #fff; border: none !important; border-radius: 0;
  box-shadow: none; justify-content: flex-start;
}
body.lite .fcard--sm .fcard__face:hover { background: #F6F9FF; box-shadow: none; }
body.lite .fcard__face h3 { color: var(--text); margin-bottom: 2px; }

/* Redesign the ghostly ledger fragments into crisp, upright mini-ledger
   rows: no rotation, no fade-mask, no low opacity, in normal flow under
   the title. Reads as an intentional peek at the data, not a smudge. */
body.lite .frag,
body.lite .frag--main {
  position: static; inset: auto; left: auto; right: auto; bottom: auto;
  width: auto; min-width: 0; transform: none; opacity: 1;
  animation: none; margin: 6px 0 0; gap: 6px; font-size: 11px;
  -webkit-mask-image: none; mask-image: none;
}
body.lite .fcard--sm .fcard__face:hover .frag,
body.lite .fcard--sm .fcard__face:hover .frag--main { opacity: 1; transform: none; }
body.lite .frag > span {
  background: #F6F9FF; border: 1px solid var(--line); color: var(--muted);
  border-radius: 4px; padding: 8px 11px;
}
body.lite .frag > span b { color: var(--text); font-weight: 600; }
body.lite .frag .ok { color: #0E7A54; }
body.lite .frag .warn { color: #D6455B; }
body.lite .frag .au { color: var(--gold); }
body.lite .fcard__hint {
  color: var(--faint); margin-top: auto; padding-top: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
}

/* =====================================================================
   Modules rail (Palantir): one continuously-moving row of notched cards
   instead of a static two-row grid. A card auto-flips when it reaches the
   middle of the viewport, holds 4s, then flips back. Assembled by
   initModuleRail() in site.js, which also sets --mrail-x/--mrail-dur.
   ===================================================================== */
body.lite .flip-grid--modules.mrail {
  display: block; overflow: hidden; background: transparent;
  border: none; border-radius: 0; padding: 6px 0 14px;
  /* fade the row off at both edges so it reads as continuous motion */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
body.lite .mrail .mtrack {
  display: flex; gap: 18px; width: max-content;
  animation: mrailScroll var(--mrail-dur, 60s) linear infinite;
}
body.lite .mrail:hover .mtrack { animation-play-state: paused; }
@keyframes mrailScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--mrail-x, -100%)); }
}
@media (prefers-reduced-motion: reduce) {
  body.lite .mrail .mtrack { animation: none; }
}
body.lite .mrail .fcard--sm { flex: 0 0 306px; width: 306px; min-height: 290px; }
/* Palantir notched top-right corner, in the same blue as the workflow
   gate node (.wnode--gate) so the rail and the product panels read as one
   system: #EFF5FF fill with a blue underline. */
body.lite .mrail .fcard__face {
  background: #EFF5FF;
  box-shadow: inset 0 -2px 0 var(--blue);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
body.lite .mrail .fcard__face:hover { background: #E4EEFF; }
body.lite .mrail .fcard__face h3 {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
/* The highlighted card needs to stay distinguishable now that every card
   is blue — give it the top bar as well as the underline. */
/* Specificity note: the flat-lattice .fcard--sm.fcard--hl rule further down
   matches with equal weight and would otherwise win on source order, so
   this carries .fcard--sm too. */
body.lite .mrail .fcard--sm.fcard--hl .fcard__face,
body.lite .mrail .fcard--sm.fcard--hl .fcard__face:hover {
  background:#E0EBFF; box-shadow: inset 0 3px 0 var(--blue), inset 0 -2px 0 var(--blue);
}
/* Ledger rows go white so they read as inset panels on the blue card. */
body.lite .mrail .frag > span { background:#fff; border-color: rgba(37,99,235,.16); }
body.lite .mrail .fcard__face--back { background:#0E1B34; }
body.lite .mrail .fcard__face--back h3 { color:#fff; }
body.lite .mrail .fcard__hint { color: var(--faint); }

/* =====================================================================
   AI Staff: each agent card carries a colour keyed to its job, so the
   rolling rail reads as five distinct specialists rather than five
   identical tiles. --ag is the agent's accent; --agbg its tint.
   ===================================================================== */
body.lite .ag--book  { --ag:#2563EB; --agbg:#EFF5FF; }  /* capture & categorize */
body.lite .ag--tax   { --ag:#B7791F; --agbg:#FDF6E7; }  /* compliance & posture */
body.lite .ag--close { --ag:#0E9F6E; --agbg:#EBFAF3; }  /* readiness & sign-off */
body.lite .ag--treas { --ag:#0E9AA7; --agbg:#E8F8FA; }  /* cash & digital assets */
body.lite .ag--file  { --ag:#7C4DCC; --agbg:#F4EFFC; }  /* filings & disclosures */

body.lite .mrail .fcard--sm[class*="ag--"] .fcard__face {
  background: var(--agbg);
  box-shadow: inset 0 3px 0 var(--ag);
}
body.lite .mrail .fcard--sm[class*="ag--"] .fcard__face:hover { background: var(--agbg); filter: brightness(.985); }
body.lite .fcard--sm[class*="ag--"] .fcard__face h3 { color: var(--ag); }
/* the accent carries onto the flipped side */
body.lite .mrail .fcard--sm[class*="ag--"] .fcard__face--back {
  background: #0E1B34; box-shadow: inset 0 3px 0 var(--ag);
}
body.lite .fcard--sm[class*="ag--"] .fcard__face--back h3 { color: #fff; }
body.lite .fcard--sm[class*="ag--"] .fcard__face--back .fcard__back-list .a { color: var(--ag); filter: brightness(1.5); }
body.lite .fcard--sm[class*="ag--"] .frag > span { border-color: color-mix(in srgb, var(--ag) 22%, var(--line)); }

/* highlighted lattice cell: just an inset blue top bar, no border/shadow */
body.lite .fcard--sm.fcard--hl .fcard__face,
body.lite .fcard--sm.fcard--hl .fcard__face:hover {
  border: none !important; box-shadow: inset 0 3px 0 var(--blue);
  background: #F6F9FF;
}
body.lite .fcard--sm .fcard__face--back { background: #0E1B34; border-color:#0E1B34; color:#EAF1FF; }
body.lite .fcard--sm .fcard__face--back h3 { color:#fff; }
body.lite .fcard--sm .fcard__face--back .fcard__backdesc { color:#B7C6E6; }
body.lite .fcard--sm .fcard__face--back .fcard__back-list .t { color:#DCE6F8; }
body.lite .fcard--sm .fcard__face--back .fcard__back-list .a { color:#43C99A; }
body.lite .fcard__more { color:#7FB0FF; }
body.lite .soon__chip { border:1px solid var(--line-strong); color: var(--muted); background:#fff; }
body.lite .soon__chip--live { background:#E7F8F0; border-color:rgba(14,159,110,.3); color:#0E7A54; }
body.lite .soon__label { color: var(--faint); }

/* ---------- crypto subledger card ---------- */
body.lite .subledger { background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-md); border-radius:16px; }
body.lite .subledger__head { background:
  linear-gradient(200deg, #EAF1FF 0%, #DCE8FF 45%, #E3FBF3 100%); }
body.lite .subledger__title { color: var(--text); }
body.lite .subledger__row { color: var(--soft); border-bottom-color: var(--line); }
body.lite .subledger__cols { color: var(--faint); border-bottom-color: var(--line); }
body.lite .subledger__tot { color: var(--text); background:#F5F8FF; }
body.lite .arrow-list .t { color: var(--body); }
body.lite .arrow-list .a { color: var(--green); }
body.lite .sec-lede { color: var(--body); }

/* ---------- security invariants code block ---------- */
body.lite .invariants-code {
  background: #0E1B34; border:1px solid #16264A; color:#CFE0FF; border-radius:14px;
  box-shadow: var(--shadow-md);
}
body.lite .invariants-code .cm { color:#7E93BC; }
body.lite .invariants-code .kw { color:#6FA8FF; }
body.lite .invariants-code .eq { color:#43C99A; }
body.lite .invariants-code .gold { color:#E7B54A; }

/* ---------- final CTA: keep vivid gradient, it already pops ---------- */
body.lite .cta-final {
  background: linear-gradient(120deg, #1D4ED8 0%, #2563EB 45%, #17B8A6 100%);
}
body.lite .cta-final h2 { color:#fff; }
body.lite .cta-final p { color: rgba(255,255,255,.9); }
body.lite .cta-final .btn--dark { background:#0B1220; }
body.lite .cta-final .btn--dark:hover { background:#101a30; }

/* ---------- footer: deep, grounds the bright page ---------- */
body.lite .footer { background: #0B1220; border-top: 1px solid #0B1220; }
body.lite .footer__brand b { color:#fff; }
body.lite .footer__brand p { color:#8698BC; }
body.lite .footer__label { color:#6E80A4; }
body.lite .footer__col a { color:#AFBFDE; }
body.lite .footer__col a:hover { color:#fff; }
body.lite .footer__legal { color:#7385A8; border-top-color: rgba(255,255,255,.08); }

/* ---------- beta sheet ---------- */
body.lite .sheet { background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-lg); color: var(--text); }
body.lite .sheet h3 { color: var(--text); }
body.lite .sheet p { color: var(--body); }

/* =====================================================================
   Palantir structural pass — crisp, square, technical framing.
   Tighter radii, precise hairlines, less blur. Structure carries the
   design; color is the accent, not the surface.
   ===================================================================== */
/* Hard-edged lattices — structure carries the design (Palantir). */
body.lite .statband__inner,
body.lite .grid-1px,
body.lite .flip-grid--modules { border-radius: 0; }
body.lite .mock,
body.lite .subledger,
body.lite .invariants-code { border-radius: 6px; }
body.lite .kpi, body.lite .mcard,
body.lite .chip, body.lite .soon__chip,
body.lite .badge-ok, body.lite .badge-dim { border-radius: 3px; }
/* lattice cells sit flush — no rounding */
body.lite .grid-1px > *, body.lite .stat, body.lite .fcard--sm .fcard__face { border-radius: 0; }

/* Section header reads as a labeled index row: full-width hairline above,
   mono eyebrow tight to the left gutter (Palantir "spec label"). */
body.lite .section__inner > .sec-head::before,
body.lite .modules-head::before {
  content: ""; display: block; height: 1px; background: var(--line);
  margin-bottom: 26px;
}

/* precise, slightly cooler hairlines and lighter shadows */
body.lite {
  --shadow-md: 0 2px 4px rgba(16,24,40,.04), 0 1px 0 rgba(16,24,40,.03);
  --shadow-lg: 0 24px 60px -30px rgba(21,45,105,.24);
}
body.lite .statband__inner,
body.lite .grid-1px { box-shadow: none; }

/* section eyebrow gets a top hairline + mono treatment reads as a "spec" */
body.lite .sec-head { position: relative; }

/* CTA squared to match */
body.lite .cta-final { border-radius: 0; }
body.lite .btn { border-radius: 4px; }

/* =====================================================================
   Interior marketing pages — page-hero, status chips, prose, dossier,
   copilot demo, and the beta onboarding wizard. Same body.lite scope.
   ===================================================================== */

/* interior page hero */
body.lite .page-hero { background:
  radial-gradient(1000px 420px at 80% -20%, #EAF1FF 0%, rgba(234,241,255,0) 60%),
  radial-gradient(680px 380px at 5% 120%, #E7FBF4 0%, rgba(231,251,244,0) 55%),
  #FFFFFF;
  border-bottom: 1px solid var(--line);
}
/* Full-height interior hero: fills the browser the way the homepage hero
   does. --chrome is the measured banner+nav height from initHeroFill();
   pages without a banner (this one) resolve it to the nav alone. */
body.lite .page-hero--full {
  min-height: calc(100svh - var(--chrome, 64px));
  display: flex; align-items: center;
}
body.lite .page-hero--full .page-hero__inner {
  width: 100%; padding-top: 40px; padding-bottom: 40px;
}
body.lite .page-hero__glow { background: radial-gradient(closest-side, rgba(37,99,235,.10), transparent 70%); }
body.lite .page-hero .beta-bg__orb--a { background: rgba(37,99,235,.10); }
body.lite .page-hero .beta-bg__orb--b { background: rgba(23,184,166,.09); }
body.lite .page-hero .beta-bg__grid { opacity:.3; }
body.lite .page-hero h1 { color: var(--text); }

/* status chips (module / roadmap states) */
body.lite .st { border-radius: 3px; }
body.lite .st--live { color:#0E7A54; background:#E7F8F0; border:1px solid rgba(14,159,110,.3); }
body.lite .st--next { color:var(--blue); background:#EAF1FF; border:1px solid rgba(37,99,235,.3); }
body.lite .st--road { color:var(--faint); border:1px dashed var(--line-strong); }

/* detail rows / prose */
body.lite .detail-row h3 { color: var(--text); }
body.lite .detail-row p { color: var(--body); }
body.lite .prose h2 { color: var(--text); }
body.lite .prose p, body.lite .prose li { color: var(--body); }

/* copilot demo card */
body.lite .copilot-demo { background:#fff; border:1px solid var(--line); }
body.lite .copilot-demo__ledger { border-right:1px solid var(--line); }
body.lite .copilot-demo__msg p { color: var(--soft); }
body.lite .copilot-demo__msg b { color: var(--blue); }
body.lite .copilot-demo__msg--bot b { color: var(--green); }
body.lite .copilot-demo__label { color: var(--faint); }

/* dossier (mono spec block) */
body.lite .dossier { background:#F5F8FF; border:1px solid var(--line-strong); border-left:3px solid var(--green); color: var(--muted); border-radius:4px; }
body.lite .dossier .k { color: var(--blue); }

/* underlined text link */
body.lite .link-underline { color: var(--text); border-bottom:1px solid var(--blue); }
body.lite .link-underline:hover { color: var(--blue); }

/* ---- beta onboarding wizard (full-screen) ---- */
body.lite .beta-stage { background:#fff; }
body.lite .beta-stage .beta-bg__orb--a { background: rgba(37,99,235,.08); }
body.lite .beta-stage .beta-bg__orb--b { background: rgba(23,184,166,.07); }
body.lite .beta-stage .beta-bg__grid { opacity:.28; }
body.lite .beta-progress { background: var(--line); }
body.lite .step h1, body.lite .step h2 { color: var(--text); }
body.lite .step .sub { color: var(--body); }
body.lite .step__meta .n { color: var(--faint); }
body.lite .opt {
  background:#fff; border:1px solid var(--line-strong); color: var(--text);
  border-radius:6px; box-shadow: var(--shadow-sm);
}
body.lite .opt:hover { border-color: var(--blue); background:#F7FAFF; }
body.lite .opt.is-picked { border-color: var(--green); background:#EAFBF3; }
body.lite .opt__key { border:1px solid var(--line-strong); color: var(--muted); border-radius:4px; }
body.lite .opt small { color: var(--muted); }
body.lite .field label { color: var(--faint); }
body.lite .field input, body.lite .field textarea {
  background:#fff; border:1px solid var(--line-strong); color: var(--text); border-radius:6px;
}
body.lite .field input:focus, body.lite .field textarea:focus { border-color: var(--blue); }
body.lite .back-link, body.lite .key-hint { color: var(--faint); }
body.lite .back-link:hover { color: var(--muted); }
body.lite .key-hint b { color: var(--muted); }

/* =====================================================================
   MOBILE: keep the original dark theme.
   The phone homepage is the three atmosphere panels (.m31) plus the
   join-beta sheet — every other section is .dt-only and hidden here. Those
   panels are entirely token-driven (var(--bg), --bg-deep, --navy-2 …) and
   were designed against the dark palette, so flipping the tokens washed
   them out and made .m31__year invisible: its gradient starts at #E8EEFA,
   which is white-on-white once the backdrop turns light.

   Rather than re-tune the mobile hero for light, restore the dark palette
   below the .m31 breakpoint so the phone experience is unchanged. Only the
   nav, the panels, and the sheet are visible at this width, so this is the
   whole surface.
   ===================================================================== */
@media (max-width: 700px) {
  body.lite {
    --bg: #070D19;
    --bg-deep: #081020;
    --bg-deepest: #060B15;
    --panel: #0A1224;
    --panel-2: #0C1526;
    --card: #0E1930;
    --card-hover: #0E1D3D;
    --side: #081020;
    --line: #16233C;
    --line-strong: #2E446E;
    --line-blue: rgba(133, 178, 255, 0.25);
    --line-blue-soft: rgba(133, 178, 255, 0.12);
    --line-blue-faint: rgba(133, 178, 255, 0.08);
    --text: #E8EEFA;
    --body: #A9BCDD;
    --soft: #C9D7F0;
    --muted: #8FA3C4;
    --faint: #5E7297;
    --blue: #2C67DA;
    --blue-bright: #4C8DFF;
    --blue-light: #85B2FF;
    --blue-lighter: #B7D2FF;
    --green: #43C99A;
    --gold: #E7B54A;
    --navy-1: #0B1A3E;
    --navy-2: #122a63;
    --navy-3: #1c3f8f;
    --teal: #2f9e84;
    background: var(--bg);
    color: var(--text);
  }

  /* Chrome that the light theme had repainted white. */
  body.lite .nav { background: none; border-bottom: none; }
  body.lite .nav__group, body.lite .nav__right {
    background: rgba(7, 13, 25, 0.86); border: 1px solid var(--line);
  }
  body.lite .brand, body.lite .brand:hover, body.lite .brand__word { color: var(--text); }
  body.lite .mark { background: var(--navy-1); }
  body.lite .nav__links a { color: var(--muted); }
  body.lite .nav__links a:hover { color: var(--text); }
  /* the light theme gave this a white face — it has to go dark here too */
  body.lite .nav__toggle {
    background: transparent; border-color: var(--line-strong); color: var(--text);
  }
  body.lite .nav__toggle:hover,
  body.lite .nav.open .nav__toggle {
    background: rgba(255,255,255,.06); border-color: var(--blue-light); color: var(--text);
  }
  body.lite .nav__links {
    background: var(--bg-deep); border-bottom: 1px solid var(--line); box-shadow: none;
  }
  body.lite .nav__links a { color: var(--soft); border-bottom-color: var(--line); }
  body.lite .nav__links a:hover { color: #fff; }
  body.lite .chip-beta { border-color: rgba(76,141,255,.5); color: var(--blue-light); }
  body.lite .btn--primary {
    background: var(--blue); box-shadow: none;
  }
  body.lite .btn--primary:hover { background: var(--blue-bright); }

  body.lite .sheet {
    background: var(--card); border: 1px solid var(--line-strong);
    box-shadow: 0 -20px 60px rgba(0,0,0,.5); color: var(--text);
  }
  body.lite .sheet h3 { color: var(--text); }
  body.lite .sheet p { color: var(--body); }
  body.lite .kicker { color: var(--blue-bright); }
  body.lite .kicker--green { color: var(--green); }
}