/* PDW × Signalform style guide (May 2026) on the Browser Company's shape.
   Dark only. Inter Tight 800 headlines, Inter body, JetBrains Mono for issued data.
   No serif, no italics. Defense gold once per screen, like a stamp. Topo overlay at body level.
   Motion functional, fast, linear. Copy to AR 25-50: bottom line up front, active voice,
   understood in one rapid reading. */
:root{
  --black:#0A0A0A; --graphite:#141414; --steel:#2E2E2E; --ash:#6B6B6B; --bone:#B8B5AE; --paper:#E8E4DD;
  --signal:#C8A24B;
  --display:"Inter Tight","Inter",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,0,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--black)}
body{margin:0;color:var(--bone);font-family:var(--body);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%),url(topo-overlay.svg) center/800px repeat,var(--black)}
a{color:inherit}

.eyebrow{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.chrome{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--ash)}

/* the mark: a reticle that draws once */
.mark{display:block;width:56px;height:56px;color:var(--paper)}
.mark svg{width:100%;height:100%;overflow:visible}
.mark circle,.mark line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.mark .dot{fill:var(--signal);stroke:none}

/* home: one screen, one statement */
.home{height:100dvh;overflow:hidden}
.stage{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 20px;gap:28px}
.bluf{display:flex;flex-direction:column;align-items:center;gap:16px}
.bluf .eyebrow{color:var(--signal)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.2vw,76px);line-height:1;letter-spacing:-.025em;color:var(--paper);margin:0;max-width:13em;text-wrap:balance}
.terms{font-family:var(--mono);font-weight:500;font-size:clamp(13px,1.05vw,15px);letter-spacing:.04em;color:var(--bone);margin:0}
.terms b{font-weight:500;color:var(--paper)}
.go{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:14px;text-decoration:none;padding:12px 18px;border-radius:6px;transition:background .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease)}
.btn.primary{background:var(--paper);color:var(--black)}
.btn.primary:hover{background:#fff}
.btn.ghost{border:1px solid var(--steel);color:var(--paper)}
.btn.ghost:hover{border-color:var(--bone)}
.corner{position:fixed;left:20px;top:18px}
.corner-r{position:fixed;right:20px;top:18px}
.foot{position:fixed;left:0;right:0;bottom:16px;text-align:center}

/* arrival: [INITIALIZING] → the reticle draws → [READY] → the statement. Under a second, linear. */
.intro .stage > :not(.mark){opacity:0}
.intro .mark{transform:translateY(var(--drop,0)) scale(1.6)}
.intro .mark circle,.intro .mark line{stroke-dasharray:200;stroke-dashoffset:200}
.intro .mark .dot{opacity:0}
.drawing .mark circle,.drawing .mark line{transition:stroke-dashoffset .5s linear;stroke-dashoffset:0}
.drawing .mark .dot{transition:opacity .12s linear .45s;opacity:1}
.opening .mark{transition:transform .2s var(--ease);transform:none}
.opening .stage > :not(.mark){transition:opacity .16s linear .12s;opacity:1}
#status{transition:opacity .12s}

/* the plan: same system, one column, scrolls */
.plan{max-width:42rem;margin:0 auto;padding:96px 20px 120px}
.plan header{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:44px}
.plan h1{font-size:clamp(32px,4.2vw,52px);max-width:none;text-align:left}
.row{display:grid;grid-template-columns:140px 1fr;gap:6px 24px;padding:20px 0;border-top:1px solid var(--steel)}
.row:last-of-type{border-bottom:1px solid var(--steel)}
.row h2{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.01em;color:var(--paper);margin:0 0 4px}
.row p{margin:0;font-size:16px;line-height:1.55}
.row .eyebrow{padding-top:5px}
.row .eyebrow.lit{color:var(--signal)}
.weeks{list-style:none;margin:6px 0 0;padding:0}
.weeks li{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:5px 0;font-size:16px;line-height:1.45}
.weeks .chrome{color:var(--bone);padding-top:2px}
.plan .go{justify-content:flex-start;margin-top:40px}
.plan .foot{position:static;text-align:left;margin-top:56px}

@media (max-width:640px){
  .corner{left:16px;top:14px}.corner-r{right:16px;top:14px}
  .stage{gap:24px;padding:56px 18px}
  h1{font-size:clamp(32px,9.6vw,42px)}
  .terms{font-size:12.5px;line-height:1.7}
  .row{grid-template-columns:1fr;gap:6px}
  .row .eyebrow{padding-top:0}
  .plan{padding-top:72px}
}
@media (prefers-reduced-motion:reduce){.intro .stage > *{opacity:1!important;transform:none!important}}