/* brain.acheevy.digital — page styles.
   Token values are the real ones pulled from the OWNED Agentic Design System
   Figma file (keqSV0hR8Y58BMCs9MNsNO), not approximations.

   Register split, per design-rail precedence:
   - This landing page is the MARKETING layer -> ACHIEVEMOR blueprint brand
     (CAD linework on black). Authorised illustrated world.
   - Product pages (vault/agents/graph/status) use the LIGHT app tokens.

   Nothing here restyles .sc-stage, .sc-copy or any [data-sc-*] selector: those
   are the runtime mechanism and stay untouched. */

:root {
  /* --- real tokens, from the owned Figma file --- */
  --n-100:#ffffff; --n-200:#f7f7f7; --n-300:#e5e5e5; --n-400:#e0e0e0;
  --n-500:#8f8f8f; --n-600:#616161; --n-700:#363636; --n-800:#191919; --n-900:#000000;
  --blue-400:#70a9ff; --blue-500:#0968f6;
  --teal-400:#6cecf5; --teal-500:#1bbfca;
  --green-400:#89f598; --green-500:#3cc14e;
  --yellow-400:#ffbd14;
  --red-400:#ff7070; --red-500:#f02d2d;
  --purple-400:#ae9eff;

  --pad-8:8px; --pad-12:12px; --pad-16:16px; --pad-24:24px; --pad-32:32px;
  --pad-48:48px; --pad-96:96px; --pad-128:128px;
  --r-4:4px; --r-6:6px; --r-10:10px; --r-12:12px; --r-16:16px; --r-20:20px; --r-full:9999px;

  --ls-tight:-0.3px; --ls-normal:0; --ls-spacious:0.3px;

  /* Three faces, strict role separation -- this trio is the brand.
     Real families first, then a stack that degrades honestly. */
  --f-display:"Domaine Display Narrow","Playfair Display",ui-serif,Georgia,serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Departure Mono",ui-monospace,SFMono-Regular,"JetBrains Mono",monospace;

  /* marketing blueprint surface */
  --sc-canvas:#08090b;
  --ink:#f4f2ef; --ink-soft:#9a9ba1; --line:rgba(244,242,239,.22);
  --accent:var(--teal-400);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sc-canvas);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:24px;
  -webkit-font-smoothing:antialiased}

/* dashed construction grid -- the blueprint world */
.bp-grid{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    repeating-linear-gradient(to right,transparent 0 119px,var(--line) 119px 120px),
    repeating-linear-gradient(to bottom,transparent 0 119px,var(--line) 119px 120px);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%)}

/* ---------- type ---------- */
.display{font-family:var(--f-display);font-weight:500;margin:0;letter-spacing:var(--ls-tight)}
.display--xl{font-size:clamp(38px,7.2vw,86px);line-height:1.02}
.display--lg{font-size:clamp(27px,3.6vw,46px);line-height:1.1}
.body{font-size:16px;line-height:24px;color:var(--ink-soft);margin:16px 0 0;max-width:56ch}
.body--lead{font-size:18px;line-height:28px;max-width:52ch}
.body--wide{max-width:74ch}
.body b,.body strong{color:var(--ink);font-weight:500}
.body em{font-style:normal;color:var(--accent)}

/* Departure Mono uppercase micro-label against Geist body -- the recognisable
   move from the system's own FUNDAMENTALS page. */
.eyebrow{font-family:var(--f-mono);font-size:12px;line-height:18px;
  letter-spacing:var(--ls-spacious);text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 var(--pad-16)}
.mono-note{font-family:var(--f-mono);font-size:12px;line-height:18px;
  letter-spacing:var(--ls-spacious);color:var(--ink-soft);margin-top:var(--pad-24)}

/* ---------- chrome ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  gap:var(--pad-24);padding:14px clamp(16px,4vw,40px);
  background:color-mix(in srgb,var(--sc-canvas) 82%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar__mark{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;
  font-family:var(--f-mono);font-size:12px;letter-spacing:var(--ls-spacious);text-transform:uppercase}
.bar__mark b{font-weight:400;color:var(--ink-soft)}
.bar__nav{display:flex;gap:var(--pad-24);margin-left:auto}
.bar__nav a{font-family:var(--f-mono);font-size:12px;letter-spacing:var(--ls-spacious);
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent}
.bar__nav a:hover,.bar__nav a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
.bar__cta{font-family:var(--f-mono);font-size:13px;letter-spacing:var(--ls-normal);
  text-transform:uppercase;color:var(--sc-canvas);background:var(--ink);
  padding:9px 14px;border-radius:var(--r-6);text-decoration:none;white-space:nowrap}
.bar__cta:hover,.bar__cta:focus-visible{background:var(--accent)}
@media(max-width:760px){.bar__nav{display:none}}

.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;
  padding:clamp(72px,11vh,140px) clamp(16px,4vw,40px)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- 1 · lead ---------- */
.lead{display:grid;place-items:center;text-align:center;padding:0 clamp(16px,5vw,40px)}
.ticks{position:absolute;inset:clamp(56px,9vh,96px) clamp(16px,5vw,48px);pointer-events:none}
.ticks i{position:absolute;width:18px;height:18px;border:1px solid var(--line)}
.ticks i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.ticks i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.ticks i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.ticks i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ---------- 2 · drift ---------- */
.drift{list-style:none;margin:var(--pad-48) 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.drift li{display:grid;grid-template-columns:64px 1fr;gap:var(--pad-24);align-items:baseline;
  background:var(--sc-canvas);padding:var(--pad-24)}
.drift__n{font-family:var(--f-mono);font-size:12px;letter-spacing:var(--ls-spacious);color:var(--ink-soft)}
.drift p{margin:0;color:var(--ink-soft);font-size:16px;line-height:24px}
.drift b{color:var(--ink);font-weight:500}
@media(max-width:600px){.drift li{grid-template-columns:1fr;gap:6px}}

/* ---------- 3 · the law drawing + authored silence ---------- */
.law{margin:0;color:var(--ink-soft)}
.law svg{width:100%;height:auto}
.law__t{font-family:var(--f-mono);font-size:9px;letter-spacing:.6px}
.law__t--dim{opacity:.55}
.silence{height:52vh}

/* ---------- 4 · PEAK: the vault assembles (signature move) ---------- */
/* Flex column, not a 3-row grid: inside the runtime's sticky 100vh stage a
   `1fr` row resolves against an indefinite height and pushes the lattice out of
   the clip box. Explicit vh caps keep every beat on screen at any viewport. */
.assemble{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.4vh,28px);width:100%;height:100%;text-align:center;
  padding:clamp(72px,10vh,104px) clamp(16px,4vw,40px) clamp(24px,5vh,48px)}
.assemble__head{max-width:640px;flex:0 0 auto}
.assemble__stage{flex:0 1 auto;width:100%;max-width:940px;min-height:0;
  display:flex;align-items:center;justify-content:center}
#lattice{width:100%;height:auto;max-height:52vh;overflow:visible}
#lattice .cell{fill:none;stroke:var(--line);stroke-width:1}
#lattice .edge{stroke:var(--line);stroke-width:1;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
#lattice .node{fill:none;stroke:var(--ink-soft);stroke-width:1.4;opacity:0;
  transition:opacity 220ms ease-out,stroke 220ms ease-out}
#lattice .lbl{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.5px;
  fill:var(--ink-soft);opacity:0;text-anchor:middle;transition:opacity 220ms ease-out}
#lattice .on .node{opacity:1;stroke:var(--accent)}
#lattice .on .lbl{opacity:1;fill:var(--ink)}
.assemble__meter{flex:0 0 auto;display:flex;align-items:baseline;gap:var(--pad-12);
  justify-content:center;flex-wrap:wrap}
.meter__n{font-family:var(--f-display);font-size:clamp(28px,4vw,48px);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.meter__l{font-family:var(--f-mono);font-size:12px;letter-spacing:var(--ls-spacious);
  text-transform:uppercase;color:var(--ink-soft)}
.meter__sep{width:1px;height:22px;background:var(--line);margin:0 var(--pad-8)}

/* ---------- 5 · evidence ---------- */
.ev{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:var(--pad-48);
  background:var(--line);border:1px solid var(--line)}
.ev__c{background:var(--sc-canvas);padding:var(--pad-24)}
.ev__c b{display:block;font-family:var(--f-display);font-size:clamp(28px,3.4vw,42px);
  line-height:1.05;font-weight:500;font-variant-numeric:tabular-nums}
.ev__c span{display:block;margin-top:8px;font-family:var(--f-mono);font-size:12px;
  line-height:18px;letter-spacing:var(--ls-spacious);color:var(--ink-soft);text-transform:uppercase}
@media(max-width:820px){.ev{grid-template-columns:repeat(2,1fr)}}

/* ---------- 6 · ledger ---------- */
.ledger{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  padding:clamp(48px,8vh,96px) clamp(16px,4vw,40px);text-align:left;overflow-y:auto}
.ledger__copy{max-width:720px;width:100%}
.ledger__t{width:100%;border-collapse:collapse;margin-top:var(--pad-32);font-size:14px}
.ledger__t th,.ledger__t td{text-align:left;padding:11px var(--pad-12);
  border-bottom:1px solid var(--line);vertical-align:baseline}
.ledger__t th{font-weight:400;color:var(--ink);width:34%}
.ledger__t td:last-child{color:var(--ink-soft);font-size:13px}
.ledger__t td.ok,.ledger__t td.blk,.ledger__t td.mis{
  font-family:var(--f-mono);font-size:11px;letter-spacing:var(--ls-spacious);width:22%}
.ledger__t td.ok{color:var(--green-400)}
.ledger__t td.blk{color:var(--yellow-400)}
.ledger__t td.mis{color:var(--n-500)}
.cta{display:inline-block;margin-top:var(--pad-32);font-family:var(--f-mono);font-size:13px;
  text-transform:uppercase;color:var(--sc-canvas);background:var(--ink);
  padding:12px 18px;border-radius:var(--r-6);text-decoration:none}
.cta:hover,.cta:focus-visible{background:var(--accent)}

.foot{position:relative;z-index:1;border-top:1px solid var(--line);
  padding:var(--pad-32) clamp(16px,4vw,40px);text-align:center}
.foot .mono-note{margin:0}

:where(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #lattice .edge{stroke-dashoffset:0}
  #lattice .node,#lattice .lbl{opacity:1}
  #lattice .node{stroke:var(--accent)}
  .silence{height:0}
}

/* ---------- 3 · turn: the pan rail ---------- */
.turn{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px);
  width:100%;height:100%;padding:clamp(80px,12vh,132px) 0 clamp(32px,7vh,64px);overflow:hidden}
.turn__copy{max-width:640px;padding:0 clamp(16px,4vw,40px);margin:0 auto;text-align:center}
.turn__rail{width:220%;max-width:none;color:var(--ink-soft);display:grid;align-items:center}
.turn__rail svg{width:100%;height:auto}
@media(max-width:900px){.turn__rail{width:340%}}