/* legal.css — shared stylesheet for /privacy and /terms.
   These pages have always linked this file, but it was never deployed, so both
   were rendering with browser default styles on a white background: unstyled
   black-on-white body text, no palette, no type. Tokens below are lifted
   verbatim from the inline <style> in index.html so the legal pages and the
   calculator are demonstrably the same site. */

:root{
  --ink:#0F1B2D;
  --ink-2:#16263D;
  --ink-3:#1E3350;
  --paper:#F6F2EA;
  --brass:#E0A93B;
  --slate:#8496AD;
  --rule:rgba(246,242,234,.14);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:44rem;margin:0 auto;padding:0 1.25rem 4rem}

/* Masthead */
.masthead{padding:1.5rem 0 .5rem;margin-bottom:2rem;border-bottom:1px solid var(--rule)}
.brandline{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:baseline;
  justify-content:space-between;padding-bottom:1.25rem}
a.brand{font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em;
  color:var(--paper);text-decoration:none}
a.brand b{font-weight:800}
a.brand:hover{color:var(--brass)}
.updated{font-family:var(--mono);font-size:.75rem;color:var(--slate)}

/* Type */
h1{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5vw,2.6rem);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 1rem}
h2{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;
  margin:2.5rem 0 .6rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
h3{font-family:var(--display);font-weight:600;font-size:1rem;margin:1.75rem 0 .4rem;
  color:var(--brass)}
p{margin:0 0 1rem}
p.lede{font-size:1.08rem;color:var(--slate);margin-bottom:2rem}
p.note{font-size:.85rem;color:var(--slate)}
strong{font-weight:600;color:#fff}
ul{margin:0 0 1rem;padding-left:1.15rem}
li{margin-bottom:.45rem}

a{color:var(--brass);text-decoration:underline;text-underline-offset:.15em;
  text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

/* Tables: the privacy page lists what data each third party receives, and an
   unstyled table is the single worst-reading element on an unstyled page. */
table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.9rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--rule);
  vertical-align:top}
th{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--slate);background:var(--ink-2)}
tbody tr:hover{background:rgba(246,242,234,.03)}

/* Footer */
footer{margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  align-items:flex-start;font-size:.85rem;color:var(--slate)}
footer a{color:var(--slate)}
footer a:hover{color:var(--brass)}
footer .disclosure{font-size:.72rem;line-height:1.5;opacity:.75;
  max-width:44rem;flex-basis:100%;order:3;margin-top:.35rem}

@media (max-width:30rem){
  h2{margin-top:2rem}
  .wrap{padding-bottom:2.5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}