/* =========================================================
   RULES v2 — scroll-driven scenes
   Each .rule-scene is tall (multi-vh) and its .rule-stage is
   sticky-pinned to the viewport. JS writes a 0..1 progress to
   the stage as `--p`; the CSS reads it to drive animations.
   ========================================================= */

.rules-v2 {
  position: relative;
  padding: 60px 0 0;
}

/* ---- Intro ---- */
.rules-intro {
  text-align: center;
  padding: 80px 24px 60px;
}
.rules-intro .rn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-3);
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.rules-intro h2 {
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.05em;
  font-weight: 800;
  margin: 18px 0 8px;
  background: linear-gradient(180deg, #fff 0%, #888 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.rules-intro .lede {
  color: var(--text-3);
  font-size: 15px;
  margin: 0;
}

/* ---- Scene scaffolding ---- */
.rule-scene {
  position: relative;
  height: 240vh;            /* scroll runway per scene */
}
.rule-scene[data-scene="vapor"] {
  height: 360vh;            /* extra runway so "Nothing" can linger after the rest evaporates */
}
.rule-scene[data-scene="meet"] {
  /* animation completes at p=1 (67% of travel), then ~70vh dwell before unpinning */
  height: 310vh;
}
.rule-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  --p: 0;                   /* scroll progress 0..1, written by JS */
}
.rule-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 64px;
  width: 100%;
}
.rule-layout.flip { grid-template-columns: 1fr 1.05fr; }
.rule-layout.flip .rule-copy { order: 2; }
.rule-layout.flip .rule-visual { order: 1; }

@media (max-width: 900px) {
  .rule-scene { height: 200vh; }
  .rule-scene[data-scene="meet"] { height: 260vh; } /* ~60vh dwell on mobile */
  .rule-layout, .rule-layout.flip {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rule-layout.flip .rule-copy,
  .rule-layout.flip .rule-visual { order: initial; }
}

.rule-copy .rn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.rule-copy .rn .dot {
  width: 6px; height: 6px; border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}
.rule-copy h3 {
  font-size: clamp(36px, 5.4vw, 72px);
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 18px;
}

/* ---- Scroll-driven heading crossfade (meet scene) ---- */
.meet-heading {
  /* Stack both h3s in the same grid cell — no layout shift */
  display: grid;
  margin: 0 0 18px;
}
.meet-heading h3 {
  grid-area: 1 / 1;
  margin: 0;
  will-change: opacity, transform;
}
/* "It's a party for two." — fades up and out as scroll progresses */
.meet-head-a {
  --ma: clamp(0, calc((var(--p) - 0.3) * 5), 1);
  opacity: calc(1 - var(--ma));
  transform: translateY(calc(var(--ma) * -14px));
}
/* "and you're invited." — rises in from below once the first is gone */
.meet-head-b {
  --mb: clamp(0, calc((var(--p) - 0.52) * 5), 1);
  opacity: var(--mb);
  transform: translateY(calc((1 - var(--mb)) * 16px));
}
.rule-body {
  color: var(--text-3);
  font-size: clamp(15px, 1.3vw, 17px);
  max-width: 46ch;
  margin: 0;
  line-height: 1.55;
}

.rule-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  justify-self: center;
}

/* =========================================================
   SCENE 1 — vapor (centered, no chrome)
   `--ph` = held progress. We freeze at 0 for the first chunk
   of scroll so the title sits centered before evaporating.
   ========================================================= */
.rule-scene[data-scene="vapor"] .rule-stage {
  --hold: .38;
  --ph: clamp(0, calc((var(--p) - var(--hold)) / (1 - var(--hold))), 1);
}
.vapor-wrap {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.vapor-wrap .rn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--text-3);
}
.vapor-wrap .rn .dot {
  width: 6px; height: 6px; border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.vapor-title {
  position: relative;
  margin: 0;
  font-size: clamp(48px, 9vw, 132px);
  letter-spacing: -0.045em;
  font-weight: 800;
  line-height: 1;
}
.vapor-title .w {
  display: inline-block;
  margin-right: .25em;
  /* per-word progress, after the hold phase. --s lets a word vaporize faster
     than the default 2.4 slope so it still completes by ph=1 even with a late --d. */
  --wp: clamp(0, calc((var(--ph) - var(--d)) * var(--s, 2.4)), 1);
  transform:
    translateY(calc(var(--wp) * -64px))
    translateX(calc(var(--wp) * 6px))
    scale(calc(1 + var(--wp) * 0.08))
    rotate(calc(var(--wp) * -3deg));
  filter: blur(calc(var(--wp) * 10px));
  opacity: calc(1 - var(--wp));
  transition: none;
  will-change: transform, opacity, filter;
}

/* Two floating bubbles — no box. Just bubbles in space, evaporating. */
.vapor-bubbles {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 480px;
}
.msg-line {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 20px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 80%;
  --lp: clamp(0, calc((var(--ph) - var(--ld, 0)) * 2.6), 1);
  transform:
    translateY(calc(var(--lp) * -120px))
    scale(calc(1 - var(--lp) * 0.25))
    rotate(calc(var(--lp) * -4deg));
  filter: blur(calc(var(--lp) * 14px));
  opacity: calc(1 - var(--lp));
  will-change: transform, opacity, filter;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.6);
}
.msg-line.l1 {
  --ld: 0;
  align-self: flex-start;
  background: var(--g-rose);
  border-bottom-left-radius: 6px;
}
.msg-line.l2 {
  --ld: .12;
  align-self: flex-end;
  background: var(--g-citrus);
  color: #2a1700;
  border-bottom-right-radius: 6px;
}

/* Wisps drifting upward as we scroll */
.wisp {
  position: absolute;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.32), transparent 65%);
  filter: blur(8px);
  pointer-events: none;
  opacity: 0;
}
.wisp.w1 { left: 14%; top: 58%; --wd: 0;   }
.wisp.w2 { left: 28%; top: 64%; --wd: .1;  width: 50px; height: 50px; }
.wisp.w3 { left: 70%; top: 56%; --wd: .2;  width: 90px; height: 90px; }
.wisp.w4 { left: 44%; top: 70%; --wd: .3;  width: 60px; height: 60px; }
.wisp.w5 { left: 82%; top: 62%; --wd: .4;  width: 75px; height: 75px; }
.wisp {
  --vp: clamp(0, calc((var(--ph) - var(--wd)) * 1.4), 1);
  opacity: calc(var(--vp) * (1 - var(--vp)) * 4);
  transform:
    translateY(calc(var(--vp) * -220px))
    translateX(calc(sin(var(--vp) * 6.28rad) * 22px))
    scale(calc(0.6 + var(--vp) * 0.9));
}

/* =========================================================
   SCENE 2 — two characters approach
   ========================================================= */
.meet-stage {
  display: grid;
  place-items: end center;
  padding-bottom: 18%;
  max-width: 620px;
  aspect-ratio: 5 / 4;
}
.meet-floor {
  position: absolute;
  left: 5%; right: 5%; bottom: 16%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-2) 20%, var(--border-2) 80%, transparent);
  opacity: clamp(0, calc((var(--p) - 0.05) * 8), 1); /* fades in as scene starts */
}
.meet-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -45%) scale(calc(0.4 + var(--p) * 0.9));
  background: radial-gradient(circle, rgba(255,249,91,.18), transparent 65%);
  border-radius: 50%;
  filter: blur(20px);
  opacity: calc(var(--p) * 0.9);
  pointer-events: none;
}

.sprite {
  position: absolute;
  bottom: 16%;
  width: 96px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  /* slight walking bob via sine of progress */
  --bob: calc(sin(var(--p) * 18rad) * -4px);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.55));
}
.kid-a {
  left: 50%;
  /* starts off-screen left (vw-based), ends just left of midpoint */
  transform:
    translateX(calc(var(--p) * -105% + (1 - var(--p)) * -55vw))
    translateY(var(--bob));
}
.kid-b {
  left: 50%;
  /* starts off-screen right, ends just right of midpoint (mirrored to face left) */
  transform:
    translateX(calc(var(--p) * 5% + (1 - var(--p)) * 55vw))
    translateY(var(--bob))
    scaleX(-1);
}
@media (min-width: 600px) {
  .sprite { width: 128px; }
}

.meet-spark {
  position: absolute;
  left: 50%; bottom: 52%;
  transform: translate(-50%, 0) scale(calc(0.6 + max(0, (var(--p) - .8) * 5) * 0.6));
  font-size: 28px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255,249,91,.9), 0 0 40px rgba(255,249,91,.5);
  opacity: clamp(0, calc((var(--p) - .82) * 8), 1);
  pointer-events: none;
}

/* ---- Speech bubbles that pop in after characters arrive ---- */
.meet-bubble {
  position: absolute;
  bottom: 49%;
  background: #ffffff;
  border-radius: 12px;
  padding: 7px 11px;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  z-index: 4;
  will-change: transform, opacity;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  /* bubble-a default; bubble-b overrides below */
  --bp: clamp(0, calc((var(--p) - 0.83) * 10), 1);
  opacity: var(--bp);
  transform-origin: bottom center;
  transform: scale(var(--bp));
}
/* White downward tail — clearly visible on the dark stage */
.meet-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -6px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #ffffff;
}

/*
  kid-a final pos: left:50% + translateX(-105% of sprite-width)
    → center ≈ 50% − 53px at 96px / 50% − 70px at 128px
  kid-b final pos: left:50% + translateX(5% of sprite-width)
    → center ≈ 50% + 53px at 96px / 50% + 70px at 128px
  Bubble ~40px wide, so subtract half-width to get left edge.
*/
.bubble-a {
  left: calc(50% - 75px);   /* 96 px sprites */
}
.bubble-b {
  left: calc(50% + 33px);   /* 96 px sprites */
  --bp: clamp(0, calc((var(--p) - 0.89) * 10), 1); /* spawns a beat after bubble-a */
}
@media (min-width: 600px) {
  /* 128 px sprites */
  .bubble-a { left: calc(50% - 92px); }
  .bubble-b { left: calc(50% + 48px); }
}

/* =========================================================
   SCENE 3 — haptic: BATSHIT CRAZY
   This is the zap-attention scene. When someone Zaps you,
   your phone goes nuclear to drag you back. So the visual
   goes nuclear too: a violently shaking phone with a
   strobing screen, a continuous barrage of pulse rings, an
   eight-way starburst of lightning bolts, a screen-wide
   yellow flash, a screaming "BZZT!" comic shout, and a
   shaking headline. Once chaos kicks in, it doesn't stop.
   ========================================================= */

/* Register --chaos and --rage as numbers so their values
   inside keyframes get interpolated (not snapped). Without
   this, the scroll-driven amplitude ramps would be jittery. */
@property --chaos {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --rage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.rule-scene[data-scene="haptic"] .rule-stage {
  /* --chaos ramps 0 → 1 between p=0.20 and p=0.45, then sustains —
     used as an on/off gate for visibility (opacity, fade-in).
     --rage keeps climbing the whole way through, used to amplify
     the headline shake so it feels more unhinged the longer you
     stay in the scene. */
  --chaos: clamp(0, calc((var(--p) - 0.20) / 0.25), 1);
  --rage:  clamp(0, calc((var(--p) - 0.20) * 5),    5);
}

.haptic-stage {
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
}

/* --- Full-stage yellow/pink strobe flash ------------------ */
.haptic-flash {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at center,
      rgba(255,249,91,.55) 0%,
      rgba(255,0,102,.18) 45%,
      transparent 75%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: hapticFlash .18s steps(2, end) infinite;
  mix-blend-mode: screen;
}
@keyframes hapticFlash {
  0%, 60%, 100% { opacity: 0; }
  20%, 40%      { opacity: var(--chaos); }
}

/* --- Eight pulse rings, continuously firing -------------- */
.ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 130px; height: 130px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid #FFF95B;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255,249,91,.7));
  animation: ringBlast .55s linear infinite;
}
/* Negative delays stagger the rings into a continuous storm */
.ring.r1 { animation-delay:  0s;   border-color: #FFF95B; }
.ring.r2 { animation-delay: -.05s; border-color: #FF0066; }
.ring.r3 { animation-delay: -.10s; border-color: #FFFFFF; }
.ring.r4 { animation-delay: -.15s; border-color: #FFF95B; }
.ring.r5 { animation-delay: -.20s; border-color: #FF930F; }
.ring.r6 { animation-delay: -.25s; border-color: #FFF95B; }
.ring.r7 { animation-delay: -.30s; border-color: #FF0066; }
.ring.r8 { animation-delay: -.35s; border-color: #FFFFFF; }
@keyframes ringBlast {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: var(--chaos); border-width: 3px;  }
  100% { transform: translate(-50%, -50%) scale(5);  opacity: 0;            border-width: .5px; }
}

/* --- Lightning bolt starburst (eight bolts, irregular) --- */
.bolt {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2 4 14h6l-2 8 10-12h-6l2-8Z' fill='%23FFF95B'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(255,249,91,1))
    drop-shadow(0 0 26px rgba(255,147,15,.7));
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: boltShoot .42s ease-out infinite;
}
/* Irregular angles so the starburst feels chaotic, not symmetric */
.bolt.b1 { --ang:  12deg; animation-delay:  0s;   }
.bolt.b2 { --ang:  67deg; animation-delay: -.06s; }
.bolt.b3 { --ang: 130deg; animation-delay: -.12s; }
.bolt.b4 { --ang: 196deg; animation-delay: -.18s; }
.bolt.b5 { --ang: 240deg; animation-delay: -.24s; }
.bolt.b6 { --ang: 305deg; animation-delay: -.30s; }
.bolt.b7 { --ang: 350deg; animation-delay: -.04s; }
.bolt.b8 { --ang:  80deg; animation-delay: -.16s; }
@keyframes boltShoot {
  0%   { transform: translate(-50%, -50%) rotate(var(--ang)) translateY(-40px)  scale(.3); opacity: 0; }
  15%  { transform: translate(-50%, -50%) rotate(var(--ang)) translateY(-50px)  scale(1.2); opacity: var(--chaos); }
  100% { transform: translate(-50%, -50%) rotate(var(--ang)) translateY(-220px) scale(.4); opacity: 0; }
}

/* --- The phone: violently shaking, screen strobing ------- */
.hapt-phone {
  position: relative;
  z-index: 4;
  width: 110px; height: 210px;
  border-radius: 22px;
  background: linear-gradient(180deg, #0c0c0c, #050505);
  border: 1.5px solid #2a2a2a;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 24px 60px -10px rgba(0,0,0,.95),
    0 0 calc(40px + var(--chaos) * 60px) rgba(255,249,91, calc(.3 + var(--chaos) * .5));
  padding: 8px;
  opacity: calc(.45 + var(--chaos) * .55);
  transform-origin: center;
  animation: phoneShake .12s linear infinite;
}
.hpp-notch {
  position: absolute;
  top: 10px; left: 50%;
  width: 36px; height: 8px;
  border-radius: 6px;
  background: #000;
  transform: translateX(-50%);
  z-index: 2;
}
.hpp-screen {
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  background: #FFF95B;
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: screenFlash .14s steps(3, end) infinite;
}
.hpp-screen svg {
  width: 56px; height: 56px;
  color: #1a0000;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.4));
  animation: boltJump .14s steps(2) infinite;
}
@keyframes screenFlash {
  0%   { background: #FFF95B; }
  33%  { background: #FF0066; }
  66%  { background: #FFFFFF; }
  100% { background: #FFF95B; }
}
@keyframes boltJump {
  0%, 100% { transform: scale(1)    rotate(0deg);  }
  50%      { transform: scale(1.18) rotate(-8deg); }
}
@keyframes phoneShake {
  0%,100% { transform: translate(calc(var(--chaos) * -2px), calc(var(--chaos) *  1px)) rotate(calc(var(--chaos) * -1.5deg)); }
  10%     { transform: translate(calc(var(--chaos) *  6px), calc(var(--chaos) * -5px)) rotate(calc(var(--chaos) *  2deg));    }
  20%     { transform: translate(calc(var(--chaos) * -8px), calc(var(--chaos) *  4px)) rotate(calc(var(--chaos) * -2deg));    }
  30%     { transform: translate(calc(var(--chaos) *  7px), calc(var(--chaos) *  6px)) rotate(calc(var(--chaos) *  1deg));    }
  40%     { transform: translate(calc(var(--chaos) * -5px), calc(var(--chaos) * -7px)) rotate(calc(var(--chaos) * -1deg));    }
  50%     { transform: translate(calc(var(--chaos) *  9px), calc(var(--chaos) *  2px)) rotate(calc(var(--chaos) *  2deg));    }
  60%     { transform: translate(calc(var(--chaos) * -6px), calc(var(--chaos) * -3px)) rotate(calc(var(--chaos) * -.5deg));   }
  70%     { transform: translate(calc(var(--chaos) *  4px), calc(var(--chaos) *  8px)) rotate(calc(var(--chaos) *  1deg));    }
  80%     { transform: translate(calc(var(--chaos) * -7px), calc(var(--chaos) * -4px)) rotate(calc(var(--chaos) * -2deg));    }
  90%     { transform: translate(calc(var(--chaos) *  5px), calc(var(--chaos) *  3px)) rotate(calc(var(--chaos) *  .5deg));   }
}

/* --- "BZZT!" comic-book shout ---------------------------- */
.hapt-shout {
  position: absolute;
  left: 50%; top: 14%;
  font: 900 56px/1 "Impact", "Arial Black", ui-sans-serif, sans-serif;
  letter-spacing: -.02em;
  color: #FFF95B;
  -webkit-text-stroke: 3px #FF0066;
  text-shadow:
    5px 5px 0 #FF0066,
    0 0 24px rgba(255,249,91,.95),
    0 0 60px rgba(255,0,102,.7);
  opacity: var(--chaos);
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  animation: shoutPunch .22s steps(3, end) infinite;
}
@keyframes shoutPunch {
  0%   { transform: translate(-50%, -50%) rotate(-14deg) scale(.9);   }
  33%  { transform: translate(-46%, -52%) rotate(-8deg)  scale(1.12); }
  66%  { transform: translate(-54%, -48%) rotate(-18deg) scale(.95);  }
  100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.05); }
}

/* --- Headline: shakes harder and harder as you scroll ---- */
.haptic-text h3 {
  display: inline-block;
  transform-origin: center;
  animation: headlineShake .08s linear infinite;
  will-change: transform;
}
@keyframes headlineShake {
  0%,100% { transform: translate(0, 0) rotate(0); }
  10%     { transform: translate(calc(var(--rage) * -7px),  calc(var(--rage) *  5px)) rotate(calc(var(--rage) * -1.2deg)); }
  20%     { transform: translate(calc(var(--rage) *  9px),  calc(var(--rage) * -6px)) rotate(calc(var(--rage) *  1.8deg)); }
  30%     { transform: translate(calc(var(--rage) * -8px),  calc(var(--rage) *  7px)) rotate(calc(var(--rage) * -1.0deg)); }
  40%     { transform: translate(calc(var(--rage) *  6px),  calc(var(--rage) * -4px)) rotate(calc(var(--rage) *  1.4deg)); }
  50%     { transform: translate(calc(var(--rage) * -10px), calc(var(--rage) *  6px)) rotate(calc(var(--rage) * -2.0deg)); }
  60%     { transform: translate(calc(var(--rage) *  5px),  calc(var(--rage) * -8px)) rotate(calc(var(--rage) *  1.0deg)); }
  70%     { transform: translate(calc(var(--rage) * -7px),  calc(var(--rage) *  4px)) rotate(calc(var(--rage) * -1.6deg)); }
  80%     { transform: translate(calc(var(--rage) *  8px),  calc(var(--rage) * -5px)) rotate(calc(var(--rage) *  2.0deg)); }
  90%     { transform: translate(calc(var(--rage) * -6px),  calc(var(--rage) *  3px)) rotate(calc(var(--rage) * -1.2deg)); }
}

/* Reduced motion: kill scroll-driven transforms entirely */
@media (prefers-reduced-motion: reduce) {
  .vapor-title .w,
  .msg-line,
  .wisp,
  .sprite,
  .meet-floor,
  .meet-glow,
  .meet-spark,
  .meet-bubble,
  .meet-head-b,
  .hapt-phone,
  .hpp-screen,
  .hpp-screen svg,
  .haptic-text h3 {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  /* Particle-style chaos elements just disappear in reduced motion */
  .haptic-flash, .ring, .bolt, .hapt-shout {
    animation: none !important;
    opacity: 0 !important;
  }
  /* Hide the first heading so only the final line shows in reduced-motion */
  .meet-head-a { opacity: 0 !important; }
  .rule-scene { height: auto; }
  .rule-stage { position: static; height: auto; padding: 80px 0; }
}