/* ServiceGuru AI LLC — company site
   ---------------------------------------------------------------------------
   SAME HOUSE, NOT THE SAME PAGE.

   Token NAMES and ROLES are held identical to ichor-site — that is what makes
   the two read as one system, and it is what every published design system
   (Carbon, NewsKit, Atlassian, Fluent, Spectrum) actually prescribes.
   Token VALUES diverge on purpose. An earlier pass had 18 of 20 byte-identical
   to ICHOR, which is not a sibling, it is a copy.

   What differentiates, deliberately:
     ground   warm paper       vs ICHOR's cool blue-grey
     accent   deep green       vs ICHOR's slate blue
     display  serif            vs ICHOR's sans
   What is held constant: the token names, the role each plays, the mono
   micro-label layer, the radii, and the restraint.

   Light-only, matching ICHOR, which carries no dark-mode rules. Every colour is
   painted explicitly so the page holds on a dark host ground. */

:root{
  /* ground — warm paper, not ICHOR's cool blue-grey */
  --bg:#f4f2ee; --bg2:#faf9f6; --panel:#ffffff; --panel2:#eeebe4;
  /* ink — a touch warmer and darker than ICHOR's #14181f */
  --ink:#191817; --soft:#4b4945; --faint:#6d6a64;
  --line:#e4e0d8; --line2:#cfcabe;
  /* accent — deep green. Role-identical to ICHOR's --gold, value unrelated. */
  --gold:#2f5d4a; --goldb:#43806a; --goldw:rgba(47,93,74,.10);
  --good:#3f7d5f; --amber:#b07d1e; --red:#a8483c;
  --mono:"SF Mono","JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style",Palatino,"Palatino Linotype","Hoefler Text",Georgia,"Times New Roman",serif;
  --maxw:56rem;
  --measure:64ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ICHOR's fixed grain overlay — 2.4% fractal noise, inline so no external fetch */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.024; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- mono micro-label layer (ICHOR's .navl / eyebrow register) ---------- */
.label{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin:0;
}

/* ---------- nav ---------- */
.nav{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:70;
  background:var(--bg);
}
.nav-in{
  max-width:var(--maxw); margin:0 auto;
  padding:15px clamp(20px,5vw,44px);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.nav-brand{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border:0;
  margin-right:auto;
}
.nav a:not(.nav-brand){
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); text-decoration:none; border:0;
  padding-bottom:3px; border-bottom:1px solid transparent;
}
.nav a:not(.nav-brand):hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--gold)}

/* ---------- cinematic hero band ----------
   Full-bleed dark entrance. No footage: the drama comes from the value
   inversion and the scale of the type, which costs nothing and cannot fail
   to load. Deliberately single-look — colours are explicit, not themed. */
.hero-band{
  background:#141312; color:#f4f2ee;
  padding:clamp(52px,8vw,96px) clamp(20px,5vw,44px) clamp(44px,6vw,72px);
  position:relative; overflow:hidden;
}
.hero-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1100px 380px at 18% -10%, rgba(67,128,106,.20), transparent 62%);
}
.hero-band-in{max-width:var(--maxw); margin:0 auto; position:relative; z-index:1}
.hero-band .label{color:#43806a; margin-bottom:18px}
.hero-band h1{
  color:#f7f5f1; max-width:16ch;
  font-size:clamp(38px,6.4vw,68px); line-height:1.02; margin-bottom:20px;
}
.hero-band .lede{color:#dad5cc; max-width:60ch}

/* --- the proof strip --- */
.stats{
  display:grid; gap:22px 34px; grid-template-columns:1fr;
  margin-top:clamp(34px,5vw,52px);
  padding-top:clamp(26px,3.5vw,34px);
  border-top:1px solid rgba(244,242,238,.14);
}
@media (min-width:560px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .stats{grid-template-columns:repeat(3,1fr)} }
.stat{display:flex; flex-direction:column; gap:5px; min-width:0}
.stat-n{
  font-family:var(--serif); font-size:clamp(28px,3.6vw,38px);
  font-weight:600; line-height:1; letter-spacing:-.02em;
  color:#f7f5f1; font-variant-numeric:tabular-nums;
}
.stat-l{font-size:14px; line-height:1.4; color:#d6d1c8}
.stat-s{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:#8a857c; line-height:1.6;
}

/* ---------- hero band video ----------
   Sits behind the type, heavily darkened. The band already worked without it;
   the video is enrichment, so if it never loads nothing breaks. */
.hero-band{isolation:isolate}
@media (prefers-reduced-motion: reduce){ .hero-band-vid{display:none} }
.hero-band-vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:.62;
  filter:brightness(1.55) contrast(1.12) saturate(1.15);
}
.hero-band::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,#141312 0%,rgba(20,19,18,.86) 38%,rgba(20,19,18,.34) 74%,rgba(20,19,18,.14) 100%);
}
.hero-band::after{z-index:2}
.hero-band-in{z-index:3}

/* ---------- scroll-driven reveal ----------
   CSS scroll timelines: the browser ties animation progress to the element's
   position in the viewport. This is what GSAP ScrollTrigger is usually hired
   for, at zero bytes of JavaScript. Where it is unsupported the @supports
   guard simply never applies and everything renders normally — the failure
   mode is 'no animation', never 'invisible content'. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 34%;
    }
    @keyframes reveal-in{
      from{opacity:0; transform:translateY(22px)}
      to{opacity:1; transform:none}
    }
    /* the band video drifts as you pass it — parallax without a scroll handler */
    .hero-band-vid{
      animation:band-drift linear both;
      animation-timeline:view();
      animation-range:cover;
    }
    @media (max-width:700px){ .hero-band-vid{animation:none} }
    @keyframes band-drift{
      from{transform:scale(1.10) translateY(-2%)}
      to{transform:scale(1.10) translateY(2%)}
    }
    /* headline sets, word by word */
    .w{
      display:inline-block;
      animation:word-in linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 22%;
    }
    @keyframes word-in{
      from{opacity:0; transform:translateY(16px) rotate(1.2deg)}
      to{opacity:1; transform:none}
    }
  }
}

/* JS fallback where scroll timelines are unsupported */
@media (prefers-reduced-motion: no-preference){
  .reveal.js-pre{opacity:0; transform:translateY(20px)}
  .reveal.js-in{opacity:1; transform:none;
    transition:opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
}

/* ---------- pinned operator moment ----------
   Full-bleed. Breaks the sheet container deliberately: this is a held beat
   between sections, not a card inside one. */
.pin{
  position:relative; overflow:hidden;
  width:100vw; margin-left:calc(50% - 50vw);
  min-height:78vh;
  display:flex; align-items:center;
  background:#0f0e0d;
}
.pin-vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:.66;
  filter:brightness(1.32) contrast(1.06) saturate(1.1);
}
.pin::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(15,14,13,.84) 0%,rgba(15,14,13,.40) 58%,rgba(15,14,13,.12) 100%);
}
.pin-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(20px,5vw,44px); width:100%;
}
.pin-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#7fbfa2; margin:0 0 22px;
}
.pin-line{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,4.2vw,46px); line-height:1.12; letter-spacing:-.018em;
  color:#f7f5f1; max-width:19ch; margin:0;
}
/* live: lines stack in one place and GSAP swaps them */
.pin-live .pin-line{position:absolute; opacity:0}
.pin-live .pin-inner{min-height:5.6em}
/* static fallback: just read them, one after another */
.pin-static{min-height:0; padding:64px 0}
.pin-static .pin-line{position:static; opacity:1; margin-bottom:18px}
.pin-static .pin-line:last-child{margin-bottom:0}

/* ---------- inline footage band ---------- */
.band-lg video{height:clamp(360px,50vw,564px)}
/* it was boxed inside the 56rem text column; let it break out wider than the
   copy so it reads as a full moment rather than an illustration in a card */
.band-lg{
  /* .sheet is a flex column, so margin-left:50% + translateX shifts rather
     than centres. align-self does it natively and overflows evenly. */
  width:min(calc(100vw - 2.5rem), 72rem);
  max-width:none;
  align-self:center;
}
.band-over{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(20px,3vw,34px);
  background:linear-gradient(to top,rgba(13,12,11,.86) 0%,rgba(13,12,11,.34) 48%,rgba(13,12,11,.10) 100%);
}
.band-line{
  text-transform:none; letter-spacing:-.018em;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(22px,3.4vw,38px); line-height:1.14; letter-spacing:-.018em;
  color:#f7f5f1; margin:0 0 10px; max-width:22ch; text-shadow:0 1px 24px rgba(0,0,0,.5);
}
.band-sub{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:#bdb8b0; margin:0; max-width:none;
}
.band{
  position:relative; margin:0; overflow:hidden;
  border-radius:10px; border:1px solid var(--line2);
  background:#0d0c0b;
}
.band video{display:block; width:100%; height:clamp(190px,26vw,320px); object-fit:cover}
.band figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 18px 13px;
  background:linear-gradient(transparent,rgba(13,12,11,.86));
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:#cfcabe;
}

/* ---------- page shell ---------- */
.sheet{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px,6vw,64px) clamp(20px,5vw,44px) 64px;
  display:flex; flex-direction:column; gap:clamp(48px,6vw,72px);
}

/* ---------- headings ----------
   ICHOR sets display in sans. This sets it in serif at the same weight and
   tracking discipline — the single largest character difference between the
   two sites, and it costs nothing: the stack is all system faces, so there is
   no @font-face, no webfont fetch, and nothing to fail silently. */
h1,h2,h3{font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0}
h1{font-size:clamp(34px,5.4vw,55px); line-height:1.06; letter-spacing:-.018em; max-width:18ch}
h2{font-size:clamp(23px,3vw,32px); line-height:1.14; letter-spacing:-.012em; max-width:25ch}
h3{font-size:19px; line-height:1.35; letter-spacing:-.008em}
.lede{
  margin:0; font-size:clamp(16px,1.9vw,18px);
  line-height:1.6; color:var(--soft); max-width:var(--measure);
}

/* ---------- sections ---------- */
.masthead{display:flex; flex-direction:column; gap:18px}
.masthead .label{color:var(--gold)}
section{display:flex; flex-direction:column; gap:16px}
section > .label{padding-bottom:11px; border-bottom:1px solid var(--line2)}
p{margin:0; max-width:var(--measure); color:var(--ink)}
p + p{margin-top:14px}
.muted{color:var(--soft)}

/* ---------- register ---------- */
.register{display:flex; flex-direction:column; margin-top:4px}
.entry{
  display:grid; grid-template-columns:1fr auto;
  gap:5px 28px; align-items:baseline;
  padding:17px 0; border-bottom:1px solid var(--line);
}
.entry:first-child{border-top:1px solid var(--line)}
.entry-name{font-weight:600; font-size:17px; letter-spacing:-.015em}
.entry-desc{
  grid-column:1/2; font-size:15px; line-height:1.55;
  color:var(--soft); max-width:58ch;
}
.status{
  grid-row:1/2; grid-column:2/3;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
}
.status::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:currentColor; flex:none;
}
.s-live{color:var(--good)}
.s-build{color:var(--amber)}
.s-plan{color:var(--faint)}

/* ---------- ruled list ---------- */
.ruled{display:flex; flex-direction:column; gap:22px; margin-top:4px}
.ruled > div{
  display:flex; flex-direction:column; gap:6px;
  padding-left:16px; border-left:2px solid var(--gold);
}
.ruled span{font-size:15px; line-height:1.55; color:var(--soft); max-width:58ch}

.ruled-fig{
  margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--soft);
  display:flex; align-items:baseline; gap:9px; max-width:52ch;
}
.ruled-fig b{
  font-family:var(--serif); font-size:30px; font-weight:600;
  line-height:1; color:var(--gold); flex:none;
}

/* ---------- panels ---------- */
.particulars{
  background:var(--panel); border:1px solid var(--line2); border-radius:10px;
  padding:clamp(20px,3.5vw,28px); margin-top:4px;
}
dl{
  margin:0; display:grid;
  grid-template-columns:minmax(9.5rem,auto) 1fr;
  gap:13px 26px; font-size:15px;
}
dt{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); padding-top:4px;
}
dd{margin:0; line-height:1.5; color:var(--ink)}

/* ---------- links ---------- */
a{
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--goldw);
  transition:border-color .2s ease;
}
a:hover{border-bottom-color:var(--goldb)}
a:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:3px}

/* ---------- intake form (ICHOR .accf treatment) ---------- */
.intake{
  display:flex; flex-direction:column; gap:13px;
  background:var(--panel); border:1px solid var(--line2); border-radius:10px;
  padding:clamp(20px,3.5vw,28px); margin-top:4px; max-width:var(--measure);
}
.intake label{display:flex; flex-direction:column; gap:5px}
.intake .lb{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
.intake input,.intake textarea{
  width:100%; background:var(--bg);
  border:1px solid var(--line2); border-radius:5px;
  padding:11px 13px; color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  outline:none; letter-spacing:normal; text-transform:none;
  transition:border-color .2s ease;
}
.intake textarea{resize:vertical; min-height:74px}
.intake input:focus,.intake textarea:focus{border-color:var(--gold)}
.intake input::placeholder,.intake textarea::placeholder{color:var(--faint); opacity:1}
.intake .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.intake button{
  margin-top:5px; width:100%; padding:13px;
  border:none; border-radius:6px;
  background:var(--gold); color:#fff;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:opacity .2s;
}
.intake button:hover{opacity:.9}
.intake button:disabled{opacity:.5; cursor:default}
.intake button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.intake .msg{
  min-height:15px; font-family:var(--mono); font-size:11px;
  letter-spacing:.03em; line-height:1.5; color:var(--faint);
}
.intake .msg.ok{color:var(--good)}
.intake .msg.err{color:var(--red)}
.intake .fine{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; line-height:1.6;
  color:var(--faint); margin:0; max-width:none;
}

.hero-sch{gap:0}

/* ---------- live desk ----------
   Records arrive, a fifth are lost, survivors are scored and the list
   RE-SORTS in front of you. Readable on purpose — the leaderboard shuffle is
   the thing that holds attention, and you cannot read a canvas. */
.flow{
  display:grid; gap:20px; grid-template-columns:1fr;
  padding:0;
}
@media (min-width:760px){
  .flow{grid-template-columns:1fr 1.15fr .62fr; gap:26px}
}
.flow-col{min-width:0}
.flow-hd{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
  margin:0 0 10px; padding-bottom:7px;
  border-bottom:1px solid var(--line); max-width:none;
}

/* --- arriving feed: newest on top, lost ones fall out --- */
.flow-lane{display:flex; flex-direction:column; gap:6px; min-height:132px}
.flow-chip{
  opacity:0; transform:translateX(-16px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  border:1px solid var(--line2); border-radius:5px;
  background:var(--panel); padding:5px 9px; min-width:0;
}
.flow-chip.go{opacity:1; transform:none}
.flow-chip.moved{opacity:0; transform:translateX(22px)}
.flow-chip.drop{
  opacity:0; transform:translateY(18px) rotate(-3deg);
  border-color:var(--red);
  transition:all .85s cubic-bezier(.4,0,.7,1);
}
.flow-src{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.flow-body{
  font-size:12.5px; line-height:1.35; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.flow-chip.is-lost .flow-body{color:var(--red); text-decoration:line-through}
.flow-cap{
  font-size:12.5px; line-height:1.5; color:var(--faint);
  margin:16px 0 0; max-width:60ch;
}

/* --- the ranked list --- */
.flow-list{position:relative; transition:height .35s ease}
.flow-row{
  position:absolute; left:0; right:0; top:0; height:28px;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:5px;
  background:var(--panel); padding:0 9px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease,
             border-color .4s ease, box-shadow .4s ease;
}
.flow-row.is-new{opacity:0}
.flow-row.is-top{
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--goldw);
}
.flow-row.released{opacity:0}
.flow-row.out{opacity:0}
.flow-score{
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--gold); flex:none; width:2.1em;
  font-variant-numeric:tabular-nums;
}
.flow-rowbody{display:flex; gap:8px; align-items:baseline; min-width:0}
.flow-rowsrc{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); flex:none;
}
.flow-rowtxt{
  font-size:12px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- the gate --- */
.flow-gate{
  border:1px solid var(--line2); border-radius:8px;
  background:var(--panel); padding:14px 12px;
  display:flex; flex-direction:column; gap:3px;
  cursor:pointer; transition:border-color .3s ease, box-shadow .3s ease;
}
.flow-gate:hover{border-color:var(--gold)}
.flow-gate:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.flow-gate.is-held{border-color:var(--gold)}
.flow-gate.is-firing{box-shadow:0 0 0 5px var(--goldw); border-color:var(--gold)}
.flow-gate-lbl{
  font-family:var(--mono); font-size:9px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gold);
}
.flow-gate-n{
  font-family:var(--mono); font-size:26px; font-weight:600;
  color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums;
}
.flow-gate-sub{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint);
}
.hero-sch .schematic{margin-top:0}

/* ---------- proof capture ----------
   Real recorded output from a live engine. Replaced an invented data widget:
   a simulation of the work is weaker than the work. preload=none + poster so
   the page costs nothing until someone chooses to watch. */
.proof{display:flex; flex-direction:column; gap:20px}
.proof-hd{display:flex; flex-direction:column; gap:12px}
.proof-fig{margin:0; display:flex; flex-direction:column; gap:9px}
.proof-vid{
  display:block; width:100%; height:auto;
  border:1px solid var(--line2); border-radius:10px;
  background:#0d0c0b;
}
.proof-fig figcaption{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}

/* ---------- system schematic ----------
   The thesis drawn rather than asserted: fragmented tools resolve into one
   layer, the layer produces a ranked call, a person releases it.
   Built in HTML/CSS/inline-SVG so it reflows at every width — a single wide
   SVG would be unreadable on a phone. Zero webfonts, zero libraries,
   nothing fetched. */
.schematic{
  margin-top:8px;
  border:1px solid var(--line2); border-radius:10px;
  background:var(--panel);
  padding:clamp(20px,3.5vw,30px);
  overflow-x:auto;
}
.sch-flow{
  display:grid; gap:14px;
  grid-template-columns:1fr; align-items:stretch;
}
/* stages are real buttons — clickable, focusable, arrow-key navigable */
.sch-stage{
  display:flex; flex-direction:column; gap:9px; min-width:0;
  appearance:none; -webkit-appearance:none;
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer;
  opacity:.42; transition:opacity .45s ease;
}
.sch-stage.is-active{opacity:1}
.sch-static .sch-stage{opacity:1; cursor:default}
.sch-stage:focus-visible{
  outline:2px solid var(--gold); outline-offset:6px; border-radius:8px; opacity:1;
}
.sch-stage.is-active .sch-cap{color:var(--gold)}
.sch-stage.is-active .sch-scatter,
.sch-stage.is-active .sch-rank,
.sch-stage.is-active .sch-gate{border-color:var(--gold)}
.sch-hint{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
  margin:14px 0 0; text-align:right; max-width:none;
}
.sch-cap{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}
.sch-note{font-size:13px; line-height:1.5; color:var(--soft); max-width:34ch}

/* stage 1 — the scatter. Deliberately misaligned; that IS the content. */
.sch-scatter{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:14px 12px;
  border:1px dashed var(--line2); border-radius:8px;
  background:var(--bg2);
  min-height:96px; align-content:center;
}
.sch-chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--soft);
  border:1px solid var(--line2); border-radius:4px;
  padding:4px 7px; background:var(--panel);
  white-space:nowrap;
}
.sch-chip:nth-child(3n){transform:translateY(-3px) rotate(-1.4deg)}
.sch-chip:nth-child(3n+1){transform:translateY(2px) rotate(1deg)}
.sch-chip:nth-child(5n){transform:translateY(-1px) rotate(2deg)}

/* stage 2 — one solid layer */
.sch-solid{
  border:1px solid var(--gold); border-radius:8px;
  background:var(--goldw);
  min-height:96px;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); text-align:center;
}

/* stage 3 — a ranked call */
.sch-rank{
  border:1px solid var(--line2); border-radius:8px; background:var(--bg2);
  min-height:96px; padding:12px 13px;
  display:flex; flex-direction:column; gap:6px; justify-content:center;
}
.sch-row{display:flex; align-items:center; gap:8px}
.sch-bar{height:5px; border-radius:3px; background:var(--gold); flex:none}
.sch-row:nth-child(1) .sch-bar{width:72%; opacity:1}
.sch-row:nth-child(2) .sch-bar{width:48%; opacity:.62}
.sch-row:nth-child(3) .sch-bar{width:27%; opacity:.34}
.sch-rank-n{
  font-family:var(--mono); font-size:9.5px; color:var(--faint);
  flex:none; width:1.2em;
}

/* stage 4 — the human gate */
.sch-gate{
  border:1px solid var(--line2); border-radius:8px; background:var(--bg2);
  min-height:96px; padding:14px 13px;
  display:flex; flex-direction:column; gap:8px; justify-content:center;
}
.sch-gate-mark{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold);
}
.sch-gate-mark::before{
  content:""; width:9px; height:9px; border-radius:50%;
  border:2px solid var(--gold); flex:none;
}
.sch-gate-sub{font-size:12.5px; line-height:1.45; color:var(--soft)}

/* connectors — horizontal arrows appear only in the wide layout */
.sch-arrow{display:none; align-items:center; justify-content:center; color:var(--line2)}
.sch-arrow svg{width:22px; height:12px; display:block}

@media (min-width:720px){
  .sch-flow{
    grid-template-columns:1.25fr auto 1fr auto 1fr auto 1fr;
    gap:0 10px; align-items:start;
  }
  .sch-arrow{display:flex; padding-top:34px}
}

@media (prefers-reduced-motion:no-preference){
  .sch-stage{animation:schin .55s cubic-bezier(.22,.61,.36,1) both}
  .sch-stage:nth-of-type(1){animation-delay:.02s}
  .sch-stage:nth-of-type(2){animation-delay:.13s}
  .sch-stage:nth-of-type(3){animation-delay:.24s}
  .sch-stage:nth-of-type(4){animation-delay:.35s}
  @keyframes schin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
}

/* ---------- legal text ---------- */
.legal{display:flex; flex-direction:column; gap:26px; max-width:var(--measure)}
.legal h2{font-size:clamp(20px,2.6vw,26px); max-width:28ch}
.legal h3{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  margin:14px 0 0;
}
.legal p{font-size:15px; line-height:1.62; color:var(--soft)}
.legal p + p{margin-top:11px}
.legal strong{color:var(--ink); font-weight:600}
.legal .ver{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin:0;
}
.legal ul{margin:9px 0 0; padding-left:19px; max-width:var(--measure)}
.legal li{font-size:15px; line-height:1.62; color:var(--soft); margin-bottom:7px}
.legal .block{
  border-left:2px solid var(--line2); padding-left:16px;
  display:flex; flex-direction:column; gap:7px;
}
.tocrow{
  display:flex; gap:22px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line2);
}
.tocrow a{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid transparent;
}
.tocrow a:hover{border-bottom-color:var(--gold)}

/* ---------- footer ---------- */
.colophon{
  border-top:1px solid var(--line2);
  margin-top:12px; padding-top:22px;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; line-height:1.7; color:var(--faint);
}
.colophon strong{color:var(--soft); font-weight:400}
.colophon a{color:var(--faint); border-bottom-color:var(--line2)}
.colophon a:hover{color:var(--soft)}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .entry{grid-template-columns:1fr; gap:6px}
  .status{grid-row:auto; grid-column:1/2; margin-top:3px}
  dl{grid-template-columns:1fr; gap:4px}
  dt{padding-top:11px}
  .nav-in{gap:16px}
  .nav-brand{margin-right:0; width:100%; margin-bottom:6px}
}

@media (prefers-reduced-motion:no-preference){
  .sheet > *{animation:rise .5s cubic-bezier(.22,.61,.36,1) both}
  .sheet > *:nth-child(2){animation-delay:.06s}
  .sheet > *:nth-child(3){animation-delay:.12s}
  .sheet > *:nth-child(4){animation-delay:.18s}
  .sheet > *:nth-child(5){animation-delay:.24s}
  .sheet > *:nth-child(6){animation-delay:.3s}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}