/* Shared styling for /terms and /privacy — brand tokens lifted from index.html
   so the legal pages read as the same product, with long-form type sizing. */
:root{
  --accent:#7C7BF1;
  --accent-grad:linear-gradient(135deg,#6E7CF5 0%,#8B72ED 100%);
  --lav:#F4F3FD;
  --lav-deep:#EEEDFB;
  --line-l:#E4E3F5;
  --text-dark:#0B0D18;
  --text-body:#5A6178;
  --wrap:820px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,sans-serif;
  background:#fff;color:var(--text-body);
  -webkit-font-smoothing:antialiased;line-height:1.7;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(124,123,241,.32)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line-l)}
.nav{max-width:var(--wrap);margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-family:'Outfit';font-weight:700;font-size:1.22rem;color:var(--text-dark)}
.brand:hover{text-decoration:none}
.brand svg{width:30px;height:30px;flex:none}
.back{font-size:.9rem;font-weight:500;color:var(--text-body)}
.back:hover{color:var(--text-dark);text-decoration:none}

/* ---- document ---- */
.doc{max-width:var(--wrap);margin:0 auto;padding:72px 32px 120px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;
}
h1{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(2.1rem,5vw,3rem);
   line-height:1.08;letter-spacing:-.025em;color:var(--text-dark)}
.dates{margin-top:20px;font-size:.92rem;color:var(--text-body)}
.dates b{color:var(--text-dark);font-weight:600}

h2{font-family:'Outfit',sans-serif;font-weight:600;font-size:1.5rem;letter-spacing:-.02em;
   color:var(--text-dark);margin:56px 0 14px;scroll-margin-top:90px}
h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.05rem;color:var(--text-dark);margin:28px 0 8px}
p{margin:14px 0}
ul{margin:14px 0 14px 22px}
li{margin:8px 0}
strong{color:var(--text-dark);font-weight:600}

/* ---- callout: the disclaimers that actually matter ---- */
.note{
  background:var(--lav);border:1px solid var(--line-l);border-left:3px solid var(--accent);
  border-radius:0 14px 14px 0;padding:18px 22px;margin:26px 0;font-size:.95rem;
}
.note b{color:var(--text-dark)}

/* ---- unfilled placeholder: deliberately loud so it can't ship by accident ---- */
.ph{
  background:#FFE9A8;color:#6B4E00;border:1px dashed #C9A227;border-radius:5px;
  padding:1px 7px;font-family:'DM Mono',ui-monospace,monospace;font-size:.86em;font-weight:500;
  white-space:nowrap;
}

/* ---- table of contents ---- */
.toc{background:var(--lav);border:1px solid var(--line-l);border-radius:16px;padding:24px 28px;margin:40px 0}
.toc b{display:block;color:var(--text-dark);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.toc ol{margin:0 0 0 18px;font-size:.95rem}
.toc li{margin:6px 0}
.toc a{color:var(--text-body)}
.toc a:hover{color:var(--accent)}

table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.93rem}
th,td{text-align:left;padding:11px 14px;border:1px solid var(--line-l);vertical-align:top}
th{background:var(--lav-deep);color:var(--text-dark);font-weight:600}

footer{border-top:1px solid var(--line-l);background:var(--lav)}
.foot{max-width:var(--wrap);margin:0 auto;padding:32px;display:flex;gap:20px;
      justify-content:space-between;flex-wrap:wrap;font-size:.86rem}
.foot a{color:var(--text-body);margin-right:18px}

@media(max-width:640px){
  .doc{padding:48px 22px 80px}
  .nav{padding:14px 22px}
  .foot{padding:26px 22px}
}