/* =========================================================
   Legal documents (privacy.html).

   Loaded ON TOP OF css/styles.css, which owns the palette,
   the fonts, the top bar, the footer and the glass panels.
   Nothing here is used by index.html, so this file stays out
   of the home page's critical path.
   ========================================================= */

/* ---------- document head ---------- */
.legal-hero{padding:62px 0 8px}
@media(max-width:600px){.legal-hero{padding:40px 0 4px}}
.legal-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);margin:10px 0 16px;max-width:20ch}
.legal-meta{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.legal-meta span{display:inline-flex;align-items:center;gap:8px}
.legal-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay-soft)}

/* ---------- plain-language summary ---------- */
.legal-summary{max-width:74ch;margin:34px 0 0;border-radius:24px;padding:28px 32px;font-size:1.02rem;color:var(--ink);
  background:linear-gradient(157deg,rgba(255,255,255,.66),rgba(255,255,255,.26));
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.72);box-shadow:0 16px 42px rgba(43,58,71,.1),inset 0 1px 0 rgba(255,255,255,.9)}
.legal-summary .eyebrow{display:block;margin-bottom:10px}
@media(max-width:600px){.legal-summary{padding:22px 22px;font-size:.98rem}}

/* ---------- body ---------- */
.legal-body{max-width:74ch;padding:14px 0 26px}
.legal-section{padding-top:38px}
.legal-section h2{font-family:'Varela Round',sans-serif;font-weight:700;font-size:1.16rem;line-height:1.35;
  color:var(--ink);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.legal-section p{color:var(--ink-soft);margin-bottom:14px}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul{list-style:none;margin:0 0 16px;padding:0}
.legal-section li{position:relative;padding-left:22px;margin-bottom:10px;color:var(--ink-soft)}
.legal-section li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--clay-soft)}

/* a lead-in line that introduces the bullets under it */
.legal-section p.lead-in{color:var(--ink);font-weight:600;margin-bottom:8px}

/* the points a reader must not skim past */
.legal-section .callout{border-radius:18px;padding:18px 22px;margin:18px 0;color:var(--ink);
  background:rgba(207,230,196,.34);border:1px solid rgba(63,157,120,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* email links in the body: the site's accent, never the browser's blue */
.legal-body a,.legal-summary a{color:var(--clay);text-decoration:none;
  border-bottom:1px solid var(--blush);word-break:break-word}
.legal-body a:hover,.legal-summary a:hover{border-color:var(--clay)}

/* address / contact blocks, where the line breaks are meaningful */
.legal-section .addr{white-space:pre-line;color:var(--ink);font-weight:600}

/* ---------- operator placeholders ----------
   Mirrors LegalContact.isConfigured in the app: an unfilled detail must be
   impossible to miss rather than quietly shipped. Replace every token, then
   this rule matches nothing. */
.todo{background:#ffe9a8;border-bottom:2px solid #e0a800;padding:0 4px;border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;font-weight:700;color:#6b4e00}

/* ---------- back link ---------- */
.legal-back{display:inline-block;margin-top:34px;font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--blush);padding-bottom:1px}
.legal-back:hover{color:var(--clay);border-color:var(--clay)}