/* Only the temporary homepage uses this file. Shared KREN typography is updated centrally in site.css. */
.soon-page .soon-header__brand-placeholder {
  visibility: hidden;
  pointer-events: none;
}
/* Preserve the original site's header structure, alignment, height, and menu. */
.soon-page .site-header { justify-content: space-between; }

/* Keep the next (game) section within reach – no artificially prolonged sticky hero. */
.soon-page .soon-hero {
  min-height: max(750px, 108svh);
  overflow: hidden;
  align-items: start;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(65px, 8vh, 90px));
}
.soon-page .soon-hero__copy,
.soon-page .soon-hero__graphic {
  position: relative;
  top: auto;
}
.soon-page .soon-hero__headline { position: relative; width: fit-content; max-width: 100%; }
.soon-page .soon-hero__headline-text,
.soon-page .soon-hero__headline-fill { display: block; }
.soon-page .soon-hero__headline-fill {
  position: absolute;
  inset: 0;
  color: var(--lime);
  clip-path: inset(0 0 calc(100% - var(--headline-fill, 0%)) 0);
  pointer-events: none;
}
.soon-page .soon-hero__status {
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  position: relative;
  width: fit-content;
  max-width: 100%;
}
/* Apply the existing KREN gradient to the second headline only AFTER lime completes. */
.soon-page .soon-hero__status-text,
.soon-page .soon-hero__status-fill { display: block; }
.soon-page .soon-hero__status-fill {
  position: absolute;
  inset: 0;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  clip-path: inset(0 0 calc(100% - var(--status-fill, 0%)) 0);
  pointer-events: none;
}
.soon-page .soon-hero__lead {
  margin: clamp(27px, 2.8vw, 39px) 0 28px;
  max-width: 40ch;
  font-size: clamp(17px, 1.48vw, 21px);
  line-height: 1.46;
}
.soon-page .soon-hero__lead p { margin: 0; }
.soon-page .soon-hero__lead p + p { margin-top: 18px; }
.soon-page .soon-hero__lead strong { font-weight: 700; }
.soon-page .soon-hero__k { overflow: visible; }
.soon-page .soon-hero__graphic { align-self: start; min-height: 485px; }

/* Level 03: visual, explanatory copy and action align without touching. */
.soon-page [data-scene="level-3"] .soon-scene__grid {
  grid-template-columns: minmax(275px, .86fr) minmax(0, 1.14fr);
  column-gap: clamp(38px, 5vw, 85px);
  align-items: center;
}
.soon-page [data-scene="level-3"] .soon-scene__intro { padding-top: 0; }
.soon-page [data-scene="level-3"] .soon-focus__label { margin-top: 30px; }
.soon-page [data-scene="level-3"] .soon-caption { margin: 26px 0 0; max-width: 37ch; }
.soon-page [data-scene="level-3"] .soon-action { display: inline-flex; margin-top: 26px; }
.soon-page [data-scene="level-3"] .soon-board--focus { min-height: 450px; }

/* The photo credit is anchored only to the cutout photo, not to the full column. */
.soon-page .soon-signoff__photo-wrap {
  position: relative;
  display: block;
  width: min(100%, 570px);
  align-self: end;
}
.soon-page .soon-signoff__photo-wrap picture { display: block; width: 100%; }
.soon-page .soon-signoff__photo-wrap .image-credit {
  right: 10px; left: auto; bottom: 10px;
  width: max-content;
  max-width: calc(100% - 20px);
  white-space: nowrap;
}

@media (min-width: 760px) and (max-width: 980px) {
  /* Remove the empty-looking black stretch at tablet widths. */
  .soon-page .soon-hero { min-height: max(800px, 85svh); }
}
@media (max-width: 980px) {
  .soon-page [data-scene="level-3"] .soon-scene__grid {
    grid-template-columns: minmax(225px, .83fr) minmax(0, 1.17fr);
    gap: 32px;
  }
}
@media (max-width: 759px) {
  .soon-page .soon-hero {
    min-height: max(710px, 103svh);
    padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 56px);
    padding-bottom: 90px;
  }
  .soon-page .soon-hero__graphic {
    position: relative;
    inset: auto;
    margin: 27px 0 0 auto;
    width: clamp(150px, 46vw, 240px);
    min-height: 194px;
    opacity: 1;
  }
  .soon-page .soon-hero__graphic-line { display: none; }
  .soon-page .soon-hero__status { font-size: clamp(20px, 5vw, 30px); }
  .soon-page .soon-hero__lead { max-width: 32ch; font-size: clamp(16px, 4vw, 19px); margin-top: 27px; }
  .soon-page [data-scene="level-3"] .soon-scene__grid { display: block; }
  .soon-page [data-scene="level-3"] .soon-scene__intro { margin-bottom: 31px; }
  .soon-page [data-scene="level-3"] .soon-action { margin-top: 25px; }
  .soon-page [data-scene="level-3"] .soon-board--focus { min-height: 380px; }
}
@media (max-width: 380px) {
  .soon-page .soon-hero { min-height: max(700px, 105svh); padding-top: calc(var(--header-h) + 45px); }
  .soon-page .soon-hero__lead { font-size: 16px; }
  .soon-page .soon-hero__graphic { width: 150px; min-height: 190px; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .soon-page .soon-hero__headline-fill, .soon-page .soon-hero__status-fill { clip-path: none; }
}

/* Contact sign-off: long editorial headline, without clipping at desktop, tablet or mobile widths. */
.soon-page .soon-signoff #signoff-heading {
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -.052em;
  max-width: 15ch;
  text-wrap: balance;
  overflow-wrap: normal;
}
.soon-page .soon-signoff__copy > #signoff-heading + .text-link {
  display: inline-flex;
  margin-top: clamp(30px, 4vw, 48px);
}
@media (max-width: 980px) {
  .soon-page .soon-signoff #signoff-heading { font-size: clamp(35px, 7.4vw, 59px); }
}
@media (max-width: 480px) {
  .soon-page .soon-signoff #signoff-heading { font-size: clamp(33px, 9.3vw, 44px); }
}

/* Mobile Game: prevent browser scroll anchoring when scenes are swapped.
   Navigation is aligned with the fixed header in coming-soon.js. */
@media (max-width: 759px) {
  .soon-page .soon-game { overflow-anchor: none; }
}

/* ===== v5.3 — one fixed game stage, no layout jump between states =====
   The game owns one stable canvas per breakpoint. Content changes inside it;
   the outside geometry does not. */
.soon-page {
  --game-stage-h: 700px;
  --game-title-slot-h: 104px;
  --game-board-h: 560px;
  --game-intro-slot-h: auto;
}

.soon-page .soon-game__stage {
  display: grid;
  min-height: var(--game-stage-h);
  position: relative;
  overflow-anchor: none;
}

.soon-page .soon-game__stage > .soon-scene {
  grid-area: 1 / 1;
  min-height: var(--game-stage-h);
  align-self: start;
}

.soon-page .soon-game__stage > .soon-scene[hidden] {
  display: none !important;
}

/* Level screens use the exact same title slot and board height. */
.soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) {
  display: grid;
  grid-template-rows: var(--game-title-slot-h) minmax(0, 1fr);
  align-content: start;
}

.soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__title-row {
  min-height: var(--game-title-slot-h);
  margin-bottom: 0;
}

.soon-page .soon-game__stage .soon-scene__grid {
  align-items: start;
}
.soon-page [data-scene="level-3"] .soon-scene__grid {
  align-items: start;
}

.soon-page .soon-game__stage .soon-board {
  min-height: var(--game-board-h);
  height: var(--game-board-h);
}

.soon-page .soon-game__stage .soon-board--opening,
.soon-page .soon-game__stage .soon-board--message,
.soon-page .soon-game__stage .soon-board--focus,
.soon-page .soon-game__stage .soon-board--focus-message,
.soon-page .soon-game__stage .soon-board--reward {
  min-height: var(--game-board-h);
}

/* Complete states stay inside the same master stage instead of changing section height. */
.soon-page .soon-game__stage > .soon-scene--complete {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
}
.soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
  margin-top: 36px;
}

/* The finale is part of the game rhythm too: same minimum canvas, enough room for the K. */
.soon-page .soon-final {
  min-height: max(var(--game-stage-h), 82svh);
}

@media (min-width: 760px) and (max-width: 980px) {
  .soon-page {
    --game-stage-h: 720px;
    --game-title-slot-h: 108px;
    --game-board-h: 570px;
  }
}

@media (max-width: 759px) {
  .soon-page {
    /* One fixed mobile canvas for every level/state. The slots are deliberately
       compact, but never change between Level 01, 02 and 03. */
    --game-stage-h: 1040px;
    --game-title-slot-h: 96px;
    --game-intro-slot-h: 294px;
    --game-board-h: 650px;
  }

  .soon-page .soon-game {
    overflow-anchor: none;
  }

  /* Every playable scene: identical title → intro → board geometry. */
  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--game-intro-slot-h) var(--game-board-h);
    gap: 0;
    min-height: calc(var(--game-stage-h) - var(--game-title-slot-h));
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__intro {
    min-height: 0;
    margin: 0;
    padding: 0;
    align-self: start;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-board {
    align-self: start;
    width: 100%;
  }

  /* Neutralize older Level 03 one-off spacing: it now follows the master grid. */
  .soon-page [data-scene="level-3"] .soon-scene__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--game-intro-slot-h) var(--game-board-h);
    gap: 0;
  }
  .soon-page [data-scene="level-3"] .soon-scene__intro {
    margin: 0;
    padding: 0;
  }
  .soon-page [data-scene="level-3"] .soon-caption,
  .soon-page [data-scene="level-2"] .soon-game__feedback {
    margin-top: 24px;
  }

  /* Completion screens use the same total stage height. Their content slots are fixed too. */
  .soon-page .soon-game__stage > .soon-scene--complete {
    grid-template-rows: 58px minmax(0, 1fr);
  }
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 290px var(--game-board-h);
    gap: 0;
    margin-top: 42px;
  }
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro {
    min-height: 0;
    margin: 0;
    padding: 0;
    align-self: start;
  }
  .soon-page .soon-game__stage > .soon-scene--complete .soon-board--reward {
    align-self: start;
    width: 100%;
  }

  /* Mobile finale only: the shared 1040px game stage must not carry over
     to the finale. Show the entire K immediately after the closing copy. */
  .soon-page .soon-final {
    min-height: 0;
    padding-bottom: 54px;
  }
  .soon-page .soon-final__reward {
    margin-bottom: 70px;
  }
  .soon-page .soon-final__graphic {
    position: relative;
    width: min(56vw, 230px);
    max-width: 100%;
    right: auto;
    bottom: auto;
    margin: 16px 0 0 auto;
    opacity: .22;
  }
  .soon-page .soon-final__graphic svg {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 380px) {
  .soon-page {
    /* Same system on narrow phones; only a small safety allowance for wraps. */
    --game-stage-h: 1080px;
    --game-title-slot-h: 96px;
    --game-intro-slot-h: 314px;
    --game-board-h: 670px;
  }
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-rows: 310px var(--game-board-h);
  }
}

/* ===== v5.6 — fixed game stage, compact rhythm (no jump / no dead white space) =====
   Keep one master stage per breakpoint, but move the stage content up by reducing
   only the reserved spacing — not the game content, mechanics or visual language. */
@media (min-width: 760px) {
  .soon-page {
    --game-title-slot-h: 88px;
  }
  .soon-page .soon-game {
    padding-top: clamp(58px, 5.8vw, 86px);
  }
  .soon-page .soon-game__meta {
    margin-bottom: clamp(24px, 2.5vw, 38px);
  }
}

@media (max-width: 759px) {
  .soon-page {
    /* 88 + 252 + 650 = 990: every playable level has exactly the same canvas. */
    --game-stage-h: 990px;
    --game-title-slot-h: 88px;
    --game-intro-slot-h: 252px;
    --game-board-h: 650px;
  }

  /* Tighten only the internal copy rhythm so the fixed intro slot is useful space,
     not a large blank spacer. All levels still share the exact same board start. */
  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__intro > p:first-child {
    margin-bottom: 18px;
  }
  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-caption {
    margin-top: 14px;
  }
  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-game__feedback {
    margin-top: 14px;
    min-height: 24px;
    line-height: 1.35;
  }
  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-game__feedback:empty {
    min-height: 0;
    margin: 0;
  }

  /* Complete screens use the same 990px master canvas as the levels. */
  .soon-page .soon-game__stage > .soon-scene--complete {
    grid-template-rows: 58px minmax(0, 1fr);
  }
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-rows: 264px var(--game-board-h);
    margin-top: 18px;
  }
}

@media (max-width: 380px) {
  .soon-page {
    /* Narrow-phone safety for extra text wraps, still one fixed canvas. */
    --game-stage-h: 1030px;
    --game-title-slot-h: 88px;
    --game-intro-slot-h: 272px;
    --game-board-h: 670px;
  }
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-rows: 284px var(--game-board-h);
    margin-top: 18px;
  }
}

/* ===== v5.7 — desktop intro typography aligned with the game board =====
   Keep the compact white-space rhythm from v5.6. Only the opening scene's
   left typography is moved down so its headline starts on the same visual
   line as the black game board. Mobile/tablet and all game mechanics stay untouched. */
@media (min-width: 981px) {
  .soon-page [data-scene="intro"] .soon-scene__title-row {
    transform: translateY(var(--game-title-slot-h));
    position: relative;
    z-index: 2;
  }

  .soon-page [data-scene="intro"] .soon-scene__title-row .soon-display {
    font-size: clamp(58px, 5.2vw, 82px);
    line-height: .91;
  }

  .soon-page [data-scene="intro"] .soon-scene__intro {
    padding-top: clamp(176px, 12vw, 196px);
  }

  .soon-page [data-scene="intro"] .soon-scene__intro > p:first-child {
    margin-bottom: 28px;
  }
}

/* ===== v5.8 — mobile final stage rhythm =====
   One fixed mobile game canvas remains in place, but the shared title/intro slots
   now match the tallest real mobile copy instead of reserving dead white space.
   Result: every level keeps the exact same board start without the large gap. */
@media (max-width: 759px) {
  .soon-page {
    --game-stage-h: 970px;
    --game-title-slot-h: 72px;
    --game-intro-slot-h: 170px;
    --game-board-h: 650px;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) {
    grid-template-rows: var(--game-title-slot-h) minmax(0, 1fr);
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__title-row {
    min-height: var(--game-title-slot-h);
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__grid,
  .soon-page [data-scene="level-3"] .soon-scene__grid {
    grid-template-rows: var(--game-intro-slot-h) var(--game-board-h);
  }

  /* Keep all completion states on the exact same 970px master canvas. */
  .soon-page .soon-game__stage > .soon-scene--complete {
    grid-template-rows: 58px minmax(0, 1fr);
  }
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-rows: 244px var(--game-board-h);
    margin-top: 18px;
  }
}

@media (max-width: 380px) {
  .soon-page {
    --game-stage-h: 990px;
    --game-title-slot-h: 72px;
    --game-intro-slot-h: 180px;
    --game-board-h: 670px;
  }
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-rows: 244px var(--game-board-h);
    margin-top: 18px;
  }
}

/* ===== v5.9 — desktop type alignment with the black game frame =====
   Desktop only: the left headline now starts on the same horizontal line as the
   black game board. The fixed game stage and all mobile/tablet geometry remain untouched. */
@media (min-width: 981px) {
  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) {
    display: block;
    position: relative;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__title-row {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    align-items: flex-start;
    pointer-events: none;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__title-row .soon-display {
    max-width: 7.4ch;
    font-size: clamp(54px, 4.6vw, 76px);
    line-height: .92;
    letter-spacing: -.055em;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__title-row .soon-system {
    position: absolute;
    top: -26px;
    right: 0;
    margin: 0;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__grid,
  .soon-page [data-scene="level-3"] .soon-scene__grid {
    display: grid;
    grid-template-columns: minmax(260px, .76fr) minmax(0, 1.24fr);
    column-gap: clamp(42px, 7vw, 130px);
    align-items: start;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__intro {
    padding-top: 108px;
  }

  .soon-page .soon-game__stage > .soon-scene[data-scene="intro"]:not(.soon-scene--complete) .soon-scene__title-row {
    transform: none;
  }

  .soon-page .soon-game__stage > .soon-scene[data-scene="intro"]:not(.soon-scene--complete) .soon-scene__title-row .soon-display {
    width: 44%;
    max-width: none;
    font-size: clamp(56px, 4.1vw, 70px);
  }

  .soon-page .soon-game__stage > .soon-scene[data-scene="intro"]:not(.soon-scene--complete) .soon-scene__intro {
    padding-top: 154px;
  }

  .soon-page [data-scene="intro"] .soon-scene__intro > p:first-child,
  .soon-page .soon-game__stage > [data-scene^="level-"] .soon-scene__intro > p:first-child {
    margin-bottom: 30px;
  }
}


/* ===== v6.0 — no complete bar, stable type rhythm desktop/mobile =====
   The lime→pink LEVEL COMPLETE strip is removed to stop vertical jumping.
   Completion screens now share the same typographic start logic as the other scenes,
   while mobile body copy under the headline is reduced and spaced more cleanly. */
.soon-page .soon-game__stage > .soon-scene--complete .soon-reward {
  display: none;
}

@media (min-width: 981px) {
  .soon-page .soon-game__stage > .soon-scene--complete {
    display: block;
    position: relative;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    display: grid;
    grid-template-columns: minmax(260px, .76fr) minmax(0, 1.24fr);
    column-gap: clamp(42px, 7vw, 130px);
    align-items: start;
    margin-top: var(--game-title-slot-h);
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro {
    padding-top: 0;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro .eyebrow {
    margin: 0 0 18px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro h2 {
    margin: 0 0 30px;
    font-size: clamp(54px, 4.6vw, 76px);
    line-height: .92;
    letter-spacing: -.055em;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro > p:not(.eyebrow) {
    margin: 0 0 30px;
    max-width: 31ch;
    font-size: clamp(18px, 1.75vw, 26px);
    line-height: 1.36;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-action {
    margin-top: 6px;
  }
}

@media (max-width: 759px) {
  .soon-page {
    --game-intro-slot-h: 148px;
  }

  .soon-page .soon-scene__title-row {
    margin-bottom: 24px;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__intro > p:first-child {
    margin: 0 0 14px;
    max-width: 30ch;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -.01em;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-caption {
    margin: 0;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.45;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-game__feedback {
    margin-top: 16px;
    min-height: 22px;
    font-size: 11px;
    line-height: 1.4;
  }

  .soon-page .soon-game__stage > .soon-scene--complete {
    grid-template-rows: 0 minmax(0, 1fr);
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-columns: 1fr;
    grid-template-rows: 214px var(--game-board-h);
    gap: 0;
    margin-top: 0;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro {
    padding-top: 0;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro .eyebrow {
    margin: 0 0 12px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro h2 {
    margin: 0 0 16px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro > p:not(.eyebrow) {
    margin: 0 0 20px;
    max-width: 30ch;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -.01em;
  }
}

@media (max-width: 380px) {
  .soon-page {
    --game-intro-slot-h: 156px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-rows: 226px var(--game-board-h);
  }
}


/* ===== v6.1 — final answer-state alignment =====
   Desktop: all success states share the same top line as the playable scenes.
   The black board starts at the same height, and the left copy gets breathing room.
   Mobile: body copy under the headline is reduced to a cleaner supporting size,
   with one consistent rhythm between intro text, caption and feedback. */
@media (min-width: 981px) {
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    margin-top: 0;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro {
    padding-top: 2px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro .eyebrow {
    margin: 0 0 20px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro h2 {
    margin: 0 0 34px;
    max-width: 7.4ch;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro > p:not(.eyebrow) {
    margin: 0 0 34px;
    max-width: 24ch;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-action {
    margin-top: 2px;
  }
}

@media (max-width: 759px) {
  .soon-page {
    --game-intro-slot-h: 156px;
  }

  .soon-page .soon-scene__title-row {
    margin-bottom: 20px;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-scene__intro > p:first-child {
    margin: 0 0 12px;
    max-width: 31ch;
    font-size: 15px;
    line-height: 1.42;
    letter-spacing: -.01em;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-caption {
    margin: 0;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.42;
    letter-spacing: -.01em;
  }

  .soon-page .soon-game__stage > .soon-scene:not(.soon-scene--complete) .soon-game__feedback {
    margin-top: 14px;
    min-height: 22px;
    font-size: 12px;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  .soon-page {
    --game-intro-slot-h: 164px;
  }
}


/* v6.1.1 — remove programmatic focus frame on stage headings */
.soon-page .soon-scene__title-row h2:focus,
.soon-page .soon-scene__title-row h3:focus,
.soon-page [data-complete-heading]:focus,
.soon-page #finale-heading:focus {
  outline: none;
  box-shadow: none;
}


/* v6.1.2 — mobile complete-state spacing cleanup
   Keep the completion scenes on one shared mobile rhythm, but give the button
   and reward board a clean, explicit gap so nothing touches or overlaps. */
@media (max-width: 759px) {
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-rows: 242px var(--game-board-h);
    row-gap: 20px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro .eyebrow {
    margin: 0 0 12px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro h2 {
    margin: 0 0 18px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__intro > p:not(.eyebrow) {
    margin: 0 0 18px;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-action {
    margin-top: 0;
    margin-bottom: 0;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-board--reward {
    margin-top: 0;
  }

  .soon-page .soon-game__stage > .soon-scene--complete .soon-action:focus,
  .soon-page .soon-game__stage > .soon-scene--complete .soon-action:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

@media (max-width: 380px) {
  .soon-page .soon-game__stage > .soon-scene--complete .soon-scene__grid {
    grid-template-rows: 258px var(--game-board-h);
    row-gap: 18px;
  }
}


/* v6.1.3 — mobile headline-to-copy rhythm cleanup
   Final polish for the three active level screens: create a clearer visual gap
   under the headline without pushing the black game frame down. */
@media (max-width: 759px) {
  .soon-page .soon-game__stage > [data-scene^="level-"]:not(.soon-scene--complete) .soon-scene__intro {
    padding-top: 8px;
  }

  .soon-page .soon-game__stage > [data-scene^="level-"]:not(.soon-scene--complete) .soon-scene__intro > p:first-child {
    margin: 0 0 10px;
    line-height: 1.38;
  }

  .soon-page .soon-game__stage > [data-scene^="level-"]:not(.soon-scene--complete) .soon-caption {
    line-height: 1.38;
  }

  .soon-page .soon-game__stage > [data-scene^="level-"]:not(.soon-scene--complete) .soon-game__feedback {
    margin-top: 12px;
  }
}