/* legal.css — shared styles for the standalone legal pages (privacy.html, terms.html).
   Long-form readability on the navy+gold brand: one column, ~68ch measure, clear hierarchy. */
@font-face { font-family:"Geist"; font-weight:400; font-display:swap; src:url("../fonts/geist-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-weight:500; font-display:swap; src:url("../fonts/geist-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-weight:600; font-display:swap; src:url("../fonts/geist-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Cinzel"; font-weight:600; font-display:swap; src:url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
:root{
  --bg:#0a0e16; --navy-2:#22395f; --navy-deep:#0c1626; --surface:#121a2a;
  --line:rgba(214,224,240,.12); --line-2:rgba(214,224,240,.2);
  --text:#eef2f8; --muted:#aebbce; --faint:#7e90ab;
  --gold:#cdab45; --gold-bright:#e7cd7e;
  --serif:"Cinzel",Georgia,serif; --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Type is in rem, not px, so browser text-size preferences can enlarge it. This is the web
     counterpart to Dynamic Type: custom type must follow the user's chosen reading size.
     Before this, changing the browser's default text size left these long documents unchanged,
     exactly where a reader most needs comfortable type. */
  /* One scale for the longest reading on the site. 14.5 and 16.5 were eyeballed; a legal page
     is read top to bottom on a phone and the hierarchy has to be unambiguous. */
  --lg-sm:0.8125rem;    /* stamps, footer, captions      */
  --lg-note:0.875rem;  /* the toc, notes, back link     */
  --lg-body:1.0625rem;  /* the reading size              */
  --lg-h3:1.0625rem;    /* sub-headings, weight does it  */
  --lg-h2:1.25rem;    /* numbered sections             */
  --lg-h1:clamp(1.625rem, 6vw, 1.875rem);
}
*{box-sizing:border-box} html,body{margin: 0}
/* The contents list jumps within a long document; gliding keeps the reader's place instead of
   teleporting them. scroll-margin on h2 already stops the heading hiding under the top. */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
::selection{ background:rgba(205,171,69,.28); color:var(--text); }
a,button,summary{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
body{ font:400 var(--lg-body)/1.7 var(--sans); color:var(--text);
  background:radial-gradient(120% 60% at 50% -8%, #16243c 0%, rgba(22,36,60,0) 55%), var(--bg);
  -webkit-font-smoothing:antialiased; }
.wrap{ max-width:720px; margin: 0 auto; padding: 0 20px 64px; }
a{ color:var(--gold-bright); }
/* These pages are navigated almost entirely by link; without this a keyboard user gets no
   indication of where they are. Same ring as the app and the landing. */
:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; border-radius:4px; }
.top{ display:flex; align-items:center; gap: 12px; padding: 20px 0 0; }
.top .chip{ width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:linear-gradient(160deg,var(--navy-2),var(--navy-deep));border:1px solid rgba(205,171,69,.32); }
.top .chip svg{ width:20px;height:20px;color:var(--gold-bright); }
.top .name{ font-family:var(--serif); font-weight:600; font-size:var(--lg-h3); letter-spacing:.05em; }
.top .name .w{ color:var(--gold); }
.top .back{ margin-left: auto; font-size:var(--lg-note); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; padding: 0 8px; margin-right: -8px; }
h1{ font-size:var(--lg-h1); line-height:1.15; text-wrap:balance; font-weight:600; letter-spacing:-.01em; margin: 32px 0 8px; }
.updated{ font-family:var(--sans); color:var(--faint); font-size:var(--lg-sm); margin: 0 0 8px; }
.tldr{ background:var(--surface); border:1px solid rgba(205,171,69,.28); border-radius:14px; padding: 16px; margin: 24px 0 8px; }
.tldr strong{ color:var(--gold-bright); }
.tldr p{ margin: 0; color:var(--text); }
/* The contents list is how anyone actually navigates a long policy on a phone. As inline
   text its links were 16px tall and packed against each other; each one is now its own
   44px target with room around it. */
.toc{ font-size:var(--lg-note); color:var(--faint); margin: 20px 0 8px; display:flex; flex-wrap:wrap; align-items:center; gap: 0 4px; }
.toc a{ color:var(--muted); display:inline-flex; align-items:center; min-height:44px; padding: 0 8px; text-decoration:none; border-bottom:1px solid transparent; }
.toc a:hover{ color:var(--gold-bright); border-bottom-color:currentColor; }
h2{ font-size:var(--lg-h2); font-weight:600; margin: 32px 0 8px; padding-top: 16px; text-wrap:balance; border-top:1px solid var(--line); scroll-margin-top: 16px; }
h2 .num{ color:var(--gold); font-variant-numeric:tabular-nums; margin-right: 8px; }
h3{ font-size:var(--lg-h3); font-weight:600; margin: 20px 0 4px; }
p,li{ color:var(--muted); }
p{ margin: 0 0 12px; text-wrap:pretty; }
strong{ color:var(--text); font-weight:600; }
ul{ margin: 0 0 12px; padding-left: 24px; } li{ margin: 8px 0; }
.note{ font-size:var(--lg-note); color:var(--faint); background:rgba(214,224,240,.04); border:1px solid var(--line); border-radius:14px; padding: 12px 16px; margin: 16px 0; }
footer{ border-top:1px solid var(--line); margin-top: 40px; padding-top: 20px; color:var(--faint); font-size:var(--lg-sm); }
/* The footer is a standalone link row, not links inside a sentence, so WCAG 2.5.5's inline
   exemption does not cover it — they were 15px targets. Inline links within the policy prose
   are deliberately left alone; padding those would wreck the line rhythm. */
footer a{ color:var(--faint); display:inline-flex; align-items:center; min-height:44px; }