/* HOOKLINE v12. One ground (the void), paper sheets for the things you are
   handed (prices, site plates), signal orange as light only. Big Shoulders for
   display, Archivo for text. ASCII only in this file. */

@font-face{font-family:"Big Shoulders";src:url(/fonts/BigShoulders.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/Archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --void:#0D1116;--void-2:#121821;--forme:#27303C;--line:#2B3542;--line-2:#3A4655;
  --paper:#F8F4EC;--paper-2:#EFE9DD;--ink:#0D1116;--ink-2:#3B4450;
  --fg:#F8F4EC;--fg-2:#B7C0CC;--fg-3:#7F8A98;
  --signal:#FF4A1C;--signal-2:#FF6A44;--gold:#E1A440;--cool:#9FB2CC;--ok:#6BD39A;
  /* --line is a decorative hairline. --edge is the boundary of anything a
     person operates, and it clears 3:1 on both grounds (3.59 and 3.38).
     --signal-ink is the accent where it has to be READ rather than seen:
     orange on paper measures 3.06:1, which fails; this is 5.81:1. */
  --edge:#5F6D80;--signal-ink:#B32D0C;
  --display:"Big Shoulders","Anton","Arial Narrow",Impact,sans-serif;
  --text:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --nav-h:64px;--wrap:1240px;--gutter:clamp(18px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 14px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--void);color:var(--fg);font:400 17px/1.55 var(--text);font-variation-settings:"wdth" 100;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:var(--signal);color:var(--void)}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--signal);color:var(--void);font:600 15px/1 var(--text);padding:14px 18px;border-radius:0 0 4px 0;text-decoration:none}
.skip:focus{left:0}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.005em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(56px,9.5vw,148px);line-height:.92;font-variation-settings:"opsz" 72}
h2{font-weight:700;font-size:clamp(40px,6vw,88px);line-height:.96;font-variation-settings:"opsz" 72}
h3{font-weight:600;font-size:clamp(24px,2.6vw,34px);line-height:1.05;font-variation-settings:"opsz" 40}
p{margin:0 0 1em}
.lede{font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--fg-2);max-width:62ch}
.eyebrow{font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 18px;font-variation-settings:"wdth" 110}
.eyebrow b{color:var(--signal);font-weight:600}
.num{font-family:var(--display);font-variation-settings:"opsz" 72;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

/* buttons: one primary shape, two fills */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:4px;border:1px solid var(--edge);background:transparent;color:var(--fg);text-decoration:none;font:600 15px/1 var(--text);letter-spacing:.02em;cursor:pointer;transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;will-change:transform}
.btn:hover{border-color:var(--fg-2)}
/* the magnetic nudge must never carry a control out from under its ring */
.btn:focus-visible{transform:none !important}
.btn.fill{background:var(--signal);border-color:var(--signal);color:var(--void)}
.btn.fill:hover{background:var(--signal-2);border-color:var(--signal-2)}
.btn.paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.paper:hover{background:#fff}
.btn .arr{display:inline-block;flex:none;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.link{color:var(--fg);text-decoration:underline;text-decoration-color:var(--fg-3);text-underline-offset:4px}
.link:hover{text-decoration-color:var(--signal)}

/* nav: opaque, small, always there; the progress line is the wayfinding */
nav.top{position:sticky;top:0;z-index:50;height:var(--nav-h);background:rgba(13,17,22,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{height:100%;display:flex;align-items:center;gap:26px}
nav.top .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
nav.top .brand i{font:600 9px/1 var(--text);letter-spacing:.22em;color:var(--fg-3);font-style:normal;padding-top:2px}
nav.top .links{display:flex;gap:4px;margin-left:8px}
nav.top .links a{text-decoration:none;color:var(--fg-2);font:500 14px/1 var(--text);padding:10px 12px;border-radius:4px;position:relative}
nav.top .links a:hover{color:var(--fg)}
nav.top .links a[aria-current="true"]{color:var(--fg)}
nav.top .links a[aria-current="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--signal)}
nav.top .here{margin-left:auto;font:500 12px/1 var(--mono);color:var(--fg-3);letter-spacing:.04em;white-space:nowrap}
/* below this the row is over-committed and "How it works" wraps */
@media (max-width:1180px){nav.top .here{display:none}nav.top .links{margin-left:auto}}
nav.top .here b{color:var(--fg-2);font-weight:500}
nav.top .cta{flex:none}
nav.top .burger{display:none;width:44px;height:44px;border:1px solid var(--edge);border-radius:4px;background:transparent;position:relative}
nav.top .burger span,nav.top .burger span::before,nav.top .burger span::after{position:absolute;left:12px;right:12px;height:2px;background:var(--fg);content:"";top:21px;transition:transform .25s var(--ease)}
nav.top .burger span::before{top:-7px;left:0;right:0}nav.top .burger span::after{top:7px;left:0;right:0}
nav.top .progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:transparent;transform-origin:left;transform:scaleX(var(--p,0));background:var(--signal)}
.menu{display:none;position:fixed;inset:var(--nav-h) 0 0 0;z-index:49;background:var(--void);padding:24px var(--gutter) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
.menu[data-open="true"]{display:block}
.menu a{display:block;font:600 clamp(28px,7vw,40px)/1.2 var(--display);text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
.menu .small{font:400 14px/1.5 var(--text);color:var(--fg-3);margin-top:18px}
@media (max-width:980px){nav.top .links,nav.top .here{display:none}nav.top .burger{display:block;margin-left:auto}nav.top .cta{display:none}}
.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:48;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(13,17,22,.94);border-top:1px solid var(--line)}
.mobilebar .btn{width:100%;justify-content:center}
@media (max-width:980px){.mobilebar{display:block}body{padding-bottom:76px}.mobilebar[data-hide="true"]{transform:translateY(110%)}.mobilebar{transition:transform .3s var(--ease)}}

/* sections */
/* Two adjacent sections each contributing 140px made a 280px hole between
   chapters, which reads as the page having ended. Half the rhythm lives on
   the top edge, half on the bottom, and the pair lands near 190px. */
section{position:relative;padding:clamp(56px,6.5vw,104px) 0;scroll-margin-top:var(--nav-h)}
section.tight{padding-top:clamp(40px,6vw,80px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.head .lede{margin:0}
@media (max-width:820px){.head{grid-template-columns:minmax(0,1fr)}}
.next{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font:500 13px/1 var(--mono);color:var(--fg-3);text-decoration:none;letter-spacing:.04em}
.next:hover{color:var(--fg)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* hero */
#top{padding:0;min-height:calc(100svh - var(--nav-h));display:grid;align-items:center;overflow:hidden}
#field{position:absolute;inset:0;z-index:0}
#field canvas{display:block;width:100%;height:100%}
/* The mark runs the full width of the hero, so the reading column needs a
   ground of its own. A gradient, not a box: the word keeps travelling under
   the type instead of stopping at an edge. */
#scrim{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,var(--void) 0%,rgba(13,17,22,.94) 26%,rgba(13,17,22,.62) 44%,rgba(13,17,22,.12) 62%,transparent 78%)}
#poster{position:absolute;inset:0;z-index:0;display:grid;place-items:center;opacity:.55;pointer-events:none}
/* Phones do not get the field at all: three.js never downloads, the GPU is
   left alone, and the mark stays a quiet ghost behind the type instead of a
   speckle field competing with the one thing that has to be read. */
@media (max-width:699px){
  #scrim{background:linear-gradient(180deg,rgba(13,17,22,.96) 0%,rgba(13,17,22,.88) 55%,rgba(13,17,22,.72) 100%)}
  #poster{opacity:.16;place-items:end center;padding-bottom:6vh}
  #poster svg{width:150vw;max-width:none}
}
@media (min-width:700px) and (max-width:980px){#scrim{background:linear-gradient(178deg,var(--void) 0%,rgba(13,17,22,.92) 40%,rgba(13,17,22,.6) 70%,rgba(13,17,22,.3) 100%)}}
#poster svg{width:min(92vw,1400px);height:auto}
#poster .cnt{fill:var(--signal)}
/* align-items:start, not end: the read panel grows by 400px when it returns a
   result, and anchoring to the bottom made the headline jump up the screen
   mid-interaction. Growth now happens downward, into space. */
.hero{position:relative;z-index:1;padding:clamp(56px,9vh,110px) 0 clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 64px;align-items:start}
.hero .lede{margin:22px 0 0;max-width:52ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .fine{margin-top:16px;font:400 13px/1.5 var(--text);color:var(--fg-3);max-width:52ch}
.hero .fine b{color:var(--fg-2);font-weight:500}
@media (max-width:980px){.hero{grid-template-columns:minmax(0,1fr);gap:28px}}

/* the read: the instrument */
.read{background:rgba(18,24,33,.88);border:1px solid var(--line-2);border-radius:8px;padding:18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;max-height:calc(100svh - var(--nav-h) - 120px)}
.read .lab{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:12px;flex-wrap:wrap}
@media (max-width:520px){.read .lab{display:block}.read .lab span{display:block;margin-top:4px}}
.read .lab b{font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.read .lab span{font:400 12px/1 var(--mono);color:var(--fg-3)}
.read form{display:flex;gap:8px}
.read input{flex:1;min-width:0;height:48px;border-radius:4px;border:1px solid var(--edge);background:var(--void);color:var(--fg);padding:0 14px;font:500 16px/1 var(--mono)}
.read input::placeholder{color:var(--fg-3)}
.read input:focus{border-color:var(--signal);outline:none}
.read .note{margin:12px 0 0;font:400 13px/1.5 var(--text);color:var(--fg-3)}
.read .btn[disabled]{opacity:.6;cursor:progress}
.out{margin-top:16px;display:none;min-height:0}
/* One scroller, not three. A scrolling list nested inside a capped panel
   pushed the summary and its call to action into a 100px slot. */
.out[data-state]{display:flex;flex-direction:column;min-height:0;overflow:auto;overscroll-behavior:contain}
.out .stat{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);color:var(--fg-2);min-height:20px}
.out .stat i{width:8px;height:8px;border-radius:50%;background:var(--fg-3);display:inline-block}
.out[data-state="run"] .stat i{background:var(--signal);animation:pulse 1s infinite}
.out[data-state="done"] .stat i{background:var(--ok)}
.out[data-state="err"] .stat i{background:var(--gold)}
@keyframes pulse{50%{opacity:.35}}
.out ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.out li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:start;font:400 13px/1.45 var(--mono);color:var(--fg-2);padding:6px 8px;border-radius:4px;background:rgba(13,17,22,.6);opacity:0;transform:translateY(4px);animation:rise .4s var(--ease) forwards}
.out li b{color:var(--fg);font-weight:500}
.out li .v{color:var(--fg-3);grid-column:2;font-size:12px;overflow-wrap:anywhere}
.out li .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.out li[data-s="present"] .dot{color:var(--ok)}
.out li[data-s="absent"] .dot{color:var(--signal)}
.out li[data-s="inconsistent"] .dot{color:var(--gold)}
@keyframes rise{to{opacity:1;transform:none}}
.out .sum{margin:14px 0 0;padding:14px;border-radius:6px;background:var(--void);border:1px solid var(--line);font:400 15px/1.55 var(--text);color:var(--fg-2);flex:none}
.out .sum b{color:var(--fg)}
.out .sum .btn{margin-top:12px}
@media (prefers-reduced-motion:reduce){.out li{animation:none;opacity:1;transform:none}.out[data-state="run"] .stat i{animation:none}}

/* sell: five lanes */
.lanes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:transparent;border:1px solid var(--line)}
.lane{background:var(--void);box-shadow:0 0 0 1px var(--line);padding:26px 22px 28px;display:flex;flex-direction:column;gap:12px;min-height:280px;text-decoration:none;transition:background .3s}
.lane:hover{background:var(--void-2)}
.lane .k{font:500 12px/1 var(--mono);color:var(--fg-3);letter-spacing:.04em}
.lane h3{font-size:clamp(26px,2.4vw,36px)}
.lane p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.5}
.lane .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lane .price b{font:300 30px/1 var(--display);font-variation-settings:"opsz" 72;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lane .price span{font:400 12px/1.3 var(--text);color:var(--fg-3);text-align:right}
.lane .quote{font:italic 400 14px/1.45 var(--text);color:var(--fg-3);font-variation-settings:"wdth" 96}
@media (max-width:1100px){.lanes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.lanes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lane{min-height:0}}
@media (max-width:460px){.lanes{grid-template-columns:minmax(0,1fr)}}

/* work: plates on paper, the wall as three moving rows */
.plates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.plate{background:var(--paper);color:var(--ink);border-radius:6px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transform:translateZ(0);transition:transform .35s var(--ease),box-shadow .35s}
.plate:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(0,0,0,.8)}
.plate img{aspect-ratio:4/5;object-fit:cover;object-position:top;width:100%}
.plate figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.plate figcaption b{font:600 15px/1.2 var(--text);font-variation-settings:"wdth" 100}
.plate figcaption span{font:400 12px/1.3 var(--text);color:var(--ink-2)}
.plate .tag{align-self:flex-start;font:600 10px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;padding:5px 7px;border-radius:3px;background:var(--ink);color:var(--paper);margin-bottom:4px}
@media (max-width:1000px){.plates{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.plates{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wall{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.row{display:flex;gap:14px;width:max-content;margin-bottom:14px;animation:slide var(--dur,60s) linear infinite}
.row:nth-child(2){animation-direction:reverse;--dur:74s}
.row:nth-child(3){--dur:66s}
.wall:hover .row{animation-play-state:paused}
.wall[data-paused="true"] .row,.wall[data-off="true"] .row{animation-play-state:paused}
.wallbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:clamp(40px,5vw,72px) 0 12px}
.wallbar span{font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.wallpause{flex:none;min-height:36px;padding:0 14px;border-radius:4px;border:1px solid var(--edge);background:var(--void);color:var(--fg-2);font:600 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.wallpause:hover{color:var(--fg);border-color:var(--fg-2)}
@media (prefers-reduced-motion:reduce){.wallpause{display:none}}
.row a{flex:none;width:220px;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--forme);transition:transform .3s var(--ease)}
.row a:hover{transform:scale(1.04)}
.row img{width:100%;height:100%;object-fit:cover;object-position:top}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.wall{-webkit-mask-image:none;mask-image:none}.row{animation:none;width:100%;flex-wrap:wrap;justify-content:center}.row a{width:calc(20% - 12px)}.row a:nth-child(n+21){display:none}}
@media (max-width:620px){.row a{width:150px}}
.disclose{margin-top:18px;font:400 13px/1.5 var(--text);color:var(--fg-3);max-width:72ch}
.disclose b{color:var(--fg-2);font-weight:500}
.counts{display:flex;flex-wrap:wrap;gap:36px;margin:clamp(32px,4vw,56px) 0 0}
.counts div,.counts a{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.counts a:hover span,.counts a:focus-visible span{color:var(--fg)}
.counts a:hover b,.counts a:focus-visible b{color:var(--signal)}
.counts b{font:200 clamp(44px,5vw,72px)/1 var(--display);font-variation-settings:"opsz" 72;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.counts span{font:400 13px/1.4 var(--text);color:var(--fg-3);max-width:20ch}

/* how it works: steps + the loop */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:transparent;border:1px solid var(--line);margin-top:8px}
.step{background:var(--void);box-shadow:0 0 0 1px var(--line);padding:28px 24px 30px}
.step .n{font:200 56px/1 var(--display);font-variation-settings:"opsz" 72;color:var(--fg-3);letter-spacing:-.02em}
.step h3{margin:14px 0 10px}
.step p{margin:0;color:var(--fg-2);font-size:15px}
.step .t{margin-top:16px;font:500 12px/1 var(--mono);color:var(--fg-3);letter-spacing:.04em}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.decline{margin:22px 0 0;padding:18px 20px;border-left:2px solid var(--signal);color:var(--fg-2);max-width:70ch;font-size:16px}
.decline b{color:var(--fg)}
.loop{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 56px;align-items:center}
.loop svg{width:100%;height:auto;overflow:visible}
.loop .lbl{font:700 34px var(--display);fill:var(--fg);font-variation-settings:"opsz" 40}
.loop .path{fill:none;stroke:var(--signal);stroke-width:2;stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--ease)}
.loop.in .path{stroke-dashoffset:0}
.loop .box{fill:none;stroke:var(--fg-2);stroke-width:1.5}
.loop dl{margin:0;display:grid;gap:14px}
.loop dt{font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.loop dd{margin:4px 0 0;color:var(--fg-2)}
@media (max-width:820px){.loop{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.loop .path{stroke-dashoffset:0;transition:none}}

/* pricing: a sheet of paper */
.sheet{background:var(--paper);color:var(--ink);border-radius:8px;padding:clamp(22px,3.5vw,48px);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.sheet h2{color:var(--ink)}
.sheet .lede{color:var(--ink-2)}
.sheet .eyebrow{color:var(--ink-2)}
.sheet table{width:100%;border-collapse:collapse;margin-top:8px}
.sheet caption{text-align:left;caption-side:top;font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:26px 0 12px}
.sheet th,.sheet td{text-align:left;vertical-align:top;padding:14px 12px 14px 0;border-top:1px solid #D9D2C4;font-size:15.5px}
.sheet th{font:600 15.5px/1.35 var(--text);width:28%}
.sheet td.p{font:300 30px/1 var(--display);font-variation-settings:"opsz" 72;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;width:22%}
.sheet td.p small{display:block;font:400 12px/1.3 var(--text);color:var(--ink-2);letter-spacing:0;margin-top:6px}
.sheet td.d{color:var(--ink-2)}
.sheet tr.pick th,.sheet tr.pick td{background:#fff}
.sheet tr.pick th::after{content:"most builds";display:inline-block;margin-left:8px;font:700 10px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink);vertical-align:middle}
.sheet tr.pick th{box-shadow:inset 3px 0 0 var(--signal-ink)}
.sheet .fine{margin:22px 0 0;font-size:13.5px;color:var(--ink-2);max-width:72ch}
.sheet .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.sheet .btn{border-color:var(--ink);color:var(--ink)}
.sheet .btn.fill{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sheet .btn.fill:hover{background:#222b36}
.tblwrap{overflow-x:auto}
@media (max-width:640px){.sheet th{width:auto;display:block;border-top:1px solid #D9D2C4;padding-bottom:4px}.sheet td{display:block;border-top:0;padding-top:4px}.sheet td.p{width:auto}.sheet tr{display:block;padding:6px 0}}

/* the record and who you are talking to */
.record{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px}
.record .big{font:800 clamp(64px,10vw,150px)/.9 var(--display);font-variation-settings:"opsz" 72;letter-spacing:-.01em}
.record .big small{display:block;font:400 16px/1.4 var(--text);color:var(--fg-3);letter-spacing:0;margin-top:14px;max-width:26ch}
.record ol{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.record li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--fg-2);font-size:15.5px}
.record li i{font:500 12px/1.6 var(--mono);color:var(--fg-3);font-style:normal}
.record li b{color:var(--fg);font-weight:500}
@media (max-width:820px){.record{grid-template-columns:minmax(0,1fr)}}
.check{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:transparent;border:1px solid var(--line)}
.check a,.check div{background:var(--void);box-shadow:0 0 0 1px var(--line);padding:20px;text-decoration:none;display:flex;flex-direction:column;gap:6px;color:var(--fg-2);font-size:14px}
.check b{color:var(--fg);font:600 15px/1.3 var(--text)}
.check a:hover{background:var(--void-2)}
@media (max-width:820px){.check{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* questions */
.faq{border-top:1px solid var(--line);margin-top:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:16px;align-items:center;padding:20px 0;font:600 clamp(17px,1.6vw,21px)/1.3 var(--text);font-variation-settings:"wdth" 100}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 30px/1 var(--display);color:var(--fg-3);text-align:center;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--signal)}
.faq .a{padding:0 0 22px;color:var(--fg-2);max-width:70ch}

/* book */
#book .card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:start}
#book ol{margin:0;padding:0;list-style:none;display:grid;gap:12px;color:var(--fg-2)}
#book ol li{display:grid;grid-template-columns:28px 1fr;gap:12px}
#book ol i{font:500 12px/1.7 var(--mono);color:var(--signal);font-style:normal}
#book .mail{margin-top:22px;font-size:15px;color:var(--fg-3)}
@media (max-width:820px){#book .card{grid-template-columns:minmax(0,1fr)}}

/* footer */
footer{border-top:1px solid var(--line);padding:48px 0 40px;color:var(--fg-3);font-size:14px}
footer .top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:28px}
footer .tag{font:600 clamp(22px,3vw,34px)/1 var(--display);color:var(--fg);font-variation-settings:"opsz" 40}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px 40px}
footer p{margin:0 0 10px;max-width:70ch}
footer a{color:var(--fg-2);text-decoration:none}
footer a:hover{color:var(--fg)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer .legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px}
@media (max-width:820px){footer .cols{grid-template-columns:minmax(0,1fr)}}

/* reveal: content is visible by default; motion adds, never hides */
.rv .up{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv .up.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv .up{opacity:1;transform:none;transition:none}}

/* subpages (kits, questions, briefs, privacy, terms, 404) */
.subpage{padding-top:clamp(40px,6vw,80px)}
.subback{margin:0 0 26px}
.subback a{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);text-decoration:none}
.subback a:hover{color:var(--fg)}
.subpage h1{font-size:clamp(44px,7vw,104px);margin-bottom:18px}
.subpage .lede{margin-bottom:28px}
.subfacts{display:flex;flex-wrap:wrap;gap:28px 48px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:28px}
.subfacts p{margin:0;display:flex;flex-direction:column;color:var(--fg-3);font-size:13px}
.subfacts b{font:300 40px/1 var(--display);font-variation-settings:"opsz" 72;color:var(--fg);letter-spacing:-.02em}
.subpage>.wrap>p,.subpage .qrow p,.subpage .brow p{color:var(--fg-2);max-width:70ch}
.kitgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:transparent;border:1px solid var(--line);margin:28px 0}
.kitcard{background:var(--void);box-shadow:0 0 0 1px var(--line);padding:22px;text-decoration:none;display:flex;flex-direction:column;gap:8px}
.kitcard:hover{background:var(--void-2)}
.kitcard h3{font-size:22px}
.kitcard .krole{color:var(--fg-3);font-size:14px;margin:0}
.kitcard .kprice{margin:auto 0 0;padding-top:12px;display:flex;align-items:baseline;gap:10px;font-size:12px;color:var(--fg-3)}
.kitcard .kprice b{font:300 28px/1 var(--display);font-variation-settings:"opsz" 72;color:var(--fg)}
@media (max-width:900px){.kitgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.kitgrid{grid-template-columns:minmax(0,1fr)}}
.qlist{border-top:1px solid var(--line);margin:8px 0 28px}
.qrow{padding:26px 0;border-bottom:1px solid var(--line)}
.qrow h2{font-size:clamp(24px,3vw,36px);margin-bottom:10px}
.blist{display:grid;gap:1px;background:transparent;border:1px solid var(--line);margin:24px 0}
.brow{background:var(--void);box-shadow:0 0 0 1px var(--line);padding:24px}
.brow .bwho{font:500 12px/1 var(--mono);color:var(--signal);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.brow h2{font-size:clamp(24px,3vw,36px);margin-bottom:10px}
.brow h2 a{text-decoration:none}
.brow h2 a:hover{color:var(--signal-2)}
.brow .bkit{font-size:14px;color:var(--fg-3);margin:0}
.subcta{margin:28px 0 0}
.legalpage h2{font-size:clamp(24px,3vw,34px);margin:32px 0 10px}
.legalpage p,.legalpage li{color:var(--fg-2);max-width:70ch}

/* utilities */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
.muted{color:var(--fg-3)}
.paperbg{background:var(--paper);color:var(--ink)}

/* HOOKLINE v12, the press pass.
   ---------------------------------------------------------------------------
   The studio's own palette file calls the ground "the press bed" and the raised
   panel "the forme". This sheet takes that literally and makes the page a job
   on a press: an inked bed, a sheet of stock laid on it, register marks where
   the sheet is trued up, and a plate number in the margin of every chapter.

   Every device in here is either a printing device or a wayfinding device, and
   most are both. Nothing was added because it looked modern. ASCII only. */

/* ------------------------------------------------------------------ the bed */
/* Ink is never perfectly flat. Two very low-contrast layers give the void a
   tooth: a fine repeating grain, and one slow radial where the light falls.
   Both are fixed to the viewport, so the page moves across the bed rather than
   dragging its own texture with it. */
/* The room the structure hangs in: a Cycles volumetric render, paper light
   high left and one ember low right through slow cloud. Fixed, so the page
   moves through it; every device gets this depth, WebGL or not. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#0D1116 url(/v12/bed.webp) center/cover no-repeat;opacity:.9;
}
/* 180-degree screen: the dot pattern a press lays down, at a size where it
   reads as tooth rather than as pattern.

   It lives on the hero and nowhere else, deliberately. As a fixed full-viewport
   layer this is a 3px repeating gradient that has to be repainted on every
   scrolled frame, which is real work on a mid-range phone for something almost
   nobody consciously sees. Over the hero it is doing the job it was added for:
   giving the one large flat area on the page a surface. Below the fold there is
   type and image everywhere and the tooth is invisible anyway. */
#top::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(159,178,204,.09) .5px, transparent .5px);
  background-size:3px 3px;
}
/* Only the flow elements get a stacking context here. The nav is sticky,
   the menu and the mobile bar are fixed, and they carry their own z-index;
   forcing position:relative on them un-sticks the nav and drops the bar
   into the flow, which is exactly what happened on a phone. */
section,footer,.skip{position:relative;z-index:1}
#top > .wrap{position:relative;z-index:1}

/* -------------------------------------------------------- the plate number */
/* Every chapter is a plate on the bed, and every plate is numbered in the
   margin. It is the section index and the art direction at once: at 1240 the
   number sits outside the measure, and under 1100 it folds into the eyebrow
   rather than disappearing. */
section[data-plate] > .wrap{position:relative}
section[data-plate] > .wrap::before{
  content:attr(data-plate);position:absolute;left:-84px;top:2px;
  font:200 44px/1 var(--display);font-variation-settings:"opsz" 72;
  color:var(--fg-3);opacity:.5;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
/* --lit is written by the Mind when a thought lands on this chapter: the
   hairline takes the light for a moment, then hands it back to the ink. */
section[data-plate] > .wrap::after{
  content:"";position:absolute;left:-66px;top:56px;bottom:2px;width:1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--signal) calc(var(--lit,0) * 100%),var(--line)),transparent 72%);
  box-shadow:0 0 calc(var(--lit,0) * 18px) rgba(255,74,28,calc(var(--lit,0) * .8));
}
/* The spine runs the left 84px; the plate numbers step out of its way and
   only sit in the margin once the margin is wide enough to hold both. */
@media (max-width:1540px){
  section[data-plate] > .wrap::before,section[data-plate] > .wrap::after{display:none}
  .eyebrow[data-plate]::before{content:attr(data-plate) "  /  ";color:var(--fg-3);opacity:.7}
}

/* ------------------------------------------------------------ register mark */
/* The cross-in-a-circle a printer uses to true one colour against another.
   It marks the two places on the page where the studio is being checked: the
   read, and the price sheet. */
.reg{position:absolute;width:18px;height:18px;pointer-events:none;opacity:.5}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor}
.reg::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.reg::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.reg i{position:absolute;inset:4px;border:1px solid currentColor;border-radius:50%}

/* ------------------------------------------------------------- the read box */
.read{position:relative}
.read .reg{color:var(--fg-3);top:-9px;right:-9px}

/* ------------------------------------------------------- the five lane cards */
.lane{position:relative;transition:background .3s var(--ease),transform .3s var(--ease)}
.lane::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.lane:hover::before,.lane:focus-visible::before{transform:scaleX(1)}
.lane:hover .price b{color:var(--signal)}
.lane .price b{transition:color .3s}
@media (prefers-reduced-motion:reduce){.lane::before{transition:none}}

/* ------------------------------------------------------------- the counts */
/* The studio's own ledger, set at the scale a ledger deserves. */
.counts{gap:clamp(28px,4vw,64px)}
.counts b{font-weight:200;font-size:clamp(56px,7vw,104px);line-height:.86;letter-spacing:-.03em}
.counts span{font-size:13.5px;max-width:22ch}
.counts>div{padding-top:14px;border-top:1px solid var(--line);min-width:140px}

/* ------------------------------------------------- the sheet, as real stock */
/* The pricing block is the one thing on the page a visitor is handed, so it is
   the one thing printed on stock: a lifted sheet, a printed edge, crop marks
   at the corners, and a second ink for the two rows that carry no number. */
.sheet{position:relative;background:
    linear-gradient(180deg,#FBF8F2 0%,var(--paper) 42%,#F2ECE0 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,
             0 40px 90px -46px rgba(0,0,0,.95),
             0 2px 0 rgba(0,0,0,.35);
}
.sheet::before,.sheet::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border-color:rgba(13,17,22,.32);
}
.sheet::before{left:10px;top:10px;border-left:1px solid;border-top:1px solid}
.sheet::after{right:10px;bottom:10px;border-right:1px solid;border-bottom:1px solid}
.sheet .reg{color:rgba(13,17,22,.4);right:12px;top:12px}
.sheet caption{border-bottom:1px solid #D9D2C4;padding-bottom:8px}
.sheet td.p{color:var(--ink)}
/* the two rows with no figure are printed in the second ink, so the sheet
   reads as a two-colour job and the eye is told they are a different kind of
   line rather than a missing one */
.sheet tr.quoted td.p{color:var(--signal-ink);font-weight:500}
.sheet tr.quoted th{color:var(--ink-2)}
@media (max-width:640px){.sheet::before,.sheet::after{display:none}}

/* ------------------------------------------------ the record as a spec sheet */
/* It is a record, so it is set like one: a rule per line, the index in the
   margin, the years in tabular figures, nothing decorative. */
.record .big{position:relative}
.record .big::after{
  content:"";position:absolute;left:0;right:34%;bottom:-18px;height:2px;background:var(--signal);
}
.record li{grid-template-columns:52px 1fr;padding:18px 0;align-items:start}
.record li i{font-variant-numeric:tabular-nums;color:var(--fg-3);letter-spacing:.06em}
.record li:hover{background:linear-gradient(90deg,rgba(255,74,28,.05),transparent 60%)}
.record li b{display:block;margin-bottom:3px}

/* ------------------------------------------------------------- the loop */
.loop svg{overflow:visible}
.loop .box{fill:rgba(39,48,60,.34);stroke:var(--fg-3);stroke-width:1.25}
.loop .lbl{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 40;fill:var(--fg);letter-spacing:.02em}
.loop .path{stroke:var(--signal);stroke-width:2}
.loop .ap{fill:var(--signal)}
.loop .apr{fill:none;stroke:var(--signal);stroke-width:1.25;opacity:.55}
.loop .tick{font:500 10px var(--mono);fill:var(--fg-3);letter-spacing:.1em}

/* ------------------------------------------------------------ the steps */
.step{position:relative}
.step .n{font-weight:200;font-size:clamp(46px,5vw,68px);color:var(--fg-3);opacity:.55;letter-spacing:-.03em}
.step .t{color:var(--fg-3);border-top:1px solid var(--line);padding-top:12px;margin-top:18px}

/* -------------------------------------------------------- the paper plates */
.plate{position:relative}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;
  box-shadow:0 0 0 1px rgba(13,17,22,.5) inset;
}

/* ------------------------------------------------------------- section rule */
/* A chapter ends on a printed hairline that runs the full measure, so the eye
   is handed from one plate to the next instead of falling into a gap. */
section + section > .wrap::before{}
.seam{height:1px;background:linear-gradient(90deg,var(--line),transparent 78%);margin:0}

/* --------------------------------------------------------------- the book */
#book .card{position:relative}
#book ol i{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- the footer */
footer .tag{color:var(--fg)}
footer::before{content:"";display:block;height:2px;width:64px;background:var(--signal);margin:0 0 28px}

/* ------------------------------------------------ the plate, for phones */
/* Under 700px the engine never loads. The Cycles still of the plate on its
   bed stands in for it: the same shot, at 0.16 behind the vertical scrim, so
   a phone sees the object the desktop sees moving. On wide screens the live
   canvas owns the hero and the still is hidden, never downloaded twice. */
#poster img{width:min(94%,1700px);height:auto;transform:translate(1%,14%)}
@media (max-width:699px){#poster img{width:118%;max-width:none;transform:translate(0,36%)}}


/* ------------------------------------------------ the engine's live states */
/* While the press is live, three chapters keep their copy to the left so the
   object has the right of the sheet. Under 1240 the object sits behind the
   copy at low weight instead, and under 700 the engine never loads. */
@media (min-width:1240px){
  .press-live #how .head,.press-live #book .head{grid-template-columns:minmax(0,1fr)}
  .press-live #how .wrap > *,.press-live #book .wrap > *{max-width:60%}
  .press-live #how .wrap > .loop{max-width:100%}
}
/* The price sheet: the paper lands in the engine first, then the printed
   sheet fades in over it. Its CSS shadow gives way to the contact shadow
   the paper casts. Reduced motion and phones never get the live class. */
.press-live .sheet.is-live{opacity:0;box-shadow:none;transition:opacity .32s var(--ease)}
.press-live .sheet.is-live.is-landed{opacity:1}

/* ------------------------------------------------------- the mind, under it all */
/* The structure draws on a fixed canvas behind the page. Sections are
   transparent over the void, so it shows through everywhere the copy is not.
   The grain on the hero and the paper sheets sit above it. */
#mind{position:fixed;inset:0;z-index:0;pointer-events:none}
.mind-live body::before{opacity:.6}
/* Copy over light: a ground of its own. The shadow is the contrast plate
   the research asked for, without drawing a box under every paragraph. */
.mind-live main h1,.mind-live main h2,.mind-live main h3,.mind-live main p,.mind-live main li,.mind-live main label,.mind-live main summary{
  text-shadow:0 1px 2px rgba(13,17,22,.9),0 0 22px rgba(13,17,22,.7)}
.mind-live .sheet *,.mind-live .plate *,.mind-live .btn{text-shadow:none}

/* ------------------------------------------------------------- the spine */
/* The left rail of the page is a nerve: a fibre with a synapse per chapter,
   an action potential riding the scroll, and a lane of falling stars. Fixed,
   non-interactive, desktop only. Painted by spine.js; without JS it is a
   zero-cost empty canvas. */
#spinecv{position:fixed;left:0;top:0;width:84px;height:100vh;z-index:2;
  pointer-events:none;opacity:0;transition:opacity 1.4s ease}
#spinecv.on{opacity:1}
@media (max-width:1099px),(pointer:coarse),(prefers-reduced-motion:reduce){#spinecv{display:none}}

/* ------------------------------------------------------ depth on the surfaces */
.depth{position:relative;transform-style:preserve-3d;will-change:transform;transition:box-shadow .35s var(--ease)}
.depth .sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;mix-blend-mode:screen}
.depth:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.lane.depth:hover,.step.depth:hover,.plate.depth:hover{border-color:var(--line-2)}
.sheet.depth .sheen{mix-blend-mode:multiply;opacity:.6}

/* ==================================================== v13 Phase A: the sale */
.hero h1{font-size:clamp(44px,6.2vw,104px)}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pick{font:600 14px/1 var(--text);color:var(--fg-2);background:transparent;border:1px solid var(--line-2);border-radius:99px;padding:11px 16px;cursor:pointer;min-height:44px;transition:color .2s,border-color .2s,background .2s}
.pick:hover{color:var(--fg);border-color:var(--fg-3)}
.pick[aria-pressed="true"]{color:var(--void);background:var(--paper);border-color:var(--paper)}
.plates[data-picker]{grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,1fr));align-items:start}
.plates[data-picker] .plate{transition:transform .45s var(--ease),opacity .35s}
.plates[data-picker] .plate[data-on="true"]{grid-column:1;grid-row:1}
.plates[data-picker] .plate:not([data-on="true"]){opacity:.55}
.plates[data-picker] .plate:not([data-on="true"]):hover{opacity:1}
@media (max-width:820px){.plates[data-picker]{grid-template-columns:repeat(2,minmax(0,1fr))}.plates[data-picker] .plate[data-on="true"]{grid-column:1/-1}}

.brief{margin:clamp(28px,4vw,48px) 0 0;padding:clamp(20px,3vw,32px);border:1px solid var(--line-2);border-radius:10px;background:rgba(18,24,33,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:760px;position:relative}
.brief .lab{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:16px}
.brief .lab b{font:700 22px/1.1 var(--display);font-variation-settings:"opsz" 40}
.brief .lab span{font:500 12px/1 var(--mono);color:var(--fg-3);letter-spacing:.04em}
.brief form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px}
.brief label{font:600 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-top:6px}
.brief input{width:100%;min-height:46px;padding:10px 12px;border-radius:6px;border:1px solid var(--line-2);background:var(--void);color:var(--fg);font:400 16px/1.2 var(--text)}
.brief input:focus{border-color:var(--signal);outline:none}
.brief label[for="b-ring"],.brief #b-ring,.brief label[for="b-reply"],.brief #b-reply{grid-column:1/-1}
.brief button{grid-column:1/-1;justify-self:start;margin-top:6px}
.brief .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.brief .note{margin:14px 0 0;font-size:13.5px;color:var(--fg-3)}
.brief .sent{margin-top:14px;padding:14px 16px;border-radius:6px;background:rgba(107,211,154,.1);border:1px solid rgba(107,211,154,.35);color:var(--fg);font-size:15px}
@media (max-width:640px){.brief form{grid-template-columns:minmax(0,1fr)}}

.panel{padding:clamp(20px,3vw,34px) 0;border-top:1px solid var(--line)}
.panel h3{margin-bottom:10px}
.panel p{max-width:64ch;color:var(--fg-2)}
.panel .loop{margin-top:22px}
.panel .ctas{margin-top:18px}

.readgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
@media (max-width:900px){.readgrid{grid-template-columns:minmax(0,1fr)}}
.sample{padding:20px 22px;border:1px dashed var(--line-2);border-radius:10px}
.sample ul{list-style:none;margin:10px 0 0;padding:0}
.sample li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font:500 14px/1.3 var(--mono);color:var(--fg-2)}
.sample li b{margin-left:auto;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.sample li i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.sample li i.no{background:var(--signal)}
#read .read{position:relative;margin:0}

.person h2{margin-bottom:18px}
.person{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start;margin-bottom:clamp(36px,5vw,64px)}
@media (max-width:700px){.person{grid-template-columns:minmax(0,1fr)}}
.face{width:100%;max-width:220px;aspect-ratio:1;border-radius:12px;object-fit:cover;background:var(--void-2);border:1px solid var(--line-2);display:grid;place-items:center}
.face span{font:300 72px/1 var(--display);color:var(--fg-3);letter-spacing:-.02em}
.cred{margin-top:16px;border-top:1px solid var(--line)}
.cred summary{cursor:pointer;list-style:none;padding:14px 0;font:600 15px/1.3 var(--text);color:var(--fg-2)}
.cred summary::after{content:" +";color:var(--signal)}
.cred[open] summary::after{content:" -"}
.cred ol{list-style:none;margin:0;padding:0 0 12px}
.cred li{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:var(--fg-2)}
.cred li i{font:500 12px/1.6 var(--mono);color:var(--fg-3)}
.cred li b{color:var(--fg)}
.faqhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 8px}
.fork{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(36px,5vw,64px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
@media (max-width:820px){.fork{grid-template-columns:minmax(0,1fr)}}
.fork h3{margin-bottom:8px}
.fork p{color:var(--fg-2);min-height:3.1em}
footer .kitsrow{color:var(--fg-3)}
footer .kitsrow b{color:var(--fg-2)}

nav.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:47;display:flex;flex-direction:column;gap:10px}
nav.rail a{display:flex;align-items:center;gap:10px;flex-direction:row-reverse;text-decoration:none;color:var(--fg-3);font:500 11px/1 var(--mono);letter-spacing:.04em}
nav.rail a i{width:8px;height:8px;border-radius:50%;border:1px solid var(--fg-3);background:transparent;transition:background .25s,border-color .25s,transform .25s}
nav.rail a span{opacity:0;transform:translateX(4px);transition:opacity .25s,transform .25s;white-space:nowrap}
nav.rail a:hover span,nav.rail a[aria-current] span{opacity:1;transform:none}
nav.rail a[aria-current] i{background:var(--signal);border-color:var(--signal);transform:scale(1.25)}
@media (max-width:1100px){nav.rail{display:none}}

.face small{display:block;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--fg-3);margin-top:6px;text-transform:uppercase}
.face{flex-direction:column;text-align:center}
.fields{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.fields span{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--fg-2);border:1px solid var(--line-2);border-radius:99px;padding:8px 12px}

/* ==================================================== v13: the AI chapter */
/* Five systems as five lanes (the lane card already exists), the loop, the
   two hard stops, and the instrument: the studio's own retrieval assistant,
   running on this page, with the brief-run-proof loop shown as it happens. */
#ai .lanes{margin-top:clamp(20px,3vw,32px)}
#ai .lane{min-height:300px}
#ai .lane .price b{font-size:22px;font-weight:400}
.stops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:clamp(28px,4vw,48px) 0 0}
@media (max-width:820px){.stops{grid-template-columns:minmax(0,1fr)}}
.stop{padding:22px 24px;border:1px solid var(--line-2);border-radius:8px;background:rgba(18,24,33,.7);position:relative}
.stop::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--signal);border-radius:8px 0 0 8px}
.stop b{display:block;font:700 clamp(22px,2.2vw,30px)/1.05 var(--display);font-variation-settings:"opsz" 40;margin-bottom:8px}
.stop p{margin:0;color:var(--fg-2);font-size:15px}
.aigrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(36px,5vw,64px)}
@media (max-width:980px){.aigrid{grid-template-columns:minmax(0,1fr)}}
.aigrid .loop{margin-top:0}
.aigrid .loop p{color:var(--fg-2)}
.ask{max-height:none}
.ask .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ask .chip{font:500 12.5px/1.2 var(--text);color:var(--fg-2);background:transparent;border:1px solid var(--line-2);border-radius:99px;padding:8px 12px;cursor:pointer;text-align:left}
.ask .chip:hover{color:var(--fg);border-color:var(--fg-3)}
.ask .proof{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ask .proof li{position:relative;padding:10px 12px 10px 22px;border:1px solid var(--line);border-radius:6px;font:500 11px/1.3 var(--mono);color:var(--fg-3);letter-spacing:.04em;transition:border-color .3s,color .3s}
.ask .proof li::before{content:"";position:absolute;left:9px;top:14px;width:7px;height:7px;border-radius:50%;border:1px solid var(--fg-3);transition:background .3s,border-color .3s,box-shadow .3s}
.ask .proof li b{display:block;font:700 13px/1 var(--display);font-variation-settings:"opsz" 40;color:var(--fg-2);letter-spacing:.06em;margin-bottom:3px}
.ask .proof li[data-on="run"]::before{background:var(--signal);border-color:var(--signal);box-shadow:0 0 12px var(--signal);animation:pulse 1s infinite}
.ask .proof li[data-on="done"]{border-color:var(--line-2)}
.ask .proof li[data-on="done"]::before{background:var(--ok);border-color:var(--ok)}
.ask .proof li[data-on="done"] b{color:var(--fg)}
.ask .proof li[data-on="held"]::before{background:var(--gold);border-color:var(--gold)}
.ask .answer{margin-top:14px;padding:16px 18px;border-radius:6px;background:var(--void);border:1px solid var(--line)}
.ask .answer .a{margin:0;font:400 16px/1.55 var(--text);color:var(--fg)}
.ask .answer .cites{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.ask .answer .cites a{font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--fg-2);text-decoration:none;border:1px solid var(--line-2);border-radius:99px;padding:6px 10px}
.ask .answer .cites a:hover{border-color:var(--signal);color:var(--fg)}
.ask .answer .cites a::before{content:"[ ";color:var(--signal)}
.ask .answer .cites a::after{content:" ]";color:var(--signal)}
.ask .answer .checks{margin:10px 0 0;font:500 11.5px/1.5 var(--mono);color:var(--fg-3);letter-spacing:.03em}
.ask .answer .checks i{font-style:normal;color:var(--ok)}
.ask .answer .checks i.warn{color:var(--gold)}
.ask .answer .checks i.off{color:var(--fg-2)}
.aiprice{display:flex;flex-wrap:wrap;gap:12px 28px;margin:clamp(28px,4vw,44px) 0 0;padding-top:20px;border-top:1px solid var(--line);align-items:baseline}
.aiprice div{display:flex;flex-direction:column;gap:4px}
.aiprice b{font:300 clamp(26px,3vw,40px)/1 var(--display);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.aiprice span{font:400 13px/1.4 var(--text);color:var(--fg-3);max-width:24ch}
.aiprice .ctas{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.out .sum .verdict{margin:10px 0 0;padding:12px 14px;border-left:3px solid var(--signal);background:rgba(255,74,28,.06);color:var(--fg);font:400 15px/1.55 var(--text)}
.out .sum .verdict small{display:block;margin-top:6px;font:500 11px/1 var(--mono);color:var(--fg-3);letter-spacing:.04em}