@charset "utf-8";
/* Antigravity IDE Guide — slab.css
   Concrete ground, hard slab elevation. Elevation is a solid offset in the ink
   colour, never a blur. Square corners throughout. Safety orange keys state;
   green and amber carry meaning only. */

/* ---------------------------------------------------------------- faces -- */
@font-face{font-family:"Plate";src:url("../fonts/plate.woff2") format("woff2");
  font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Read";src:url("../fonts/read.woff2") format("woff2");
  font-weight:1 499;font-style:normal;font-display:swap}
@font-face{font-family:"Read";src:url("../fonts/read700.woff2") format("woff2");
  font-weight:500 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Read";src:url("../fonts/readi.woff2") format("woff2");
  font-weight:1 499;font-style:italic;font-display:swap}
@font-face{font-family:"Gauge";src:url("../fonts/gauge.woff2") format("woff2");
  font-weight:1 499;font-style:normal;font-display:swap}
@font-face{font-family:"Gauge";src:url("../fonts/gauge700.woff2") format("woff2");
  font-weight:500 1000;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- tokens -- */
:root{
  color-scheme:light;
  --slab:#C9C7C2;        /* poured ground */
  --slab-2:#D8D6D1;      /* raised plate */
  --slab-3:#B6B4AE;      /* recessed channel */
  --slab-4:#E3E1DC;      /* lit face */
  --mark:#191A18;        /* ink */
  --mark-2:#4E504B;
  --mark-3:#6E706A;
  --rule:#9A9892;
  --rule-2:#B0AEA8;
  --key:#D8440A;         /* safety orange */
  --key-2:#A93307;
  --key-on:#FFF6F1;      /* ink on key */
  --key-wash:rgba(216,68,10,.10);
  --ok:#1C6437;
  --ok-wash:rgba(28,100,55,.12);
  --warn:#8A5C00;
  --warn-wash:rgba(138,92,0,.13);
  --deep:#141614;        /* the end band, both themes */
  --deep-2:#1F221F;
  --deep-ink:#E9E7E1;
  --deep-ink-2:#A6A69E;
  --deep-rule:#34382F;

  --f-plate:"Plate",ui-sans-serif,"Segoe UI",system-ui,sans-serif;
  --f-read:"Read",Georgia,"Times New Roman",serif;
  --f-gauge:"Gauge",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --lift:4px;            /* hard offset elevation */
  --hair:2px;            /* stencil rule */
  --gut:clamp(1.15rem,4vw,2.75rem);
  --rail-w:15rem;
  --run-w:46rem;
  --band-y:clamp(3.75rem,7vw,6.5rem);
  --stack:clamp(1.75rem,3.4vw,2.75rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,1,.36,1);
  --t1:150ms;--t2:260ms;--t3:520ms;--t4:760ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --slab:#181A19; --slab-2:#212422; --slab-3:#0F1110; --slab-4:#2A2E2B;
    --mark:#EDEBE6; --mark-2:#ADAEA6; --mark-3:#8B8D85;
    --rule:#3B3F3B; --rule-2:#2C302C;
    --key:#FF6A22; --key-2:#FF8A4E; --key-on:#1A0C05;
    --key-wash:rgba(255,106,34,.13);
    --ok:#59CE86; --ok-wash:rgba(89,206,134,.13);
    --warn:#FFC24A; --warn-wash:rgba(255,194,74,.13);
    --deep:#0C0E0C; --deep-2:#151815; --deep-ink:#EDEBE6;
    --deep-ink-2:#9FA098; --deep-rule:#2C302B;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --slab:#181A19; --slab-2:#212422; --slab-3:#0F1110; --slab-4:#2A2E2B;
  --mark:#EDEBE6; --mark-2:#ADAEA6; --mark-3:#8B8D85;
  --rule:#3B3F3B; --rule-2:#2C302C;
  --key:#FF6A22; --key-2:#FF8A4E; --key-on:#1A0C05;
  --key-wash:rgba(255,106,34,.13);
  --ok:#59CE86; --ok-wash:rgba(89,206,134,.13);
  --warn:#FFC24A; --warn-wash:rgba(255,194,74,.13);
  --deep:#0C0E0C; --deep-2:#151815; --deep-ink:#EDEBE6;
  --deep-ink-2:#9FA098; --deep-rule:#2C302B;
}

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--slab);color:var(--mark);
  font-family:var(--f-read);font-size:clamp(1.0625rem,.35vw + 1rem,1.125rem);
  line-height:1.66;letter-spacing:.001em;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-plate);font-weight:400;
  letter-spacing:.012em;line-height:1.05;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--key);outline-offset:3px}
::selection{background:var(--key);color:var(--key-on)}
.ic{width:22px;height:22px;display:block;flex:none}
.ic--sm{width:16px;height:16px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--key);color:var(--key-on);padding:.7rem 1.1rem;
  font-family:var(--f-gauge);font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}

/* ---------------------------------------------------------- shared bits -- */
.kick{font-family:var(--f-gauge);font-size:.7rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--key);
  display:block;margin:0 0 .55rem}
.num{font-family:var(--f-gauge);font-variant-numeric:tabular-nums}
.dateline{font-family:var(--f-gauge);font-size:.72rem;letter-spacing:.08em;
  color:var(--mark-3);text-transform:uppercase}
.src{font-family:var(--f-gauge);font-size:.74rem;line-height:1.5;
  color:var(--mark-3)}
.src a{color:var(--mark-2);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.src a:hover{color:var(--key)}
.lede{font-size:clamp(1.15rem,.55vw + 1.02rem,1.34rem);line-height:1.52;
  color:var(--mark-2)}
.prose p + p{margin-top:1rem}
.prose a{color:var(--mark);text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:var(--key)}
.prose a:hover{color:var(--key)}

/* the hard-slab surface */
.face{background:var(--slab-2);border:var(--hair) solid var(--mark);
  box-shadow:var(--lift) var(--lift) 0 var(--mark)}
.face--flat{box-shadow:none}
.face--lit{background:var(--slab-4)}

/* ---------------------------------------------------------------- chrome -- */
.topbar{position:sticky;top:0;z-index:40;background:var(--slab);
  border-bottom:var(--hair) solid var(--mark)}
.topbar__in{display:flex;align-items:center;gap:1rem;min-width:0;
  padding:.55rem var(--gut);max-width:82rem;margin:0 auto}
.wordmark{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  min-width:0;flex:none}
.wordmark__glyph{width:30px;height:30px;display:grid;place-items:center;
  background:var(--key);color:var(--key-on);flex:none}
.wordmark__glyph svg{width:19px;height:19px}
.wordmark__text{font-family:var(--f-plate);font-size:1.02rem;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.wordmark__text b{font-weight:400;color:var(--key)}
.topbar__nav{display:flex;gap:.15rem;margin-left:auto;min-width:0}
.barlink{font-family:var(--f-gauge);font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--mark-2);
  padding:.5rem .7rem;transition:color var(--t1) var(--ease),
  background var(--t1) var(--ease)}
.barlink:hover{color:var(--mark);background:var(--slab-3)}
.barlink[aria-current]{color:var(--key);box-shadow:inset 0 -3px 0 var(--key)}
.topbar__tools{display:flex;gap:.4rem;align-items:center;flex:none}
.tglass,.opener{font-family:var(--f-gauge);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--slab-2);color:var(--mark);
  border:var(--hair) solid var(--mark);cursor:pointer;display:flex;
  align-items:center;gap:.4rem;padding:.42rem .6rem;
  transition:background var(--t1) var(--ease),color var(--t1) var(--ease),
  transform var(--t1) var(--ease)}
.tglass{padding:.42rem}
.tglass:hover,.opener:hover{background:var(--key);color:var(--key-on)}
.tglass:active,.opener:active{transform:translate(2px,2px)}
.tglass__i--moon{display:none}
:root[data-theme="dark"] .tglass__i--sun{display:none}
:root[data-theme="dark"] .tglass__i--moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tglass__i--sun{display:none}
  :root:not([data-theme="light"]) .tglass__i--moon{display:block}
}
.topbar__note{font-family:var(--f-gauge);font-size:.685rem;letter-spacing:.075em;
  color:var(--mark-3);text-align:center;padding:.3rem var(--gut);
  border-top:1px solid var(--rule-2);background:var(--slab-3)}
@media (max-width:63.99em){
  .topbar__nav{display:none}
}
@media (max-width:26em){
  .wordmark__text{font-size:.9rem}
  .opener__t{display:none}
}

/* mega reveal — full-width panel */
.mega{position:fixed;inset:0;z-index:60;background:var(--slab);
  overflow-y:auto;overscroll-behavior:contain}
.mega[hidden]{display:none}
.js .mega{opacity:0;transform:translateY(-1.5rem);
  transition:opacity var(--t2) var(--ease),transform var(--t3) var(--ease)}
.js .mega.is-on{opacity:1;transform:none}
.mega__in{max-width:82rem;margin:0 auto;padding:1.1rem var(--gut) 3rem}
.mega__head{display:flex;align-items:center;justify-content:space-between;
  border-bottom:var(--hair) solid var(--mark);padding-bottom:.9rem}
.mega__label{font-family:var(--f-gauge);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mark-3)}
.mega__close{display:flex;align-items:center;gap:.45rem;cursor:pointer;
  font-family:var(--f-gauge);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--slab-2);color:var(--mark);
  border:var(--hair) solid var(--mark);padding:.42rem .6rem}
.mega__close:hover{background:var(--key);color:var(--key-on)}
.mega__nav{display:grid;gap:0;margin:0 0 2rem}
.megalink{display:grid;grid-template-columns:3.6rem 1fr;align-items:baseline;
  gap:1rem;text-decoration:none;padding:.95rem .3rem;
  border-bottom:1px solid var(--rule-2);
  transition:background var(--t1) var(--ease),padding-left var(--t2) var(--ease)}
.megalink:hover{background:var(--slab-2);padding-left:1rem}
.megalink__n{font-family:var(--f-gauge);font-size:.8rem;color:var(--mark-3);
  font-variant-numeric:tabular-nums}
.megalink__t{font-family:var(--f-plate);font-size:clamp(1.6rem,4.5vw,2.5rem);
  letter-spacing:.02em}
.megalink[aria-current] .megalink__t{color:var(--key)}
.megalink[aria-current] .megalink__n{color:var(--key)}
.mega__foot{display:grid;gap:1rem;max-width:44rem}
.mega__state{font-size:.9rem;color:var(--mark-2);line-height:1.55}
.mega__minor{display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.megaminor{font-family:var(--f-gauge);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mark-3);text-decoration:none}
.megaminor:hover{color:var(--key)}
.mega__ext{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-gauge);font-size:.78rem;letter-spacing:.06em;
  color:var(--mark);text-decoration:none;border-bottom:var(--hair) solid var(--key);
  padding-bottom:.2rem;justify-self:start}
.mega__ext:hover{color:var(--key)}

/* ---------------------------------------------------- bands & two track -- */
.band{padding:var(--band-y) 0;border-bottom:var(--hair) solid var(--mark)}
.band--tint{background:var(--slab-3)}
.band__in{max-width:82rem;margin:0 auto;padding:0 var(--gut)}

/* the canvas model: a narrow instrument rail and a wide reading track,
   scrolling at their own rhythms. */
.track{display:grid;gap:var(--stack) clamp(1.5rem,3vw,3rem);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:64em){
  .track{grid-template-columns:minmax(0,var(--rail-w)) minmax(0,var(--run-w));
    align-items:start}
  .track--wide{grid-template-columns:minmax(0,var(--rail-w)) minmax(0,1fr)}
  .rail{position:sticky;top:6.4rem}
  .rail--loose{position:static}
}
.run{min-width:0;display:grid;gap:var(--stack)}
/* Grid items default to min-width:auto and will not shrink below their content.
   Without this the tab strip pushes the whole document sideways on a phone. */
.track > *,.run > *,.rail > *,.pin > *{min-width:0}
.rail{min-width:0;display:grid;gap:.9rem;align-content:start}
.rail__t{font-family:var(--f-gauge);font-size:.72rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--mark-3);
  border-bottom:var(--hair) solid var(--mark);padding-bottom:.5rem}
.rail__note{font-size:.86rem;line-height:1.55;color:var(--mark-2)}
.rail__stat{display:grid;gap:.15rem;padding:.65rem 0;
  border-bottom:1px solid var(--rule-2)}
.rail__stat b{font-family:var(--f-gauge);font-size:1.5rem;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.01em}
.rail__stat span{font-family:var(--f-gauge);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mark-3)}

/* section head is inline with the first item — no separate header stack */
.plate{position:relative;background:var(--slab-2);
  border:var(--hair) solid var(--mark);
  box-shadow:var(--lift) var(--lift) 0 var(--mark);
  padding:clamp(1.15rem,2.4vw,1.8rem)}
.plate--lead{background:var(--slab-4)}
.plate__tag{display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-gauge);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--key);margin-bottom:.7rem}
.plate__tag::after{content:"";height:2px;background:var(--key);flex:1}
.plate__h{font-size:clamp(1.45rem,2.6vw,2rem);margin-bottom:.7rem}
.plate__p{color:var(--mark-2);line-height:1.6}
.plate__p + .plate__p{margin-top:.8rem}
.plate__n{position:absolute;top:calc(var(--hair) * -1);right:-2px;
  font-family:var(--f-gauge);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  background:var(--mark);color:var(--slab);padding:.24rem .5rem}

/* -------------------------------------------------------------- 1 hook -- */
.hook{padding:clamp(2.5rem,5.5vw,4.5rem) 0 var(--band-y)}
.hook__h{font-size:clamp(2.35rem,6.4vw,4.4rem);line-height:1.02;
  letter-spacing:.008em;margin-bottom:1.1rem}
.hook__h em{font-style:normal;color:var(--key)}
.hook__p{max-width:34rem}
.hook__meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.4rem;
  align-items:center}
.chip{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-gauge);font-size:.71rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--slab-2);color:var(--mark-2);
  border:1px solid var(--rule);padding:.32rem .55rem}
.chip--ok{color:var(--ok);border-color:currentColor;background:var(--ok-wash)}
.chip--key{color:var(--key);border-color:currentColor;background:var(--key-wash)}
.textlink{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-gauge);font-size:.8rem;letter-spacing:.04em;
  color:var(--mark);text-decoration:none;
  border-bottom:var(--hair) solid var(--key);padding-bottom:.15rem;
  transition:color var(--t1) var(--ease)}
.textlink:hover{color:var(--key)}

/* the working bench: pick a model, the plate and gauges re-key */
.bench{border:var(--hair) solid var(--mark);background:var(--slab-2);
  box-shadow:var(--lift) var(--lift) 0 var(--mark)}
.bench__bar{display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.5rem .8rem;background:var(--mark);color:var(--slab);
  font-family:var(--f-gauge);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase}
.bench__bar span:last-child{color:var(--rule-2)}
.tabs{position:relative;display:flex;overflow-x:auto;scrollbar-width:thin;
  border-bottom:var(--hair) solid var(--mark);background:var(--slab-3)}
.tab{position:relative;z-index:1;flex:none;cursor:pointer;background:none;
  border:0;padding:.72rem .95rem;font-family:var(--f-gauge);font-size:.75rem;
  letter-spacing:.08em;color:var(--mark-2);white-space:nowrap;
  transition:color var(--t1) var(--ease)}
.tab:hover{color:var(--mark)}
.tab[aria-selected="true"]{color:var(--key-on)}
.tabs__ind{position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--key);z-index:0;pointer-events:none}
.js .tabs__ind{transition:transform var(--t2) var(--ease-2),
  width var(--t2) var(--ease-2)}
.bench__body{padding:clamp(1rem,2.2vw,1.5rem);display:grid;gap:1.1rem}
.bench__top{display:grid;gap:.5rem}
.bench__name{font-family:var(--f-plate);font-size:clamp(1.35rem,3vw,1.85rem)}
.bench__note{font-size:.92rem;color:var(--mark-2);line-height:1.55;
  min-height:3.1em}
.meters{display:grid;gap:.75rem}
.meter{display:grid;grid-template-columns:6.4rem 1fr 3.2rem;gap:.7rem;
  align-items:center}
.meter__k{font-family:var(--f-gauge);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mark-3)}
.meter__t{position:relative;height:14px;background:var(--slab-3);
  border:1px solid var(--rule);overflow:hidden}
.meter__f{position:absolute;inset:0 auto 0 0;width:0;background:var(--key);
  transform-origin:left center}
.js .meter__f{transition:width var(--t3) var(--ease-2)}
.meter__f--ok{background:var(--ok)}
.meter__f--warn{background:var(--warn)}
.meter__v{font-family:var(--f-gauge);font-size:.82rem;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right}
.bench__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:0;border:1px solid var(--rule)}
.bench__cell{padding:.7rem .8rem;border-right:1px solid var(--rule);
  display:grid;gap:.15rem}
.bench__cell:last-child{border-right:0}
.bench__cell dt{font-family:var(--f-gauge);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mark-3)}
.bench__cell dd{margin:0;font-family:var(--f-gauge);font-size:.95rem;
  font-weight:600;font-variant-numeric:tabular-nums}
.bench__foot{font-family:var(--f-gauge);font-size:.71rem;line-height:1.5;
  color:var(--mark-3);border-top:1px solid var(--rule-2);padding-top:.7rem}
@media (max-width:30em){
  .meter{grid-template-columns:1fr 3rem;grid-template-areas:"k v" "t t"}
  .meter__k{grid-area:k}.meter__v{grid-area:v}.meter__t{grid-area:t}
}

/* --------------------------------------------------------- 2 catalogue -- */
.rails{display:grid;gap:var(--stack)}
.railgrp{border-top:var(--hair) solid var(--mark)}
.railgrp__h{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 0 1rem}
.railgrp__l{font-family:var(--f-gauge);font-size:1.5rem;font-weight:600;
  color:var(--key);line-height:1;flex:none}
.railgrp__t{font-family:var(--f-plate);font-size:clamp(1.15rem,2vw,1.4rem)}
.railgrp__c{font-family:var(--f-gauge);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mark-3);margin-left:auto;flex:none}
.items{display:grid;gap:0;border-left:var(--hair) solid var(--mark)}
.item{display:grid;grid-template-columns:auto 1fr;gap:.85rem;
  padding:.9rem 1rem;border-bottom:1px solid var(--rule-2);
  background:var(--slab-2);
  transition:background var(--t1) var(--ease),transform var(--t2) var(--ease)}
.item:last-child{border-bottom:0}
.item:hover{background:var(--slab-4);transform:translateX(4px)}
.item__i{color:var(--key);padding-top:.15rem}
.item__b{min-width:0}
.item__t{font-family:var(--f-plate);font-size:1.12rem;letter-spacing:.02em;
  margin-bottom:.2rem}
.item__d{font-size:.92rem;line-height:1.55;color:var(--mark-2)}
.item__d code{font-family:var(--f-gauge);font-size:.85em;background:var(--slab-3);
  padding:.05em .3em;border:1px solid var(--rule-2)}

/* ------------------------------------------------------------ 3 detail -- */
.idx{display:grid;gap:0;border:var(--hair) solid var(--mark);
  box-shadow:var(--lift) var(--lift) 0 var(--mark);background:var(--slab-2)}
.idx__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:0;border-bottom:1px solid var(--rule)}
.idx__row:last-child{border-bottom:0}
.idx__row--head{background:var(--mark);color:var(--slab)}
.idx__row--head .idx__a,.idx__row--head .idx__b{
  font-family:var(--f-gauge);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;padding-top:.5rem;padding-bottom:.5rem}
.idx__a,.idx__b{padding:.85rem 1rem;min-width:0}
.idx__a{border-right:1px solid var(--rule)}
.idx__row--head .idx__a{border-right-color:var(--mark-3)}
.idx__n{font-family:var(--f-plate);font-size:1.05rem;letter-spacing:.02em;
  display:block}
.idx__s{font-family:var(--f-gauge);font-size:.7rem;letter-spacing:.09em;
  color:var(--mark-3);text-transform:uppercase;display:block;margin-top:.15rem}
.idx__b{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center;
  align-content:center}
.tag{font-family:var(--f-gauge);font-size:.7rem;letter-spacing:.07em;
  border:1px solid var(--rule);padding:.2rem .45rem;color:var(--mark-2);
  white-space:nowrap;max-width:100%}
/* Long descriptive cells wrap; short status chips stay on one line. */
.tag--wrap{white-space:normal;line-height:1.5;font-size:.76rem}
.tag--ok{color:var(--ok);border-color:currentColor;background:var(--ok-wash)}
.tag--warn{color:var(--warn);border-color:currentColor;background:var(--warn-wash)}
.tag--key{color:var(--key);border-color:currentColor;background:var(--key-wash)}
@media (max-width:34em){
  .idx__row{grid-template-columns:minmax(0,1fr)}
  .idx__a{border-right:0;border-bottom:1px solid var(--rule-2);padding-bottom:.5rem}
  .idx__b{padding-top:.5rem}
  .idx__row--head{display:none}
}

/* ----------------------------------------------------------- 4 explain -- */
.pin{display:grid;gap:1.5rem}
@media (min-width:64em){
  .pin{grid-template-columns:minmax(0,20rem) minmax(0,1fr);
    gap:clamp(2rem,4vw,4rem);align-items:start}
  .pin__head{position:sticky;top:7rem}
}
.pin__h{font-size:clamp(1.75rem,3.6vw,2.6rem);margin-bottom:.8rem}
.pin__p{color:var(--mark-2);line-height:1.6}
.seq{display:grid;gap:0;counter-reset:none}
.step{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;
  padding:1.15rem 0;border-top:var(--hair) solid var(--mark)}
.step:last-child{border-bottom:var(--hair) solid var(--mark)}
.step__n{font-family:var(--f-gauge);font-size:.78rem;font-weight:600;
  letter-spacing:.06em;color:var(--key-on);background:var(--key);
  width:2.1rem;height:2.1rem;display:grid;place-items:center;
  font-variant-numeric:tabular-nums}
.step__t{font-family:var(--f-plate);font-size:1.25rem;letter-spacing:.02em;
  margin-bottom:.35rem}
.step__d{color:var(--mark-2);line-height:1.6}
.step__d code{font-family:var(--f-gauge);font-size:.86em;background:var(--slab-3);
  padding:.06em .32em;border:1px solid var(--rule-2)}
.step__x{margin-top:.55rem;font-family:var(--f-gauge);font-size:.76rem;
  line-height:1.5;color:var(--mark-3);border-left:var(--hair) solid var(--rule);
  padding-left:.7rem}

/* ------------------------------------------------------------- 5 proof -- */
.ba{display:grid;gap:0;border:var(--hair) solid var(--mark);
  box-shadow:var(--lift) var(--lift) 0 var(--mark);background:var(--slab-2)}
.ba__head{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem 6.5rem;
  background:var(--mark);color:var(--slab);
  font-family:var(--f-gauge);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase}
.ba__head > *{padding:.55rem .8rem}
.ba__head > :first-child{text-align:left}
.ba__head > :not(:first-child){text-align:right}
.ba__row{padding:.95rem 1rem;border-bottom:1px solid var(--rule)}
.ba__row:last-child{border-bottom:0}
.ba__top{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem 6.5rem;
  align-items:baseline;gap:.4rem}
.ba__k{font-family:var(--f-plate);font-size:1.05rem;letter-spacing:.02em}
.ba__old,.ba__new{font-family:var(--f-gauge);font-variant-numeric:tabular-nums;
  text-align:right;font-size:1rem}
.ba__old{color:var(--mark-3)}
.ba__new{font-weight:600;color:var(--key)}
.ba__pair{display:grid;gap:5px;margin-top:.6rem}
.ba__t{position:relative;height:11px;background:var(--slab-3);
  border:1px solid var(--rule);overflow:hidden}
.ba__f{position:absolute;inset:0 auto 0 0;width:0}
.js .ba__f{transition:width var(--t4) var(--ease-2)}
.ba__f--old{background:var(--rule)}
.ba__f--new{background:var(--key)}
.ba__d{margin-top:.5rem;font-size:.88rem;color:var(--mark-2);line-height:1.55}
@media (max-width:34em){
  .ba__head{display:none}
  .ba__top{grid-template-columns:minmax(0,1fr) 4.4rem 4.4rem}
  .ba__k{font-size:.95rem}
}

/* ------------------------------------------- 6 end band (CTA + footer) -- */
.band--end{background:var(--deep);color:var(--deep-ink);border-bottom:0;
  border-top:var(--hair) solid var(--mark);
  padding:clamp(3.25rem,6vw,5.5rem) 0 2rem}
.end{display:grid;gap:clamp(2rem,4vw,3.25rem)}
.end__lead{max-width:44rem;display:grid;gap:.9rem}
.end__kick{font-family:var(--f-gauge);font-size:.7rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--key-2)}
.end__h{font-size:clamp(1.7rem,3.8vw,2.7rem);color:var(--deep-ink)}
.end__p{color:var(--deep-ink-2);line-height:1.62}
.end__hosts{font-family:var(--f-gauge);font-size:.82rem;line-height:1.6;
  color:var(--deep-ink);border-left:3px solid var(--key-2);padding-left:.85rem}
.end__ext{display:grid;gap:.5rem;margin-top:.4rem}
.end__ext li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .7rem}
.end__ext a{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-gauge);font-size:.85rem;color:var(--deep-ink);
  text-decoration:none;border-bottom:1px solid var(--key-2);padding-bottom:.1rem}
.end__ext a:hover{color:var(--key-2)}
.end__ext span{font-size:.85rem;color:var(--deep-ink-2)}
.end__cols{display:grid;gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  border-top:1px solid var(--deep-rule);padding-top:2rem}
.end__col--wide{grid-column:span 2;min-width:0}
@media (max-width:40em){.end__col--wide{grid-column:auto}}
.end__ch{font-family:var(--f-gauge);font-size:.68rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--deep-ink-2);margin-bottom:.75rem;
  font-weight:600}
.end__nav{display:grid;gap:.4rem}
.endlink{font-size:.95rem;color:var(--deep-ink);text-decoration:none;
  transition:color var(--t1) var(--ease)}
.endlink:hover{color:var(--key-2)}
.endlink--minor{color:var(--deep-ink-2);font-size:.9rem}
.endlink[aria-current]{color:var(--key-2)}
.end__contact a{font-family:var(--f-gauge);font-size:.88rem;color:var(--deep-ink);
  text-decoration:none;border-bottom:1px solid var(--key-2);word-break:break-word}
.end__contact a:hover{color:var(--key-2)}
.end__small{font-size:.85rem;line-height:1.55;color:var(--deep-ink-2);
  margin-top:.7rem}
.end__small--warn{display:flex;gap:.5rem;align-items:flex-start;
  color:var(--key-2)}
.end__small--warn svg{flex:none;margin-top:.15rem}
.end__rule{display:grid;gap:.45rem;border-top:1px solid var(--deep-rule);
  padding-top:1.4rem;font-family:var(--f-gauge);font-size:.72rem;
  line-height:1.6;color:var(--deep-ink-2)}
@media (min-width:56em){
  .end__rule{grid-template-columns:auto auto 1fr;gap:1.5rem;align-items:baseline}
}

/* -------------------------------------------------------- inner pages -- */
.phead{padding:clamp(2.25rem,5vw,3.75rem) 0 clamp(1.75rem,3.5vw,2.75rem);
  border-bottom:var(--hair) solid var(--mark)}
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;font-family:var(--f-gauge);
  font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mark-3);margin-bottom:1rem}
.crumb a{color:var(--mark-2);text-decoration:none}
.crumb a:hover{color:var(--key)}
.crumb span[aria-current]{color:var(--key)}
.phead__h{font-size:clamp(2rem,5.2vw,3.4rem);margin-bottom:.85rem}
.phead__p{max-width:38rem}
.phead__meta{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem .9rem}

/* legal / long-form documents */
.doc{display:grid;gap:1.6rem;max-width:44rem}
.doc h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:.55rem;
  padding-top:.5rem;border-top:var(--hair) solid var(--mark)}
.doc h3{font-family:var(--f-gauge);font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--key);margin:1.1rem 0 .4rem;font-weight:600}
.doc p{color:var(--mark-2);line-height:1.68}
.doc p + p{margin-top:.8rem}
.doc ul{display:grid;gap:.5rem;margin-top:.75rem}
.doc ul li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;
  color:var(--mark-2);line-height:1.6}
.doc ul li::before{content:"";width:.55rem;height:.55rem;background:var(--key);
  margin-top:.5rem}
.doc a{color:var(--mark);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:var(--key)}
.doc a:hover{color:var(--key)}
.doc__dates{display:flex;flex-wrap:wrap;gap:.5rem .9rem;
  border:var(--hair) solid var(--mark);background:var(--slab-2);
  padding:.7rem .9rem;font-family:var(--f-gauge);font-size:.74rem;
  letter-spacing:.06em;color:var(--mark-2)}
.doc__dates b{color:var(--mark);font-weight:600}

/* FAQ */
.qa{display:grid;gap:0;border-top:var(--hair) solid var(--mark)}
.qa__i{border-bottom:var(--hair) solid var(--mark);padding:1.3rem 0}
.qa__q{font-family:var(--f-plate);font-size:clamp(1.15rem,2.2vw,1.42rem);
  letter-spacing:.02em;margin-bottom:.6rem;display:grid;
  grid-template-columns:2.6rem 1fr;gap:.7rem;align-items:baseline}
.qa__q i{font-style:normal;font-family:var(--f-gauge);font-size:.78rem;
  color:var(--key);font-variant-numeric:tabular-nums}
.qa__a{padding-left:3.3rem;color:var(--mark-2);line-height:1.65}
.qa__a p + p{margin-top:.75rem}
.qa__a code{font-family:var(--f-gauge);font-size:.86em;background:var(--slab-3);
  padding:.06em .32em;border:1px solid var(--rule-2)}
@media (max-width:32em){
  .qa__q{grid-template-columns:1fr;gap:.2rem}
  .qa__a{padding-left:0}
}

/* callout */
.callout{border:var(--hair) solid var(--mark);background:var(--slab-2);
  padding:1rem 1.1rem;display:grid;grid-template-columns:auto 1fr;gap:.8rem}
.callout__i{color:var(--key)}
.callout__t{font-family:var(--f-gauge);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--key);margin-bottom:.35rem;font-weight:600}
.callout__b{font-size:.94rem;line-height:1.6;color:var(--mark-2)}
.callout__b a{color:var(--mark);text-decoration:underline;
  text-decoration-color:var(--key);text-underline-offset:3px}

/* 404 */
.gone{min-height:52vh;display:grid;align-content:center;gap:1.1rem;
  padding:var(--band-y) 0}
.gone__c{font-family:var(--f-gauge);font-size:clamp(3.5rem,12vw,7rem);
  font-weight:600;color:var(--key);line-height:1;letter-spacing:-.02em}

/* scroll-scrubbed lede */
.js [data-scrub] .sw{opacity:.18;transition:opacity 240ms linear}
.js [data-scrub] .sw.on{opacity:1}

/* word-mask headings — the signature */
.js [data-split]{visibility:hidden}
.js [data-split].ready{visibility:visible}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
.w > i{display:inline-block;font-style:inherit;transform:translateY(110%);
  will-change:transform}
.js [data-split].ready .w > i{transform:none;
  transition:transform 760ms var(--ease);transition-delay:var(--d,0ms)}

/* generic reveal */
.js [data-rise]{opacity:0;transform:translateY(22px)}
.js [data-rise].on{opacity:1;transform:none;
  transition:opacity 620ms var(--ease),transform 620ms var(--ease);
  transition-delay:var(--d,0ms)}

/* fixed grain — one layer, never on scrolling content */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.42;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .grain{mix-blend-mode:screen;opacity:.16}
}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.16}
.topbar,.mega,main,.band--end{position:relative;z-index:2}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-split]{visibility:visible}
  .js [data-split] .w > i,.w > i{transform:none!important}
  .js [data-rise]{opacity:1!important;transform:none!important}
  .js [data-scrub] .sw{opacity:1!important}
  .js .mega{opacity:1;transform:none}
  .item:hover,.megalink:hover{transform:none;padding-left:.3rem}
  .megalink:hover{padding-left:.3rem}
  .grain{display:none}
}
/* publisher block in the end band */
.end__addr{font-family:var(--f-gauge);font-size:.8rem;line-height:1.65;
  font-style:normal;color:var(--deep-ink-2);margin-top:.8rem}
.end__addr b{color:var(--deep-ink);font-weight:600;letter-spacing:.04em}
.end__addr span{display:inline-block;margin-top:.45rem}

@media print{
  .topbar,.mega,.grain,.tabs{display:none}
  body{background:#fff;color:#000}
}