/* ══════════════════════════════════════════════════════════════════
   THE LONG TERM · legal pages (privacy, terms, security, cookies)
   Same Horizon tokens, top bar and footer as index.html; a quiet
   two-column reading layout: sticky contents left, text right.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F5F2EA; --paper-2:#EDE8DC; --card:#FCFAF4; --card-2:#F1EDE2;
  --ink:#1A231E; --ink-2:#45514A; --muted-text:#666A63;
  --rule:#DCD5C6; --rule-soft:#E7E1D3; --rule-hard:#1A231E;
  --shadow-2:0 2px 4px rgba(29,38,32,.05), 0 24px 60px -24px rgba(29,38,32,.28);
  --forest:#24503F; --forest-strong:#1B3E30; --forest-tint:#E2EAE2; --on-forest:#F5F2EA;
  --ochre:#C08A3E; --on-ochre-tint:#896128; --ochre-tint:#F3E7D2;
  --sage:#5F8A6E;
  --blush:#D9B7A2;
  --horizon:linear-gradient(90deg,var(--forest) 0%,var(--sage) 42%,var(--ochre) 78%,var(--blush) 100%);
  --sc-font-display:"Fraunces",Georgia,serif;
  --sc-font-text:"Hanken Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --bar:3.4rem;
  --logo-hex:#101023;
  --gut:clamp(1.25rem,4vw,3rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16130E; --paper-2:#1D1913; --card:#201C15; --card-2:#272219;
    --ink:#EFE9DA; --ink-2:#C6BFAE; --muted-text:#999182;
    --rule:#332D22; --rule-soft:#2A251B; --rule-hard:#EFE9DA;
    --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 28px 64px -24px rgba(0,0,0,.6);
    --forest:#7FBFA0; --forest-strong:#9AD2B6; --forest-tint:#22302A; --on-forest:#14211B;
    --ochre:#DFAD6A; --on-ochre-tint:#E8BE84; --ochre-tint:#322A1C;
    --sage:#8CB99A; --blush:#C7A48F;
    --logo-hex:#EFE9DA;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + 1.5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sc-font-text); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--ochre); outline-offset:3px; border-radius:2px}
.d{font-family:var(--sc-font-display); font-weight:450; letter-spacing:-0.022em; line-height:1.02}
.lab{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--muted-text)}
@media (max-width:520px){ .hide-xs{display:none} }

/* ─────────── top bar (copied from index.html) ─────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--bar);
  display:flex; align-items:center; gap:clamp(.75rem,2vw,2rem);
  padding:0 clamp(1rem,3vw,2rem);
  background:color-mix(in oklab,var(--paper) 90%,transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--rule-hard);
}
.topbar__mark{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; flex:0 0 auto; margin-right:auto}
.topbar__mark .lm{height:26px; width:auto; display:block}
.topbar__mark span{font-family:var(--sc-font-display); font-size:1.05rem; letter-spacing:-.015em; white-space:nowrap}
.topbar__login{
  font-size:.83rem; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
}
.topbar__login:hover{text-decoration:underline; text-underline-offset:4px}
.topbar__cta{
  display:inline-flex; align-items:center; min-height:40px; padding:0 1.05rem; border-radius:999px;
  background:var(--forest); color:var(--on-forest); font-size:.83rem; font-weight:600;
  text-decoration:none; white-space:nowrap; transition:background 150ms;
}
.topbar__cta:hover{background:var(--forest-strong)}
@media (max-width:440px){ .topbar__cta{display:none} }  /* phones: brand + Log in only on reading pages */

/* ─────────── page head ─────────── */
.legal{padding-top:var(--bar)}
.legal__head{max-width:1500px; margin:0 auto; padding:clamp(3rem,7vw,6rem) var(--gut) clamp(2rem,4vw,3rem)}
.legal__head h1{font-size:clamp(2.4rem,6vw,4.6rem); margin:.9rem 0 0; max-width:16ch}
.legal__head .lede{font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.55; color:var(--ink-2); max-width:60ch; margin:1.4rem 0 0}
.legal__meta{margin:1.6rem 0 0; font-size:.82rem; color:var(--muted-text)}
.legal__rule{height:3px; background:var(--horizon); max-width:1500px; margin:0 auto}
.legal__rule-wrap{padding:0 var(--gut)}

/* ─────────── body: contents + text ─────────── */
.legal__grid{
  max-width:1500px; margin:0 auto; padding:clamp(2.5rem,5vw,4rem) var(--gut) clamp(4rem,8vw,7rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:clamp(2rem,5vw,5rem);
}
.legal__toc{position:sticky; top:calc(var(--bar) + 2rem); align-self:start}
.legal__toc ol{list-style:none; margin:.9rem 0 0; padding:0; counter-reset:toc}
.legal__toc li{counter-increment:toc; border-top:1px solid var(--rule)}
.legal__toc li:last-child{border-bottom:1px solid var(--rule)}
.legal__toc a{display:flex; gap:.8rem; padding:.55rem 0; font-size:.86rem; color:var(--ink-2); text-decoration:none}
.legal__toc a::before{content:counter(toc,decimal-leading-zero); font-size:.72rem; color:var(--muted-text); font-variant-numeric:tabular-nums; padding-top:.1rem}
.legal__toc a:hover{color:var(--ink)}
.legal__toc a[aria-current="true"]{color:var(--ink); font-weight:600}

.legal__body{max-width:68ch}
.legal__body section{padding-bottom:2.2rem; margin-bottom:2.2rem; border-bottom:1px solid var(--rule)}
.legal__body section:last-child{border-bottom:0; margin-bottom:0}
.legal__body h2{font-family:var(--sc-font-display); font-weight:450; letter-spacing:-.015em; font-size:clamp(1.45rem,2.2vw,1.85rem); line-height:1.15; margin:0 0 1rem}
.legal__body h2 .n{font-family:var(--sc-font-text); font-size:.72rem; font-weight:700; letter-spacing:.18em; color:var(--muted-text); display:block; margin-bottom:.5rem}
.legal__body h3{font-size:1rem; font-weight:700; margin:1.6rem 0 .4rem}
.legal__body p, .legal__body li{color:var(--ink-2)}
.legal__body p{margin:0 0 1rem}
.legal__body ul{margin:0 0 1rem; padding-left:1.2rem}
.legal__body li{margin:.35rem 0; padding-left:.2rem}
.legal__body li::marker{color:var(--ochre)}
.legal__body strong{color:var(--ink); font-weight:600}
.legal__body a{color:var(--forest); text-underline-offset:3px}
.legal__body a:hover{color:var(--forest-strong)}

/* the plain-English summary box at the top of each policy */
.gist{background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--forest); padding:1.2rem 1.4rem; margin:0 0 2.6rem; border-radius:2px}
.gist .lab{color:var(--forest)}
.gist ul{margin:.7rem 0 0; padding-left:1.1rem}
.gist li{color:var(--ink); margin:.3rem 0}

/* tables: providers, cookies */
.tbl-wrap{overflow-x:auto; margin:0 0 1.2rem; border:1px solid var(--rule); border-radius:2px}
.tbl{width:100%; border-collapse:collapse; font-size:.88rem; min-width:34rem}
.tbl th{text-align:left; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--muted-text); background:var(--paper-2); padding:.7rem .9rem}
.tbl td{padding:.75rem .9rem; border-top:1px solid var(--rule); vertical-align:top; color:var(--ink-2)}
.tbl td:first-child{color:var(--ink); font-weight:600}
.tbl code{font-size:.82rem}

/* visible "to be confirmed" markers so nothing ships unnoticed */
.tbc{background:var(--ochre-tint); color:var(--on-ochre-tint); padding:.05rem .35rem; border-radius:2px; font-weight:600; font-size:.92em}

.contact-card{background:var(--card); border:1px solid var(--rule); padding:1.2rem 1.4rem; border-radius:2px; font-style:normal; color:var(--ink-2); line-height:1.7}
.contact-card strong{color:var(--ink)}

.btn-prefs{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1.1rem; border-radius:999px;
  background:var(--forest); color:var(--on-forest); border:0; font:600 .88rem var(--sc-font-text); cursor:pointer;
}
.btn-prefs:hover{background:var(--forest-strong)}

@media (max-width:900px){
  .legal__grid{grid-template-columns:minmax(0,1fr)}
  .legal__toc{position:static}
}

/* ─────────── security page extras ─────────── */
.facts{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.facts li{border:1px solid var(--rule-hard); border-radius:999px; padding:.35rem .9rem; font-size:.82rem; font-weight:600; color:var(--ink); margin:0}
.facts li::marker{content:none}
.principles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.2rem 0 0}
.principle{background:var(--card); border:1px solid var(--rule); border-top:3px solid var(--forest); padding:1.2rem 1.3rem; border-radius:2px}
.principle h3{margin:0 0 .4rem; font-family:var(--sc-font-display); font-weight:500; font-size:1.2rem; letter-spacing:-.01em; color:var(--ink)}
.principle p{margin:0; font-size:.93rem}
@media (max-width:640px){ .principles{grid-template-columns:1fr} }

/* ─────────── footer (copied from index.html) ─────────── */
.foot{background:var(--ink); color:var(--paper); --logo-hex:#EFE9DA}
.foot__in{max-width:1500px; margin:0 auto; padding:clamp(3rem,5vw,4.5rem) var(--gut) clamp(3rem,5vw,4rem)}
.foot__brand{display:inline-flex; align-items:center; gap:.6rem; color:var(--paper); text-decoration:none; font-family:var(--sc-font-display); font-size:1.3rem}
.foot__lm{width:1.5rem; height:auto}
.foot__cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin-top:2.6rem}
.foot h2{margin:0 0 .8rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:color-mix(in oklab,var(--paper) 62%,transparent)}
.foot a,.foot address{display:block; font-style:normal; font-size:.95rem; line-height:1.5; padding:.25rem 0; color:color-mix(in oklab,var(--paper) 90%,transparent); text-decoration:none}
.foot a:hover{text-decoration:underline; text-underline-offset:4px}
.foot a.foot__brand{display:inline-flex; padding:0}
.foot__brand:hover{text-decoration:none}
.foot__legal p{margin:0 0 .9rem; max-width:120ch; line-height:1.6}
.foot__legal p:last-child{margin-bottom:0}
.foot .foot__legal a{display:inline; padding:0; min-height:0; font-size:inherit; line-height:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px}
.foot .tbc{background:#F3E7D2; color:#896128; padding:.05rem .35rem; border-radius:2px; font-weight:600}
.foot__legal{margin:2.8rem 0 0; padding-top:1.4rem; border-top:1px solid color-mix(in oklab,var(--paper) 18%,transparent);
  font-size:.8rem; color:color-mix(in oklab,var(--paper) 62%,transparent)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .foot{background:#0F0D09; color:var(--ink); --logo-hex:#EFE9DA}
  :root:not([data-theme="light"]) .foot__brand{color:var(--ink)}
  :root:not([data-theme="light"]) .foot a, :root:not([data-theme="light"]) .foot address{color:color-mix(in oklab,var(--ink) 90%,transparent)}
  :root:not([data-theme="light"]) .foot h2, :root:not([data-theme="light"]) .foot__legal{color:color-mix(in oklab,var(--ink) 62%,transparent); border-top-color:color-mix(in oklab,var(--ink) 18%,transparent)} }
@media (max-width:760px){
  .foot__cols{grid-template-columns:1fr 1fr; gap:1.8rem 1.2rem}
  .foot a,.foot address{padding:.55rem 0; min-height:44px; display:flex; align-items:center}
}

/* ─────────── FAQs: native details/summary accordions ─────────── */
.faq{border-top:1px solid var(--rule)}
.faq:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0; min-height:44px; font-weight:600; font-size:1.02rem; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:0 0 auto; width:.6rem; height:.6rem; margin-right:.3rem;
  border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:translateY(-25%) rotate(45deg); transition:transform 160ms}
.faq[open] summary::after{transform:translateY(25%) rotate(-135deg)}
.faq summary:hover{color:var(--forest)}
.faq__a{padding:0 2rem .6rem 0}
.faq__a p{margin:0 0 .8rem}
@media (prefers-reduced-motion:reduce){ .faq summary::after{transition:none} }
/* the question list already closes with its own rule; drop the section rule so each group ends on one line */
.legal__body section:has(.faq){border-bottom:0; padding-bottom:1rem}