/* hako — the standalone pages (/support, /privacy, /404). Tokens are inlined
   from the design system's tokens/*.css so this file stands alone; the header
   block is deliberately identical to hero.css so the chrome cannot drift. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#F5F4F1;--card:#FFFFFF;--recess:#E7E5E0;
  --ink:#000000;--ink-2:#3D3D3D;--ink-3:#676460;--label:#676460;
  --line:#D3D0CA;--line-strong:#767370;--red:#D71921;--dot:rgba(0,0,0,.18);
  /* Single-face system: Geist Mono sets everything. --font-grotesk is kept so the
     two-face pairing is one edit away. */
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --font-sans:var(--font-mono);
  --font-grotesk:"Geist","Helvetica Neue","Segoe UI Variable Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:72rem;--gutter:clamp(1.25rem,4vw,3.5rem);
}
/* Dark is first-class, not an inversion filter. True black for OLED. Values are
   the design system's own dark ramp (tokens/colors.css), including the red:
   #D71921 measures 4.05:1 on black and fails, so dark uses #FF4D5E. */
:root[data-theme="dark"]{--bg:#000000;--card:#0B0B0B;--recess:#161616;--ink:#FFFFFF;--ink-2:#B4B4B4;--ink-3:#8C8C8C;--label:#8C8C8C;--line:#2E2E2E;--line-strong:#7A7A7A;--red:#FF4D5E;--dot:rgba(255,255,255,.15)}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html,body{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--font-sans);font-synthesis-weight:none}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--red)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--bg);padding:.5rem .75rem;z-index:99}

/* -- header: the one sanctioned blur in the whole system -- */
.head{position:sticky;top:0;z-index:20;height:56px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-in{height:56px;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;line-height:0}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem)}
.nav a{font:400 .6875rem/1 var(--font-mono);letter-spacing:.14em;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav a.cta{text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:.5rem .9rem;color:var(--ink)}
.nav a.cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.themebtn{font:400 .625rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--line-strong);border-radius:4px;padding:.45rem .7rem;cursor:pointer;transition:background 110ms cubic-bezier(.2,0,0,1),color 110ms cubic-bezier(.2,0,0,1)}
.themebtn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.themebtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}


/* ============ PAGES ============ */
main.page{padding-top:56px}
.masthead{padding-block:clamp(3rem,10vh,6.5rem) clamp(1.5rem,4vh,2.5rem)}
.eyebrow{display:block;font:400 .625rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--label);margin-bottom:1.1rem}
.masthead h1{margin:0;font-weight:300;font-size:clamp(1.5rem,.85rem + 2.7vw,2.875rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.masthead p{margin:1rem 0 0;max-width:34rem;color:var(--ink-2);font-size:clamp(.875rem,.8rem + .25vw,.9375rem);text-wrap:pretty}
section.band{padding-block:clamp(2rem,6vh,3.5rem);border-top:1px solid var(--line)}
section.band h2{margin:0 0 1.6rem;font-weight:300;font-size:clamp(1.25rem,1rem + 1.2vw,1.875rem);letter-spacing:-.012em}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;background:var(--line)}
.fig{background:var(--bg);padding:1.4rem 1.2rem}
.fig b{display:block;font-weight:300;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);letter-spacing:-.02em;line-height:1}
.fig span{display:block;margin-top:.5rem;font:400 .625rem/1.5 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.fig small{display:block;margin-top:.55rem;color:var(--ink-2);font-size:.8125rem;line-height:1.5}
.rows{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.row{background:var(--bg);display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:1rem;padding:1rem 0}
.row dt{font:400 .6875rem/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin:0}
.row dd{margin:0;color:var(--ink);font-size:.9375rem;line-height:1.6;text-wrap:pretty}
@media (max-width:34rem){.row{grid-template-columns:1fr;gap:.3rem}}
.qa{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.qa details{background:var(--bg);padding:1.05rem 0}
.qa summary{cursor:pointer;list-style:none;font-size:1rem;color:var(--ink);display:flex;gap:.8rem;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"+";color:var(--label);font-family:var(--font-mono);flex:none}
.qa details[open] summary::before{content:"\2212"}
.qa p{margin:.75rem 0 0 1.6rem;max-width:44rem;color:var(--ink-2);font-size:.9375rem;line-height:1.65;text-wrap:pretty}
.prose{max-width:38rem}
.prose h3{margin:2rem 0 .6rem;font-weight:400;font-size:1rem;letter-spacing:-.005em}
.prose p{margin:0 0 .85rem;color:var(--ink-2);font-size:.9375rem;line-height:1.7;text-wrap:pretty}
.prose ul{margin:0 0 .85rem;padding-left:1.1rem;color:var(--ink-2);font-size:.9375rem;line-height:1.7}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--ink);text-decoration:underline}
.prose a:hover{color:var(--red)}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
/* The support address as text, under the button. See the comment in
   support.html: the button's href is rewritten by Scrape Shield and is dead
   without JavaScript, so this is the copy that always works. .mail is the
   split-up address - it must stay inline or the @ lands on its own line. */
.addr{margin:1rem 0 0;color:var(--ink-2);font-size:.9375rem;line-height:1.7;text-wrap:pretty}
.addr .mail{color:var(--ink);white-space:nowrap;font-family:var(--font-mono);font-size:.875rem}
.addr .mail span{display:inline}
.btn{font:400 .6875rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding:.85rem 1.15rem;border:1px solid var(--line-strong);border-radius:4px;color:var(--ink);text-decoration:none;transition:background 110ms cubic-bezier(.2,0,0,1),color 110ms cubic-bezier(.2,0,0,1)}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-red{border-color:var(--red);color:var(--red)}
.btn-red:hover{background:var(--red);border-color:var(--red);color:var(--bg)}
.lost{min-height:calc(100svh - 56px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(2rem,8vh,5rem)}
.lost .code{font:400 .625rem/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
footer.site{padding-block:clamp(2rem,6vh,3rem);border-top:1px solid var(--line);color:var(--label);font:400 .6875rem/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
footer.site a{color:var(--label)}
footer.site a:hover{color:var(--red)}
@media (prefers-reduced-motion:reduce){.themebtn{transition:none}}

/* Bit sits bottom-trailing over the content, identical to the one-page site. */
.bit{position:fixed;right:clamp(1rem,3vw,2.25rem);bottom:clamp(1rem,3vh,1.75rem);z-index:30;display:flex;align-items:center;gap:.6rem;pointer-events:none}

/* WarnBlock. Recessed ground and one hairline — no shadow, no fill, no icon.
   The red is spent on the tag word alone, which keeps to "at most one red thing
   on screen" while still making the block findable. */
.warn{margin-top:1.6rem;max-width:38rem;background:var(--recess);border:1px solid var(--line);border-radius:4px;padding:1rem 1.1rem}
.warn-tag{display:block;font:400 .625rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem}
.warn p{margin:0;color:var(--ink);font-size:.9375rem;line-height:1.65;text-wrap:pretty}
code{font-family:var(--font-mono);font-size:.9em;background:var(--recess);border:1px solid var(--line);border-radius:4px;padding:.05em .35em}

/* ============ MOBILE CHROME ============ */
/* Identical to hero.css, deliberately — the header must not drift between the
   one-page site and the standalone pages. See the note there for why the inline
   nav row could not simply be shrunk. */
.burger{display:none;margin-left:auto;align-items:center;justify-content:center;width:40px;height:34px;padding:0;background:none;border:1px solid var(--line-strong);border-radius:4px;color:var(--ink);cursor:pointer;transition:background 110ms cubic-bezier(.2,0,0,1),color 110ms cubic-bezier(.2,0,0,1)}
.burger:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.burger:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media (max-width:48rem){
  .burger{display:inline-flex}
  .nav{position:absolute;top:56px;left:0;right:0;margin-left:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:0 var(--gutter) 1rem}
  .nav[data-open="0"]{display:none}
  .nav a{padding:1.05rem 0;border-top:1px solid var(--line);font-size:.75rem}
  .nav a.cta{margin-top:.9rem;border:1px solid var(--line-strong);border-radius:4px;text-align:center;padding:.95rem}
  /* 44px is the target-size floor; the desktop .btn computes to 40px tall. Only
     the padding moves, so the type and the border are untouched. */
  .btn{padding:1.05rem 1.2rem}
  /* Bit is removed on phones, not merely shrunk. He is decorative (aria-hidden)
     and nothing he shows is stated only by him, so nothing is lost — and at
     these widths he sat over the beat readout and the waitlist button.
     mountBitWhenWide() in bit.js tears the sprite down as well, so the
     220-900ms redraw timer is not left running behind this rule. */
  .bit{display:none}
}
@media (prefers-reduced-motion:reduce){.burger{transition:none}}