/* mira-site/site.css, Agent A. Colors, type and spacing come ONLY from
   tokens.css custom properties. Mobile-first at 390px; desktop enrichment
   at 900px. Every animation has a static fallback: both the
   prefers-reduced-motion media query and html[data-motion="off"], which
   site.js sets so the fallback is testable with /site/?static=1. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html[data-motion="off"] { scroll-behavior: auto; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- chrome ---------- */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 20;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; border-radius: var(--radius);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--font-law);
  font-size: 1.5rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.wordmark .dot, .hero-name .dot { color: var(--accent); }

.lang {
  display: flex; border: 1.5px solid var(--line);
  border-radius: var(--radius-chip); overflow: hidden;
  background: var(--paper-raised);
}
.lang button {
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600;
  padding: 0.55rem 0.9rem; min-height: 44px; min-width: 44px;
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang button:hover { background: var(--accent-wash); color: var(--ink); }
.lang button:active { background: var(--line); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang button[aria-pressed="true"]:hover { background: var(--ink); color: var(--paper); }

a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- shared section rhythm ---------- */
.section { padding: var(--space-section) 1.25rem; }
.prose { max-width: var(--maxw-prose); margin: 0 auto; }
.prose h2 {
  font-family: var(--font-law);
  font-size: var(--fs-h2); line-height: 1.15; font-weight: 700;
  margin-bottom: 1.1rem;
}
.prose p { margin-bottom: 0.9rem; }
.prose p:last-child { margin-bottom: 0; }
.sub { color: var(--ink-soft); }
.landing { font-weight: 600; }
.fallback { color: var(--ink-faint); font-size: var(--fs-small); }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4.5rem 1.25rem 3rem;
  position: relative;
}
.hero-inner { max-width: var(--maxw-prose); margin: 0 auto; width: 100%; }
.kicker {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.4rem;
}
.hero-name {
  font-family: var(--font-law);
  font-size: var(--fs-hero); line-height: 1.02; font-weight: 700;
  margin-bottom: 0.6rem;
}
.hero-promise {
  font-size: var(--fs-h3); color: var(--ink-soft);
  max-width: 30em; margin-bottom: 2.2rem;
}
.hero-q {
  font-size: var(--fs-h3); font-weight: 600; min-height: 1.8em;
  margin-bottom: 0.6rem;
}
.hero-q .qmark { color: var(--accent); margin-right: 0.45em; }
.caret {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--accent); vertical-align: text-bottom; margin-left: 2px;
  animation: blink 1s steps(2) infinite;
}
.caret[hidden] { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.hero-checking {
  font-size: var(--fs-small); color: var(--ink-faint);
  min-height: 1.4em; margin-bottom: 0.7rem;
  opacity: 0; transition: opacity 0.35s ease;
}
.hero-checking.on { opacity: 1; }
.hero-card { min-height: 2rem; }
.hero-card .answer-card {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-card.show .answer-card { opacity: 1; transform: none; }
.hero-note {
  font-size: var(--fs-small); color: var(--ink-faint); margin-top: 0.8rem;
  opacity: 0; transition: opacity 0.45s ease 0.2s;
}
.hero-card.show ~ .hero-note { opacity: 1; }
.scroll-cue {
  margin-top: 2.4rem;
  text-align: center; color: var(--ink-faint); font-size: var(--fs-small);
}
.scroll-cue .chev {
  display: block; font-size: 1.3rem; line-height: 0.6;
  animation: nudge 2.2s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- answer + refusal cards (shared language) ---------- */
.answer-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.seal {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--accent-wash); color: var(--accent-deep);
  font-size: var(--fs-small); font-weight: 700;
  padding: 0.35rem 0.85rem 0.35rem 0.6rem;
  border-radius: var(--radius-chip); margin-bottom: 0.8rem;
}
.seal .tick {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--paper-raised);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
}
.answer-card .lead { margin-bottom: 0.4rem; }
blockquote.law {
  font-family: var(--font-law);
  font-size: 1.15rem; line-height: 1.5;
  background: var(--paper);
  border-left: 4px solid var(--accent);
  border-radius: 4px var(--radius) var(--radius) 4px;
  padding: 0.9rem 1rem;
  margin: 0.7rem 0 0.4rem;
}
.cite {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline;
  font-size: var(--fs-small); color: var(--ink-soft);
  margin: 0.4rem 0 0.6rem;
}
.cite .sec { font-weight: 700; color: var(--gold); }
.en-note {
  font-size: var(--fs-small); color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 0.6rem; margin-top: 0.5rem;
}
.answer-card .meta { font-size: var(--fs-small); color: var(--ink-faint); margin-top: 0.4rem; }
.asked { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 0.6rem; }
.asked b { color: var(--ink); }

/* ---------- try it ---------- */
.mode-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-small); font-weight: 700;
  border-radius: var(--radius-chip);
  padding: 0.35rem 0.9rem; margin-bottom: 1rem;
}
.mode-badge.live { background: var(--accent-wash); color: var(--accent-deep); }
.mode-badge.rec { background: var(--refuse-wash); color: var(--refuse); }
.mode-badge .pulse {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent);
  animation: livepulse 1.6s ease-in-out infinite;
}
@keyframes livepulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.phone {
  width: min(390px, 100%); margin: 0 auto;
  background: var(--ink);
  border-radius: calc(var(--radius) * 2.4);
  padding: 0.7rem;
  box-shadow: var(--shadow-card);
}
@media (max-width: 520px) {
  .phone { padding: 0.4rem; }
  .phone iframe { border-radius: calc(var(--radius) * 1.2); }
}
.phone .notch {
  width: 34%; height: 5px; border-radius: var(--radius-chip);
  background: var(--ink-soft); margin: 0 auto 0.55rem;
}
.phone iframe {
  display: block; width: 100%; height: min(72svh, 700px);
  border: 0; border-radius: calc(var(--radius) * 1.6);
  background: var(--paper);
}
.gallery { display: grid; gap: 1rem; }
.gallery .answer-card .q {
  font-weight: 600; margin-bottom: 0.6rem;
}
.gallery .answer-card .q::before { content: '› '; color: var(--accent); font-weight: 700; }

/* ---------- honest no ---------- */
.refusal-wrap { max-width: var(--maxw-prose); margin: 1.4rem auto 0; }
.refusal-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
  margin-bottom: 1.1rem;
}
.refusal-card h3 {
  font-family: var(--font-law);
  font-size: var(--fs-h3); line-height: 1.3;
  margin-bottom: 0.6rem;
}
.refusal-card .why { margin-bottom: 0.5rem; }
.refusal-card .promise { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: 1rem; }
.referral {
  background: var(--refuse-wash);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.referral h4 {
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--refuse); margin-bottom: 0.4rem;
}
.referral .org { font-family: var(--font-law); font-size: var(--fs-h3); font-weight: 700; }
.referral .addr { color: var(--ink-soft); font-size: var(--fs-small); margin: 0.15rem 0 0.7rem; }
.referral .acts { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.referral a.call {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.5rem 1.2rem;
  border-radius: var(--radius); background: var(--accent);
  color: var(--paper-raised); font-weight: 700; text-decoration: none;
  transition: background-color 0.15s ease;
}
.referral a.call:hover { background: var(--accent-deep); color: var(--paper-raised); }
.referral a.call:active { background: var(--accent-deep); }
.referral a.ext { font-weight: 600; }

/* ---------- cities + map ---------- */
.city-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.8rem; }
.city-pill {
  font-size: var(--fs-small); font-weight: 600;
  border: 1.5px solid var(--line); border-radius: var(--radius-chip);
  padding: 0.3rem 0.8rem; color: var(--ink-soft);
  background: var(--paper-raised);
}
.city-pill.live { background: var(--accent); border-color: var(--accent); color: var(--paper-raised); }
.legend { font-size: var(--fs-small); color: var(--ink-soft); }
.dot-live, .dot-next {
  display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  vertical-align: baseline;
}
.dot-live { background: var(--accent); }
.dot-next { border: 2px solid var(--ink-faint); }
.map { margin-top: 1.6rem; }
.map svg { width: 100%; height: auto; display: block; }
.map .road { fill: none; stroke: var(--line); stroke-width: 3; }
.map .roadlabel, .map .reflabel { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-faint); }
.map .ref { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }
.map .citydot text { font-family: var(--font-ui); font-size: 13px; fill: var(--ink-soft); }
.map .citydot .next { fill: var(--paper); stroke: var(--ink-faint); stroke-width: 2; }
.map .citydot .pilot { fill: var(--accent); }
.map .citydot .halo { fill: var(--accent-wash); }
.map .pilotlabel { font-weight: 700; fill: var(--accent-deep) !important; }
.map .citydot {
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--d) * 180ms + 150ms);
}
.map.play .citydot { opacity: 1; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 2.2rem 1.25rem 3rem; }
.foot-inner {
  max-width: var(--maxw-prose); margin: 0 auto;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.foot-inner p { margin-bottom: 0.7rem; }
.foot-inner .pledge { color: var(--ink); font-weight: 600; }

/* ---------- scroll reveals ---------- */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- static fallbacks: media query AND the JS-set attribute ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-card .answer-card, .hero-note, .hero-checking,
  .map .citydot { transition: none; }
  .reveal, .map .citydot { opacity: 1; transform: none; }
  .hero-note { opacity: 1; }
  .caret, .scroll-cue .chev, .mode-badge .pulse { animation: none; }
}
html[data-motion="off"] .reveal,
html[data-motion="off"] .map .citydot { opacity: 1; transform: none; transition: none; }
html[data-motion="off"] .hero-card .answer-card { opacity: 1; transform: none; transition: none; }
html[data-motion="off"] .hero-note { opacity: 1; transition: none; }
html[data-motion="off"] .caret,
html[data-motion="off"] .scroll-cue .chev,
html[data-motion="off"] .mode-badge .pulse { animation: none; }

/* ---------- desktop enrichment ---------- */
@media (min-width: 900px) {
  .section-wide .split {
    max-width: var(--maxw-wide); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 3.5rem; align-items: start;
  }
  .section-wide .split > .prose { margin: 0; }
  .map { margin-top: 0; }
  .gallery { grid-template-columns: 1fr; }
  .hero-inner { max-width: var(--maxw-wide); }
  .hero-demo { max-width: var(--maxw-prose); }
}

/* ================= arch-57: mission, how, arc, ownership =================
   Colors, type and spacing still come ONLY from tokens.css custom
   properties, including the appended --deep-* set. */

/* ---------- mission + ownership (shared large-type language) ---------- */
.mission-kicker {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-small) !important;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1.2rem;
}
.mission-line {
  font-family: var(--font-law);
  font-size: clamp(1.45rem, 3.6vw, 2.15rem);
  line-height: 1.35; font-weight: 600;
  margin-bottom: 1.1rem !important;
}
.mission-line:last-child { margin-bottom: 0 !important; }

/* ---------- the how ---------- */
.how-cards {
  list-style: none;
  max-width: var(--maxw-wide); margin: 2rem auto;
  display: grid; gap: 1rem;
}
.how-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-deep);
  font-weight: 700; margin-bottom: 0.7rem;
}
.how-card h3 {
  font-family: var(--font-law); font-size: var(--fs-h3);
  margin-bottom: 0.45rem;
}
.how-card p { color: var(--ink-soft); }
.how-close { margin-top: 0.4rem; }
@media (min-width: 900px) {
  .how-cards { grid-template-columns: 1fr 1fr 1fr; gap: 1.4rem; }
}

/* ---------- the arc: deepening pinned zoom-out ---------- */
.arc {
  background: var(--deep-1);
  color: var(--deep-ink);
  transition: background-color 1.1s ease;
}
.arc[data-depth="2"] { background: var(--deep-2); }
.arc[data-depth="3"] { background: var(--deep-3); }
.arc-intro { padding: var(--space-section) 1.25rem 0; }
.arc-kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--deep-glow); margin-bottom: 0.5rem;
}
.arc-sub { color: var(--deep-ink-soft); }

/* track + pinned stage (scroll mode). 62vh runway per beat, 6 beats. */
.arc-track { position: relative; }
.arc.mode-scroll .arc-track { height: calc(100dvh + 372vh); }
.arc-stage {
  position: sticky; top: 0; height: 100dvh;
  display: grid; place-items: center; overflow: hidden;
}
.arc.mode-tap .arc-track { height: auto; }
.arc.mode-tap .arc-stage { position: static; height: auto; min-height: 92dvh; padding: 1rem 0 2rem; }

/* the scene: one svg, scaled per beat. transform + opacity only. */
.arc-viz { width: min(92vmin, 880px); }
.arc-viz svg { width: 100%; height: auto; display: block; }
.arc-viz {
  transform: scale(5.5);
  transition: transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* will-change only while the arc is near the viewport (site.js toggles
   arc-on): the promoted layer is large at scale(5.5) and should not be
   held alive for the whole page. */
.arc.arc-on .arc-viz { will-change: transform; }
.arc-stage[data-beat="1"] .arc-viz { transform: scale(2.7); }
.arc-stage[data-beat="2"] .arc-viz { transform: scale(1.75); }
.arc-stage[data-beat="3"] .arc-viz { transform: scale(1.22); }
.arc-stage[data-beat="4"] .arc-viz { transform: scale(0.94); }
.arc-stage[data-beat="5"] .arc-viz { transform: scale(5.5); }

.arc-viz .ring { fill: none; stroke: var(--deep-line); stroke-width: 1.6; }
.arc-viz .ring-city { stroke: var(--deep-glow); stroke-opacity: 0.55; }
.arc-viz .youpt { fill: var(--deep-glow); }
.arc-viz .youglow { fill: var(--deep-glow); opacity: 0.22; }
.arc-viz .citypt { fill: var(--deep-glow); }
.arc-viz .mdot, .arc-viz .sdot { fill: var(--deep-ink-soft); opacity: 0.75; }
.arc-viz .fdot { fill: var(--deep-ink-soft); opacity: 0.5; }
.arc-viz .ga { fill: none; stroke: var(--deep-line); stroke-width: 2; }
.arc-viz .citylabel {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  fill: var(--deep-ink);
}
.arc-viz .ringlayer { opacity: 0; transition: opacity 0.9s ease; }
.arc-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"]) .rl1 { opacity: 1; }
.arc-stage:is([data-beat="2"], [data-beat="3"], [data-beat="4"]) .rl2 { opacity: 1; }
.arc-stage:is([data-beat="3"], [data-beat="4"]) .rl3 { opacity: 1; }
.arc-stage[data-beat="4"] .rl4 { opacity: 1; }

/* the words, overlaid low on the stage */
.arc-copy {
  position: absolute; left: 50%; bottom: 7dvh;
  transform: translateX(-50%);
  width: min(34rem, calc(100vw - 2.5rem));
  text-align: center;
  opacity: 0; transform: translateX(-50%) translateY(14px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.arc-copy.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.arc.mode-tap .arc-copy {
  position: static; transform: none; margin: 0 auto; padding: 0 1.25rem;
}
.arc.mode-tap .arc-copy.in { transform: none; }
.arc-label {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--deep-glow); margin-bottom: 0.35rem;
}
.arc-badge {
  display: inline-block;
  font-size: var(--fs-small); font-weight: 700;
  border-radius: var(--radius-chip);
  padding: 0.22rem 0.8rem; margin-bottom: 0.55rem;
}
.arc-badge.now { border: 1.5px solid var(--deep-glow); color: var(--deep-glow); }
.arc-badge.plan { border: 1.5px solid var(--deep-line); color: var(--deep-ink-soft); }
.arc-head {
  font-family: var(--font-law);
  font-size: clamp(1.55rem, 4.5vw, 2.4rem);
  line-height: 1.18; font-weight: 700;
  color: var(--deep-ink); margin-bottom: 0.55rem;
}
.arc-body { color: var(--deep-ink-soft); margin-bottom: 0.5rem; }
.arc-body:last-child { margin-bottom: 0; }

/* tap-mode nav */
.arc-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; padding: 0 1.25rem;
}
.arc-nav button {
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700;
  min-height: 44px; padding: 0.55rem 1.3rem;
  border-radius: var(--radius-chip);
  border: 1.5px solid var(--deep-line);
  background: transparent; color: var(--deep-ink); cursor: pointer;
}
.arc-nav button:disabled { opacity: 0.35; cursor: default; }
.arc-count { font-size: var(--fs-small); color: var(--deep-ink-soft); }
.arc-dots { display: flex; gap: 0.45rem; justify-content: center; margin-top: 0.9rem; }
.arc-dots span {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  border: 1.5px solid var(--deep-ink-soft); opacity: 0.6;
}
.arc-dots span.on { background: var(--deep-glow); border-color: var(--deep-glow); opacity: 1; }

/* static fallback: everything, stacked, nothing moving */
.arc-static { padding: 1.5rem 1.25rem var(--space-section); }
.arc-static .arc-viz {
  transform: none; transition: none; width: min(70vmin, 460px);
  margin: 0 auto 2rem;
}
.arc-static .ringlayer { opacity: 1; transition: none; }
.arc-static-beat {
  max-width: var(--maxw-prose); margin: 0 auto 2.2rem;
  border-left: 3px solid var(--deep-line); padding-left: 1.1rem;
}
.arc-static-beat:last-child { margin-bottom: 0; }
.arc-static-beat .arc-head { font-size: clamp(1.3rem, 3.5vw, 1.8rem); }

/* ownership block: back in daylight */
.own { border-top: 1px solid var(--line); }

/* arc static fallbacks: media query AND the JS-set attribute */
@media (prefers-reduced-motion: reduce) {
  .arc, .arc-viz, .arc-viz .ringlayer, .arc-copy { transition: none; }
  .arc-copy { opacity: 1; transform: translateX(-50%); }
}
html[data-motion="off"] .arc,
html[data-motion="off"] .arc-viz,
html[data-motion="off"] .arc-viz .ringlayer,
html[data-motion="off"] .arc-copy { transition: none; }

/* ================= arch-58: performance + polish =================
   Colors, type and spacing still come ONLY from tokens.css custom
   properties. Every new animation is covered by the reduced-motion
   fallbacks at the bottom of this block. */

/* ---------- paint containment for long below-fold sections.
   Skipped on purpose for: the hero (above the fold), #try (holds the
   live iframe), the two pinned sequences (sticky inside
   content-visibility is unreliable). ---------- */
#problem, #mission, #honest, #how, #cities, #jolt, #own, #open {
  content-visibility: auto;
  contain-intrinsic-size: auto 40rem;
}

/* ---------- scroll progress bar (transform-only, rAF-driven) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 30; pointer-events: none; background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- section rail: left edge, desktop only. The walkthrough
   keeps its own step rail on the right; the two never overlap. ---------- */
.rail { display: none; }
@media (min-width: 900px) {
  .rail {
    position: fixed; left: 0.4rem; top: 50%; transform: translateY(-50%);
    z-index: 25; display: flex; flex-direction: column; gap: 0.15rem;
  }
  .rail a {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
  }
  .rail a::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    border: 2px solid var(--ink-faint); background: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .rail a:hover::before { border-color: var(--accent); transform: scale(1.25); }
  .rail a.on::before { background: var(--accent); border-color: var(--accent); }
}

/* ---------- per-sequence skip links (visible on keyboard focus) ---------- */
.seq-skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.seq-skip:focus-visible {
  position: static; width: auto; height: auto; clip: auto;
  display: inline-block; margin-top: 0.8rem;
  padding: 0.45rem 1rem; border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none; white-space: normal;
}
.seq-skip-deep:focus-visible {
  background: var(--deep-glow); color: var(--deep-3);
  outline-color: var(--deep-glow);
}

/* ---------- live demo iframe: lazy src + loading shimmer.
   The shell reserves the exact iframe height, so the swap from
   shimmer to loaded demo shifts nothing. ---------- */
.demo-shell { position: relative; }
.demo-load {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: calc(var(--radius) * 1.6);
  background: var(--paper);
  color: var(--ink-faint); font-size: var(--fs-small);
  overflow: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
@media (max-width: 520px) { .demo-load { border-radius: calc(var(--radius) * 1.2); } }
.demo-load::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, var(--accent-wash) 50%, transparent 68%);
  background-size: 250% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
.demo-shell.loaded .demo-load { opacity: 0; visibility: hidden; }

/* ---------- daylight to deep: soften both seams of the arc ---------- */
.arc { position: relative; }
.arc-intro { position: relative; z-index: 1; }
.arc::before, .arc::after {
  content: ''; position: absolute; left: 0; right: 0;
  pointer-events: none; z-index: 0;
}
.arc::before { top: 0; height: 4.5rem; background: linear-gradient(var(--paper), transparent); }
.arc::after { bottom: 0; height: 2.5rem; background: linear-gradient(transparent, var(--paper)); opacity: 0.5; }

/* ---------- arc copy: fixed box, bottom-anchored content, so beat
   changes swap text inside a box that never moves (CLS 0). ---------- */
.arc.mode-scroll .arc-copy {
  min-height: min(19.5rem, 46dvh);
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
}

/* ---------- arc tap mode: one-time affordance pulse on Next ---------- */
.arc-nav button:hover:not(:disabled) { border-color: var(--deep-glow); color: var(--deep-glow); }
.arc-nav button:active:not(:disabled) { color: var(--deep-glow); }
#arc-next.nudge { animation: nudge-pulse 1.1s ease-in-out 0.8s 2; }
@keyframes nudge-pulse {
  0%, 100% { transform: none; }
  50% { transform: scale(1.07); }
}

/* ---------- focus rings that stay visible on the deep background ---------- */
.arc :focus-visible { outline-color: var(--deep-glow); }

/* ---------- heading rhythm: the arc kicker was written to match the
   mission kicker (small caps), but .prose h2 outweighed it in the
   cascade and it rendered at full h2 size. This restores the intent. ---------- */
.prose h2.arc-kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* ---------- arch-58 reduced-motion coverage (both belts) ---------- */
@media (prefers-reduced-motion: reduce) {
  .demo-load::after, #arc-next.nudge { animation: none; }
  .demo-load, .lang button, .referral a.call, .rail a::before { transition: none; }
}
html[data-motion="off"] .demo-load::after,
html[data-motion="off"] #arc-next.nudge { animation: none; }
html[data-motion="off"] .demo-load,
html[data-motion="off"] .lang button,
html[data-motion="off"] .referral a.call,
html[data-motion="off"] .rail a::before { transition: none; }

/* ================= arch-59: hero scoreboard + the jolt =================
   Colors, type and spacing still come ONLY from tokens.css custom
   properties. Every animation here is transform-only and covered by the
   reduced-motion fallbacks at the bottom of this block. */

/* ---------- the identity line: Mira. Your [split-flap] ----------
   The flap holds ten fixed-width cells (the longest role word in either
   language), so the line's box never changes size: zero layout shift. */
.hero-mira { display: block; }
.hero-role {
  display: block;
  font-family: var(--font-law);
  font-size: clamp(1.8rem, 5.4vw, 3.3rem);
  line-height: 1.18; font-weight: 700;
  margin-top: 0.1em;
}
.flap {
  display: inline-flex;
  perspective: 520px;
  color: var(--accent-deep);
}
.flap-cell {
  display: inline-block;
  width: 0.62em;
  text-align: center;
  backface-visibility: hidden;
  transform-origin: 50% 52%;
}
.flap-cell.flip { animation: flapflip 0.3s ease-in-out; }
@keyframes flapflip {
  0% { transform: rotateX(0); }
  49% { transform: rotateX(-90deg); }
  51% { transform: rotateX(90deg); }
  82% { transform: rotateX(-12deg); }
  100% { transform: rotateX(0); }
}
/* reduced motion: site.js writes the four roles as plain comma text */
.flap.flap-static { display: inline; }

/* visually hidden, read by screen readers (the moving line is aria-hidden) */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- the jolt: five imagined vignettes ---------- */
.jolt h2 {
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  max-width: 14em;
}
.jolt-frame {
  font-weight: 600; color: var(--ink-soft);
  border-left: 3px solid var(--gold);
  padding-left: 0.9rem;
}
.jolt-cards {
  list-style: none;
  max-width: var(--maxw-wide);
  margin: 2.2rem auto;
  display: grid; gap: 1rem;
}
.jolt-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.imagined {
  display: inline-block;
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold);
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius-chip);
  padding: 0.16rem 0.7rem;
  margin-bottom: 0.7rem;
}
.jolt-card h3 {
  font-family: var(--font-law);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  margin-bottom: 0.5rem;
}
.jolt-card p { color: var(--ink-soft); }
.jolt-card .jolt-never, .jolt-never {
  margin-top: 0.5rem;
  font-weight: 700; color: var(--ink);
}
.jolt-close { margin-top: 1.2rem; }
@media (min-width: 900px) {
  .jolt-cards { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .jolt-card:last-child { grid-column: 1 / -1; }
}

/* ---------- arch-59 reduced-motion coverage (both belts) ---------- */
@media (prefers-reduced-motion: reduce) {
  .flap-cell.flip { animation: none; }
}
html[data-motion="off"] .flap-cell.flip { animation: none; }