@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-var.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-display:swap}
:root{
  --void:#050505; --char-1:#0C0E0D; --char-2:#141715; --char-3:#1C201D;
  --ink:#EDEFEA; --ink-dim:#B9BEB8; --lime:#5AFF15;
  --serif:'Space Grotesk',system-ui,sans-serif;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --step--1:clamp(14px,.85rem + .2vw,16px);
  --step-0:clamp(16px,.95rem + .3vw,18px);
  --step-1:clamp(20px,1.1rem + .8vw,26px);
  --step-2:clamp(24px,1.1rem + 1.6vw,36px);
  --step-2b:clamp(27px,1.1rem + 2.5vw,52px);
  --step-3:clamp(36px,1.5rem + 3.5vw,70px);
  --step-4:clamp(50px,2rem + 7vw,120px);
}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.rm{scroll-behavior:auto}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.6;overflow-x:clip}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--lime);color:var(--void);padding:8px 16px;z-index:100}
.skip-link:focus{left:0}

/* ===== Atmosphere ===== */
.aurora{position:fixed;inset:-20%;z-index:-3;pointer-events:none;background:
  radial-gradient(60% 45% at 70% 20%, rgba(90,255,21,.05), transparent 70%),
  radial-gradient(50% 40% at 20% 80%, rgba(90,255,21,.03), transparent 70%);
  animation:drift 40s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{to{transform:translate3d(4%,6%,0) scale(1.08)}}
.grain{position:fixed;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.aurora{animation:none}}

/* ===== Header ===== */
header{position:fixed;top:0;left:0;right:0;z-index:20}
header::before{content:"";position:absolute;inset:0 0 -34px;background:linear-gradient(rgba(5,5,5,.92) 40%,transparent);pointer-events:none;z-index:-1}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,4vw,48px)}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding:15px 0;min-height:14px}
.nav-brand-name{font:500 14px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--ink)}
.nav-cta{font:500 13px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--void);background:var(--lime);padding:16px 28px;border-radius:999px;box-sizing:border-box;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(90,255,21,.35)}
.nav-cta,.submit-btn{transition-property:transform,box-shadow,translate;transition-duration:.25s,.25s,.45s;transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.nav-chapter{position:absolute;left:50%;transform:translateX(-50%);font:500 11px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--ink-dim);background:rgba(5,5,5,.7);border:1px solid rgba(237,239,234,.1);border-radius:999px;padding:8px 16px;transition:opacity .3s;opacity:0;pointer-events:none;white-space:nowrap}
.nav-chapter.on{opacity:1}
.nav-chapter .accent{color:var(--lime)}
@media (max-width:949px){
  /* Chip would half-cover "The Work" once the burger joined the right cluster
     (clearance <10px below ~950px) — hide it; the burger index covers wayfinding. */
  .nav-chapter{display:none}
}
@media (max-width:699px){
  .pm-val{font-size:38px}
  .pm-yr{font-size:24px}
}
.node-tip strong,.node-sheet strong{display:block;font:500 12px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--lime);margin-bottom:7px}
.node-sheet{position:fixed;left:50%;bottom:82px;transform:translateX(-50%) translateY(10px);width:min(330px,86vw);background:rgba(8,10,9,.97);border:1px solid rgba(90,255,21,.45);border-radius:14px;padding:15px 17px;font:400 16px/1.55 var(--sans);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .3s;z-index:40;box-shadow:0 12px 44px rgba(0,0,0,.6);pointer-events:none}
.node-sheet.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ===== Hero ===== */
#hero{height:180vh}
@media (max-width:699px){#hero{height:140svh}}
@media (prefers-reduced-motion:reduce){#hero{height:100svh}}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
@media (max-width:699px){.hero-sticky{height:100svh}}
#eco{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-2;pointer-events:none}
#dust{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-2;pointer-events:none}
.node-labels{position:absolute;inset:0;pointer-events:none;z-index:3}
.node-label:hover,.node-label.show{z-index:5}
.node-label{position:absolute;top:0;left:0;font:500 12px/1 var(--mono);letter-spacing:2px;color:var(--ink-dim);background:rgba(5,5,5,.72);padding:6px 10px;border-radius:999px;border:1px solid rgba(237,239,234,.12);white-space:nowrap;transition:color .5s,border-color .5s;will-change:transform,opacity;pointer-events:auto;cursor:pointer}
.node-label.lit{color:var(--lime);border-color:rgba(90,255,21,.5)}
.node-tip{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:232px;background:rgba(8,10,9,.98);border:1px solid rgba(90,255,21,.45);border-radius:10px;padding:12px 14px;font:400 16px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;white-space:normal;text-align:left;pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,.6)}
.node-label:hover .node-tip,.node-label.show .node-tip{opacity:1;visibility:visible}
.hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 clamp(20px,5vw,64px);will-change:opacity,transform;pointer-events:none}
.hero-inner a{pointer-events:auto}
.hero-inner::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(84vw,1150px);height:78%;background:radial-gradient(ellipse 50% 50% at center,rgba(5,5,5,.94),rgba(5,5,5,.6) 55%,transparent 74%);z-index:-1}
.hero-sub{text-shadow:0 1px 24px rgba(5,5,5,.9)}
.hero-eyebrow{font:500 clamp(12px,1vw,14px)/1 var(--mono);letter-spacing:6px;text-transform:uppercase;color:var(--lime);margin:0 0 26px}
.hero-title{font:600 var(--step-3)/1.06 var(--serif);letter-spacing:-.015em;margin:0;max-width:min(17ch,92vw);text-wrap:balance;text-shadow:0 2px 40px rgba(5,5,5,.85)}
.hero-title .accent{color:var(--lime)}
.tap-hint{display:none}
.hero-sub{font:300 var(--step-1)/1.4 var(--sans);color:var(--ink-dim);margin:28px 0 0}
.hero-cue{position:absolute;bottom:32px;left:50%;translate:-50% 0;white-space:nowrap;width:max-content;font:500 13px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;padding:16px 8px;animation:cue 2.6s ease-in-out infinite;transition:color .3s}
.hero-cue:hover{color:var(--lime)}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.hero-cue{animation:none}}

.sys-big,.proof-headline,.partner-headline,.filter-big,.work-headline,.machine-headline{letter-spacing:-.012em}

/* ===== Sections shared ===== */
main section{padding:clamp(80px,12vh,140px) clamp(20px,6vw,96px);max-width:1240px;margin:0 auto;box-sizing:border-box}
#hero{padding:0;max-width:none}
.accent{color:var(--lime)}
.num{font-family:var(--mono);font-weight:500;color:var(--lime)}

/* ===== Kickers + panels + marquee + stats + ambient ===== */
.kicker{display:flex;align-items:center;gap:14px;font:500 12px/1 var(--mono);letter-spacing:4px;text-transform:uppercase;color:var(--lime);margin:0 0 36px}
.k-num{opacity:.55}
.kicker::after{content:"";height:1px;flex:0 0 0%;background:linear-gradient(90deg,rgba(90,255,21,.6),transparent);transition:flex-basis 1.3s cubic-bezier(.4,0,.2,1) .25s}
.kicker.is-in::after{flex-basis:190px}
@media (max-width:699px){.kicker{white-space:nowrap}.kicker.is-in::after{flex-basis:48px}}
h2.kicker{font:500 12px/1 var(--mono)}

main section.panel{position:relative;background:var(--char-1);border:1px solid rgba(237,239,234,.06);border-radius:28px;overflow:hidden;margin-top:clamp(40px,7vh,80px);margin-bottom:clamp(40px,7vh,80px)}
.panel .pillar,.panel .partner-card{background:var(--char-2)}
.panel .form-panel{background:var(--char-2)}
.panel .form-panel::before{background:var(--char-1)}
.panel .fg input,.panel .fg select,.panel .fg textarea{background:var(--char-3)}

.marquee{overflow:hidden;padding:24px 0;border-top:1px solid rgba(237,239,234,.07);border-bottom:1px solid rgba(237,239,234,.07);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;align-items:center;width:max-content;animation:mq 34s linear infinite}
.mq-track span{font:500 14px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;margin-right:38px}
.mq-track i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(90,255,21,.7);flex:none;margin-right:38px}
@keyframes mq{to{transform:translateX(-50%)}}

.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:72px;border-top:1px solid rgba(237,239,234,.08)}
@media (max-width:699px){.stat-band{grid-template-columns:repeat(2,1fr)}.stat{padding:28px 18px 0}.stat:nth-child(odd){border-left:0;padding-left:0}}
.stat{padding:36px 28px 0;border-left:1px solid rgba(237,239,234,.08)}
.stat:first-child{border-left:0;padding-left:0}
.stat-num{display:block;font:600 clamp(36px,3.8vw,60px)/1 var(--serif);letter-spacing:-.01em;color:var(--lime);text-shadow:0 0 36px rgba(90,255,21,.25);font-variant-numeric:tabular-nums}
.stat-label{display:block;font:500 12px/1.4 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);margin-top:14px}

/* ===== Stat-band 4th tile: a statement, not a fake numeral (2026-07-08).
   "Every send" was set at the same clamp(36-60px) numeral scale as the real
   figures (10x / $10M+ / 38.7%), reading like a broken counter, and its old
   long label wrapped badly on the 2-col mobile band. The wrapper keeps the
   SAME height as the numeral tiles (identical clamp formula) so the label
   row below still starts at the same y across all four tiles. Only the
   inner text drops to a calmer mono-caption-plus size, bottom-aligned like
   a numeral's baseline would read. ===== */
.stat-num.stat-num-word{display:flex;align-items:flex-end;height:clamp(36px,3.8vw,60px)}
.stat-num-word span{font:500 15px/1.3 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--lime);text-shadow:0 0 20px rgba(90,255,21,.2)}

.amb{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(90,255,21,.32);box-shadow:0 0 10px rgba(90,255,21,.45);animation:amb 10s ease-in-out infinite alternate;pointer-events:none}
@keyframes amb{to{transform:translate3d(34px,-52px,0)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.amb{animation:none}.kicker::after{transition:none}}

/* ===== System ===== */
#system{position:relative}
.sys-big{font:600 var(--step-2b)/1.08 var(--serif);margin:0 0 28px;max-width:16ch}
.sys-big span{display:inline}
.sys-desc{font:300 var(--step-1)/1.55 var(--sans);color:var(--ink-dim);max-width:52ch;margin:0 0 64px}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-auto-rows:1fr;gap:20px}
.pillar{position:relative;background:var(--char-1);border:1px solid rgba(237,239,234,.07);border-radius:16px;padding:30px 28px;overflow:hidden;transition:border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.pillar:hover{border-color:rgba(90,255,21,.35);transform:translateY(-4px)}
.pillar::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(90,255,21,.13),transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.pillar:hover::after{opacity:1}
.pillar::before{content:"";position:absolute;top:26px;right:26px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(90,255,21,.8)}
.pillar-num{font:400 13px/1 var(--mono);letter-spacing:2px;color:var(--lime);display:block;margin-bottom:18px}
.pillar h3{font:500 var(--step-1)/1.2 var(--sans);margin:0 0 10px}
.pillar p{font:300 var(--step-0)/1.55 var(--sans);color:var(--ink-dim);margin:0}

/* ===== Proof ===== */
#proof{text-align:left;padding-top:clamp(100px,16vh,180px);padding-bottom:clamp(100px,16vh,180px)}
.proof-headline{font:600 var(--step-2b)/1.12 var(--serif);margin:0 0 32px;max-width:22ch}
.proof-headline .num{font-family:inherit;font-weight:inherit}
.proof-story{font:300 var(--step-1)/1.6 var(--sans);color:var(--ink-dim);max-width:56ch;margin:0}

/* ===== Scroll progress ===== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;z-index:30;box-shadow:0 0 8px rgba(90,255,21,.6);will-change:transform}

/* ===== Proof chart ===== */
.proof-chart{margin-top:64px;max-width:1000px}
.proof-chart svg{width:100%;height:auto;display:block;overflow:visible}
.pm-val{font:500 26px var(--mono);fill:var(--lime)}
.pm-yr{font:400 16px var(--mono);fill:var(--ink-dim);letter-spacing:2px}
.pmark{transition:opacity .6s ease .2s}
#parea{transition:opacity 1s ease .8s}

/* ===== Work gallery ===== */
.work-headline{font:600 var(--step-2b)/1.08 var(--serif);margin:0 0 48px;max-width:16ch}
.work-rail{display:flex;gap:24px;overflow-x:auto;padding:12px 6px 28px;scroll-snap-type:x proximity;perspective:1200px;scrollbar-width:thin;scrollbar-color:rgba(90,255,21,.4) transparent}
.work-rail::-webkit-scrollbar{height:6px}
.work-rail::-webkit-scrollbar-thumb{background:rgba(90,255,21,.35);border-radius:999px}
.work-rail::-webkit-scrollbar-track{background:rgba(237,239,234,.05);border-radius:999px}
.work-card{flex:none;width:min(300px,72vw);height:520px;margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(237,239,234,.1);background:var(--char-1);scroll-snap-align:start;position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.work-card:hover{border-color:rgba(90,255,21,.45);box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 30px rgba(90,255,21,.12)}
.work-card img{display:block;width:100%;height:auto;transition:transform 7s linear}
.work-card:hover img,.work-card.playing img{transform:translateY(calc(518px - 100%))}
@media (min-width:1000px){.work-card:hover img,.work-card.playing img{transform:translateY(calc(638px - 100%))}}
.work-card::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(transparent,rgba(5,5,5,.55));pointer-events:none}
.work-note{font:400 var(--step-0)/1.6 var(--mono);letter-spacing:.5px;color:var(--ink-dim);margin:8px 0 0}
.work-cap{position:absolute;left:12px;bottom:10px;z-index:1;font:500 14px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--lime);background:rgba(5,5,5,.8);border:1px solid rgba(90,255,21,.3);border-radius:999px;padding:6px 12px;pointer-events:none}
.work-open{position:absolute;left:50%;bottom:52px;translate:-50% 0;z-index:2;font:500 12px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--lime);background:rgba(5,5,5,.88);border:1px solid rgba(90,255,21,.55);border-radius:999px;padding:16px 20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s,background .3s;box-shadow:0 8px 26px rgba(0,0,0,.55)}
.work-open:hover{background:rgba(90,255,21,.16)}
.work-card.playing .work-open{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.work-card img{transition:none}.work-card:hover img{transform:none}}

.work-stage-wrap{position:relative}
.work-meta{margin-top:26px;min-height:120px;transition:opacity .18s}
.work-meta.swap{opacity:0}
.work-meta-name{font:600 var(--step-1)/1.1 var(--serif);color:var(--ink)}
.work-meta-why{font:300 var(--step-0)/1.55 var(--sans);color:var(--ink-dim);max-width:52ch;margin:10px 0 0}
.work-meta-idx{font:500 12px/1 var(--mono);letter-spacing:3px;color:var(--lime);margin-top:14px}
.work-nav{position:absolute;top:310px;z-index:10;width:52px;height:52px;border-radius:50%;background:rgba(5,5,5,.7);border:1px solid rgba(90,255,21,.45);color:var(--lime);font-size:20px;cursor:pointer;transition:background .3s,transform .3s,box-shadow .3s;display:none}
.work-nav:hover{background:rgba(90,255,21,.15);transform:scale(1.08);box-shadow:0 0 24px rgba(90,255,21,.25)}
.work-prev{left:clamp(0px,2vw,30px)}
.work-next{right:clamp(0px,2vw,30px)}

@media (min-width:1000px){
  .work-rail{display:block;position:relative;height:670px;overflow:visible;perspective:1400px;padding:12px 0 0;scroll-snap-type:none}
  .work-rail::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:760px;height:720px;background:radial-gradient(circle,rgba(90,255,21,.10),transparent 65%);pointer-events:none}
  .work-card{position:absolute;left:50%;top:0;width:400px;height:640px;margin-left:-200px;cursor:pointer;transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .65s,border-color .35s,box-shadow .35s}
  .work-card.active{cursor:default}
  .work-card:not(.active):hover img{transform:none}
  .work-cap{display:none}
  .work-nav{display:block}
  .work-note{margin-top:20px}
  .work-card.active .work-open{opacity:1;visibility:visible;bottom:22px}
}
@media (max-width:999px){
  .work-meta{margin-top:20px;min-height:0}
  .work-meta-name{font-size:18px}
  .work-meta-why{font-size:14px;margin-top:6px}
  .work-meta-idx{font-size:12px;margin-top:10px}
}

/* ===== Timeline ===== */
.tl-heading{margin-bottom:56px}
.timeline{position:relative;display:flex;flex-direction:column;gap:56px}
.timeline::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:linear-gradient(to bottom,rgba(90,255,21,.5),rgba(90,255,21,.06))}
.tl-item{position:relative;padding-left:clamp(28px,4vw,56px)}
.tl-item::before{content:"";position:absolute;left:-4px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(90,255,21,.7)}
.tl-yr{font:700 clamp(44px,1.6rem + 4.5vw,96px)/1 var(--serif);letter-spacing:-.01em;color:#3A443B;margin-bottom:8px}
@media (prefers-reduced-motion:reduce){.tl-yr{color:#6F7D70}}
html.rm .tl-yr{color:#6F7D70}
.tl-item:last-child .tl-yr{color:var(--lime);text-shadow:0 0 44px rgba(90,255,21,.35)}
.tl-desc{font:300 var(--step-0)/1.6 var(--sans);color:var(--ink-dim);max-width:52ch}

/* ===== Partner ===== */
#partner{position:relative}
.partner-ghost{position:absolute;top:18px;right:clamp(0px,2vw,40px);font:600 clamp(200px,28vw,400px)/1 var(--serif);color:rgba(90,255,21,.06);pointer-events:none;user-select:none;z-index:0;transition:opacity .35s;font-variant-numeric:tabular-nums}
.partner-ghost.swap{opacity:0}
.partner-headline,.partner-cards{position:relative;z-index:1}
.partner-headline{font:600 var(--step-2b)/1.12 var(--serif);margin:0 0 56px;max-width:20ch}
.partner-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));grid-auto-rows:1fr;gap:20px}
.partner-card{background:var(--char-1);border:1px solid rgba(237,239,234,.07);border-radius:16px;padding:34px 30px;transition:border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.partner-card:hover{border-color:rgba(90,255,21,.35);transform:translateY(-4px)}
.partner-num{font:500 var(--step-2)/1 var(--serif);color:rgba(90,255,21,.28);display:block;margin-bottom:20px}
.partner-card h3{font:500 var(--step-1)/1.2 var(--sans);margin:0 0 12px}
.partner-card p{font:300 var(--step-0)/1.6 var(--sans);color:var(--ink-dim);margin:0}

/* ===== Apply ===== */
.filter-big{font:600 var(--step-2b)/1.08 var(--serif);margin:0 0 16px;max-width:16ch}
.filter-sub{font:300 var(--step-1)/1.4 var(--sans);color:var(--ink-dim);margin:0 0 52px}
.form-panel{background:var(--char-1);border:1px solid rgba(237,239,234,.09);border-radius:20px;padding:clamp(26px,4vw,48px);max-width:860px;position:relative}
.form-panel::before{content:"APPLICATION";position:absolute;top:-11px;left:32px;font:500 12px/1 var(--mono);letter-spacing:2px;color:var(--lime);background:var(--void);padding:4px 12px;border:1px solid rgba(90,255,21,.4);border-radius:999px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:699px){.form-row{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;margin-bottom:22px}
.fg label{font:500 16px/1.2 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.label-opt{color:rgba(185,190,184,.75);letter-spacing:1px}
.fg input,.fg select,.fg textarea{background:var(--char-2);border:1px solid rgba(237,239,234,.12);border-radius:10px;color:var(--ink);font:400 16px/1.4 var(--sans);padding:14px 16px;min-height:20px;transition:border-color .3s,box-shadow .3s;box-sizing:border-box;width:100%}
.fg textarea{min-height:96px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(90,255,21,.15)}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(185,190,184,.62)}
.fg select:invalid{color:rgba(185,190,184,.62)}
.fg select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235AFF15' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field-error{display:none;font:400 14px/1.4 var(--sans);color:#FF6B5A;margin-top:8px}
.fg.show-err .field-error{display:block}
.fg.show-err input,.fg.show-err select{border-color:#FF6B5A}
.submit-btn{font:500 14px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--void);background:var(--lime);border:0;border-radius:999px;padding:18px 44px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;min-height:44px}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(90,255,21,.4)}
.submit-btn:disabled{opacity:.6;cursor:wait;transform:none}
.form-spots{font:400 14px/1.4 var(--mono);letter-spacing:1px;color:var(--ink-dim);margin:18px 0 0}
.apply-soft{font:300 16px/1.6 var(--sans);color:var(--ink-dim);margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(237,239,234,.08)}
.apply-soft a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(90,255,21,.35);transition:border-color .3s}
.apply-soft a:hover{border-color:var(--lime)}
.apply-msg{font:400 var(--step-1)/1.4 var(--serif);color:var(--lime);max-width:860px;padding:40px 0 0}
.apply-msg.is-err{color:#FF6B5A}
.apply-msg a{color:var(--lime)}

/* ===== Footer — composed inside the reassembled world ===== */
footer{border-top:1px solid rgba(237,239,234,.08);min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:70px 24px 44px;box-sizing:border-box}
.ft-mark{display:block;width:64px;height:64px;margin:0 auto 26px;opacity:.9}
.ft-grid{display:flex;flex-direction:column;gap:26px;margin-bottom:44px;max-width:36rem}
.ft-heading{font:500 12px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.ft-col p{font:300 var(--step-0)/1.6 var(--sans);color:var(--ink-dim);margin:0 auto;max-width:36ch}
.ft-col a{display:inline-block;font:300 var(--step-0)/1.5 var(--sans);color:var(--ink);text-decoration:none;transition:color .3s;padding:12px 14px}
.ft-col a:hover{color:var(--lime)}
.ft-big{font:600 clamp(32px,6.2vw,82px)/1 var(--serif);letter-spacing:.02em;color:rgba(237,239,234,.09);user-select:none;margin-bottom:20px;white-space:nowrap}
.ft-copy{font:400 12px/1 var(--mono);letter-spacing:1px;color:rgba(185,190,184,.72);margin:0}
/* faint scrim so footer copy reads over the reassembled mesh */
footer{position:relative}
footer::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,680px);height:62%;background:radial-gradient(ellipse 50% 50% at center,rgba(5,5,5,.72),rgba(5,5,5,.4) 55%,transparent 76%);pointer-events:none}
footer > *{position:relative}
.ft-cta{margin:0 0 40px;font-size:var(--step-0)}

/* ===== Reveal engine ===== */
[data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
[data-reveal="left"]{transform:translateX(-44px)}
[data-reveal="right"]{transform:translateX(44px)}
[data-reveal="tilt"]{transform:perspective(1200px) translateY(52px) rotateX(4deg);transform-origin:50% 0;transition-duration:1.1s}
[data-reveal].is-in{opacity:1;transform:none}
[data-words]{transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;transform:translateY(118%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.is-in .wi{transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{transform:none}.wi{transform:none;transition:none}}

/* ===== Mobile node dots (must stay last: overrides base .node-label) ===== */
@media (max-width:699px){
  .node-labels{z-index:1}
  .node-label{font-size:0;letter-spacing:0;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(5,5,5,.25);border:1px solid rgba(90,255,21,.35);display:flex;align-items:center;justify-content:center}
  .node-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(90,255,21,.9)}
  .node-label.lit{border-color:rgba(90,255,21,.8)}
  .node-label .node-tip{display:none}
}

/* ===== Mobile: no panel boxes - let the field show through ===== */
@media (max-width:699px){
  [data-reveal="tilt"]{transform:translateY(36px)}
  main section.panel{background:transparent;border:0;border-radius:0;overflow:visible;margin-top:0;margin-bottom:0}
  .panel .pillar,.panel .partner-card,.panel .form-panel{background:var(--char-1)}
  .panel .form-panel::before{background:var(--void)}
  .panel .fg input,.panel .fg select,.panel .fg textarea{background:var(--char-2)}
  .panel .amb{display:none}
}

/* ===== Mobile: tap-hint + node ping affordance ===== */
@media (max-width:699px){
  .tap-hint{display:flex;align-items:center;gap:9px;font:500 12px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);margin:22px 0 0}
  .tap-hint i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(90,255,21,.8);flex:none;animation:hintpulse 2s ease-in-out infinite}
  .node-label::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(90,255,21,.55);animation:ping 3s ease-out infinite}
  .node-label:nth-child(2)::after{animation-delay:.5s}
  .node-label:nth-child(3)::after{animation-delay:1s}
  .node-label:nth-child(4)::after{animation-delay:1.5s}
  .node-label:nth-child(5)::after{animation-delay:2s}
  .node-label:nth-child(6)::after{animation-delay:2.5s}
}
@keyframes ping{0%{transform:scale(.55);opacity:.9}65%,100%{transform:scale(1.45);opacity:0}}
@keyframes hintpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.node-label::after{animation:none;opacity:0}.tap-hint i{animation:none}}

/* ===== Mobile: System overlaps the hero dead tail, arriving just below the nav.
   Under reduced motion there is no dive to hide behind, so the overlap is cancelled. ===== */
@media (max-width:699px){
  #system{margin-top:-100svh}
}
@media (max-width:699px) and (prefers-reduced-motion:reduce){
  #system{margin-top:0}
}
@media (max-width:699px){
  html.rm #system{margin-top:0}
}

/* ===== Mobile audit round: reading-first ===== */
@media (max-width:699px){
  .partner-ghost{display:none}
}

/* ===== Conversion round: CTAs, boot line, selection ===== */
::selection{background:var(--lime);color:var(--void)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.hero-ctas{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px;pointer-events:auto}
.cta-primary{display:inline-block;font:500 15px/1 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--void);background:var(--lime);padding:18px 38px;border-radius:999px;text-decoration:none;box-shadow:0 0 34px rgba(90,255,21,.28);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,translate .45s cubic-bezier(.2,.7,.2,1)}
.cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 44px rgba(90,255,21,.45)}
/* .hero-spots + .tap-hint are the hero's caption tier: badges/design furniture,
   explicitly ruled below the 16px reading floor (Jake, 2026-07-08 follow-up:
   "~12-13px mono, they're badges, not reading copy"). 12px + 1.5px tracking
   keeps the spots line single-line inside 390px width (350px content box). */
.hero-spots{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-dim)}
.hero-spots i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(90,255,21,.8);animation:hintpulse 2s ease-in-out infinite}
.boot-line{position:absolute;top:calc(24px + 76px);left:clamp(20px,4vw,48px);max-width:calc(100vw - 40px);overflow:hidden;font:400 11px/1.5 var(--mono);letter-spacing:1px;color:rgba(90,255,21,.55);white-space:pre;z-index:3;pointer-events:none;min-height:16px}
@media (max-width:699px){.boot-line{display:none}}
.boot-line::after{content:"_";animation:hintpulse 1.1s steps(1) infinite}
.sec-cta{display:block;margin-top:52px;font:300 var(--step-1)/1.4 var(--sans);color:var(--ink-dim);text-decoration:none}
.sec-cta span{color:var(--lime);font-weight:500;white-space:nowrap;border-bottom:1px solid rgba(90,255,21,.35);transition:border-color .3s;padding-bottom:2px}
.sec-cta:hover span{border-color:var(--lime)}
/* the cap-only ftcta line (2026-07-08) is a full sentence, not a short arrow
   phrase like the other .sec-cta spans — let it wrap instead of the inherited
   nowrap above, which clipped/overflowed it on mobile widths. Must come after
   the .sec-cta span rule (equal specificity — source order decides). */
.ft-cta span{white-space:normal}
@media (prefers-reduced-motion:reduce){.hero-spots i,.boot-line::after{animation:none}}

/* ===== Level-up round: founder quotes, first-30-days, pillar signals ===== */
.quote{margin:64px 0 56px;max-width:60ch;position:relative;padding-left:26px}
.quote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--lime),rgba(90,255,21,.1))}
.quote blockquote{margin:0;font:300 var(--step-1)/1.5 var(--sans);color:var(--ink)}
.quote figcaption{margin-top:18px;display:flex;align-items:baseline;gap:12px}
.q-name{font:500 14px/1 var(--sans);color:var(--lime)}
.q-role{font:400 12px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-dim)}
.quote-sm{margin:44px 0}
.quote-sm blockquote{font-size:var(--step-0)}

.onboard{margin:0 0 44px;max-width:860px}
.onboard-h{font:500 12px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--lime);margin:0 0 22px}
.onboard-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));grid-auto-rows:1fr;gap:18px}
.onboard-steps li{font:300 16px/1.55 var(--sans);color:var(--ink-dim);border-top:1px solid rgba(90,255,21,.25);padding-top:14px}
.onboard-steps strong{color:var(--ink);font-weight:500}
.ob-num{display:block;font:400 12px/1 var(--mono);color:var(--lime);margin-bottom:10px}

.pillar p.pillar-sig{font:400 14px/1.5 var(--mono);letter-spacing:.5px;color:rgba(90,255,21,.65);margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(237,239,234,.07)}

/* ===== Objection strip (above the form) ===== */
.objections{margin:0 0 44px;max-width:860px}
.obj{display:grid;grid-template-columns:minmax(170px,230px) 1fr;gap:6px 32px;padding:17px 0;border-top:1px solid rgba(237,239,234,.08)}
.obj:last-child{border-bottom:1px solid rgba(237,239,234,.08)}
.obj dt{font:500 12px/1.6 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--lime)}
.obj dd{font:300 16px/1.55 var(--sans);color:var(--ink-dim);margin:0}
@media (max-width:699px){.obj{grid-template-columns:1fr}}

/* ===== Operator strip (furniture between #partner and #apply — unnumbered) ===== */
.operator{max-width:1240px;margin:0 auto;box-sizing:border-box;background:var(--char-1);border:1px solid rgba(237,239,234,.06);border-radius:28px;padding:clamp(36px,6vh,56px) clamp(20px,6vw,96px)}
.operator-kicker{font:500 12px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--lime);margin:0 0 20px}
.operator-lead{font:300 var(--step-1)/1.4 var(--sans);color:var(--ink);margin:0;max-width:60ch}
.operator-rows{margin:26px 0 0;max-width:860px}
@media (max-width:699px){.operator{background:transparent;border:0;border-radius:0;padding:8px clamp(20px,6vw,96px) 48px}}

/* ===== Full-screen email reader ===== */
html.er-open{overflow-y:hidden}
.email-reader{position:fixed;inset:0;z-index:60;background:rgba(4,5,4,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.email-reader[hidden]{display:none}
.er-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:baseline;gap:14px;padding:18px 76px 14px 22px;background:linear-gradient(rgba(4,5,4,.95) 30%,transparent);pointer-events:none}
.er-top strong{font:500 13px/1.4 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--lime);white-space:nowrap}
.er-top span{font:400 13px/1.4 var(--sans);color:var(--ink-dim)}
.er-close{position:absolute;top:14px;right:16px;z-index:3;width:48px;height:48px;border-radius:50%;background:rgba(5,5,5,.7);border:1px solid rgba(90,255,21,.45);color:var(--lime);font-size:22px;line-height:1;cursor:pointer;transition:background .3s,transform .3s}
.er-close:hover{background:rgba(90,255,21,.15);transform:scale(1.08)}
.er-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:70px 16px 30px;box-sizing:border-box}
.er-scroll img{display:block;width:min(620px,94vw);height:auto;margin:0 auto;border-radius:12px;border:1px solid rgba(90,255,21,.25);box-shadow:0 24px 80px rgba(0,0,0,.7)}
@media (max-width:699px){.er-top{flex-direction:column;gap:5px;padding-right:70px}.er-top span{font-size:14px;line-height:1.45}}

/* ===== Mobile sticky Apply pill ===== */
.mob-cta{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(96px);z-index:25;font:500 12px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--void);background:var(--lime);padding:16px 24px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 10px 34px rgba(90,255,21,.35),0 4px 18px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mob-cta.on{transform:translateX(-50%) translateY(0)}
@media (min-width:700px){.mob-cta{display:none}}
@media (prefers-reduced-motion:reduce){.mob-cta{transition:none}}
html.rm .mob-cta{transition:none}

/* ===== Peak design round: entrance, asymmetry, material, ghost scale ===== */
body{animation:pagein .7s ease-out}
@keyframes pagein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){body{animation:none}}

.edge-rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font:400 10px/1 var(--mono);letter-spacing:4px;color:rgba(185,190,184,.34);z-index:15;pointer-events:none;user-select:none}
@media (max-width:1199px){.edge-rail{display:none}}

.pillar,.partner-card{background:linear-gradient(180deg,rgba(237,239,234,.045),rgba(237,239,234,0) 34%),var(--char-1)}
.panel .pillar,.panel .partner-card{background:linear-gradient(180deg,rgba(237,239,234,.05),rgba(237,239,234,0) 34%),var(--char-2)}
.partner-card{position:relative;overflow:hidden}
.partner-card::after,.work-card .sheen{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(237,239,234,.08) 50%,transparent 58%);transform:translateX(-130%);transition:transform .7s ease;pointer-events:none}
.partner-card:hover::after{transform:translateX(130%)}

@media (min-width:1000px){
  #system{display:grid;grid-template-columns:7fr 5fr;column-gap:72px;align-items:end;position:relative}
  #system > .kicker{grid-column:1/-1}
  .sys-big{grid-column:1;margin:0}
  .sys-desc{grid-column:2;margin:0 0 10px;max-width:none}
  #system > .pillars,#system > .dossier-link{grid-column:1/-1;margin-top:76px}
  .pillars{grid-template-columns:repeat(3,1fr)}
  #system::before{content:"01";position:absolute;top:28px;right:34px;font:700 clamp(180px,16vw,260px)/1 var(--serif);letter-spacing:-.03em;color:rgba(90,255,21,.05);pointer-events:none}
  #apply::before{content:"07";position:absolute;top:28px;right:34px;font:700 clamp(180px,16vw,260px)/1 var(--serif);letter-spacing:-.03em;color:rgba(90,255,21,.05);pointer-events:none}
  #apply{position:relative}

  #proof{display:grid;grid-template-columns:7fr 5fr;column-gap:72px;position:relative}
  #proof > .kicker{grid-column:1/-1}
  .proof-headline{grid-column:1;grid-row:2;margin:0}
  .proof-story{grid-column:2;grid-row:2;align-self:end;margin:0 0 8px;max-width:none}
  #proof > .quote{grid-column:1}
  #proof > .proof-chart,#proof > .stat-band,#proof > .sec-cta,#proof > .dossier-link{grid-column:1/-1}
  #proof::after{content:"10\00d7";position:absolute;top:34px;right:-30px;font:700 clamp(220px,22vw,360px)/1 var(--serif);letter-spacing:-.03em;color:rgba(90,255,21,.05);transform:rotate(-5deg);pointer-events:none}

  .partner-cards{grid-template-columns:repeat(2,1fr)}
}

/* ===== Work deck flows normally — no forced scroll-through (Jake, 2026-07-03);
   the deck auto-advances while in view instead ===== */

/* ===== Short landscape phones: the hero stack must fit ~300px of height ===== */
@media (max-width:699px) and (max-height:460px){
  .hero-eyebrow{margin-bottom:12px}
  .hero-title{font-size:clamp(24px,7vh,34px)}
  .hero-sub{margin-top:10px;font-size:16px}
  .hero-ctas{margin-top:14px}
  .tap-hint,.hero-cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .work-card{transition:border-color .35s,box-shadow .35s}
}

/* ===== html.rm — mirror of every prefers-reduced-motion rule, driven by ?rm=1 ===== */
html.rm .aurora{animation:none}
html.rm #hero{height:100svh}
html.rm .hero-cue{animation:none}
html.rm .mq-track{animation:none}
html.rm .amb{animation:none}
html.rm .kicker::after{transition:none}
html.rm .work-card{transition:border-color .35s,box-shadow .35s}
html.rm .work-card img{transition:none}
html.rm .work-card:hover img{transform:none}
html.rm .node-label::after{animation:none;opacity:0}
html.rm .tap-hint i{animation:none}
html.rm [data-reveal]{transform:none}
html.rm .wi{transform:none;transition:none}
html.rm .hero-spots i,html.rm .boot-line::after{animation:none}
html.rm body{animation:none}

/* =====================================================================
   THE WORK DOSSIER — shared subpage template (added 2026-07-09).
   Reused verbatim by /process, /about, /fit as they ship. Everything in
   this block is the template contract; .dossier-artifacts/.dossier-artifact
   (Task 4) and .dossier-close/.dossier-link (Task 3/5) are /work-specific
   additions layered on top, inserted just above this same anchor comment.
   ===================================================================== */
.dossier-hero{padding-top:clamp(140px,20vh,210px);position:relative}
.dossier-title{margin:22px 0 0;max-width:16ch;position:relative;z-index:1}
.dossier-dek{font:300 var(--step-1)/1.55 var(--sans);color:var(--ink-dim);max-width:56ch;margin:26px 0 0;overflow-wrap:break-word;position:relative;z-index:1}
.dossier-h2{font:600 var(--step-2b)/1.1 var(--serif);letter-spacing:-.012em;margin:0 0 28px;max-width:22ch;overflow-wrap:break-word}
.dossier-body{font:300 var(--step-1)/1.6 var(--sans);color:var(--ink-dim);max-width:60ch;margin:0;overflow-wrap:break-word}

.dossier-motif{position:absolute;top:8px;right:0;width:min(50vw,400px);opacity:.55;pointer-events:none;z-index:0}
.dossier-motif svg{width:100%;height:auto;display:block}
.dm-lines line{opacity:.35}
.dm-nodes circle{transform-origin:center;transform-box:fill-box;animation:dmpulse 3.6s ease-in-out infinite}
.dm-n2{animation-delay:.4s}
.dm-n3{animation-delay:.8s}
.dm-n4{animation-delay:1.2s}
.dm-n5{animation-delay:1.6s}
.dm-n6{animation-delay:2s}
@keyframes dmpulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.dm-nodes circle{animation:none;opacity:.85}}
html.rm .dm-nodes circle{animation:none;opacity:.85}
@media (max-width:479px){.dossier-motif{display:none}}

.dossier-apply-band{text-align:center}
.dossier-apply-band .dossier-h2{max-width:20ch;margin:0 auto 20px}
.dossier-apply-band .dossier-body{max-width:52ch;margin:0 auto 40px}

.dossier-close{font:400 var(--step-0)/1.5 var(--sans);color:var(--ink);margin:32px 0 0;padding-top:22px;border-top:1px solid rgba(237,239,234,.08);max-width:60ch;overflow-wrap:break-word}
.dossier-close a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(90,255,21,.35);transition:border-color .3s;white-space:nowrap}
.dossier-close a:hover{border-color:var(--lime)}

#build .pillars,#notfit .pillars,#engines .pillars{margin-top:76px}
#monthone .onboard,#terms .objections{margin-top:76px}
.dossier-hero .hero-eyebrow{position:relative;z-index:1}

.dossier-artifacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));grid-auto-rows:1fr;gap:20px;margin-top:44px}
.dossier-artifact{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(237,239,234,.1);background:var(--char-1)}
.dossier-artifact img{display:block;width:100%;height:280px;object-fit:cover;object-position:top center}
.dossier-artifact figcaption{padding:14px 16px;font:500 13px/1.4 var(--mono);letter-spacing:1px;color:var(--ink);text-transform:uppercase}
.dossier-artifact figcaption span{display:block;margin-top:6px;font:400 12px/1.4 var(--mono);letter-spacing:.5px;color:var(--ink-dim);text-transform:none}

.dossier-link{display:block;margin-top:18px;font:500 13px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:color .3s}
.dossier-link:hover{color:var(--lime)}

/* ===== Obsidian glass (proposed material, 2026-07-10) — liquid glass translated
   into the rendered-light system: glass panels TRANSMIT the aurora behind them
   (saturate makes the lime atmosphere bloom through), they do not emit.
   Cap: at most 3 glass moments per page (mirrors USA Palm design doctrine). ===== */
.pillar{background:linear-gradient(180deg,rgba(237,239,234,.05),rgba(237,239,234,.015) 40%),rgba(16,19,17,.42);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);border-color:rgba(237,239,234,.12);box-shadow:0 12px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(237,239,234,.10)}
.dossier-apply-band .glass-slab{background:linear-gradient(180deg,rgba(237,239,234,.05),rgba(237,239,234,.015) 40%),rgba(16,19,17,.42);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(237,239,234,.12);border-radius:20px;box-shadow:0 12px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(237,239,234,.10);padding:64px clamp(28px,6vw,80px);max-width:760px;margin:0 auto;position:relative;z-index:1}
/* Emitters (2026-07-10, second pass): DESIGN.md law — light is emitted, the glass
   transmits. Each glass moment gets a lime pool BEHIND it so blur+saturate has a
   real signal to carry. Absolute-positioned + pointer-events:none = zero layout. */
#build,#engines,#notfit{position:relative}
#build::before,#engines::before,#notfit::before{content:"";position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:min(900px,90%);height:70%;background:radial-gradient(50% 50% at 50% 50%,rgba(90,255,21,.11),transparent 72%);pointer-events:none}
#build .pillars,#engines .pillars,#notfit .pillars{position:relative;z-index:1}
.dossier-apply-band{position:relative}
.dossier-apply-band::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(820px,94%);height:120%;background:radial-gradient(50% 50% at 50% 50%,rgba(90,255,21,.14),transparent 70%);pointer-events:none}
@supports not (backdrop-filter:blur(1px)){.pillar,.dossier-apply-band .glass-slab{background:var(--char-1)}}
@media (max-width:699px){.pillar{backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25)}.dossier-apply-band .glass-slab{backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);padding:44px clamp(20px,6vw,32px)}}

/* ===== Mobile hero composition (must stay LAST — wins the cascade over the
   base hero margins). The message core (eyebrow/title/sub) is anchored so the
   headline reads centered on the globe's center (50svh); the CTA block and
   tap-hint hang below the rim instead of crowding the circle. =====
   2026-07-08 rework (Jake's ruling, second pass): centering is the PRIMARY
   invariant. An earlier fix solved the cue/copy overlap on short viewports
   by shoving the whole core up (a min() clearance term in padding-top) and
   that visibly de-centered the headline on real phones. Wrong trade,
   reversed: padding-top is back to the original plain 50svh - 120px anchor
   (headline block center lands ~19px above viewport center at 390w, ~2.2-2.7%
   off, the composition Jake approved). The overlap is solved from the tail
   instead: the caption tier (hero-spots, tap-hint: badges, not reading copy)
   is 12px with tightened margins (.hero-ctas margin 48->28, gap 11->8,
   .tap-hint margin 16->10), and below the height where centering + 20px cue
   clearance can mathematically coexist the cue hides entirely (see the
   max-height rule after this block). Priority order per the ruling:
   headline centering > cue clearance > cue existence. */
@media (max-width:699px){
  .hero-inner{justify-content:flex-start;padding-top:calc(50svh - 120px);box-sizing:border-box}
  .hero-eyebrow{letter-spacing:3.5px;margin-bottom:18px}
  .hero-title{font-size:clamp(26px,8vw,33px);line-height:1.14;max-width:13ch}
  .hero-sub{font-size:16px;line-height:1.45;margin:14px 0 0;max-width:26ch}
  .hero-ctas{margin-top:28px;gap:8px}
  .cta-primary{font-size:14px;padding:16px 30px}
  .tap-hint{margin:10px 0 0}
}
/* Cue height threshold (2026-07-08 ruling: "cue is expendable"). With the
   core truly centered and the tail tightened, the stack bottom sits at
   50svh - 120px + core + 116px tail; the cue box top is 100svh - 77px and
   needs 20px clearance. Worst case core (430px-wide phones, 4-line title)
   is ~303px, which solves to viewport heights >= ~792px. Hidden at <=800
   (small safety margin; also covers the 390w case at ~776). Not a
   reduced-motion rule, so no html.rm twin needed. */
@media (max-width:699px) and (max-height:800px){
  .hero-cue{display:none}
}
@media (max-width:699px) and (max-height:460px){
  .hero-inner{justify-content:center;padding-top:0}
}

/* ===== Hero concept beat (added 2026-07-08) — one mono line under the H1
   naming the compounding-system concept directly; sits between the title
   and the existing hero-sub, same reveal choreography. ===== */
.hero-concept{font:500 16px/1.5 var(--mono);letter-spacing:.5px;color:var(--ink-dim);margin:20px 0 0;text-shadow:0 1px 20px rgba(5,5,5,.85)}
@media (max-width:699px){.hero-concept{font-size:16px;margin-top:14px}}

/* ===== Nav link to The Ledger (added 2026-07-08) — sits between brand and
   Apply in the flex nav (nav-chapter is absolutely positioned, so this is
   the 2nd of 3 real flow children: brand / ledger link / apply). ===== */
.nav-ledger{font:500 13px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;padding:15px 18px;transition:color .3s;white-space:nowrap}
.nav-ledger:hover{color:var(--lime)}

/* ===== Nav menu, hamburger (added 2026-07-08; desktop-enabled 2026-07-10 —
   the burger is the full page index at every width). "The Ledger" meant
   nothing to a first-time visitor as a center nav link, and more pages are
   coming, so the center text link is replaced on narrow viewports by a
   burger opening a small sitemap. Apply stays a real flex sibling at every
   width, outside the menu, so the conversion CTA never hides behind a tap.
   Same slot/markup shape on every page: brand / secondary link / burger /
   apply. The secondary link is "The Work" -> /work on every page (never a
   self-link to itself; the current page instead gets aria-current="page").
   ===== */
.nav-burger{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;padding:0;background:transparent;border:1px solid rgba(237,239,234,.16);border-radius:10px;cursor:pointer;transition:border-color .3s}
.nav-burger:hover,.nav-burger:focus-visible{border-color:rgba(90,255,21,.5)}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-menu{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;background:rgba(5,5,5,.97);border-bottom:1px solid rgba(90,255,21,.22);padding:8px clamp(20px,4vw,48px) 18px;box-sizing:border-box;backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);box-shadow:inset 0 1px 0 rgba(237,239,234,.10)}
.nav-menu[hidden]{display:none}
.nav-menu-link{font:500 14px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;padding:16px 4px;border-top:1px solid rgba(237,239,234,.08);transition:color .3s}
.nav-menu-link:first-child{border-top:0}
.nav-menu-link:hover,.nav-menu-link:focus-visible{color:var(--lime)}

@media (max-width:699px){
  .nav-ledger{display:none}
}
@media (min-width:700px){
  .nav-menu{left:auto;right:clamp(20px,4vw,48px);width:280px;top:calc(100% + 2px);border:1px solid rgba(90,255,21,.22);border-radius:12px;padding:6px 18px 14px;background:linear-gradient(180deg,rgba(237,239,234,.05),rgba(237,239,234,.015) 40%),rgba(10,12,10,.62);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);box-shadow:0 18px 50px rgba(5,5,5,.6),inset 0 1px 0 rgba(237,239,234,.10)}
}


/* ===== The Machine — dedicated homepage beat between Proof and Work
   (added 2026-07-08). Same scaffolding as the plain (non-panel) sections
   around it; the loop strip echoes ledger.html's five-step loop by name
   (Ship/Measure/Judge/Learn/Compound) so the two pages read as one system. ===== */
#machine{text-align:left}
.machine-headline{font:600 var(--step-2b)/1.12 var(--serif);margin:0 0 28px;max-width:20ch}
.machine-body{font:300 var(--step-1)/1.6 var(--sans);color:var(--ink-dim);max-width:56ch;margin:0}
.machine-loop{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 0;margin:56px 0 0;padding:0;list-style:none;font:500 14px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--ink)}
.machine-loop li{display:flex;align-items:baseline;white-space:nowrap}
.machine-loop li:not(:last-child)::after{content:"→";color:var(--lime);opacity:.6;margin:0 16px;font-size:15px;letter-spacing:0}
.loop-num{font:400 12px/1 var(--mono);color:var(--lime);letter-spacing:1px;margin-right:10px}
@media (max-width:699px){
  .machine-loop{gap:10px 0;margin-top:40px;font-size:14px;letter-spacing:1.5px}
  .machine-loop li:not(:last-child)::after{margin:0 12px;font-size:13px}
}

/* =====================================================================
   THE LEDGER — standalone page (ledger.html), shares every token above.
   Added 2026-07-08 as the site's first public scoreboard artifact.
   ===================================================================== */
#lhero{padding-top:clamp(140px,20vh,210px)}
.ledger-h1{margin:22px 0 0;max-width:14ch}
.ledger-dek{font:300 var(--step-1)/1.55 var(--sans);color:var(--ink-dim);max-width:56ch;margin:26px 0 0;overflow-wrap:break-word}
.ledger-h2{font:600 var(--step-2b)/1.1 var(--serif);letter-spacing:-.012em;margin:0 0 28px;max-width:22ch;overflow-wrap:break-word}
.ledger-body{font:300 var(--step-1)/1.6 var(--sans);color:var(--ink-dim);max-width:60ch;margin:0;overflow-wrap:break-word}
.ledger-close{font:400 var(--step-0)/1.5 var(--sans);color:var(--ink);margin:32px 0 0;padding-top:22px;border-top:1px solid rgba(237,239,234,.08);max-width:60ch;overflow-wrap:break-word}

.loop-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

.ledger-privacy{margin-top:32px;border:1px solid rgba(90,255,21,.22);border-radius:16px;background:var(--char-1);padding:28px 30px;max-width:60ch}
.panel .ledger-privacy{background:var(--char-2)}
.ledger-privacy p{font:400 var(--step-0)/1.55 var(--sans);color:var(--ink);margin:0}

.gate-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin:40px 0 40px;border-top:1px solid rgba(237,239,234,.08);padding-top:32px;max-width:760px}
.gate-figure{display:flex;flex-direction:column;gap:10px}
.gate-num{font:600 clamp(22px,2.6vw,34px)/1 var(--serif);letter-spacing:-.01em}
.gate-num-sig{color:var(--lime);text-shadow:0 0 30px rgba(90,255,21,.25)}
.gate-num-noise{color:#FF6B5A}
.gate-num-dir{color:var(--ink)}
.gate-label{font:500 12px/1.4 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim)}

.compound-scale{display:flex;gap:48px;margin-top:44px;flex-wrap:wrap}
.compound-step{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid rgba(90,255,21,.25);min-width:160px}
.compound-mark{font:500 12px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--lime)}
.compound-desc{font:500 var(--step-1)/1.3 var(--serif);color:var(--ink)}

#ledger-cta .ledger-h2{margin-bottom:36px}

@media (min-width:1000px){
  #scoreboard{position:relative}
  #scoreboard::before{content:"BOTH";position:absolute;top:28px;right:34px;font:700 clamp(110px,11vw,190px)/1 var(--serif);letter-spacing:-.03em;color:rgba(90,255,21,.05);pointer-events:none}
}