/* ==========================================================================
   signmog.com: the landing page, privacy, terms and 404.
   Every color, font, radius, shadow and easing comes from src/tokens.css.
   Two themes: stage (dark, default) and daylight, set by data-theme on <html>.
   Mobile first: 16 px side gutters, tap targets of 44 px or more, no
   horizontal scroll at 320 px. One teal primary button per screen (the one in
   the sticky top bar), dark text on teal, never white. Serif for the wordmark
   and headlines, Inter for everything you read, JetBrains Mono for glosses.
   ========================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--text); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 12px 16px; border-radius: var(--radius-xs); background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { left: 8px; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 720px) { .wrap { padding-left: 28px; padding-right: 28px; } }

/* ---------- type ---------- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(46px, 13vw, 96px); line-height: 0.98; }
h1 em, h2 em { font-style: italic; }
.h-line { display: block; }
h2 { font-size: clamp(36px, 6.4vw, 58px); }
h3 { font: 600 18px/1.3 var(--font-ui); letter-spacing: -0.005em; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font: 600 12.5px/1.2 var(--font-ui);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
}
.live-mark { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lede { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 50ch; }
.section-lede { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 58ch; }
.section-lede a { color: var(--text); }
.mono { font-family: var(--font-mono); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: 600 16px/1.1 var(--font-ui);
  text-align: center; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
/* the one teal button per screen: dark ink on teal, never white */
.btn-primary { background: var(--accent-grad); color: var(--accent-ink); box-shadow: 0 12px 26px -12px var(--glow); }
.btn-ink { background: var(--text); color: var(--bg); }
.btn-secondary { background: var(--surface-solid); color: var(--text); border-color: var(--border-strong); }
@media (hover: hover) {
  .btn-primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }
  .btn-ink:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
  .btn-secondary:hover { border-color: var(--text-3); transform: translateY(-1px); }
}
.btn:active { transform: scale(0.98); }
.btn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 559px) { .cta-row .btn { width: 100%; } }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(var(--glass-blur));
  backdrop-filter: saturate(1.3) blur(var(--glass-blur));
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out);
}
.topbar.is-scrolled { border-bottom-color: var(--border); }
.topbar-inner { display: flex; align-items: center; gap: 8px; height: 64px; }
.wordmark {
  display: inline-flex; align-items: baseline; margin-right: auto; padding: 7px 0;
  font: italic 400 28px/1 var(--font-display); letter-spacing: var(--display-tracking);
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.wordmark-dot { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.06em; border-radius: 50%; background: var(--accent); }
.nav-links { list-style: none; margin: 0; padding: 0; display: none; }
.nav-links a { text-decoration: none; }
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--text); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .icon-btn:hover { border-color: var(--text-3); } }
.icon-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* theme toggle: a sun in stage (go light), a moon in daylight (go dark) */
.theme-btn .i-moon { display: none; }
[data-theme="daylight"] .theme-btn .i-sun { display: none; }
[data-theme="daylight"] .theme-btn .i-moon { display: inline; }
html:not(.js) .theme-btn { display: none; }
.menu-btn .menu-close, .topbar.nav-open .menu-btn .menu-open { display: none; }
.topbar.nav-open .menu-btn .menu-close { display: inline; }
.topbar.nav-open .nav-links {
  display: flex; flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 6px max(16px, env(safe-area-inset-left)) 18px;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
.topbar.nav-open .nav-links a {
  display: flex; align-items: center; min-height: 52px;
  font-size: 18px; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.topbar.nav-open .nav-links li:last-child a { border-bottom: 0; }
.topbar-cta .long { display: none; }
@media (min-width: 380px) { .topbar-cta .long { display: inline; } }
@media (max-width: 359px) { .wordmark { font-size: 25px; } .topbar-cta.btn-sm { padding: 0 14px; } }
/* no script: the links wrap onto a second row instead of a menu */
html:not(.js) .menu-btn { display: none; }
html:not(.js) .topbar-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; }
html:not(.js) .nav { order: 3; width: 100%; }
html:not(.js) .nav-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
html:not(.js) .nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
@media (min-width: 960px) {
  .menu-btn { display: none; }
  .nav-links, html:not(.js) .nav-links { display: flex; gap: 2px; margin-right: 8px; }
  html:not(.js) .topbar-inner { flex-wrap: nowrap; height: 64px; padding-top: 0; padding-bottom: 0; }
  html:not(.js) .nav { order: 0; width: auto; }
  .nav-links a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 500; color: var(--text-2);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .nav-links a:hover { color: var(--text); background: var(--surface); }
  .nav-links a[aria-current="page"] { color: var(--text); }
  .topbar-inner { gap: 10px; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: 28px 0 64px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 78% 20%, var(--accent-soft), transparent 70%);
  opacity: 0.8;
}
.hero-grid { position: relative; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.hero-copy { padding-top: 8px; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-note { margin-top: 16px; font-size: 14.5px; color: var(--text-2); }
.hero-frame { position: relative; min-width: 0; }
@media (min-width: 960px) {
  .hero { padding: 48px 0 96px; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: 56px; align-items: center; }
  .hero-copy h1 { font-size: clamp(68px, 6.6vw, 96px); }
}

/* The live 3D preview mounts inside #hero-stage later (the app adds its canvas).
   While the div is empty it shows a quiet stage: the floor ring and a ghost of the bust. */
.hero-stage {
  position: relative;
  height: clamp(320px, 92vw, 540px);
  border-radius: var(--radius-l);
  overflow: hidden;
  isolation: isolate;
  background: var(--stage-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
@media (min-width: 720px) { .hero-stage { height: clamp(380px, 56vh, 560px); } }
.hero-stage > * { position: relative; z-index: 1; }
.hero-stage > canvas { display: block; width: 100%; height: 100%; }
.hero-stage:empty::before {
  content: ""; position: absolute; left: 50%; bottom: 9%;
  width: 64%; aspect-ratio: 3.4;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--stage-floor);
  border: 1.5px solid var(--accent-soft);
}
.hero-stage:empty::after {
  content: ""; position: absolute; left: 50%; bottom: 13%;
  width: min(62%, 300px); aspect-ratio: 1;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 30%, var(--surface-2) 0 15%, transparent 15.5%),
    radial-gradient(ellipse 46% 34% at 50% 100%, var(--surface-2) 0 98%, transparent 100%);
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-stage:empty::before { animation: sm-breathe 2.4s var(--ease-in-out) infinite alternate; }
}
@keyframes sm-breathe { from { opacity: 0.55; transform: translateX(-50%) scale(0.95); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.hero-cap { margin-top: 12px; font-size: 14px; color: var(--text-2); }

/* a gloss line: the English, then the ASL gloss in mono, the sign on the hands now lit in amber */
.gloss-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--border);
}
.gloss-en { font-size: 15px; color: var(--text-2); }
.gloss-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gloss-tokens li {
  padding: 5px 9px; border-radius: var(--radius-xs);
  font: 500 13.5px/1.2 var(--font-mono); letter-spacing: 0.04em;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
}
.gloss-tokens li.is-now { background: var(--live-word); color: var(--live-word-ink); border-color: transparent; }

/* ---------- sections ---------- */
.section { position: relative; padding: 72px 0; }
@media (min-width: 960px) { .section { padding: 104px 0; } }
.band { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .section-lede { margin-left: auto; margin-right: auto; }

/* how it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.step-card {
  display: grid; gap: 14px; align-content: start;
  padding: 22px;
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.step-art {
  display: grid; place-items: center;
  height: 132px; border-radius: var(--radius-m);
  background: var(--stage-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.step-art svg { width: 100%; height: 100%; max-width: 240px; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-num {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  font: 400 21px/1 var(--font-display);
  color: var(--text); border: 1px solid var(--border-strong); background: var(--surface);
}
.step-card > p { color: var(--text-2); }

/* small illustrations: line art in the text color, teal only for the shirt and the live dot */
.ill { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ill .solid { fill: currentColor; stroke: none; }
.ill .soft { stroke: var(--text-3); }
.ill .panel { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
.ill .shirt { fill: var(--accent); stroke: none; }
.ill .live { fill: var(--accent); stroke: none; }
.ill .amber { fill: var(--live-word); stroke: none; }
.ill .amber-ink { fill: var(--live-word-ink); stroke: none; }
.ill .floor { fill: var(--stage-floor); stroke: none; }
.ill text { stroke: none; fill: var(--text); font: 500 12px var(--font-mono); letter-spacing: 0.04em; }
.ill text.ui { font: 500 12px var(--font-ui); letter-spacing: 0; fill: var(--text-2); }
.ill text.strong { font-weight: 600; fill: var(--text); }
.ill text.amber-ink { fill: var(--live-word-ink); }
.ill .face { fill: var(--surface-2); }
.ill .stage-box { fill: var(--bg); stroke: var(--border); stroke-width: 1.5; }
.ill .cap-bg { fill: var(--text); stroke: none; }
.ill text.cap-text { fill: var(--bg); font: 500 13px var(--font-ui); letter-spacing: 0; }
.ill text.brand { fill: var(--text); font: italic 400 17px var(--font-display); letter-spacing: -0.01em; }

/* features */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.feature {
  display: grid; gap: 10px; align-content: start;
  padding: 22px;
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--border);
}
.feature-icon {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 4px;
  border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text);
}
.feature-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature p { color: var(--text-2); }
.feature .tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font: 600 11.5px/1.5 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--border-strong); vertical-align: 2px; }

/* the twins */
.twins { display: grid; gap: 16px; }
@media (min-width: 760px) { .twins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.twin {
  display: grid; align-content: start;
  border-radius: var(--radius-l); overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.twin-art { background: var(--stage-bg); border-bottom: 1px solid var(--border); color: var(--text); }
.twin-art svg { width: 100%; height: auto; max-height: 300px; margin: 0 auto; }
.twin-art .t-face { fill: var(--surface-2); stroke: currentColor; stroke-width: 3; }
.twin-art .t-hair, .twin-art .t-hand, .twin-art .t-eye { fill: currentColor; stroke: none; }
.twin-art .t-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.twin-art .t-line.thin { stroke-width: 2.4; }
.twin-art .t-arm { fill: none; stroke: currentColor; stroke-width: 13; stroke-linecap: round; }
.twin-art .t-sleeve { fill: none; stroke: var(--accent); stroke-width: 22; stroke-linecap: round; }
.twin-art .t-shirt { fill: var(--accent); }
.twin-art .t-word { fill: var(--accent-ink); font: italic 400 19px var(--font-display); letter-spacing: -0.01em; }
.twin-art .t-floor { fill: var(--stage-floor); }
.twin-body { display: grid; gap: 8px; padding: 22px 22px 26px; }
.twin-name { font: 400 44px/1 var(--font-display); letter-spacing: var(--display-tracking); }
.twin-meta { font-size: 14.5px; color: var(--text-2); }
.twin-quote {
  margin-top: 8px; padding-left: 14px;
  border-left: 3px solid var(--accent);
  font: italic 400 26px/1.2 var(--font-display); letter-spacing: var(--display-tracking);
  color: var(--text);
}
.twins-note { margin-top: 22px; color: var(--text-2); max-width: 64ch; }

/* ticks */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 32px; color: var(--text-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--border);
}
.ticks li::after {
  content: ""; position: absolute; left: 7px; top: 7px;
  width: 8px; height: 5px;
  border-left: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(-45deg);
}
.ticks b { color: var(--text); font-weight: 600; }

/* the Chrome extension */
.ext-grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .ext-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } }
.ext-copy .ticks { margin-top: 24px; }
.ext-art {
  padding: 14px;
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  color: var(--text);
}
.ext-art svg { width: 100%; height: auto; }
.install {
  margin-top: 28px; padding: 20px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  scroll-margin-top: 92px;
}
.install h3 { margin-bottom: 8px; }
.install p { color: var(--text-2); }
.install ol { margin: 12px 0 14px; padding-left: 22px; color: var(--text-2); display: grid; gap: 8px; }
.install code { font: 500 14px/1.4 var(--font-mono); color: var(--text); background: var(--surface-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.install a { color: var(--text); }
.install:target { border-color: var(--accent); box-shadow: var(--shadow-glow); }

/* plans */
.plans { display: grid; gap: 16px; align-items: stretch; max-width: 900px; margin: 0 auto; }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 22px 24px;
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.plan .btn { margin-top: auto; width: 100%; }
.plan-name { font: 400 40px/1.05 var(--font-display); letter-spacing: var(--display-tracking); }
.plan-for { color: var(--text-2); }
.plan-badge {
  align-self: flex-start;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font: 600 12px/1.4 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong);
}
.checks { list-style: none; margin: 0 0 8px; padding: 14px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--border); }
.checks li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--text-2); }
.checks li::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.plan-soon .checks li::before { border-color: var(--text-3); }
.fine { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--text-2); text-align: center; }

/* the honest note */
.honest {
  max-width: 860px; margin: 0 auto;
  padding: 26px 22px;
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--warn);
  box-shadow: var(--shadow-1);
}
@media (min-width: 720px) { .honest { padding: 36px 40px; } }
.honest h2 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 16px; }
.honest .ticks { margin-top: 20px; }
.honest .ticks li::before { background: var(--surface-2); }
.honest-sign { margin-top: 22px; color: var(--text-2); }
.honest-sign a { color: var(--text); }

/* FAQ */
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; } }
.qa { border-top: 1px solid var(--border-strong); }
.qa:last-child { border-bottom: 1px solid var(--border-strong); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 14px 0;
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 18px; line-height: 1.35; }
.qa summary::after {
  content: ""; flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur-med) var(--ease-out);
}
.qa[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.qa p { padding: 0 0 24px; max-width: 66ch; color: var(--text-2); font-size: 16.5px; line-height: 1.62; }
.qa p a { color: var(--text); }

/* ---------- footer ---------- */
.footer { padding: 56px 0 28px; background: var(--bg-2); border-top: 1px solid var(--border); color: var(--text-2); font-size: 15px; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; } }
.footer-brand { display: grid; gap: 10px; align-content: start; justify-items: start; max-width: 42ch; }
.footer-brand .wordmark { margin: 0; }
.footer-note { padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 640px) { .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-h { margin: 0 0 4px; font: 600 12.5px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-base { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.footer-base p { max-width: 90ch; }
.footer > .footer-base:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.footer-base a { color: var(--text-2); }
.footer a.wordmark { color: var(--text); }

/* ---------- legal pages ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: 32px 0 64px; }
.legal h1 { font-size: clamp(42px, 8vw, 68px); margin-bottom: 14px; }
.legal .meta { margin: 0 0 28px; font-size: 14px; color: var(--text-2); }
.legal h2 { font-size: clamp(28px, 4vw, 36px); line-height: 1.12; margin: 44px 0 12px; scroll-margin-top: 92px; }
.legal h3 { font-size: 17.5px; margin: 24px 0 8px; scroll-margin-top: 92px; }
.legal p, .legal li { color: var(--text-2); line-height: 1.66; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 14px; }
.legal li { margin-bottom: 8px; }
.legal b, .legal strong { color: var(--text); }
.legal a { color: var(--text); text-decoration: underline; overflow-wrap: anywhere; }
.legal .summary { padding: 22px 22px 10px; border-radius: var(--radius-l); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.legal .summary h2 { margin: 0 0 12px; font-size: 26px; }
.legal .safety-line { margin: 0 0 18px; padding: 16px 18px; border-radius: var(--radius-m); background: var(--surface-solid); border: 1px solid var(--border-strong); border-left: 4px solid var(--warn); color: var(--text); font-weight: 500; }
.toc { margin: 26px 0 8px; padding: 18px 20px; border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); }
.toc > p { margin: 0 0 10px; font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.toc ol { margin: 0; padding-left: 22px; }
@media (min-width: 640px) { .toc ol { columns: 2; column-gap: 28px; } }
.toc li { margin: 0; break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; }
.table-wrap { margin: 0 0 16px; overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--border); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-wrap th, .table-wrap td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--text-2); line-height: 1.55; }
.table-wrap th { color: var(--text); font-weight: 600; background: var(--surface); }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td:first-child { color: var(--text); font-weight: 500; }
/* phones: rows become cards so nothing scrolls sideways */
@media (max-width: 639px) {
  .table-wrap { border: 0; overflow: visible; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap tr { margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
  .table-wrap td { border-bottom: 1px solid var(--border); }
  .table-wrap td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 11.5px/1.4 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
}

/* ---------- 404 ---------- */
.err { display: grid; justify-items: start; gap: 16px; padding-top: 48px; padding-bottom: 96px; max-width: 760px; }
.err-mark { width: 88px; height: 88px; border-radius: 20px; }
.err h1 { font-size: clamp(44px, 9vw, 72px); }
.err .cta-row { margin-top: 12px; }
.fine-ui { font-size: 14px; color: var(--text-2); }
.fine-ui a { color: var(--text); }