/* ===================================================================
   Nivaro. Shared stylesheet.
   Light, typographic, monochrome. Colour is reserved for one thing
   only: the authority state of an action (allowed / waiting / blocked).
   =================================================================== */

:root{
  color-scheme: light;

  --paper:#FFFFFF;
  --paper-2:#FAFAF9;
  --paper-3:#F4F3F1;
  --line:#E8E7E4;
  --line-2:#D8D6D2;

  --ink:#0F0F11;
  --ink-2:#45443F;
  --ink-3:#6E6C67;

  /* brand accent. highlights the main point in a line, nothing else.
     deep magenta: away from blue (everyone), violet (the AI cliche), and the
     green / amber / red already spoken for by authority state. */
  --brand:#A81B60;   --brand-bg:#FBE9F1;

  /* state colours. only ever mean the authority state of an action. */
  --allow:#12704A;   --allow-bg:#E9F4EE;
  --wait:#9A6210;    --wait-bg:#FBF0DE;
  --block:#B23A2C;   --block-bg:#FAEAE7;

  --shell:1160px;
  --ease:cubic-bezier(.23,1,.32,1);
  --r-ctl:8px;
  --r-pan:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select{font-family:inherit;font-size:inherit}
button{cursor:pointer}
svg{display:block}

.wrap{max-width:var(--shell);margin:0 auto;padding:0 26px}
@media (max-width:760px){.wrap{padding:0 18px}}
section{padding:112px 0}
@media (max-width:760px){section{padding:72px 0}}
.tint{background:var(--paper-2)}
.ruled{border-top:1px solid var(--line)}

/* ---------------- type ---------------- */
.d1{font-size:clamp(40px,5.6vw,72px);font-weight:600;line-height:1.03;letter-spacing:-.038em}
.d2{font-size:clamp(30px,4vw,50px);font-weight:600;line-height:1.06;letter-spacing:-.032em}
.d3{font-size:clamp(21px,2.3vw,27px);font-weight:600;line-height:1.22;letter-spacing:-.022em}
.d4{font-size:19px;font-weight:600;letter-spacing:-.015em}
.lede{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:54ch}
.small{font-size:15px;color:var(--ink-2)}
.mono{font-family:"Geist Mono",ui-monospace,monospace}
.eyebrow{font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------------- reveal ----------------
   Every JS-driven hidden state on this site is gated behind `html.js`, which is
   set by a one-line inline script in each page head. If that script never runs,
   or app.js 404s, or a CSP blocks it, the page still renders fully. Nothing here
   may hide content unless JS has proven it is alive to un-hide it. */
.rv{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(14px)}
  .js .rv.in{opacity:1;transform:none}
  .dl1.in{transition-delay:.07s}.dl2.in{transition-delay:.14s}.dl3.in{transition-delay:.21s}
}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r-ctl);font-weight:600;font-size:15px;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .15s var(--ease),background .18s,border-color .18s,color .18s}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#26262A}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-sm{padding:9px 16px;font-size:14px}
/* a thumb needs ~44px; the small button is 38px, which is fine for a cursor. */
@media (max-width:760px){.btn-sm{min-height:44px}}

/* ---------------- panels + state pills ---------------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pan)}
.tint .panel{background:var(--paper)}
.pill{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.05em;
  padding:4px 9px;border-radius:999px;white-space:nowrap}
.pill-allow{color:var(--allow);background:var(--allow-bg)}
.pill-wait{color:var(--wait);background:var(--wait-bg)}
.pill-block{color:var(--block);background:var(--block-bg)}
.pill-mute{color:var(--ink-3);background:var(--paper-3)}
.pill-brand{color:var(--brand);background:var(--brand-bg)}

/* ---------------- brand highlight ----------------
   .hl   colours a phrase inside display type, where it cannot be mistaken for a link.
   .key  marks the key phrase inside body copy, where coloured text would read as a link.
   (.mk is taken: it is the state-marker glyph in .states, do not reuse it here.) */
.hl{color:var(--brand)}
.key{background:var(--brand-bg);color:var(--ink);font-weight:500;
  padding:1px 6px;border-radius:5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------------- channel chips ---------------- */
.chans{display:flex;flex-wrap:wrap;gap:10px}
.chan{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  background:var(--paper);border-radius:999px;padding:9px 16px;font-size:14.5px;color:var(--ink);
  transition:border-color .18s}
.chan:hover{border-color:var(--line-2)}
.chan svg{width:17px;height:17px;color:var(--brand);flex:0 0 auto}
.checklist li svg{width:16px;height:16px;color:var(--brand);flex:0 0 auto;margin-top:2px}

/* ---------------- early notice ---------------- */
.notice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r-pan);padding:14px 18px}
.notice .t{font-size:15px;color:var(--ink-2)}
.notice .t b{color:var(--ink);font-weight:600}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav.stuck{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.025em}
.logo-mark{width:20px;height:20px;position:relative;flex:0 0 auto}
.logo-mark i{position:absolute;border:1.6px solid var(--ink);border-radius:3px}
.logo-mark i:nth-child(1){inset:0 5px 5px 0}
.logo-mark i:nth-child(2){inset:5px 0 0 5px;background:var(--paper)}
.nav-links{display:flex;gap:26px}
.nav-links a{font-size:14.5px;color:var(--ink-2);transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-links a{position:relative;padding-bottom:2px}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1.5px;background:var(--brand);border-radius:1px}

/* ---------------- mobile nav ----------------
   below 880px the inline links are replaced by a real drawer, not by nothing. */
.nav-toggle{display:none;width:44px;height:44px;margin-right:-10px;border:none;background:none;
  align-items:center;justify-content:center;color:var(--ink)}
.nav-toggle i{display:block;width:19px;height:1.5px;background:currentColor;border-radius:1px;
  position:relative;transition:transform .24s var(--ease),background .1s}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:19px;height:1.5px;
  background:currentColor;border-radius:1px;transition:transform .24s var(--ease)}
.nav-toggle i::before{top:-6px}
.nav-toggle i::after{top:6px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.nav-drawer{display:none}
@media (max-width:880px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav .wrap{gap:10px}
  .nav-drawer{display:block;position:fixed;left:0;right:0;top:66px;z-index:99;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px 18px 20px;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
  .nav-drawer.open{transform:none;opacity:1;visibility:visible}
  .nav-drawer a{display:block;padding:15px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .nav-drawer a[aria-current="page"]{color:var(--brand);font-weight:500}
  .nav-drawer .btn{margin-top:18px;width:100%}
}

/* ---------------- page head ---------------- */
/* padding-block, never the shorthand: .phead is always used together with
   .wrap, and a shorthand here silently wipes .wrap's side gutter on mobile. */
.phead{padding-block:76px 8px}
.phead .eyebrow{margin-bottom:16px}
.phead .lede{margin-top:20px}
@media (max-width:760px){.phead{padding-block:52px 4px}}

/* ---------------- chapter break ---------------- */
.chapter{display:flex;align-items:center;gap:16px;margin-bottom:56px}
.chapter .ic{width:24px;height:24px;flex:0 0 auto;color:var(--ink)}
.chapter .nm{font-size:16px;font-weight:500;color:var(--ink-2);white-space:nowrap;letter-spacing:-.012em}
.chapter .rule{flex:1;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left}
.chapter.in .rule{transform:scaleX(1);transition:transform .9s var(--ease) .1s}
.chapter .ic path,.chapter .ic circle,.chapter .ic rect,.chapter .ic line{stroke-dasharray:56;stroke-dashoffset:56}
.chapter.in .ic path,.chapter.in .ic circle,.chapter.in .ic rect,.chapter.in .ic line{
  animation:draw .85s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .chapter .rule{transform:scaleX(1)}
  .chapter .ic path,.chapter .ic circle,.chapter .ic rect,.chapter .ic line{stroke-dashoffset:0}
}
@media (max-width:620px){.chapter{margin-bottom:40px}}

/* ===================================================================
   WORLD -> NIVARO -> AGENT   (home hero diagram)
   =================================================================== */
.flow{margin-top:72px}
.flow-grid{display:grid;grid-template-columns:1fr 78px 1.05fr 78px 1fr;align-items:stretch;gap:0}
@media (max-width:900px){.flow-grid{grid-template-columns:1fr;gap:0}}

.fnode{border:1px solid var(--line);border-radius:var(--r-pan);background:var(--paper);padding:20px 18px;
  display:flex;flex-direction:column;min-height:186px}
.fnode.mid{border-color:var(--ink);background:var(--paper);box-shadow:0 10px 34px -22px rgba(15,15,17,.5)}
.fnode .cap{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.fnode.mid .cap{color:var(--ink)}
.fnode .li{font-size:14.5px;color:var(--ink-2);padding:5px 0}
.fnode.mid .li{color:var(--ink)}

/* grouped capabilities inside the middle panel */
.fgroup{padding:12px 0;border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:none;padding-top:0}
.fgroup .gk{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.fgroup .gv{font-size:14.5px;color:var(--ink);line-height:1.5}

/* rails */
.frail{position:relative;display:flex;align-items:center;justify-content:center}
@media (max-width:900px){.frail{height:52px}}
.frail .track{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2)}
@media (max-width:900px){.frail .track{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}}
.frail .dot{position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--ink);margin-top:-3.5px;opacity:0}
@media (max-width:900px){.frail .dot{left:50%;margin-left:-3.5px;top:0;margin-top:0}}

@media (prefers-reduced-motion:no-preference){
  .flow.go .r1 .d-fwd{animation:railF 8s linear infinite}
  .flow.go .r2 .d-fwd{animation:railF 8s linear infinite 2s}
  .flow.go .r2 .d-bak{animation:railB 8s linear infinite 4s}
  .flow.go .r1 .d-bak{animation:railB 8s linear infinite 6s}
  .flow.go .fnode.mid{animation:midPulse 8s ease-in-out infinite}
}
@keyframes railF{
  0%{opacity:0;transform:translateX(0)}
  2%{opacity:1}
  23%{opacity:1;transform:translateX(calc(100% + 66px))}
  25%,100%{opacity:0;transform:translateX(calc(100% + 66px))}
}
@keyframes railB{
  0%{opacity:0;transform:translateX(calc(100% + 66px))}
  2%{opacity:1}
  23%{opacity:1;transform:translateX(0)}
  25%,100%{opacity:0;transform:translateX(0)}
}
@media (max-width:900px){
  @keyframes railF{0%{opacity:0;transform:translateY(0)}2%{opacity:1}23%{opacity:1;transform:translateY(52px)}25%,100%{opacity:0;transform:translateY(52px)}}
  @keyframes railB{0%{opacity:0;transform:translateY(52px)}2%{opacity:1}23%{opacity:1;transform:translateY(0)}25%,100%{opacity:0;transform:translateY(0)}}
}
@keyframes midPulse{
  0%,20%{box-shadow:0 10px 34px -22px rgba(15,15,17,.5)}
  27%{box-shadow:0 10px 34px -18px rgba(15,15,17,.75)}
  45%,70%{box-shadow:0 10px 34px -22px rgba(15,15,17,.5)}
  77%{box-shadow:0 10px 34px -18px rgba(15,15,17,.75)}
  100%{box-shadow:0 10px 34px -22px rgba(15,15,17,.5)}
}
.flow-legend{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.flow-legend span{font-family:"Geist Mono",monospace;font-size:12px;color:var(--ink-3)}
.flow-legend b{color:var(--ink-2);font-weight:400}

/* ===================================================================
   generic content blocks
   =================================================================== */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.cols-3{grid-template-columns:1fr}}
@media (max-width:760px){.cols-2{grid-template-columns:1fr}}

/* A grid item defaults to min-width:auto, so anything with wide or nowrap
   content (code blocks, tables, wire rows) refuses to shrink and pushes the
   whole page sideways on a phone. This is the fix, once, for every grid. */
.cols-2>*,.cols-3>*,.vs>*,.wl>*,.cp>*,.flow-grid>*,.inv>*,.wf>*{min-width:0}

.card{padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-pan);background:var(--paper);
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
a.card:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 12px 26px -20px rgba(15,15,17,.45)}
.card h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.card p{font-size:15.5px;color:var(--ink-2);line-height:1.55}
.card .go{margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:500;color:var(--brand);
  display:inline-flex;align-items:center;gap:7px}
.card .go::after{content:"→";transition:transform .22s var(--ease);display:inline-block}
a.card:hover .go::after{transform:translateX(4px)}

/* ---------------- six wires vs one door ---------------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;align-items:stretch}
@media (max-width:900px){.vs{grid-template-columns:1fr}}
.vs-col{padding:26px 24px;display:flex;flex-direction:column}
.vs-col.after{border-color:var(--ink)}
.wire{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-3)}
.wire:first-of-type{border-top:none}
.wire .nm{white-space:nowrap}
.wire .dash{flex:1;height:1px;min-width:20px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 3px,transparent 3px 7px)}
.wire .you{font-family:"Geist Mono",monospace;font-size:11px;color:var(--ink-3);white-space:nowrap}
.vs-col.after .wire{color:var(--ink)}
.door{border:1px solid var(--ink);border-radius:var(--r-pan);padding:18px 16px;background:var(--paper-2)}
.door .dk{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.door .chans{gap:7px}
.door .chan{padding:7px 12px;font-size:13.5px;background:var(--paper)}
.door .chan svg{width:15px;height:15px}
.tally{margin-top:auto;padding-top:18px;font-size:15px;color:var(--ink-2)}
.tally b{color:var(--ink);font-weight:600}
/* on a phone the dotted leader is not worth a sideways scrollbar:
   let the label wrap and park the "you wire it" note underneath it. */
@media (max-width:560px){
  .vs-col{padding:22px 18px}
  .wire{flex-wrap:wrap;gap:2px 12px}
  .wire .nm{white-space:normal;flex:1 1 100%}
  .wire .dash{display:none}
}

/* ---------------- chat thread mock ---------------- */
.thread{padding:0;overflow:hidden;display:flex;flex-direction:column}
.thread-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--paper-2)}
.thread-hd .av{width:28px;height:28px;border-radius:50%;background:var(--paper-3);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--ink-2)}
.thread-hd .nm{font-size:14.5px;font-weight:600}
.thread-bd{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.bub{max-width:88%;padding:10px 13px;border-radius:12px;font-size:14.5px;line-height:1.45}
.bub .who{display:block;font-family:"Geist Mono",monospace;font-size:10.5px;
  color:var(--ink-3);margin-bottom:4px;letter-spacing:.04em}
.bub.in{align-self:flex-start;background:var(--paper-3);border-bottom-left-radius:4px}
.bub.out{align-self:flex-end;background:var(--paper);border:1px solid var(--line);border-bottom-right-radius:4px}
.bub.bad{border-color:var(--block);background:var(--block-bg)}
.bub.good{border-color:var(--allow);background:var(--allow-bg)}
.locked{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;
  font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--ink-3);
  border:1px dashed var(--line-2);border-radius:10px;padding:9px 13px}
.locked svg{width:14px;height:14px;flex:0 0 auto}
.thread-ft{padding:13px 16px;border-top:1px solid var(--line);display:flex;
  align-items:center;gap:10px;font-size:14.5px}
.thread-ft.bad{background:var(--block-bg);color:var(--block)}
.thread-ft.good{background:var(--allow-bg);color:var(--allow)}
.thread-ft b{font-weight:600}

/* ---------------- precedence bars ---------------- */
.beats{margin-top:40px;display:flex;flex-direction:column}
.beat{display:flex;align-items:center;gap:14px;padding:16px 20px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--paper)}
.beat .ic{width:20px;height:20px;color:var(--brand);flex:0 0 auto}
.beat .t{font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.beat.top{border-color:var(--ink);background:var(--paper-2)}
.beat.dim{opacity:.72}
.beats .sep{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);padding:8px 0 8px 20px}

/* ---------------- what moves, what stays ---------------- */
.moves-top{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin:40px 0 26px}
.moves-node{border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:11px 20px;
  font-size:15px;font-weight:500;background:var(--paper)}
.moves-node span{display:block;font-family:"Geist Mono",monospace;font-size:10.5px;
  font-weight:400;color:var(--ink-3);margin-top:2px}
.moves-arrow{font-family:"Geist Mono",monospace;color:var(--ink-3);font-size:18px}
.moves-col{padding:22px 20px}
.moves-col h4{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:16px}
.moves-col.go h4{color:var(--allow)}
.moves-col.no h4{color:var(--block)}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.tag2{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:999px;padding:9px 15px;font-size:14.5px;background:var(--paper)}
.tag2 svg{width:15px;height:15px;flex:0 0 auto}
.moves-col.go .tag2 svg{color:var(--allow)}
.moves-col.no .tag2{color:var(--ink-3)}
.moves-col.no .tag2 svg{color:var(--block)}

/* ---------------- permission matrix ---------------- */
.mtx-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-pan);
  background:var(--paper);margin-top:40px}
.mtx{width:100%;border-collapse:collapse;min-width:660px}
.mtx th,.mtx td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.mtx thead th{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);background:var(--paper-2);font-weight:400;white-space:nowrap}
.mtx thead th.c,.mtx td.c{text-align:center}
.mtx tbody tr:last-child td{border-bottom:none}
.mtx td{font-size:14.5px}
.mtx td.who{font-weight:600;white-space:nowrap}
.mtx td.who span{display:block;font-family:"Geist Mono",monospace;font-size:11px;
  font-weight:400;color:var(--ink-3);margin-top:2px}
.cell-y{color:var(--allow);font-family:"Geist Mono",monospace}
.cell-n{color:var(--ink-3);font-family:"Geist Mono",monospace}
.cell-h{color:var(--wait);font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.04em}
.mtx-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:13.5px;color:var(--ink-3)}
.mtx-key span{display:inline-flex;align-items:center;gap:7px}
/* A 4-column matrix inside a 350px sideways scroller is unreadable on a phone.
   Break each agent out into its own card, with the column head as the row label. */
@media (max-width:620px){
  .mtx-wrap{overflow:visible;border:none;border-radius:0;background:none}
  .mtx{min-width:0;display:block}
  .mtx thead{display:none}
  .mtx tbody,.mtx tr{display:block}
  .mtx tr{border:1px solid var(--line);border-radius:var(--r-pan);
    background:var(--paper);padding:2px 16px 6px;margin-bottom:12px}
  .mtx td{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:10px 0;border-bottom:1px solid var(--line);text-align:left}
  .mtx tr td:last-child,.mtx tbody tr:last-child td{border-bottom:1px solid var(--line)}
  .mtx tr td:last-child{border-bottom:none}
  .mtx td.who{display:block;padding:14px 0 12px;font-size:16px;white-space:normal}
  .mtx td.c{text-align:right}
  .mtx td.c::before{content:attr(data-l);font-family:"Geist Mono",monospace;font-size:10.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
}

/* ---------------- precedence ladder ---------------- */
.ladder{margin-top:40px}
.rung{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.rung:first-child{border-top:none}
.rung .n{font-family:"Geist Mono",monospace;font-size:13px;color:var(--brand);padding-top:3px}
.rung .t{font-size:17px;font-weight:600;letter-spacing:-.012em;margin-bottom:5px}
.rung .d{font-size:15.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:620px){.rung{grid-template-columns:26px 1fr;gap:12px}}

/* ---------------- shared channel fan ---------------- */
.fan{display:flex;flex-direction:column;align-items:center;margin-top:44px}
.fan-tops{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.fan-top{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);
  border-radius:999px;padding:10px 18px;font-size:14.5px;background:var(--paper)}
.fan-top svg{width:16px;height:16px;color:var(--brand);flex:0 0 auto}
.fan-line{width:1px;height:26px;background:var(--line-2)}
.fan-hub{border:1px solid var(--ink);border-radius:var(--r-ctl);padding:11px 22px;
  font-size:15px;font-weight:500;background:var(--paper-2)}
.fan-agents{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;
  max-width:760px;margin-top:26px}
@media (max-width:700px){.fan-agents{grid-template-columns:1fr}}
.fan-col{padding:0 20px;border-left:1px solid var(--line)}
.fan-col:first-child{padding-left:0;border-left:none}
@media (max-width:700px){.fan-col{padding:0;border-left:none}}
.fan-note{margin-top:22px;font-size:14.5px;color:var(--ink-3);text-align:center;max-width:56ch}

/* ---------------- inventory grid ---------------- */
.inv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media (max-width:900px){.inv{grid-template-columns:1fr}}
.inv-col{padding:24px 22px}
.inv-col h3{font-size:18px;font-weight:600;letter-spacing:-.015em;margin-bottom:4px}
.inv-col .sub{font-size:14px;color:var(--ink-3);margin-bottom:16px}
.inv-col li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:15px;
  border-top:1px solid var(--line);color:var(--ink)}
.inv-col li:first-of-type{border-top:none}
.inv-col li svg{width:16px;height:16px;color:var(--brand);flex:0 0 auto;margin-top:2px}
.inv-col li .b{width:5px;height:5px;border-radius:50%;background:var(--brand);flex:0 0 auto;margin-top:8px}

.rowlist{border-top:1px solid var(--line)}
.rowlist .row{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (max-width:700px){.rowlist .row{grid-template-columns:1fr;gap:6px}}
.rowlist .k{font-size:15px;font-weight:600}
.rowlist .v{font-size:15.5px;color:var(--ink-2)}

.checklist li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15.5px;border-top:1px solid var(--line)}
.checklist li:first-child{border-top:none}
.checklist .m{font-family:"Geist Mono",monospace;font-size:13px;flex:0 0 auto;width:13px;line-height:1.6}
.checklist .m.y{color:var(--allow)}
.checklist .m.n{color:var(--block)}
.checklist li.off{color:var(--ink-3)}

.motif{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:22px}
.motif span{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------------- CTA strip ---------------- */
.cta{padding:96px 0}
.cta-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta-in .d2{max-width:16ch}
.cta-in .lede{text-align:center}

/* ---------------- footer ---------------- */
footer{padding:52px 0 40px;border-top:1px solid var(--line);background:var(--paper-2)}
.foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{font-size:14.5px;color:var(--ink-2)}
.foot-links a:hover{color:var(--ink)}
.foot p{font-size:13px;color:var(--ink-3)}

/* ===================================================================
   control plane demo   (how-it-works)
   =================================================================== */
.cp{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:start;margin-top:44px}
@media (max-width:900px){.cp{grid-template-columns:1fr}}
.cp-controls{padding:22px 20px}
.cp-controls .lbl{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.cp-input{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-ctl);
  overflow:hidden;background:var(--paper);margin-bottom:18px}
.cp-input .cur{padding:11px 0 11px 13px;color:var(--ink-3);font-family:"Geist Mono",monospace;font-size:14px}
.cp-input input{flex:1;min-width:0;background:none;border:none;color:var(--ink);
  padding:11px 13px 11px 4px;font-family:"Geist Mono",monospace;font-size:14px}
.cp-input input:focus{outline:none}
.cp-note{font-size:14px;color:var(--ink-3);line-height:1.5;margin-top:16px}
.cp-stage{overflow:hidden;padding:0}
.cp-req{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line);
  background:var(--paper-2)}
.cp-req .who{width:30px;height:30px;border-radius:var(--r-ctl);background:var(--paper-3);
  display:flex;align-items:center;justify-content:center;font-family:"Geist Mono",monospace;
  font-size:11px;color:var(--ink-2);flex:0 0 auto}
.cp-req .txt{font-size:15px}
.cp-checks{padding:4px 16px}
.chk{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);
  opacity:.3;transition:opacity .3s var(--ease)}
.chk:first-child{border-top:none}
.chk.shown{opacity:1}
.chk .n{font-family:"Geist Mono",monospace;font-size:12.5px;color:var(--ink-2);flex:1}
.chk .v{font-family:"Geist Mono",monospace;font-size:12px}
.chk .v.ok{color:var(--allow)}
.chk .v.bad{color:var(--block)}
.chk .v.wait{color:var(--wait)}
.chk .v.idle{color:var(--ink-3)}
.cp-out{padding:16px;border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;min-height:68px}
.cp-out .msg{font-size:15px}
.cp-out .msg .sm{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;
  font-family:"Geist Mono",monospace}

/* ---------------- timeline / audit ---------------- */
.viewtog{display:flex;border:1px solid var(--line-2);border-radius:var(--r-ctl);overflow:hidden}
.viewtog button{background:none;border:none;color:var(--ink-3);padding:9px 15px;
  font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:all .18s}
.viewtog button.on{background:var(--paper-3);color:var(--ink)}
@media (max-width:760px){.viewtog button{min-height:44px;flex:1 1 0}}
.timeline{margin-top:30px;padding:4px 20px}
.tl-row{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;
  padding:13px 0;border-top:1px solid var(--line)}
.tl-row:first-child{border-top:none}
@media (max-width:620px){.tl-row{grid-template-columns:58px 1fr;gap:8px}.tl-row .tag{grid-column:2}}
.tl-row .t{font-family:"Geist Mono",monospace;font-size:12.5px;color:var(--ink-3)}
.tl-row .e{font-size:15px}
.tl-row .e.mono{font-size:13px;color:var(--ink-2)}
.dev-only{display:none}
.devview .biz-only{display:none}
.devview .dev-only{display:block}

/* ---------------- shadow modes ---------------- */
.modes{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.mode{border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);padding:9px 17px;
  border-radius:var(--r-ctl);font-family:"Geist Mono",monospace;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
.mode:hover{border-color:var(--ink-3);color:var(--ink)}
.mode.on{border-color:var(--ink);color:var(--ink);background:var(--paper-3)}
@media (max-width:760px){.mode{min-height:44px}}
.draft{margin-top:20px;max-width:600px}
.draft-row{padding:15px 18px;border-top:1px solid var(--line)}
.draft-row:first-of-type{border-top:none}
.draft-row .k{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.draft-row .v{font-size:15.5px}
.draft-actions{display:flex;gap:9px;padding:15px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.draft-edit{width:100%;font:inherit;font-size:15.5px;line-height:1.5;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-ctl);
  padding:9px 11px;resize:vertical}
.draft-edit:focus{outline:none;box-shadow:0 0 0 3px var(--paper-3)}
.draft-out{padding:14px 18px;border-top:1px solid var(--line);font-size:15px}
.draft-out.good{background:var(--allow-bg);color:var(--allow)}
.draft-out.bad{background:var(--block-bg);color:var(--block)}

/* ===================================================================
   create-employee flow   (operators)
   =================================================================== */
.create{margin-top:40px;overflow:hidden}
.create-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--line)}
.steps-dots{display:flex;gap:6px}
.steps-dots i{width:22px;height:3px;border-radius:2px;background:var(--line-2);transition:background .3s}
.steps-dots i.on{background:var(--ink)}
.create-body{padding:30px 26px;min-height:320px;display:flex;flex-direction:column}
/* the 320px floor is there so the panel does not jump between desktop steps;
   on a phone the steps are already tall, so it only leaves dead space. */
@media (max-width:620px){
  .create-body{padding:22px 18px;min-height:0}
  .create-foot{flex-wrap:wrap;gap:10px 12px}
  .create-foot .hint{order:-1;flex:1 1 100%}
  .create-foot .btn{flex:1 1 0}
}
.cstep{display:none;flex-direction:column;flex:1}
.cstep.on{display:flex;animation:stepIn .35s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cstep .q{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.opt-row{display:flex;flex-wrap:wrap;gap:9px}
.opt{border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);padding:11px 18px;
  border-radius:var(--r-ctl);font-size:14.5px;transition:all .18s}
.opt:hover{border-color:var(--ink-3);color:var(--ink)}
.opt.sel{border-color:var(--ink);color:var(--ink);background:var(--paper-3);font-weight:500}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.fields{grid-template-columns:1fr}}
.fld label{display:block;font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.fld input,.fld select{width:100%;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-ctl);padding:11px 13px;color:var(--ink);font-size:15px}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--ink)}
.tog{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;
  border-top:1px solid var(--line);cursor:pointer;width:100%;text-align:left;
  background:none;border-left:none;border-right:none;border-bottom:none;color:inherit;font-size:inherit}
.tog:first-of-type{border-top:none}
.tog .name{font-size:15.5px;color:var(--ink-3)}
.tog.on .name{color:var(--ink)}
.tog .sw{width:38px;height:22px;border-radius:999px;background:var(--paper-3);border:1px solid var(--line-2);
  position:relative;flex:0 0 auto;transition:all .22s var(--ease)}
.tog .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--ink-3);transition:transform .22s var(--ease),background .22s}
.tog.on .sw{background:var(--ink);border-color:var(--ink)}
.tog.on .sw::after{transform:translateX(16px);background:var(--paper)}
.limits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:620px){.limits{grid-template-columns:1fr}}
.create-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-top:1px solid var(--line)}
.create-foot .hint{font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.result{text-align:center;padding:14px 0}
.result .big{font-size:26px;font-weight:600;letter-spacing:-.025em;margin-bottom:8px}
.result .sub{color:var(--ink-2);font-size:15.5px;margin-bottom:26px}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-pan);overflow:hidden;text-align:left}
@media (max-width:620px){.result-grid{grid-template-columns:1fr 1fr}}
.result-grid div{background:var(--paper);padding:14px}
.result-grid .k{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.result-grid .v{font-size:14.5px}

/* ---------------- meters + breaker ---------------- */
.meters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
@media (max-width:820px){.meters{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.meters{grid-template-columns:1fr}}
.meter{padding:18px 16px}
.meter .k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.meter .v{font-size:21px;font-weight:600;letter-spacing:-.025em;margin-bottom:12px;
  font-family:"Geist Mono",monospace}
.meter .v small{color:var(--ink-3);font-size:13px;font-weight:400}
.bar{height:4px;background:var(--paper-3);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:2px;width:var(--w);
  transition:width 1s var(--ease)}
.js .bar i{width:0}
.js .in .bar i{width:var(--w)}
.breaker{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){.breaker{grid-template-columns:1fr}}
.spam{padding:16px;display:flex;flex-direction:column;gap:6px;min-height:190px;justify-content:flex-end}
.spam .m{font-family:"Geist Mono",monospace;font-size:12px;color:var(--ink-3);
  background:var(--paper-2);padding:7px 11px;border-radius:6px}
.js .spam .m{opacity:0}
.js .in .spam .m{animation:spamIn .3s var(--ease) both;animation-delay:calc(var(--i)*.14s)}
@keyframes spamIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.trip{padding:20px 18px;border-color:var(--block);background:var(--block-bg);
  display:flex;flex-direction:column;justify-content:center}
.js .trip{opacity:0}
.js .in .trip{animation:tripIn .45s var(--ease) both;animation-delay:1.15s}
@keyframes tripIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.trip .t{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--block);margin-bottom:10px}
.trip .big{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.trip .why{font-size:15px;color:var(--ink-2)}

/* ---------------- workforce ---------------- */
.wf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
@media (max-width:900px){.wf{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.wf{grid-template-columns:1fr}}
.agent{padding:18px 16px}
.agent .nm{font-size:16px;font-weight:600;margin-bottom:2px}
.agent .rl{font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--ink-3);margin-bottom:14px}
.agent .meta{font-size:13.5px;color:var(--ink-2);padding:5px 0;border-top:1px solid var(--line)}
.agent .st{margin-top:12px}
.handoff{margin-top:24px;padding:22px 20px}
.handoff-flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.handoff-flow .hn{font-family:"Geist Mono",monospace;font-size:12px;color:var(--ink-2);
  border:1px solid var(--line);padding:7px 12px;border-radius:var(--r-ctl);background:var(--paper-2)}
.handoff-flow .hn.hot{color:var(--wait);border-color:var(--wait);background:var(--wait-bg)}
.handoff-flow .ar{color:var(--ink-3);font-family:"Geist Mono",monospace;font-size:12px}

/* ---------------- code + dev states ---------------- */
.code{background:var(--ink);border-radius:var(--r-pan);padding:20px 22px;overflow-x:auto}
.code pre{font-family:"Geist Mono",monospace;font-size:13px;line-height:1.75;color:#D7D6D2;white-space:pre}
.code .s{color:#7FCBA4}
.code .c{color:#8E8C87}
.states{display:flex;flex-direction:column;gap:10px}
.state{display:flex;gap:14px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);
  border-radius:var(--r-pan);background:var(--paper)}
.state .mk{font-family:"Geist Mono",monospace;font-size:13px;width:14px;flex:0 0 auto;line-height:1.5}
.state.a .mk{color:var(--allow)}.state.b .mk{color:var(--block)}
.state.c .mk{color:var(--wait)}.state.d .mk{color:var(--ink-2)}
.state .nm{font-family:"Geist Mono",monospace;font-size:12.5px;margin-bottom:3px}
.state .ds{font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* ---------------- forms ---------------- */
.wl{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:900px){.wl{grid-template-columns:1fr;gap:32px}}
.wl-form{padding:26px 24px;display:flex;flex-direction:column;gap:15px}
.checks{display:flex;flex-direction:column;margin-top:2px;border:none;padding:0;min-width:0}
/* real <input type=checkbox> under a drawn box: keyboard operable, submits with
   the form, and correct with JS off. The input is moved off-screen, not
   display:none, so it stays focusable. */
.cbx{display:flex;align-items:center;gap:11px;padding:8px 0;cursor:pointer;font-size:15px;color:var(--ink-2)}
.cbx input{position:absolute;opacity:0;width:0;height:0}
.cbx .box{width:17px;height:17px;border:1px solid var(--line-2);border-radius:4px;flex:0 0 auto;
  position:relative;transition:background .18s,border-color .18s,box-shadow .18s}
.cbx input:checked + .box{background:var(--ink);border-color:var(--ink)}
.cbx input:checked + .box::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cbx input:focus-visible + .box{outline:2px solid var(--ink);outline-offset:3px}
.cbx:has(input:checked){color:var(--ink)}
.form-error{font-size:14.5px;color:var(--block);background:var(--block-bg);
  border-radius:var(--r-ctl);padding:10px 13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wl-success{display:none;padding:28px 24px;flex-direction:column;align-items:flex-start;gap:12px}
.wl-success.show{display:flex}
.wl-form.hide{display:none}

/* ===================================================================
   THE EMPLOYEE WALLET
   The one object the site wants you to remember. It is a work pass, not
   an information card, so it is built as three named zones with real
   hierarchy between them:

     WHO           who this employee is          (tinted header band)
     WHAT IT HAS   the equipment it is issued    (quiet capability grid)
     WHAT IT MAY DO  its authority               (heavy rule, the numbers)

   The zone labels do the teaching. Never flatten these back into four
   identical rows of label/value, which is what this used to be.
   Not a crypto wallet: no gradient, no glow, no balance, no chain.
   =================================================================== */
.wallet{background:var(--paper);border:1px solid var(--ink);border-radius:14px;
  overflow:hidden;box-shadow:0 26px 60px -44px rgba(15,15,17,.6)}
.w-zone{padding:15px 20px 17px;border-top:1px solid var(--line)}
.w-zk{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}

/* --- zone 1: who --- */
.w-who{background:var(--paper-2);border-top:none;padding-top:16px}
.w-id{display:flex;align-items:center;gap:13px;min-width:0}
.w-av{width:38px;height:38px;border-radius:10px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex:0 0 auto}
.w-id .nm{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.w-id .rl{font-size:13.5px;color:var(--ink-3);margin-top:2px}
.w-state{margin-left:auto;position:relative;display:inline-flex;flex:0 0 auto}
.w-state .s1{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;opacity:0}

/* --- zone 2: what it has --- */
.w-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.w-item{display:flex;align-items:center;gap:9px;padding:6px 8px;margin:0 -8px;
  border:none;background:none;border-radius:7px;font-size:14.5px;color:var(--ink);
  width:100%;text-align:left;transition:background .16s var(--ease)}
.w-item svg{width:15px;height:15px;color:var(--brand);flex:0 0 auto}
button.w-item{cursor:pointer}
button.w-item:hover,button.w-item.on{background:var(--paper-3)}
button.w-item.on{font-weight:600}

/* --- zone 3: what it may do --- */
/* the heavy rule is the point: authority is a different kind of thing from equipment. */
.w-may{border-top:1.5px solid var(--ink)}
.w-may .w-zk{color:var(--ink)}
.wa{display:flex;align-items:baseline;gap:14px;padding:7px 8px;margin:0 -8px;border-radius:7px;
  border:none;background:none;width:100%;text-align:left;transition:background .16s var(--ease)}
.wa .k{font-size:14.5px;color:var(--ink-2);flex:1;min-width:0}
.wa .v{font-family:"Geist Mono",monospace;font-size:14px;color:var(--ink);white-space:nowrap}
.wa .v.wait{color:var(--wait);font-size:12.5px}
button.wa{cursor:pointer}
button.wa:hover,button.wa.on{background:var(--paper-3)}
button.wa.on .k{font-weight:600;color:var(--ink)}

.w-foot{padding:13px 20px;border-top:1px solid var(--line);background:var(--paper-2);
  font-size:14px;color:var(--ink-2);line-height:1.5;min-height:52px;display:flex;align-items:center}
.w-foot b{color:var(--ink);font-weight:600}

/* --- assembly ---
   the three zones land in ~0.6s. the whole idea has to be readable almost
   immediately; a slow build just delays the pitch. */
@media (prefers-reduced-motion:no-preference){
  .js .assemble .w-zone,.js .assemble .w-foot{opacity:0}
  .js .assemble .w-state .s1{opacity:1}
  .js .assemble .w-state .s2{opacity:0}
  .assemble.go .w-zone{animation:wIn .34s var(--ease) both}
  .assemble.go .w-zone:nth-child(1){animation-delay:.04s}
  .assemble.go .w-zone:nth-child(2){animation-delay:.17s}
  .assemble.go .w-zone:nth-child(3){animation-delay:.30s}
  .assemble.go .w-foot{animation:wIn .34s var(--ease) .43s both}
  .assemble.go .w-state .s1{animation:wOut .18s var(--ease) .52s both}
  .assemble.go .w-state .s2{animation:wIn .3s var(--ease) .58s both}
}
@keyframes wIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wOut{to{opacity:0}}

@media (max-width:400px){.w-grid{grid-template-columns:1fr}}

/* ---------------- split hero ---------------- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;
  padding-block:64px 96px}
@media (max-width:980px){.hero{grid-template-columns:1fr;gap:44px;padding-block:44px 72px}}
.hero-vis{position:relative}
.hero-cap{margin-top:16px;text-align:center;font-family:"Geist Mono",monospace;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}

/* ===================================================================
   AI vs EMPLOYEE   (things added around the brain)
   Open layout, not two bordered cards. The left side is deliberately
   almost empty; the emptiness is the argument.
   =================================================================== */
.around{display:grid;grid-template-columns:.82fr 1.18fr;gap:0;margin-top:52px;align-items:stretch}
@media (max-width:860px){.around{grid-template-columns:1fr;gap:44px}}
.ar{padding:0 44px 0 0;display:flex;flex-direction:column}
.ar+.ar{padding:0 0 0 44px;border-left:1px solid var(--line)}
@media (max-width:860px){
  .ar{padding:0}
  .ar+.ar{padding:44px 0 0;border-left:none;border-top:1px solid var(--line)}
}
.ar-k{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:26px}
.ar+.ar .ar-k{color:var(--ink)}
.ar-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 0 18px}
.ar-note{margin-top:24px;font-size:15px;color:var(--ink-3);max-width:34ch}
.brain{text-align:center;padding:0 6px}
.brain .t{font-size:23px;font-weight:600;letter-spacing:-.022em}
.brain .s{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.ring{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;align-items:stretch}
.ring .brain{align-self:center;background:var(--paper);border:1.5px solid var(--ink);
  border-radius:var(--r-ctl);padding:16px 10px}
.rc{padding:11px 12px;background:var(--paper-3);border-radius:var(--r-ctl);
  display:flex;flex-direction:column;justify-content:center;gap:2px}
.rc .t{font-size:14.5px;font-weight:500;letter-spacing:-.01em}
.rc .s{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.ring .rc.last{grid-column:2}
@media (prefers-reduced-motion:no-preference){
  .js .around .rc{opacity:0;transform:translateY(8px)}
  .around.in .rc{animation:wIn .5s var(--ease) both;animation-delay:calc(var(--i)*.07s + .1s)}
}
@media (max-width:700px){
  .ring{grid-template-columns:1fr 1fr}
  .ring .brain{grid-column:1/-1;order:-1}
  .ring .rc.last{grid-column:auto}
}

/* ===================================================================
   COMMUNICATION
   A customer arrives on some channel, hits one identity, and reaches one
   employee. Drawn as a fan on hairlines. No channel cards: the channel is
   not the point, the convergence is.
   =================================================================== */
.route{margin-top:52px;display:flex;flex-direction:column;align-items:center;text-align:center}
.route-k{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.route-who{font-size:19px;font-weight:600;letter-spacing:-.018em;margin-top:8px}
.route-said{font-size:15px;color:var(--ink-2);margin-top:4px}
.route-stem{width:1px;height:26px;background:var(--line-2)}
.route-fan{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:660px}
@media (max-width:620px){.route-fan{grid-template-columns:1fr 1fr}}
.route-ch{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding-top:16px;border-top:1px solid var(--line-2);position:relative}
.route-ch::before{content:"";position:absolute;top:0;left:50%;width:1px;height:14px;
  background:var(--line-2);transform:translateY(-14px)}
.route-ch svg{width:17px;height:17px;color:var(--brand)}
.route-ch .nm{font-size:14.5px}
.route-ch .ex{font-family:"Geist Mono",monospace;font-size:11px;color:var(--ink-3)}
.route-hub{border:1.5px solid var(--ink);border-radius:var(--r-ctl);
  padding:13px 26px;background:var(--paper);font-size:16px;font-weight:600;letter-spacing:-.015em}
.route-hub small{display:block;font-family:"Geist Mono",monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-top:4px}
.route-hub.end{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.route-hub.end small{color:rgba(255,255,255,.6)}
.route-note{margin-top:26px;font-size:15.5px;color:var(--ink-2);max-width:56ch}

/* ===================================================================
   WORKSPACE
   =================================================================== */
.ws{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;
  border:1px solid var(--line);border-radius:var(--r-pan);overflow:hidden;background:var(--paper)}
@media (max-width:760px){.ws{grid-template-columns:1fr}}
.wsc{padding:20px 20px 8px;border-left:1px solid var(--line)}
.wsc:first-child{border-left:none}
@media (max-width:760px){.wsc{border-left:none;border-top:1px solid var(--line)}
  .wsc:first-child{border-top:none}}
.wsk{display:flex;align-items:center;gap:9px;font-family:"Geist Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.wsk svg{width:15px;height:15px;color:var(--brand);flex:0 0 auto}
.wsr{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px}
.wsr:first-of-type{border-top:none}
.wsr .t{font-family:"Geist Mono",monospace;font-size:12px;color:var(--ink-3);flex:0 0 auto;min-width:48px}
.wsr .e{color:var(--ink);min-width:0}

/* ===================================================================
   THE MACHINE
   Every action walks the same six steps. Drawn as a single rail with
   nodes so it reads as a mechanism, not as a list of features in a box.
   State colour is the only colour: green allowed, amber waiting, red stop.
   =================================================================== */
.machine{margin-top:48px;max-width:760px}
.mstep{display:grid;grid-template-columns:22px 1fr auto;gap:20px;align-items:center;
  padding:15px 0;position:relative}
.mstep::after{content:"";position:absolute;left:10.5px;top:50%;width:1px;height:100%;
  background:var(--line-2)}
.mstep:last-child::after{display:none}
.mstep .node{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line-2);
  background:var(--paper);position:relative;z-index:1}
.mstep .lbl{min-width:0}
.mstep .lbl .t{font-size:17px;font-weight:600;letter-spacing:-.015em}
.mstep .lbl .d{font-size:14.5px;color:var(--ink-2);margin-top:2px}
.mstep .st{font-family:"Geist Mono",monospace;font-size:12px;color:var(--ink-3);
  white-space:nowrap;text-align:right}
.mstep.ok .node{border-color:var(--allow);background:var(--allow)}
.mstep.ok .st{color:var(--allow)}
.mstep.stop .node{border-color:var(--block);background:var(--block)}
.mstep.stop .st{color:var(--block)}
.mstep.stop .lbl .t{color:var(--block)}
.mstep.hold .node{border-color:var(--wait);background:var(--wait)}
.mstep.hold .st{color:var(--wait)}
.mstep.hold .lbl .t{color:var(--wait)}
.mstep.done .node{border-color:var(--ink);background:var(--ink)}
.machine-ask{padding-bottom:22px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.machine-ask .q{font-size:19px;letter-spacing:-.015em}
.machine-ask .who{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
@media (prefers-reduced-motion:no-preference){
  .js .machine .mstep{opacity:0}
  .machine.in .mstep{animation:wIn .38s var(--ease) both;animation-delay:calc(var(--i)*.11s + .1s)}
}
@media (max-width:520px){
  .mstep{grid-template-columns:22px 1fr;gap:14px}
  .mstep .st{grid-column:2;text-align:left;margin-top:2px}
}

/* ===================================================================
   SCALE   1 -> 5 -> 20 -> 100
   The number grows down the list. That growth is the whole argument, so
   it is carried by type size, not by four equally sized boxes.
   =================================================================== */
.scale{margin-top:48px}
.sc{display:grid;grid-template-columns:minmax(140px,.35fr) 1fr;gap:32px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--line)}
.sc:first-child{border-top:none}
.sc .n{font-weight:600;letter-spacing:-.045em;line-height:.9;color:var(--ink)}
.sc .u{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-top:10px}
.sc .q{font-size:clamp(18px,2.1vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.sc .q em{font-style:normal;color:var(--ink-3);font-weight:400;display:block;
  font-size:15.5px;letter-spacing:0;margin-top:8px}
.sc:nth-child(1) .n{font-size:clamp(34px,4vw,46px)}
.sc:nth-child(2) .n{font-size:clamp(42px,5.4vw,64px)}
.sc:nth-child(3) .n{font-size:clamp(52px,7vw,86px)}
.sc:nth-child(4) .n{font-size:clamp(62px,9vw,112px);color:var(--brand)}
.sc:nth-child(1) .q{color:var(--ink-3);font-weight:400}
@media (max-width:640px){
  .sc{grid-template-columns:1fr;gap:12px}
  .sc .u{margin-top:4px}
}

/* ===================================================================
   THE WORKFORCE
   One diagram carries the whole idea: a band of things everyone shares,
   a hard line, and below it the things that never cross it. The line is
   the point, so it is the heaviest mark on the page.
   =================================================================== */
.wforce{margin-top:52px}
.wf-band{padding:0 0 22px}
.wf-k{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.wf-shared{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:16.5px;color:var(--ink)}
.wf-shared span{display:inline-flex;align-items:center;gap:9px}
.wf-shared span::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--ink-3);flex:0 0 auto}
.wf-line{position:relative;height:2px;background:var(--ink);margin:4px 0 0}
.wf-line b{position:absolute;left:0;top:50%;transform:translateY(-50%);
  background:var(--paper);padding-right:16px;
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);font-weight:400}
.tint .wf-line b{background:var(--paper-2)}
.wf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px}
@media (max-width:820px){.wf-cols{grid-template-columns:1fr 1fr;gap:28px 0}}
@media (max-width:460px){.wf-cols{grid-template-columns:1fr}}
.wf-col{padding:0 22px;border-left:1px solid var(--line)}
.wf-col:first-child{padding-left:0;border-left:none}
@media (max-width:820px){
  .wf-col:nth-child(odd){padding-left:0;border-left:none}
}
@media (max-width:460px){.wf-col{padding-left:0;border-left:none}}
.wf-col .nm{font-size:17px;font-weight:600;letter-spacing:-.018em}
.wf-col .rl{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:3px 0 14px}
.wf-col li{font-size:14.5px;color:var(--ink-2);padding:5px 0}
.wf-col li b{color:var(--ink);font-weight:500}

/* ===================================================================
   SHADOW -> SUPERVISED -> LIVE
   Onboarding, drawn as a rail the employee moves along.
   =================================================================== */
.ramp{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px;position:relative}
@media (max-width:820px){.ramp{grid-template-columns:1fr}}
.rmp{padding:30px 26px 0 0;position:relative;border-top:1px solid var(--line)}
.rmp:last-child{padding-right:0}
.rmp.now{border-top:2px solid var(--ink)}
.rmp::before{content:"";position:absolute;top:-5.5px;left:0;width:9px;height:9px;
  border-radius:50%;background:var(--paper);border:1.5px solid var(--line-2)}
.tint .rmp::before{background:var(--paper-2)}
.rmp.now::before{background:var(--ink);border-color:var(--ink);top:-6px}
@media (max-width:820px){
  .rmp{padding:26px 0 0}
  .rmp+.rmp{margin-top:10px}
}
.rmp .rk{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.rmp.now .rk{color:var(--ink)}
.rmp .rt{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.022em;margin-bottom:8px}
.rmp .rd{font-size:15px;color:var(--ink-2);line-height:1.5;max-width:32ch}

/* ===================================================================
   THE EQUATION: brain + employee layer = AI employee
   =================================================================== */
.eq{display:grid;grid-template-columns:1fr 26px 1.5fr 26px 1fr;align-items:center;
  gap:0;margin-top:44px}
@media (max-width:880px){.eq{grid-template-columns:1fr}}
.eqb{border:1px solid var(--line);border-radius:var(--r-pan);background:var(--paper);
  padding:22px 20px;min-height:100%}
.eqb.out{border-color:var(--ink);background:var(--paper-2)}
.eqb .ek{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.eqb .et{font-size:18px;font-weight:600;letter-spacing:-.018em;margin-bottom:6px}
.eqb .ed{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.eqb .elist{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.eqb .elist span{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px}
.eq-op{display:flex;align-items:center;justify-content:center;
  font-family:"Geist Mono",monospace;font-size:16px;color:var(--ink-3)}
@media (max-width:880px){.eq-op{height:36px}}

/* every new grid needs this too, for the same reason as the list above */
.cols-4>*,.around>*,.ring>*,.ws>*,.scale>*,.tree-row>*,.split2>*,.ramp>*,.eq>*,.cost>*,.rh-row>*{min-width:0}

/* RESOURCE HEALTH BOARD (operators) - a resource's health is its own thing,
   shown apart from agent status. Neutral by default; red only when a broken
   resource genuinely blocks the employee (consistent with red = blocked). */
.rhealth{margin-top:36px;border:1px solid var(--line);border-radius:var(--r-pan);
  overflow:hidden;background:var(--paper)}
.rh-row{display:grid;grid-template-columns:1.7fr 1fr .8fr auto;gap:16px;align-items:center;
  padding:15px 18px;border-top:1px solid var(--line)}
.rh-row:first-child{border-top:0}
.rh-name{display:flex;align-items:center;gap:12px}
.rh-ic{width:34px;height:34px;border-radius:8px;background:var(--paper-3);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.rh-ic svg{width:18px;height:18px}
.rh-name .t{font-weight:600;font-size:15px;letter-spacing:-.01em}
.rh-name .d{font-family:"Geist Mono",monospace;font-size:11px;color:var(--ink-3);margin-top:2px}
.rh-use{font-size:13px;color:var(--ink-2)}
.rh-cost{font-family:"Geist Mono",monospace;font-size:14px;font-weight:500;white-space:nowrap}
.rh-cost small{color:var(--ink-3);font-weight:400;font-size:11px}
.rh-off{opacity:.6}
@media (max-width:720px){
  .rh-row{grid-template-columns:1fr auto;gap:6px 14px;padding:14px 16px}
  .rh-name{grid-column:1 / -1}
  .rh-use{grid-column:1;justify-self:start}
  .rh-cost{grid-column:2;justify-self:end}
  .rh-row .pill{grid-column:1 / -1;justify-self:start;margin-top:6px}
}


/* THE ECONOMICS BEAT (home) - one employee's day + the workforce roll-up.
   Neutral colours only: cost is data, not an authority state. */
.cost{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-top:40px;align-items:start}
@media (max-width:820px){.cost{grid-template-columns:1fr}}
.cost-emp,.cost-wf{padding:22px 20px}
.cost .cost-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.cost .nm{font-weight:600;font-size:16px;letter-spacing:-.012em}
.cost .rl{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.cost-today{text-align:right;white-space:nowrap}
.cost-today .k{display:block;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.cost-today .v{font-family:"Geist Mono",monospace;font-size:20px;font-weight:600;letter-spacing:-.02em}
.cost-today .v small{color:var(--ink-3);font-size:12px;font-weight:400}
.cost-bd{list-style:none;margin:20px 0 0;padding:0}
.cost-bd li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.cost-bd li:first-child{border-top:0}
.cost-bd .a{font-family:"Geist Mono",monospace;font-weight:500;letter-spacing:-.01em}
.cost-big{font-family:"Geist Mono",monospace;font-size:clamp(28px,4vw,36px);font-weight:600;
  letter-spacing:-.03em;margin:2px 0 18px}
.cost-big small{font-size:14px;color:var(--ink-3);font-weight:400;letter-spacing:0}
.cost-lbl{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.cost-by{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cost-by .k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.05em;color:var(--ink-2);
  background:var(--paper-3);padding:6px 10px;border-radius:6px}
.cost-note{margin-top:18px;font-size:13px;color:var(--ink-3);line-height:1.5}

/* WAITLIST CONSENT NOTICE + LEGAL PAGES + FOOTER LEGAL ROW */
.form-consent{font-size:12.5px;line-height:1.5;color:var(--ink-3);margin:2px 0 0}
.form-consent a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.form-consent a:hover{color:var(--ink)}

.legal{max-width:760px}
.legal .updated{font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.legal h2{font-size:19px;letter-spacing:-.015em;margin:36px 0 8px}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{font-size:15px;line-height:1.65;color:var(--ink-2)}
.legal p{margin:10px 0}
.legal ul{margin:10px 0;padding-left:20px}
.legal li{margin:7px 0}
.legal a{color:var(--brand)}
.legal strong{color:var(--ink)}

.foot-legal{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3);display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center}
.foot-legal a{color:var(--ink-3)}
.foot-legal a:hover{color:var(--ink)}
.foot-legal .sep{color:var(--line-2)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .bar i{width:var(--w)}
  .spam .m,.trip{opacity:1}
  .frail .dot{opacity:0}
  .assemble .w-top,.assemble .w-group,.assemble .w-foot{opacity:1}
  .assemble .w-state .s1{opacity:0}
  .assemble .w-state .s2{opacity:1}
  .around .rc,.gate .gc{opacity:1;transform:none}
}