/* Legal pages (privacy.html, terms.html) and 404.html. Uses core.css tokens. Owner: trust & conversion builder.
   Legal: header, then a table of contents (a box on phones, a sticky sidebar from 1024px; js/sections/legal.js marks the
   current section) beside a ~68ch reading column. 404: copy + useful links, the buddy with a big faded "404". */

/* ---------- legal: header ---------- */
.legal{padding-block:clamp(40px,6vw,88px) var(--space-8)}
.legal-head{padding-bottom:var(--space-7);margin-bottom:var(--space-7);border-bottom:1px solid var(--line)}
.legal-head h1{font-size:var(--fs-h1)}
.legal-head .meta{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:var(--space-5);color:var(--ink-3);font-size:var(--fs-s)}
.legal-head .meta{flex-direction:column}
@media (min-width:640px){.legal-head .meta{flex-direction:row}.legal-head .meta span+span::before{content:"·";margin:0 10px;color:var(--ink-3)}}

/* ---------- legal: layout + table of contents ---------- */
.legal-body{display:grid;gap:var(--space-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.legal-body{grid-template-columns:232px minmax(0,1fr);gap:clamp(56px,6vw,104px);align-items:start}}
.legal-toc{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.legal-toc-title{margin-bottom:var(--space-3);font-size:var(--fs-micro);font-weight:650;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-3)}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
@media (min-width:640px) and (max-width:1023.98px){.legal-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5)}}
.legal-toc ol a{display:flex;gap:8px;padding:5px 0;color:var(--ink-2);font-size:var(--fs-s);line-height:1.4;text-decoration:none}
.legal-toc ol a:hover{color:var(--ink)}
.legal-toc .n{flex:none;min-width:1.5em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.legal-toc-contact{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-3)}
.legal-toc-contact a{color:var(--accent);overflow-wrap:anywhere}
@media (min-width:1024px){
  .legal-toc{position:sticky;top:calc(var(--nav-h) + 28px);max-height:calc(100vh - var(--nav-h) - 56px);overflow-y:auto;margin-left:-4px;padding:2px 4px;border:0;border-radius:0;background:none;overscroll-behavior:contain}
  .legal-toc ol{gap:0;border-left:1px solid var(--line)}
  .legal-toc ol a{margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;transition:color var(--d-2) ease,border-color var(--d-2) ease}
  .legal-toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--accent);font-weight:600}
  .legal-toc a[aria-current="true"] .n{color:var(--accent)}
}

/* ---------- legal: reading column ---------- */
.legal-doc{max-width:68ch;min-width:0}
.legal-doc>*+*{margin-top:1.1em}
.legal-doc p,.legal-doc li{color:var(--ink-2);font-size:var(--fs-body-l);line-height:1.75}
.legal-doc .legal-intro{font-size:var(--fs-lede);line-height:1.6;color:var(--ink)}
.legal-doc h2{display:flex;align-items:baseline;gap:14px;margin-top:2.6em;font-size:clamp(1.35rem,1.2rem + .6vw,1.65rem);line-height:1.25;letter-spacing:var(--tr-title);
  scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal-doc h2+*{margin-top:.8em}
.legal-doc h2 .n{flex:none;min-width:1.6em;color:var(--accent);font:700 .78em/1 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:0}
.legal-doc h3{margin-top:1.8em;font-size:1.15rem}
.legal-doc strong{color:var(--ink)}
.legal-doc a{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.2em}
.legal-doc a:hover{text-decoration-color:currentColor}
.legal-doc ul,.legal-doc ol{padding-left:1.25em}
.legal-doc code{padding:.08em .4em;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface-3);color:var(--ink);font-size:.86em;overflow-wrap:anywhere}

.legal-summary{margin-top:var(--space-7)!important;padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-1)}
.legal-summary h2{margin-top:0;font-size:var(--fs-micro);font-family:var(--font-sans);font-weight:650;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-3)}
.legal-ticks{list-style:none;display:grid;gap:var(--space-4);margin-top:var(--space-5)!important;padding:0!important}
.legal-ticks li{display:flex;align-items:flex-start;gap:14px;margin:0;font-size:var(--fs-body);line-height:1.6}
.legal-ticks svg{flex:none;width:22px;height:22px;margin-top:.1em;padding:4px;border-radius:50%;background:var(--ok-soft);color:var(--ok);stroke-width:2.6}

.legal-callout{padding:20px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-s);background:var(--surface-2)}
.legal-callout p{font-size:var(--fs-body);line-height:1.7}

.legal-end{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5);margin-top:var(--space-9)!important;padding-top:var(--space-6);border-top:1px solid var(--line)}
.legal-end img{width:40px;height:40px;border-radius:10px}
.legal-end p{flex:1;min-width:12rem;font-size:var(--fs-s);line-height:1.55;color:var(--ink-3)}
.legal-end .link-arrow{text-decoration:none}
@media print{.legal-toc{display:none}.legal-body{display:block}}

/* ---------- 404 ---------- */
.nf{display:grid;gap:var(--space-6) var(--space-8);align-items:center;grid-template-columns:minmax(0,1fr);padding-block:clamp(32px,6vw,104px) var(--space-8)}
.nf-copy{order:2;max-width:36rem}
.nf-art{order:1;position:relative;display:grid;place-items:end center;height:240px;isolation:isolate}
.nf h1{font-size:var(--fs-h1)}
.nf-lede{margin-top:var(--space-4);font-size:var(--fs-lede);line-height:1.55;color:var(--ink-2)}
.nf-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.nf-actions .btn-primary svg{width:18px;height:18px}
@media (max-width:479.98px){.nf-actions .btn{width:100%}}
.nf-links{margin-top:var(--space-8)}
.nf-links-title{margin-bottom:var(--space-3);font-size:var(--fs-micro);font-weight:650;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-3)}
.nf-links ul{list-style:none;border-top:1px solid var(--line)}
.nf-links a{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink-3);font-size:var(--fs-s);line-height:1.4;text-decoration:none}
.nf-links a>span:nth-child(2){flex:1;min-width:0}
.nf-links b{display:block;color:var(--ink);font-weight:600}
.nf-links a>svg{width:18px;height:18px;color:var(--ink-3);transition:transform var(--d-2) var(--ease-out),color var(--d-2) ease}
.nf-links a:hover b{color:var(--accent)}
.nf-links a:hover>svg{color:var(--accent);transform:translateX(3px)}
.nf-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-s);background:var(--accent-soft);color:var(--accent)}
.nf-ic svg{width:18px;height:18px}
.nf-num{position:absolute;z-index:-1;left:50%;bottom:-.06em;transform:translateX(-50%);font:800 clamp(8rem,5rem + 18vw,19rem)/.8 var(--font-display);letter-spacing:-.06em;
  color:var(--line-2);background:linear-gradient(to bottom,var(--line-2) 15%,transparent 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;user-select:none}
.nf-art img{width:86px;height:auto;transform:translateX(42px);filter:drop-shadow(0 16px 20px rgba(20,22,27,.16))}
.nf-bubble{position:absolute;top:8px;left:calc(50% - 176px);width:max-content;max-width:11.5rem;border-radius:var(--r-bubble-user);font-size:var(--fs-xs)}
@media (max-width:369.98px){.nf-bubble{left:0;max-width:calc(50% + 4px)}}
@media (min-width:960px){
  .nf{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:calc(100vh - var(--nav-h) - 80px)}
  .nf-copy{order:1}
  .nf-art{order:2;height:520px}
  .nf-art img{width:170px}
  .nf-art img{transform:none}
  .nf-bubble{top:40px;left:50%;transform:translateX(-118%);max-width:15rem;font-size:var(--fs-s)}
}