/* ============================================================================
   landing/legal/_style.css — shared styling for the Terms and Privacy pages.

   The rest of the landing site keeps its CSS inline per page, because each page
   is a self-contained marketing artifact. These two are the exception: they are
   a matched pair that must stay visually identical to each other, and a diff
   between them should show a content change, never a styling drift. So the
   tokens below are lifted verbatim from agents/start.html and the page chrome
   is shared.
   ========================================================================== */

:root{
  --primary:#4a635d; --primary-dim:#3f5751; --primary-container:#cde8e1;
  --olive:#6B8E23; --olive-dim:#5a7a1d;
  --surface:#f8f9fa; --sc-lowest:#ffffff; --sc-low:#f1f4f6; --sc:#eaeff1; --sc-high:#e3e9ec;
  --on-surface:#2b3437; --on-surface-variant:#586064; --outline-variant:#abb3b7;
  --line:rgba(171,179,183,.35); --line-soft:rgba(171,179,183,.22);
  --danger:#c0392b; --danger-bg:#fbe0e0;
  --warn:#8a6100; --warn-bg:#fdf3dc; --warn-line:rgba(138,97,0,.28);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --shadow:0 1px 2px rgba(22,33,29,.05),0 12px 32px -16px rgba(22,33,29,.20);
  --r:1rem; --r-lg:.75rem; --r-sm:.5rem;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --disp:'Manrope','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--on-surface); background:var(--surface);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 2px 2px, rgba(77,97,80,.05) 1px, transparent 0);
  background-size:26px 26px;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; line-height:1}

/* ── Nav ── */
nav.top{position:sticky; top:0; z-index:50; background:rgba(248,249,250,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
nav.top .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:1.15rem; color:var(--olive); letter-spacing:-.02em; text-decoration:none}
.logo .material-symbols-outlined{font-size:24px; color:var(--olive); font-variation-settings:'FILL' 1}
nav.top .right{display:flex; align-items:center; gap:20px}
nav.top .navlink{color:var(--on-surface-variant); text-decoration:none; font-weight:600; font-size:.9rem}
nav.top .navlink:hover{color:var(--on-surface)}

/* ── Page head ── */
.eyebrow{display:inline-block; font-family:var(--disp); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--olive)}
main.page{padding:48px 0 72px}
.doc-head{max-width:760px; margin-bottom:34px}
.doc-head h1{font-family:var(--disp); font-weight:800; letter-spacing:-.025em; line-height:1.08; color:var(--on-surface); font-size:clamp(2rem,4.6vw,2.7rem); margin:12px 0 0}
.doc-head .lede{color:var(--on-surface-variant); font-size:1.08rem; margin-top:14px}
.dates{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:20px; font-size:.86rem; color:var(--on-surface-variant)}
.dates b{font-family:var(--disp); color:var(--on-surface); font-weight:700}

/* ── Draft banner (delete when counsel signs off) ── */
.draft{display:flex; gap:13px; align-items:flex-start; background:var(--warn-bg); border:1px solid var(--warn-line); border-left:4px solid var(--warn); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:30px; max-width:860px}
.draft .material-symbols-outlined{color:var(--warn); font-size:21px; flex:none; margin-top:1px}
.draft h3{font-family:var(--disp); font-size:.95rem; font-weight:800; color:var(--warn); margin-bottom:5px}
.draft p{font-size:.88rem; color:#6d4d00; line-height:1.55}
.draft ul{margin:8px 0 0 18px; font-size:.88rem; color:#6d4d00}
.draft li{margin:3px 0}

/* ── Layout: sticky TOC + prose ── */
.doc-grid{display:grid; grid-template-columns:232px minmax(0,1fr); gap:52px; align-items:start}
.toc{position:sticky; top:88px; font-size:.87rem}
.toc .t{font-family:var(--disp); font-weight:800; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--outline-variant); margin-bottom:12px}
.toc a{display:block; padding:5px 0 5px 12px; color:var(--on-surface-variant); text-decoration:none; border-left:2px solid var(--line-soft); line-height:1.4}
.toc a:hover{color:var(--on-surface); border-left-color:var(--outline-variant)}
.toc a.active{color:var(--primary-dim); font-weight:600; border-left-color:var(--primary)}

.prose{max-width:720px}
.prose section{scroll-margin-top:84px; padding-bottom:6px}
.prose h2{font-family:var(--disp); font-weight:800; font-size:1.3rem; letter-spacing:-.018em; color:var(--on-surface); margin:38px 0 12px; display:flex; align-items:baseline; gap:10px}
.prose section:first-child h2{margin-top:0}
.prose h2 .num{font-size:.85rem; font-weight:700; color:var(--olive); flex:none; font-variant-numeric:tabular-nums}
.prose h3{font-family:var(--disp); font-weight:700; font-size:1rem; color:var(--on-surface); margin:22px 0 8px}
.prose p{color:var(--on-surface-variant); margin:11px 0}
.prose ul,.prose ol{margin:11px 0 11px 22px; color:var(--on-surface-variant)}
.prose li{margin:6px 0}
.prose li>strong,.prose p>strong{color:var(--on-surface); font-weight:600}
.prose a{color:var(--primary-dim); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.prose em{color:var(--on-surface)}
.prose hr{border:none; border-top:1px solid var(--line-soft); margin:34px 0}

/* caps-lock blocks that consumer-protection law effectively requires to stand out */
.legalese{background:var(--sc-low); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; margin:14px 0; font-size:.87rem; color:var(--on-surface-variant); line-height:1.65}
.legalese strong{color:var(--on-surface)}

/* callout */
.callout{display:flex; gap:13px; align-items:flex-start; background:var(--sc-lowest); border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:var(--r-lg); padding:15px 17px; margin:16px 0; box-shadow:var(--shadow-sm)}
.callout.warn{border-left-color:var(--danger); background:#fffafa}
.callout .material-symbols-outlined{color:var(--primary); font-size:20px; flex:none; margin-top:2px}
.callout.warn .material-symbols-outlined{color:var(--danger)}
.callout p{margin:0; font-size:.92rem}
.callout p+p{margin-top:8px}
.callout .h{display:block; font-family:var(--disp); font-weight:700; color:var(--on-surface); margin-bottom:3px}

/* data table */
.tbl-scroll{overflow-x:auto; margin:16px 0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--sc-lowest)}
table{border-collapse:collapse; width:100%; font-size:.88rem; min-width:520px}
th,td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--on-surface-variant)}
th{font-family:var(--disp); font-weight:700; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--on-surface); background:var(--sc-low); white-space:nowrap}
tr:last-child td{border-bottom:none}
td strong{color:var(--on-surface); font-weight:600}

/* unresolved placeholder — deliberately loud so it cannot ship unnoticed */
.fill{background:#ffe8a3; color:#6d4d00; border-bottom:2px solid #d9a400; padding:1px 5px; border-radius:3px; font-weight:600; font-style:normal}

/* ── Footer ── */
footer{padding:32px 0 44px; border-top:1px solid var(--line-soft); margin-top:56px}
footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px}
footer .muted{color:var(--outline-variant); font-size:.85rem}
footer .lnks{display:flex; gap:20px; flex-wrap:wrap}
footer a{color:var(--on-surface-variant); text-decoration:none; font-weight:600; font-size:.85rem}
footer a:hover{color:var(--on-surface)}

@media (max-width:560px){
  .logo{white-space:nowrap; font-size:1.05rem}
  nav.top .right{gap:14px}
  nav.top .navlink{font-size:.82rem}
  .doc-head .lede{font-size:1rem}
}
@media (max-width:900px){
  .doc-grid{grid-template-columns:1fr; gap:0}
  .toc{position:static; margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--line-soft)}
  .toc .links{display:flex; flex-wrap:wrap; gap:4px 16px}
  .toc a{border-left:none; padding:3px 0}
  .toc a.active{border-left:none}
  main.page{padding:32px 0 48px}
}