/* Pouncer marketing site — single stylesheet, no external dependencies. */

:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --surface-alt: #f3f1ec;
  --text: #16181d;
  --muted: #5a6071;
  --line: #e2ded5;
  --deep: #141a2e;
  --deep-soft: #253052;
  --accent: #e0992f;
  --accent-strong: #b8761a;
  --on-deep: #f4f2ee;
  --on-deep-muted: #b6bccd;
  --radius: 14px;
  --wrap: 1120px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1017;
    --surface: #151a24;
    --surface-alt: #1b2230;
    --text: #edeff4;
    --muted: #a0a8ba;
    --line: #262e3d;
    --deep: #0a0d16;
    --deep-soft: #1a2237;
    --accent: #f0ac44;
    --accent-strong: #f5c274;
    --on-deep: #edeff4;
    --on-deep-muted: #9aa3b6;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* A display rule must never resurrect a [hidden] element — the WhatsApp card
   stays hidden until a number is configured. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 5.8vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { line-height: 1.25; letter-spacing: -0.005em; margin: 0 0 .5em;
     font-size: 1.1rem; font-weight: 650; }
p { margin: 0 0 1rem; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 760px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #16181d; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 62px;
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: 0.06em; font-size: 1.18rem;
  text-decoration: none; margin-right: auto;
}
.brand-word { line-height: 1; }

.site-nav { display: flex; align-items: center; gap: 22px; font-size: .95rem; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover { color: var(--text); }
.site-nav .nav-cta {
  color: var(--text); font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.site-nav .nav-cta:hover { border-color: var(--accent); }

.nav-toggle {
  display: none; width: 42px; height: 38px;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: inherit; cursor: pointer; position: relative;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px;
  background: currentColor; content: "";
}
.nav-toggle-bar { top: 50%; margin-top: -1px; }
.nav-toggle-bar::before { top: -6px; left: 0; margin-left: 0; }
.nav-toggle-bar::after { top: 6px; left: 0; margin-left: 0; }

@media (max-width: 820px) {
  .nav-toggle { display: block; order: 3; }
  .site-nav {
    order: 4; display: none; width: 100%;
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 6px 0 16px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 8px 0; width: 100%; }
  .header-inner { flex-wrap: wrap; }
}

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(900px 420px at 78% 8%, var(--deep-soft), transparent 70%),
    var(--deep);
  color: var(--on-deep);
  padding: clamp(60px, 9vw, 124px) 0 clamp(68px, 10vw, 132px);
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 5vw, 56px); align-items: center;
}

.eyebrow {
  text-transform: uppercase; letter-spacing: .2em; font-size: .72rem;
  font-weight: 700; color: var(--accent); margin-bottom: 20px;
}

.hero h1 { color: var(--on-deep); max-width: 15ch; }

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--on-deep-muted); max-width: 52ch; margin-bottom: 28px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

.hero-note { font-size: .88rem; color: var(--on-deep-muted); margin: 0; }
.hero-note a { color: var(--accent); }

.hero-art { justify-self: center; }

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  font-weight: 650; font-size: .97rem; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #16181d; }
.btn-primary:hover { background: var(--accent-strong); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.28); color: var(--on-deep); }
.btn-ghost:hover { border-color: var(--accent); }

/* ---------- sections ---------- */

.section { padding: clamp(56px, 8.5vw, 116px) 0; }
/* Clear the sticky header when an anchor link lands on a section. */
.section, .hero { scroll-margin-top: 72px; }
.section-lede { color: var(--muted); max-width: 60ch; font-size: 1.07rem; line-height: 1.7; }
.section-problem, .section-updates { background: var(--surface-alt); }

/* problem comparison */

.compare {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 32px;
}
.compare-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.compare-card p { color: var(--muted); margin: 0; font-size: .96rem; }
.compare-card-ours { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.compare-card-ours h3 { color: var(--accent-strong); }

/* steps */

.steps {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px;
}
.step { position: relative; padding-top: 12px; border-top: 2px solid var(--line); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #16181d;
  font-size: .85rem; font-weight: 700; margin-bottom: 10px;
}
.step p { color: var(--muted); font-size: .95rem; margin: 0; }

.callout {
  margin-top: 34px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 10px;
  color: var(--muted); font-size: .97rem;
}
.callout strong { color: var(--text); }

/* pillars */

.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px; margin-top: 28px;
}
.pillar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.pillar p { color: var(--muted); margin: 0; font-size: .96rem; }

/* status */

.status-list { list-style: none; margin: 30px 0 0; padding: 0; }
.status-list li {
  display: grid; grid-template-columns: 160px 1fr; gap: 18px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.status-list li:last-child { border-bottom: 1px solid var(--line); }
.status-list p { margin: 0; color: var(--muted); font-size: .96rem; }

.status-tag {
  align-self: start; display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--line); white-space: nowrap;
}
.status-tag-done { background: var(--accent); color: #16181d; border-color: transparent; }
.status-tag-wip { color: var(--accent-strong); border-color: var(--accent); }
.status-tag-open { color: var(--muted); }

@media (max-width: 620px) {
  .status-list li { grid-template-columns: 1fr; gap: 8px; }
}

.fineprint { color: var(--muted); font-size: .86rem; margin-top: 22px; }

/* signup */

.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.signup input {
  flex: 1 1 260px; min-width: 0;
  padding: 12px 16px; font: inherit; font-size: .97rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
}
.signup input::placeholder { color: var(--muted); }
.form-status { flex-basis: 100%; margin: 4px 0 0; font-size: .9rem; min-height: 1.4em; }
.form-status.is-error { color: var(--accent-strong); }

/* faq */

.section-faq details {
  border-bottom: 1px solid var(--line); padding: 16px 0;
}
.section-faq summary {
  cursor: pointer; font-weight: 650; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.section-faq summary::-webkit-details-marker { display: none; }
.section-faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.section-faq details[open] summary::after { content: "–"; }
.section-faq details p { color: var(--muted); margin: 12px 0 0; font-size: .96rem; max-width: 66ch; }

/* footer */

.site-footer {
  background: var(--deep); color: var(--on-deep);
  padding: 40px 0; margin-top: 0;
}
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; align-items: start; }
.footer-brand { font-weight: 700; font-size: 1.1rem; margin: 0; }
.footer-tag { color: var(--on-deep-muted); margin: 2px 0 0; font-size: .92rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: .92rem; }
.footer-links a { color: var(--on-deep-muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
.footer-legal {
  grid-column: 1 / -1; margin: 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: var(--on-deep-muted); font-size: .82rem;
}

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---------- conservation section ---------- */

.section-why { background: var(--surface-alt); }

/* Visualization tokens. Categorical slots 1-3 of the reference palette,
   validated for both surfaces; the dark column is the same hues re-stepped
   for the dark surface, not an automatic flip. */
.viz-root {
  --surface-1: #ffffff;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    --surface-1: #151a24;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
  }
}
:root[data-theme="dark"] .viz-root {
  --surface-1: #151a24;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
}

.viz {
  margin: 32px 0 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.viz-title {
  font-weight: 650; font-size: 1rem; color: var(--text);
  margin-bottom: 16px;
}

/* Stacked bar: 2px surface gap between segments, 4px rounded ends. */
.bar { display: flex; gap: 2px; height: 46px; }
.bar-seg { display: block; min-width: 4px; }
.bar-seg:first-child { border-radius: 4px 0 0 4px; }
.bar-seg:last-child { border-radius: 0 4px 4px 0; }
.bar-seg-1 { background: var(--series-1); }
.bar-seg-2 { background: var(--series-2); }
.bar-seg-3 { background: var(--series-3); }

.viz-key {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 20px;
}
.viz-key li {
  display: grid; grid-template-columns: 12px auto 1fr; gap: 4px 8px; align-items: center;
}
.swatch { width: 12px; height: 12px; border-radius: 3px; }
.swatch-1 { background: var(--series-1); }
.swatch-2 { background: var(--series-2); }
.swatch-3 { background: var(--series-3); }
.key-name { font-weight: 600; font-size: .95rem; }
.key-value { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem; }
.key-note { grid-column: 2 / -1; color: var(--muted); font-size: .85rem; }

.viz-note { margin: 18px 0 0; color: var(--muted); font-size: .84rem; }

.why-notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px; margin-top: 26px;
}
.note-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.note-card p { color: var(--muted); margin: 0; font-size: .96rem; }

/* ---------- evidence section ---------- */

.table-scroll { overflow-x: auto; margin-top: 30px; }

.evidence-table {
  width: 100%; border-collapse: collapse; min-width: 480px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.evidence-table th, .evidence-table td {
  text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-size: .96rem; vertical-align: top;
}
.evidence-table thead th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700;
}
.evidence-table tbody th { font-weight: 600; }
.evidence-table tbody tr:last-child th,
.evidence-table tbody tr:last-child td { border-bottom: 0; }
.evidence-table td { color: var(--muted); }

/* Diverging pair for "change in prey brought home": two hues either side of a
   neutral zero, never red/green — the ink steps clear 4.5:1 for text, the mark
   steps clear 3:1 against the surface. */
.evidence-table {
  --dv-down: #2a78d6;  --dv-down-ink: #1f5ca8;
  --dv-up:   #eb6834;  --dv-up-ink:   #c14a1c;
  --dv-zero: #b0aa9e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .evidence-table {
    --dv-down: #3987e5;  --dv-down-ink: #7fb0f0;
    --dv-up:   #d95926;  --dv-up-ink:   #f0865a;
    --dv-zero: #59637a;
  }
}
:root[data-theme="dark"] .evidence-table {
  --dv-down: #3987e5;  --dv-down-ink: #7fb0f0;
  --dv-up:   #d95926;  --dv-up-ink:   #f0865a;
  --dv-zero: #59637a;
}

.delta { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.delta-down { color: var(--dv-down-ink); }
.delta-up { color: var(--dv-up-ink); }
.delta-flat { color: var(--muted); font-weight: 650; }

/* Diverging bar: zero is the centre, data-ends round away from it. */
.dbar {
  position: relative; height: 9px; margin: 0 0 9px;
  background: var(--surface-alt); border-radius: 5px; min-width: 170px;
}
.dbar::before {
  content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px;
  width: 1px; background: var(--dv-zero);
}
.dbar-fill { position: absolute; top: 0; bottom: 0; }
.dbar-neg { right: 50%; background: var(--dv-down); border-radius: 4px 0 0 4px; }
.dbar-pos { left: 50%; background: var(--dv-up); border-radius: 0 4px 4px 0; }
.dbar-zero {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--muted);
}

.viz-note-table { margin-top: 14px; }

.verdict {
  margin-top: 32px; padding: 26px;
  background: var(--surface); border: 1px solid var(--accent);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
}
.verdict h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; }
.verdict p { color: var(--muted); font-size: .97rem; }
.verdict p:last-child { margin-bottom: 0; }
.verdict-foot { padding-top: 14px; border-top: 1px solid var(--line); color: var(--text) !important; }

/* ---------- sources ---------- */

.section-sources { padding-top: 0; }
.sources-heading {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700;
}
.sources { list-style: none; margin: 0; padding: 0; }
.sources li {
  color: var(--muted); font-size: .86rem; line-height: 1.6;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.sources a { color: var(--text); }

/* ---------- reserve page ---------- */

.hero-slim { padding: clamp(40px, 6vw, 72px) 0; }
.hero-slim h1 { max-width: 20ch; }
.hero-slim .lede { margin-bottom: 0; }

.promise {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.promise-col {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.promise-title { font-size: 1.05rem; margin-bottom: 14px; }

.ticks, .crosses { list-style: none; margin: 0; padding: 0; }
.ticks li, .crosses li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  color: var(--muted); font-size: .95rem;
}
.ticks li:last-child, .crosses li:last-child { margin-bottom: 0; }
.ticks li::before, .crosses li::before {
  position: absolute; left: 0; top: -1px; font-weight: 700; font-size: 1.05rem;
}
.ticks li::before { content: "✓"; color: var(--accent-strong); }
.crosses li::before { content: "×"; color: var(--muted); }

.channels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: 26px;
}
.channel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column;
}
.channel h2 { font-size: 1.15rem; }
.channel > p { color: var(--muted); font-size: .96rem; }
.channel .btn { align-self: flex-start; }
.channel-foot {
  margin: auto 0 0; padding-top: 16px;
  color: var(--muted); font-size: .85rem;
}
.channel-whatsapp { border-color: var(--accent); }

.signup-stacked { flex-direction: column; align-items: stretch; margin-top: 4px; }
.signup-stacked input { flex: 0 0 auto; }
.signup-stacked .btn { align-self: flex-start; }

.price-note, .reassure {
  margin-top: 26px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-alt);
}
.price-note h2, .reassure h2 { font-size: 1.05rem; }
.price-note p, .reassure p { color: var(--muted); font-size: .96rem; }
.price-note p:last-child, .reassure p:last-child { margin-bottom: 0; }
.reassure { border-left: 4px solid var(--accent); }
.reassure-links { padding-top: 6px; }
.reassure-links a { color: var(--text); }

/* ---------- product section ---------- */

.section-product { background: var(--surface-alt); }

/* The render is the centrepiece, not a column item. */
.product-stage {
  display: flex; justify-content: center;
  margin: clamp(24px, 4vw, 48px) 0 clamp(28px, 4vw, 52px);
}
.product-stage .product-figure { width: 100%; max-width: 560px; }

.product-facts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(22px, 3.5vw, 48px);
  max-width: 880px; margin: 0 auto;
}

.product-figure { margin: 0; }
.product-figure img { display: block; width: 100%; height: auto; }

.product-figure-wide {
  margin: 34px auto 0; max-width: 820px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.product-figure-wide figcaption { font-family: var(--font-display); font-size: .98rem; }
.product-figure-wide figcaption {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .9rem;
}

.product-facts h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.product-facts h3 + ul { margin-bottom: 22px; }
.product-note { color: var(--muted); font-size: .9rem; margin: 0; }

.section-product .pillars { margin-top: 34px; }



/* The exploded diagram carries labelled callouts; below about 700px they would
   render too small to read, so the figure scrolls rather than shrinking. */
.figure-scroll { overflow-x: auto; }
.figure-scroll img { display: block; width: 100%; height: auto; }

@media (max-width: 700px) {
  .figure-scroll img { width: 620px; max-width: none; }
}

/* ---------- prose pages (privacy and similar) ---------- */

.prose h2 { font-size: 1.18rem; margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); max-width: 66ch; }
.prose strong { color: var(--text); }
.prose a { color: var(--text); }

/* ---------- mid-page call to action ---------- */

.cta-band {
  background: var(--deep); color: var(--on-deep);
  padding: clamp(28px, 4vw, 40px) 0;
}
.cta-band-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
}
.cta-band p {
  margin: 0; color: var(--on-deep-muted);
  font-size: 1.02rem; max-width: 46ch;
}

/* ---------- scroll-driven module stage ---------- */

/* The track is tall; the stage pins inside it, so scrolling the track length
   is what drives the module apart. Height is in viewport units so the scrub
   lasts about two screens regardless of device. */
.module-track { height: 280vh; position: relative; margin: clamp(20px, 3vw, 36px) 0; }

.module-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
}

.module-stage {
  position: relative;
  width: min(560px, 82vw);
  aspect-ratio: 1 / 1;
}
.module-stage .product-figure,
.module-canvas { position: absolute; inset: 0; }
.module-canvas { opacity: 0; transition: opacity .5s ease; }

.module-stage[data-state="live"] .product-figure { opacity: 0; pointer-events: none; }
.module-stage[data-state="live"] .module-canvas { opacity: 1; }

.module-load {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  font-size: .86rem; padding: 8px 16px;
}

.module-caption {
  margin: 0; color: var(--text); font-family: var(--font-display);
  font-size: 1.05rem; text-align: center; min-height: 1.6em;
}
.module-hint {
  margin: 0; color: var(--muted); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .16em;
}
.module-stage[data-state="live"] ~ .module-hint { opacity: .55; }

/* No pinning where it would trap a short viewport, and no scrub prompt when
   the visitor has asked for less motion. */
@media (max-height: 560px) {
  .module-track { height: auto; }
  .module-sticky { position: static; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .module-track { height: auto; }
  .module-sticky { position: static; height: auto; }
  .module-hint { display: none; }
}