/* Shared styles for the legal and support pages.
   Tokens, nav, footer and buttons are copied from index.html so these pages
   match the homepage in light and dark mode. Keep the two in sync. */
:root{
  --bg:#F6F1E7; --bg-2:#EDE5D4; --surface:#FFFDF8;
  --fg:#18141E; --fg-soft:#5A5363; --line:rgba(24,20,30,.14);
  --prep:#FFBB55; --realyne:#EE5C79; --recog:#34AE9B; --voice:#5F72EE;
  --prep-ink:#8A5B08; --realyne-ink:#B23555; --recog-ink:#17766A; --voice-ink:#3548CC;
  --glow-b:rgba(95,114,238,.13);
  --grain:.05;
  --todo-bg:#FFF1CF; --todo-fg:#6B4500; --todo-line:#C98A12;
  --font-display:'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:'Hanken Grotesk', 'Segoe UI', 'Helvetica Neue', Helvetica, sans-serif;
  color-scheme:light dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16131B; --bg-2:#1F1B26; --surface:#221E2A;
    --fg:#F3EEE4; --fg-soft:#B7AFBF; --line:rgba(243,238,228,.14);
    --prep-ink:#FFC56E; --realyne-ink:#FF8FA5; --recog-ink:#6ED3C2; --voice-ink:#A3AFFF;
    --glow-b:rgba(95,114,238,.10);
    --grain:.07;
    --todo-bg:#3A2C0C; --todo-fg:#FFD88A; --todo-line:#B98418;
  }
}
:root[data-theme="dark"]{
  --bg:#16131B; --bg-2:#1F1B26; --surface:#221E2A;
  --fg:#F3EEE4; --fg-soft:#B7AFBF; --line:rgba(243,238,228,.14);
  --prep-ink:#FFC56E; --realyne-ink:#FF8FA5; --recog-ink:#6ED3C2; --voice-ink:#A3AFFF;
  --glow-b:rgba(95,114,238,.10);
  --grain:.07;
  --todo-bg:#3A2C0C; --todo-fg:#FFD88A; --todo-line:#B98418;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px); }
body{
  margin:0; color:var(--fg); background:var(--bg);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:var(--grain); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-glow{
  position:fixed; inset:-4%; z-index:-1; pointer-events:none;
  background:radial-gradient(120vw 80vh at 96% 106%, var(--glow-b), transparent 52%);
}
h1,h2,h3{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:460; line-height:1.1; letter-spacing:-.012em; margin:0; text-wrap:balance; }
p{ text-wrap:pretty; }
a{ color:inherit; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } body{ font-size:16px; } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600; }
.skip:focus{ top:calc(env(safe-area-inset-top,0px) + 12px); }
:focus-visible{ outline:2px solid var(--voice-ink); outline-offset:3px; border-radius:6px; }
.dot{ width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }

/* nav (as homepage) */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 32px; padding-top:calc(18px + env(safe-area-inset-top,0px)); margin-top:calc(-1 * env(safe-area-inset-top,0px));
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 10px 24px -20px rgba(24,20,30,.3); }
.nav-mark{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:540; font-size:1.2rem; text-decoration:none; min-height:44px; }
.mark-grid{ display:grid; grid-template-columns:repeat(2,7px); gap:3px; }
.mark-grid i{ width:7px; height:7px; border-radius:50%; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:.92rem; color:var(--fg-soft); display:inline-flex; align-items:center; min-height:44px; }
.nav-links a:hover{ color:var(--fg); }
.nav-cta{ border:1px solid var(--line); padding:0 18px; border-radius:100px; color:var(--fg) !important; }
.nav-cta:hover{ border-color:var(--fg); }
@media (max-width:880px){ .nav{ padding-left:22px; padding-right:22px; } .nav-links li:not(:last-child){ display:none; } }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 26px; border-radius:100px; font-weight:600; font-size:.98rem; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease, border-color .2s; overflow-wrap:anywhere; }
.btn-primary{ background:var(--fg); color:var(--bg); box-shadow:0 14px 26px -14px rgba(24,20,30,.45); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 30px -14px rgba(24,20,30,.5); }
.btn-ghost{ border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--fg); }

/* document */
.doc{ max-width:780px; padding-top:64px; padding-bottom:110px; }
.doc-tag{ display:inline-flex; align-items:center; gap:9px; font-size:.92rem; font-weight:600; margin:0 0 18px; text-decoration:none; }
.doc-tag .for{ font-weight:400; color:var(--fg-soft); }
.doc h1{ font-size:clamp(2.3rem,5.4vw,3.7rem); max-width:18ch; }
.doc-meta{ margin:18px 0 0; color:var(--fg-soft); font-size:.95rem; }
.doc-lead{ margin:22px 0 0; font-size:1.14rem; color:var(--fg-soft); max-width:56ch; }
.doc h2{ font-size:clamp(1.5rem,3vw,1.95rem); margin:60px 0 0; padding-top:28px; border-top:1px solid var(--line); }
.doc h3{ font-family:var(--font-body); font-size:1.05rem; font-weight:700; letter-spacing:0; margin:28px 0 0; }
.doc p{ margin:14px 0 0; }
.doc ul, .doc ol{ margin:14px 0 0; padding-left:1.3em; }
.doc li{ margin:8px 0 0; padding-left:.2em; }
.doc li::marker{ color:var(--voice-ink); }
.doc a:not(.btn):not(.doc-tag){ text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px; }
.doc a:not(.btn):not(.doc-tag):hover{ text-decoration-color:currentColor; }
.doc strong{ font-weight:650; }
.path{ font-weight:600; white-space:nowrap; }
@media (max-width:420px){ .path{ white-space:normal; } }
.email{ overflow-wrap:anywhere; }

.toc{ margin:36px 0 0; padding:20px 24px; border-radius:20px; background:var(--surface); border:1px solid var(--line); }
.toc h2{ font-family:var(--font-body); font-size:.85rem; font-weight:500; color:var(--fg-soft); letter-spacing:0; margin:0; padding:0; border:0; }
.toc ol{ margin:10px 0 0; padding-left:1.2em; columns:2 240px; column-gap:32px; }
.toc li{ margin:4px 0; break-inside:avoid; }
.toc a{ text-decoration:none; }
.toc a:hover{ text-decoration:underline; }

/* data table: a real table on wide screens, stacked cards on phones */
.facts{ width:100%; border-collapse:collapse; margin:22px 0 0; font-size:.95rem; }
.facts th, .facts td{ text-align:left; vertical-align:top; padding:14px 16px 14px 0; border-bottom:1px solid var(--line); }
.facts thead th{ font-size:.82rem; font-weight:600; color:var(--fg-soft); border-bottom-color:color-mix(in srgb, var(--fg) 30%, transparent); }
.facts tbody th{ font-weight:600; width:42%; }
.facts td{ color:var(--fg-soft); }
@media (max-width:700px){
  .facts thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .facts, .facts tbody, .facts tr, .facts th, .facts td{ display:block; width:auto; }
  .facts tr{ padding:16px 18px; margin:0 0 12px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
  .facts tbody th{ width:auto; padding:0; border:0; }
  .facts td{ padding:10px 0 0; border:0; }
  .facts td::before{ content:attr(data-label); display:block; font-size:.78rem; font-weight:600; color:var(--fg); opacity:.7; }
}

.callout{ margin:22px 0 0; padding:18px 22px; border-radius:18px; border:1px solid color-mix(in srgb, var(--voice) 40%, transparent); background:color-mix(in srgb, var(--voice) 9%, var(--surface)); }
.callout p:first-child{ margin-top:0; }
.callout strong{ color:var(--fg); }

.cards{ display:grid; gap:14px; margin:28px 0 0; }
.cards a{ display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:20px; background:var(--surface); border:1px solid var(--line); text-decoration:none; box-shadow:0 18px 30px -26px rgba(24,20,30,.4); }
.cards a:hover{ border-color:var(--fg); }
.cards .dot{ width:14px; height:14px; }
.cards b{ display:block; font-size:1.02rem; } .cards span.d{ color:var(--fg-soft); font-size:.92rem; }

.related{ display:flex; flex-wrap:wrap; gap:10px; margin:56px 0 0; padding:0; list-style:none; }
.doc .related{ padding-left:0; }
.related li{ margin:0; padding:0; }
.related a{ display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px; border-radius:100px; background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--line); text-decoration:none; font-size:.92rem; font-weight:500; }
.related a:hover{ border-color:var(--fg); }
.related a[aria-current="page"]{ border-color:var(--fg); background:var(--surface); }

/* Items the owner must decide before publishing. scripts/check.py --release fails while any remain. */
.todo{ background:var(--todo-bg); color:var(--todo-fg); border:1px dashed var(--todo-line); border-radius:6px; padding:1px 6px; font-size:.9em; font-weight:600; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.draft-banner{ margin:0 0 28px; padding:14px 18px; border-radius:14px; background:var(--todo-bg); color:var(--todo-fg); border:1px dashed var(--todo-line); font-size:.92rem; font-weight:500; }
.doc .draft-banner{ margin:0 0 36px; }
.doc .doc-tag{ margin:0 0 18px; }
.draft-banner strong{ font-weight:700; }

/* footer (as homepage) */
footer{ border-top:1px solid var(--line); padding:88px 0 44px; background:color-mix(in srgb, var(--fg) 3.5%, transparent); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:48px; flex-wrap:wrap; }
.foot-top h2{ font-size:clamp(2rem,4.4vw,3.1rem); max-width:14ch; }
.foot-top p{ color:var(--fg-soft); margin:16px 0 26px; max-width:40ch; }
.foot-links{ display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h3{ font-family:var(--font-body); font-size:.85rem; color:var(--fg-soft); font-weight:500; margin-bottom:8px; letter-spacing:0; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.foot-col a{ text-decoration:none; font-size:.95rem; display:inline-flex; align-items:center; min-height:36px; }
.foot-col a:hover{ text-decoration:underline; text-underline-offset:3px; }
.foot-bottom{ margin-top:64px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--fg-soft); font-size:.84rem; flex-wrap:wrap; gap:10px; }
.foot-legal{ max-width:72ch; }
.theme-toggle{ background:none; border:1px solid var(--line); color:var(--fg-soft); border-radius:100px; padding:0 14px; min-height:36px; font:inherit; cursor:pointer; }
.theme-toggle:hover{ color:var(--fg); border-color:var(--fg); }
@media (max-width:640px){ .foot-links{ gap:32px 48px; } footer{ padding-top:64px; } }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .btn{ transition:none; } }
@media print{
  .bg-glow,.nav,body::before,footer,.related,.skip{ display:none; }
  body{ background:#fff; color:#000; }
  .doc{ padding:0; max-width:none; }
  .facts tr{ break-inside:avoid; }
}