/* ============================================================
   LEGAL PAGES — Terms of Use, Refund Policy
   Shared layout: hero header + sticky TOC + readable article column.
   Reuses tokens.css + site.css (nav, footer, wrap, buttons).
   ============================================================ */

/* ---- Page header ---- */
.legal-hero {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  padding: 64px 0 52px;
}
.legal-hero .wrap { max-width: 1180px; }
.legal-crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
  margin-bottom: 22px;
}
.legal-crumb a { color: var(--text-faint); transition: color var(--dur-fast); }
.legal-crumb a:hover { color: var(--text); }
.legal-crumb .sep { opacity: 0.5; }
.legal-h {
  font-size: clamp(34px, 4.6vw, 56px);
  letter-spacing: -0.035em; line-height: 1.0; font-weight: 720;
  margin: 0 0 18px; max-width: 16ch;
}
.legal-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text-muted);
}
.legal-updated {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
  padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface);
}
.legal-updated .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal-related { display: inline-flex; gap: 8px; align-items: center; }
.legal-related a { color: var(--accent-text); font-weight: 560; }
.legal-related a:hover { text-decoration: underline; }

.legal-intro {
  margin-top: 22px; max-width: 60ch;
  font-size: 16.5px; color: var(--text-muted); line-height: 1.6;
}
.legal-intro + .legal-intro { margin-top: 12px; }

/* ---- Body layout ---- */
.legal-body { padding: 56px 0 96px; }
.legal-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
@media (max-width: 920px) {
  .legal-layout { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Sticky table of contents ---- */
.legal-toc { position: sticky; top: 92px; }
.legal-toc .toc-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.legal-toc li { margin: 0; }
.legal-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.4;
  border-left: 2px solid transparent; padding-left: 14px; margin-left: -2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.legal-toc a:hover { color: var(--text); }
.legal-toc a.active { color: var(--accent-text); border-left-color: var(--accent); font-weight: 560; }
.legal-toc a .tnum { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); flex: 0 0 auto; }
.legal-toc a.active .tnum { color: var(--accent-text); }
@media (max-width: 920px) {
  .legal-toc {
    position: static; margin-bottom: 28px; padding: 20px 22px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
  }
  .legal-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .legal-toc a { border-left: 0; padding-left: 0; margin-left: 0; }
  .legal-toc a.active { border-left: 0; }
}
@media (max-width: 560px) {
  .legal-toc ol { grid-template-columns: 1fr; }
}

/* ---- Article ---- */
.legal-article { max-width: 72ch; }
.legal-article section { scroll-margin-top: 92px; }
.legal-article section + section { margin-top: 44px; }
.legal-article h2 {
  font-size: 22px; font-weight: 660; letter-spacing: -0.02em; line-height: 1.2;
  margin: 0 0 16px; display: flex; gap: 12px; align-items: baseline;
}
.legal-article h2 .sn {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: var(--accent-text); flex: 0 0 auto;
}
.legal-article p {
  font-size: 16px; line-height: 1.65; color: var(--text-muted);
  margin: 0 0 14px; text-wrap: pretty;
}
.legal-article p:last-child { margin-bottom: 0; }
.legal-article strong, .legal-article b { color: var(--text); font-weight: 620; }
.legal-article ul {
  margin: 0 0 14px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.legal-article ul li {
  position: relative; padding-left: 22px;
  font-size: 16px; line-height: 1.6; color: var(--text-muted);
}
.legal-article ul li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 1.5px;
  background: var(--accent); transform: rotate(45deg);
}

/* lead paragraph inside a section */
.legal-article .lead { color: var(--text); font-weight: 500; font-size: 16.5px; }

/* callout for consumer-rights / statutory notes */
.legal-note {
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--r-md); padding: 16px 18px; margin: 4px 0 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.legal-note .ni {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-text);
}
.legal-note .ni svg { width: 18px; height: 18px; }
.legal-note p { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0; }
.legal-note p b { color: var(--text); }

/* contact / support card at the end */
.legal-contact {
  margin-top: 48px; padding: 28px 30px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-2);
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}
.legal-contact .lc-copy { flex: 1 1 320px; }
.legal-contact .lc-t { font-size: 17px; font-weight: 640; letter-spacing: -0.015em; margin-bottom: 6px; }
.legal-contact .lc-d { font-size: 14px; color: var(--text-muted); line-height: 1.55; }

/* Explanatory panel with a heading and (usually) actions — download.html's Windows
   warning, buy.html's "if you have not installed Mailroom yet".

   This class was in the markup on both pages but had NO definition anywhere, so both
   panels rendered as undifferentiated body copy. That was survivable when the content
   was a nudge; it is not for download.html, where the panel is the SmartScreen warning
   a visitor needs to read before they click the button above it. Defining it here fixes
   both, and matches the card idiom the rest of the site already uses. */
.legal-callout {
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--r-lg); padding: 22px 24px; margin: 24px 0 28px;
}
.legal-callout > h2 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 12px; }
.legal-callout p { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; }
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout p b { color: var(--text); }
/* Amber variant for a panel the reader should not skim past. Body copy stays on --text
   rather than --warn-text: the tint is the signal, and --text on --warn-soft is the
   highest-contrast pairing available, so the emphasis costs no legibility. */
.legal-callout.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.legal-callout.warn p { color: var(--text); }

/* back-to-top */
.legal-top {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.legal-top .lt-where { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.legal-top a { font-size: 13.5px; color: var(--text-muted); }
.legal-top a:hover { color: var(--text); }