/* ==========================================================================
   Debut / stylesheet for the legal pages (privacy, terms).
   Tokens match index.html exactly so the site reads as one thing.
   index.html carries its own inline styles and does not load this file.
   ========================================================================== */

:root{
  --ink:#111213;
  --ink-2:#5b5e63;
  --ink-3:#8d9197;
  --line:#e6e6e4;
  --bg:#ffffff;
  --bg-2:#fafaf9;
  --amber:#e39824;
  --max:1080px;
  --measure:680px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

::selection{background:var(--amber);color:#fff}

/* nav / identical to index.html ------------------------------------------ */

nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 0;
}
.mark{font-weight:700;font-size:19px;letter-spacing:-.02em}
.mark span{color:var(--amber)}
.mark a{color:inherit;text-decoration:none}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--ink-2)}
.nav-links a{color:inherit;text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:500}

/* page head -------------------------------------------------------------- */

.legal{padding:56px 0 96px}

.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;
}

.legal-head{
  padding-bottom:36px;border-bottom:1px solid var(--line);margin-bottom:44px;
}

.legal-head h1{
  font-size:clamp(32px,4.4vw,46px);font-weight:700;
  letter-spacing:-.035em;line-height:1.05;
}

.dates{
  display:flex;flex-wrap:wrap;gap:8px 28px;
  margin-top:20px;font-size:14px;color:var(--ink-3);
}

/* body ------------------------------------------------------------------- */

.legal-body{max-width:var(--measure)}

.legal-body h2{
  font-size:20px;font-weight:700;letter-spacing:-.02em;
  margin-top:52px;padding-top:28px;border-top:1px solid var(--line);
  margin-bottom:14px;scroll-margin-top:24px;
}
.legal-body h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.legal-body h2 .num{color:var(--amber);margin-right:8px}

.legal-body h3{
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:30px;margin-bottom:10px;
}

.legal-body p{color:var(--ink-2);font-size:16px;margin-bottom:16px}
.legal-body ul{color:var(--ink-2);font-size:16px;margin-bottom:16px;padding-left:20px}
.legal-body li{margin-bottom:8px}
.legal-body li::marker{color:var(--amber)}
.legal-body strong{color:var(--ink);font-weight:600}

.legal-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--amber);text-decoration-thickness:1.5px}
.legal-body a:hover{color:var(--amber)}

/* placeholder token / loud on purpose, so none ship by accident ----------- */

.ph{
  background:#fdf1d9;
  border-bottom:2px solid var(--amber);
  padding:1px 5px;border-radius:3px;
  font-size:.94em;font-weight:600;color:var(--ink);
  white-space:nowrap;
}

/* callout + contents ------------------------------------------------------ */

.callout{
  background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:0 10px 10px 0;
  padding:20px 22px;margin-bottom:32px;
}
.callout p:last-child{margin-bottom:0}

.toc{
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;margin-bottom:44px;
}
.toc .eyebrow{margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px;font-size:15px}
.toc li{margin-bottom:6px;break-inside:avoid}
.toc li::marker{color:var(--amber)}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink)}

/* footer / identical to index.html ---------------------------------------- */

footer{border-top:1px solid var(--line);padding:36px 0;font-size:14px;color:var(--ink-3)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.foot a{color:var(--ink-2);text-decoration:none;margin-left:22px}
.foot a:first-child{margin-left:0}
.foot a:hover{color:var(--ink)}

/* accessibility ----------------------------------------------------------- */

:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.skip{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{
  position:fixed;left:16px;top:16px;width:auto;height:auto;margin:0;
  overflow:visible;clip-path:none;z-index:100;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;
  text-decoration:none;font-size:14px;font-weight:600;
}

/* responsive -------------------------------------------------------------- */

@media (max-width:860px){
  .nav-links{gap:18px;font-size:13px}
  .legal{padding:40px 0 72px}
}

@media (max-width:560px){
  .toc ol{columns:1}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

@media print{
  nav,.toc,.foot a{display:none}
  body{color:#000}
  .legal-body{max-width:none}
  .ph{background:none;border-bottom:1px solid #000}
}