/* Shared styling for the Terms and Privacy pages.
   Same tokens as the landing page, tuned for long-form reading. */
:root{
  --ink:#191223;
  --ink-2:#544c66;
  --ink-3:#8a819c;
  --bg:#fbf9fe;
  --line:rgba(110,51,214,.13);
  --brand:#6e33d6;
  --brand-2:#8b5cf6;
  --green:#0f8a4c;
  --pink:#fbe4ef;
  --lilac:#ece2ff;
  --mint:#ddf3e8;
  --shadow-s:0 1px 2px rgba(35,20,60,.05), 0 4px 14px rgba(60,30,110,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40rem 26rem at 8% -8%, var(--pink) 0%, transparent 60%),
    radial-gradient(36rem 24rem at 96% 2%, var(--lilac) 0%, transparent 58%);
  opacity:.7;
}

img{max-width:100%; display:block}
a{color:var(--brand)}
a:hover{color:#5426ab}

.wrap{width:100%; max-width:800px; margin-inline:auto; padding-inline:24px}

/* header */
header{position:sticky; top:0; z-index:50}
header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(251,249,254,.78);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:14px; padding:13px 0}
.mark{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:640; letter-spacing:-.02em}
.mark img{width:32px; height:32px; border-radius:9px; box-shadow:var(--shadow-s)}
.bar .spacer{flex:1}
.bar nav{display:flex; gap:22px; font-size:.93rem}
.bar nav a{color:var(--ink-2); text-decoration:none}
.bar nav a:hover, .bar nav a[aria-current="page"]{color:var(--brand)}

/* document */
main{padding:clamp(38px,6vw,64px) 0 40px}
h1{
  font-size:clamp(2.1rem,4.6vw,2.9rem); letter-spacing:-.032em;
  line-height:1.08; margin:0 0 12px; font-weight:640;
}
.updated{color:var(--ink-3); font-size:.92rem; margin:0 0 34px}

h2{
  font-size:1.32rem; letter-spacing:-.02em; line-height:1.3;
  margin:44px 0 12px; font-weight:640; scroll-margin-top:80px;
}
h3{font-size:1.03rem; letter-spacing:-.012em; margin:26px 0 8px; font-weight:640}
p{margin:0 0 15px; color:var(--ink-2)}
li{color:var(--ink-2); margin-bottom:8px}
ul,ol{padding-left:22px; margin:0 0 16px}
strong{color:var(--ink); font-weight:620}

/* lede */
.lede{font-size:1.08rem; color:var(--ink-2)}
.lede strong{color:var(--ink)}

/* table of contents */
.toc{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:18px; padding:20px 24px;
  box-shadow:var(--shadow-s);
  margin-bottom:8px;
}
.toc p{font-size:.78rem; font-weight:660; letter-spacing:.09em; text-transform:uppercase; color:var(--brand); margin:0 0 10px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:28px}
.toc li{margin-bottom:5px; font-size:.93rem}
.toc a{text-decoration:none; color:var(--ink-2)}
.toc a:hover{color:var(--brand); text-decoration:underline}
@media (max-width:620px){.toc ol{columns:1}}

/* callout */
.note{
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  background:rgba(255,255,255,.75);
  border-radius:14px; padding:18px 20px; margin:22px 0;
  box-shadow:var(--shadow-s);
}
.note.warn{border-left-color:#c9448b}
.note.good{border-left-color:var(--green)}
.note :last-child{margin-bottom:0}
.note h3{margin-top:0}

/* placeholders the operator must fill in before submission */
.todo{
  background:#fff2c2; color:#6b4a00;
  border-bottom:1px dashed #b98b00;
  padding:1px 5px; border-radius:4px;
  font-weight:600; font-style:normal;
}

/* key-value table */
table{border-collapse:collapse; width:100%; margin:0 0 18px; font-size:.95rem}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--ink); font-weight:620; white-space:nowrap}
td{color:var(--ink-2)}
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* footer */
footer{border-top:1px solid var(--line); margin-top:56px; padding:32px 0 56px}
.foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.foot .spacer{flex:1}
.foot small{color:var(--ink-3); font-size:.85rem}
.foot nav{display:flex; gap:18px; font-size:.88rem}
.foot nav a{color:var(--ink-2); text-decoration:none}
.foot nav a:hover{color:var(--brand)}
@media (max-width:620px){
  .foot{justify-content:center; text-align:center}
  .foot .spacer{display:none}
}