/* ===========================================================================
   T2IG — the legal pages (/terms, /privacy, /acceptable-use).
   ===========================================================================
   One stylesheet for all three, so they stay a matched set. The tokens are the
   same ones the rest of the site uses (pricing.html defines them per page);
   they are redeclared here with the same values so a legal page is still
   correct if it is ever opened on its own, printed, or reached before the rest
   of the page CSS loads.

   The documents are built by scripts/build-legal.py — edit the clause there and
   re-run, do not hand-edit the generated HTML.
   =========================================================================== */

:root{
  --cyan:#00e5ff; --violet:#9b5cff; --pink:#ff2d78; --lime:#4bff9b; --gold:#ffc857;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:22px;
  --f-display:'Orbitron',sans-serif; --f-body:'Inter',sans-serif; --f-mono:'JetBrains Mono',monospace;
  --max-w:1280px; --nav-h:64px;
}
html[data-theme="dark"],html:not([data-theme]){
  --bg-0:#050610; --bg-1:#0a0c18; --bg-2:#11131f; --bg-3:#181b2d; --bg-4:#232742;
  --line-1:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.18);
  --text-1:#ffffff; --text-2:rgba(255,255,255,.72); --text-3:rgba(255,255,255,.48); --text-4:rgba(255,255,255,.28);
  --card-bg:linear-gradient(180deg,#11141f 0%,#0b0d18 100%);
  --glass:rgba(13,15,26,.72);
  --ambient:
    radial-gradient(ellipse 55% 40% at 20% 5%,rgba(0,229,255,.12),transparent 60%),
    radial-gradient(ellipse 55% 40% at 80% 30%,rgba(155,92,255,.13),transparent 60%);
}
html[data-theme="light"]{
  --bg-0:#f7f8fc; --bg-1:#ffffff; --bg-2:#f0f2f8; --bg-3:#e3e6f0; --bg-4:#d2d7e4;
  --line-1:rgba(0,0,0,.06); --line-2:rgba(0,0,0,.10); --line-3:rgba(0,0,0,.18);
  --text-1:#000000; --text-2:rgba(0,0,0,.70); --text-3:rgba(0,0,0,.46); --text-4:rgba(0,0,0,.26);
  --card-bg:linear-gradient(180deg,#ffffff 0%,#f7f8fc 100%);
  --glass:rgba(255,255,255,.82);
  --ambient:
    radial-gradient(ellipse 55% 40% at 20% 5%,rgba(0,180,220,.15),transparent 60%),
    radial-gradient(ellipse 55% 40% at 80% 30%,rgba(155,92,255,.16),transparent 60%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg-0); color:var(--text-2);
  font-family:var(--f-body); font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; background:var(--ambient);
  pointer-events:none; z-index:0;
}
.wrap{max-width:var(--max-w); margin:0 auto; padding:0 24px; position:relative; z-index:1}

/* ── masthead ─────────────────────────────────────────────────────────── */
.lg-head{padding:56px 0 34px; border-bottom:1px solid var(--line-1); position:relative; z-index:1}
.lg-eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-4); margin:0 0 14px;
}
.lg-title{
  font-family:var(--f-display); font-weight:800; color:var(--text-1);
  font-size:clamp(30px,5vw,50px); line-height:1.08; letter-spacing:-.015em; margin:0 0 14px;
}
.lg-lede{max-width:60ch; font-size:17px; color:var(--text-2); margin:0 0 24px}
.lg-meta{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px}
.lg-chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--bg-2);
  font-family:var(--f-mono); font-size:11.5px; color:var(--text-3);
}
.lg-chip b{color:var(--text-1); font-weight:600}

/* the three documents, as a segmented control */
.lg-switch{display:flex; flex-wrap:wrap; gap:8px}
.lg-switch a{
  padding:9px 16px; border-radius:999px; text-decoration:none; font-size:13.5px; font-weight:500;
  color:var(--text-3); border:1px solid var(--line-2); background:transparent;
  transition:color .16s, border-color .16s, background .16s;
}
.lg-switch a:hover{color:var(--text-1); border-color:var(--line-3)}
.lg-switch a[aria-current="page"]{
  color:#04060f; font-weight:650; border-color:transparent;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
}

/* ── the two-column body ──────────────────────────────────────────────── */
.lg-layout{display:grid; grid-template-columns:252px minmax(0,1fr); gap:56px; padding:40px 0 90px}
@media(max-width:940px){.lg-layout{grid-template-columns:1fr; gap:26px; padding-top:26px}}

.lg-toc{position:sticky; top:calc(var(--nav-h) + 22px); align-self:start; max-height:calc(100vh - var(--nav-h) - 50px); overflow-y:auto}
.lg-toc h2{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-4); margin:0 0 12px; font-weight:500;
}
.lg-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.lg-toc li{counter-increment:toc}
.lg-toc a{
  display:block; padding:6px 10px 6px 30px; position:relative; border-radius:var(--r-sm);
  font-size:13.3px; line-height:1.45; color:var(--text-3); text-decoration:none;
  border-left:2px solid transparent; transition:color .14s, background .14s, border-color .14s;
}
.lg-toc a::before{
  content:counter(toc); position:absolute; left:8px; top:6px;
  font-family:var(--f-mono); font-size:10.5px; color:var(--text-4);
}
.lg-toc a:hover{color:var(--text-1); background:var(--bg-2)}
.lg-toc a.on{color:var(--text-1); border-left-color:var(--cyan); background:var(--bg-2)}
.lg-toc a.on::before{color:var(--cyan)}
@media(max-width:940px){
  .lg-toc{position:static; max-height:none; border:1px solid var(--line-1); border-radius:var(--r-lg); background:var(--bg-1); padding:14px 16px}
  .lg-toc[open] summary{margin-bottom:10px}
}

.lg-doc{max-width:74ch; counter-reset:sec}
.lg-doc h2{
  counter-increment:sec; scroll-margin-top:calc(var(--nav-h) + 24px);
  font-family:var(--f-display); font-weight:700; color:var(--text-1);
  font-size:21px; line-height:1.3; letter-spacing:-.01em; margin:48px 0 14px; position:relative;
}
.lg-doc h2:first-child{margin-top:0}
.lg-doc h2::before{
  content:counter(sec) '.'; font-family:var(--f-mono); font-size:13px; color:var(--cyan);
  margin-right:10px; font-weight:500;
}
.lg-doc h2 .anchor{
  opacity:0; margin-left:9px; font-size:14px; color:var(--text-4); text-decoration:none;
  transition:opacity .14s;
}
.lg-doc h2:hover .anchor{opacity:1}
.lg-doc h3{font-size:15.5px; font-weight:650; color:var(--text-1); margin:26px 0 8px; font-family:var(--f-body)}
.lg-doc p{margin:0 0 15px}
.lg-doc ul,.lg-doc ol{margin:0 0 16px; padding-left:22px}
.lg-doc li{margin:0 0 8px}
.lg-doc li::marker{color:var(--text-4)}
.lg-doc strong{color:var(--text-1); font-weight:600}
.lg-doc a{color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(0,229,255,.3)}
.lg-doc a:hover{border-bottom-color:var(--cyan)}
.lg-doc code{font-family:var(--f-mono); font-size:13px; background:var(--bg-2); padding:2px 6px; border-radius:var(--r-sm); color:var(--text-1)}
.lg-doc hr{border:0; border-top:1px solid var(--line-1); margin:40px 0}

/* key-facts cards at the top of a document */
.lg-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); gap:14px; margin:0 0 38px}
.lg-fact{
  border:1px solid var(--line-1); border-radius:var(--r-lg); background:var(--card-bg);
  padding:16px 17px;
}
.lg-fact b{display:block; font-family:var(--f-display); font-size:12px; letter-spacing:.03em;
  color:var(--text-1); margin-bottom:6px; font-weight:700; text-transform:uppercase}
.lg-fact span{font-size:13.4px; line-height:1.6; color:var(--text-3)}

/* a callout for the lines that matter most */
.lg-note{
  border:1px solid var(--line-2); border-left:3px solid var(--gold);
  border-radius:var(--r-md); background:var(--bg-2); padding:15px 18px; margin:0 0 20px;
}
.lg-note p:last-child{margin-bottom:0}
.lg-note.hard{border-left-color:var(--pink)}
.lg-note.good{border-left-color:var(--lime)}

/* a definition table (used by the privacy summary) */
.lg-table{width:100%; border-collapse:collapse; margin:0 0 22px; font-size:14px}
.lg-table th,.lg-table td{text-align:left; padding:11px 13px; border-bottom:1px solid var(--line-1); vertical-align:top}
.lg-table th{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-4); font-weight:500}
.lg-table td:first-child{color:var(--text-1); font-weight:550; width:30%}

/* ── footer ───────────────────────────────────────────────────────────── */
.lg-foot{border-top:1px solid var(--line-1); background:var(--bg-1); padding:40px 0 34px; position:relative; z-index:1}
.lg-foot-in{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center}
.lg-foot a{color:var(--text-3); text-decoration:none; font-size:13.5px; margin-right:18px}
.lg-foot a:hover{color:var(--text-1)}
.lg-foot p{margin:0; font-size:12.5px; color:var(--text-4)}

/* ── print: these get printed, so make that good ──────────────────────── */
@media print{
  body{background:#fff; color:#111; font-size:11.5pt}
  body::before,.lg-toc,.lg-switch,.t2nav,.t2nav-pad,.t2nav-drawer,.t2nav-scrim{display:none !important}
  .lg-layout{display:block; padding:0}
  .lg-doc{max-width:none}
  .lg-doc h2{color:#000; page-break-after:avoid; margin-top:22pt}
  .lg-doc h2::before{color:#555}
  .lg-doc a{color:#000; border:0}
  .lg-doc a[href^="http"]::after,.lg-doc a[href^="mailto"]::after{content:' (' attr(href) ')'; font-size:9pt; color:#555}
  .lg-fact,.lg-note{border:1px solid #ccc}
  .lg-head{border-bottom:1px solid #ccc}
}