/* headup.cc — house palette shared with genshift and the app itself.
 *
 * NO FONT BELOW .78rem, and the reason is worth writing down.
 *
 * `rem` resolves against the ROOT element, not `body` — and the base size here
 * is set on body. So every rem was computing against the browser default of
 * 16px, not the 16.5px this file appears to declare, and .73rem rendered at
 * 11.68px rather than the 12.04px the arithmetic promised. Three buttons and
 * two captions sat under the readability floor while the stylesheet looked
 * correct.
 *
 * .78rem = 12.48px at a 16px root, which holds whatever the root turns out to
 * be. Wide-tracked uppercase mono is exactly what tempts you below it. */
:root{
  --void:#06090D; --bg:#0B0F14; --panel:#0F141B; --panel2:#131A22;
  --rule:#1c2533; --rule-hot:#27364a;
  --ink:#E8EDF4; --muted:#99A7BD; --dim:#6C7C92;
  --ice:#4FE3E3; --neon:#FF3C7E;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Chakra Petch',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--ink);font:16.5px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1100px 560px at 76% -12%, color-mix(in oklab,var(--ice) 8%,transparent), transparent 62%),
             radial-gradient(880px 480px at 6% 108%, color-mix(in oklab,var(--neon) 6%,transparent), transparent 62%)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.26;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px)}
header,main,footer{position:relative;z-index:1}
.ice{color:var(--ice)} .neon{color:var(--neon)}

.top{display:flex;align-items:center;gap:22px;padding:18px clamp(16px,4vw,44px);
  border-bottom:1px solid var(--rule);background:color-mix(in oklab,var(--bg) 84%,transparent);
  backdrop-filter:blur(10px) saturate(140%);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit;
  font-family:var(--display);font-weight:700;letter-spacing:.2em;font-size:.98rem}
.brand small{font-family:var(--mono);font-size:0.78rem;letter-spacing:.18em;color:var(--dim);font-weight:400;text-transform:uppercase}
.top nav{margin-left:auto;display:flex;gap:20px}
.top nav a{color:var(--muted);text-decoration:none;font-size:.88rem}
.top nav a:hover{color:var(--ice)}

section{max-width:64rem;margin:0 auto;padding:clamp(48px,7vw,86px) clamp(16px,4vw,44px)}
section.band{max-width:none;background:var(--bg);border-block:1px solid var(--rule)}
section.band>*{max-width:64rem;margin-inline:auto}

.eyebrow,.lbl{font-family:var(--mono);font-size:0.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.hero h1{font-family:var(--display);font-size:clamp(2.1rem,6vw,3.9rem);font-weight:700;
  line-height:1.05;letter-spacing:-.015em;margin:0 0 20px;text-wrap:balance}
.lede{font-size:clamp(1rem,1.8vw,1.18rem);color:var(--muted);max-width:44ch;margin:0 0 30px}
h2{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.05rem);font-weight:600;
  letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance}
h3{font-family:var(--display);font-size:1.08rem;font-weight:600;margin:0 0 7px}
p{margin:0 0 1em} b{font-weight:600} em{color:var(--muted)}
.sub{color:var(--muted);max-width:56ch;margin:0 0 28px}
.fine{font-family:var(--mono);font-size:0.78rem;color:var(--dim);margin-top:16px}

.cta{display:flex;gap:11px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--mono);font-size:0.78rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding:14px 24px;border-radius:3px;min-height:46px;cursor:pointer;border:1px solid}
.btn.go{color:var(--ice);border-color:color-mix(in oklab,var(--ice) 46%,transparent);background:transparent}
.btn.go:hover{background:color-mix(in oklab,var(--ice) 12%,transparent);
  box-shadow:0 0 22px color-mix(in oklab,var(--ice) 22%,transparent)}
.btn.ghost{color:var(--muted);border-color:var(--rule);background:transparent}
.btn.ghost:hover{color:var(--ink);border-color:var(--rule-hot)}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:30px}
.grid3 p:last-child{margin:0;color:var(--muted);font-size:.94rem}

.step{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  padding:24px 0;border-top:1px solid var(--rule)}
.step:first-of-type{border-top:0}
.step .n{font-family:var(--mono);font-size:0.78rem;letter-spacing:.14em;color:var(--dim);padding-top:5px}
.step p{color:var(--muted);margin-bottom:.7em;max-width:58ch}
.step p:last-child{margin-bottom:0}
.step.hot .n{color:var(--neon)}
.step.hot h3{color:var(--ice)}
@media(max-width:560px){ .step{grid-template-columns:1fr;gap:8px} }

.refuse{list-style:none;padding:0;margin:0;display:grid;gap:15px}
.refuse li{padding-left:18px;border-left:2px solid var(--rule);color:var(--muted);font-size:.95rem}
.refuse li b{color:var(--ink)}

.form{max-width:40rem;margin-top:26px}
.row{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:560px){ .row{grid-template-columns:1fr} }
.f{display:grid;gap:5px}
.f>span{font-family:var(--mono);font-size:0.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
input{width:100%;background:var(--void);color:var(--ink);border:1px solid var(--rule);
  border-radius:3px;padding:12px 13px;font:inherit;outline:none}
input:focus{border-color:var(--ice);box-shadow:0 0 0 3px color-mix(in oklab,var(--ice) 18%,transparent)}
button.btn{width:100%}
@media(min-width:560px){ button.btn{width:auto;padding-inline:34px} }

footer{border-top:1px solid var(--rule);padding:40px clamp(16px,4vw,44px) 60px;
  color:var(--dim);font-size:.88rem}
footer a{color:var(--ice);text-decoration:none}