/* ===========================================================================
   Design Stream — the public landing page (gallery/landing.html)
   ===========================================================================
   "The anatomy of exceptional digital design": a bound set of drafting
   plates. Cool paper with a ruled grid, white sheets with a 1px ink border,
   Archivo for display, IBM Plex Sans for reading and IBM Plex Mono for every
   measured value. One accent, blueprint blue, spent on dimension lines,
   filled buttons and plate numbers.

   Single, committed light theme — the page paints its own ground and never
   inherits the viewer's scheme. The library and admin pages default to their
   light theme for the same reason: the page you sign in FROM and the page
   you sign in TO should read as one product.

   Motion (the block near the end) exists only inside `.js`: the reveal start
   state, the exploded view's collapsed bands, the bars at scale 0. With
   scripting off, and under prefers-reduced-motion, every element sits in
   its final position and the contact strip scrolls by hand.
   ========================================================================= */
/* ---------- tokens ---------- */
:root{
  --paper:#EDEFF3; --sheet:#FAFBFC;
  --ink:#10131A; --ink-2:#4C5563; --ink-3:#6B7482;
  --rule:#C9CFD8; --rule-strong:#9AA3B1;
  --bp:#1F3BE6; --bp-2:#1730C0; --tint:rgba(31,59,230,.07);
  --grid-minor:rgba(16,19,26,.04); --grid-major:rgba(16,19,26,.09);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;color:var(--ink);
  font:400 16.5px/1.55 var(--body);
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,var(--grid-major) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-major) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-minor) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-minor) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,8px 8px,8px 8px;
}
img{max-width:100%}
a{color:var(--bp)}
:focus-visible{outline:2px solid var(--bp);outline-offset:3px}
.btn.fill:focus-visible{outline-color:var(--ink)}
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:12px 14px;background:var(--bp);color:#fff;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:2px}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ---------- type ---------- */
h1{font:700 clamp(2.8rem,6.2vw,5.2rem)/.98 var(--display);font-stretch:92%;letter-spacing:-.03em;margin:0 0 26px;text-wrap:balance}
h2{font:700 clamp(1.9rem,3.2vw,2.4rem)/1.08 var(--display);font-stretch:95%;letter-spacing:-.025em;margin:0 0 18px;max-width:22ch;text-wrap:balance}
.kicker{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp);margin:0 0 14px}
.intro{max-width:65ch;font-size:17px;margin:0 0 44px}
.mono{font-family:var(--mono)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:1px solid var(--bp);border-radius:2px;background:var(--sheet);color:var(--bp);font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--tint)}
.btn.fill{background:var(--bp);color:#fff}
.btn.fill:hover{background:var(--bp-2);border-color:var(--bp-2)}
.link{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{color:var(--bp-2)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:56px;background:rgba(237,239,243,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;
  background:
    repeating-linear-gradient(to right,var(--rule-strong) 0 1px,transparent 1px 64px) left top/100% 7px no-repeat,
    repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 8px) left bottom/100% 3px no-repeat}
.nav.stuck{border-bottom-color:var(--rule-strong)}
.nav-in{display:flex;align-items:center;gap:20px;height:100%}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:600 15px/1 var(--display);letter-spacing:-.01em}
.mark{display:inline-block;width:22px;height:22px;color:var(--ink)}
.mark svg{display:block;width:100%;height:100%}
.org{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:6px 8px;border:1px solid var(--rule-strong);border-radius:2px}
.org:hover{color:var(--bp);border-color:var(--bp)}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font:500 13.5px/1 var(--body);color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav-links a:hover{color:var(--bp);border-bottom-color:var(--bp)}
.nav-cta{display:flex;gap:8px}

/* ---------- plates ---------- */
.plate{position:relative;padding:72px 0;scroll-margin-top:64px}
.plate + .plate{border-top:1px solid var(--rule-strong)}
.head{position:relative}
.tb{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;margin:0 0 40px;border-left:1px solid var(--rule-strong);border-top:1px solid var(--rule-strong);background:var(--sheet);font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);position:relative;z-index:1}
.tb span{padding:9px 12px;border-right:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.tb .n{color:var(--bp);font-weight:500}
.tb .t{color:var(--ink);font-weight:500}
.wm{position:absolute;right:-4px;top:-18px;z-index:0;font:800 clamp(88px,12vw,168px)/1 var(--display);font-stretch:62%;letter-spacing:-.04em;color:var(--ink-3);opacity:.1;pointer-events:none;user-select:none}
.sheet{background:var(--sheet);border:1px solid var(--ink)}
.figcap{font:400 11.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--ink-2);margin:10px 0 0}

/* ---------- plate 01 hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start}
.lede{font-size:17.5px;max-width:65ch;margin:0 0 30px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.fineprint{font:400 12.5px/1.5 var(--mono);color:var(--ink-2);margin:0 0 6px;max-width:60ch}
.whoami{display:none;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 0;padding:10px 12px;border:1px solid var(--ink);background:var(--sheet);font:400 12.5px/1 var(--mono)}
.whoami.on{display:flex}
.badge{display:inline-flex;align-items:center;gap:8px;color:var(--ink);overflow-wrap:anywhere}
.badge svg{width:14px;height:14px;flex:none;color:var(--bp)}
.btn-link{background:none;border:0;padding:0;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.signed-in .when-out{display:none}
.yours{margin:18px 0 0;padding:18px 20px;border:1px solid var(--ink);background:var(--sheet)}
.yours-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:4px}
.yours h2{font-size:1.2rem;margin:0}
.yours .kicker{margin:0;color:var(--ink-2)}
.yours-list{list-style:none;margin:0;padding:0}
.yours-list li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--rule)}
.yours-list .name{font:600 1rem/1.3 var(--display);color:var(--bp);text-decoration:none}
.yours-list a.name:hover{text-decoration:underline}
.yours-list .meta{font:400 11.5px/1.5 var(--mono);color:var(--ink-3)}
.yours-empty{font-size:14.5px;color:var(--ink-2);margin:10px 0 0;max-width:52ch}
.spec{width:100%;border-collapse:collapse;margin:38px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.spec caption{text-align:left;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:0 0 8px}
.spec th{width:32%;text-align:left;font:400 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:14px 12px 14px 0;vertical-align:baseline}
.spec td{font:600 1.05rem/1.3 var(--display);padding:12px 0;vertical-align:baseline}
.spec td b{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin-right:6px}
.spec tr + tr{border-top:1px solid var(--rule)}

/* FIG. 1 */
.fig{margin:0;background:var(--sheet);border:1px solid var(--ink);padding:44px 24px 20px;box-shadow:1px 1px 0 var(--ink)}
.figin{position:relative}
.figbox{position:relative;aspect-ratio:720/342;outline:1px solid var(--rule)}
.figbox img{display:block;width:100%;height:auto}
.dims{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dims path,.dims circle{fill:none;stroke:var(--bp);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;animation:draw .9s ease-out both}
.dims circle{fill:var(--sheet)}
.dims .d2 *{animation-delay:.12s}
.dims .d3 *{animation-delay:.24s}
.dims .d4 *{animation-delay:.36s}
@keyframes draw{from{stroke-dashoffset:1}}
.labs{position:absolute;inset:0;container-type:inline-size;pointer-events:none}
.lab{position:absolute;display:inline-block;white-space:nowrap;padding:4px 5px;background:var(--sheet);border:1px solid var(--bp);color:var(--bp);font:500 10px/1 var(--mono);letter-spacing:.02em;pointer-events:auto}
@supports (font-size:1cqw){.lab{font-size:clamp(9px,1.7cqw,11px)}}
.lab.a{left:14.3%;bottom:100%;margin-bottom:9px}
.lab.b{left:13.75%;top:6.4%}
.lab.c{left:14.3%;top:76.6%}
.lab.d{left:58%;top:76.6%}

/* contact strip */
.strip-wrap{margin:60px 0 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 56px 14px;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.cs{flex:0 0 264px;margin:0;scroll-snap-align:start;background:var(--sheet);border:1px solid var(--ink);padding:8px;transition:border-color .15s}
.cs:hover{border-color:var(--bp)}
.cs .frm{height:150px;overflow:hidden;border:1px solid var(--rule)}
.cs img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cs figcaption{font:400 10.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-3);padding:8px 2px 0}
.k{text-transform:uppercase}

/* ---------- plate 02 exploded view ---------- */
.exploded{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:24px;align-items:start}
.col{display:grid;gap:24px}
.co{background:var(--sheet);border:1px solid var(--ink);padding:20px 20px 18px;min-width:0}
.co .num{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--bp);display:block;margin-bottom:14px}
.co h3{font:600 1.15rem/1.25 var(--display);letter-spacing:-.015em;margin:0 0 4px}
.co .sub{font:500 14px/1.4 var(--body);color:var(--ink-2);margin:0 0 10px}
.co p{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0}
.spm{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.code{font:400 11px/1.6 var(--mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.code .ln{display:inline-block;width:2.4em;color:var(--ink-3);user-select:none}
.code .pr{color:var(--bp)}
.code .dim{color:var(--ink-3)}
.hdr{display:inline-block;font:400 10.5px/1 var(--mono);color:var(--ink-2);padding:4px 6px;border:1px solid var(--rule-strong);margin:0 0 8px;letter-spacing:.02em}
.lex{list-style:none;margin:0;padding:0}
.lex li{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.lex li:last-child{border-bottom:0}
.lex .src,.lex .wc{font:400 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lex .wc{color:var(--bp);white-space:nowrap}
.lex q{quotes:"\201C" "\201D";color:var(--ink);font-weight:500}
.seo{margin:0}
.seo dt{display:flex;justify-content:space-between;gap:10px;font:400 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 3px}
.seo .m{color:var(--bp);text-transform:none;letter-spacing:.02em}
.seo dd{margin:0 0 12px;font-size:13.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.seo dd:last-child{margin-bottom:0}
.bar{display:block;height:4px;margin-top:6px;background:var(--rule)}
.bar i{display:block;height:100%;background:var(--bp)}
.w90{width:90%}
.w92{width:91.9%}
.sw{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0 0 12px}
.sw span{display:block;font:400 9.5px/1.3 var(--mono);color:var(--ink-3);letter-spacing:.02em}
.sw span::before{content:"";display:block;width:100%;aspect-ratio:1;border:1px solid var(--rule-strong);margin-bottom:4px;background:var(--c)}
.c1{--c:#FFFFFF}.c2{--c:#E5EDF5}.c3{--c:#061B31}.c4{--c:#50617A}.c5{--c:#64748D}.c6{--c:#533AFD}
.ramp{font:400 11px/1.6 var(--mono);color:var(--ink);margin:0 0 10px}
.ramp .lbl,.radii .lbl{color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;margin-right:8px}
.radii{display:flex;align-items:center;gap:12px;font:400 11px/1 var(--mono);color:var(--ink);margin:0}
.radii i{display:inline-block;width:18px;height:18px;border:1px solid var(--ink);vertical-align:middle;margin-right:5px}
.r4{border-radius:4px}.r5{border-radius:5px}.r6{border-radius:6px}
.board{border:1px solid var(--rule-strong);padding:12px}
.bh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.tag{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp);border:1px solid var(--bp);padding:3px 5px}
.bt{font:600 14px/1.3 var(--display);color:var(--ink)}
.bn{font-size:13px;line-height:1.45;color:var(--ink-2);margin:0 0 10px}
.bc{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px}
.bc div{height:64px;overflow:hidden;border:1px solid var(--rule)}
.bc img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ba{font-size:13px;line-height:1.45;color:var(--ink);margin:0;padding:8px 10px;border-left:2px solid var(--bp);background:var(--tint)}
.ba b{display:block;font:500 10.5px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bp)}
.strips{min-width:0}
.fig-h{font:400 11px/1.5 var(--mono);letter-spacing:.02em;color:var(--ink-2);margin:0 0 14px}
.stack{position:relative;display:grid;gap:18px}
.stack::before{content:"";position:absolute;left:50%;top:-18px;bottom:-18px;border-left:1px dashed var(--bp)}
.band{position:relative;height:120px;overflow:hidden;background:var(--sheet);border:1px solid var(--ink)}
.band img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.bl{position:absolute;left:0;top:0;z-index:2;padding:5px 7px;background:var(--sheet);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

/* ---------- plate 03 dimension chain ---------- */
.chain{position:relative;display:grid;grid-template-columns:repeat(5,1fr);column-gap:24px;padding:0 20px;margin:8px 0 0;list-style:none}
.chain::before{content:"";position:absolute;left:0;right:0;top:39px;height:1px;background:var(--bp)}
.chain::after{content:"";position:absolute;right:0;top:35px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:9px solid var(--bp)}
.st{display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:0}
.st-l{font:500 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp);margin:0;padding-bottom:10px}
.st-d{position:relative;z-index:1;width:11px;height:11px;margin:8px 0 9px;border:1px solid var(--bp);border-radius:50%;background:var(--sheet)}
.st:first-child .st-d::before{content:"";position:absolute;left:-21px;top:0;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:9px solid var(--bp)}
.st-b{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0}

/* ---------- plate 04 contact sheet ---------- */
.sheet-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.th{margin:0;background:var(--sheet);border:1px solid var(--ink);padding:6px;transition:border-color .15s;min-width:0}
.th:hover{border-color:var(--bp)}
.th img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.th figcaption{font:400 10.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-3);padding:6px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- plate 05 agencies ---------- */
.two{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:start}
.two .intro{margin-bottom:28px}
.tbl{overflow-x:auto}
.bom{width:100%;min-width:520px;border-collapse:collapse;background:var(--sheet);border:1px solid var(--ink)}
.bom caption{caption-side:top;text-align:left;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:0 0 10px}
.bom th,.bom td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--rule)}
.bom thead th{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--ink);padding:10px 16px}
.bom tbody th{font:600 1rem/1.3 var(--display);letter-spacing:-.01em;width:34%}
.bom td.no{font:500 11px/1.7 var(--mono);color:var(--bp);width:52px;padding-right:0}
.bom td.sp{font-size:15px;line-height:1.5;color:var(--ink-2)}
.bom tbody tr:last-child th,.bom tbody tr:last-child td{border-bottom:0}

/* ---------- plate 06 access ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr)}
.three>div{padding:8px 28px;border-left:1px solid var(--rule-strong)}
.three>div:first-child{padding-left:0;border-left:0}
.three .idx{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--bp);display:block;margin-bottom:14px}
.three h3{font:600 1.15rem/1.25 var(--display);letter-spacing:-.015em;margin:0 0 8px}
.three p{font-size:15px;color:var(--ink-2);margin:0;max-width:36ch}

/* ---------- plate 07 faq ---------- */
.faq{max-width:820px;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:grid;grid-template-columns:52px 1fr 28px;align-items:start;gap:0 8px;padding:18px 0;cursor:pointer;list-style:none;font:600 1.05rem/1.4 var(--display);letter-spacing:-.01em;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--bp)}
.faq .q{font:500 11px/1.9 var(--mono);letter-spacing:.08em;color:var(--bp)}
.faq .plus{position:relative;width:16px;height:16px;justify-self:end;margin-top:4px;transition:transform .2s}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bp)}
.faq .plus::before{width:16px;height:1px}
.faq .plus::after{width:1px;height:16px}
.faq details[open] .plus{transform:rotate(45deg)}
.faq .a{margin:0;padding:0 0 22px 60px;max-width:calc(64ch + 60px);font-size:15.5px;color:var(--ink-2)}

/* ---------- plate 08 closer + footer ---------- */
.closer .intro{margin-bottom:28px}
.foot{margin-top:64px;background:var(--sheet);border:1px solid var(--ink)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:18px 24px;border-bottom:1px solid var(--rule)}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}
.foot-links a{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:color .15s,border-color .15s}
.foot-links a:hover{color:var(--bp);border-bottom-color:var(--bp)}
.legal{padding:14px 24px 16px;font:400 12px/1.6 var(--mono);color:var(--ink-3);margin:0}
.legal .c{color:var(--ink);font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .exploded{grid-template-columns:1fr 1fr}
  .col{display:contents}
  .strips{grid-column:1/-1;order:-1}
  .sheet-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:979px){
  .hero{grid-template-columns:1fr;gap:40px}
  .plate{padding:60px 0}
}
@media (max-width:899px){
  .two{grid-template-columns:1fr;gap:32px}
  .sheet-grid{grid-template-columns:repeat(3,1fr)}
  .chain{display:block;padding:18px 0}
  .chain::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .chain::after{right:auto;left:1px;top:auto;bottom:0;border:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:9px solid var(--bp)}
  .st{display:grid;grid-template-columns:11px 1fr;column-gap:18px;padding:0 0 28px}
  .st:last-child{padding-bottom:0}
  .st-l{grid-column:2;grid-row:1;line-height:1.4;padding:0 0 6px}
  .st-d{grid-column:1;grid-row:1;align-self:start;margin:2px 0 0}
  .st:first-child .st-d::before{left:50%;top:-21px;transform:translateX(-50%);border:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:9px solid var(--bp)}
  .st-b{grid-column:2;grid-row:2}
}
@media (max-width:819px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
}
@media (max-width:759px){
  .three{grid-template-columns:1fr}
  .three>div{padding:22px 0;border-left:0;border-top:1px solid var(--rule-strong)}
  .three>div:first-child{border-top:0;padding-top:0}
  .sheet-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:639px){
  .exploded{grid-template-columns:1fr}
  .sheet-grid{grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-template-columns:none;grid-auto-columns:190px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
  .th{scroll-snap-align:start}
}
@media (max-width:599px){
  .wrap{padding:0 16px}
  .plate{padding:48px 0}
  .org,.nav .btn:not(.fill){display:none}
  .nav .btn{height:38px;padding:0 14px}
  .tb{margin-bottom:28px}
  .fig{padding:20px 14px 16px}
  .strip{padding:4px 24px 14px;gap:12px}
  .strip-wrap{-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
  .cs{flex-basis:232px}
  .faq summary{grid-template-columns:44px 1fr 24px}
  .faq .a{padding-left:52px;max-width:calc(64ch + 52px)}
  .sw{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:479px){
  .fig{padding:16px 12px 14px}
  .labs{position:static;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;container-type:normal}
  .lab{position:static;margin:0;font-size:10.5px}
  .lab::before{content:"";display:inline-block;width:7px;height:7px;border:1px solid var(--bp);border-radius:50%;margin-right:6px;vertical-align:0}
  .lab.a{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   Variant D — the plates, in motion. Everything below is additive to B.
   Reveal state exists only inside `.js`; with scripting off, or under
   prefers-reduced-motion, every element sits in its final position.
   ===================================================================== */
:root{--ease:cubic-bezier(.22,.8,.28,1);--dl:calc(var(--d,0)*80ms)}
.prog{position:absolute;left:0;bottom:0;z-index:2;width:100%;height:2px;background:var(--bp);transform:scaleX(0);transform-origin:left;pointer-events:none}
.wm{will-change:transform}
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease) var(--dl),transform .7s var(--ease) var(--dl),border-color .2s,box-shadow .2s}
/* title block: cells stamp in left to right */
.js .tb.rv span{opacity:0;transform:translateX(-8px)}
.js .tb.rv.in span{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .tb.rv.in span:nth-child(2){transition-delay:.06s}.js .tb.rv.in span:nth-child(3){transition-delay:.12s}.js .tb.rv.in span:nth-child(4){transition-delay:.18s}.js .tb.rv.in span:nth-child(5){transition-delay:.24s}.js .tb.rv.in span:nth-child(6){transition-delay:.3s}
/* FIG. 1 dimension lines draw once the figure is on screen */
.js .fig .dims path,.js .fig .dims circle{animation-play-state:paused}
.js .fig.in .dims path,.js .fig.in .dims circle{animation-play-state:running}
/* dimension chain: the line draws, then the stations land */
.js .chain.rv::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .1s}
.js .chain.rv.in::before{transform:none}
.js .chain.rv::after{opacity:0;transition:opacity .3s 1.1s}
.js .chain.rv.in::after{opacity:1}
.js .chain.rv .st{opacity:0;transform:translateY(10px)}
.js .chain.rv.in .st{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .chain.rv.in .st:nth-child(1){transition-delay:.25s}.js .chain.rv.in .st:nth-child(2){transition-delay:.42s}.js .chain.rv.in .st:nth-child(3){transition-delay:.59s}.js .chain.rv.in .st:nth-child(4){transition-delay:.76s}.js .chain.rv.in .st:nth-child(5){transition-delay:.93s}

/* ---------- plate 02 as a bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.b1{grid-column:span 7}.b2{grid-column:span 5}.b3{grid-column:span 5}.b4{grid-column:span 7}.b5{grid-column:span 12}.b6{grid-column:span 7}.b7{grid-column:span 5}
.co{display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.co:hover{border-color:var(--bp);box-shadow:2px 2px 0 var(--bp)}
.co > p:not(.sub){margin-bottom:16px}
.co .spm{margin-top:auto}
.co.b7{padding:20px}
.co.b7 .fig-h{margin:0 0 14px}
/* exploded view: bands start collapsed and separate on entry; the centre line draws */
.stack .band{--k:0}
.js .b7 .stack .band{transform:translateY(calc(var(--k) * -18px))}
.js .b7.in .stack .band{transform:none;transition:transform .9s var(--ease) calc(.15s + var(--k) * 90ms)}
.js .b7 .stack::before{transform:scaleY(0);transform-origin:top}
.js .b7.in .stack::before{transform:none;transition:transform 1s var(--ease) .1s}
.b7 .band{height:112px}

/* ---------- 05 · the token sheet ---------- */
.b5 .co-h{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 32px;align-items:end;margin-bottom:18px}
.b5 .co-h > div > p:last-child{margin-bottom:0}
.prov{font:400 11px/1.65 var(--mono);color:var(--ink-2);margin:0;padding:10px 12px;border:1px solid var(--rule-strong);background:var(--paper)}
.prov b{color:var(--ink);font-weight:500}
.tok{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;padding-top:18px;border-top:1px solid var(--rule)}
.tk{min-width:0;padding:14px;border:1px solid var(--rule-strong);background:var(--paper)}
.pal{grid-column:span 5}.typ{grid-column:span 7}.spc{grid-column:span 4}.shp{grid-column:span 4}.var{grid-column:span 4}
.tk h4{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule-strong)}
.tk h4 span{color:var(--ink-3);text-transform:none;letter-spacing:.02em;font-weight:400}
.tk-f{font:400 10.5px/1.5 var(--mono);color:var(--ink-3);margin:12px 0 0}
.area{display:flex;height:34px;border:1px solid var(--ink);margin:0 0 12px;overflow:hidden}
.area i{display:flex;align-items:center;flex:0 0 var(--w);padding:0 8px;background:var(--c);font:500 10px/1 var(--mono);font-style:normal;color:var(--ink);border-right:1px solid var(--ink);white-space:nowrap;overflow:hidden;transform-origin:left}
.area i:last-child{border-right:0}
.js .rv .area i{transform:scaleX(0)}
.js .rv.in .area i{transform:none;transition:transform .9s var(--ease) .25s}
.cols{list-style:none;margin:0;padding:0}
.cols li{display:grid;grid-template-columns:16px 62px 66px minmax(0,1fr) 62px;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--rule);font:400 10.5px/1 var(--mono);color:var(--ink-2)}
.cols li i{width:16px;height:16px;border:1px solid var(--rule-strong);background:var(--c)}
.cols code{color:var(--ink)}
.cols .cnt{display:flex;align-items:center;gap:6px;height:16px;color:var(--ink);white-space:nowrap}
.cols .cnt em{display:block;flex:0 1 var(--w);min-width:2px;height:100%;background:var(--tint);border-right:1px solid var(--bp);transform-origin:left}
.js .rv .cols em{transform:scaleX(0)}
.js .rv.in .cols em{transform:none;transition:transform .8s var(--ease) .35s}
.cols .cr{text-align:right;color:var(--ink);white-space:nowrap}
.cols .cr small{font-size:9px;color:var(--bp);margin-left:3px}
.glyphs{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;padding:18px 0 26px;border-bottom:1px solid var(--ink);margin:0 0 12px;font-family:var(--body);font-weight:400;color:var(--ink);line-height:.75;overflow:hidden}
.glyphs span{position:relative;display:inline-block}
.glyphs small{position:absolute;left:0;top:100%;margin-top:4px;font:400 9.5px/1 var(--mono);color:var(--ink-3)}
.js .rv .glyphs span{opacity:0;transform:translateY(10px)}
.js .rv.in .glyphs span{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(.2s + var(--i)*45ms),transform .5s var(--ease) calc(.2s + var(--i)*45ms)}
.faces{list-style:none;margin:0;padding:0;font:400 11px/1.7 var(--mono);color:var(--ink-2)}
.faces b{color:var(--ink);font-weight:500}
.faces code{color:var(--ink-3)}
.hist{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;align-items:end;height:128px;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--ink)}
.hist li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;font:400 9.5px/1 var(--mono)}
.hist b{font-weight:400;color:var(--ink-3);margin-bottom:4px;white-space:nowrap}
.hist i{display:block;width:100%;height:var(--h);background:var(--bp);transform-origin:bottom}
.hist li.base i{background:var(--ink)}
.hist code{margin-top:6px;padding-bottom:6px;color:var(--ink)}
.js .rv .hist i{transform:scaleY(0)}
.js .rv.in .hist i{transform:none;transition:transform .8s var(--ease) calc(.2s + var(--i)*60ms)}
.rad{display:flex;gap:18px;margin:2px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.rad span{display:flex;flex-direction:column;align-items:center;gap:5px;font:400 10px/1 var(--mono);color:var(--ink)}
.rad i{width:34px;height:34px;border:1px solid var(--ink);background:var(--sheet)}
.rad small{color:var(--ink-3)}
.shd{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 6px;padding:4px 0 14px;border-bottom:1px solid var(--rule)}
.card{height:58px;background:#fff;border:1px solid var(--rule);display:flex;align-items:flex-end;padding:5px;font:400 8.5px/1.3 var(--mono);color:var(--ink-3);overflow-wrap:anywhere}
.card.s1{box-shadow:rgba(3,3,39,.25) 0 14.088px 21.132px -14.088px,rgba(0,0,0,.1) 0 8.453px 16.906px -8.453px}
.card.s2{box-shadow:rgba(50,50,93,.25) 0 30px 45px -30px,rgba(0,0,0,.1) 0 18px 36px -18px}
.js .rv .card{box-shadow:0 0 0 0 rgba(3,3,39,0)}
.js .rv.in .card{transition:box-shadow 1.1s var(--ease) .5s}
.js .rv.in .card.s1{box-shadow:rgba(3,3,39,.25) 0 14.088px 21.132px -14.088px,rgba(0,0,0,.1) 0 8.453px 16.906px -8.453px}
.js .rv.in .card.s2{box-shadow:rgba(50,50,93,.25) 0 30px 45px -30px,rgba(0,0,0,.1) 0 18px 36px -18px}
.bpr{position:relative;height:30px;margin-top:12px;border-bottom:1px solid var(--ink);background:repeating-linear-gradient(to right,var(--rule-strong) 0 1px,transparent 1px 10%) left bottom/100% 6px no-repeat}
.bpr i{position:absolute;left:var(--x);bottom:0;height:18px;border-left:1px solid var(--bp)}
.bpr i code{position:absolute;left:4px;top:-2px;font:400 9.5px/1 var(--mono);color:var(--bp);white-space:nowrap}
.bpr .end,.bpr .zero{position:absolute;top:0;font:400 9.5px/1 var(--mono);color:var(--ink-3)}
.bpr .end{right:0}.bpr .zero{left:0}
.var .code{font-size:10.5px}
.sig{font:400 10.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--ink-3);margin:0 0 10px}
.bc.one{grid-template-columns:1fr;margin:0 0 10px}
.bc.one div{height:124px}
.ba{margin:0 0 10px}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .b1,.b2,.b3,.b4,.b6,.b7{grid-column:span 6}
  .pal,.typ,.spc,.shp{grid-column:span 6}.var{grid-column:span 12}
  .b5 .co-h{grid-template-columns:1fr}
}
@media (max-width:759px){
  .b1,.b2,.b3,.b4,.b6,.b7{grid-column:span 12}
  .pal,.typ,.spc,.shp,.var{grid-column:span 12}
  .cols li{grid-template-columns:16px 62px 1fr 56px}
  .cols .role{display:none}
}
@media (max-width:899px){
  .js .chain.rv::before{transform:scaleY(0);transform-origin:top}
}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .tb.rv span,.js .chain.rv .st,.js .rv .glyphs span{opacity:1;transform:none}
  .js .chain.rv::after{opacity:1}
  .js .b7 .stack .band,.js .b7 .stack::before,.js .rv .area i,.js .rv .cols em,.js .rv .hist i,.js .chain.rv::before{transform:none}
  .js .fig .dims path,.js .fig .dims circle{animation-play-state:running}
  .js .rv .card.s1{box-shadow:rgba(3,3,39,.25) 0 14.088px 21.132px -14.088px,rgba(0,0,0,.1) 0 8.453px 16.906px -8.453px}
  .js .rv .card.s2{box-shadow:rgba(50,50,93,.25) 0 30px 45px -30px,rgba(0,0,0,.1) 0 18px 36px -18px}
  .wm{transform:none!important}
}

/* ---------- the contact strip rolls ----------
   landing.js appends an aria-hidden copy of every figure and adds .dup, so
   a -50% translate loops seamlessly. Without JS there is no copy and the
   strip scrolls by hand; under reduced motion it does the same. */
.strip-wrap{overflow:hidden}
.strip{width:max-content;overflow:visible;scroll-snap-type:none;padding:4px 0 14px;will-change:transform}
.js .strip.mq-row.dup{animation:roll var(--t,84s) linear infinite}
.strip-wrap:hover .strip{animation-play-state:paused}
@keyframes roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
html:not(.js) .strip-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
@media (max-width:599px){.strip{padding:4px 0 14px}}
@media (prefers-reduced-motion:reduce){
  .strip{animation:none!important;transform:none!important}
  .strip-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
}