/* =============================================================
   HOURS BACK — Swiss Modernism 2.0 spine, editorial clothing.
   Hand-written. No framework, no build step, no dependencies.
   Palette is deliberate: muted "before" (rust) → vibrant
   "after" (signal). Colour carries the argument, not decoration.
   ============================================================= */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/instrument-serif-normal-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/instrument-serif-italic-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/inter-normal-400700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/jetbrains-mono-normal-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-normal-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- tokens ---------- */
:root{
  /* ONE DARK WORLD. The page has no second material: the ground is the
     render, and every reading surface is a pane of glass floating in it.
     "paper" and "ink" keep their names because they keep their ROLES —
     paper is whatever the reader reads on, ink is whatever they read. */
  --paper:#0B0C0E;          /* base ground (never pure #000 — it smears on OLED) */
  --paper-2:rgba(20,23,27,.72);  /* elevated: a pane, translucent over the world */
  --ink:#F1EFEB;            /* foreground */
  --graphite:#9DA3AA;       /* foreground muted — 7.3:1 on the ground */
  --hairline:rgba(255,255,255,.09);   /* never a solid grey border */
  --pitch:#08090B;          /* deepest — inset surfaces, scrims */
  --pitch-2:#101317;        /* the no-blur fallback for a pane */
  --on-pitch:#F1EFEB;
  --on-pitch-mute:#9DA3AA;
  --signal:#1B8A5F;         /* fills, markers, rules — NOT text */
  --signal-text:#3FB584;    /* green type: 7.5:1 on the ground */
  --signal-bright:#35B37E;  /* the primary button, which takes dark text */
  --rust:#E08A55;           /* the "before" accent, readable on dark */
  --glass:rgba(255,255,255,.045);
  --glass-line:rgba(255,255,255,.10);

  --f-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(2.75rem,6.6vw,5.5rem);
  --t-h2:clamp(2rem,4.2vw,3.4rem);
  --t-h3:clamp(1.35rem,2.1vw,1.75rem);
  --t-lead:clamp(1.125rem,1.55vw,1.375rem);
  --t-body:1.0625rem;
  --t-small:0.9375rem;
  --t-label:0.75rem;

  --u:8px;
  --gap:clamp(16px,2vw,28px);
  --pad:clamp(20px,5vw,64px);
  --section:clamp(64px,9vw,132px);
  --maxw:1240px;
  --radius:3px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* paper tooth — 3% noise, keeps large flat areas from feeling dead */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
::selection{background:var(--signal);color:#fff}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:1}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
section{position:relative;z-index:1}
.band{padding-block:var(--section)}
.rule{border:0;border-top:1px solid var(--hairline)}
.measure{max-width:62ch}

/* ---------- type ---------- */
.label{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
}
.label .num{color:var(--signal-text)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:-.015em}
h1{font-size:var(--t-display);line-height:.98}
h2{font-size:var(--t-h2);line-height:1.03}
h3{font-size:var(--t-h3);line-height:1.15}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--graphite)}
strong{font-weight:600}
em{font-style:italic}
.mono{font-family:var(--f-mono)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 26px;border:1px solid var(--signal-bright);
  background:var(--signal-bright);color:var(--pitch);border-radius:var(--radius);
  font-family:var(--f-mono);font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:transform .35s var(--ease),background-color .35s var(--ease);
}
.btn:hover{background:#4FC994;border-color:#4FC994;transform:translateY(-2px)}
.btn{box-shadow:0 0 0 0 rgba(53,179,126,0);transition:transform .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{box-shadow:0 6px 30px rgba(53,179,126,.22)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--onpitch{background:var(--on-pitch);border-color:var(--on-pitch);color:var(--pitch)}
.btn--onpitch:hover{background:#fff;border-color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.on-pitch :focus-visible{outline-color:#7FD9AE}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(8,9,11,.66);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s linear;
}
.nav.is-stuck{border-bottom-color:var(--hairline);background:rgba(8,9,11,.86)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;padding-right:8px;text-decoration:none;
  font-family:var(--f-mono);font-size:.875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.brand svg{width:22px;height:22px;flex:none}
.nav .btn{min-height:44px;padding:0 18px;font-size:.75rem}
.skip{position:absolute;left:-9999px;padding:14px 18px}
.skip:focus{left:var(--pad);top:10px;z-index:99;background:var(--ink);color:var(--pitch);padding:14px 18px;border-radius:2px}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,104px)}
.hero h1{margin:22px 0 0;max-width:16ch}
.hero h1 .u{
  position:relative;white-space:nowrap;
}
.hero h1 .u::after{
  content:'';position:absolute;left:0;right:0;bottom:.08em;height:2px;background:var(--signal);
  transform:scaleX(var(--underline,0));transform-origin:left;transition:transform 1s var(--ease) .35s;
}
.hero__sub{margin-top:28px;max-width:52ch}
.hero__cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.hero__note{font-family:var(--f-mono);font-size:.8125rem;color:var(--graphite)}
.hero__meta{
  margin-top:clamp(44px,6vw,72px);padding-top:22px;border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--gap);
}
.hero__meta div{font-size:var(--t-small);color:var(--graphite)}
.hero__meta b{display:block;font-family:var(--f-mono);font-size:1.5rem;font-weight:500;color:var(--ink);letter-spacing:-.02em}

/* ---------- section head ---------- */
.head{margin-bottom:clamp(32px,4vw,56px)}
.head h2{margin-top:16px;max-width:20ch}
.head .lead{margin-top:20px}

/* ---------- the eleven jobs ---------- */
.jobs{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.job{
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.02em;
  padding:11px 16px;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--paper-2);color:var(--graphite);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.is-in .job{opacity:1;transform:none}
.is-in .job--manual{border-color:rgba(224,138,85,.32);color:var(--rust);background:rgba(224,138,85,.07)}
.is-in .job--auto{border-color:rgba(53,179,126,.5);color:var(--signal-text);background:rgba(27,138,95,.10)}
.jobs__key{margin-top:26px;display:flex;flex-wrap:wrap;gap:24px;font-family:var(--f-mono);font-size:.8125rem}
.jobs__key span{display:flex;align-items:center;gap:8px;color:var(--graphite)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot--rust{background:var(--rust)}.dot--signal{background:var(--signal)}
.jobs__punch{margin-top:36px;font-family:var(--f-display);font-size:var(--t-h3);line-height:1.3;max-width:30ch}

/* ---------- calculator ---------- */
.calc__panel--deep{background:var(--pitch)}
.calc h2,.calc h3{color:var(--on-pitch)}
.calc .label{color:var(--on-pitch-mute)}

.calc .lead{color:var(--on-pitch-mute)}
.calc__in{grid-column:span 5;display:flex;flex-direction:column;gap:26px}
.calc__out{grid-column:span 7}
.field label{display:block;font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.04em;color:var(--on-pitch-mute);margin-bottom:12px}
.field__row{display:flex;align-items:center;gap:16px}
.field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;
}
.field input[type=range]::-webkit-slider-runnable-track{height:2px;background:#2C3036;border-radius:2px}
.field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;margin-top:-12px;
  background:var(--on-pitch);border:5px solid var(--signal-bright);cursor:grab;
}
.field input[type=range]::-moz-range-track{height:2px;background:#2C3036;border-radius:2px}
.field input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--on-pitch);border:5px solid var(--signal-bright);cursor:grab
}
.field__val{
  font-family:var(--f-mono);font-size:1.125rem;font-weight:500;min-width:4.5ch;text-align:right;
  color:var(--on-pitch);font-variant-numeric:tabular-nums;
}
.calc__panel{border:1px solid #23262B;border-radius:var(--radius);background:var(--pitch-2);padding:clamp(22px,3vw,36px)}
.calc__big{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap)}
.stat__k{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-pitch-mute)}
.stat__v{font-family:var(--f-mono);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:500;letter-spacing:-.03em;
  line-height:1.1;margin-top:10px;font-variant-numeric:tabular-nums}
.stat__v--signal{color:var(--signal-text)}
.stat__v--rust{color:var(--rust)}
.calc__verdict{
  margin-top:28px;padding-top:24px;border-top:1px solid #23262B;
  font-family:var(--f-display);font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.25;
}
.calc__verdict b{font-family:var(--f-mono);font-weight:500;color:var(--signal-text);font-size:.9em}
.calc__fine{margin-top:16px;font-size:var(--t-small);color:var(--on-pitch-mute);max-width:60ch}
.calc__cta{margin-top:32px}

/* ---------- machine diagram ---------- */
.machine__frame{
  margin-top:clamp(24px,4vw,44px);border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--paper-2);padding:clamp(16px,3vw,34px);overflow-x:auto;
}
.machine__frame svg{min-width:640px;margin-inline:auto}
.mline{stroke:var(--hairline);stroke-width:1.5;fill:none;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.2s var(--ease)}
.is-in .mline{stroke-dashoffset:0}
.mnode{opacity:0;transition:opacity .6s var(--ease)}
.is-in .mnode{opacity:1}
.mbox{fill:var(--paper);stroke:var(--ink);stroke-width:1.25}
.mbox--gate{fill:rgba(27,138,95,.14);stroke:var(--signal-bright)}
.mtext{font-family:'JetBrains Mono',monospace;font-size:11px;fill:var(--ink);letter-spacing:.04em}
.mtext--mute{fill:var(--graphite);font-size:10px}
.mtext--gate{fill:var(--signal-text)}

/* ---------- before / after ---------- */
.ba{
  position:relative;margin-top:clamp(24px,4vw,44px);border:1px solid var(--hairline);
  border-radius:var(--radius);overflow:hidden;background:var(--pitch);
  aspect-ratio:16/9;touch-action:pan-y;user-select:none;cursor:ew-resize;
}
.ba__layer{position:absolute;inset:0}
.ba__layer img{width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 var(--split,50%))}
.ba__tag{
  position:absolute;top:14px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 11px;border-radius:2px;background:rgba(11,12,14,.78);color:#fff;
}
.ba__tag--l{left:14px}.ba__tag--r{right:14px;background:rgba(27,138,95,.92);color:#04120C}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:#fff;transform:translateX(-1px);
}
.ba__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;border:0;
  display:grid;place-items:center;box-shadow:0 3px 14px rgba(0,0,0,.35);cursor:grab;
}
.ba__grip svg{width:20px;height:20px}
.ba__cap{margin-top:14px;font-size:var(--t-small);color:var(--graphite)}

/* ---------- numbered editorial list ---------- */
.deliver{border-top:1px solid var(--hairline)}
.deliver__row{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding-block:clamp(24px,3.4vw,40px);border-bottom:1px solid var(--hairline);
}
.deliver__n{grid-column:span 1;font-family:var(--f-mono);font-size:.8125rem;color:var(--signal-text);padding-top:6px}
.deliver__t{grid-column:span 4}
.deliver__d{grid-column:span 7;color:var(--graphite)}

/* ---------- proof ---------- */
.proof__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.proof__main{grid-column:span 7}
.proof__side{grid-column:span 5;display:flex;flex-direction:column;gap:var(--gap)}
.card{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--paper-2);overflow:hidden}
.card img{width:100%}
.card__cap{padding:14px 16px;font-family:var(--f-mono);font-size:.75rem;color:var(--graphite);
  border-top:1px solid var(--hairline);letter-spacing:.03em}
.term{background:var(--pitch);border-color:var(--hairline);color:var(--on-pitch);padding:20px 22px;
  font-family:var(--f-mono);font-size:.8125rem;line-height:1.8;overflow-x:auto}
.term .ok{color:var(--signal-text)}
.term .dim{color:var(--on-pitch-mute)}
.slot{
  display:grid;place-items:center;text-align:center;gap:10px;padding:clamp(32px,6vw,64px) 24px;
  border:1px dashed var(--hairline);border-radius:var(--radius);color:var(--graphite);background:var(--paper-2);
}
.slot .label{color:var(--graphite)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.step{grid-column:span 4;border-top:2px solid var(--ink);padding-top:20px}
.step .label{color:var(--signal-text)}
.step h3{margin:14px 0 10px}
.step p{color:var(--graphite)}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.tier{
  grid-column:span 4;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--paper-2);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;
}
.tier--lead{border-color:rgba(53,179,126,.55);background:rgba(27,138,95,.09);
  box-shadow:0 0 0 1px rgba(53,179,126,.18),0 18px 60px rgba(0,0,0,.45)}
.tier__badge{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal-text);margin-bottom:14px;min-height:1em}
.tier h3{margin-bottom:6px}
.tier__price{font-family:var(--f-mono);font-size:2.1rem;font-weight:500;letter-spacing:-.03em;margin:14px 0 4px}
.tier__term{font-family:var(--f-mono);font-size:.75rem;color:var(--graphite);letter-spacing:.06em}
.tier ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:10px}
.tier li{position:relative;padding-left:22px;font-size:var(--t-small);color:var(--graphite)}
.tier li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--signal)}
.tier .btn{margin-top:auto;justify-content:center}
.tiers__note{margin-top:28px;font-family:var(--f-mono);font-size:var(--t-small);color:var(--graphite)}


.nav__links{margin-left:auto;margin-right:22px;display:flex;gap:22px}
.nav__links a{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite);text-decoration:none;padding:6px 2px;border-bottom:1px solid transparent}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--signal-bright)}
@media (max-width:720px){ .nav__links{display:none} }
.foot__sub{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.03em;color:var(--graphite);
  display:inline-block;margin-top:6px}

/* ---------- who ----------
   A stranger is being asked for five figures. The one thing this page was
   missing was a person: a name, a place, and the objection answered out loud
   instead of hoped past. */
.who__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.who__card{grid-column:span 7}
.who__facts{grid-column:span 5;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--paper-2);padding:clamp(22px,2.6vw,30px)}
.who__name{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.02em}
.who__role{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal-text);margin-top:8px}
.who__where{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.04em;color:var(--graphite);margin-top:6px}
.who__body{color:var(--graphite);max-width:56ch;margin-top:20px}
.who__facts .label{color:var(--graphite)}
.who__facts ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:16px}
.who__facts li{font-size:var(--t-small);color:var(--graphite);padding-left:22px;position:relative}
.who__facts li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--signal)}
.who__facts b{color:var(--ink);font-weight:500}

/* ---------- the ask ----------
   Every done-for-you buyer's silent fear is hidden work on their side. Three
   lines and a limit kills it. */
.ask{margin-top:clamp(34px,4.4vw,58px);border-top:2px solid var(--ink);padding-top:24px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.ask__t{grid-column:span 4}
.ask__t .label{color:var(--rust)}
.ask__t h3{margin-top:12px}
.ask__list{grid-column:span 8;list-style:none;display:flex;flex-direction:column;gap:12px}
.ask__list li{position:relative;padding-left:22px;color:var(--graphite)}
.ask__list li::before{content:'';position:absolute;left:0;top:.66em;width:9px;height:2px;background:var(--rust)}
.ask__note{grid-column:span 8;margin-top:6px;font-family:var(--f-mono);font-size:var(--t-small);color:var(--graphite)}

/* ---------- the price anchor ----------
   The buyer computed a number three sections ago. Throwing it away before the
   price is the most expensive thing this page could do. */
.anchor{margin:-6px 0 30px;padding:16px 20px;border-left:2px solid var(--rust);background:var(--paper-2);
  font-size:var(--t-small);color:var(--graphite);max-width:72ch}
.anchor b{font-family:var(--f-mono);color:var(--rust);font-weight:500;font-size:1.05em}
.anchor em{font-style:normal;color:var(--ink)}

/* ---------- guarantee ---------- */

.guarantee blockquote{
  font-family:var(--f-display);font-size:clamp(1.7rem,3.9vw,3.1rem);line-height:1.16;letter-spacing:-.015em;
  max-width:22ch;
}
/* The word-reveal wraps every word in a <span>, so this must target only the
   author's own emphasis span, never the generated .w ones. */
.guarantee blockquote span:not(.w){color:var(--signal-text)}
.guarantee .label{color:var(--on-pitch-mute)}
/* Spans live here, not inline on the elements: an inline style cannot be
   collapsed by a media query, which is how this section shipped as two
   unreadable slivers on a phone. */
.guarantee__say{grid-column:span 7}
.guarantee__why{grid-column:span 5;max-width:44ch;color:var(--on-pitch-mute);align-self:end}
.guarantee__why p+p{margin-top:18px}

/* ---------- fit ---------- */
.fit{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.fit__col{grid-column:span 6}
.fit__col h3{margin-bottom:20px}
.fit ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.fit li{position:relative;padding-left:26px;color:var(--graphite)}
.fit li::before{position:absolute;left:0;top:0;font-family:var(--f-mono);font-size:.9em}
.fit--yes li::before{content:'+';color:var(--signal-text)}
.fit--no li::before{content:'\2212';color:var(--rust)}
.fit__note{margin-top:20px;font-size:var(--t-small);color:var(--graphite);font-style:italic}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-of-type{border-top:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;padding-block:clamp(20px,2.6vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--f-display);font-size:var(--t-h3);line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:22px;height:22px;position:relative}
.faq summary .pm::before,.faq summary .pm::after{
  content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq__a{padding-bottom:clamp(20px,2.6vw,30px);color:var(--graphite);max-width:62ch}

/* ---------- booking ---------- */

.book__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.book__copy{grid-column:span 5}
.book__embed{grid-column:span 7;min-height:420px;border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--paper);display:grid;place-items:center;padding:24px;text-align:center}
.book__embed .label{margin-bottom:14px}
.book__list{margin-top:26px;list-style:none;display:flex;flex-direction:column;gap:12px}
.book__list li{position:relative;padding-left:24px;color:var(--graphite);font-size:var(--t-small)}
.book__list li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--signal)}

/* ---------- footer ---------- */
.foot{padding-block:44px;border-top:1px solid var(--hairline);font-size:var(--t-small);color:var(--graphite)}
.foot__in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.foot a{display:inline-block;padding:13px 4px;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .calc__in,.calc__out,.proof__main,.proof__side,.book__copy,.book__embed{grid-column:1/-1}
  .step{grid-column:span 12}
  .tier{grid-column:span 12}
  .deliver__n{grid-column:span 12;padding-top:0}
  .deliver__t{grid-column:span 12}
  .deliver__d{grid-column:span 12}
  .fit__col{grid-column:1/-1}
  .who__card,.who__facts{grid-column:1/-1}
  .ask__t,.ask__list,.ask__note{grid-column:1/-1}
  .guarantee__say,.guarantee__why{grid-column:1/-1}
  .guarantee__why{align-self:start;margin-top:28px;max-width:62ch}
}
@media (max-width:560px){
  :root{--t-body:1rem}
  .wide-only{display:none}
  .hero__meta b{font-size:1.25rem}
  .nav .btn{padding:0 14px;letter-spacing:.06em}
  .ba{aspect-ratio:4/3}
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.job,.mnode{opacity:1;transform:none}
  .mline{stroke-dashoffset:0}
}

/* ---------- print ---------- */
@media print{
  .nav,.book__embed,.ba__grip{display:none}
}

/* =============================================================
   THE 3D CHAPTERS — the page inverts: editorial paper for the
   argument, full-bleed cinema for the machine and the archive.
   The canvas is fixed behind everything; paper sections are
   opaque and cover it, chapters go transparent and reveal it.
   Without WebGL the chapters stay black and render the
   .chapter__fallback blocks instead — the page loses nothing.
   ============================================================= */

/* the canvas paints its own ground: WebGL renders with alpha, and without
   this the paper body shows through every empty part of the scene */
#stage3d{position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;display:none;background:var(--paper)}
html.gl #stage3d{display:block}

/* The renderer's own grain is luminance-weighted (blacks stay black) and now
   covers the whole viewport, so the CSS layer would only double it and band
   every dark area. It survives for the page that never gets a canvas. */
html.gl body::before{display:none}

/* THE TWO-SELECTOR-LIST TRAP IS GONE. There used to be two hand-maintained
   lists here — one giving paper sections a z-index, one giving them a
   full-bleed underlay — and a section missing from either shipped broken
   (#who did, exactly this way). With no paper there is nothing to underlay:
   one rule puts all content above the canvas and that is the whole system. */
#stage3d{z-index:0}
/* ⚠️ .nav is NOT in this list. It sets its own `position:sticky` earlier, and
   naming it here re-declared `position:relative` at equal specificity but later
   in the file — which silently un-stuck the header, so a 15,000px page selling
   $9,000 had no navigation and no CTA anywhere past the first screen. */
main,.foot{position:relative;z-index:1}

/* ---------- the chapter shell ---------- */
.chapter{position:relative;background:var(--paper);color:var(--on-pitch);overflow:clip}
html.gl .chapter{background:transparent;min-height:215vh}
html.gl .chapter--archive{min-height:185vh}
html.gl .chapter__fallback{display:none}
/* (The seam-sealing gradients that used to live here are gone with the seam.) */
html:not(.gl) .hud{display:none}
html:not(.gl) .chapter{padding-block:var(--section)}

.chapter__sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;
  padding-block:clamp(56px,8vh,104px);pointer-events:none}
html:not(.gl) .chapter__sticky{position:static;min-height:0;padding-block:0 clamp(28px,4vw,52px)}
.chapter__sticky .wrap{pointer-events:auto}
.chapter__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.chapter__head{grid-column:span 8;position:relative}
/* The viewport-wide scrim was a gamble: at some scroll depths a bright clip
   lands inside the text's own box and wins. This is a scrim bound to the text
   itself, so legibility never depends on where the camera happens to be. */
html.gl .chapter__head::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-9vh;bottom:-9vh;left:-100vw;right:-8%;
  background:linear-gradient(90deg,
    rgba(11,12,14,.97) 0%, rgba(11,12,14,.96) 74%,
    rgba(11,12,14,.88) 89%, rgba(11,12,14,0) 100%);
}
.chapter .label{color:var(--on-pitch-mute)}

.chapter h2{color:var(--on-pitch);margin-top:16px}
.chapter .lead{color:var(--on-pitch-mute);margin-top:20px}
.chapter__fallback{padding-top:clamp(24px,4vw,44px)}
.chapter__fallback .ba__cap,.chapter__fallback .card__cap{color:var(--on-pitch-mute)}
.chapter__fallback .machine__frame{background:rgba(241,239,235,.04);border-color:rgba(241,239,235,.16)}
.chapter__fallback .mbox{fill:#12151a;stroke:#8f979f}
.chapter__fallback .mtext{fill:#F1EFEB}
.chapter__fallback .mtext--mute{fill:#9A9DA3}
.chapter__fallback .mline{stroke:rgba(241,239,235,.22)}

/* ---------- the stage ladder ---------- */
.stages{list-style:none;margin-top:clamp(28px,4vw,44px);border-left:1px solid rgba(241,239,235,.14)}
.stages li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;
  padding:9px 0 9px 20px;margin-left:-1px;border-left:2px solid transparent;
  color:var(--on-pitch-mute);font-size:var(--t-small);opacity:.78;
  transition:opacity .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease)}
.stages li b{font-family:var(--f-mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;color:#5FD3A0}
.stages li span{grid-column:2;display:block;font-size:.8125rem}
.stages li.is-on{opacity:1;color:var(--on-pitch);border-left-color:#5FD3A0}

/* ---------- the telemetry HUD — a system status bar ----------
   Fixed to the bottom edge, only while a chapter is on screen. It never
   covers the render and never lengthens the reading column.          */
.hud{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,38px);
  padding:11px var(--pad);border-top:1px solid rgba(241,239,235,.16);
  background:rgba(11,12,14,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;
  color:var(--on-pitch-mute);
  opacity:0;transform:translateY(100%);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
body.on-chapter .hud{opacity:1;transform:none}
.hud__ttl{text-transform:uppercase;letter-spacing:.2em;color:#5FD3A0;flex:none}
.hud__row{display:flex;align-items:baseline;gap:8px;flex:none}
.hud__row span{opacity:.85}
.hud__row b{font-weight:500;color:var(--on-pitch);font-variant-numeric:tabular-nums}
.hud__note{margin-left:auto;opacity:.8;letter-spacing:.02em;text-align:right}
@media (max-width:900px){
  /* never below 12px — the status bar loses the note and the tier, not legibility */
  /* wrap rather than overflow — a horizontally scrolling status bar hides
     content behind a gesture nobody knows is there */
  .hud{gap:6px 16px;font-size:.75rem;padding:9px var(--pad);flex-wrap:wrap}
  .hud__note{display:none}
  .hud__row.is-minor{display:none}
}

/* ---------- the nav goes dark over a chapter ---------- */
body.on-dark .nav{background:rgba(11,12,14,.72);border-bottom-color:rgba(241,239,235,.12)}
body.on-dark .brand{color:var(--on-pitch)}
/* On the dark bar the button needs BOTH: >=4.5:1 for its white label and
   >=3:1 against the bar itself. #14805A clears 4.93:1 and 3.92:1; the
   brighter mint fails the label at 4.34:1. */
body.on-dark .nav .btn{background:#14805A;border-color:#14805A}

@media (max-width:1000px){
  /* the copy takes the top of the frame, the machine takes the bottom */
  .chapter__sticky{align-items:flex-start;padding-block:clamp(64px,9vh,96px) 0}
  .chapter__head,.hud{grid-column:1/-1}
  .hud{justify-self:start;margin-top:26px}
  html.gl .chapter{min-height:190vh}
  html.gl .chapter--archive{min-height:165vh}
}
@media (prefers-reduced-motion:reduce){
  html.gl .chapter{min-height:0}
  html.gl .chapter__sticky{position:static;min-height:0}
}

/* The reading scrim — the left third stays legible no matter what the
   renderer is doing behind it. Without this the headline competes with
   the machine and both lose. */
html.gl .chapter__sticky::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(11,12,14,.95) 0%, rgba(11,12,14,.92) 34%,
    rgba(11,12,14,.62) 52%, rgba(11,12,14,0) 74%);
}
@media (max-width:1000px){
  html.gl .chapter__sticky::before{
    background:linear-gradient(180deg,
      rgba(11,12,14,.97) 0%, rgba(11,12,14,.94) 52%,
      rgba(11,12,14,.62) 70%, rgba(11,12,14,0) 88%);
  }
}

/* The fallback chapter controls are only reachable without WebGL, and both are
   keyboard-driven — they get a ring on :focus, not just :focus-visible. */
.machine__frame:focus,.ba__grip:focus{outline:2px solid var(--signal);outline-offset:3px}
.chapter .machine__frame:focus{outline-color:#5FD3A0}

/* Printing has no canvas: the chapters would come out white text on white.
   Give them their own ground and let the fallbacks back in. */
@media print{
  html.gl .chapter{min-height:0}
  html.gl .chapter__sticky{position:static;min-height:0}
  html.gl .chapter__fallback{display:block}
}

/* =============================================================
   THE MOTION LAYER — feel only. Every rule here is inert under
   prefers-reduced-motion (see the block at the end of the file).
   ============================================================= */

/* headings arrive a word at a time, rising into place */
.w{display:inline-block;opacity:0;transform:translateY(.4em);
   transition:opacity .85s var(--ease),transform .85s var(--ease)}
.is-lit .w{opacity:1;transform:none}

/* the reticle — it exists only inside the black chapters */
.reticle{position:fixed;left:0;top:0;z-index:45;pointer-events:none;opacity:0;
  transition:opacity .3s var(--ease);will-change:transform}
.reticle.is-on{opacity:1}
.reticle i{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(95,211,160,.5)}
.reticle i::before,.reticle i::after{content:'';position:absolute;background:rgba(95,211,160,.5)}
.reticle i::before{left:50%;top:-7px;width:1px;height:6px;transform:translateX(-50%)}
.reticle i::after{left:50%;bottom:-7px;width:1px;height:6px;transform:translateX(-50%)}
.reticle b{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;
  background:#5FD3A0}

/* Magnetic buttons drive transform from rAF, so it must come off the
   CSS transition or the two fight each other every frame. */
.btn{will-change:transform;transition:background-color .35s var(--ease)}
.btn:hover{transform:none}

@media (prefers-reduced-motion:reduce){
  .w{opacity:1!important;transform:none!important}
  .reticle{display:none}
}

/* ---------- the curtain — a 620ms entrance, then gone ----------
   Present only when the head script marked the document. Everything is a
   CSS animation: a failed script can neither strand the overlay nor leave
   the hero hidden. */
.curtain{display:none}
html.pre .curtain{position:fixed;inset:0;z-index:100;background:var(--pitch);
  color:var(--on-pitch);display:grid;place-items:center;
  animation:hb-lift .95s var(--ease) .62s forwards}
@keyframes hb-lift{to{transform:translateY(-101%);visibility:hidden}}
.curtain__in{display:grid;justify-items:center;gap:14px}
.curtain__in svg{width:30px;height:30px}
.curtain__mark{font-family:var(--f-mono);font-size:.8125rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;padding-left:.34em}
.curtain__bar{width:120px;height:1px;background:rgba(241,239,235,.18);overflow:hidden}
.curtain__bar i{display:block;height:100%;width:100%;background:#5FD3A0;
  transform:scaleX(0);transform-origin:left;animation:hb-load .62s var(--ease) forwards}
@keyframes hb-load{to{transform:scaleX(1)}}

/* the hero arrives behind it, a beat at a time — also pure CSS */
@keyframes hb-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.pre .hero .label{animation:hb-in .9s var(--ease) .68s both}
html.pre .hero__sub {animation:hb-in .9s var(--ease) .98s both}
html.pre .hero__cta {animation:hb-in .9s var(--ease) 1.10s both}
html.pre .hero__meta{animation:hb-in .9s var(--ease) 1.22s both}

/* ---------- the read-progress rail ---------- */
.rail{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none;
  background:transparent}
.rail i{display:block;height:100%;width:100%;background:var(--signal);
  transform:scaleX(0);transform-origin:left;will-change:transform}
body.on-chapter .rail i{background:#5FD3A0}

/* ---------- the console tail in the status bar ---------- */
.hud__note b{font-weight:500}
.hud__note .ok{color:#5FD3A0}
.hud__note .bad{color:#E08A55}

/* ---------- typographic finishing ---------- */
h1,h2{text-wrap:balance}
.lead,.faq__a p,.deliver__d,.step p,.guarantee__why p{text-wrap:pretty}
.faq__a{overflow:hidden}
.card{overflow:hidden}
.card img{will-change:transform}

/* pricing cards lift, and the lead card lifts further */
.tier{transition:transform .5s var(--ease),border-color .5s var(--ease),
      box-shadow .5s var(--ease)}
.tier:hover{transform:translateY(-4px);border-color:var(--glass-line)}
.tier--lead:hover{transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(53,179,126,.3),0 24px 70px rgba(0,0,0,.55)}

/* the FAQ marker rotates rather than jumps */
.faq summary{transition:color .35s var(--ease)}
.faq summary:hover{color:var(--signal-text)}

@media (prefers-reduced-motion:reduce){
  .tier:hover,.tier--lead:hover{transform:none}
  .card img{transform:none!important}
}

/* a quiet line grounding what the reader is looking at inside a chapter */
.chapter__note{margin-top:18px;font-family:var(--f-mono);font-size:.75rem;
  letter-spacing:.04em;color:var(--on-pitch-mute);opacity:.85}

/* ---------- the hero fills its own width on large screens ----------
   The right two-thirds were empty paper at 1440+. The four operating
   numbers move into that column: existing content, no invention, and the
   headline keeps its measure. */
@media (min-width:1200px){
  .hero{display:grid;grid-template-columns:repeat(12,1fr);
    column-gap:var(--gap);align-items:start}
  .hero .label  {grid-column:1 / span 8;grid-row:1}
  .hero h1      {grid-column:1 / span 8;grid-row:2}
  .hero__sub    {grid-column:1 / span 7;grid-row:3}
  .hero__cta    {grid-column:1 / span 8;grid-row:4}
  .hero__meta   {grid-column:10 / span 3;grid-row:2 / span 3;
    margin-top:6px;padding-top:0;border-top:0;
    border-left:1px solid var(--hairline);padding-left:24px;
    display:flex;flex-direction:column;gap:26px}
  .hero__meta div{font-size:.9375rem}
}

/* =============================================================
   THE GLASS LAYER
   One dark world, and every reading surface is a pane floating in
   it. Nothing here is decorative: over a live render, unscrimmed
   type is unreadable at some scroll depths and perfectly readable
   at others, which is the worst possible outcome — it fails only
   for some readers, silently.
   ============================================================= */

/* ---------- the reading scrim ----------
   A soft pool of ground under each content column, feathered out so the
   world is still visible around it. Every text block gets one now, not
   just the two old chapter heads: everything sits over the render. */
.hero.wrap::before,
.band.wrap::before,
.band > .wrap::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  /* full-bleed WITHOUT overflowing: a negative inline inset in vw pushes the
     box past the viewport and the document grows. `.wrap` is capped at 1240px,
     so the pool has to be re-centred at 100vw instead. */
  top:-14%;bottom:-14%;left:50%;width:100vw;transform:translateX(-50%);
  background:radial-gradient(68% 58% at 42% 50%,
    rgba(8,9,11,.93) 0%, rgba(8,9,11,.86) 38%,
    rgba(8,9,11,.52) 68%, rgba(8,9,11,0) 100%);
}
.hero.wrap > *,
.band.wrap > *,
.band > .wrap > *{position:relative;z-index:1}
/* a portrait frustum puts geometry directly behind the column, so the phone
   needs a flatter, heavier pool rather than a centred one */
@media (max-width:900px){
  .hero.wrap::before,
  .band.wrap::before,
  .band > .wrap::before{
    top:-10%;bottom:-10%;left:50%;width:100vw;transform:translateX(-50%);
    background:linear-gradient(180deg,
      rgba(8,9,11,0) 0%, rgba(8,9,11,.90) 9%,
      rgba(8,9,11,.94) 50%, rgba(8,9,11,.90) 91%, rgba(8,9,11,0) 100%);
  }
}

/* ---------- the panes ----------
   Frosted glass, hairline edge, never a solid grey border. */
.calc__panel,.who__facts,.tier,.card,.slot,.book__embed,.machine__frame,.anchor,.term{
  border-color:var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
@supports (backdrop-filter:blur(2px)){
  /* Blur over a live WebGL canvas is expensive. Desktops can afford it;
     phones get the flat pane below instead, and look no worse for it. */
  @media (min-width:901px){
    .calc__panel,.who__facts,.tier,.card,.slot,.book__embed,.machine__frame{
      backdrop-filter:blur(16px) saturate(126%);
      -webkit-backdrop-filter:blur(16px) saturate(126%);
    }
  }
}
@media (max-width:900px){
  .calc__panel,.who__facts,.tier,.card,.slot,.book__embed,.machine__frame{
    background:var(--pitch-2);
  }
}

/* the calculator console is the instrument of the page — it reads as one */
.calc__panel{background:rgba(10,12,14,.74);border-radius:5px}
.field input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.14)}
.field input[type=range]::-moz-range-track{background:rgba(255,255,255,.14)}
.field input[type=range]::-webkit-slider-thumb{border-color:var(--signal-bright);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 18px rgba(53,179,126,.45)}
.field input[type=range]::-moz-range-thumb{border-color:var(--signal-bright);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 18px rgba(53,179,126,.45)}
.field input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}

/* the machine diagram and the terminal are darker than the panes around them */
.machine__frame{background:rgba(8,9,11,.66)}
.mbox{fill:#12151A;stroke:#8F979F;stroke-width:1.25}
.mtext{fill:var(--ink)}
.mtext--mute{fill:var(--graphite)}
.mline{stroke:rgba(241,239,235,.24)}
.slot{border-style:dashed;border-color:var(--glass-line);background:rgba(255,255,255,.02)}

/* the guarantee is the strongest object on the page: give it a plinth */
.guarantee > .wrap{padding-block:clamp(28px,4vw,52px)}
.guarantee > .wrap::before{
  background:radial-gradient(72% 66% at 40% 50%,
    rgba(8,9,11,.96) 0%, rgba(8,9,11,.92) 44%, rgba(8,9,11,0) 100%);
}

/* the footer sits on the far side of the door */
.foot{border-top-color:var(--hairline);background:rgba(8,9,11,.86)}

/* ---------- reduced motion ----------
   The canvas is NOT hidden. With no paper left, hiding it would leave a flat
   black page. machine3d.js draws exactly one frame and never starts the loop. */
@media (prefers-reduced-motion:reduce){
  #stage3d{display:none}
  /* one still frame, held at a third — atmosphere, never competition. A single
     fixed image sits behind 14,000px of copy here, so it has to lose. */
  html.gl #stage3d{display:block;opacity:.34}
  html.gl .chapter{min-height:0}
  html.gl .chapter__sticky{position:static;min-height:0;padding-block:var(--section) 0}
  html.gl .chapter__fallback{display:block}
}

/* ---------- print ----------
   Paper is light. Put the light values back rather than printing a black page. */
@media print{
  :root{
    --paper:#fff;--paper-2:#F4F2EE;--ink:#0E0F11;--graphite:#54585F;
    --hairline:#DDD8D0;--pitch:#fff;--pitch-2:#F4F2EE;
    --on-pitch:#0E0F11;--on-pitch-mute:#54585F;
    --signal:#0F5C3F;--signal-text:#0F5C3F;--signal-bright:#0F5C3F;--rust:#8F3F13;
    --glass:transparent;--glass-line:#DDD8D0;
  }
  body{background:#fff;color:#000}
  body::before,#stage3d,.hud,.reticle{display:none!important}
  .hero.wrap::before,.band.wrap::before,.band > .wrap::before{display:none}
  .calc__panel,.who__facts,.tier,.card,.slot,.book__embed,.machine__frame,.term{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:#fff;box-shadow:none;border-color:#DDD8D0;
  }
  .btn{color:#fff!important;background:#0F5C3F!important;border-color:#0F5C3F!important}
  .mbox{fill:#fff;stroke:#0E0F11}
  .mtext{fill:#0E0F11}.mtext--mute{fill:#54585F}.mline{stroke:#DDD8D0}
  /* The chapters keep a transparent ground for the canvas and their reading
     scrim is a hardcoded near-black — on paper that printed grey type on a
     grey slab. Both have to go, and the chapters print as ordinary pages. */
  html.gl .chapter{background:#fff!important}
  html.gl .chapter__sticky::before,
  html.gl .chapter__head::before{display:none!important}
  .chapter,.chapter h2,.chapter h3{color:#0E0F11}
  .chapter .lead,.chapter .label,.chapter__note,.stages li span{color:#54585F}
  .stages li b{color:#0F5C3F}
  .ba__tag{background:#0E0F11;color:#fff}
}

/* =============================================================
   THE COUNTER — the one moment on this page that cannot be copied.
   The three sliders drive the volume of unpublished material lying in
   the corridor ahead: drag "pieces per month" and the world thickens.
   That only works if the world can be SEEN, so the console takes the
   left half and the right half is left open on purpose. Side-by-side
   panels spanning all twelve columns hid the entire effect.
   ============================================================= */
@media (min-width:1001px){
  #calc .grid{grid-template-rows:auto auto}
  .calc__in {grid-column:1 / span 5;grid-row:1}
  .calc__out{grid-column:1 / span 6;grid-row:2;margin-top:clamp(24px,3vw,40px)}
  #calc .head h2,#calc .head .lead{max-width:19ch}
  #calc .head .lead{max-width:44ch}
  /* the pool sits under the console, not under the whole band */
  #calc > .wrap::before{
    background:radial-gradient(64% 62% at 30% 56%,
      rgba(8,9,11,.94) 0%, rgba(8,9,11,.88) 40%,
      rgba(8,9,11,.46) 70%, rgba(8,9,11,0) 100%);
  }
}
/* more scroll room so the arrival, the drag and the departure are separate
   beats rather than one blur */
#calc{padding-block:calc(var(--section) * 1.5)}

/* a slider you can see working: the thumb glows, and the track fills */
.field__row{position:relative}
.calc__hint{
  margin-top:14px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--graphite);display:flex;align-items:center;gap:9px;
}
.calc__hint::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--signal-bright);
  box-shadow:0 0 12px rgba(53,179,126,.9);flex:none;
}

.guarantee__h{
  font-family:var(--f-display);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.2;
  color:var(--graphite);margin:14px 0 22px;letter-spacing:0;
}
.guarantee blockquote{margin-top:0}

/* =============================================================
   THE DOOR — the close.
   With no calendar wired, this block IS the conversion path, and it
   was a centred grey box with a generic button: the weakest object on
   a page asking $9,000. It is now the second-most-designed moment
   here, after the calculator, and it says out loud why there is no
   booking widget instead of looking like it is waiting for one.
   ============================================================= */
.book__embed{
  display:block;text-align:left;padding:clamp(26px,3vw,40px);
  background:rgba(10,12,14,.78);border-radius:5px;
}
.book__lede{color:var(--graphite);max-width:46ch;margin-top:6px}
.book__ask{
  list-style:none;counter-reset:ask;margin:clamp(22px,2.6vw,30px) 0;
  border-top:1px solid var(--hairline);
}
.book__ask li{
  counter-increment:ask;position:relative;
  padding:16px 0 16px 46px;border-bottom:1px solid var(--hairline);
}
.book__ask li::before{
  content:counter(ask);position:absolute;left:0;top:16px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.75rem;color:var(--signal-text);
  border:1px solid rgba(53,179,126,.4);background:rgba(27,138,95,.10);
}
.book__ask b{display:block;font-weight:500;color:var(--ink)}
.book__ask span{display:block;margin-top:3px;font-size:var(--t-small);color:var(--graphite)}
.btn--big{min-height:60px;padding:0 30px;font-size:.875rem;width:100%;justify-content:center}
.book__reply{
  margin-top:16px;font-family:var(--f-mono);font-size:.75rem;line-height:1.7;
  letter-spacing:.03em;color:var(--graphite);
}
@media (max-width:1000px){ .book__embed{min-height:0} }

/* =============================================================
   LARGE SCREENS — the page has to keep growing.
   Everything above stops scaling at about 1333px: --maxw is 1240 and
   every type clamp has hit its ceiling. On a 27" display that left the
   whole argument as a small island with the world all around it, which
   reads as a page that does not own the screen it is on.
   ============================================================= */
@media (min-width:1680px){
  :root{
    --maxw:1440px;
    --t-display:clamp(2.75rem,6.6vw,6.5rem);
    --t-h2:clamp(2rem,4.2vw,4.1rem);
    --t-h3:clamp(1.35rem,2.1vw,2rem);
    --t-lead:clamp(1.125rem,1.55vw,1.5rem);
    --t-body:1.125rem;
    --t-small:1rem;
    --section:clamp(64px,9vw,170px);
  }
  .hero__meta b{font-size:1.75rem}
  .tier__price{font-size:2.5rem}
}
@media (min-width:2100px){
  :root{
    --maxw:1660px;
    --t-display:clamp(2.75rem,6.6vw,7.4rem);
    --t-h2:clamp(2rem,4.2vw,4.7rem);
    --t-body:1.1875rem;
    --section:clamp(64px,9vw,200px);
  }
}

/* the terms, in his own words from the FAQ — the buyer should not have to hunt
   for when money changes hands after being shown a number */
.tier__pay{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.05em;
  color:var(--signal-text);margin-top:6px;
}

/* =============================================================
   THE ELEVEN JOBS — the last flat block on the page.
   Everything else here has material and light; these were plain
   CSS chips. They now carry the same argument the whole page runs
   on: ten of them are UNLIT — inert, cold, nobody's tool touches
   them — and the one somebody already bought is lit.
   ============================================================= */
.job{
  position:relative;
  border-color:var(--glass-line);
  background:rgba(255,255,255,.028);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             color .5s var(--ease),border-color .5s var(--ease),
             background-color .5s var(--ease),box-shadow .5s var(--ease);
}
.is-in .job--manual{
  border-color:rgba(224,138,85,.26);
  color:rgba(224,138,85,.86);
  background:rgba(224,138,85,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.is-in .job--auto{
  border-color:rgba(53,179,126,.55);
  color:var(--signal-text);
  background:rgba(27,138,95,.13);
  /* the one that is already handled is the only lit object in the row */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 0 0 1px rgba(53,179,126,.16),
             0 4px 26px rgba(53,179,126,.20);
}
@supports (backdrop-filter:blur(2px)){
  @media (min-width:901px){ .job{backdrop-filter:blur(10px) saturate(120%)} }
}

/* the close button broke to two lines at 390 with the arrow stranded alone on
   the second — it has to hold one line at the narrowest width the page supports */
@media (max-width:560px){
  .btn--big{font-size:.75rem;letter-spacing:.055em;padding:0 16px;gap:8px}
}