/* ═══════════ SHARED DESIGN SYSTEM (assets/base.css in the real build) ═══════════ */
:root{
  --void:#000; --carbon:#060606; --onyx:#1f1f1f; --graphite:#252525;
  --iron:#313131; --slate:#3d3d3d; --fog:#525252; --ash:#7a7a7a;
  --smoke:#8a8a8a; --pearl:#c5c5c5; --bone:#e5e5e5; --chalk:#fff;
  --lime:#c5ff4a; --olive:#597321; --moss:#314013;
  --serif:'Source Serif 4', ui-serif, Georgia, serif;
  --sans:'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max:1280px; --gut:64px;
  --glow:0 0 8px 0 rgba(197,255,74,.45);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media(max-width:900px){:root{--gut:24px}}

*,*::before,*::after{box-sizing:border-box}
/* The browser hides [hidden] elements with a UA rule, which any author
   display declaration outranks. #view-brief sets display:flex, so it kept
   rendering below the footer while the router had it marked hidden. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carbon);color:var(--bone);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
::selection{background:var(--lime);color:#000}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:300;margin:0;color:var(--chalk)}
/* padding + negative margin gives descenders and italic overhang room to breathe
   so nothing gets clipped by overflow or tight line-heights */
h1{font-size:clamp(40px,6vw,78px);line-height:1;letter-spacing:-.032em;
  padding-bottom:.06em;margin-bottom:-.06em}
h2{font-size:clamp(30px,4.1vw,48px);line-height:1.06;letter-spacing:-.026em;
  padding-bottom:.08em;margin-bottom:-.08em}
h3{font-size:clamp(21px,2.4vw,28px);line-height:1.2;letter-spacing:-.018em;
  padding-bottom:.06em;margin-bottom:-.06em}
h4{font-size:19px;line-height:1.3;letter-spacing:-.012em}
p{margin:0}
em.accent{font-family:var(--serif);font-weight:300;font-style:italic;color:var(--lime);
  padding-right:.06em}

.meta{font-family:var(--sans);font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;color:var(--ash);margin:0;line-height:1.5}
.meta.lime{color:var(--lime)}
.meta.dim{color:var(--fog)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fog);line-height:1.6}
.lede{font-size:16px;line-height:1.65;color:var(--pearl);max-width:46ch}
.reassure{font-size:12px;color:var(--fog);line-height:1.6}
.reassure b{color:var(--ash);font-weight:500}

.band{border-top:1px solid var(--graphite)}
.frame{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  border-left:1px solid var(--graphite);border-right:1px solid var(--graphite)}
@media(max-width:1279px){.frame{border-left:0;border-right:0}}
.pad{padding-top:80px;padding-bottom:80px}
.pad-sm{padding-top:48px;padding-bottom:48px}
@media(max-width:900px){.pad{padding-top:56px;padding-bottom:56px}}
.divider-lime{height:6px;background:var(--lime);width:100%}

.shead{display:grid;grid-template-columns:1fr auto;align-items:start;gap:20px;margin-bottom:44px}
.shead .lede{grid-column:1/-1;max-width:48ch;font-size:15px;color:var(--ash);margin-top:12px}
@media(max-width:700px){.shead{grid-template-columns:1fr}.shead .mono{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;padding:16px 26px;border-radius:4px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s,color .2s,transform .2s var(--ease)}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-fill{background:var(--lime);color:#000;box-shadow:var(--glow)}
.btn-fill:hover{background:#d6ff7a;transform:translateY(-1px)}
.btn-quiet{background:transparent;color:var(--pearl);border-color:var(--iron)}
.btn-quiet:hover{border-color:var(--fog);color:var(--chalk)}
.btn[disabled]{cursor:not-allowed;box-shadow:none;transform:none}
.btn-fill[disabled]{background:transparent;border-color:var(--iron);color:var(--fog)}
.btn-fill[disabled]:hover{background:transparent;transform:none}
.btn.ready{animation:primed 1.7s ease-in-out 2}
@keyframes primed{0%,100%{box-shadow:var(--glow)}
  50%{box-shadow:0 0 18px 2px rgba(197,255,74,.55)}}

.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lime);
  color:var(--lime);border-radius:9999px;padding:5px 12px;font-size:11px;
  font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 6px var(--lime);animation:blip 2.6s ease-in-out infinite;flex:none}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}

.rise{opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}

.field{display:grid;gap:9px}
.field > label{font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--ash)}
input[type=text],input[type=email],select,textarea{
  font-family:var(--sans);font-size:15px;color:var(--chalk);width:100%;
  background:var(--onyx);border:1px solid var(--iron);border-radius:2px;
  padding:15px 16px;transition:border-color .18s,background .18s}
textarea{resize:vertical;min-height:118px;line-height:1.65}
input:hover,select:hover,textarea:hover{border-color:var(--fog)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lime);background:#232323}
input::placeholder,textarea::placeholder{color:var(--fog)}
select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%237a7a7a'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.duo{grid-template-columns:1fr}}

.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opts.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.opts.two{grid-template-columns:1fr}}
/* three across is fine for short band labels until the phone, where two
   still reads and one wastes the screen */
@media(max-width:640px){.opts.three{grid-template-columns:1fr 1fr}}
.opt{display:block;cursor:pointer;position:relative}
.opt > input{position:absolute;opacity:0;width:0;height:0}
.opt .box{display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--iron);background:var(--onyx);border-radius:2px;padding:16px 18px;
  transition:border-color .18s,background .18s}
.opt:hover .box{border-color:var(--fog);background:#232323}
.opt > input:checked + .box{border-color:var(--lime);background:rgba(197,255,74,.07)}
.opt > input:focus-visible + .box{outline:2px solid var(--lime);outline-offset:2px}
.opt .key{flex:none;width:22px;height:22px;border:1px solid var(--fog);border-radius:2px;
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--fog);
  transition:.18s;margin-top:1px}
.opt > input:checked + .box .key{background:var(--lime);border-color:var(--lime);color:#000}
.opt .t{display:block;font-size:15px;font-weight:500;color:var(--chalk);line-height:1.4}
.opt .d{display:block;font-size:13px;color:var(--ash);margin-top:4px;line-height:1.5}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.wordmark{font-weight:600;font-size:15px;letter-spacing:.28em;color:var(--chalk);
  text-decoration:none;white-space:nowrap}
.wordmark i{font-style:normal;color:var(--lime)}

/* ═══════════════════════════ HOMEPAGE ═══════════════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(0,0,0,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--graphite);
  transition:transform .38s var(--ease),border-color .3s,background .3s}
.nav.stuck{border-bottom-color:var(--graphite)}
.nav.hidden{transform:translateY(-100%)}
.nav-in{max-width:var(--max);margin:0 auto;height:68px;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-mid{display:flex;gap:32px}
.nav-mid a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:var(--pearl);text-decoration:none;transition:color .18s;position:relative;padding:4px 0}
.nav-mid a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.nav-mid a:hover{color:var(--chalk)}
.nav-mid a:hover::after{transform:scaleX(1)}
.nav .btn{padding:12px 20px}
#scrollbar{position:fixed;top:0;left:0;height:2px;background:var(--lime);width:0;
  z-index:95;box-shadow:var(--glow)}
@media(max-width:1000px){.nav-mid{display:none}}

.hero{position:relative;overflow:hidden;background:var(--void);padding-top:68px;
  min-height:100svh;display:flex;flex-direction:column}
.hero .frame{width:100%;padding-top:40px;padding-bottom:40px;flex:1;
  display:flex;flex-direction:column;justify-content:center}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
@media(max-width:1080px){
  .hero{min-height:0;display:block}
  .hero .frame{display:block;padding-top:48px;padding-bottom:40px}
  .hero-grid{grid-template-columns:1fr;gap:36px}}
.hero-copy{display:grid;gap:22px;justify-items:start}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .ln b{display:block;font-weight:300;transform:translateY(105%);
  animation:lift .9s var(--ease) forwards}
.hero h1 .ln:nth-of-type(2) b{animation-delay:.09s}
@keyframes lift{to{transform:none}}
.fade{opacity:0;animation:fadeUp .8s var(--ease) .34s forwards}
.fade.d2{animation-delay:.46s}
.fade.d3{animation-delay:.58s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── the picker: tags, not a wall of buttons ── */
.picker{width:100%;display:grid;gap:14px}
.pick-q{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pick-q strong{font-family:var(--serif);font-weight:300;font-size:20px;color:var(--chalk);
  letter-spacing:-.015em;line-height:1.35}
.pick-q span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fog)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.2;color:var(--bone);
  background:var(--onyx);border:1px solid var(--iron);border-radius:4px;
  padding:11px 15px;cursor:pointer;
  transition:border-color .16s,background .16s,color .16s,transform .16s var(--ease)}
.chip-opt .mk{width:14px;height:14px;border:1px solid var(--fog);border-radius:2px;flex:none;
  display:grid;place-items:center;font-size:9px;line-height:1;color:transparent;
  transition:.16s}
.chip-opt:hover{border-color:var(--fog);color:var(--chalk);transform:translateY(-1px)}
.chip-opt[aria-pressed="true"]{border-color:var(--lime);background:rgba(197,255,74,.09);
  color:var(--chalk)}
.chip-opt[aria-pressed="true"] .mk{background:var(--lime);border-color:var(--lime);color:#000}
.chip-opt[aria-pressed="true"] .mk::after{content:"✓"}

/* ── the brief assembles as they tap: the signature moment ── */
.bcard{border:1px solid var(--graphite);background:var(--carbon);border-radius:2px;
  opacity:0;animation:fadeUp 1s var(--ease) .5s forwards}
/* nothing above the footer is clickable, so nothing above it should
   behave like it is */
.bc-b{pointer-events:none;user-select:none}
.bc-b{padding:6px 20px}
.bc-hint{display:flex;align-items:center;gap:8px;padding:18px 20px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog);pointer-events:none}
.bc-hint .ar{color:var(--lime);animation:nudge 2s ease-in-out infinite;display:inline-block}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.bcard.has-items .bc-hint{display:none}
.bcard.has-items .bc-b{padding-top:16px}
.bc-step{display:grid;grid-template-columns:26px 1fr auto;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--graphite);transition:opacity .3s}
.bc-state{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fog);line-height:1.9;white-space:nowrap;align-self:start}
.bc-step.live .bc-state{color:var(--lime)}
.caret{display:inline-block;width:6px;height:11px;background:var(--olive);
  vertical-align:-1px;margin-right:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.bc-step:last-child{border-bottom:0}
.bc-step .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--fog);
  line-height:1.7;transition:color .3s}
.bc-step.live .n{color:var(--lime)}
.bc-step.off{opacity:.42}
.bc-step .l{font-size:14px;font-weight:500;color:var(--chalk);line-height:1.4}
.bc-step .s{font-size:12px;color:var(--ash);margin-top:4px;line-height:1.5}
.bc-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;
  min-height:26px;overflow:hidden;transition:height .36s var(--ease)}
.bc-list li{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--lime);
  letter-spacing:.02em;animation:slotIn .32s var(--ease)}
.bc-list li::before{content:"› ";color:var(--olive)}
.bc-list li.ph{color:var(--fog);animation:none}
.bc-list li.ph::before{content:"› ";color:var(--iron)}
@keyframes slotIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.bc-f{border-top:1px solid var(--graphite);padding:18px 20px;display:grid;gap:12px}
.bc-f .btn{width:100%}
.picker-cta{display:none;gap:12px;width:100%;max-width:420px}
.picker-cta .btn{width:100%}
@media(max-width:1080px){
  .bcard{display:none}
  .picker-cta{display:grid}}
.bc-offer{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.5;
  color:var(--ash)}
.bc-offer .tag{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#000;background:var(--lime);border-radius:2px;padding:3px 7px;flex:none}
.bc-offer b{color:var(--pearl);font-weight:400}

/* ── proof and the scroll cue share one bar at the fold ── */
.hero-foot{border-top:1px solid var(--graphite);background:var(--void)}
.hero-foot .frame{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:0;padding-bottom:0;flex-direction:row}
.hstats{display:flex;flex-wrap:wrap;flex:1}
.hstats div{padding:20px 32px 20px 0;margin-right:32px;
  border-right:1px solid var(--graphite)}
.hstats div:last-child{border-right:0;margin-right:0}
.hstats b{display:block;font-family:var(--serif);font-weight:300;font-size:24px;
  color:var(--chalk);line-height:1.2;letter-spacing:-.02em}
.hstats span{display:block;margin-top:5px;font-size:10px;letter-spacing:.16em}
.cue{display:flex;align-items:center;gap:10px;flex:none}
.cue span{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fog)}
.cue i{display:block;width:1px;height:22px;background:linear-gradient(var(--fog),transparent);
  animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3;transform:translateY(-3px)}50%{opacity:1;transform:translateY(2px)}}
@media(max-width:820px){
  .hero-foot .frame{flex-wrap:wrap}
  .hstats div{padding:16px 20px 16px 0;margin-right:20px}
  .hstats b{font-size:20px}
  .cue{display:none}}

.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--graphite);border-radius:2px;overflow:hidden}
.logos .cell{height:94px;display:grid;place-items:center;padding:18px;position:relative;
  border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);
  transition:background .25s}
.logos .cell:hover{background:var(--onyx)}
.logos .cell:nth-child(5n){border-right:0}
.logos .cell:nth-last-child(-n+5){border-bottom:0}
.logos img{max-height:24px;max-width:min(130px,100%);width:auto;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);opacity:.42;transition:opacity .25s}
.logos .cell:hover img{opacity:1}
/* FlipSplit's mark is dark script inside a white keyline - it needs both
   colours to stay legible. brightness(0) flattens fill and keyline to the
   same value and they merge into a blob, so invert this one without
   flattening: the script goes light, the keyline goes black, and the dark
   cell swallows the keyline. */
.logos img[src*="flipsplit"],
.qt .co[src*="flipsplit"]{filter:grayscale(1) invert(1)}
.logos svg{height:24px;width:auto;max-width:min(130px,100%);fill:var(--chalk);opacity:.42;
  transition:opacity .25s}
.logos .cell:hover svg{opacity:1}
.logos .wm{display:none;font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);transition:color .25s}
.logos .cell:hover .wm{color:var(--chalk)}
@media(max-width:900px){
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logos .cell{height:78px}
  .logos .cell:nth-child(5n){border-right:1px solid var(--graphite)}
  .logos .cell:nth-child(3n){border-right:0}
  .logos .cell:nth-last-child(-n+5){border-bottom:1px solid var(--graphite)}
  .logos .cell:nth-last-child(-n+1){border-bottom:0}}
@media(max-width:520px){
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos .cell{padding:16px 10px}
  .logos .cell:nth-child(3n){border-right:1px solid var(--graphite)}
  .logos .cell:nth-child(2n){border-right:0}}

/* comparison: the common-enemy argument as one glanceable object */
.vs{border:1px solid var(--graphite);border-radius:2px;overflow:hidden;
  display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr}
.vs > div{padding:20px 22px;border-right:1px solid var(--graphite);
  border-bottom:1px solid var(--graphite);font-size:14px;line-height:1.5;color:var(--pearl)}
.vs > div:nth-child(4n){border-right:0}
.vs > div:nth-last-child(-n+4){border-bottom:0}
.vs .hd{background:var(--onyx);color:var(--chalk);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em}
.vs .rl{color:var(--fog);font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em}
.vs .us{background:rgba(197,255,74,.05);color:var(--chalk)}
.vs .hd.us{background:rgba(197,255,74,.12);color:var(--lime)}
.vs .alt{color:var(--ash)}
.vs .us{font-weight:500}
.vs .us::before{content:"✓ ";color:var(--lime);font-weight:600}
.vs .hd.us::before{content:none}
/* Below 820 the four-column table drops the row-label column to its own
   full-width row, but the three compared columns must stay three columns:
   split into two, the headers land in a 2x2 block that no longer sits above
   the values it names, and the TESTLAB cell is stranded on a half-width row. */
@media(max-width:820px){
  .vs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vs > div:first-child{display:none}          /* the header row's empty corner */
  .vs > div{padding:16px 12px;font-size:13px}
  .vs .rl{grid-column:1/-1;background:var(--carbon);border-right:0}
  .vs > div:nth-last-child(-n+4){border-bottom:1px solid var(--graphite)}
  .vs > div:nth-last-child(-n+3){border-bottom:0}}
@media(max-width:430px){
  .vs > div{padding:12px 8px;font-size:12px}
  .vs .hd{font-size:10px;letter-spacing:.06em}
  .vs .rl{font-size:10px;letter-spacing:.1em}}

.caps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--graphite);
  border:1px solid var(--graphite);border-radius:2px;overflow:hidden}
.cap{background:var(--carbon);padding:36px;display:grid;gap:16px;align-content:start;
  transition:background .3s var(--ease);position:relative}
.cap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.cap:hover{background:var(--onyx)}
.cap:hover::before{transform:scaleY(1)}
.cap-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.cap p{color:var(--pearl);font-size:14px;line-height:1.6;max-width:44ch}
.spec{border-top:1px solid var(--graphite);padding-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.spec span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pearl);border:1px solid var(--iron);border-radius:2px;padding:5px 9px}
@media(max-width:860px){.caps{grid-template-columns:minmax(0,1fr)}.cap{padding:28px}}

.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--graphite);
  border:1px solid var(--graphite);border-radius:2px;overflow:hidden}
.fig{background:var(--carbon);padding:32px 30px;position:relative}
/* The number on its own reads as the value rather than the change - 22%
   average order value instead of 22% more of it - so the two lift figures
   carry an explicit arrow. The third figure is a count, not a lift, and
   deliberately has none. */
.fig .trend{position:absolute;top:28px;right:28px;margin:0;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--moss);background:rgba(197,255,74,.08)}
.fig .trend svg{display:block;width:9px;height:11px;fill:var(--lime)}
.fig b{display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,5vw,58px);line-height:1.1;letter-spacing:-.03em;color:var(--chalk);
  padding-bottom:.04em}
.fig b i{font-style:italic;color:var(--lime)}
.fig span{display:block;margin-top:10px}
.fig small{display:block;margin-top:8px;font-size:12px;color:var(--fog);line-height:1.5}
@media(max-width:900px){.figs{grid-template-columns:minmax(0,1fr)}}

.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--graphite);
  border:1px solid var(--graphite);border-radius:2px;overflow:hidden}
.qt{background:var(--carbon);padding:32px 30px;display:flex;flex-direction:column;
  justify-content:space-between;gap:24px}
.qt q{font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.5;
  color:var(--chalk);quotes:none;padding-bottom:.06em}
.qt q::before{content:"“";color:var(--lime);margin-right:2px}
.qt q::after{content:"”";color:var(--lime);margin-left:1px}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who > *{min-width:0}
.qt .who{justify-content:space-between}
.qt .co{height:19px;width:auto;max-width:104px;object-fit:contain;flex:none;
  filter:grayscale(1) brightness(0) invert(1);opacity:.38;transition:opacity .25s}
.qt:hover .co{opacity:.8}
.who .av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--iron)}
.who .nm{display:block;font-size:13px;font-weight:500;color:var(--chalk);line-height:1.4}
@media(max-width:900px){.quotes{grid-template-columns:minmax(0,1fr)}}
/* the byline sits name-left, client-logo-right; under ~430 the two no longer
   fit on one line, so let the logo drop rather than force the card wider than
   its column - a 1fr track will not shrink under it and .quotes clips. */
@media(max-width:430px){
  .qt{padding:26px 20px}
  .qt .who{flex-wrap:wrap;gap:14px}
  .qt .co{max-width:88px}}

.founders{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--graphite);
  border:1px solid var(--graphite);border-radius:2px;overflow:hidden}
.fdr{background:var(--carbon);padding:34px;display:grid;gap:18px;align-content:start}
.fdr-h{display:flex;align-items:center;gap:16px}
.tile{width:60px;height:60px;border-radius:4px;background:var(--lime);
  border:1px solid var(--lime);color:#000;
  display:grid;place-items:center;font-family:var(--serif);font-weight:300;font-size:28px;
  box-shadow:var(--glow);flex:none;position:relative;overflow:hidden}
.tile.alt{background:transparent;border:1px solid var(--lime);color:var(--lime)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px}
.fdr p{font-size:14px;line-height:1.65;color:var(--pearl)}
.fdr .facts{border-top:1px solid var(--graphite);padding-top:16px;display:grid;gap:9px;margin:0}
.fdr .facts div{display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.6}
.fdr .facts dt{color:var(--fog);text-transform:uppercase;letter-spacing:.12em}
.fdr .facts dd{color:var(--bone);margin:0;text-align:right}
@media(max-width:860px){.founders{grid-template-columns:minmax(0,1fr)}}

.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--graphite);
  border:1px solid var(--graphite);border-radius:2px;overflow:hidden}
.node{background:var(--carbon);padding:30px 26px 32px;display:grid;gap:8px;align-content:start}
.node .n{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--lime)}
.node h4{margin-top:4px}
.node .when{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog);border:1px solid var(--iron);border-radius:2px;padding:4px 8px;
  justify-self:start;margin-top:2px}
.node p{font-size:13px;color:var(--ash);line-height:1.6;margin-top:4px}
@media(max-width:940px){.flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.flow{grid-template-columns:minmax(0,1fr)}}

.endbar{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.endbar h3{max-width:20ch}
.endbar .right{display:grid;gap:10px;justify-items:end}
@media(max-width:760px){.endbar{grid-template-columns:1fr}
  .endbar .right{justify-items:start}}

.foot{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
.foot nav{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.foot a{color:var(--ash);text-decoration:none;font-size:13px;transition:color .18s}
.foot a:hover{color:var(--lime)}
@media(max-width:820px){.foot{grid-template-columns:1fr;justify-items:start;gap:18px}
  .foot nav{justify-content:flex-start}}

/* ═══════════════════════ PROJECT BRIEF FLOW ═══════════════════════ */
#view-brief{min-height:100vh;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:40;background:var(--void);border-bottom:1px solid var(--graphite)}
.bar-in{max-width:var(--max);margin:0 auto;height:64px;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.bar .exit{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--ash);
  text-decoration:none;transition:color .18s}
.bar .exit:hover{color:var(--lime)}
#tick{position:fixed;top:0;left:0;height:2px;width:0;background:var(--lime);
  box-shadow:var(--glow);z-index:50;transition:width .5s var(--ease)}

.shell{flex:1;max-width:var(--max);margin:0 auto;width:100%;padding:0 var(--gut);
  display:grid;grid-template-columns:226px 1fr;
  border-left:1px solid var(--graphite);border-right:1px solid var(--graphite)}
@media(max-width:1279px){.shell{border-left:0;border-right:0}}
.rail{border-right:1px solid var(--graphite);padding:44px 30px 44px 0}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;position:sticky;top:108px}
.rail li{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fog);transition:color .25s}
.rail li .b{width:7px;height:7px;border-radius:50%;background:var(--iron);flex:none;transition:.25s}
.rail li.done{color:var(--ash);cursor:pointer}
.rail li.done .b{background:var(--olive)}
.rail li.now{color:var(--lime)}
.rail li.now .b{background:var(--lime);box-shadow:var(--glow)}
.rail .note{margin-top:28px;padding-top:18px;border-top:1px solid var(--graphite)}
@media(max-width:1000px){.shell{grid-template-columns:1fr}.rail{display:none}}

.stage{padding:52px 40px 40px;display:flex;flex-direction:column;flex:1}
@media(max-width:1000px){.stage{padding:36px 0 32px}}
.screen{display:none;max-width:660px;width:100%;margin:0 auto}
.screen.on{display:block;animation:enter .42s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.screen > .meta{margin-bottom:16px}
.screen h2{margin-bottom:12px}
.screen .lede{margin-bottom:30px;font-size:15px;color:var(--ash);max-width:52ch}
.group{margin-bottom:30px}
.group > .meta{margin-bottom:14px}
.group .hint{font-size:13px;color:var(--fog);margin:-4px 0 12px}

.ctrl{position:sticky;bottom:0;background:linear-gradient(to top,var(--carbon) 66%,transparent);
  padding:22px 0 28px;margin-top:auto;max-width:660px;width:100%;margin-left:auto;margin-right:auto}
.ctrl-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--graphite);padding-top:22px}
.ctrl .kb{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--fog);
  margin-left:auto;text-transform:uppercase}
.kb kbd{border:1px solid var(--iron);border-radius:2px;padding:2px 6px;color:var(--pearl)}
.err{color:#ff9b78;font-size:13px;flex-basis:100%;min-height:1em;margin:0}
@media(max-width:680px){.ctrl .kb{display:none}}

.readout{border:1px solid var(--iron);border-left:2px solid var(--lime);background:var(--onyx);
  padding:20px 22px;margin-bottom:30px;animation:enter .4s var(--ease)}
.readout b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.readout p{font-size:14px;line-height:1.65;color:var(--pearl)}

/* micro-affirmations: value delivered mid-flow, not after */
.affirm{margin-top:16px;padding:12px 16px;border-left:2px solid var(--lime);
  background:rgba(197,255,74,.05);font-size:13px;line-height:1.6;color:var(--pearl);
  animation:enter .35s var(--ease)}
.affirm b{color:var(--lime);font-weight:500}

/* tease-and-unlock at the gate */
.tease{border:1px solid var(--iron);border-radius:2px;background:var(--onyx);margin-bottom:30px}
.tease-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--iron)}
.tease-row:last-child{border-bottom:0}
.tease-row .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fog)}
.tease-row .v{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--lime)}
.tease-row.locked .v{color:var(--fog);filter:blur(2.5px);user-select:none}
.tease-row.locked::after{content:"🔒";font-size:11px;filter:grayscale(1) opacity(.5);margin-left:-8px}
.privacy{font-size:12px;line-height:1.6;color:var(--fog);margin-top:16px}

.recap{border-top:1px solid var(--graphite);padding-top:14px;margin-top:8px}
.recap summary{cursor:pointer;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);list-style:none;transition:color .18s}
.recap summary::-webkit-details-marker{display:none}
.recap summary::before{content:"+ ";color:var(--lime)}
.recap[open] summary::before{content:"– "}
.recap summary:hover{color:var(--lime)}
.recap .doc-b{padding:6px 0 0}

/* the read */
.read-block{border-top:1px solid var(--graphite);padding:24px 0}
.read-block > .meta{margin-bottom:12px}
.read-track{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.15;
  letter-spacing:-.02em;color:var(--lime);margin-bottom:12px;padding-bottom:.06em}
.read-body{font-size:15px;line-height:1.7;color:var(--bone);max-width:58ch}
.read-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.read-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:14px;
  line-height:1.6;color:var(--pearl)}
.read-list li::before{content:"▸";color:var(--lime)}
.read-next{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.read-next li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--graphite)}
.read-next li:last-child{border-bottom:0}
.read-next span{font-family:var(--mono);font-size:11px;color:var(--lime);line-height:1.7}
.read-next p{font-size:14px;color:var(--pearl)}

.doc{border:1px solid var(--graphite);border-radius:2px;background:var(--void);
  margin-bottom:28px}
.doc-h{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--graphite);flex-wrap:wrap}
.doc-b{padding:6px 22px 22px}
.doc dl{margin:0}
.doc .ln{display:grid;grid-template-columns:142px 1fr;gap:18px;padding:13px 0;
  border-bottom:1px dashed var(--iron);font-family:var(--mono);font-size:12px;line-height:1.75}
.doc .ln:last-child{border-bottom:0}
.doc dt{color:var(--fog);text-transform:uppercase;letter-spacing:.13em;font-size:10px;padding-top:4px}
.doc dd{margin:0;color:var(--bone);white-space:pre-wrap}
.doc dd.empty{color:var(--fog)}
.doc dd .edit{background:none;border:0;color:var(--olive);font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer;padding:0;margin-left:10px;
  transition:color .18s}
.doc dd .edit:hover{color:var(--lime);text-decoration:underline}
@media(max-width:640px){.doc .ln{grid-template-columns:1fr;gap:5px}}

.sent{display:none;max-width:620px}
.sent.on{display:block;animation:enter .5s var(--ease)}
.sent .steps{margin:26px 0 30px;border-top:1px solid var(--graphite)}
.sent .steps div{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--graphite)}
.sent .steps span{font-family:var(--mono);font-size:11px;color:var(--lime);line-height:1.7}
.sent .steps p{font-size:14px;color:var(--pearl)}

/* ═══════════════ FLUID GRADIENT HERO BACKGROUND ═══════════════ */
#gradient-canvas{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  /* static fallback in the same palette: shows before WebGL boots, and stays
     put if the device has no WebGL at all */
  background:
    radial-gradient(120% 90% at 16% 10%, rgba(78,156,39,.28) 0%, transparent 58%),
    radial-gradient(90% 75% at 84% 80%, rgba(21,48,15,.9) 0%, transparent 64%),
    var(--void);
}
#gradient-canvas canvas{display:block;width:100%!important;height:100%!important}
/* scrim. the fluid moves, the contrast under the copy does not. */
#gradient-canvas::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.2) 72%,rgba(0,0,0,.36) 100%),
    linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 60%,rgba(0,0,0,.8) 100%);
}
.hero{background:var(--void)}
.hero .frame{position:relative;z-index:1}
.hero-foot{position:relative;z-index:1;background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@media(max-width:1080px){
  /* taller hero on mobile, so pull the scrim in tighter under the copy */
  #gradient-canvas::after{background:
    linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.86) 100%)}
}
/* optional: let the brief card read as glass over the fluid instead of a slab.
   uncomment to try it.
.bcard{background:rgba(6,6,6,.72);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
*/

/* The legal links sit on their own line, quieter than the section links -
   but they have to be present somewhere: the brief collects names, emails,
   site URLs and revenue figures, and until now the site linked no policy
   at all. The border is outside .frame so it spans the full width. */
.foot-legal{border-top:1px solid var(--graphite);padding:18px 0 22px}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.foot-legal a{color:var(--fog);text-decoration:none;font-size:12px;
  transition:color .18s}
.foot-legal a:hover{color:var(--pearl)}