/* ──────────────────────────────────────────────────────────────
   MUNI — shared styles for legal / support sub-pages
   (Terms, Privacy, Refund, Contact). Mirrors the brand tokens and
   light/dark behaviour of index.html, but trimmed to a readable
   long-form "prose" layout. Light by default; dark opt-in via
   html.dark (persisted to localStorage 'muni-theme' — same key as
   the home page, so the theme follows the visitor across pages).
   ────────────────────────────────────────────────────────────── */
:root{
  --ink:#1d1d1f;
  --paper:#ffffff;
  --mist:#f5f5f7;
  --gray:#86868b;
  --gray2:#6e6e73;
  --hair:#d2d2d7;
  --accent:#0a6ed1;
  --cream:#F8F4EC;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Outfit",var(--font);
  color-scheme:light;
}
html.dark{
  --ink:#f5f5f7;
  --paper:#0b0b0d;
  --mist:#151517;
  --gray:#86868b;
  --gray2:#a1a1a8;
  --hair:#2a2a2e;
  --accent:#5fa3e8;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Always show the vertical scrollbar track so pages that scroll and pages
   that don't have identical content width — keeps the footer/layout from
   shifting between pages on navigation. */
html{-webkit-text-size-adjust:100%;overflow-y:scroll;scrollbar-gutter:stable}
body{
  background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .35s ease,color .35s ease;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:760px;margin:0 auto;padding:0 24px}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;
}

/* ── nav (brand + back + theme toggle) ──────────────────── */
nav{
  position:sticky;top:0;z-index:80;height:52px;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);
  transition:background .35s ease,border-color .35s ease;
}
html.dark nav{background:rgba(11,11,13,.72);border-bottom-color:rgba(255,255,255,.08)}
nav .inner{max-width:980px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .mark{width:26px;height:26px;color:var(--ink)}
.navright{display:flex;align-items:center;gap:20px}
.backlink{font-size:14px;color:var(--gray2)}
.themetoggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:980px;border:1px solid var(--hair);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.themetoggle:hover{color:var(--accent);border-color:var(--accent)}
.themetoggle svg{width:16px;height:16px}
.ic-sun{display:none}
html.dark .ic-sun{display:inline-block}
html.dark .ic-moon{display:none}

/* ── long-form content ──────────────────────────────────── */
main{padding:72px 0 96px;flex:1 0 auto}
.doc h1{font-family:var(--display);font-size:clamp(34px,6vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:12px}
.doc .updated{font-size:14px;color:var(--gray);margin-bottom:8px}
.doc .lede{font-size:19px;color:var(--gray2);line-height:1.55;margin:18px 0 8px}
.doc h2{font-family:var(--display);font-size:clamp(22px,3.4vw,28px);font-weight:600;letter-spacing:-.02em;margin:48px 0 14px;line-height:1.2}
.doc h3{font-size:19px;font-weight:600;margin:28px 0 10px}
.doc p{margin:0 0 16px;color:var(--ink)}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{margin:0 0 9px;line-height:1.55}
.doc .muted{color:var(--gray2);font-size:15px}
.doc strong{font-weight:600}

/* clearly-flagged placeholder tokens (e.g. [[LEGAL_NAME]]) the
   seller must fill in before going live — visually marked so they
   are impossible to miss in review. */
.ph{background:rgba(10,110,209,.10);color:var(--accent);font-weight:600;border-radius:5px;padding:1px 6px;font-size:.95em;white-space:nowrap}
html.dark .ph{background:rgba(95,163,232,.16)}

/* ── footer (shared with home) — single thin row ────────── */
footer{background:var(--mist);border-top:1px solid var(--hair);font-size:13px;color:var(--gray);line-height:1.5}
footer .wrap{padding:22px 24px;max-width:1100px;margin:0 auto}
/* Two rows: brand + links on top, trademark + copyright below. */
footer .ftop{display:flex;justify-content:space-between;align-items:center;gap:10px 28px;flex-wrap:wrap}
footer .fbot{display:flex;justify-content:space-between;align-items:baseline;gap:6px 28px;flex-wrap:wrap;margin-top:12px}
footer .brand{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:600}
footer .brand .mark{width:20px;height:20px}
/* Subtle legal links — reset the global sticky-nav styling that leaks onto
   this <nav>, then style them quietly. */
footer .legal-links{position:static;height:auto;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap}
footer .legal-links a{font-size:12.5px;color:var(--gray);font-weight:400;transition:color .2s}
footer .legal-links a:hover{color:var(--accent)}
footer .copy{font-size:12.5px;color:var(--gray);white-space:nowrap}
footer .seller{margin:0;font-size:11px;color:var(--gray);opacity:.8}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important}
}