/* =========================================================
   MarginHunter — "the instrument"
   Default styles are the STATIC composition (no-JS, reduced
   motion). body.fx layers the choreography on top.
   ========================================================= */

:root{
  --void:     #05080A;
  --panel:    #0C1216;
  --grid:     #16211F;
  --phosphor: #D6E4DC;
  /* spec #5E6F6A fails AA for small mono on --void; same hue, lifted */
  --dim:      #6B7D77;
  --leak:     #FF3B2F;
  --sealed:   #FFB03A;
  --scan:     #7DF2C8;

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --pad:clamp(1.25rem,4vw,3rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--void);
  color:var(--phosphor);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--scan);color:var(--void)}
a{color:inherit}
:focus-visible{outline:2px solid var(--scan);outline-offset:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
b{font-weight:700}

/* graticule ground — texture through information */
.scene{
  position:relative;
  padding:clamp(4rem,10vw,7rem) var(--pad);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:72px 72px;
}
.scene::after{ /* fade the grid so it reads as depth, not wallpaper */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 30%,var(--void) 100%);
}
.scene > *{position:relative;z-index:1}

/* ================= fixed instrument chrome ================= */
.wordmark{
  position:fixed;top:1.1rem;left:1.4rem;z-index:60;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;color:var(--phosphor);
  mix-blend-mode:screen;
}
.hud{
  position:fixed;top:1.1rem;right:1.4rem;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;
  color:var(--dim);text-align:right;
  transition:opacity .5s;
}
.hud .t-elapsed{color:var(--leak);font-weight:700}
.hud.hud-off{opacity:0}
.coords{
  position:fixed;bottom:1rem;left:1.4rem;z-index:60;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--dim);
  opacity:.6;
}
@media (max-width:47em){
  .coords{display:none}
  .hud{
    font-size:.6rem;
    background:color-mix(in srgb,var(--void) 88%,transparent);
    border:1px solid var(--grid);
    padding:.35rem .55rem;
  }
  /* the pipeline becomes a top band; the copy flows beneath it */
  .s1 #pipe{height:38svh}
}

/* sticky call bar — mobile, appears after scene 1 */
.callbar{
  position:fixed;inset:auto 0 0 0;z-index:70;
  display:none;
  align-items:center;justify-content:center;
  background:var(--sealed);color:var(--void);
  font-family:var(--mono);font-weight:700;font-size:.85rem;letter-spacing:.04em;
  padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  text-decoration:none;
  transform:translateY(110%);transition:transform .35s;
}
.callbar.show{transform:none}
@media (max-width:47em){
  .callbar{display:flex}
}

/* ================= buttons ================= */
.btn{
  display:inline-block;
  font-family:var(--mono);font-weight:700;font-size:.85rem;letter-spacing:.02em;
  text-decoration:none;
  padding:.9rem 1.3rem;
  border:1px solid transparent;
  transition:background-color .2s,border-color .2s,color .2s;
}
.btn-amber{background:var(--sealed);color:var(--void)}
.btn-amber:hover{background:#FFC260}
.btn-ghost{border-color:var(--grid);color:var(--phosphor)}
.btn-ghost:hover{border-color:var(--dim)}

.scene-tag{
  font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.22em;
  color:var(--dim);margin-bottom:clamp(2rem,5vw,3.5rem);
}

/* =========================================================
   SCENE 1 — THE SCAN
   ========================================================= */
.s1{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:5.5rem;
  overflow:hidden;
}
/* desktop: the pipeline owns a reserved band at the top of the hero —
   the copy always clears it, on any screen height */
@media (min-width:47em){
  .s1{padding-top:clamp(19rem,30svh,22rem)}
}
/* .s1 > * would win the cascade and pull this back into flex flow —
   the doubled class keeps it pinned to the band */
.s1 .pipe-label{
  position:absolute;left:var(--pad);top:6.2rem;
  font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.24em;color:var(--dim);
}
@media (max-width:47em){.s1 .pipe-label{top:3.4rem;left:1.25rem}}
/* shorter desktop windows: tighter band + type so the CTAs stay above the fold */
@media (min-width:47em) and (max-height:840px){
  .s1{padding-top:15rem}
  .s1 h1{font-size:3.4rem}
  .s1-sub{font-size:1rem;margin-top:1rem}
  .s1-ctas{margin-top:1.5rem}
  .s1-copy{padding-bottom:1.75rem}
}
#pipe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}
.s1 > *{position:relative;z-index:1}

.s1-readouts .readout{
  position:absolute;
  display:flex;flex-direction:column;gap:.15rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--phosphor);
  padding:.6rem .75rem;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  border:1px solid var(--grid);
  min-width:15rem;
  transition:opacity .35s,border-color .35s;
}
.readout .ro-id{color:var(--dim);letter-spacing:.14em;font-size:.62rem}
.readout .ro-loss{color:var(--leak);font-weight:700}
.readout .ro-scen{
  color:var(--dim);font-size:.55rem;letter-spacing:.1em;
  margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--grid);
}
/* fx: readouts live in the canvas coordinate space, resolving beside the beam */
body.fx .s1-readouts{position:absolute;inset:0;z-index:3;pointer-events:none}
body.fx .readout{opacity:0;pointer-events:none;transform:translateY(6px)}
body.fx .readout.lit{
  opacity:1;transform:none;
  border-color:color-mix(in srgb,var(--leak) 45%,var(--grid));
}

/* static (no-fx) fallback: readouts flow inline above the copy */
body:not(.fx) .s1-readouts{
  display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem;position:relative;
}
body:not(.fx) .s1-readouts .readout{position:static}

.s1-copy{max-width:46rem;padding-bottom:clamp(2rem,6vh,4rem)}
.s1 h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.2rem,6.2vw,4.6rem);
  line-height:1.02;letter-spacing:-.03em;
  text-wrap:balance;
  max-width:20ch;
}
.s1-sub{margin-top:1.3rem;color:var(--dim);font-size:1.08rem;max-width:36rem}
.s1-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.s1-note{
  margin-top:1.1rem;font-family:var(--mono);font-size:.72rem;color:var(--dim);letter-spacing:.03em;
}

/* =========================================================
   SCENE 2 — ONE LEAD, TWO TIMELINES
   ========================================================= */
body.fx .s2{height:380vh;padding:0}
body.fx .s2-pin{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem var(--pad) 2rem;
  overflow:hidden;
}
.s2-pin{max-width:74rem;margin-inline:auto}

.s2-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:-.015em;
}
@media (max-width:26em){.s2-title{display:none}} /* protect the pin on short phones */
.s2-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.8rem;color:var(--phosphor);letter-spacing:.06em;
  margin-bottom:2rem;
}
.s2-entrywrap{display:flex;align-items:center;gap:.8rem}
.s2-lead-dot{
  width:9px;height:9px;border-radius:50%;background:var(--phosphor);
  box-shadow:0 0 12px rgba(214,228,220,.8);
}

.lanes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,3.5rem)}
.lane{
  position:relative;
  border:1px solid var(--grid);
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  padding:1.2rem 1.2rem 1.5rem;
  display:flex;flex-direction:column;gap:.85rem;
  align-content:flex-start;
}
.lane-tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--dim);
  margin-bottom:.4rem;
}
.lane-red .lane-tag{color:color-mix(in srgb,var(--leak) 70%,var(--dim))}
.lane-amber .lane-tag{color:color-mix(in srgb,var(--sealed) 75%,var(--dim))}

.lane-dot{
  position:absolute;top:3rem;left:50%;width:10px;height:10px;border-radius:50%;
}
.dot-red{background:var(--leak);box-shadow:0 0 14px rgba(255,59,47,.7)}
.dot-amber{background:var(--sealed);animation:steady 1.6s linear infinite}
/* box-shadow/opacity only — gsap owns this dot's transform */
@keyframes steady{
  0%,100%{box-shadow:0 0 14px rgba(255,176,58,.75)}
  50%{box-shadow:0 0 5px rgba(255,176,58,.3)}
}
.dot-amber.heartbeat{animation:heartbeat 1.15s linear infinite}
@keyframes heartbeat{
  0%,50%,100%{box-shadow:0 0 6px rgba(255,176,58,.35)}
  8%{box-shadow:0 0 22px rgba(255,176,58,1)}
  18%{box-shadow:0 0 8px rgba(255,176,58,.45)}
  28%{box-shadow:0 0 18px rgba(255,176,58,.9)}
}
body:not(.fx) .lane-dot{display:none}
.ev-aside{
  display:block;font-size:.62rem;letter-spacing:.1em;color:var(--dim);margin-top:.15rem;
}

.ev{font-size:.78rem;color:var(--dim);letter-spacing:.02em}
.ev b{color:var(--sealed)}
.ev-lost{color:var(--leak);font-weight:700;letter-spacing:.06em}
.ev-cancel{color:var(--leak)}
.ev-rebook{color:var(--sealed)}
.ev-booked{color:var(--phosphor)}
.cal-chip{
  display:inline-block;margin-left:.5rem;padding:.15rem .5rem;
  border:1px solid var(--sealed);color:var(--sealed);font-weight:700;
}

.chat{display:flex;flex-direction:column;gap:.5rem;max-width:26rem}
.msg{
  font-family:var(--mono);font-size:.74rem;line-height:1.55;
  padding:.55rem .75rem;border-radius:6px;max-width:88%;
}
.msg.out{
  align-self:flex-start;
  background:color-mix(in srgb,var(--sealed) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--sealed) 35%,var(--grid));
}
.msg.in{
  align-self:flex-end;
  background:var(--panel);border:1px solid var(--grid);color:var(--dim);
}

.s2-close{
  margin-top:2.2rem;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,3.4vw,2.2rem);letter-spacing:-.02em;line-height:1.15;
  text-align:center;text-wrap:balance;
}

/* fx initial states for scene 2 (gsap scrubs them in) */
body.fx .s2 [data-ev]{opacity:0;transform:translateY(12px)}
/* fx: the verdict lands over the dimmed lanes at the end of the scene,
   costing the pin no flow height */
body.fx .s2-close{
  opacity:0;
  position:absolute;inset:0;
  display:grid;place-items:center;
  padding:2rem;margin:0;
  pointer-events:none;
}

/* shorter desktop windows: compress the pin so nothing clips */
@media (min-width:47em) and (max-height:840px){
  body.fx .s2-pin{padding-top:3.2rem}
  .s2-head{margin-bottom:1.2rem}
  .lane{gap:.6rem;padding:1rem 1rem 1.1rem}
  .chat{gap:.4rem}
  .msg{font-size:.68rem;padding:.45rem .6rem}
  .ev{font-size:.72rem}
}

@media (max-width:47em){
  body.fx .s2-pin{justify-content:flex-start;padding-top:2.6rem}
  .s2-head{margin-bottom:1rem}
  .lane{padding:.9rem .7rem 1.1rem;min-height:auto;gap:.6rem}
  .lane-dot{left:auto;right:.9rem;top:2.4rem}
  .ev{font-size:.66rem}
  .chat{gap:.4rem}
  .msg{font-size:.64rem;max-width:100%;padding:.45rem .6rem}
  .lane-tag{font-size:.55rem;letter-spacing:.16em}
  .s2-close{margin-top:1.2rem;font-size:1.15rem}
}

/* =========================================================
   SCENE 3 — THE THREE LEAKS
   ========================================================= */
.s3{max-width:74rem;margin-inline:auto}
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:60em){.modules{grid-template-columns:1fr}}

.module{
  position:relative;overflow:hidden;
  text-align:left;cursor:pointer;
  background:var(--panel);
  border:1px solid var(--grid);
  color:var(--phosphor);
  font-family:var(--body);
  padding:1.4rem 1.4rem 1.6rem;
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .3s;
}
.module .mod-head{display:flex;flex-direction:column;gap:.5rem}
.mod-id{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--leak);font-weight:700;
}
.mod-title{
  font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-.015em;line-height:1.1;
}
.mod-body{display:flex;flex-direction:column;gap:.9rem}
.mod-copy{color:var(--dim);font-size:.98rem;line-height:1.6}
.mod-fix{
  font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--sealed);letter-spacing:.04em;
}
.mod-fix::before{content:"» ";color:var(--sealed)}
.mod-beam{
  position:absolute;top:0;bottom:0;left:-14%;width:12%;
  background:linear-gradient(90deg,transparent,rgba(125,242,200,.16),transparent);
  pointer-events:none;
}

/* fx: modules start sealed (powered down) until scanned */
body.fx .module:not(.on){border-color:var(--grid)}
body.fx .module:not(.on) .mod-body{opacity:0;transform:translateY(6px)}
body.fx .module:not(.on) .mod-title{color:var(--dim)}
body.fx .module .mod-body{transition:opacity .45s .15s,transform .45s .15s}
body.fx .module .mod-title{transition:color .35s}
body.fx .module.on{border-color:color-mix(in srgb,var(--scan) 30%,var(--grid))}
body.fx .module.scanning .mod-beam{animation:beam .7s ease-out}
@keyframes beam{from{left:-14%}to{left:104%}}

.s3-close{
  margin:clamp(2.8rem,7vw,4.5rem) auto 0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.45rem,3.8vw,2.4rem);letter-spacing:-.02em;line-height:1.3;
  text-align:center;max-width:none;
}
.s3-close span,.s3-close em{display:block}
.s3-close em{font-style:normal;color:var(--sealed)}

/* =========================================================
   SC.04 — THE SYSTEM: spec-sheet grid of what installs
   ========================================================= */
.s3b{max-width:74rem;margin-inline:auto}
.sys-lede{
  max-width:34rem;color:var(--dim);font-size:1.05rem;
  margin-bottom:clamp(2rem,5vw,3rem);
}
.sys-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--grid);border:1px solid var(--grid);
}
@media (max-width:60em){.sys-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:34em){.sys-grid{grid-template-columns:1fr}}
.sys-cell{background:var(--panel);padding:1.15rem 1.2rem 1.3rem}
.sys-k{
  font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.18em;color:var(--sealed);
}
.sys-cell p{color:var(--dim);font-size:.9rem;line-height:1.55;margin-top:.5rem;max-width:none}
.sys-industries{
  margin-top:clamp(1.6rem,4vw,2.4rem);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;line-height:1.9;
  color:var(--dim);max-width:none;
}
.sys-industries em{font-style:normal;color:var(--phosphor)}

/* =========================================================
   SCENE 4 — YOUR LEAK
   ========================================================= */
.s4{display:flex;justify-content:center}
.console{
  width:min(46rem,100%);
  background:var(--panel);
  border:1px solid var(--grid);
  padding:clamp(1.5rem,4vw,2.6rem);
}
.console-title{
  font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.2em;color:var(--phosphor);
  padding-bottom:1.2rem;margin-bottom:1.6rem;border-bottom:1px solid var(--grid);
}
.sliders{display:flex;flex-direction:column;gap:1.4rem}
.slider{display:grid;grid-template-columns:8.5rem 1fr 4.5rem;gap:1rem;align-items:center}
@media (max-width:34em){.slider{grid-template-columns:7rem 1fr 4rem;gap:.6rem}}
.sl-name{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--dim)}
.sl-val{font-family:var(--mono);font-size:.85rem;font-weight:700;text-align:right;color:var(--phosphor)}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--grid);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-6px;
  background:var(--scan);border-radius:0;
  box-shadow:0 0 10px rgba(125,242,200,.5);
}
input[type=range]::-moz-range-track{height:2px;background:var(--grid)}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;background:var(--scan);border:none;border-radius:0;
  box-shadow:0 0 10px rgba(125,242,200,.5);
}

.verdict{
  position:relative;
  margin-top:2.2rem;padding:1.8rem 0 1.4rem;
  border-top:1px solid var(--grid);
  text-align:center;
}
#drain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.verdict > *{position:relative}
.verdict-label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--dim);
}
.verdict-num{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(2.6rem,9vw,4.4rem);letter-spacing:-.02em;line-height:1.1;
  color:var(--leak);
  font-variant-numeric:tabular-nums;
  transition:color .4s;
  text-shadow:0 0 34px rgba(255,59,47,.25);
}
.verdict-ad{
  font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-top:.4rem;
}
.sealed .verdict-num{color:var(--sealed);text-shadow:0 0 34px rgba(255,176,58,.25)}
.assumptions{
  margin-top:1rem;font-family:var(--mono);font-size:.64rem;color:var(--dim);letter-spacing:.04em;
}
.edit-btn{
  background:none;border:none;cursor:pointer;
  font:inherit;color:var(--scan);letter-spacing:inherit;
}
.edit-btn:hover{text-decoration:underline}
.assump-edit{
  display:flex;justify-content:center;gap:1.5rem;margin-top:.8rem;
}
.assump-edit[hidden]{display:none}
.assump-edit{
  font-family:var(--mono);font-size:.68rem;color:var(--dim);
}
.assump-edit input{
  width:3.6rem;background:var(--void);border:1px solid var(--grid);color:var(--phosphor);
  font:inherit;padding:.25rem .4rem;text-align:right;
}
.seal-btn{
  display:block;width:100%;margin-top:1.4rem;
  background:var(--sealed);color:var(--void);border:none;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.06em;
  padding:1.05rem;
  transition:background-color .2s;
}
.seal-btn:hover{background:#FFC260}
.seal-btn[disabled]{opacity:0;pointer-events:none}
body.fx .seal-btn.sealed-hide{display:none}

.price{margin-top:2rem;text-align:center;display:flex;flex-direction:column;gap:.9rem;align-items:center}
body.fx .price{display:none}
body.fx .price.open{display:flex}
.price-main{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,3.4vw,1.7rem);letter-spacing:-.01em}
.price-included{
  list-style:none;display:flex;flex-direction:column;gap:.4rem;
  text-align:left;margin-top:.2rem;
}
.price-included li{display:flex;gap:.7rem;align-items:baseline;color:var(--dim);font-size:.92rem}
.price-included li::before{
  content:"";width:.4rem;height:.4rem;background:var(--sealed);flex:none;
  transform:translateY(-.05rem);
}
.price-guarantee{
  color:var(--phosphor);max-width:30rem;
  border:1px solid color-mix(in srgb,var(--sealed) 45%,var(--grid));
  padding:.9rem 1.2rem;font-size:.95rem;
}
.price-small{font-family:var(--mono);font-size:.66rem;color:var(--dim);letter-spacing:.04em}

/* =========================================================
   SCENE 5 — THE CALL
   ========================================================= */
.s5{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background-image:none; /* everything goes quiet — no graticule */
  padding-bottom:6rem;
}
.s5::after{display:none}
.s5-head{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.2rem,6.5vw,4.2rem);letter-spacing:-.03em;line-height:1;
}
.s5-sub{margin-top:1.1rem;color:var(--dim);font-size:1.05rem;max-width:30rem}

/* ---- the lead form: styled like a Facebook instant form ----
   light neutrals + a muted FB-ish blue are a justified extension:
   the card is a prop from lead-ad land, sitting on our console */
.leadform-wrap{width:min(26.5rem,100%);margin-top:2.6rem;text-align:left}
.fbform{
  background:#F0F2F5;color:#1C1E21;
  border-radius:10px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.fb-head{position:relative;padding:1.15rem 1.25rem 1rem;border-bottom:1px solid #DADDE1}
.fb-brand{
  display:block;font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.18em;color:#606770;
}
.fb-title{display:block;font-weight:600;font-size:1.15rem;margin-top:.25rem}
.fb-tag{
  position:absolute;top:.75rem;right:.8rem;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;color:#8A939E;
  border:1px solid #DADDE1;border-radius:3px;padding:.18rem .4rem;
}
#leadForm{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.95rem}
.f-field{display:flex;flex-direction:column;gap:.35rem;font-size:.84rem;font-weight:600;color:#444B54}
.f-field input,.f-field select{
  font:inherit;font-weight:400;color:#1C1E21;
  padding:.68rem .75rem;background:#fff;
  border:1px solid #CCD0D5;border-radius:6px;
  width:100%;
}
.f-field input:focus-visible,.f-field select:focus-visible,
.f-consent input:focus-visible,.fb-submit:focus-visible{
  outline:2px solid #3B6FC9;outline-offset:1px;
}
.f-field.f-bad input,.f-field.f-bad select{border-color:#C0271C}
.f-consent{
  display:flex;gap:.6rem;align-items:flex-start;
  font-size:.78rem;line-height:1.5;color:#444B54;
}
.f-consent input{width:1.05rem;height:1.05rem;margin-top:.1rem;flex:none;accent-color:#3B6FC9}
.hp{position:absolute;left:-6000px;top:auto;height:1px;width:1px;overflow:hidden}
.form-err{
  font-family:var(--mono);font-size:.72rem;color:#C0271C;min-height:1.1em;margin:-.2rem 0;
}
.fb-submit{
  font-family:var(--mono);font-weight:700;font-size:.92rem;letter-spacing:.04em;
  background:var(--sealed);color:var(--void);
  border:none;border-radius:6px;cursor:pointer;
  padding:1rem;
  transition:background-color .2s;
}
.fb-submit:hover{background:#FFC260}

/* ---- post-submit console state ---- */
.demo-console{
  background:var(--panel);border:1px solid var(--grid);
  padding:1.3rem 1.4rem 1.5rem;
}
.demo-console[hidden]{display:none}
.sim-banner{
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;
  background:var(--scan);color:var(--void);
  padding:.5rem .65rem;margin-bottom:1.1rem;
}
.sim-banner[hidden]{display:none}
.dc-clock{
  font-weight:700;font-size:2.6rem;letter-spacing:-.01em;color:var(--phosphor);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.dc-label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.dc-hint{font-size:.7rem;color:var(--dim);margin-top:.9rem;letter-spacing:.03em}
.dc-events{list-style:none;margin-top:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.dc-events li{font-size:.74rem;color:var(--dim);letter-spacing:.02em}
.dc-events li.amber{color:var(--sealed);font-weight:700}
.dc-thread{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.dc-thread .msg{max-width:92%}
.dc-thread .msg.sim-in{font-style:italic}
.s5-deadpan{
  margin-top:1.3rem;font-family:var(--mono);font-size:.7rem;color:var(--dim);letter-spacing:.04em;
  text-align:center;
}

.diag{width:min(38rem,100%);margin-top:clamp(3rem,7vw,4.5rem);text-align:left}
.diag details{border-top:1px solid var(--grid)}
.diag details:last-child{border-bottom:1px solid var(--grid)}
.diag summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:.85rem;
  padding:.95rem .2rem;
  font-weight:600;font-size:.98rem;
}
.diag summary::-webkit-details-marker{display:none}
.diag summary::before{
  content:"▸";font-family:var(--mono);color:var(--scan);flex:none;order:-1;
  transition:transform .2s;font-size:.8rem;
}
.diag details[open] summary::before{transform:rotate(90deg)}
.diag details p{color:var(--dim);font-size:.95rem;padding:0 .2rem 1.1rem 1.3rem;max-width:34rem}

.founder{margin-top:clamp(3rem,7vw,4.5rem);max-width:34rem}
.founder p{color:var(--dim);font-size:.98rem;line-height:1.75;font-style:italic}
.founder cite{
  display:block;margin-top:1rem;font-style:normal;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--dim);
}

.hire{
  margin-top:clamp(3rem,7vw,4.5rem);
  padding-top:clamp(2.5rem,6vw,3.5rem);
  border-top:1px solid var(--grid);
  width:min(34rem,100%);
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.hire-head{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.1rem);letter-spacing:-.02em;line-height:1.15;
}
.hire-sub{color:var(--dim);font-size:.98rem;max-width:30rem}
.hire-small{
  font-family:var(--mono);font-size:.68rem;color:var(--dim);letter-spacing:.05em;
}

.footer{
  margin-top:clamp(3rem,7vw,4.5rem);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.8rem;
  font-family:var(--mono);font-size:.7rem;color:var(--dim);letter-spacing:.04em;
}
.footer a{color:var(--dim)}

/* =========================================================
   Reduced motion — full static composition
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}