/* Shared styles for secondary pages (privacy, terms, 404).
   Tokens mirror the inline block in index.html — dark theme only. */
:root{
  --bg:#121210;
  --ink:#F4F2EC;
  --dim:#A5A299;
  --line:#2A2A26;
  --tile:#1B1B18;
  --font-sans:"Geist",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --track-wordmark:-0.01em;
}
html{background:#121210}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--dim)}

.page{min-height:100vh;background:var(--bg);color:var(--ink);display:flex;flex-direction:column}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;width:100%;box-sizing:border-box}

.header{border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand span{font-weight:600;font-size:15px;letter-spacing:var(--track-wordmark)}
.nav{display:flex;gap:24px;margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em}
.nav a,.footer a{color:var(--dim)}
.nav a:hover,.footer a:hover{color:var(--ink)}
.nav{align-items:center}
.nav a.cta{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);transition:background .2s,color .2s}
.nav a.cta:hover{background:transparent;color:var(--ink)}
.nav a.contact{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);color:var(--ink);transition:border-color .2s}
.nav a.contact:hover,.nav a.contact.is-copied{border-color:var(--dim);color:var(--ink)}
.contact-rotor{color:var(--dim);transition:color .2s}
.contact:hover .contact-rotor{color:var(--ink);animation:spin 1.6s linear infinite}
.contact.is-copied .contact-rotor{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.contact:hover .contact-rotor{animation:none}}

main{flex:1}

/* long-form policy text */
.doc{max-width:68ch;padding:96px 0 0}
.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--dim);margin:0 0 20px}
.doc h1{margin:0 0 16px;font-size:clamp(32px,4vw,48px);line-height:1.1;font-weight:600;letter-spacing:-.025em}
.doc .meta{margin:0 0 56px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--dim)}
.doc h2{margin:48px 0 12px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.doc p,.doc li{font-size:15px;line-height:1.75;color:var(--dim);text-wrap:pretty}
.doc p{margin:0 0 16px}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{margin:0 0 8px}
.doc strong{color:var(--ink);font-weight:500}
.doc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.doc a:hover{text-decoration-color:var(--dim)}
.doc .caps{text-transform:uppercase;font-size:13px;letter-spacing:.02em}

/* 404 */
.lost{padding:120px 0 40px;display:grid;gap:28px;justify-items:start}
.lost .code{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--dim);margin:0}
.lost h1{margin:0;font-size:clamp(36px,5vw,64px);line-height:1.08;font-weight:600;letter-spacing:-.03em;max-width:18ch}
.lost p{margin:0;font-size:15px;line-height:1.7;color:var(--dim);max-width:46ch}
.lost .rotor{color:var(--dim);animation:spin 9s linear infinite}
.lost .home{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--ink);border:1px solid var(--line);padding:12px 16px}
.lost .home:hover{border-color:var(--dim);color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lost .rotor{animation:none}}

.footer{margin-top:140px}
.footer .wrap{padding:28px 32px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.footer .links{display:flex;flex-wrap:wrap;gap:12px 24px}

@media (max-width:600px){
  .wrap,.footer .wrap{padding-left:16px;padding-right:16px}
  .nav a.contact{padding:12px 14px}
  .nav a.cta{padding:12px 14px}
  .nav a.contact{display:none} /* phones: one clear action up top; contact lives in the footer */
  .footer{margin-top:72px}
  .footer .wrap{flex-direction:column;gap:16px}
  .footer .links{order:-1;gap:0 20px}
  .footer .links a{padding:8px 0}
  .doc{padding-top:64px}
  .lost{padding-top:80px}
}