:root {
  --paper:    #0B0B0A;
  --surface:  #141412;
  --surface2: #1A1A17;
  --inkHi:    #F1EEE6;
  --ink:      #D9D5CB;
  --inkMid:   #8A857A;
  --inkLo:    #5A574E;
  --rule:     rgba(241, 238, 230, 0.10);
  --ruleSoft: rgba(241, 238, 230, 0.05);
  --accent:   #6E7A4A;
  --accentHi: #8B9961;

  --display:  'Inter Tight', -apple-system, system-ui, sans-serif;
  --ui:       'Inter', -apple-system, system-ui, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, Menlo, monospace;
  --jp:       'Noto Serif JP', 'Hiragino Mincho ProN', 'YuMincho', 'Yu Mincho', serif;

  --maxw:     1240px;
  --pad:      32px;
  --pad-sm:   22px;

  /* Live scroll variables (set by app.js). */
  --scroll-y: 0;       /* unitless pixels, for math */
  --scroll-pct: 0;     /* 0 .. 1 across whole document */
  --hero-pct: 0;       /* 0 .. 1 progress through hero only */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body { overflow-x: hidden; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--paper); }

/* Anything with a JP class uses the Japanese serif stack so 絶 / 証 / 私 / 輪 render properly. */
.jp, .kanji, .hero-kanji, .cue-kanji, .seal-mark, .scard-seal-mark, .hanko-glyph {
  font-family: var(--jp);
}

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  padding: 10px 16px; background: var(--inkHi); color: var(--paper);
  border-radius: 6px; z-index: 100; font-size: 13px;
}
.skip-link:focus { left: 12px; }

/* ── Scroll progress hairline ───────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 1.5px;
  z-index: 60;
  pointer-events: none;
  background: var(--ruleSoft);
}
.scroll-progress-bar {
  height: 100%;
  width: calc(var(--scroll-pct) * 100%);
  background: linear-gradient(90deg, transparent 0%, var(--accent) 60%, var(--accentHi) 100%);
  box-shadow: 0 0 8px rgba(110, 122, 74, 0.5);
  transition: width 80ms linear;
}

/* ── Layout ─────────────────────────────────────────────── */
.wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad);
}
@media (max-width: 640px) { .wrap { padding: 0 var(--pad-sm); } }

section { padding: 120px 0; position: relative; }
@media (max-width: 720px) { section { padding: 80px 0; } }

/* ── Eyebrow ────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkMid);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(110, 122, 74, 0.55);
}

/* ── Nav ────────────────────────────────────────────────── */
nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* Solid by default so in-app webviews (Telegram, WhatsApp, etc.) that
     don't honour backdrop-filter still get a clean opaque bar instead of
     scrolled text bleeding through. */
  background: rgba(11, 11, 10, 0.96);
  border-bottom: 0.5px solid var(--rule);
  padding-top: env(safe-area-inset-top, 0px);
  /* Hidden during the hero's scroll-jacked sequence; JS reveals it once
     the hero has mostly scrolled out. */
  opacity: 0;
  transition: opacity 320ms ease;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  nav.top {
    background: rgba(11, 11, 10, 0.78);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }
}
nav.top .inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.wordmark {
  font-family: var(--display);
  font-size: 17px; font-weight: 600;
  letter-spacing: 0.36em;
  color: var(--inkHi);
  display: inline-flex; align-items: center; gap: 12px;
}
.wordmark::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(110, 122, 74, 0.6);
  animation: brandPulse 4s ease-in-out infinite;
}
@keyframes brandPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(110, 122, 74, 0.55); }
  50%      { box-shadow: 0 0 22px rgba(110, 122, 74, 0.85); }
}
nav.top .links {
  display: flex; gap: 28px; align-items: center;
  font-family: var(--ui); font-size: 13.5px; color: var(--ink);
}
nav.top .links a {
  color: var(--inkMid); transition: color 200ms;
  letter-spacing: 0.02em;
}
nav.top .links a:hover { color: var(--inkHi); }
nav.top .cta {
  padding: 9px 16px;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--inkHi);
  font-size: 12.5px; font-weight: 500;
  transition: all 200ms;
  font-family: var(--ui);
}
nav.top .cta:hover {
  background: var(--inkHi); color: var(--paper);
  border-color: var(--inkHi);
}
@media (max-width: 820px) {
  nav.top .inner { padding: 12px var(--pad-sm); }
  nav.top .links { display: none; }
}

/* ── HERO · pinned scene-swap stage ─────────────────────── */
/* The hero section is intentionally tall (multiple viewport heights)
   so the inner .hero-pin can stay sticky while the user scrolls
   through the scene sequence. */
section.hero {
  position: relative;
  height: 500vh;            /* 4 scenes × ~125vh of scroll budget */
  background: var(--paper);
  padding: 0;
  isolation: isolate;
}

.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Atmospheric background grid (sits behind everything in the pin). */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--rule) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--rule) 0.5px, transparent 0.5px);
  background-size: 64px 64px;
  background-position: -32px -32px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation: gridDrift 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes gridDrift {
  0%   { background-position: -32px -32px; }
  100% { background-position: 32px 32px; }
}

/* Aura blobs — they breathe behind the kanji, providing the moss glow. */
.hero-aura {
  position: absolute;
  left: 50%; top: 50%;
  width: 920px; height: 920px;
  transform: translate(-50%, -50%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.hero-aura-1 { opacity: 0.62; animation: drift1 22s ease-in-out infinite; }
.hero-aura-2 {
  width: 700px; height: 700px; opacity: 0.45;
  filter: blur(90px);
  animation: drift2 32s ease-in-out infinite;
}
@keyframes drift1 {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%      { transform: translate(-46%, -54%) scale(1.10) rotate(10deg); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(-58%, -42%) scale(0.96) rotate(0deg); }
  50%      { transform: translate(-42%, -58%) scale(1.14) rotate(-12deg); }
}

/* Aura suppression overlay: paper-coloured film between the moss aura and
   the foreground content. Its opacity grows with --hero-pct so the glow
   visibly dims as the user scrolls deeper into the hero — reinforcing the
   "going more private" narrative. */
.hero-dim {
  position: absolute;
  inset: 0;
  background: var(--paper);
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--hero-pct, 0) * 0.7);
  transition: opacity 100ms linear;
}

/* Brand logomark: circle with a dot. Sits in the top-left of the hero on
   first paint, then fades + shrinks as the user scrolls, suggesting the
   brand presence quieting into private practice. */
.hero-mark {
  position: absolute;
  top: clamp(20px, 3vh, 32px);
  left: clamp(20px, 3vw, 36px);
  width: clamp(28px, 2.4vw, 40px);
  height: clamp(28px, 2.4vw, 40px);
  z-index: 5;
  pointer-events: none;
  /* Fades and shrinks faster than the aura so it's gone before you finish
     scrolling — gives the suppression a clear arc. */
  opacity: calc(1 - var(--hero-pct, 0) * 1.6);
  transform: scale(calc(1 - var(--hero-pct, 0) * 0.35));
  transform-origin: top left;
  transition: opacity 100ms linear, transform 100ms linear;
}
.hero-mark .hm-ring {
  filter: drop-shadow(0 0 6px rgba(110, 122, 74, 0.4));
}
.hero-mark .hm-dot {
  transform-origin: 18px 18px;
  transform-box: view-box;
  filter: drop-shadow(0 0 8px rgba(110, 122, 74, 0.7));
  animation: brandPulse 4s ease-in-out infinite;
}

/* Tategaki side labels: rotated -90deg so the text reads vertically,
   mirroring the iOS Moment shell. JS swaps the inner text per scene. */
.tategaki {
  position: absolute;
  top: 28%;
  z-index: 4;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--inkMid);
  opacity: 0.65;
  pointer-events: none;
  white-space: nowrap;
  transition: color 320ms;
}
.tategaki span {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.tategaki-l { left: 32px; }
.tategaki-r { right: 32px; color: var(--inkLo); }
.tategaki-r span { transform: rotate(90deg); transform-origin: right top; }
@media (max-width: 720px) {
  .tategaki-l { left: 12px; font-size: 8.5px; }
  .tategaki-r { right: 12px; font-size: 8.5px; }
}

/* Stage: holds all scenes layered on top of each other. JS controls opacity. */
.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  padding: 0 var(--pad);
  margin: 0 auto;
  height: 70vh;
}
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  /* a tiny opacity transition smooths over rAF jitter */
  transition: opacity 200ms linear, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
/* Scene 0 paints visible by default so the page has content before JS runs. */
.scene-0 { opacity: 1; }

.scene-kanji {
  font-size: clamp(180px, 22vw, 320px);
  line-height: 1;
  font-weight: 400;
  color: var(--inkHi);
  letter-spacing: -0.02em;
  filter: drop-shadow(0 0 40px rgba(110, 122, 74, 0.20));
}
.scene-primary {
  margin-top: 32px;
  font-family: var(--display);
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 300;
  color: var(--inkHi);
}
.scene-primary em {
  font-style: italic; font-weight: 300; color: var(--accentHi);
}
.scene-primary-mono {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.42em;
  font-size: clamp(20px, 2.4vw, 28px);
}
.scene-hint {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkMid);
}
.scene-caption {
  margin-top: 24px;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

/* ── Hero entry · WELCOME scene plays a small ceremony on first paint
   None of these animations translate the layout, so the kanji stays
   exactly where it lands — only opacity, scale around the centre, and
   horizontal scaleX of the rule lines. */

/* Aura blooms from a point, then the existing drift1/drift2 keyframes
   take over for continuous slow motion. */
@keyframes heroAuraBloom {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0.62; transform: translate(-50%, -50%) scale(1);   }
}
.hero-aura-1 {
  /* `backwards` fill keeps the opacity-0 / small-scale start state during
     the (zero) delay; the second animation (drift1) starts after bloom finishes. */
  animation:
    heroAuraBloom 1500ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    drift1 22s ease-in-out 1500ms infinite;
}
.hero-aura-2 {
  animation:
    heroAuraBloom 1500ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms backwards,
    drift2 32s ease-in-out 1750ms infinite;
}

/* Kanji stamps in like a hanko coming down: starts a touch larger,
   lands hard with a slight overshoot, then settles. */
@keyframes heroKanjiStamp {
  0%   { opacity: 0; transform: scale(1.18); filter: blur(2px); }
  55%  { opacity: 1; transform: scale(0.94); filter: blur(0); }
  78%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1);    }
}

/* Subtle dwell breathing — kanji feels alive while you're stopped on the scene. */
@keyframes kanjiBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

/* ZETSU wordmark types in letter by letter. Pure opacity — no translate. */
@keyframes heroLetterIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Meta rules unfurl from the centre outward via scaleX. */
@keyframes heroRuleExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scene-0 children: hidden until each one's delay elapses. */
.scene-0 .scene-kanji,
.scene-0 .scene-primary,
.scene-0 .scene-extra,
.scene-0 .scene-hint,
.scene-0 .scene-caption {
  opacity: 0;
}

.scene-0 .scene-kanji {
  animation:
    heroKanjiStamp 1400ms cubic-bezier(0.18, 0.7, 0.2, 1) both,
    kanjiBreath 6s ease-in-out 1500ms infinite;
}

/* The wordmark container itself fades in nothing — its individual letters do. */
.scene-0 .scene-primary { opacity: 1; animation: none; }
.scene-0 .scene-primary .hl {
  display: inline-block;
  opacity: 0;
  animation: heroLetterIn 420ms ease-out both;
}
.scene-0 .scene-primary .hl:nth-child(1) { animation-delay: 700ms; }
.scene-0 .scene-primary .hl:nth-child(2) { animation-delay: 780ms; }
.scene-0 .scene-primary .hl:nth-child(3) { animation-delay: 860ms; }
.scene-0 .scene-primary .hl:nth-child(4) { animation-delay: 940ms; }
.scene-0 .scene-primary .hl:nth-child(5) { animation-delay: 1020ms; }

/* Meta line: container fades in, rules expand from centre, text fades in last. */
.scene-0 .scene-extra { animation: heroFadeIn 600ms ease-out 1100ms both; }
.scene-0 .scene-extra-welcome .se-rule {
  transform: scaleX(0);
  transform-origin: center;
  animation: heroRuleExpand 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 1200ms both;
}

.scene-0 .scene-hint    { animation: heroFadeIn 600ms ease-out 1500ms both; }
.scene-0 .scene-caption { animation: heroFadeIn 600ms ease-out 1700ms both; }

/* Scenes 1–3 also breathe subtly when they become the active scene. */
.scene:not(.scene-0).active .scene-kanji {
  animation: kanjiBreath 6s ease-in-out infinite;
}

/* ── Per-scene visual extras ─────────────────────────────────
   Each scene has a .scene-extra block with a unique inner visual.
   The visual stays hidden until the scene gains the .active class
   (set by JS when this scene is the centered/foreground one). */
.scene-extra {
  margin-top: 22px;
  display: flex;
  align-items: center; justify-content: center;
  gap: 14px;
  /* default: invisible until scene becomes active */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease-out 200ms, transform 600ms ease-out 200ms;
}
.scene.active .scene-extra { opacity: 1; transform: translateY(0); }

/* WELCOME extras: rule lines + small system meta line */
.scene-extra-welcome {
  width: min(420px, 70vw);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--inkLo);
}
.scene-extra-welcome .se-rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.scene-extra-welcome .se-meta { flex-shrink: 0; }

/* RUN extras: a thin HR waveform + tabular stats line */
.scene-extra-run {
  flex-direction: column;
  width: min(320px, 80vw);
  gap: 10px;
}
.se-hr {
  width: 100%; height: 32px;
  display: block;
}
.se-hr path {
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  transition: stroke-dashoffset 1700ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms;
}
/* Waveform draws as the scene becomes active, then continuously pulses
   with a heartbeat-like glow burst (~55 BPM, fits a runner's resting heart). */
.scene.active .se-hr path {
  stroke-dashoffset: 0;
  animation: hrBeat 1100ms ease-in-out 2000ms infinite;
}
@keyframes hrBeat {
  0%, 100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  10% {
    filter: drop-shadow(0 0 6px rgba(139, 153, 97, 0.85));
  }
  18% {
    filter: drop-shadow(0 0 12px rgba(139, 153, 97, 1))
            drop-shadow(0 0 4px rgba(139, 153, 97, 0.9));
  }
  35% {
    filter: drop-shadow(0 0 0 transparent);
  }
}
.se-stats {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px;
  color: var(--inkMid); letter-spacing: 0.06em;
}
.se-stats strong {
  color: var(--inkHi);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.se-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent); opacity: 0.8;
}

/* PROVE: hanko box that draws around the kanji, then the kanji
   pulses like a stamp landing. Hash + verified label below. */
.scene-kanji-stamp {
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
  /* Explicit dimensions on the stamp wrapper so the flex column lays the
     "Prove it." text BELOW the box, not behind it. The SVG fills this. */
  width: clamp(200px, 26vw, 400px);
  height: clamp(200px, 26vw, 400px);
}
.se-hanko {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.se-hanko-rect {
  /* perimeter ≈ 4 × 180 = 720 in viewBox units */
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  transition: stroke-dashoffset 1500ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms;
}
.scene.active .se-hanko-rect { stroke-dashoffset: 0; }

/* Subtle "stamp" pulse on the kanji once the box has landed */
.scene-2 .scene-kanji {
  transform-origin: center;
  /* The hanko box maxes at 380px; keep the kanji smaller so it sits *inside*
     the rectangle rather than overflowing past the moss border. */
  font-size: clamp(140px, 17vw, 240px);
}
.scene.active .scene-2 .scene-kanji,
.scene.scene-2.active .scene-kanji {
  animation: heroStamp 600ms cubic-bezier(0.18, 0.7, 0.2, 1) 1500ms;
}
@keyframes heroStamp {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.92); filter: drop-shadow(0 0 60px rgba(110,122,74,0.7)); }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.scene-extra-prove {
  font-family: var(--mono); font-size: 11px;
  color: var(--inkMid); letter-spacing: 0.08em;
}
.se-hash { color: var(--inkHi); }
.se-verified { color: var(--accent); }

/* REVEAL: four redacted rows that strike-fade in one by one */
.scene-extra-reveal {
  flex-direction: column;
  align-items: stretch;
  width: min(300px, 75vw);
  gap: 8px;
  margin-top: 28px;
}
.se-redact {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px;
  color: var(--inkMid); letter-spacing: 0.18em;
  text-transform: uppercase;
  /* hidden until the parent .scene becomes active; staggered via nth-child */
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.scene.active .se-redact { opacity: 0.85; transform: translateX(0); }
.scene.active .se-redact:nth-child(1) { transition-delay: 200ms; }
.scene.active .se-redact:nth-child(2) { transition-delay: 380ms; }
.scene.active .se-redact:nth-child(3) { transition-delay: 560ms; }
.scene.active .se-redact:nth-child(4) { transition-delay: 740ms; }
.se-redact > span:first-child {
  width: 64px; flex-shrink: 0;
  color: var(--inkLo);
}
.se-bar {
  flex: 1;
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg, var(--inkLo) 0 1px, transparent 1px 5px
  );
  background-size: 6px 6px;
  border-top: 0.5px solid rgba(110,122,74,0.2);
  border-bottom: 0.5px solid rgba(110,122,74,0.2);
}

/* The trace-line that grows across the bottom of the hero
   as the user scrolls through the scenes. */
.hero-trace {
  position: absolute;
  left: 0; right: 0; bottom: 96px;
  width: 100%; height: 64px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.7;
}
.hero-trace path {
  /* JS sets --trace-len on this element to the path's actual length
     (via getTotalLength) so the line completes exactly at scroll end. */
  stroke-dasharray: var(--trace-len, 1800);
  stroke-dashoffset: calc(var(--trace-len, 1800) * (1 - var(--hero-pct, 0)));
  transition: stroke-dashoffset 80ms linear;
  filter: drop-shadow(0 0 4px rgba(110,122,74,0.6));
}
@media (max-width: 720px) {
  .hero-trace { bottom: 78px; height: 44px; }
}

@media (max-width: 720px) {
  .scene-kanji { font-size: clamp(160px, 38vw, 280px); }
  .scene-primary { font-size: clamp(32px, 9vw, 56px); }
  .scene-hint { font-size: 10px; letter-spacing: 0.18em; }
  .scene-caption { font-size: 9.5px; }
  .scene-extra-welcome { font-size: 8.5px; gap: 10px; }
  .se-stats { font-size: 10px; }
  .se-redact { font-size: 9px; }
  .se-redact > span:first-child { width: 52px; }
}

/* Foot: progress dots + scroll cue, pinned to the bottom of the stage. */
.hero-foot {
  position: absolute;
  bottom: 32px; left: 0; right: 0;
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  pointer-events: none;
}
.hero-dots {
  display: flex; gap: 8px;
}
.hp-dot {
  width: 22px; height: 2px;
  background: var(--rule);
  border-radius: 1px;
  transition: background-color 320ms, width 320ms;
}
.hp-dot.active {
  background: var(--accent);
  width: 36px;
  box-shadow: 0 0 8px rgba(110, 122, 74, 0.55);
}
.hero-cue {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--inkMid);
  transition: opacity 320ms;
}
.hero-cue .cue-line {
  display: inline-block; width: 1px; height: 28px;
  background: linear-gradient(180deg, transparent 0%, var(--accent) 100%);
  position: relative; overflow: hidden;
}
.hero-cue .cue-line::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: -28px; height: 28px;
  background: linear-gradient(180deg, var(--accentHi) 0%, transparent 100%);
  animation: cueRun 2.4s ease-in-out infinite;
}
@keyframes cueRun {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}
.hero-cue .cue-kanji {
  font-family: var(--jp);
  font-size: 13px; color: var(--accent); letter-spacing: 0;
}
/* The cue dims to a hint after the user has begun the journey,
   and disappears entirely on the last scene. */
body[data-hero-scene="3"] .hero-cue { opacity: 0; }

@media (max-width: 720px) {
  .hero-foot { bottom: 22px; gap: 14px; }
  .hp-dot { width: 18px; }
  .hp-dot.active { width: 30px; }
}

/* Reduced-motion / no-JS fallback: just print the welcome scene. */
@media (prefers-reduced-motion: reduce) {
  section.hero { height: 100vh; height: 100dvh; }
  .hero-pin { position: relative; }
  .scene { opacity: 0; }
  .scene-0 { opacity: 1 !important; }
  .hero-cue { display: none; }
}

/* ── INTRO REVEAL ───────────────────────────────────────── */
.intro {
  padding: 120px 0;
}
@media (max-width: 720px) { .intro { padding: 80px 0; } }
.intro-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
}
@media (max-width: 980px) {
  .intro-grid { grid-template-columns: 1fr; gap: 48px; }
}
.intro-lede .eyebrow { margin-bottom: 28px; display: inline-flex; }
.intro-lede .lede {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--inkHi);
  font-weight: 300;
  max-width: 720px;
}
.intro-lede .lede em {
  font-style: italic;
  color: var(--accentHi);
  font-weight: 300;
}
.intro-ctas {
  margin-top: 36px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.intro-spec {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--inkMid);
  letter-spacing: 0.06em;
  line-height: 1.85;
  border-left: 0.5px solid var(--rule);
  padding-left: 22px;
}
.intro-spec .row {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-bottom: 0.5px dotted var(--rule);
  gap: 16px;
}
.intro-spec .row span:last-child { color: var(--inkHi); }
.intro-spec .row:last-child { border-bottom: none; }
.intro-spec .row .hash-val { color: var(--accent); }
.intro-spec .label {
  display: block; margin-top: 14px; margin-bottom: 6px;
  color: var(--inkLo); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 9.5px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--ui); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 200ms;
  border: 0.5px solid transparent;
}
.btn-primary {
  background: var(--accent); color: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 4px 24px rgba(110, 122, 74, 0.35);
}
.btn-primary:hover {
  background: var(--accentHi); border-color: var(--accentHi);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(110, 122, 74, 0.45);
}
.btn-ghost {
  background: transparent; color: var(--inkHi);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--inkHi); }
.btn .arrow {
  width: 14px; height: 14px;
  transition: transform 200ms;
}
.btn:hover .arrow { transform: translateX(3px); }

/* ── Section heading ────────────────────────────────────── */
.section-head {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  margin-bottom: 60px;
  align-items: start;
}
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
}
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.0;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--inkHi);
}
.section-head h2 em {
  font-style: italic; color: var(--accentHi); font-weight: 300;
}
.section-head p {
  font-family: var(--ui); font-size: 16px;
  color: var(--ink); max-width: 580px;
  line-height: 1.55;
}

/* ── Manifesto block ────────────────────────────────────── */
.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}
@media (max-width: 800px) { .manifesto-grid { grid-template-columns: 1fr; } }
.manifesto-cell {
  padding: 36px 32px;
  border-right: 0.5px solid var(--rule);
  position: relative;
  transition: background 300ms;
}
.manifesto-cell:hover { background: var(--surface); }
.manifesto-cell:last-child { border-right: none; }
@media (max-width: 800px) {
  .manifesto-cell {
    border-right: none;
    border-bottom: 0.5px solid var(--rule);
  }
  .manifesto-cell:last-child { border-bottom: none; }
}
.manifesto-cell .num {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--accent); letter-spacing: 0.18em;
  margin-bottom: 24px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
}
.manifesto-cell .num .kanji {
  font-size: 28px; font-weight: 300;
  color: var(--inkLo); opacity: 0.5; letter-spacing: 0;
}
.manifesto-cell h3 {
  font-family: var(--display); font-size: 26px;
  font-weight: 400; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--inkHi);
  margin-bottom: 14px;
}
.manifesto-cell p {
  font-size: 14.5px; line-height: 1.55;
  color: var(--inkMid);
}

/* ── How it works ───────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: step;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 32px 28px 32px 0;
  border-top: 0.5px solid var(--rule);
  position: relative;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 10.5px;
  color: var(--accent); letter-spacing: 0.18em;
  display: block; margin-bottom: 18px;
}
.step .glyph {
  width: 44px; height: 44px;
  border: 0.5px solid var(--rule);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  color: var(--accent);
  transition: border-color 250ms, color 250ms, transform 250ms;
}
.step:hover .glyph {
  border-color: var(--accent);
  color: var(--accentHi);
  transform: translateY(-2px);
}
.step h4 {
  font-family: var(--display); font-size: 19px;
  font-weight: 500; color: var(--inkHi);
  margin-bottom: 8px; letter-spacing: -0.01em;
}
.step p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--inkMid);
}

/* ── Proof artifact ─────────────────────────────────────── */
.artifact-wrap {
  margin-top: 60px;
  border: 0.5px solid var(--rule);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  padding: 48px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 880px) {
  .artifact-wrap { grid-template-columns: 1fr; padding: 32px; gap: 36px; }
}
.artifact-wrap::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(110, 122, 74, 0.18), transparent 50%);
  pointer-events: none;
}
.artifact-vis {
  position: relative;
  aspect-ratio: 1.1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.artifact-vis svg { width: 100%; height: 100%; }
.artifact-vis .vis-aura-circle { transform-origin: 100px 100px; animation: visAura 6s ease-in-out infinite; }
.artifact-vis .vis-stamp       { transform-origin: 100px 100px; animation: visStamp 6s ease-in-out infinite; }
@keyframes visAura {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.06); }
}
@keyframes visStamp {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.65; }
}
.artifact-text { position: relative; z-index: 1; }
.artifact-text .eyebrow { margin-bottom: 18px; }
.artifact-text h3 {
  font-family: var(--display); font-size: 38px;
  font-weight: 400; letter-spacing: -0.02em;
  color: var(--inkHi); line-height: 1.08;
  margin-bottom: 18px;
}
.artifact-text p {
  font-size: 15px; color: var(--ink); margin-bottom: 12px;
  max-width: 460px;
}
.receipt {
  margin-top: 24px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--inkMid); line-height: 1.95;
}
.receipt .line {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 7px 0;
  border-bottom: 0.5px dotted var(--rule);
}
.receipt .line:last-child { border-bottom: none; }
.receipt .line span:last-child { color: var(--inkHi); }
.receipt .line .verified {
  color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
}

/* ── In hand · proof flow ───────────────────────────────── */
.flow {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr; gap: 40px; }
}
.flow-phone { display: flex; justify-content: center; }

.flow-diagram {
  border: 0.5px solid var(--rule);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.flow-diagram::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(110, 122, 74, 0.10), transparent 60%);
  pointer-events: none;
}
.flow-svg {
  width: 100%; height: auto;
  position: relative; z-index: 1;
}

/* On-device animations */
.flow-svg .gps-dots circle { animation: gpsBlink 2.4s ease-in-out infinite; transform-origin: center; }
.flow-svg .gps-dots circle:nth-child(1) { animation-delay: 0.0s; }
.flow-svg .gps-dots circle:nth-child(2) { animation-delay: 0.2s; }
.flow-svg .gps-dots circle:nth-child(3) { animation-delay: 0.4s; }
.flow-svg .gps-dots circle:nth-child(4) { animation-delay: 0.6s; }
.flow-svg .gps-dots circle:nth-child(5) { animation-delay: 0.8s; }
.flow-svg .gps-dots circle:nth-child(6) { animation-delay: 1.0s; }
@keyframes gpsBlink {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 1.00; }
}

.flow-svg .hr-line {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: hrDraw 3s ease-in-out infinite;
}
@keyframes hrDraw {
  0%   { stroke-dashoffset: 360; opacity: 0.35; }
  60%  { stroke-dashoffset: 0;   opacity: 1;    }
  100% { stroke-dashoffset: -360; opacity: 0;   }
}
.flow-svg .trace-squiggle {
  stroke-dasharray: 220;
  animation: traceLoop 4s ease-in-out infinite;
}
@keyframes traceLoop {
  0%   { stroke-dashoffset: 220; opacity: 0.4; }
  60%  { stroke-dashoffset: 0;   opacity: 1;   }
  100% { stroke-dashoffset: -220; opacity: 0;  }
}

.flow-svg .bit { opacity: 0; }
.flow-svg .bit-a { animation: bitFlow1 3.6s linear infinite; animation-delay: 0.0s; }
.flow-svg .bit-b { animation: bitFlow1 3.6s linear infinite; animation-delay: 0.6s; }
.flow-svg .bit-c { animation: bitFlow1 3.6s linear infinite; animation-delay: 1.2s; }
.flow-svg .bit-d { animation: bitFlow2 3.6s linear infinite; animation-delay: 0.6s; }
@keyframes bitFlow1 {
  0%   { transform: translateX(0);  opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(30px); opacity: 0; }
}
@keyframes bitFlow2 {
  0%   { transform: translateX(0);  opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(30px); opacity: 0; }
}

.flow-svg .forge-pulse {
  transform-origin: 260px 200px;
  animation: forgePulse 2.4s ease-in-out infinite;
}
@keyframes forgePulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1.00; transform: scale(1.08); }
}
.flow-svg .hanko-box {
  transform-origin: 260px 200px;
  animation: hankoStamp 4s ease-in-out infinite;
}
.flow-svg .hanko-glyph {
  transform-origin: 260px 200px;
  animation: hankoStamp 4s ease-in-out infinite;
}
@keyframes hankoStamp {
  0%, 70%, 100% { transform: scale(1); }
  78%           { transform: scale(0.84); }
  86%           { transform: scale(1.04); }
}
.flow-svg .forge-ticks line {
  transform-origin: 260px 200px;
  animation: forgeTicks 4s linear infinite;
}
@keyframes forgeTicks {
  0%   { opacity: 0.30; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.30; }
}

.flow-svg .server-payload {
  transform-origin: 430px 232px;
  animation: payloadIn 4s ease-in-out infinite;
}
@keyframes payloadIn {
  0%, 60% { opacity: 0.55; }
  80%     { opacity: 1.00; }
  100%    { opacity: 0.85; }
}

.flow-caption {
  margin-top: 18px;
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  color: var(--inkMid); letter-spacing: 0.06em;
  position: relative; z-index: 1;
}
.flow-caption span { padding-left: 10px; border-left: 1.5px solid var(--accent); }
@media (max-width: 540px) {
  .flow-caption { flex-direction: column; gap: 8px; }
}

/* ── Server boundary table ──────────────────────────────── */
.boundary-table {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 0.5px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
}
@media (max-width: 720px) { .boundary-table { grid-template-columns: 1fr; } }
.bt-col {
  padding: 28px 28px 32px;
  position: relative;
}
.bt-col-yes { border-right: 0.5px solid var(--rule); background: rgba(110, 122, 74, 0.04); }
@media (max-width: 720px) {
  .bt-col-yes { border-right: none; border-bottom: 0.5px solid var(--rule); }
}
.bt-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.bt-tag {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--inkMid);
}
.bt-col-yes .bt-tag { color: var(--accentHi); }
.bt-glyph {
  font-family: var(--display); font-size: 28px; font-weight: 300;
  width: 36px; height: 36px;
  border: 0.5px solid var(--rule);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--inkLo);
}
.bt-col-yes .bt-glyph { border-color: var(--accent); color: var(--accent); }
.bt-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.bt-col li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 0;
  border-top: 0.5px dotted var(--rule);
}
.bt-col li:first-child { border-top: none; padding-top: 0; }
.bt-col li strong {
  font-family: var(--display); font-size: 15px; font-weight: 500;
  color: var(--inkHi); letter-spacing: -0.005em;
}
.bt-col li span {
  font-family: var(--ui); font-size: 13px; color: var(--inkMid);
  line-height: 1.5;
}
.bt-col-no li strong { text-decoration: line-through;
  text-decoration-color: rgba(141, 137, 122, 0.5); text-decoration-thickness: 0.5px; }

/* ── Boundaries / never block ───────────────────────────── */
.never-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .never-grid { grid-template-columns: 1fr; } }
.never {
  padding: 22px 24px;
  border: 0.5px solid var(--rule);
  border-radius: 14px;
  display: flex; gap: 18px;
  align-items: flex-start;
  background: var(--surface);
  transition: border-color 250ms, transform 250ms;
}
.never:hover { border-color: rgba(110, 122, 74, 0.4); transform: translateY(-2px); }
.never .x {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: 0.5px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 14px;
}
.never strong {
  display: block;
  font-family: var(--display); font-size: 16.5px; font-weight: 500;
  color: var(--inkHi); margin-bottom: 4px; letter-spacing: -0.005em;
}
.never span {
  font-size: 13.5px; color: var(--inkMid); line-height: 1.5;
}

/* ── Phone (used in In Hand) ────────────────────────────── */
.device-frame {
  width: 280px; aspect-ratio: 9 / 19.5;
  background: #000;
  border: 8px solid #1A1A17;
  border-radius: 44px;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.05),
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(110, 122, 74, 0.15);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.device-frame::before {
  content: ''; position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 28px; border-radius: 14px;
  background: #000; z-index: 5;
}
.device-screen {
  position: absolute; inset: 0;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 50px 22px 26px;
}
.device-screen .ds-eyebrow {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.22em; color: var(--inkMid);
  text-transform: uppercase;
}
.device-screen .ds-title {
  font-family: var(--display); font-size: 22px;
  color: var(--inkHi); margin-top: 6px; font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.1;
}
.device-screen .big {
  margin-top: 24px; display: flex; flex-direction: column; gap: 4px;
}
.device-screen .big .v {
  font-family: var(--mono); font-size: 52px;
  color: var(--inkHi); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.device-screen .big .u {
  font-family: var(--mono); font-size: 10px; color: var(--inkMid);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.device-screen .row2 { display: flex; gap: 24px; margin-top: 22px; }
.device-screen .row2 > div { flex: 1; }
.device-screen .row2 .v {
  font-family: var(--mono); font-size: 20px; color: var(--inkHi);
  font-variant-numeric: tabular-nums;
}
.device-screen .row2 .u {
  font-family: var(--mono); font-size: 9px; color: var(--inkMid);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.device-screen .seal {
  margin-top: auto; padding-top: 18px;
  border-top: 0.5px solid var(--rule);
  display: flex; align-items: center; gap: 12px;
}
.device-screen .seal-mark {
  width: 36px; height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 22px;
}
.device-screen .seal-text .a {
  font-family: var(--mono); font-size: 8.5px;
  color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase;
}
.device-screen .seal-text .b {
  font-family: var(--mono); font-size: 10px;
  color: var(--inkMid); margin-top: 2px;
}

/* ── Take your mark (waitlist) ──────────────────────────── */
section.mark {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(110, 122, 74, 0.10), transparent 60%),
    var(--paper);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  padding: 140px 0;
}
@media (max-width: 720px) { section.mark { padding: 90px 0; } }
.mark-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 880px) {
  .mark-inner { grid-template-columns: 1fr; gap: 40px; }
}
.mark .left .eyebrow { margin-bottom: 24px; }
.mark .left h2 {
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 300; line-height: 0.95;
  letter-spacing: -0.03em; color: var(--inkHi);
  margin-bottom: 28px;
}
.mark .left h2 em {
  font-style: italic; color: var(--accentHi); font-weight: 300;
}
.mark .left p {
  max-width: 460px; color: var(--ink);
  font-size: 16px; line-height: 1.55;
}
.mark-meta {
  margin-top: 36px;
  display: flex; flex-direction: column; gap: 14px;
}
.mark-meta .mm-row {
  display: flex; gap: 18px; align-items: center;
  padding: 14px 0;
  border-bottom: 0.5px dotted var(--rule);
  font-family: var(--mono); font-size: 12px;
  color: var(--inkMid);
}
.mark-meta .mm-row .k {
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 10.5px; color: var(--inkLo); flex: 1;
}
.mark-meta .mm-row .v { color: var(--inkHi); }

.mark-card {
  border: 0.5px solid var(--rule);
  border-radius: 20px;
  background: var(--surface);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.mark-card::before {
  content: ''; position: absolute; top: -40%; right: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(110, 122, 74, 0.22), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: drift3 18s ease-in-out infinite;
}
.mark-card .rc-eyebrow {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 8px;
  position: relative;
}
.mark-card h3 {
  font-family: var(--display); font-size: 24px;
  font-weight: 500; color: var(--inkHi);
  letter-spacing: -0.01em; margin-bottom: 8px;
  position: relative;
}
.mark-card .rc-sub {
  font-size: 14px; color: var(--inkMid);
  margin-bottom: 22px; position: relative;
}

.form-row {
  display: flex; gap: 8px;
  position: relative;
}
.form-row input {
  flex: 1; min-width: 0;
  padding: 15px 18px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  color: var(--inkHi);
  font-family: var(--ui); font-size: 14px;
  transition: border-color 180ms;
  outline: none;
}
.form-row input::placeholder { color: var(--inkLo); }
.form-row input:focus { border-color: var(--accent); }
.form-row button {
  padding: 15px 22px;
  background: var(--accent); color: var(--paper);
  border: none; border-radius: 999px;
  font-family: var(--ui); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 200ms, transform 200ms;
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.form-row button:hover {
  background: var(--accentHi); transform: translateY(-1px);
}
@media (max-width: 480px) {
  .form-row { flex-direction: column; }
  .form-row button { justify-content: center; }
}

/* Single CTA button on the mark card. Opens the Tally form modal. */
.mark-cta {
  width: 100%;
  padding: 17px 24px;
  background: var(--accent); color: var(--paper);
  border: none; border-radius: 999px;
  font-family: var(--ui); font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 200ms, transform 200ms, box-shadow 200ms;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 24px rgba(110, 122, 74, 0.3);
  position: relative;
  z-index: 1;
}
.mark-cta:hover {
  background: var(--accentHi);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(110, 122, 74, 0.45);
}
.mark-cta .arrow { transition: transform 200ms; }
.mark-cta:hover .arrow { transform: translateX(3px); }

.form-fine {
  margin-top: 14px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--inkLo); letter-spacing: 0.04em;
  line-height: 1.6;
}

.mark-success {
  display: none;
  margin-top: 18px;
  padding: 20px;
  border: 0.5px solid var(--accent);
  border-radius: 12px;
  background: rgba(110, 122, 74, 0.08);
  font-family: var(--ui); font-size: 14px; color: var(--inkHi);
  line-height: 1.5;
}
.mark-success.in { display: block; }
.mark-success strong {
  display: block; color: var(--accent);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 6px;
}

.stamp-row {
  margin-top: 24px;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0 0;
  border-top: 0.5px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  color: var(--inkMid); letter-spacing: 0.04em;
  position: relative;
}
.stamp-row .count { color: var(--inkHi); }
.stamp-row .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(110, 122, 74, 0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(110, 122, 74, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(110, 122, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 122, 74, 0); }
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; }
.faq-item {
  border-top: 0.5px solid var(--rule);
}
.faq-item:last-child { border-bottom: 0.5px solid var(--rule); }
.faq-q {
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--display); font-size: 19px;
  color: var(--inkHi); cursor: pointer;
  letter-spacing: -0.005em; font-weight: 500;
  gap: 24px;
  padding: 24px 0;
}
.faq-q::after {
  content: '+';
  font-family: var(--mono); font-size: 22px;
  color: var(--accent); transition: transform 250ms;
  flex-shrink: 0;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 320ms ease, padding 200ms;
  color: var(--inkMid); font-size: 14.5px; line-height: 1.6;
  max-width: 720px;
}
.faq-item.open .faq-a {
  max-height: 320px; padding: 0 0 24px;
}

/* ── Footer ─────────────────────────────────────────────── */
footer {
  padding: 80px 0 40px;
  border-top: 0.5px solid var(--rule);
}
footer .top-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
}
@media (max-width: 540px) {
  footer .top-row { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; }
}
footer .col h5 {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--inkLo);
  text-transform: uppercase; margin-bottom: 16px;
  font-weight: 500;
}
footer .col a {
  display: block; padding: 5px 0;
  font-size: 13.5px; color: var(--ink);
  transition: color 200ms;
}
footer .col a:hover { color: var(--accentHi); }
footer .brand-col p {
  max-width: 320px; color: var(--inkMid);
  font-size: 13.5px; margin-top: 18px;
  line-height: 1.55;
}
.wordmark--small { font-size: 16px; }
footer .bottom {
  padding-top: 28px;
  border-top: 0.5px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--inkLo); letter-spacing: 0.06em;
  flex-wrap: wrap; gap: 12px;
}

/* ── Reveal anim (scroll-driven) ────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  filter: blur(4px);
  transition:
    opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Stagger child reveals inside multi-cell sections */
.manifesto-cell.reveal { transition-delay: 0ms; }
.manifesto-cell.reveal:nth-child(2) { transition-delay: 100ms; }
.manifesto-cell.reveal:nth-child(3) { transition-delay: 200ms; }
.step.reveal { transition-delay: 0ms; }
.step.reveal:nth-child(2) { transition-delay: 80ms; }
.step.reveal:nth-child(3) { transition-delay: 160ms; }
.step.reveal:nth-child(4) { transition-delay: 240ms; }
.never.reveal:nth-child(2) { transition-delay: 80ms; }
.never.reveal:nth-child(3) { transition-delay: 160ms; }
.never.reveal:nth-child(4) { transition-delay: 240ms; }

/* ── Pinned sections (Apple-style chapter scroll) ──────────────────
   Shared infrastructure: a tall section with a sticky inner pin that
   stays glued to the viewport while sub-scenes crossfade. */

.pinned {
  position: relative;
  background: var(--paper);
  padding: 0;
  isolation: isolate;
}
.pinned-loop { height: 400vh; }    /* 4 scenes (legacy class — section is gone) */
.pinned-life { height: 960vh; }    /* 6 scenes × ~160vh of scroll dwell each */

.pinned-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 110px var(--pad) 70px;
}

.pinned-head {
  text-align: center;
  margin-bottom: 28px;
  flex-shrink: 0;
}
.pinned-head .eyebrow { display: inline-flex; }
.pinned-head h2 {
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--inkHi);
}
.pinned-head h2 em { font-style: italic; color: var(--accentHi); font-weight: 300; }

.pinned-stage {
  flex: 1;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.pinned-foot {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  flex-shrink: 0;
  padding-top: 18px;
}
.pinned-dots { display: flex; gap: 8px; }
.pinned-dots span {
  width: 22px; height: 2px;
  background: var(--rule);
  border-radius: 1px;
  transition: background-color 320ms, width 320ms;
}
.pinned-dots span.active {
  background: var(--accent);
  width: 36px;
  box-shadow: 0 0 8px rgba(110, 122, 74, 0.55);
}

/* ── 02 The Loop scenes ─────────────────────────────────────── */
.loop-scene {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.loop-scene[data-stop="0"] { opacity: 1; }
.loop-kanji {
  font-family: var(--jp);
  font-size: clamp(150px, 18vw, 260px);
  line-height: 1;
  font-weight: 400;
  color: var(--inkHi);
  filter: drop-shadow(0 0 36px rgba(110, 122, 74, 0.22));
}
.loop-primary {
  margin-top: 28px;
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1; letter-spacing: -0.025em;
  font-weight: 300; color: var(--inkHi);
}
.loop-hint {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkMid);
}
.loop-caption {
  margin-top: 22px;
  font-family: var(--ui);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent); opacity: 0.85;
}

/* ── 04 Lifecycle progress trace ──────────────────────────────
   Single elegant curving line that draws across the bottom of the
   pinned section as scroll advances. Same pattern as the hero trace.
   JS sets `--life-pct` (0..1) on documentElement. */
.life-trace {
  position: absolute;
  left: 0; right: 0; bottom: 56px;
  width: 100%; height: 64px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.7;
}
.life-trace path {
  /* JS sets --trace-len on this element to the path's actual length
     so the line completes exactly when the user reaches the boundary scene. */
  stroke-dasharray: var(--trace-len, 1800);
  stroke-dashoffset: calc(var(--trace-len, 1800) * (1 - var(--life-pct, 0)));
  transition: stroke-dashoffset 80ms linear;
  filter: drop-shadow(0 0 4px rgba(110, 122, 74, 0.6));
}
@media (max-width: 720px) {
  .life-trace { bottom: 38px; height: 44px; }
}

/* ── 04 Lifecycle scenes ────────────────────────────────────── */
.life-stage { position: relative; }

/* Each scene is layered absolutely on top of the others and occupies the
   full pinned-stage rectangle. Inside, content is centered with flex so
   visuals never expand to "fill" the stage and shove the text below the fold. */
.life-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.life-scene[data-stop="0"] { opacity: 1; }

/* Scenes 0–2 (START + RUNNING + TAP END): phone on the left, text on the right,
   centered as a horizontal pair. */
.life-scene[data-stop="0"],
.life-scene[data-stop="1"],
.life-scene[data-stop="2"] {
  flex-direction: row;
  gap: 60px;
  align-items: center;
  justify-content: center;
  text-align: left;
}
@media (max-width: 880px) {
  .life-scene[data-stop="0"],
  .life-scene[data-stop="1"],
  .life-scene[data-stop="2"] {
    flex-direction: column; text-align: center; gap: 14px;
  }
}
/* Tighter pinned padding + smaller heading on mobile so each lifecycle scene
   (pinned-head + phone + text) fits the available 100dvh without the phone
   overlapping the heading or the text getting clipped at the bottom. */
@media (max-width: 880px) {
  .pinned-pin { padding: 68px var(--pad-sm) 36px; }
  .pinned-head { margin-bottom: 10px; }
  .pinned-head h2 { font-size: clamp(20px, 5.4vw, 28px); margin-top: 6px; }
  .pinned-head .eyebrow { font-size: 10px; }
}

.life-text {
  display: flex; flex-direction: column; gap: 14px;
  width: 460px;        /* fixed width on desktop for layout consistency */
  max-width: 460px;
}
@media (max-width: 880px) {
  .life-text { width: 100%; max-width: 100%; }
}
.life-scene[data-stop="0"] .life-text,
.life-scene[data-stop="1"] .life-text,
.life-scene[data-stop="2"] .life-text {
  align-items: flex-start;
}
@media (max-width: 880px) {
  .life-scene[data-stop="0"] .life-text,
  .life-scene[data-stop="1"] .life-text,
  .life-scene[data-stop="2"] .life-text { align-items: center; }
}
.life-scene[data-stop="3"] .life-text,
.life-scene[data-stop="4"] .life-text,
.life-scene[data-stop="5"] .life-text {
  align-items: center;
  margin-top: 0;
}
.life-kanji {
  font-family: var(--jp);
  font-size: clamp(80px, 9vw, 130px);
  line-height: 1;
  color: var(--accent);
  font-weight: 400;
  filter: drop-shadow(0 0 24px rgba(110, 122, 74, 0.30));
}
.life-primary {
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--inkHi);
  letter-spacing: -0.02em;
}
.life-hint {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkMid);
}
.life-caption {
  font-family: var(--ui);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent); opacity: 0.85;
}
.life-text-final { gap: 18px; }

/* Phone container — used by scene 0 (START) and the persistent shared phone. */
.life-phone {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.life-phone .device-frame {
  width: 240px;
}

/* Persistent phone wrapper. We use the SAME flex layout as scenes 0/1/2
   (row, gap, justify-center) plus a right-side spacer the size of the
   scene text. That way the phone lands at the EXACT same x position as
   scene 0's in-scene phone and as scenes 1+2's placeholder. No drift. */
.life-shared-phone-row {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 60px;
  opacity: 0;                /* JS reveals during scenes 1+2 */
  pointer-events: none;
  z-index: 2;
  will-change: opacity;
}
.life-shared-phone {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.life-shared-phone .device-frame {
  width: 240px;
}
.life-shared-text-spacer {
  /* Same fixed width as .life-text on desktop so flex centring matches. */
  width: 460px;
  max-width: 460px;
  flex-shrink: 0;
}

/* Invisible spacer in scenes 1 and 2 that reserves the same flex space
   the per-scene phone used to take, so the text aligns identically. */
.life-phone-placeholder {
  width: 240px;
  flex-shrink: 0;
  pointer-events: none;
}

@media (max-width: 880px) {
  /* On mobile the layout stacks (column). Tighter gap + smaller spacers so
     phone + text fit the available pinned stage height without overflow. */
  .life-shared-phone-row { flex-direction: column; gap: 10px; }
  .life-shared-phone .device-frame { width: 120px; }
  /* Spacer height = roughly the text-block height we expect below the phone;
     keeps shared phone vertically centred where scene 1/2 expect it. */
  .life-shared-text-spacer { width: 100%; max-width: 100%; height: 120px; }
  .life-phone-placeholder { width: 0; height: 260px; }
}
@media (max-width: 880px) {
  /* Apply mobile screen-content sizing to BOTH the in-scene phone (.life-phone)
     and the persistent shared phone (.life-shared-phone) so the running
     counters fit the 120px-wide device on mobile. */
  .life-phone .device-frame,
  .life-shared-phone .device-frame { width: 120px; }
  .life-phone .device-frame .device-screen,
  .life-shared-phone .device-frame .device-screen { padding: 24px 9px 10px; }
  .life-phone .device-frame .device-screen .ds-eyebrow,
  .life-shared-phone .device-frame .device-screen .ds-eyebrow { font-size: 6px; letter-spacing: 0.14em; }
  .life-phone .device-frame .device-screen .ds-title,
  .life-shared-phone .device-frame .device-screen .ds-title { font-size: 10px; margin-top: 2px; }
  .life-phone .device-frame .device-screen .big,
  .life-shared-phone .device-frame .device-screen .big { margin-top: 8px; gap: 1px; }
  .life-phone .device-frame .device-screen .big .v,
  .life-shared-phone .device-frame .device-screen .big .v { font-size: 18px; letter-spacing: -0.025em; }
  .life-phone .device-frame .device-screen .big .u,
  .life-shared-phone .device-frame .device-screen .big .u { font-size: 6px; letter-spacing: 0.12em; }
  .life-phone .device-frame .device-screen .row2,
  .life-shared-phone .device-frame .device-screen .row2 { gap: 6px; margin-top: 8px; }
  .life-phone .device-frame .device-screen .row2 .v,
  .life-shared-phone .device-frame .device-screen .row2 .v { font-size: 9.5px; }
  .life-phone .device-frame .device-screen .row2 .u,
  .life-shared-phone .device-frame .device-screen .row2 .u { font-size: 5.5px; letter-spacing: 0.08em; white-space: nowrap; }
  .life-shared-phone .device-frame .life-hr { margin-top: 8px; height: 18px; }
  .life-phone .device-frame .life-end,
  .life-shared-phone .device-frame .life-end,
  .life-phone .device-frame .life-end-pressed,
  .life-shared-phone .device-frame .life-end-pressed { padding: 6px; font-size: 6.5px; letter-spacing: 0.14em; }
  .life-shared-phone.is-ending .life-end-pressed {
    font-size: 7.5px;
    letter-spacing: 0.10em;
  }
  /* Smaller life-text typography so the primary line + caption + hint fit
     under the (now smaller) phone without spilling past the pinned bottom. */
  .life-text { gap: 6px; }
  .life-kanji { font-size: clamp(36px, 9vw, 52px); }
  .life-primary { font-size: clamp(20px, 5.4vw, 28px); line-height: 1.1; }
  .life-hint { font-size: 9px; letter-spacing: 0.16em; }
  .life-caption { font-size: 8.5px; letter-spacing: 0.18em; }
}
.live-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  box-shadow: 0 0 8px rgba(110, 122, 74, 0.7);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.live { display: inline-flex; align-items: center; }
.life-hr {
  margin-top: 22px; width: 100%; height: 38px;
  overflow: hidden;
}
/* The HR path is translated by JS based on scrollPos so the heartbeat
   moves as the reader scrolls, not on a free-running timer. */
.life-hr-line {
  transform-origin: 0 0;
  transform-box: fill-box;
  will-change: transform;
}
.life-end {
  margin-top: auto;
  text-align: center;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--inkLo);
  padding: 12px;
  border: 0.5px dotted var(--rule);
  border-radius: 999px;
}
/* ── START scene (scene 0) phone — shows the home screen with a big
   target mark + a Start button that visibly presses on entry. */
.device-screen--start {
  align-items: center;
}
.life-start-mark {
  margin: clamp(28px, 4vh, 48px) auto clamp(20px, 3vh, 32px);
  width: clamp(80px, 14vh, 120px);
  height: clamp(80px, 14vh, 120px);
  position: relative;
}
.life-start-mark svg { width: 100%; height: 100%; display: block; }
.life-start-mark .lsm-ring {
  transform-origin: 50px 50px;
  transform-box: view-box;
  filter: drop-shadow(0 0 6px rgba(110, 122, 74, 0.4));
}
.life-start-mark .lsm-ring-mid {
  animation: lsmRing 2400ms ease-out infinite;
  opacity: 0;
}
@keyframes lsmRing {
  0%   { opacity: 0.7; transform: scale(0.55); }
  100% { opacity: 0;   transform: scale(1.35); }
}
.life-start-mark .lsm-dot {
  transform-origin: 50px 50px;
  transform-box: view-box;
  filter: drop-shadow(0 0 8px rgba(110, 122, 74, 0.7));
  animation: brandPulse 3.4s ease-in-out infinite;
}
.life-start-meta {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--inkLo);
  text-align: center;
}

/* Start button — outlined dotted by default, presses on scene entry
   exactly like the End button. Mirrors that interaction language. */
.life-start-button {
  margin-top: auto;
  position: relative;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkLo);
  padding: 12px;
  border: 0.5px dotted var(--rule);
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  transform: scale(1);
}
.life-start-button > span { position: relative; z-index: 2; }
.life-start-pulse {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  z-index: 1;
}
@keyframes startPress {
  0% {
    background: transparent; color: var(--inkLo);
    border-color: var(--rule); transform: scale(1);
  }
  35% {
    background: var(--accent); color: var(--paper);
    border-color: var(--accent); transform: scale(0.92);
  }
  60% {
    background: var(--accent); color: var(--paper);
    border-color: var(--accent); transform: scale(1.05);
  }
  100% {
    background: var(--accent); color: var(--paper);
    border-color: var(--accent); transform: scale(1);
  }
}
.life-scene[data-stop="0"].active .life-start-button {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  border-style: solid;
  animation: startPress 600ms cubic-bezier(0.18, 0.7, 0.2, 1) 50ms forwards;
}
.life-scene[data-stop="0"].active .life-start-pulse {
  animation: endRipple 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 100ms forwards;
}

/* Wrapper that lets the rings expand beyond the button without being
   clipped by the button's overflow: hidden. */
.life-start-tap {
  position: relative;
  margin-top: auto;
  align-self: stretch;
}
.life-start-tap .life-start-button {
  margin-top: 0;
  position: relative;
  z-index: 2;
}

/* Big concentric tap rings that expand outward from the Start button when
   it gets pressed. Two staggered rings make the tap feedback unmissable. */
.life-start-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  z-index: 1;
}
@keyframes startRing {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1);   }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(4.5); }
}
.life-scene[data-stop="0"].active .life-start-ring {
  animation: startRing 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 100ms forwards;
}
.life-scene[data-stop="0"].active .life-start-ring-2 {
  animation: startRing 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 280ms forwards;
}
@media (max-width: 880px) {
  .life-phone .device-frame .life-start-button { padding: 6px; font-size: 7px; letter-spacing: 0.14em; }
  .life-scene[data-stop="0"].active .life-phone .device-frame .life-start-button { font-size: 8px; letter-spacing: 0.12em; }
  .life-phone .device-frame .life-start-meta { font-size: 6px; }
  .life-phone .device-frame .life-start-mark { width: clamp(48px, 9vh, 70px); height: clamp(48px, 9vh, 70px); margin: clamp(12px, 2.4vh, 20px) auto clamp(8px, 1.6vh, 16px); }
}

/* End button on scene 1 — default state mirrors scene 0's outlined "End run".
   When scene 1 becomes active the button visibly *presses* (scale down,
   fill moss, white ripple expands), so the "you tap end" beat actually
   feels like an action rather than a fait accompli. */
.life-end-pressed {
  margin-top: auto;
  position: relative;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkLo);
  padding: 12px;
  border: 0.5px dotted var(--rule);
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  transform: scale(1);
  transition:
    background 320ms ease-out,
    color 320ms ease-out,
    border-color 320ms ease-out,
    border-style 0ms 320ms,
    transform 280ms cubic-bezier(0.18, 0.7, 0.2, 1);
}
.life-end-pressed > span { position: relative; z-index: 2; }

/* Press sequence keyframe: scale down → flash to filled moss → settle. */
@keyframes endPress {
  0% {
    background: transparent;
    color: var(--inkLo);
    border-color: var(--rule);
    transform: scale(1);
  }
  35% {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
    transform: scale(0.92);
  }
  60% {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
    transform: scale(1.05);
  }
  100% {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
    transform: scale(1);
  }
}
.life-shared-phone.is-ending .life-end-pressed {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  border-style: solid;
  animation: endPress 550ms cubic-bezier(0.18, 0.7, 0.2, 1) 50ms forwards;
}

/* The pulse element is now the white ripple that expands once on press. */
.life-end-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  z-index: 1;
}
.life-shared-phone.is-ending .life-end-pulse {
  animation: endRipple 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 100ms forwards;
}
@keyframes endRipple {
  0%   { opacity: 0.7; transform: scale(0); }
  100% { opacity: 0;   transform: scale(2.6); }
}
.life-hint-screen {
  margin-top: 12px;
  text-align: center;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}

/* ── Scene 2 · FORGE (particle convergence) ─────────────────── */
.forge-stage {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.forge-svg {
  width: 100%; max-width: 540px;
  height: auto; max-height: 360px;
}
.forge-aura {
  /* radius driven by JS (--forge-progress 0..1) */
  transition: r 200ms linear;
}
.forge-particles circle {
  /* JS sets transform per particle to drive convergence */
  fill: var(--accent);
  transition: transform 80ms linear, opacity 200ms linear;
  will-change: transform, opacity;
  transform-origin: center;
  transform-box: fill-box;
}
.forge-hanko { opacity: 0; }
.forge-hanko-box, .forge-hanko-glyph {
  transform-origin: 300px 200px;
  transform-box: view-box;
}
.forge-label { opacity: 0; }

/* ── Scene 3 · TRANSMIT ─────────────────────────────────────── */
/* All sizing uses clamp() so the scene reads small on phone but big on
   laptop. Mobile floors are kept tight; desktop ceilings are generous. */
.transmit-stage {
  position: relative;
  width: 100%;
  max-width: 920px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: clamp(60px, 8vw, 110px) 1fr clamp(60px, 8vw, 110px);
  gap: clamp(20px, 2.5vw, 36px);
  align-items: center;
  height: clamp(170px, 22vh, 260px);
}
.tx-phone, .tx-server {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tx-phone-icon  { width: clamp(56px, 7vw, 100px); height: auto; }
.tx-server-icon { width: clamp(56px, 7vw, 100px); height: clamp(56px, 7vw, 100px); }
.tx-tag {
  font-family: var(--mono);
  font-size: clamp(9.5px, 1vw, 14px);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--inkMid);
}
.tx-wire {
  position: relative;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.tx-wire-svg { width: 100%; height: 60px; }
.tx-packet {
  position: absolute;
  /* Packet starts at the phone (0%) and travels to the server (100%).
     JS overrides --tx-progress (0..1) for left, --tx-scale for size,
     and --tx-opacity for fade. The packet leaves small, grows full size
     mid-flight, then shrinks back as it lands so the server stays the
     visual anchor. */
  left: calc(var(--tx-progress, 0) * 100%);
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--tx-scale, 1));
  /* Origin on the right edge: scaling down keeps the right edge fixed and
     pulls the left edge inward, so the packet visually collapses TOWARD
     the server (which sits to the right) instead of shrinking in place. */
  transform-origin: 100% 50%;
  background: var(--surface);
  border: 0.5px solid rgba(110, 122, 74, 0.4);
  border-radius: clamp(10px, 1vw, 14px);
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 22px);
  min-width: clamp(180px, 24vw, 320px);
  font-family: var(--mono);
  font-size: clamp(9.5px, 1vw, 13px);
  color: var(--inkMid);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(110,122,74,0.2);
  opacity: var(--tx-opacity, 1);
  transition: opacity 120ms linear;
  will-change: left, transform, opacity;
}
.tx-packet-tag {
  font-family: var(--mono);
  font-size: clamp(8.5px, 0.85vw, 11.5px);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.tx-packet-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 4px 0;
  letter-spacing: 0.04em;
}
.tx-packet-line span:last-child { color: var(--inkHi); }

/* Server icon receipt: glows + pulses up briefly when the packet lands. */
.tx-server .tx-server-icon {
  transition: filter 500ms ease-out, transform 500ms cubic-bezier(0.18, 0.7, 0.2, 1);
}
.tx-server.lit .tx-server-icon {
  filter: drop-shadow(0 0 18px rgba(110, 122, 74, 0.9))
          drop-shadow(0 0 6px rgba(139, 153, 97, 0.8));
  transform: scale(1.16);
}
.tx-server.lit .tx-server-icon circle { fill: var(--accentHi); }
.tx-server.lit .tx-tag { color: var(--accent); }

/* Device icon dispatch: mirror of the server. Glows + pulses up while the
   seal is being birthed at the device, then dims as the seal leaves. */
.tx-phone .tx-phone-icon {
  transition: filter 500ms ease-out, transform 500ms cubic-bezier(0.18, 0.7, 0.2, 1);
}
.tx-phone.lit .tx-phone-icon {
  filter: drop-shadow(0 0 18px rgba(110, 122, 74, 0.9))
          drop-shadow(0 0 6px rgba(139, 153, 97, 0.8));
  transform: scale(1.16);
}
.tx-phone.lit .tx-phone-icon rect { stroke: var(--accentHi); }
.tx-phone.lit .tx-phone-icon text { fill: var(--accentHi); }
.tx-phone.lit .tx-tag { color: var(--accent); }

/* ── Scene 4 · BOUNDARY ─────────────────────────────────────── */
.boundary-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .boundary-stage { grid-template-columns: 1fr; }
  .bd-divider { display: none; }
}
.bd-col {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px;
  border-radius: 16px;
  border: 0.5px solid var(--rule);
  background: var(--surface);
}
.bd-col-server { background: rgba(110, 122, 74, 0.06); border-color: rgba(110, 122, 74, 0.35); }
.bd-tag {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--inkMid);
  text-align: left;
}
.bd-col-server .bd-tag { color: var(--accentHi); }
.bd-card {
  display: flex; flex-direction: column;
  font-family: var(--mono); font-size: 11px;
  color: var(--inkMid);
}
.bd-line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0;
  border-bottom: 0.5px dotted var(--rule);
}
.bd-line:last-child { border-bottom: none; }
.bd-line span:last-child { color: var(--inkHi); }
.bd-line.bd-status span:last-child { color: var(--accent); }
.bd-stack {
  display: flex; flex-direction: column; gap: 0;
  font-family: var(--mono); font-size: 11px;
}
.bd-stays {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-bottom: 0.5px dotted var(--rule);
  opacity: 0.55;
}
.bd-stays:last-child { border-bottom: none; }
.bd-stays strong {
  font-family: var(--display); font-size: 13px;
  font-weight: 500; color: var(--inkHi);
  letter-spacing: -0.005em;
}
.bd-stays span { color: var(--inkMid); text-align: right; }
.bd-bytes {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--inkLo);
  text-align: left;
}
.bd-divider {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  width: 36px;
}
.bd-divider-line {
  flex: 1;
  width: 0.5px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
}
.bd-divider-glyph {
  font-family: var(--jp);
  font-size: 22px; color: var(--accent);
  border: 0.5px solid var(--accent);
  border-radius: 999px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 720px) {
  /* On mobile the boundary stage stacks; tighten everything so it fits one viewport. */
  .boundary-stage { gap: 12px; }
  .bd-col { padding: 14px 16px; gap: 8px; }
  .bd-card, .bd-stack { font-size: 10px; }
  .bd-line, .bd-stays { padding: 5px 0; }
  .bd-stays strong { font-size: 11.5px; }
  .bd-bytes { font-size: 9px; }
  .life-text-final .life-primary { font-size: clamp(24px, 8vw, 36px); }
  .life-text-final .life-hint { font-size: 9.5px; letter-spacing: 0.18em; }
}

/* ── Reduced motion · static fallback for pinned sections ───── */
@media (prefers-reduced-motion: reduce) {
  .pinned { height: auto !important; padding: 80px 0; }
  .pinned-pin { position: relative; height: auto; padding: 0 var(--pad); }
  .pinned-stage {
    height: auto;
    display: flex; flex-direction: column; gap: 80px;
    margin-top: 40px;
  }
  .loop-scene, .life-scene {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
  }
  .pinned-foot { display: none; }
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero-title .line, .hero-meta, .hero-cue { opacity: 1 !important; transform: none !important; }
}