/* ================================================== Baby Sleep journey */
body[data-flow-open="true"]:has(.flow[data-journey="true"]) {
  overflow: hidden;
  overscroll-behavior: none;
  background: #070b1d;
}

.flow[data-journey="true"] {
  --journey-bg: #070b1d;
  --journey-panel: rgb(20 27 59 / 76%);
  --journey-line: rgb(255 255 255 / 12%);
  --journey-text: #f7f8ff;
  --journey-muted: rgb(231 235 255 / 68%);
  /* One gutter for the whole journey. The back chevron, the progress rail,
     the content and the action all resolve to the same two vertical lines. */
  --journey-gutter: 1.25rem;
  /* One primary-action colour for all 45 screens. Warm dark ink on it reads
     at 8.2:1, so the most important control is also the most legible one. */
  --journey-action: #f0a155;
  --journey-action-ink: #2a1705;
  position: relative;
  isolation: isolate;
  color: var(--journey-text);
  background:
    radial-gradient(circle at 12% 12%, rgb(60 93 174 / 30%), transparent 31%),
    radial-gradient(circle at 88% 82%, rgb(243 166 90 / 17%), transparent 35%),
    linear-gradient(155deg, #111733 0%, #070b1d 54%, #101026 100%);
}

.flow[data-journey="true"]::before,
.flow[data-journey="true"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.42;
  pointer-events: none;
}

.flow[data-journey="true"]::before {
  width: 14rem;
  height: 14rem;
  top: 14%;
  right: -8rem;
  background: #3b66bb;
  animation: journey-aurora-a 12s ease-in-out infinite alternate;
}

.flow[data-journey="true"]::after {
  width: 12rem;
  height: 12rem;
  bottom: 5%;
  left: -7rem;
  background: #a46476;
  animation: journey-aurora-b 14s ease-in-out infinite alternate;
}

@keyframes journey-aurora-a {
  to { transform: translate3d(-1.5rem, 1rem, 0) scale(1.08); }
}

@keyframes journey-aurora-b {
  to { transform: translate3d(1.25rem, -1.1rem, 0) scale(0.94); }
}

.flow[data-journey="true"][data-open="true"] {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.flow[data-journey="true"] .flow-bar,
body[data-scrolled="true"] .flow[data-journey="true"] .flow-bar {
  position: relative;
  height: calc(3.45rem + env(safe-area-inset-top));
  color: #fff;
  background: rgb(7 11 29 / 34%);
  border: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* The 44px tap target overhangs the gutter so the chevron glyph itself lands
   on the content line rather than looking indented from it. */
.flow[data-journey="true"] .flow-bar-inner {
  min-height: 3.25rem;
  padding-inline: calc(var(--journey-gutter) - 0.8rem);
}

.flow[data-journey="true"] .flow-bar[data-journey="true"] .flow-step {
  color: rgb(255 255 255 / 68%);
  font-size: 0.61rem;
  letter-spacing: 0.12em;
}

.flow[data-journey="true"] .flow-bar[data-journey="true"] .flow-step::after {
  content: "";
  width: 2.75rem;
  flex: none;
}

.flow[data-journey="true"] .icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  color: #fff;
}

.flow[data-journey="true"] .icon-btn:hover,
.flow[data-journey="true"] .icon-btn:active {
  background: rgb(255 255 255 / 8%);
}

.flow[data-journey="true"] .progress {
  height: 0.2rem;
  margin-inline: var(--journey-gutter);
  border-radius: 1rem;
  background: rgb(255 255 255 / 10%);
}

.flow[data-journey="true"] .progress span {
  min-width: 0.7rem;
  border-radius: inherit;
  background: var(--journey-action);
}

.flow[data-journey="true"] > .screen {
  width: min(100%, 31rem);
  height: calc(100vh - 3.45rem - env(safe-area-inset-top));
  height: calc(100dvh - 3.45rem - env(safe-area-inset-top));
  min-height: 0;
  margin-inline: auto;
  overflow: hidden;
  padding: clamp(0.85rem, 2vh, 1.2rem) 1rem max(0.8rem, env(safe-area-inset-bottom));
  animation: journey-screen-forward 240ms cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.flow[data-journey="true"] > .screen[data-back="true"] {
  animation-name: journey-screen-back;
}

/* Fade the viewport-sized shell in place. Translating a 100%-wide shell made
   it leave the viewport during the first frames; the scenes inside each screen
   already provide the directional motion. */
@keyframes journey-screen-forward {
  from { opacity: 0; }
}

@keyframes journey-screen-back {
  from { opacity: 0; }
}

.journey-question {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.journey-question .question-prompt {
  max-width: 24rem;
  margin: clamp(1rem, 4vh, 2rem) auto 0;
  color: #fff;
  font-size: clamp(1.65rem, 7vw, 2.2rem);
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}

.journey-question .question-helper {
  margin: 0.65rem auto 0;
  color: var(--journey-muted);
  font-size: 0.82rem;
  text-align: center;
}

.journey-question .options {
  gap: 0.52rem;
  margin-top: clamp(1.1rem, 4vh, 2rem);
}

.journey-question .option {
  min-height: clamp(3rem, 7.1vh, 3.7rem);
  padding: 0.7rem 0.9rem;
  border-color: var(--journey-line);
  border-radius: 1rem;
  color: rgb(255 255 255 / 91%);
  background: var(--journey-panel);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 0.8rem 1.8rem rgb(0 0 0 / 10%);
  font-size: clamp(0.82rem, 3.4vw, 0.96rem);
  line-height: 1.25;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.journey-question .option:hover {
  border-color: rgb(243 166 90 / 55%);
}

.journey-question .option .dot {
  width: 1.15rem;
  height: 1.15rem;
  border-color: rgb(255 255 255 / 30%);
}

.journey-question .option[aria-checked="true"] {
  border-color: #f3a65a;
  background: rgb(243 166 90 / 13%);
  box-shadow: 0 0 0 3px rgb(243 166 90 / 10%), 0 0 1.6rem rgb(243 166 90 / 16%);
}

.journey-question .option[aria-checked="true"] .dot {
  border-color: #f3a65a;
  background-color: #f3a65a;
}

.flow[data-journey="true"][data-screen="analysis"] {
  background:
    radial-gradient(circle at 50% 41%, rgb(81 123 219 / 29%), transparent 36%),
    linear-gradient(155deg, #111733, #070b1d 62%, #171129);
}

.flow[data-journey="true"] .analysis {
  justify-content: center;
  padding-top: 0.35rem;
}

.flow[data-journey="true"] .analysis-kicker {
  margin-bottom: clamp(0.7rem, 2vh, 1.25rem);
  color: #f6bc83;
}

.flow[data-journey="true"] .analysis-progress {
  --analysis-size: clamp(10.2rem, 43vw, 12.5rem);
}

.flow[data-journey="true"] .analysis-ring {
  background:
    radial-gradient(circle, rgb(112 169 255 / 13%), transparent 58%),
    rgb(255 255 255 / 2%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 6%),
    inset 0 0 2.5rem rgb(112 169 255 / 8%),
    0 1.6rem 4.4rem rgb(0 0 0 / 32%),
    0 0 3rem rgb(63 109 212 / 13%);
}

.flow[data-journey="true"] .analysis-ring::before {
  background: radial-gradient(circle, rgb(112 169 255 / 35%), rgb(100 77 196 / 9%) 46%, transparent 72%);
  animation: analysis-core-breathe 2.15s ease-in-out infinite alternate;
}

@keyframes analysis-core-breathe {
  to { opacity: 0.62; transform: scale(0.86); }
}

.flow[data-journey="true"] .analysis-ring-value {
  stroke: color-mix(in srgb, #70a9ff 68%, #fff);
  filter:
    drop-shadow(0 0 0.22rem rgb(153 199 255 / 92%))
    drop-shadow(0 0 0.75rem rgb(78 125 235 / 68%));
}

.flow[data-journey="true"] .analysis h2 {
  margin-top: 1.2rem;
  font-size: clamp(1.65rem, 7vw, 2.1rem);
}

.flow[data-journey="true"] .analysis-status {
  margin-top: 1rem;
  padding: 0.64rem 0.7rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-content: stretch;
  gap: 0.58rem;
  border-radius: 1rem;
  border-color: var(--journey-line);
  background: rgb(255 255 255 / 5%);
}

.flow[data-journey="true"] .analysis h2 {
  transition: color 260ms ease, text-shadow 260ms ease;
}

.flow[data-journey="true"] .analysis[data-complete="true"] h2 {
  color: #dff8ec;
  text-shadow: 0 0 1.4rem rgb(123 222 173 / 18%);
}

.journey-screen {
  --journey-accent: var(--journey-action);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--journey-text);
}

.journey-kicker {
  color: color-mix(in srgb, var(--journey-accent) 80%, #fff);
  font-size: 0.8rem;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.journey-screen h2 {
  color: #fff;
  font-size: clamp(1.75rem, 7.4vw, 2.35rem);
  line-height: 1.01;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.journey-body {
  color: var(--journey-muted);
  font-size: clamp(0.88rem, 3.55vw, 1rem);
  line-height: 1.48;
}

/* One flat colour, one shape, one weight, on every screen. A gradient plus a
   coloured halo is what made the same control read as cheap. */
.journey-next {
  width: 100%;
  min-height: 3.25rem;
  margin-top: auto;
  border-radius: 1.15rem;
  background: var(--journey-action);
  color: var(--journey-action-ink);
  box-shadow: 0 0.5rem 1.4rem rgb(0 0 0 / 26%);
}

.journey-next:hover,
.journey-next:active {
  color: var(--journey-action-ink);
  background: color-mix(in srgb, var(--journey-action) 92%, #fff);
}

.journey-next:disabled,
.journey-next[aria-disabled="true"] {
  border: 1px solid rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 7%);
  color: rgb(233 238 255 / 52%);
  box-shadow: none;
  opacity: 1;
}

.journey-next[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
}

.journey-story {
  align-items: center;
  text-align: center;
}

.journey-story h2 {
  max-width: 25rem;
  margin-top: clamp(0.6rem, 2vh, 1.1rem);
}

.journey-story .journey-body {
  max-width: 25rem;
  margin-top: 0.85rem;
}


}


.journey-pips {
  display: flex;
  justify-content: center;
  gap: 0.36rem;
  margin: auto 0 0.8rem;
}

.journey-pips span {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 22%);
  transition: width 260ms ease, background 260ms ease;
}

.journey-pips span[data-active="true"] {
  width: 1.2rem;
  background: var(--journey-accent);
}

.journey-result {
  align-items: center;
  text-align: center;
}

.journey-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.3rem;
}

.journey-complete h2 {
  font-size: clamp(1.8rem, 7.5vw, 2.3rem);
}

.journey-check {
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #6bbf86;
  color: #07120b;
  font-weight: 900;
  animation: journey-check-arrive 680ms cubic-bezier(0.2, 1.5, 0.35, 1) both;
}

@keyframes journey-check-arrive { from { opacity: 0; transform: scale(0.25) rotate(-25deg); } }

.journey-result-intro {
  max-width: 23rem;
  margin-top: 0.5rem;
  color: var(--journey-muted);
  font-size: 0.82rem;
}

.journey-result h3 {
  max-width: 24rem;
  margin-top: 0.8rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 1.55rem);
  line-height: 1.08;
}

.journey-chart {
  width: 100%;
  display: grid;
  gap: 0.55rem;
  margin-top: 0.9rem;
  padding: 0.95rem;
  border: 1px solid var(--journey-line);
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 4%);
}

.journey-chart-row {
  display: grid;
  grid-template-columns: 5.9rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.35rem;
}

.journey-chart-name {
  overflow: hidden;
  color: rgb(255 255 255 / 72%);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-chart-row[data-lead="true"] .journey-chart-name {
  color: #fff;
  font-weight: 620;
}

.journey-chart-track {
  height: 0.62rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
}

.journey-chart-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: rgb(255 255 255 / 22%);
  transition: width 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.journey-chart-row[data-lead="true"] .journey-chart-fill {
  background: var(--journey-action);
}

.journey-result[data-ready="true"] .journey-chart-fill {
  width: var(--score);
}

.journey-chart-tag {
  color: color-mix(in srgb, var(--journey-action) 84%, #fff);
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.journey-result .journey-next {
  margin-top: auto;
}

.journey-select h2,
.journey-goals h2,
.journey-review h2,
.journey-signature h2,
.journey-plan-build h2,
.journey-offer h2,
.journey-cancel h2 {
  margin-top: 0.42rem;
}

.journey-select > .journey-body,
.journey-signature > .journey-body,
.journey-plan-build > .journey-body,
.journey-offer > .journey-body,
.journey-cancel > .journey-body {
  margin-top: 0.55rem;
}

.journey-choice-list {
  display: grid;
  gap: 0.5rem;
  margin-top: clamp(0.9rem, 2.5vh, 1.3rem);
}

.journey-choice {
  min-height: clamp(3rem, 7vh, 3.55rem);
  display: flex;
  align-items: center;
  gap: 0.72rem;
  padding: 0.65rem 0.78rem;
  border: 1px solid var(--journey-line);
  border-radius: 0.92rem;
  background: var(--journey-panel);
  color: rgb(255 255 255 / 88%);
  font-size: clamp(0.76rem, 3.15vw, 0.9rem);
  line-height: 1.22;
  text-align: left;
}

.journey-choice-check {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  color: transparent;
  font-size: 0.72rem;
}

.journey-choice[aria-checked="true"] {
  border-color: #f3a65a;
  background: rgb(243 166 90 / 14%);
  box-shadow: 0 0 1.6rem rgb(243 166 90 / 11%);
}

.journey-choice[aria-checked="true"] .journey-choice-check {
  border-color: #f3a65a;
  background: #f3a65a;
  color: #11162e;
}

.journey-select .journey-next,
.journey-goals .journey-next,
.journey-review .journey-next,
.journey-signature .journey-next,
.journey-plan-build .journey-next,
.journey-offer .journey-next,
.journey-cancel .journey-next {
  margin-top: auto;
}

.journey-goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: clamp(1rem, 3vh, 1.6rem);
}

.journey-goal {
  min-height: clamp(4.2rem, 11vh, 5.2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.72rem;
  border: 1px solid var(--journey-line);
  border-radius: 1rem;
  background: var(--journey-panel);
  color: rgb(255 255 255 / 85%);
  font-size: 0.78rem;
  line-height: 1.16;
  text-align: left;
}

.journey-goal[aria-pressed="true"] {
  border-color: #7aaefc;
  background: linear-gradient(145deg, rgb(78 122 211 / 28%), rgb(243 166 90 / 12%));
  box-shadow: 0 0 1.4rem rgb(78 122 211 / 15%);
}

.journey-goals--locked .journey-goal {
  min-height: 4.6rem;
  opacity: 1;
}

.journey-review {
  text-align: center;
}

.journey-review-count {
  margin-top: 0.35rem;
  color: #f3b95f;
  font-size: 0.8rem;
  font-weight: 680;
}

.journey-quote {
  margin: 0.65rem 0 0;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--journey-line);
  border-radius: 1rem;
  background: rgb(255 255 255 / 5%);
  text-align: left;
}

.journey-mini-stars {
  color: #f3b95f;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.journey-quote p {
  margin-top: 0.35rem;
  color: rgb(255 255 255 / 88%);
  font-size: clamp(0.75rem, 3vw, 0.86rem);
  line-height: 1.28;
}

.journey-quote cite {
  display: block;
  margin-top: 0.35rem;
  color: var(--journey-muted);
  font-size: 0.812rem;
  font-style: normal;
}

.journey-pledge {
  align-items: center;
  text-align: center;
}

.journey-pledge blockquote {
  margin: clamp(1rem, 4vh, 2rem) 0 0;
  padding: 1.1rem;
  border: 1px solid rgb(243 166 90 / 28%);
  border-radius: 1.1rem;
  background: rgb(243 166 90 / 8%);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4.9vw, 1.45rem);
  line-height: 1.3;
}

.journey-signature-pad {
  width: 100%;
  height: clamp(12rem, 32vh, 16rem);
  margin-top: clamp(0.75rem, 2vh, 1rem);
  border: 0;
  border-radius: 1.2rem;
  background: #f8f6f0;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 20%);
  touch-action: none;
}

.journey-signature-pad[data-signed="true"] {
  animation: journey-signed 560ms ease both;
}

@keyframes journey-signed { 50% { transform: scale(1.015) rotate(-0.4deg); } }

.journey-signature-hint {
  margin-top: 0.4rem;
  color: var(--journey-muted);
  font-size: 0.838rem;
  text-align: center;
}

.journey-schedule-card {
  width: 100%;
  margin-top: clamp(0.75rem, 2vh, 1rem);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 4%));
  box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 20%);
  transform: perspective(700px) rotateX(4deg) translateY(1rem);
  opacity: 0.65;
  transition: transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 620ms ease;
}

.journey-plan-build[data-ready="true"] .journey-schedule-card {
  transform: none;
  opacity: 1;
}

.journey-card-head,
.journey-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
}

.journey-card-head {
  background: rgb(255 255 255 / 6%);
  color: #fff;
  font-size: 0.74rem;
}

.journey-card-head b {
  color: #f3b273;
}

.journey-card-row + .journey-card-row {
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.journey-card-row span {
  color: var(--journey-muted);
  font-size: 0.72rem;
}

.journey-card-row strong {
  color: #fff;
  font-size: 0.77rem;
}

.journey-loader {
  height: 0.28rem;
  margin-top: 0.8rem;
  overflow: hidden;
  border-radius: 1rem;
  background: rgb(255 255 255 / 9%);
}

.journey-loader span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b9ff4, #f3a65a);
  animation: journey-loading 1.5s ease-in-out infinite alternate;
}

@keyframes journey-loading { to { transform: translateX(138%); } }

.journey-free-action {
  margin-top: 0.7rem;
  padding: 0.72rem 0.82rem;
  border-radius: 0.9rem;
  background: rgb(118 201 141 / 12%);
  color: rgb(240 255 244 / 90%);
  font-size: 0.76rem;
  line-height: 1.3;
}

.journey-offer {
  text-align: center;
}

.journey-offer-eyebrow {
  color: #f6bb80;
  font-size: 0.775rem;
  font-weight: 760;
  letter-spacing: 0.14em;
}

.journey-discount {
  width: max-content;
  margin: 0.55rem auto 0;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(105deg, #f3a65a, #ffcf83);
  color: #20150c;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 5vw, 1.45rem);
  font-weight: 820;
  box-shadow: 0 0.8rem 2rem rgb(243 166 90 / 24%);
  animation: journey-discount-arrive 660ms cubic-bezier(0.2, 1.45, 0.3, 1) both;
}

@keyframes journey-discount-arrive { from { opacity: 0; transform: translateY(-1rem) scaleY(0.3); } }

.journey-scarcity {
  margin-top: 0.48rem;
  color: #ffb6aa;
  font-size: 0.75rem;
  font-weight: 720;
  animation: journey-scarcity 1.5s ease-in-out 2;
}

@keyframes journey-scarcity { 50% { opacity: 0.58; transform: scale(0.98); } }

.journey-offer h2 {
  margin-inline: auto;
  max-width: 24rem;
  font-size: clamp(1.55rem, 6.7vw, 2.05rem);
}

.journey-offer-list {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.8rem;
  text-align: left;
}

.journey-offer-list li {
  position: relative;
  padding-left: 1.25rem;
  color: rgb(255 255 255 / 83%);
  font-size: 0.72rem;
  line-height: 1.28;
}

.journey-offer-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #78ce90;
  font-weight: 800;
}

.journey-price {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.8rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgb(243 166 90 / 33%);
  border-radius: 0.9rem;
  background: rgb(243 166 90 / 8%);
  text-align: left;
}

.journey-price span {
  color: rgb(255 255 255 / 78%);
  font-size: 0.7rem;
}

.journey-price strong {
  color: #fff;
  font-size: 1.08rem;
}

.journey-price del {
  color: rgb(255 255 255 / 48%);
  font-size: 0.72rem;
}

.journey-price small {
  color: var(--journey-muted);
  font-size: 0.775rem;
}

.journey-offer-note {
  margin-top: 0.42rem;
  color: var(--journey-muted);
  font-size: 0.775rem;
}

.journey-offer--fallback {
  --journey-accent: #78ce90;
}

.journey-offer--fallback .journey-discount {
  background: var(--journey-action);
}

.journey-cancel {
  align-items: center;
  text-align: center;
}

.journey-cancel h2,
.journey-cancel .journey-body {
  max-width: 24rem;
}

.journey-leave {
  margin-top: 0.55rem;
  padding: 0.8rem;
  border: 0;
  background: transparent;
  color: rgb(255 255 255 / 56%);
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

@media (max-height: 46rem) {
  .flow[data-journey="true"] > .screen {
    padding-top: 0.55rem;
  }

  .journey-question .question-prompt {
    margin-top: 0.55rem;
    font-size: 1.45rem;
  }

  .journey-question .options {
    margin-top: 0.75rem;
  }

  .journey-story h2 {
    margin-top: 0.35rem;
    font-size: 1.65rem;
  }

  .journey-story .journey-body {
    margin-top: 0.5rem;
  }

  .flow[data-journey="true"] .analysis {
    padding-top: 0.2rem;
  }

  .flow[data-journey="true"] .analysis-kicker {
    margin-bottom: 0.5rem;
  }

  .analysis-input-summary {
    margin-bottom: 0.5rem;
  }

  .flow[data-journey="true"] .analysis-progress {
    --analysis-size: clamp(8.8rem, 38vh, 10.6rem);
  }

  .flow[data-journey="true"] .analysis h2 {
    margin-top: 0.7rem;
    font-size: 1.48rem;
  }

  .flow[data-journey="true"] .analysis-status {
    min-height: 3rem;
    margin-top: 0.6rem;
  }

  .analysis-signal-rail {
    margin-top: 0.45rem;
  }
}

/* ===================================== Goals, proof and commitment chapter */
.journey-goals,
.journey-review,
.journey-pledge,
.journey-signature,
.journey-plan-build,
.journey-cancel {
  text-align: left;
}

.journey-goals-intro {
  max-width: 23rem;
  margin-top: 0.5rem;
  color: var(--journey-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.journey-goal-grid {
  gap: 0.58rem;
  margin-top: 0.85rem;
}

.journey-goal {
  position: relative;
  min-height: 6.15rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 0.62rem;
  overflow: hidden;
  padding: 0.85rem;
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--goal-color, #78a8ff) 16%, transparent), transparent 42%),
    linear-gradient(145deg, rgb(27 36 72 / 88%), rgb(13 19 45 / 90%));
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 0.8rem 1.8rem rgb(0 0 0 / 12%);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.journey-goal[data-goal="morning"] { --goal-color: #ffc36f; }
.journey-goal[data-goal="nap"] { --goal-color: #85aefe; }
.journey-goal[data-goal="bedtime"] { --goal-color: #f19483; }
.journey-goal[data-goal="night"] { --goal-color: #9f91ef; }
.journey-goal[data-goal="clarity"] { --goal-color: #77cfb6; }
.journey-goal[data-goal="handoff"] { --goal-color: #8ec4e8; }
.journey-goal-roadmap-item[data-goal="morning"] { --goal-color: #ffc36f; }
.journey-goal-roadmap-item[data-goal="nap"] { --goal-color: #85aefe; }
.journey-goal-roadmap-item[data-goal="bedtime"] { --goal-color: #f19483; }
.journey-goal-roadmap-item[data-goal="night"] { --goal-color: #9f91ef; }
.journey-goal-roadmap-item[data-goal="clarity"] { --goal-color: #77cfb6; }
.journey-goal-roadmap-item[data-goal="handoff"] { --goal-color: #8ec4e8; }

.journey-goal:active { transform: scale(0.975); }

.journey-goal-copy {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.journey-goal-copy strong {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.18;
}

.journey-goal-copy small {
  color: rgb(234 239 255 / 42%);
  font-size: 0.7rem;
}

.journey-goal-symbol {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  display: block;
  border: 1px solid color-mix(in srgb, var(--goal-color, #78a8ff) 38%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--goal-color, #78a8ff) 13%, transparent);
  color: var(--goal-color, #78a8ff);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}

.journey-goal-symbol i { position: absolute; display: block; }

.journey-goal-symbol--morning i:first-child {
  width: 0.75rem;
  height: 0.75rem;
  left: 0.75rem;
  top: 0.48rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.65rem currentColor;
}

.journey-goal-symbol--morning i:nth-child(2) {
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.48rem;
  height: 0.55rem;
  border-top: 2px solid currentColor;
  border-radius: 50% 50% 0 0;
}

.journey-goal-symbol--nap i:first-child,
.journey-goal-symbol--night i:first-child {
  width: 1.05rem;
  height: 1.05rem;
  left: 0.57rem;
  top: 0.48rem;
  border-radius: 50%;
  background: currentColor;
}

.journey-goal-symbol--nap i:nth-child(2),
.journey-goal-symbol--night i:nth-child(2) {
  width: 1.05rem;
  height: 1.05rem;
  left: 0.83rem;
  top: 0.28rem;
  border-radius: 50%;
  background: #18224a;
}

.journey-goal-symbol--nap i:nth-child(3) {
  width: 1.2rem;
  height: 0.26rem;
  left: 0.5rem;
  bottom: 0.42rem;
  border-radius: 1rem;
  background: currentColor;
}

.journey-goal-symbol--bedtime i:first-child {
  width: 1.25rem;
  height: 0.65rem;
  left: 0.45rem;
  bottom: 0.48rem;
  border: 2px solid currentColor;
  border-radius: 0.25rem;
}

.journey-goal-symbol--bedtime i:nth-child(2) {
  width: 0.4rem;
  height: 0.4rem;
  left: 0.6rem;
  top: 0.56rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0.48rem 0.15rem 0 -0.04rem currentColor;
}

.journey-goal-symbol--clarity i:first-child {
  width: 1.3rem;
  height: 1.3rem;
  left: 0.44rem;
  top: 0.42rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.journey-goal-symbol--clarity i:nth-child(2) {
  width: 0.58rem;
  height: 0.3rem;
  left: 0.82rem;
  top: 0.87rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.journey-goal-symbol--handoff i:first-child,
.journey-goal-symbol--handoff i:nth-child(2) {
  width: 0.58rem;
  height: 0.58rem;
  top: 0.48rem;
  border-radius: 50%;
  background: currentColor;
}

.journey-goal-symbol--handoff i:first-child { left: 0.42rem; }
.journey-goal-symbol--handoff i:nth-child(2) { right: 0.42rem; }
.journey-goal-symbol--handoff i:nth-child(3) {
  width: 0.72rem;
  height: 0.48rem;
  left: 0.73rem;
  bottom: 0.48rem;
  border: 2px solid currentColor;
  border-radius: 0.22rem;
}

.journey-goal-selected-mark,
.journey-goal-locked-mark {
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
}

.journey-goal-selected-mark::before,
.journey-goal-locked-mark::before {
  content: "";
  width: 0.47rem;
  height: 0.25rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg) scale(0);
}

.journey-goal[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--journey-action) 72%, transparent);
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--journey-action) 16%, transparent), transparent 52%),
    linear-gradient(145deg, rgb(31 43 82 / 96%), rgb(13 19 45 / 96%));
  box-shadow: inset 0 1px rgb(255 255 255 / 10%), 0 0 1.5rem rgb(0 0 0 / 18%);
}

.journey-goal[aria-pressed="true"] .journey-goal-selected-mark {
  border-color: var(--journey-action);
  background: var(--journey-action);
  color: var(--journey-action-ink);
}

.journey-goal[aria-pressed="true"] .journey-goal-selected-mark::before {
  animation: scene-check-pop 300ms cubic-bezier(0.2, 1.45, 0.3, 1) both;
}

.journey-goal-roadmap {
  position: relative;
  display: grid;
  gap: 0.55rem;
  margin-top: 0.78rem;
}

.journey-goal-roadmap::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1rem;
  width: 2px;
  background: color-mix(in srgb, var(--journey-action) 42%, transparent);
}

.journey-goal-roadmap-item {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 2.15rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.85rem;
  padding: 0.5rem 0.7rem 0.5rem 0;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 0.9rem;
  background: linear-gradient(100deg, rgb(30 42 80 / 85%), rgb(15 21 49 / 82%));
  opacity: 0;
  transform: translateX(0.75rem);
}

.journey-goals--locked .journey-goal-roadmap-item:nth-child(1) { animation: scene-product-row 430ms 120ms ease-out both; }
.journey-goals--locked .journey-goal-roadmap-item:nth-child(2) { animation: scene-product-row 430ms 260ms ease-out both; }
.journey-goals--locked .journey-goal-roadmap-item:nth-child(3) { animation: scene-product-row 430ms 200ms ease-out both; }
.journey-goals--locked .journey-goal-roadmap-item:nth-child(4) { animation: scene-product-row 430ms 270ms ease-out both; }
.journey-goals--locked .journey-goal-roadmap-item:nth-child(5) { animation: scene-product-row 430ms 340ms ease-out both; }
.journey-goals--locked .journey-goal-roadmap-item:nth-child(6) { animation: scene-product-row 430ms 410ms ease-out both; }

.journey-goal-roadmap-step {
  position: relative;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 2px solid color-mix(in srgb, var(--journey-action) 62%, transparent);
  border-radius: 50%;
  background: #101832;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 780;
}

.journey-goal-roadmap .journey-goal-symbol { width: 2.15rem; height: 2.15rem; }
.journey-goal-locked-mark { border-color: var(--journey-action); background: var(--journey-action); color: var(--journey-action-ink); }
.journey-goal-locked-mark::before { transform: translateY(-1px) rotate(-45deg) scale(1); }

.journey-goal-week-preview {
  display: grid;
  grid-template-columns: 8.6rem 1fr;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 0.95rem;
  background: rgb(255 255 255 / 4%);
  opacity: 0;
  transform: translateY(0.45rem);
  animation: journey-copy-arrive 480ms 450ms ease-out both;
}

.journey-goal-week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.journey-goal-week-days i {
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 0.38rem;
  background: color-mix(in srgb, var(--journey-action) 14%, transparent);
  color: color-mix(in srgb, var(--journey-action) 72%, #fff);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 640;
}

.journey-goal-week-preview > div:last-child { display: grid; gap: 0.15rem; }
.journey-goal-week-preview strong { color: #fff; font-size: 0.86rem; }
.journey-goal-week-preview span { color: rgb(232 240 255 / 60%); font-size: 0.76rem; line-height: 1.3; }

/* Reviews arrive as dimensional notes and settle once. */
.journey-review-summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 0.85rem;
  background: rgb(255 255 255 / 4%);
}

.journey-review-summary strong { color: #fff; font-size: 0.76rem; }
.journey-review-summary > span:last-child { color: rgb(234 239 255 / 48%); font-size: 0.7rem; text-align: right; }
.journey-review-stars { display: inline-flex; gap: 0.16rem; }
.journey-review-stars i {
  width: 0.68rem;
  height: 0.68rem;
  display: block;
  background: #f4c66e;
  clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 34%);
  filter: drop-shadow(0 0 0.35rem rgb(244 198 110 / 32%));
  opacity: 0.2;
  transform: scale(0.4) rotate(-15deg);
}

.journey-review[data-ready="true"] .journey-review-stars i:nth-child(1) { animation: journey-star-settle 340ms 150ms cubic-bezier(0.2, 1.35, 0.3, 1) both; }
.journey-review[data-ready="true"] .journey-review-stars i:nth-child(2) { animation: journey-star-settle 340ms 230ms cubic-bezier(0.2, 1.35, 0.3, 1) both; }
.journey-review[data-ready="true"] .journey-review-stars i:nth-child(3) { animation: journey-star-settle 340ms 155ms cubic-bezier(0.2, 1.35, 0.3, 1) both; }
.journey-review[data-ready="true"] .journey-review-stars i:nth-child(4) { animation: journey-star-settle 340ms 195ms cubic-bezier(0.2, 1.35, 0.3, 1) both; }
.journey-review[data-ready="true"] .journey-review-stars i:nth-child(5) { animation: journey-star-settle 340ms 235ms cubic-bezier(0.2, 1.35, 0.3, 1) both; }
@keyframes journey-star-settle { to { opacity: 1; transform: none; } }

.journey-review-stack {
  position: relative;
  min-height: 16.2rem;
  margin-top: 0.75rem;
}

.journey-review-card {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.85rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgb(33 43 79 / 97%), rgb(14 20 47 / 97%));
  box-shadow: 0 1.15rem 2.5rem rgb(0 0 0 / 25%), inset 0 1px rgb(255 255 255 / 8%);
  text-align: left;
  opacity: 0;
}

.journey-review-card[data-review-position="0"] { top: 0; transform: translate(-0.75rem, 0.6rem) rotate(-2deg); }
.journey-review-card[data-review-position="1"] { top: 7.8rem; transform: translate(0.75rem, 0.6rem) rotate(2deg); }
.journey-review[data-ready="true"] .journey-review-card[data-review-position="0"] { animation: review-card-left 600ms 210ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.journey-review[data-ready="true"] .journey-review-card[data-review-position="1"] { animation: review-card-right 600ms 310ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
@keyframes review-card-left { to { opacity: 1; transform: rotate(-1deg); } }
@keyframes review-card-right { to { opacity: 1; transform: rotate(1deg); } }

.journey-review-card-head { display: flex; align-items: center; gap: 0.62rem; }
.journey-review-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.7rem; background: linear-gradient(145deg, #819ee7, #4b609b); color: #fff; font-size: 0.725rem; font-weight: 800; box-shadow: inset 0 1px rgb(255 255 255 / 20%); }
.journey-review-card-head > div { display: grid; gap: 0.24rem; }
.journey-review-card cite { color: rgb(239 243 255 / 67%); font-size: 0.725rem; font-style: normal; }
.journey-review-card p { margin-top: 0.62rem; color: #fff; font-family: var(--font-display); font-size: 0.88rem; line-height: 1.32; }
.journey-review-card .journey-review-stars i { width: 0.48rem; height: 0.48rem; }

/* The pledge is a one-time seven-day ceremony. */
.journey-pledge {
  align-items: stretch;
}

.journey-pledge-ceremony {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin-block: clamp(1.2rem, 4vh, 2.4rem);
}

.journey-pledge-nights {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  width: min(17rem, 100%);
}

.journey-pledge-nights i {
  height: 2.6rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.6rem;
  background: rgb(255 255 255 / 5%);
  transform: scaleY(0.72);
  opacity: 0;
}

.journey-pledge-nights i:first-child {
  border-color: color-mix(in srgb, var(--journey-action) 58%, transparent);
  background: color-mix(in srgb, var(--journey-action) 18%, transparent);
}

.journey-pledge-nights-label {
  margin: 0;
  color: var(--journey-muted);
  font-size: 0.82rem;
}

.journey-pledge[data-ready="true"] .journey-pledge-nights i {
  animation: pledge-night-set 280ms cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.journey-pledge[data-ready="true"] .journey-pledge-nights i:nth-child(2) { animation-delay: 50ms; }
.journey-pledge[data-ready="true"] .journey-pledge-nights i:nth-child(3) { animation-delay: 100ms; }
.journey-pledge[data-ready="true"] .journey-pledge-nights i:nth-child(4) { animation-delay: 150ms; }
.journey-pledge[data-ready="true"] .journey-pledge-nights i:nth-child(5) { animation-delay: 200ms; }
.journey-pledge[data-ready="true"] .journey-pledge-nights i:nth-child(6) { animation-delay: 250ms; }
.journey-pledge[data-ready="true"] .journey-pledge-nights i:nth-child(7) { animation-delay: 300ms; }

@keyframes pledge-night-set { to { opacity: 1; transform: none; } }

.journey-pledge-card {
  position: relative;
  margin: 0.45rem 0 0;
  padding: 0.85rem 0.95rem 0.75rem 1.1rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 1.05rem;
  background: linear-gradient(110deg, rgb(49 61 104 / 45%), rgb(255 255 255 / 4%));
  opacity: 0;
  transform: translateY(0.55rem);
}

.journey-pledge-rule { position: absolute; left: 0; top: 0; bottom: 0; width: 0.24rem; background: linear-gradient(#739de9, #74c8ac); }
.journey-pledge-card p { color: #fff; font-family: var(--font-display); font-size: 0.95rem; line-height: 1.3; }
.journey-pledge-card footer { margin-top: 0.42rem; color: rgb(234 239 255 / 44%); font-size: 0.7rem; }
.journey-pledge[data-ready="true"] .journey-pledge-card { animation: journey-copy-arrive 520ms 360ms ease-out both; }
.journey-pledge > .journey-next { margin-top: auto; }

/* Signature is an inset paper artifact rather than an edge-to-edge canvas. */
.journey-signature-frame {
  position: relative;
  margin-top: 0.85rem;
  padding: 0.68rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.3rem;
  background: linear-gradient(145deg, rgb(40 50 87 / 88%), rgb(14 20 46 / 92%));
  box-shadow: 0 1.2rem 2.8rem rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 8%);
}

.journey-signature-frame-head,
.journey-signature-frame-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0.25rem 0.55rem;
}

.journey-signature-frame-head span { color: #fff; font-size: 0.812rem; font-weight: 740; }
.journey-signature-frame-head small { color: rgb(233 239 255 / 44%); font-size: 0.7rem; }
.journey-signature-drawing { position: relative; overflow: hidden; border-radius: 0.95rem; background: linear-gradient(160deg, #fffdf5, #efeadc); box-shadow: inset 0 0 0 1px rgb(21 29 57 / 8%); }
.journey-signature-pad { position: relative; z-index: 2; width: 100%; height: clamp(10.6rem, 27vh, 13.2rem); margin: 0; border-radius: 0; background: transparent; box-shadow: none; }
.journey-signature-baseline { position: absolute; z-index: 1; left: 10%; right: 10%; bottom: 31%; height: 1px; background: rgb(16 21 46 / 18%); }
.journey-signature-initial { position: absolute; z-index: 1; left: 50%; bottom: 22%; color: rgb(16 21 46 / 25%); font-family: var(--font-display); font-size: 0.75rem; font-style: italic; transform: translateX(-50%); transition: opacity 240ms ease; }
.journey-signature-frame[data-signed="true"] .journey-signature-initial { opacity: 0; }
.journey-signature-frame-foot { padding: 0.5rem 0.25rem 0.05rem; }
.journey-signature-hint { margin: 0; }
.journey-signature-frame[data-signed="true"] .journey-signature-hint { color: #91dfc4; }
.journey-signature-clear { padding: 0.2rem; border: 0; background: transparent; color: rgb(234 239 255 / 45%); font-size: 0.725rem; text-decoration: underline; text-underline-offset: 0.16rem; }
.journey-signature-frame[data-signed="true"] { animation: signature-card-confirm 560ms cubic-bezier(0.2, 1.05, 0.3, 1) both; }
@keyframes signature-card-confirm { 50% { border-color: rgb(116 209 177 / 55%); transform: scale(1.012) rotate(-0.25deg); } }

/* One answer-derived schedule artifact builds continuously across four screens. */
.journey-schedule-artifact {
  position: relative;
  width: 100%;
  margin-top: 0.75rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 88% 5%, rgb(111 151 235 / 16%), transparent 30%),
    linear-gradient(150deg, rgb(31 42 79 / 97%), rgb(12 18 43 / 97%));
  box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 25%), inset 0 1px rgb(255 255 255 / 9%);
  opacity: 0;
  transform: perspective(800px) translateY(0.75rem) rotateX(3deg);
}

.journey-plan-build[data-ready="true"] .journey-schedule-artifact {
  animation: schedule-artifact-arrive 455ms 100ms cubic-bezier(0.18, 0.86, 0.2, 1) both;
}

@keyframes schedule-artifact-arrive { to { opacity: 1; transform: none; } }

.journey-schedule-artifact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.68rem 0.78rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 3%);
}

.journey-schedule-artifact-head > div { display: grid; gap: 0.1rem; }
.journey-schedule-artifact-head small { color: rgb(235 240 255 / 52%); font-size: 0.68rem; letter-spacing: 0.1em; }
.journey-schedule-artifact-head strong { color: #fff; font-size: 0.92rem; }
.journey-schedule-style { min-width: 0; max-width: 54%; display: flex; align-items: center; gap: 0.38rem; padding: 0.34rem 0.5rem; border: 1px solid rgb(126 166 240 / 22%); border-radius: 999px; background: rgb(105 144 220 / 9%); }
.journey-schedule-style i { width: 0.4rem; height: 0.4rem; flex: none; border-radius: 50%; background: #7da5ee; box-shadow: 0 0 0.55rem #7da5ee; }
.journey-schedule-style b { overflow: hidden; color: #cddcff; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }

.journey-schedule-rows { display: grid; }
.journey-schedule-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.62rem 0.78rem;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  transition: opacity 260ms ease, background 260ms ease;
}

.journey-schedule-row[data-state="waiting"] { opacity: 0.3; }
.journey-schedule-row[data-state="building"] { background: linear-gradient(90deg, rgb(116 154 235 / 12%), transparent); }
.journey-schedule-row[data-state="ready"] { background: linear-gradient(90deg, rgb(111 205 176 / 9%), transparent); }
.journey-schedule-row-index { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 12%); border-radius: 0.5rem; background: rgb(255 255 255 / 4%); color: rgb(235 240 255 / 62%); font-size: 0.8rem; font-weight: 740; }
.journey-schedule-row[data-state="ready"] .journey-schedule-row-index { border-color: rgb(111 205 176 / 36%); background: rgb(111 205 176 / 12%); color: #bdf0df; }
.journey-schedule-row-copy { min-width: 0; display: grid; gap: 0.11rem; }
.journey-schedule-row-copy small { color: rgb(234 239 255 / 52%); font-size: 0.7rem; line-height: 1.25; }
.journey-schedule-row-copy strong { color: #fff; font-size: 0.88rem; line-height: 1.2; }
.journey-schedule-row-copy span { overflow: hidden; color: #b7c7ee; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.journey-schedule-row-state { width: 1.3rem; display: flex; justify-content: center; gap: 0.11rem; }
.journey-schedule-row-state i { width: 0.2rem; height: 0.2rem; border-radius: 50%; background: rgb(255 255 255 / 25%); }
.journey-schedule-row[data-state="building"] .journey-schedule-row-state i { background: #8aaaf0; animation: schedule-reading 800ms ease-in-out infinite alternate; }
.journey-schedule-row[data-state="building"] .journey-schedule-row-state i:nth-child(2) { animation-delay: 120ms; }
.journey-schedule-row[data-state="building"] .journey-schedule-row-state i:nth-child(3) { animation-delay: 240ms; }
.journey-schedule-row[data-state="ready"] .journey-schedule-row-state::before { content: ""; width: 0.55rem; height: 0.3rem; border-left: 2px solid #78d0b4; border-bottom: 2px solid #78d0b4; transform: rotate(-45deg); }
.journey-schedule-row[data-state="ready"] .journey-schedule-row-state i { display: none; }
@keyframes schedule-reading { to { opacity: 0.25; transform: translateY(-0.16rem); } }

.journey-schedule-artifact-foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.62rem; padding: 0.58rem 0.7rem; background: rgb(255 255 255 / 3%); }
.journey-schedule-build-mark { position: relative; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 0.5rem; background: rgb(126 164 238 / 12%); }
.journey-schedule-build-mark i:first-child { width: 0.72rem; height: 0.72rem; border: 2px solid #86a9ed; border-right-color: transparent; border-radius: 50%; animation: schedule-build-spin 1.1s linear infinite; }
.journey-schedule-artifact[data-build-stage="2"] .journey-schedule-build-mark i:first-child,
.journey-schedule-artifact[data-build-stage="3"] .journey-schedule-build-mark i:first-child { width: 0.55rem; height: 0.3rem; border: 0; border-left: 2px solid #76cfb1; border-bottom: 2px solid #76cfb1; border-radius: 0; animation: none; transform: rotate(-45deg); }
@keyframes schedule-build-spin { to { transform: rotate(1turn); } }
.journey-schedule-artifact-foot p { display: grid; gap: 0.08rem; }
.journey-schedule-artifact-foot small { color: rgb(234 239 255 / 50%); font-size: 0.825rem; letter-spacing: 0.07em; }
.journey-schedule-artifact-foot strong { color: rgb(241 244 255 / 82%); font-size: 0.78rem; }

.journey-plan-focus {
  margin-top: 0.7rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgb(115 208 177 / 18%);
  border-radius: 0.8rem;
  background: rgb(115 208 177 / 8%);
}

.journey-plan-focus > small { color: rgb(190 241 222 / 62%); font-size: 0.68rem; letter-spacing: 0.08em; }
.journey-plan-focus > strong { display: block; margin-top: 0.2rem; color: #d5f7e9; font-size: 0.95rem; }
.journey-plan-focus .journey-free-action { margin: 0.3rem 0 0; padding: 0; background: transparent; font-size: 0.78rem; line-height: 1.35; }

.journey-plan-build .journey-loader { height: 0.34rem; margin-top: 0.55rem; }
.journey-plan-build .journey-loader span { width: 64%; background: linear-gradient(90deg, #6b9ff4, #7bd2b5); box-shadow: 0 0 0.8rem rgb(111 177 228 / 42%); }

.journey-cancel .journey-schedule-artifact {
  margin-top: 0.65rem;
  opacity: 1;
  transform: scale(0.97);
}

.journey-schedule-artifact--cancel .journey-schedule-row { min-height: 3.35rem; }
.journey-schedule-artifact--cancel .journey-schedule-artifact-foot { display: none; }
.journey-schedule-lock { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 0.5rem; background: linear-gradient(rgb(8 12 29 / 40%), rgb(8 12 29 / 88%)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.journey-schedule-lock > span { position: relative; width: 2.3rem; height: 1.8rem; border-radius: 0.55rem; background: #f2b778; box-shadow: 0 0 1.4rem rgb(242 183 120 / 24%); }
.journey-schedule-lock > span i:first-child { position: absolute; width: 1.2rem; height: 1.1rem; left: 0.55rem; top: -0.75rem; border: 0.27rem solid #f2b778; border-bottom: 0; border-radius: 1rem 1rem 0 0; }
.journey-schedule-lock > span i:nth-child(2) { position: absolute; width: 0.3rem; height: 0.48rem; left: 1rem; top: 0.65rem; border-radius: 1rem; background: #302316; }
.journey-schedule-lock strong { color: #fff; font-size: 0.825rem; }

.journey-offer-list {
  list-style: none;
  padding-left: 0;
}

@media (max-height: 46rem) {
  .journey-goal { min-height: 4.35rem; }
  .journey-goals-intro { font-size: 0.7rem; }
  .journey-goal-roadmap-item { min-height: 3.05rem; }
  .journey-review-stack { min-height: 13.8rem; }
  .journey-review-card[data-review-position="1"] { top: 6.65rem; }
  .journey-review-card p { font-size: 0.76rem; }
  .journey-pledge-ceremony { width: 10.3rem; height: 10.3rem; margin-top: 0.35rem; }
  .journey-pledge-card { margin-top: 0.25rem; }
  .journey-signature-pad { height: 9rem; }
  .journey-schedule-row { min-height: 3.4rem; }
  .journey-schedule-row-copy strong,
  .journey-schedule-row-copy span { font-size: 0.7rem; }
  .journey-plan-focus { padding-block: 0.4rem; }
}

/* ===================================== Assessment-specific microvisuals */
.journey-question-cue {
  position: relative;
  width: min(100%, 20.5rem);
  height: 4.75rem;
  flex: none;
  margin: 0.85rem auto 0;
  color: #8eaff6;
  opacity: 0;
  transform: translateY(0.45rem);
}

.journey-question[data-ready="true"] .journey-question-cue {
  animation: question-cue-arrive 520ms 90ms ease-out both;
}

@keyframes question-cue-arrive { to { opacity: 1; transform: none; } }

.journey-question[data-ready="true"] .option {
  animation: question-option-arrive 360ms ease-out both;
}

.journey-question[data-ready="true"] .option:nth-child(2) { animation-delay: 45ms; }
.journey-question[data-ready="true"] .option:nth-child(3) { animation-delay: 90ms; }
.journey-question[data-ready="true"] .option:nth-child(4) { animation-delay: 135ms; }
.journey-question[data-ready="true"] .option:nth-child(5) { animation-delay: 180ms; }
@keyframes question-option-arrive { from { opacity: 0; transform: translateY(0.35rem); } }

.journey-question .option[aria-checked="true"] {
  animation: question-choice-confirm 220ms cubic-bezier(0.2, 1.15, 0.3, 1) both;
}

@keyframes question-choice-confirm { 55% { transform: scale(0.985); } }

.journey-question .option[aria-checked="true"] .dot {
  position: relative;
}

.journey-question .option[aria-checked="true"] .dot::after {
  content: "";
  position: absolute;
  width: 0.42rem;
  height: 0.23rem;
  left: 0.26rem;
  top: 0.28rem;
  border-left: 2px solid #11162e;
  border-bottom: 2px solid #11162e;
  transform: rotate(-45deg);
}

/* ---- shared cue frame: artwork row, then a label row that cannot collide ---- */
.qcue {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.4rem;
}

.qcue-art {
  position: relative;
  min-height: 0;
}

.qcue-labels {
  display: grid;
  align-items: center;
  gap: 0.3rem;
}

.qcue-labels span {
  color: rgb(233 239 255 / 52%);
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
}

.qcue-labels--one { grid-template-columns: minmax(0, 1fr); }
.qcue-labels--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qcue-labels--seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.qcue-labels--three span:first-child { text-align: left; }
.qcue-labels--three span:last-child { text-align: right; }

/* ---- recognition: five rising bars ---- */
.question-recognition {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.34rem;
}

.question-recognition i {
  width: 0.42rem;
  border-radius: 1rem;
  background: linear-gradient(#8fb0ef, #5f79c8);
  transform-origin: bottom;
  transform: scaleY(0);
}

.question-recognition i:nth-child(1) { height: 46%; }
.question-recognition i:nth-child(2) { height: 100%; }
.question-recognition i:nth-child(3) { height: 74%; }
.question-recognition i:nth-child(4) { height: 40%; }
.question-recognition i:nth-child(5) { height: 84%; }
.journey-question[data-ready="true"] .question-recognition i { animation: recognition-rise 420ms 110ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.journey-question[data-ready="true"] .question-recognition i:nth-child(2) { animation-delay: 150ms; }
.journey-question[data-ready="true"] .question-recognition i:nth-child(3) { animation-delay: 190ms; }
.journey-question[data-ready="true"] .question-recognition i:nth-child(4) { animation-delay: 230ms; }
.journey-question[data-ready="true"] .question-recognition i:nth-child(5) { animation-delay: 270ms; }
@keyframes recognition-rise { to { transform: scaleY(1); } }

/* ---- dawn: a sun climbing over a marked rail ---- */
.question-dawn { display: grid; align-items: end; }

.question-dawn-rail {
  position: relative;
  height: 2px;
  margin-inline: 0.6rem;
  border-radius: 2px;
  background: rgb(255 255 255 / 12%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.question-dawn-rail i {
  width: 0.45rem;
  height: 0.45rem;
  justify-self: center;
  align-self: center;
  border: 2px solid #8fb0ef;
  border-radius: 50%;
  background: #111934;
}

.question-dawn-sun {
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  left: 46%;
  bottom: 0.55rem;
  border-radius: 50%;
  background: #ffca78;
  box-shadow: 0 0 1.1rem rgb(255 191 106 / 55%);
  transform: translate(-50%, 1rem);
}

.journey-question[data-ready="true"] .question-dawn-sun { animation: question-sun-rise 520ms 150ms ease-out both; }
@keyframes question-sun-rise { to { transform: translate(-50%, 0); } }

/* ---- nap modes: clock or cues, with the blend bar between them ---- */
.question-nap-modes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding-inline: 0.4rem;
}

.question-nap-modes > div i {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(132 169 240 / 25%);
  border-radius: 0.8rem;
  background: rgb(111 149 223 / 10%);
}

.question-nap-modes > div:first-child i::before { content: ""; display: block; width: 1.1rem; height: 1.1rem; margin: 0.65rem; border: 2px solid #92b2f0; border-radius: 50%; background: conic-gradient(transparent 25%, #92b2f0 0 28%, transparent 0); }
.question-nap-modes > div:last-child i::before { content: ""; display: block; width: 1rem; height: 1rem; margin: 0.7rem; border-radius: 50% 0 50% 50%; background: #75cdb2; transform: rotate(-35deg); }

.question-nap-modes em {
  height: 0.25rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, #89abec, #75cdb2);
  transform: scaleX(0);
}

.journey-question[data-ready="true"] .question-nap-modes em { animation: scene-clean-draw 420ms 160ms ease-out both; }

/* ---- week strip: seven mornings ---- */
.question-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
}

.question-week-strip i {
  width: 1.3rem;
  height: 1.3rem;
  justify-self: center;
  border-radius: 50%;
  background: linear-gradient(#f5b96f 0 47%, #273863 48%);
  box-shadow: 0 0 0.65rem rgb(245 185 111 / 16%);
  opacity: 0.25;
  transform: translateY(0.4rem);
}

.question-week-strip i:nth-child(-n+4) { opacity: 1; }
.journey-question[data-ready="true"] .question-week-strip i:nth-child(-n+4) { animation: early-day-pop 300ms 140ms ease-out both; }
.journey-question[data-ready="true"] .question-week-strip i:nth-child(2) { animation-delay: 180ms; }
.journey-question[data-ready="true"] .question-week-strip i:nth-child(3) { animation-delay: 220ms; }
.journey-question[data-ready="true"] .question-week-strip i:nth-child(4) { animation-delay: 260ms; }
@keyframes early-day-pop { to { opacity: 1; transform: none; } }

/* ---- nap meter: how much of the planned block holds ---- */
.question-nap-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding-inline: 0.4rem;
}

.question-nap-meter > span { color: rgb(233 239 255 / 52%); font-size: 0.72rem; }
.question-nap-meter > i { position: relative; height: 0.68rem; overflow: hidden; border-radius: 1rem; background: rgb(255 255 255 / 7%); }
.question-nap-meter > i b { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #6e91dc, #7fd1b7); transform: scaleX(0); transform-origin: left; }
.journey-question[data-ready="true"] .question-nap-meter > i b { animation: nap-meter-fill 520ms 160ms ease-out both; }
@keyframes nap-meter-fill { to { transform: scaleX(0.62); } }

/* ---- window gauge: where the same routine lands ---- */
.question-window-gauge { position: relative; }

.question-window-gauge::before {
  content: "";
  position: absolute;
  width: 9.5rem;
  height: 4.75rem;
  left: 50%;
  bottom: 0;
  border: 0.6rem solid rgb(255 255 255 / 7%);
  border-bottom: 0;
  border-radius: 6rem 6rem 0 0;
  transform: translateX(-50%);
}

.question-window-gauge > i { position: absolute; width: 0.6rem; height: 0.6rem; bottom: -0.1rem; border-radius: 50%; background: #7c99dd; }
.question-window-gauge > i:first-child { left: calc(50% - 5rem); }
.question-window-gauge > i:nth-child(2) { left: calc(50% - 0.3rem); top: 0; background: #75cfaf; }
.question-window-gauge > i:nth-child(3) { right: calc(50% - 5rem); background: #ed8f7e; }
.question-window-gauge > b { position: absolute; width: 4.1rem; height: 3px; left: 50%; bottom: 0.15rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0.6rem #fff; transform: rotate(-66deg); transform-origin: left; }
.journey-question[data-ready="true"] .question-window-gauge > b { animation: question-gauge-set 520ms 160ms ease-out both; }
@keyframes question-gauge-set { to { transform: rotate(-42deg); } }

/* ---- settling timer: a dial beside the settling band ---- */
.question-settling-timer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding-inline: 1.4rem;
}

.question-settling-timer > div { position: relative; width: 3rem; height: 3rem; border: 0.28rem solid rgb(255 255 255 / 8%); border-radius: 50%; }
.question-settling-timer > div i { position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 2px; border-radius: 2px; background: #9cb6ef; transform: rotate(-90deg); transform-origin: left; }
.journey-question[data-ready="true"] .question-settling-timer > div i { animation: settling-hand 560ms 150ms ease-in-out both; }
@keyframes settling-hand { to { transform: rotate(54deg); } }
.question-settling-timer > div b { position: absolute; width: 0.42rem; height: 0.42rem; left: 50%; top: 50%; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.question-settling-timer > em { height: 0.25rem; border-radius: 1rem; background: linear-gradient(90deg, #77cbb0 35%, #f0b675 35% 68%, #ed8d80 68%); }

/* ---- night line: wakes across one night ---- */
.question-night-line { position: relative; }

.question-night-line::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.55rem;
  height: 1px;
  background: rgb(255 255 255 / 10%);
}

.question-night-line > span { position: absolute; width: 1.8rem; height: 1.8rem; right: 0.5rem; top: 0; border-radius: 50%; background: #9c91ec; box-shadow: 0 0 1rem rgb(156 145 236 / 35%); }
.question-night-line > span::after { content: ""; position: absolute; width: 1.8rem; height: 1.8rem; left: 0.55rem; top: -0.3rem; border-radius: 50%; background: #0b1029; }
.question-night-line > i { position: absolute; width: 0.38rem; height: 0.38rem; bottom: 0.36rem; border-radius: 50%; background: #829fe4; box-shadow: 0 0 0.55rem #829fe4; transform: scale(0); }
.question-night-line > i:nth-of-type(1) { left: 12%; }
.question-night-line > i:nth-of-type(2) { left: 34%; }
.question-night-line > i:nth-of-type(3) { left: 56%; }
.question-night-line > i:nth-of-type(4) { left: 76%; }
.journey-question[data-ready="true"] .question-night-line > i { animation: scene-check-pop 280ms 120ms cubic-bezier(0.2, 1.35, 0.3, 1) both; }
.journey-question[data-ready="true"] .question-night-line > i:nth-of-type(2) { animation-delay: 200ms; }
.journey-question[data-ready="true"] .question-night-line > i:nth-of-type(3) { animation-delay: 260ms; }
.journey-question[data-ready="true"] .question-night-line > i:nth-of-type(4) { animation-delay: 320ms; }
.question-night-line > b { position: absolute; left: 0.4rem; right: 0.4rem; bottom: 0.55rem; height: 2px; background: linear-gradient(90deg, #647fc5, #9e91ec); transform: scaleX(0); transform-origin: left; }
.journey-question[data-ready="true"] .question-night-line > b { animation: scene-clean-draw 460ms 150ms ease-out both; }

/* ---- certainty: guessing to clear ---- */
.question-certainty { display: grid; align-items: center; padding-inline: 0.4rem; }
.question-certainty > i { position: relative; height: 0.42rem; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border-radius: 1rem; background: linear-gradient(90deg, #e08a80, #e5ba72, #7bcaae); }
.question-certainty > i b { width: 0.68rem; height: 0.68rem; justify-self: center; border: 2px solid #111834; border-radius: 50%; background: #fff; opacity: 0; transform: scale(0); }
.journey-question[data-ready="true"] .question-certainty > i b { animation: certainty-point 280ms 170ms cubic-bezier(0.2, 1.4, 0.3, 1) both; }
.journey-question[data-ready="true"] .question-certainty > i b:nth-child(2) { animation-delay: 230ms; }
.journey-question[data-ready="true"] .question-certainty > i b:nth-child(3) { animation-delay: 290ms; }
.journey-question[data-ready="true"] .question-certainty > i b:nth-child(4) { animation-delay: 350ms; }
@keyframes certainty-point { to { opacity: 1; transform: scale(1); } }

/* ---- plan previews: three formats to choose between ---- */
.question-plan-previews {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.question-plan-previews > i { width: 4rem; height: 3.2rem; display: grid; align-content: center; gap: 0.3rem; padding: 0.5rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 0.75rem; background: linear-gradient(145deg, rgb(37 49 87 / 92%), rgb(15 21 48 / 92%)); box-shadow: 0 0.8rem 1.4rem rgb(0 0 0 / 18%); opacity: 0; transform: translateY(0.5rem) rotate(-2deg); }
.question-plan-previews > i:nth-child(2) { transform: translateY(0.5rem); }
.question-plan-previews > i:nth-child(3) { transform: translateY(0.5rem) rotate(2deg); }
.question-plan-previews b { display: block; height: 0.25rem; border-radius: 1rem; background: rgb(255 255 255 / 12%); }
.question-plan-previews b:first-child { width: 55%; background: #86a8ea; }
.journey-question[data-ready="true"] .question-plan-previews > i:nth-child(1) { animation: plan-preview-left 360ms 150ms ease-out both; } }
@keyframes plan-preview-right { to { opacity: 1; transform: rotate(5deg); } }

@media (max-height: 46rem) {
  .journey-question-cue { height: 3.55rem; margin-top: 0.45rem; }
  .journey-question .options { margin-top: 0.55rem; }
  .question-dawn-sun { display: none; }
  .question-recognition i { height: 1.8rem; }
  .question-recognition i:nth-child(2),
  .question-recognition i:nth-child(5) { height: 2.5rem; }
  .question-week-strip i { width: 1rem; height: 1rem; }
  .question-settling-timer { padding-inline: 3rem; }
  .question-plan-previews > i { height: 2.8rem; }
}

/* -------------------------------------------------------------- legal */
.doc {
  padding-block: var(--space-8) var(--space-10);
}

.doc h1 {
  font-size: var(--display-sm);
}

.doc h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-8);
}

.doc p {
  margin-top: var(--space-4);
  color: var(--muted);
  line-height: 1.62;
}

.doc .summary {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 560;
}

.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.doc-nav a {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 580;
  text-decoration: none;
  color: var(--ink);
}

.doc-nav a[aria-current="page"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ------------------------------------------------------------ desktop */
@media (min-width: 48rem) {
  .section {
    padding-block: var(--space-10);
  }

  .hero {
    padding-block: var(--space-9) var(--space-8);
  }

  .split {
    grid-template-columns: 1fr 1fr;
  }

  .rowlist {
    gap: var(--space-4);
  }

  .sticky-cta {
    display: none;
  }
}

@media (min-width: 64rem) {
  .hero .wrap {
    max-width: var(--measure-wide);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-9);
    align-items: center;
  }

  .hero-figure {
    margin-top: 0;
    aspect-ratio: 4 / 5;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 3.6vw, 3.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================== Baby Sleep premium journey scenes */
.flow[data-journey="true"] .flow-bar-inner {
  padding-inline: 1.1rem;
}

.flow[data-journey="true"] > .screen {
  padding-inline: 1.4rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.journey-story {
  width: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  text-align: left;
}

.journey-story-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(13.25rem, 15rem) auto;
  align-content: center;
  gap: clamp(1rem, 2.7vh, 1.35rem);
  width: 100%;
}

.journey-story-copy {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(0.7rem);
}

.journey-story[data-ready="true"] .journey-story-copy {
  animation: journey-copy-arrive 320ms 90ms cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

@keyframes journey-copy-arrive {
  to { opacity: 1; transform: none; }
}

.journey-story h2 {
  max-width: 24rem;
  margin: 0;
  font-size: clamp(1.72rem, 7.35vw, 2.28rem);
  line-height: 1.01;
  text-align: left;
}

.journey-story .journey-body {
  max-width: 24rem;
  margin: 0.68rem 0 0;
  font-size: clamp(0.88rem, 3.55vw, 1rem);
  line-height: 1.43;
  text-align: left;
}

.journey-story-actions {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 0.9rem;
  width: 100%;
  padding-top: 0.85rem;
}

.journey-story-actions .journey-pips {
  min-height: 0.38rem;
  margin: 0;
}

/* Label and arrow travel together as one centred group. Pinning the arrow to
   the far edge left the button looking lopsided at every label length. */
.journey-story-actions .journey-next,
.journey-next {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0;
  padding: 0.75rem 1.35rem;
  font-size: 1.0625rem;
  font-weight: 660;
  letter-spacing: -0.012em;
}

.journey-next-arrow {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.journey-next:active .journey-next-arrow {
  transform: translateX(0.22rem);
}

/* The frame is constant; only the picture inside it carries chapter colour.
   A frame that also changes hue is what turned the sequence into a rainbow. */
.journey-scene {
  --journey-accent: var(--journey-scene-accent, #7fa6e8);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 13.25rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--journey-accent) 16%, transparent), transparent 52%),
    linear-gradient(145deg, rgb(24 32 70 / 92%), rgb(9 14 37 / 96%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 1rem 2.4rem rgb(0 0 0 / 26%);
  opacity: 0;
  transform: translateY(0.5rem);
}

.journey-story[data-ready="true"] .journey-scene {
  animation: journey-scene-arrive 340ms cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

@keyframes journey-scene-arrive {
  to { opacity: 1; transform: none; }
}

.journey-scene::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 20deg, transparent, color-mix(in srgb, var(--journey-accent) 12%, transparent), transparent 30%);
  opacity: 0.55;
  animation: journey-scene-ambient 14s linear infinite;
  pointer-events: none;
}

@keyframes journey-scene-ambient {
  to { transform: rotate(1turn); }
}

.journey-scene svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.journey-scene svg text {
  fill: rgb(235 240 255 / 58%);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-anchor: middle;
}

.journey-story-evidence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  width: 100%;
  margin: 0 0 0.62rem;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 0.72rem;
  background: rgb(5 9 26 / 64%);
  box-shadow: inset 0 1px rgb(255 255 255 / 7%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(0.3rem);
}

.journey-story[data-ready="true"] .journey-story-evidence {
  animation: scene-answer-arrive 480ms 460ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes scene-answer-arrive {
  to { opacity: 1; transform: none; }
}

.journey-story-evidence span {
  flex: 0 0 auto;
  color: rgb(226 232 255 / 52%);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.journey-story-evidence b {
  min-width: 0;
  color: #fff;
  font-size: 0.775rem;
  line-height: 1.2;
  text-align: right;
}

/* Morning: one anchor visibly moves the whole day. */
.journey-scene--sunrise {
  background:
    radial-gradient(circle at 18% 62%, rgb(255 185 110 / 32%), transparent 25%),
    linear-gradient(180deg, #162c5f 0%, #171b40 58%, #0b1028 100%);
}

.journey-scene--sunrise .scene-aurora {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgb(255 193 123 / 13%) 49%, transparent 68%);
  transform: translateX(-55%);
}

.journey-story[data-ready="true"] .journey-scene--sunrise .scene-aurora {
  animation: scene-aurora-pass 1.61s 120ms ease-out both;
}

@keyframes scene-aurora-pass { to { transform: translateX(45%); } }

.scene-day-arc,
.scene-day-line {
  fill: none;
  stroke: rgb(255 255 255 / 18%);
  stroke-linecap: round;
  stroke-width: 3;
}

.scene-day-line {
  stroke: url(#sun-path);
  stroke-width: 4;
  stroke-dasharray: 196;
  stroke-dashoffset: 196;
}

.journey-story[data-ready="true"] .scene-day-line {
  animation: scene-line-draw 630ms 290ms ease-out both;
}

@keyframes scene-line-draw { to { stroke-dashoffset: 0; } }

.scene-sun {
  fill: #ffd27f;
  filter: drop-shadow(0 0 12px rgb(255 188 99 / 75%));
  opacity: 0;
  transform: translate(-24px, 30px);
}

.journey-story[data-ready="true"] .scene-sun {
  animation: scene-sun-move 875ms 240ms cubic-bezier(0.22, 0.78, 0.16, 1) both;
}

@keyframes scene-sun-move { to { opacity: 1; transform: translate(28px, -32px); } }

.scene-event circle {
  fill: #0c122d;
  stroke: var(--journey-accent);
  stroke-width: 4;
}

.scene-event {
  opacity: 0;
  transform: translateX(-18px);
}

.journey-story[data-ready="true"] .scene-event--morning { animation: scene-event-set 420ms 290ms ease-out both; }
.journey-story[data-ready="true"] .scene-event--nap { animation: scene-event-set 420ms 390ms ease-out both; }
.journey-story[data-ready="true"] .scene-event--bed { animation: scene-event-set 420ms 490ms ease-out both; }
@keyframes scene-event-set { to { opacity: 1; transform: none; } }

.scene-equation {
  position: absolute;
  z-index: 2;
  inset: auto 1rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgb(240 244 255 / 68%);
  font-size: 0.762rem;
  font-weight: 680;
}

.scene-equation i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--journey-accent), transparent);
}

/* Nap: the actual nap contracts, then the next window slides. */
.journey-scene--nap {
  padding: 3.25rem 1.1rem 1rem;
  background:
    radial-gradient(circle at 88% 22%, rgb(111 154 255 / 29%), transparent 30%),
    linear-gradient(145deg, #111b43, #090e27);
}

.scene-nap-head,
.scene-nap-times {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  color: rgb(232 237 255 / 55%);
  font-size: 0.7rem;
  text-align: center;
}

.scene-nap-head strong { color: #a9c5ff; }

.scene-nap-track {
  position: relative;
  height: 4.75rem;
  margin-top: 0.85rem;
  border-radius: 1rem;
  background:
    linear-gradient(90deg, transparent 32.8%, rgb(255 255 255 / 7%) 33%, transparent 33.3%, transparent 66%, rgb(255 255 255 / 7%) 66.2%, transparent 66.5%),
    rgb(255 255 255 / 4%);
  box-shadow: inset 0 1px rgb(255 255 255 / 7%);
}

.scene-nap-track i {
  position: absolute;
  top: 1.08rem;
  height: 2.55rem;
  border-radius: 0.7rem;
}

.scene-nap-planned {
  left: 7%;
  width: 29%;
  border: 1px dashed rgb(255 255 255 / 24%);
  background: rgb(255 255 255 / 4%);
}

.scene-nap-actual {
  left: 7%;
  width: 29%;
  background: linear-gradient(100deg, #89afff, #537ce0);
  box-shadow: 0 0.65rem 1.4rem rgb(79 120 219 / 30%);
  transform-origin: left;
}

.scene-nap-next {
  left: 70%;
  width: 23%;
  border: 1px solid rgb(135 220 190 / 52%);
  background: rgb(112 211 176 / 16%);
}

.scene-nap-cursor {
  position: absolute;
  top: 0.55rem;
  left: 35%;
  width: 2px;
  height: 3.65rem;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0.8rem #fff;
  opacity: 0;
}

.journey-story[data-ready="true"] .scene-nap-actual { animation: scene-nap-contract 476ms 225ms ease-in-out both; }
.journey-story[data-ready="true"] .scene-nap-next { animation: scene-nap-shift-next 504ms 470ms cubic-bezier(0.2, 0.82, 0.2, 1) both; }
.journey-story[data-ready="true"] .scene-nap-cursor { animation: scene-nap-cursor 518ms 210ms ease both; }
@keyframes scene-nap-contract { to { transform: scaleX(0.57); } }
@keyframes scene-nap-shift-next { from { transform: translateX(0); } to { transform: translateX(-30px); } }
@keyframes scene-nap-cursor { 20%, 80% { opacity: 1; } to { left: 23%; opacity: 0; } }

.scene-nap-times { margin-top: 0.45rem; }

.scene-recalc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgb(113 214 181 / 22%);
  border-radius: 0.8rem;
  background: rgb(96 202 165 / 9%);
  opacity: 0;
  transform: translateY(0.4rem);
}

.scene-recalc span { color: rgb(233 238 255 / 54%); font-size: 0.725rem; }
.scene-recalc b { color: #baf2db; font-size: 0.762rem; text-align: right; }
.journey-story[data-ready="true"] .scene-recalc { animation: scene-recalc-arrive 460ms 675ms ease-out both; }
@keyframes scene-recalc-arrive { to { opacity: 1; transform: none; } }

/* Bedtime: a readiness dial shows where the same routine lands. */
.journey-scene--heart {
  background:
    radial-gradient(circle at 50% 55%, rgb(239 132 120 / 18%), transparent 36%),
    linear-gradient(145deg, #241634, #0b1028 72%);
}

.scene-bed-track,
.scene-bed-ready {
  fill: none;
  stroke: rgb(255 255 255 / 10%);
  stroke-linecap: round;
  stroke-width: 20;
}

.scene-bed-ready {
  stroke: url(#bed-arc);
  stroke-dasharray: 336;
  stroke-dashoffset: 336;
}

.journey-story[data-ready="true"] .scene-bed-ready { animation: scene-bed-fill 840ms 250ms ease-out both; }
@keyframes scene-bed-fill { to { stroke-dashoffset: 42; } }

.scene-bed-hand {
  stroke: #fff;
  stroke-linecap: round;
  stroke-width: 5;
  transform: rotate(-72deg);
  transform-origin: 160px 160px;
  filter: drop-shadow(0 0 8px rgb(255 255 255 / 55%));
}

.scene-bed-hand circle { fill: #fff; stroke: none; }
.journey-story[data-ready="true"] .scene-bed-hand { animation: scene-bed-hand-set 805ms 175ms cubic-bezier(0.18, 0.9, 0.2, 1) both; }
@keyframes scene-bed-hand-set { to { transform: rotate(0deg); } }

.scene-bed-note {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 50%;
  display: grid;
  gap: 0.1rem;
  min-width: 12rem;
  padding: 0.58rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0.85rem;
  background: rgb(8 11 29 / 72%);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 0.5rem);
}

.scene-bed-note span { color: rgb(235 239 255 / 52%); font-size: 0.7rem; }
.scene-bed-note b { color: #fff; font-size: 0.812rem; }
.journey-story[data-ready="true"] .scene-bed-note { animation: scene-bed-note 440ms 600ms ease-out both; }
@keyframes scene-bed-note { to { opacity: 1; transform: translate(-50%, 0); } }

/* Day-to-night: the consequence travels along one continuous path. */
.journey-scene--path {
  background:
    linear-gradient(100deg, rgb(255 190 105 / 14%), transparent 43%, rgb(115 111 221 / 18%)),
    linear-gradient(145deg, #172044, #090d25);
}

.scene-causal-line {
  fill: none;
  stroke: url(#day-night);
  stroke-linecap: round;
  stroke-width: 6;
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  filter: drop-shadow(0 0 8px rgb(113 200 193 / 26%));
}

.journey-story[data-ready="true"] .scene-causal-line { animation: scene-causal-draw 1.015s 260ms ease-out both; }
@keyframes scene-causal-draw { to { stroke-dashoffset: 0; } }

.scene-causal-dot { fill: #101733; stroke: #7dd2c7; stroke-width: 4; opacity: 0; }
.journey-story[data-ready="true"] .scene-causal-dot.a { animation: scene-dot-pop 320ms 350ms ease-out both; }
.journey-story[data-ready="true"] .scene-causal-dot.b { animation: scene-dot-pop 320ms 510ms ease-out both; }
.journey-story[data-ready="true"] .scene-causal-dot.c { animation: scene-dot-pop 320ms 670ms ease-out both; }
@keyframes scene-dot-pop { from { transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }

.scene-path-sun { fill: #ffc876; filter: drop-shadow(0 0 10px rgb(255 195 110 / 65%)); }
.scene-path-moon { fill: #9e93eb; filter: drop-shadow(0 0 12px rgb(158 147 235 / 45%)); }
.scene-path-cloud { stroke: rgb(255 255 255 / 16%); stroke-width: 8; stroke-linecap: round; }

.scene-causal-pulse {
  position: absolute;
  z-index: 3;
  width: 0.55rem;
  height: 0.55rem;
  left: 12%;
  top: 34%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 1rem #fff, 0 0 1.8rem #77d1c5;
  opacity: 0;
}

.journey-story[data-ready="true"] .scene-causal-pulse { animation: scene-causal-travel 945ms 220ms ease-in-out both; }
@keyframes scene-causal-travel {
  8% { opacity: 1; }
  34% { transform: translate(84px, 37px); }
  66% { transform: translate(170px, 48px); }
  92% { opacity: 1; transform: translate(255px, 79px); }
  to { opacity: 0; transform: translate(255px, 79px) scale(1.8); }
}

/* Three moving controls resolve into one testable change. */
.journey-scene--dials {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: 2.3rem 1rem 1rem;
  background:
    radial-gradient(circle at 50% 20%, rgb(178 146 244 / 24%), transparent 38%),
    linear-gradient(145deg, #1e1741, #090d25);
}

.scene-dials {
  display: grid;
  gap: 0.62rem;
}

.scene-dials > div {
  display: grid;
  grid-template-columns: 4.2rem 1fr 3.5rem;
  align-items: center;
  gap: 0.55rem;
  color: rgb(237 239 255 / 65%);
  font-size: 0.725rem;
}

.scene-dials i {
  height: 0.5rem;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
}

.scene-dials i b {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  top: 50%;
  left: 12%;
  border-radius: 50%;
  background: #c6aaf8;
  box-shadow: 0 0 0.8rem rgb(187 153 246 / 75%);
  transform: translateY(-50%);
}

.scene-dials > div:nth-child(2) i b { left: 65%; }
.scene-dials > div:nth-child(3) i b { left: 38%; }
.scene-dials strong { color: rgb(235 227 255 / 40%); font-size: 0.7rem; font-weight: 600; }

.journey-story[data-ready="true"] .scene-dials > div:first-child i b { animation: scene-dial-wander-a 546ms 260ms ease-in-out both; }
.journey-story[data-ready="true"] .scene-dials > div:nth-child(2) i b { animation: scene-dial-wander-b 546ms 170ms ease-in-out both; }
.journey-story[data-ready="true"] .scene-dials > div:nth-child(3) i b { animation: scene-dial-wander-c 546ms 210ms ease-in-out both; }
@keyframes scene-dial-wander-a { 45% { left: 74%; } to { left: 48%; opacity: 0.3; } }
@keyframes scene-dial-wander-b { 45% { left: 19%; } to { left: 48%; opacity: 0.3; } }
@keyframes scene-dial-wander-c { 45% { left: 82%; } to { left: 48%; opacity: 0.3; } }

.scene-single-change {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  padding: 0.68rem 0.75rem;
  border: 1px solid rgb(193 158 248 / 28%);
  border-radius: 1rem;
  background: linear-gradient(100deg, rgb(184 145 245 / 17%), rgb(255 255 255 / 4%));
  opacity: 0;
  transform: scale(0.94);
}

.scene-single-change i {
  grid-row: 1 / 3;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  background: #b99af4;
  color: #12102c;
  font-style: normal;
  font-weight: 850;
}

.scene-single-change span { color: #fff; font-size: 0.68rem; font-weight: 740; }
.scene-single-change b { color: rgb(232 229 255 / 55%); font-size: 0.7rem; font-weight: 560; }
.journey-story[data-ready="true"] .scene-single-change { animation: scene-change-lock 500ms 525ms cubic-bezier(0.2, 1.1, 0.3, 1) both; }
@keyframes scene-change-lock { to { opacity: 1; transform: none; } }

/* Flexible line, stable anchors. */
.journey-scene--anchors {
  background:
    radial-gradient(circle at 50% 50%, rgb(99 176 230 / 20%), transparent 40%),
    linear-gradient(145deg, #102142, #090e26);
}

.scene-elastic-line {
  fill: none;
  stroke: #70b9e8;
  stroke-linecap: round;
  stroke-width: 4;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  filter: drop-shadow(0 0 7px rgb(112 185 232 / 42%));
}

.journey-story[data-ready="true"] .scene-elastic-line { animation: scene-elastic-draw 770ms 260ms ease-out both; }
@keyframes scene-elastic-draw { to { stroke-dashoffset: 0; } }

.scene-anchor circle { fill: #101b38; stroke: #81c8f1; stroke-width: 5; }
.scene-anchor { opacity: 0; transform: translateY(24px); }
.journey-story[data-ready="true"] .scene-anchor.a { animation: scene-anchor-lock 430ms 225ms ease-out both; }
.journey-story[data-ready="true"] .scene-anchor.b { animation: scene-anchor-lock 430ms 325ms ease-out both; }
.journey-story[data-ready="true"] .scene-anchor.c { animation: scene-anchor-lock 430ms 425ms ease-out both; }
@keyframes scene-anchor-lock { to { opacity: 1; transform: none; } }

.scene-loose-dots { fill: rgb(208 232 255 / 52%); }
.journey-story[data-ready="true"] .scene-loose-dots { animation: scene-loose-settle 700ms 250ms ease-in-out both; }
@keyframes scene-loose-settle { to { opacity: 0; transform: translateY(65px) scale(0.5); } }

.scene-anchor-caption {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0.85rem;
  display: flex;
  gap: 0.42rem;
  color: rgb(235 242 255 / 56%);
  font-size: 0.737rem;
  transform: translateX(-50%);
  white-space: nowrap;
}

.scene-anchor-caption span { color: #b7e2ff; font-weight: 750; }

/* Reassurance intentionally drops the diagram language. */
.journey-scene--stars {
  isolation: isolate;
  border-color: rgb(255 255 255 / 15%);
  background: #121526;
}

.journey-scene--stars::before { display: none; }

.scene-reassurance-photo {
  position: absolute;
  inset: 0;
  margin: 0;
}

.scene-reassurance-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(0.78) contrast(1.04) brightness(0.72);
  transform: scale(1.08);
}

.journey-story[data-ready="true"] .scene-reassurance-photo img {
  animation: scene-photo-breathe 4.5s ease-out both;
}

@keyframes scene-photo-breathe { to { transform: scale(1.01); } }

.scene-reassurance-photo span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(7 11 29 / 14%), rgb(7 11 29 / 36%) 50%, rgb(7 11 29 / 88%));
}

.scene-reassurance-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 1.1rem;
  width: 46%;
  display: grid;
  gap: 0.3rem;
  transform: translateY(-50%);
  opacity: 0;
}

.scene-reassurance-copy small { color: rgb(255 255 255 / 58%); font-size: 0.812rem; }
.scene-reassurance-copy b { color: #fff; font-size: 1.02rem; line-height: 1.08; }
.journey-story[data-ready="true"] .scene-reassurance-copy { animation: scene-reassurance-copy 490ms 200ms ease-out both; }
@keyframes scene-reassurance-copy { from { transform: translate(0.7rem, -50%); } to { opacity: 1; transform: translate(0, -50%); } }

/* Tomorrow: uncertain choices collapse into one first move. */
.journey-scene--sprout {
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 78% 28%, rgb(118 201 141 / 23%), transparent 34%),
    linear-gradient(145deg, #10213a, #090e25);
}

.scene-tomorrow {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.1fr);
  align-items: center;
  gap: 0.6rem;
}

.scene-tomorrow-before,
.scene-tomorrow-after {
  min-height: 9.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  padding: 0.82rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1.15rem;
  background: rgb(255 255 255 / 4%);
}

.scene-tomorrow small { color: rgb(232 239 255 / 45%); font-size: 0.7rem; letter-spacing: 0.12em; }
.scene-tomorrow-before span { color: rgb(235 239 255 / 62%); font-size: 0.762rem; }
.scene-tomorrow-before span::before { content: "?"; margin-right: 0.35rem; color: #ee9a8b; }
.scene-tomorrow-arrow { color: #a8c5ff; font-size: 1.25rem; opacity: 0; transform: translateX(-0.5rem); }

.scene-tomorrow-after {
  border-color: rgb(118 201 141 / 32%);
  background: linear-gradient(145deg, rgb(118 201 141 / 15%), rgb(255 255 255 / 4%));
  opacity: 0;
  transform: translateX(-1rem);
}

.scene-tomorrow-after strong { color: #d6f6df; font-size: 0.79rem; }
.scene-tomorrow-after span { color: #fff; font-size: 0.838rem; }
.scene-tomorrow-after i { height: 0.32rem; margin-top: auto; border-radius: 1rem; background: linear-gradient(90deg, #76c98d 68%, rgb(255 255 255 / 8%) 68%); }
.journey-story[data-ready="true"] .scene-tomorrow-before { animation: scene-before-dim 490ms 250ms ease both; }
.journey-story[data-ready="true"] .scene-tomorrow-arrow { animation: scene-arrow-forward 420ms 215ms ease-out both; }
.journey-story[data-ready="true"] .scene-tomorrow-after { animation: scene-after-arrive 600ms 270ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
@keyframes scene-before-dim { to { opacity: 0.48; transform: scale(0.96); filter: blur(0.5px); } }
@keyframes scene-arrow-forward { to { opacity: 1; transform: none; } }
@keyframes scene-after-arrive { to { opacity: 1; transform: none; } }

/* Proof and product scenes use tactile app artifacts, not pictograms. */
.journey-scene--proof-schedule,
.journey-scene--value-schedule {
  display: grid;
  place-items: center;
  padding: 0.85rem;
  background: linear-gradient(145deg, #172548, #090e25);
}

.scene-phone,
.scene-product {
  position: relative;
  z-index: 2;
  width: min(15rem, 78%);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.15rem;
  background: linear-gradient(160deg, rgb(33 45 83 / 96%), rgb(13 19 45 / 96%));
  box-shadow: 0 1.2rem 2.5rem rgb(0 0 0 / 34%), inset 0 1px rgb(255 255 255 / 9%);
  transform: perspective(700px) rotateY(-7deg) rotateX(3deg);
}

.scene-phone-top,
.scene-product-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.72rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  color: rgb(235 240 255 / 53%);
  font-size: 0.7rem;
}

.scene-phone-top b,
.scene-product-head b { color: #fff; }

.scene-phone-row,
.scene-product-time {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.5rem;
  padding: 0.62rem 0.72rem;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}

.scene-phone-row small,
.scene-product-time small { color: rgb(234 238 255 / 48%); font-size: 0.7rem; }
.scene-phone-row strong,
.scene-product-time span { color: #fff; font-size: 0.775rem; }
.scene-phone-row--alert { background: rgb(240 139 120 / 9%); }
.scene-phone-row--move { background: rgb(111 205 175 / 0%); transform: translateX(1rem); opacity: 0; }

.journey-story[data-ready="true"] .scene-phone-row--move {
  animation: scene-phone-update 540ms 450ms ease-out both;
}
@keyframes scene-phone-update { to { opacity: 1; transform: none; background: rgb(111 205 175 / 12%); } }

.scene-proof-toast {
  position: absolute;
  z-index: 3;
  right: 0.75rem;
  bottom: 0.8rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgb(116 217 183 / 28%);
  border-radius: 0.75rem;
  background: rgb(11 29 33 / 88%);
  color: #c9f6e6;
  font-size: 0.7rem;
  box-shadow: 0 0.8rem 1.6rem rgb(0 0 0 / 28%);
  opacity: 0;
  transform: translateY(0.7rem);
}

.scene-proof-toast span { color: #78d6b8; font-weight: 850; }
.journey-story[data-ready="true"] .scene-proof-toast { animation: scene-toast-arrive 420ms 650ms ease-out both; }
@keyframes scene-toast-arrive { to { opacity: 1; transform: none; } }

.journey-scene--proof-path {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: linear-gradient(145deg, #221738, #090d24);
}

.scene-compare {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.55rem;
}

.scene-compare > div {
  position: relative;
  min-height: 9.5rem;
  overflow: hidden;
  padding: 0.75rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 4%);
}

.scene-compare small { color: rgb(237 235 255 / 43%); font-size: 0.7rem; letter-spacing: 0.08em; }
.scene-compare b { position: absolute; left: 0.75rem; bottom: 0.7rem; color: #fff; font-size: 0.737rem; }
.scene-compare-arrow { color: #b797f1; }
.scene-scribble { position: absolute; left: 12%; width: 76%; height: 2px; border-radius: 4px; background: #ec907e; transform-origin: left; }
.scene-scribble.a { top: 42%; transform: rotate(23deg); }
.scene-scribble.b { top: 53%; transform: rotate(-31deg); }
.scene-scribble.c { top: 63%; transform: rotate(14deg); }
.scene-clean-line { position: absolute; left: 14%; right: 14%; top: 54%; height: 3px; border-radius: 4px; background: linear-gradient(90deg, #8a70df, #79d1b5); transform: scaleX(0); transform-origin: left; }
.scene-compare em { position: absolute; top: calc(54% - 4px); width: 11px; height: 11px; border: 2px solid #8bd7be; border-radius: 50%; background: #11152d; opacity: 0; }
.scene-compare em:nth-of-type(1) { left: 18%; }
.scene-compare em:nth-of-type(2) { left: 47%; }
.scene-compare em:nth-of-type(3) { right: 16%; }
.journey-story[data-ready="true"] .scene-scribble { animation: scene-scribble-fade 434ms 175ms ease both; }
.journey-story[data-ready="true"] .scene-clean-line { animation: scene-clean-draw 560ms 360ms ease-out both; }
.journey-story[data-ready="true"] .scene-compare em { animation: scene-dot-pop 300ms 575ms ease-out both; }
@keyframes scene-scribble-fade { to { opacity: 0.2; filter: blur(1px); } }
@keyframes scene-clean-draw { to { transform: scaleX(1); } }

.journey-scene--proof-cards,
.journey-scene--offer-cards {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 36%, rgb(137 113 224 / 22%), transparent 40%),
    linear-gradient(145deg, #171638, #080d24);
}

.scene-collapse,
.scene-offer-stack {
  position: relative;
  z-index: 2;
  width: 14rem;
  height: 10.5rem;
}

.scene-tab,
.scene-offer-card {
  position: absolute;
  width: 10.5rem;
  min-height: 6.8rem;
  padding: 0.75rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgb(41 48 85 / 97%), rgb(14 19 44 / 97%));
  box-shadow: 0 1rem 2.4rem rgb(0 0 0 / 31%), inset 0 1px rgb(255 255 255 / 8%);
}

.scene-tab span,
.scene-offer-card small { color: rgb(236 239 255 / 48%); font-size: 0.7rem; }
.scene-tab i { display: block; width: 70%; height: 0.4rem; margin-top: 0.65rem; border-radius: 1rem; background: rgb(255 255 255 / 9%); }
.scene-tab.a { left: 0; top: 0.3rem; transform: rotate(-10deg); }
.scene-tab.b { right: 0; top: 0; transform: rotate(10deg); }
.scene-tab.c { left: 1.8rem; bottom: 0; transform: rotate(-3deg); }
.scene-tab.final { left: 50%; top: 50%; z-index: 4; display: grid; gap: 0.4rem; transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
.scene-tab.final b { color: #fff; font-size: 0.75rem; }
.scene-tab.final i { width: 100%; background: linear-gradient(90deg, #8f78e3 74%, rgb(255 255 255 / 8%) 74%); }
.journey-story[data-ready="true"] .scene-tab:not(.final) { animation: scene-tabs-collapse 532ms 225ms ease-in both; }
.journey-story[data-ready="true"] .scene-tab.final { animation: scene-final-card 600ms 460ms cubic-bezier(0.18, 1.12, 0.25, 1) both; }
@keyframes scene-tabs-collapse { to { opacity: 0; transform: translate(1.6rem, 1rem) scale(0.55); } }
@keyframes scene-final-card { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.scene-product-time {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  transform: translateX(0.65rem);
  opacity: 0;
}

.scene-product-time small { color: #9fb8ef; }
.scene-product-time i { color: rgb(231 238 255 / 45%); font-size: 0.7rem; font-style: normal; }
.scene-product-time--short { background: rgb(240 139 120 / 8%); }
.scene-product-time--next { background: rgb(113 211 179 / 10%); }
.journey-story[data-ready="true"] .scene-product-time:nth-child(2) { animation: scene-product-row 420ms 250ms ease-out both; }
.journey-story[data-ready="true"] .scene-product-time:nth-child(3) { animation: scene-product-row 420ms 215ms ease-out both; }
.journey-story[data-ready="true"] .scene-product-time:nth-child(4) { animation: scene-product-row 420ms 305ms ease-out both; }
@keyframes scene-product-row { to { opacity: 1; transform: none; } }

.journey-scene--value-handoff {
  padding: 1rem;
  background: linear-gradient(145deg, #10233d, #090e26);
}

.scene-handoff {
  position: relative;
  z-index: 2;
  height: 10.6rem;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: end;
  gap: 0.35rem;
}

.scene-handoff > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgb(112 199 194 / 32%); stroke-width: 3; stroke-dasharray: 280; stroke-dashoffset: 280; }
.scene-person { display: grid; justify-items: center; gap: 0.45rem; color: rgb(232 238 255 / 54%); font-size: 0.712rem; }
.scene-person i { width: 2.3rem; height: 2.3rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; background: linear-gradient(145deg, #7c97d9, #364c85); box-shadow: 0 1rem 1.4rem rgb(0 0 0 / 25%); }
.scene-shared-card { z-index: 3; display: grid; grid-template-columns: 1fr; gap: 0.12rem; padding: 0.65rem; border: 1px solid rgb(255 255 255 / 15%); border-radius: 0.85rem; background: rgb(20 29 62 / 92%); box-shadow: 0 0.8rem 1.8rem rgb(0 0 0 / 28%); transform: translateX(-3.3rem) rotate(-4deg); }
.scene-shared-card small { color: rgb(233 239 255 / 42%); font-size: 0.7rem; }
.scene-shared-card b { color: #fff; font-size: 0.762rem; }
.scene-shared-card span { color: rgb(233 239 255 / 56%); font-size: 0.7rem; text-align: left; }
.journey-story[data-ready="true"] .scene-shared-card { animation: scene-card-handoff 840ms 190ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.journey-story[data-ready="true"] .scene-handoff > svg { animation: scene-line-draw 630ms 200ms ease-out both; }
@keyframes scene-card-handoff { 55% { transform: translateX(0) rotate(1deg) scale(1.04); } to { transform: translateX(3.3rem) rotate(4deg); } }
@media (max-width: 350px) {
  .scene-shared-card { transform: translateX(-1rem) rotate(-3deg); }
  .journey-story[data-ready="true"] .scene-shared-card {
    animation-name: scene-card-handoff-compact;
  }
  @keyframes scene-card-handoff-compact {
    55% { transform: translateX(0) rotate(1deg) scale(1.03); }
    to { transform: translateX(1rem) rotate(3deg); }
  }
}
.scene-handoff-status { position: relative; z-index: 3; width: max-content; margin: 0.3rem auto 0; padding: 0.52rem 0.7rem; border-radius: 999px; background: rgb(110 204 176 / 11%); color: #c9f3e7; font-size: 0.712rem; opacity: 0; }
.scene-handoff-status i { color: #74d0b4; font-style: normal; }
.journey-story[data-ready="true"] .scene-handoff-status { animation: scene-toast-arrive 420ms 725ms ease-out both; }

.journey-scene--value-habits {
  display: grid;
  align-content: center;
  gap: 0.8rem;
  padding: 1rem;
  background: linear-gradient(145deg, #1b2541, #090e26);
}

.scene-habits { position: relative; z-index: 2; display: grid; gap: 0.48rem; }
.scene-habits > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.65rem; padding: 0.6rem 0.7rem; border: 1px solid rgb(255 255 255 / 9%); border-radius: 0.85rem; background: rgb(255 255 255 / 4%); opacity: 0; transform: translateX(0.7rem); }
.scene-habits > div > i { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 0.5rem; background: rgb(126 153 220 / 16%); color: #a9bdec; font-size: 0.725rem; font-style: normal; }
.scene-habits span { display: grid; gap: 0.08rem; }
.scene-habits small { color: rgb(232 238 255 / 43%); font-size: 0.7rem; }
.scene-habits b { color: #fff; font-size: 0.787rem; }
.scene-habits em { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; background: #70caa9; color: #081a15; font-size: 0.775rem; font-style: normal; transform: scale(0); }
.journey-story[data-ready="true"] .scene-habits > div:nth-child(1) { animation: scene-product-row 360ms 220ms ease-out both; }
.journey-story[data-ready="true"] .scene-habits > div:nth-child(2) { animation: scene-product-row 360ms 200ms ease-out both; }
.journey-story[data-ready="true"] .scene-habits > div:nth-child(3) { animation: scene-product-row 360ms 290ms ease-out both; }
.journey-story[data-ready="true"] .scene-habits > div:nth-child(1) em { animation: scene-check-pop 320ms 215ms cubic-bezier(0.2, 1.4, 0.3, 1) both; }
.journey-story[data-ready="true"] .scene-habits > div:nth-child(2) em { animation: scene-check-pop 320ms 305ms cubic-bezier(0.2, 1.4, 0.3, 1) both; }
.journey-story[data-ready="true"] .scene-habits > div:nth-child(3) em { animation: scene-check-pop 320ms 395ms cubic-bezier(0.2, 1.4, 0.3, 1) both; }
@keyframes scene-check-pop { to { transform: scale(1); } }
.scene-habits-caption { position: relative; z-index: 2; color: rgb(232 239 255 / 54%); font-size: 0.725rem; text-align: center; }

.journey-scene--value-control {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(circle at 50% 42%, rgb(116 153 234 / 22%), transparent 42%), #090e25;
}

.scene-control { position: relative; z-index: 2; width: 100%; height: 100%; display: grid; place-items: center; }
.scene-control-cloud { position: absolute; inset: 0; }
.scene-control-cloud span { position: absolute; padding: 0.42rem 0.58rem; border: 1px solid rgb(255 255 255 / 9%); border-radius: 999px; background: rgb(255 255 255 / 4%); color: rgb(234 239 255 / 45%); font-size: 0.7rem; }
.scene-control-cloud span:nth-child(1) { left: 4%; top: 17%; }
.scene-control-cloud span:nth-child(2) { right: 3%; top: 22%; }
.scene-control-cloud span:nth-child(3) { left: 10%; bottom: 17%; }
.scene-control-cloud span:nth-child(4) { right: 8%; bottom: 14%; }
.scene-control-cloud span:nth-child(5) { left: 46%; top: 5%; }
.scene-control-focus { position: relative; width: 70%; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.5rem; padding: 0.82rem; border: 1px solid rgb(119 158 241 / 34%); border-radius: 1rem; background: linear-gradient(145deg, rgb(52 73 128 / 80%), rgb(16 23 52 / 94%)); box-shadow: 0 1.1rem 2.6rem rgb(0 0 0 / 30%), 0 0 2rem rgb(97 134 218 / 17%); transform: scale(0.88); opacity: 0; }
.scene-control-focus small { color: #9fb7ec; font-size: 0.7rem; letter-spacing: 0.1em; }
.scene-control-focus b { grid-column: 1; color: #fff; font-size: 0.71rem; line-height: 1.18; }
.scene-control-focus i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #b7caff; font-size: 1.1rem; font-style: normal; }
.journey-story[data-ready="true"] .scene-control-cloud { animation: scene-cloud-clear 546ms 220ms ease both; }
.journey-story[data-ready="true"] .scene-control-focus { animation: scene-focus-arrive 520ms 240ms cubic-bezier(0.2, 1.12, 0.3, 1) both; }
@keyframes scene-cloud-clear { to { opacity: 0.18; filter: blur(1.5px); transform: scale(1.08); } }
@keyframes scene-focus-arrive { to { opacity: 1; transform: none; } }

.journey-scene--value-chart {
  background: linear-gradient(145deg, #11273a, #090e25);
}

.scene-chart-grid { fill: none; stroke: rgb(255 255 255 / 7%); stroke-width: 1; }
.scene-chart-area { fill: url(#chart-fill); opacity: 0; }
.scene-chart-line { fill: none; stroke: #78d1b5; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; filter: drop-shadow(0 0 7px rgb(120 209 181 / 42%)); }
.scene-chart-points { fill: #0f1d2d; stroke: #8de0c7; stroke-width: 3; opacity: 0; }
.journey-story[data-ready="true"] .scene-chart-area { animation: scene-chart-area 490ms 435ms ease-out both; }
.journey-story[data-ready="true"] .scene-chart-line { animation: scene-causal-draw 910ms 175ms ease-out both; }
.journey-story[data-ready="true"] .scene-chart-points { animation: scene-dot-pop 420ms 550ms ease-out both; }
@keyframes scene-chart-area { to { opacity: 1; } }
.scene-chart-caption { position: absolute; z-index: 2; left: 1rem; top: 0.85rem; display: grid; gap: 0.1rem; }
.scene-chart-caption span { color: rgb(232 239 255 / 48%); font-size: 0.7rem; }
.scene-chart-caption b { color: #d8f8ed; font-size: 0.7rem; }

.scene-offer-card.back { left: 0; top: 0.8rem; transform: rotate(-10deg); }
.scene-offer-card.middle { right: 0; top: 0.5rem; transform: rotate(10deg); }
.scene-offer-card.front { left: 50%; top: 50%; z-index: 3; min-height: 8.4rem; display: grid; gap: 0.25rem; transform: translate(-50%, -50%) scale(0.88); }
.scene-offer-card b { color: #fff; font-size: 0.71rem; }
.scene-offer-card span { padding-top: 0.24rem; border-top: 1px solid rgb(255 255 255 / 7%); color: rgb(236 240 255 / 57%); font-size: 0.7rem; }
.journey-story[data-ready="true"] .scene-offer-card.back { animation: scene-offer-back 490ms 220ms ease-out both; }
.journey-story[data-ready="true"] .scene-offer-card.middle { animation: scene-offer-middle 490ms 160ms ease-out both; }
.journey-story[data-ready="true"] .scene-offer-card.front { animation: scene-offer-front 455ms 250ms cubic-bezier(0.2, 1.05, 0.3, 1) both; }
@keyframes scene-offer-back { from { opacity: 0; transform: translate(1rem, 1rem) rotate(-2deg); } }
@keyframes scene-offer-middle { from { opacity: 0; transform: translate(-1rem, 1rem) rotate(2deg); } }
@keyframes scene-offer-front { to { transform: translate(-50%, -50%) scale(1); } }
.scene-offer-ready { position: absolute; z-index: 4; right: 0.75rem; bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-radius: 999px; background: rgb(112 204 169 / 13%); color: #cdf7e7; font-size: 0.7rem; opacity: 0; transform: translateY(0.5rem); }
.scene-offer-ready i { width: 1rem; height: 1rem; display: grid; place-items: center; border-radius: 50%; background: #73cba8; color: #0a1b16; font-size: 0.7rem; font-style: normal; }
.journey-story[data-ready="true"] .scene-offer-ready { animation: scene-toast-arrive 420ms 575ms ease-out both; }

/* Keep compact phones balanced without squeezing the action rail. */
@media (max-height: 46rem) {
  .flow[data-journey="true"] > .screen {
    padding-inline: 1.25rem;
    padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
  }

  .journey-story-stage {
    grid-template-rows: minmax(11.5rem, 12.25rem) auto;
    gap: 0.72rem;
  }

  .journey-scene {
    min-height: 11.5rem;
    border-radius: 1.35rem;
  }

  .journey-story h2 {
    font-size: 1.56rem;
  }

  .journey-story .journey-body {
    margin-top: 0.42rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .journey-story-actions {
    gap: 0.62rem;
    padding-top: 0.55rem;
  }

  .journey-story-actions .journey-next,
  .journey-next {
    min-height: 3.25rem;
  }

  .journey-story-evidence {
    display: none;
  }
}

/* ===================================== Full-viewport composition guardrails
   The header, content, proof, and action rail occupy distinct spatial zones.
   These final rules intentionally override earlier component sizing so a
   screen cannot collapse into a top-heavy stack on either phone height. */
.flow[data-journey="true"] .flow-bar-inner {
  position: relative;
  justify-content: flex-start;
}

.flow[data-journey="true"] .flow-bar[data-journey="true"] .flow-step {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 7rem);
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.flow[data-journey="true"] .flow-bar[data-journey="true"] .flow-step::after {
  display: none;
}

.flow[data-journey="true"] > .journey-question {
  padding-top: clamp(2rem, 4.7vh, 2.55rem);
}

.journey-question .question-prompt {
  margin-top: 0;
}

.journey-question .question-helper {
  margin-top: 0.9rem;
}

.journey-question-cue {
  margin-top: 1.25rem;
}

.journey-question .options {
  gap: 0.7rem;
  margin-top: clamp(1.65rem, 3.8vh, 2rem);
}

.journey-question:has(.journey-question-cue) .options {
  margin-top: 1.2rem;
}

.flow[data-journey="true"] > :is(
  .journey-result,
  .journey-select,
  .journey-goals,
  .journey-review,
  .journey-pledge,
  .journey-signature,
  .journey-plan-build,
  .journey-cancel
) {
  padding-top: clamp(2rem, 4.8vh, 2.65rem);
}

:is(
  .journey-select,
  .journey-goals,
  .journey-review,
  .journey-pledge,
  .journey-signature,
  .journey-plan-build,
  .journey-cancel
) h2 {
  margin-top: 0.8rem;
}

:is(
  .journey-select,
  .journey-signature,
  .journey-plan-build,
  .journey-cancel
) > .journey-body {
  margin-top: 0.85rem;
}

.journey-choice-list {
  gap: 0.72rem;
  margin-top: clamp(1.4rem, 3.4vh, 1.8rem);
}

.journey-goals-intro {
  margin-top: 0.85rem;
}

.journey-goal-grid,
.journey-goal-roadmap {
  margin-top: 1.3rem;
}

.journey-goal-week-preview {
  margin-top: 1rem;
}

.journey-review-summary {
  margin-top: 1.15rem;
}

.journey-review-stack {
  margin-top: 1.2rem;
}

.journey-pledge-ceremony {
  margin-top: 1.4rem;
}

.journey-pledge-card {
  margin-top: 1.05rem;
}

.journey-signature-frame,
.journey-schedule-artifact {
  margin-top: 1.25rem;
}

.journey-result-intro {
  margin-top: 0.85rem;
}

.journey-result h3 {
  margin-top: 1.2rem;
}

.journey-chart {
  margin-top: 1.25rem;
}

.journey-story-stage {
  gap: clamp(1.45rem, 3.8vh, 1.9rem);
}

.journey-story .journey-body {
  margin-top: 0.9rem;
}

.flow[data-journey="true"] > .journey-offer {
  padding-top: clamp(1.55rem, 3.5vh, 2rem);
}

.journey-offer h2 {
  margin-top: 0.85rem;
}

.journey-offer > .journey-body,
.journey-offer-list,
.journey-price {
  margin-top: 1rem;
}

@media (max-height: 46rem) {
  .flow[data-journey="true"] > .screen {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .journey-story-actions .journey-next,
  .journey-next {
    min-height: 3.4rem;
  }

  .flow[data-journey="true"] > .journey-question {
    padding-top: 1.5rem;
  }

  .journey-question .question-prompt {
    margin-top: 0;
  }

  .journey-question .question-helper {
    margin-top: 0.65rem;
  }

  .journey-question-cue {
    margin-top: 0.85rem;
  }

  .journey-question .options {
    gap: 0.6rem;
    margin-top: 1.35rem;
  }

  .journey-question:has(.journey-question-cue) .options {
    margin-top: 0.85rem;
  }

  .flow[data-journey="true"] > :is(
    .journey-result,
    .journey-select,
    .journey-goals,
    .journey-review,
    .journey-pledge,
    .journey-signature,
    .journey-plan-build,
    .journey-cancel
  ) {
    padding-top: 1.3rem;
  }

  .journey-choice-list {
    gap: 0.58rem;
    margin-top: 1.1rem;
  }

  .journey-goal-grid,
  .journey-goal-roadmap,
  .journey-review-summary,
  .journey-review-stack,
  .journey-pledge-ceremony,
  .journey-signature-frame,
  .journey-schedule-artifact {
    margin-top: 0.9rem;
  }

  .journey-story-stage {
    gap: 1rem;
  }

  .journey-story .journey-body {
    margin-top: 0.65rem;
  }

  .flow[data-journey="true"] > .journey-offer {
    padding-top: 1rem;
  }
}

/* ===================================== Journey atmosphere system
   Ten worlds, one per section, each holding for several screens. Variety is
   the point: a parent moves from the nursery at night, through morning, naps
   and night, into analysis, the pattern, the argument, the build and the
   offer. What must NOT vary is the action system: the CTA colour, the progress
   rail and the selected state are constant everywhere, because a primary
   action that changes hue reads as a different product on every screen. */
.flow[data-journey="true"] {
  --atmosphere-chrome: rgb(8 12 30 / 58%);
  transition: background 420ms ease;
}

.flow[data-journey="true"] .flow-bar,
body[data-scrolled="true"] .flow[data-journey="true"] .flow-bar {
  background: var(--atmosphere-chrome);
}

.flow[data-journey="true"]::before,
.flow[data-journey="true"]::after {
  transition: opacity 380ms ease, transform 500ms ease, background 420ms ease;
}

/* --- Quiz 1: the nursery at night, one lamp low and to the side --------- */
.flow[data-journey="true"][data-atmosphere="nursery"] {
  --journey-panel: rgb(20 29 60 / 82%);
  background:
    radial-gradient(ellipse at 8% 92%, rgb(209 127 88 / 22%), transparent 35%),
    linear-gradient(112deg, transparent 0 68%, rgb(137 171 227 / 5%) 68% 70%, transparent 70% 76%, rgb(137 171 227 / 4%) 76% 78%, transparent 78%),
    linear-gradient(165deg, #162143 0%, #0b1128 44%, #120f20 100%);
}

.flow[data-journey="true"][data-atmosphere="nursery"]::before {
  width: 18rem;
  height: 23rem;
  top: 8%;
  right: -8rem;
  border: 1px solid rgb(159 188 235 / 12%);
  border-radius: 9rem 0 0 9rem;
  background: repeating-linear-gradient(90deg, transparent 0 2.35rem, rgb(151 181 229 / 8%) 2.35rem 2.45rem);
  filter: none;
  opacity: 0.7;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="nursery"]::after {
  width: 18rem;
  height: 9rem;
  bottom: -3rem;
  left: -5rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(221 139 92 / 34%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.7;
  animation: journey-nursery-glow 6s ease-in-out infinite alternate;
}

@keyframes journey-nursery-glow {
  to { opacity: 0.46; transform: translate3d(1rem, -0.5rem, 0) scale(1.08); }
}

/* --- Quiz 2: an actual horizon and a rising sun ------------------------- */
.flow[data-journey="true"][data-atmosphere="morning"] {
  --journey-panel: rgb(21 36 68 / 80%);
  --atmosphere-chrome: rgb(13 25 52 / 55%);
  background:
    linear-gradient(180deg, rgb(34 67 119 / 24%), transparent 42%),
    linear-gradient(168deg, #18325b 0%, #111d3c 48%, #33233c 74%, #6e3f3c 118%);
}

.flow[data-journey="true"][data-atmosphere="morning"]::before {
  width: 13rem;
  height: 13rem;
  top: 26%;
  right: -4.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd18b 0 12%, rgb(255 184 101 / 48%) 13% 24%, rgb(255 164 92 / 10%) 25% 48%, transparent 50%);
  filter: none;
  opacity: 0.55;
  animation: journey-sun-drift 8s ease-in-out infinite alternate;
}

.flow[data-journey="true"][data-atmosphere="morning"]::after {
  width: 125%;
  height: 15rem;
  left: -12%;
  bottom: -8rem;
  border-radius: 48% 52% 0 0;
  background:
    linear-gradient(165deg, transparent 0 42%, rgb(43 43 72 / 78%) 43% 53%, transparent 54%),
    linear-gradient(18deg, #16172d 0 56%, transparent 57%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

@keyframes journey-sun-drift {
  to { transform: translate3d(-0.7rem, 0.8rem, 0) scale(1.05); }
}

/* --- Quiz 3: plum dusk, a crescent and layered cloud bands -------------- */
.flow[data-journey="true"][data-atmosphere="naps"] {
  --journey-panel: rgb(38 31 73 / 80%);
  --atmosphere-chrome: rgb(22 17 48 / 56%);
  background:
    radial-gradient(ellipse at 18% 76%, rgb(128 99 183 / 22%), transparent 42%),
    linear-gradient(155deg, #272458 0%, #171633 52%, #21132c 100%);
}

.flow[data-journey="true"][data-atmosphere="naps"]::before {
  width: 7rem;
  height: 7rem;
  top: 34%;
  right: 6%;
  border-radius: 50%;
  background: transparent;
  box-shadow: -2rem 0 0 0 rgb(205 209 255 / 70%);
  filter: drop-shadow(0 0 1.5rem rgb(180 177 255 / 28%));
  opacity: 0.4;
  animation: journey-crescent-drift 9s ease-in-out infinite alternate;
}

.flow[data-journey="true"][data-atmosphere="naps"]::after {
  width: 26rem;
  height: 9rem;
  right: -9rem;
  bottom: 8%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 22% 55%, rgb(177 173 224 / 15%) 0 22%, transparent 23%),
    radial-gradient(ellipse at 48% 45%, rgb(177 173 224 / 12%) 0 29%, transparent 30%),
    radial-gradient(ellipse at 74% 60%, rgb(177 173 224 / 10%) 0 24%, transparent 25%);
  filter: blur(0.3rem);
  opacity: 0.8;
  animation: journey-cloud-drift 11s ease-in-out infinite alternate;
}

@keyframes journey-crescent-drift {
  to { transform: translate3d(-0.6rem, 0.8rem, 0) rotate(-5deg); }
}

@keyframes journey-cloud-drift {
  to { transform: translate3d(-1.6rem, -0.3rem, 0); }
}

/* --- Quiz 4: sparse stars, deep contrast, a quiet aurora ---------------- */
.flow[data-journey="true"][data-atmosphere="night"] {
  --journey-panel: rgb(17 22 55 / 84%);
  --atmosphere-chrome: rgb(5 7 25 / 62%);
  background:
    radial-gradient(circle at 9% 18%, #e5eaff 0 1px, transparent 1.5px),
    radial-gradient(circle at 81% 26%, #cbd6ff 0 1px, transparent 1.5px),
    radial-gradient(circle at 66% 58%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 23% 72%, #b9c9ff 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 76% 82%, rgb(107 66 163 / 26%), transparent 44%),
    linear-gradient(165deg, #10173d 0%, #070a1d 53%, #170d27 100%);
  background-size: 113px 127px, 151px 139px, 173px 163px, 137px 181px, auto, auto;
}

.flow[data-journey="true"][data-atmosphere="night"]::before {
  width: 8rem;
  height: 8rem;
  top: 30%;
  right: -1.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 37% 37%, #dce3ff 0 42%, transparent 43%);
  box-shadow: inset -2.5rem -0.4rem 0 #0d1233, 0 0 2.4rem rgb(149 166 255 / 18%);
  filter: none;
  opacity: 0.38;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="night"]::after {
  width: 30rem;
  height: 15rem;
  right: -18rem;
  bottom: -2rem;
  border-radius: 50%;
  background: linear-gradient(120deg, rgb(72 93 190 / 18%), rgb(169 87 190 / 25%), transparent 72%);
  filter: blur(2rem);
  opacity: 0.65;
  animation: journey-night-aurora 10s ease-in-out infinite alternate;
}

@keyframes journey-night-aurora {
  to { transform: translate3d(-2rem, -1rem, 0) rotate(-8deg); }
}

/* --- Analysis: a radar sweep over the answers -------------------------- */
.flow[data-journey="true"][data-atmosphere="analysis"] {
  --journey-panel: rgb(16 26 65 / 80%);
  background:
    linear-gradient(rgb(121 151 243 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(121 151 243 / 4%) 1px, transparent 1px),
    radial-gradient(circle at 50% 43%, rgb(68 108 220 / 34%), transparent 38%),
    linear-gradient(160deg, #101c45, #070b1d 66%, #15102d);
  background-size: 2.6rem 2.6rem, 2.6rem 2.6rem, auto, auto;
}

.flow[data-journey="true"][data-atmosphere="analysis"]::before {
  width: 27rem;
  height: 27rem;
  top: 11%;
  left: calc(50% - 13.5rem);
  border: 1px solid rgb(126 162 255 / 13%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 72%, rgb(110 157 255 / 18%) 88%, transparent 100%);
  filter: none;
  opacity: 0.8;
  animation: journey-radar-spin 7s linear infinite;
}

.flow[data-journey="true"][data-atmosphere="analysis"]::after {
  width: 21rem;
  height: 21rem;
  left: calc(50% - 10.5rem);
  bottom: 13%;
  border: 1px dashed rgb(130 162 255 / 12%);
  border-radius: 50%;
  background: transparent;
  filter: none;
  opacity: 0.7;
  animation: journey-radar-breathe 3s ease-in-out infinite alternate;
}

@keyframes journey-radar-spin { to { transform: rotate(360deg); } }
@keyframes journey-radar-breathe { to { transform: scale(1.08); opacity: 0.28; } }

/* --- Pattern: rising columns and a warm diagnostic horizon -------------- */
.flow[data-journey="true"][data-atmosphere="pattern"] {
  --journey-panel: rgb(28 35 69 / 80%);
  background:
    radial-gradient(ellipse at 50% 104%, rgb(242 145 88 / 25%), transparent 47%),
    linear-gradient(155deg, #142553, #0b1028 58%, #20152d);
}

.flow[data-journey="true"][data-atmosphere="pattern"]::before {
  width: 18rem;
  height: 12rem;
  right: -3rem;
  bottom: 10%;
  border-radius: 1.5rem 1.5rem 0 0;
  background: linear-gradient(90deg, rgb(116 153 244 / 9%) 0 16%, transparent 16% 21%, rgb(116 153 244 / 15%) 21% 39%, transparent 39% 44%, rgb(242 165 96 / 18%) 44% 66%, transparent 66% 71%, rgb(242 165 96 / 10%) 71% 91%, transparent 91%);
  filter: none;
  opacity: 0.6;
  transform: skewY(-8deg);
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="pattern"]::after {
  width: 140%;
  height: 1px;
  left: -20%;
  bottom: 23%;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgb(255 183 106 / 60%), transparent);
  filter: drop-shadow(0 0 0.8rem rgb(247 157 83 / 38%));
  opacity: 0.65;
  animation: none;
}

/* --- Insight: warm coral light, the argument chapter -------------------- */
.flow[data-journey="true"][data-atmosphere="insight"] {
  --journey-panel: rgb(46 32 60 / 80%);
  --atmosphere-chrome: rgb(24 15 32 / 58%);
  background:
    radial-gradient(circle at 82% 26%, rgb(255 142 112 / 22%), transparent 33%),
    linear-gradient(155deg, #35233f, #16132a 56%, #26161f);
}

.flow[data-journey="true"][data-atmosphere="insight"]::before {
  width: 18rem;
  height: 18rem;
  top: 9%;
  right: -8rem;
  border: 1.2rem solid rgb(255 157 126 / 9%);
  border-radius: 50%;
  background: transparent;
  filter: none;
  opacity: 0.9;
  animation: journey-orbit-pulse 5s ease-in-out infinite alternate;
}

.flow[data-journey="true"][data-atmosphere="insight"]::after {
  width: 12rem;
  height: 12rem;
  left: -5rem;
  bottom: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 191 106 / 26%), transparent 68%);
  filter: blur(1.2rem);
  opacity: 0.7;
  animation: none;
}

@keyframes journey-orbit-pulse { to { transform: scale(1.08); opacity: 0.46; } }

/* --- Proof: restrained graphite, a technical drafting field ------------- */
.flow[data-journey="true"][data-atmosphere="proof"] {
  --journey-panel: rgb(21 27 45 / 84%);
  --atmosphere-chrome: rgb(7 11 20 / 64%);
  background:
    linear-gradient(125deg, rgb(117 144 213 / 4%) 1px, transparent 1px),
    linear-gradient(155deg, #1b2235, #090d18 60%, #10151d);
  background-size: 3rem 3rem, auto;
}

.flow[data-journey="true"][data-atmosphere="proof"]::before {
  width: 18rem;
  height: 12rem;
  right: -7rem;
  bottom: 8%;
  border: 1px solid rgb(151 172 224 / 11%);
  border-radius: 1.5rem;
  background:
    linear-gradient(90deg, transparent 49.5%, rgb(151 172 224 / 10%) 50%, transparent 50.5%),
    linear-gradient(transparent 49.5%, rgb(151 172 224 / 10%) 50%, transparent 50.5%);
  filter: none;
  opacity: 0.75;
  transform: rotate(-8deg);
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="proof"]::after { display: none; }

/* --- Reset: warmer and human, this chapter is about the parent ---------- */
.flow[data-journey="true"][data-atmosphere="reset"] {
  --journey-panel: rgb(57 31 51 / 80%);
  --atmosphere-chrome: rgb(30 15 24 / 58%);
  background:
    radial-gradient(circle at 14% 77%, rgb(231 112 104 / 25%), transparent 36%),
    radial-gradient(circle at 88% 18%, rgb(255 181 105 / 15%), transparent 29%),
    linear-gradient(158deg, #47243a, #201425 54%, #2b171c);
}

.flow[data-journey="true"][data-atmosphere="reset"]::before {
  width: 9rem;
  height: 22rem;
  right: -4rem;
  top: 10%;
  border-radius: 50%;
  background: linear-gradient(rgb(255 190 121 / 18%), transparent 70%);
  filter: blur(1.4rem);
  opacity: 0.74;
  animation: journey-lantern-sway 8s ease-in-out infinite alternate;
}

.flow[data-journey="true"][data-atmosphere="reset"]::after {
  width: 15rem;
  height: 15rem;
  left: -8rem;
  bottom: -5rem;
  border: 1px solid rgb(255 143 125 / 15%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 2rem, rgb(255 143 125 / 7%) 2.1rem 2.2rem);
  filter: none;
  opacity: 0.7;
  animation: none;
}

@keyframes journey-lantern-sway { to { transform: translate3d(-1rem, 1rem, 0) rotate(4deg); opacity: 0.48; } }

/* --- Commitment: a quiet ceremonial orbit ------------------------------- */
.flow[data-journey="true"][data-atmosphere="commitment"] {
  --journey-panel: rgb(33 29 67 / 82%);
  background:
    radial-gradient(circle at 50% 44%, rgb(105 87 192 / 27%), transparent 35%),
    linear-gradient(158deg, #282454, #11122c 59%, #231426);
}

.flow[data-journey="true"][data-atmosphere="commitment"]::before {
  width: 24rem;
  height: 24rem;
  left: calc(50% - 12rem);
  top: 12%;
  border: 1px solid rgb(161 144 255 / 13%);
  border-radius: 50%;
  background: conic-gradient(from 40deg, transparent 0 16%, rgb(162 145 255 / 12%) 17% 18%, transparent 19% 48%, rgb(242 170 119 / 12%) 49% 50%, transparent 51% 100%);
  filter: none;
  opacity: 0.86;
  animation: journey-orbit-spin 34s linear infinite;
}

.flow[data-journey="true"][data-atmosphere="commitment"]::after { display: none; }

@keyframes journey-orbit-spin { to { transform: rotate(360deg); } }

/* --- Blueprint: the plan is the one thing being drawn ------------------- */
.flow[data-journey="true"][data-atmosphere="blueprint"] {
  --journey-panel: rgb(10 39 64 / 80%);
  --atmosphere-chrome: rgb(4 24 43 / 58%);
  background:
    linear-gradient(rgb(101 190 219 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(101 190 219 / 6%) 1px, transparent 1px),
    radial-gradient(circle at 75% 78%, rgb(53 167 190 / 21%), transparent 40%),
    linear-gradient(155deg, #0b2942, #071728 54%, #07121e);
  background-size: 2rem 2rem, 2rem 2rem, auto, auto;
}

.flow[data-journey="true"][data-atmosphere="blueprint"]::before {
  width: 16rem;
  height: 16rem;
  top: 14%;
  right: -7rem;
  border: 1px solid rgb(93 211 229 / 18%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 1.65rem, rgb(93 211 229 / 7%) 1.7rem 1.75rem);
  filter: none;
  opacity: 0.74;
  animation: journey-orbit-spin 28s linear infinite;
}

.flow[data-journey="true"][data-atmosphere="blueprint"]::after {
  width: 12rem;
  height: 2px;
  right: 3%;
  bottom: 18%;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, #65d4e4, transparent);
  filter: drop-shadow(0 0 0.6rem #54c8df);
  opacity: 0.5;
  animation: journey-blueprint-scan 5s ease-in-out infinite alternate;
}

@keyframes journey-blueprint-scan { to { transform: translateY(-14rem); opacity: 0.15; } }

/* --- Offer: one overhead light on the decision -------------------------- */
.flow[data-journey="true"][data-atmosphere="offer"] {
  --journey-panel: rgb(48 35 35 / 82%);
  --atmosphere-chrome: rgb(26 16 14 / 58%);
  background:
    radial-gradient(circle at 50% 25%, rgb(255 190 92 / 23%), transparent 29%),
    radial-gradient(ellipse at 50% 112%, rgb(206 76 74 / 24%), transparent 45%),
    linear-gradient(160deg, #3a2d28, #15131c 55%, #281217);
}

.flow[data-journey="true"][data-atmosphere="offer"]::before {
  width: 14rem;
  height: 30rem;
  top: -6rem;
  left: calc(50% - 7rem);
  border-radius: 50%;
  background: linear-gradient(rgb(255 204 119 / 15%), transparent 76%);
  filter: blur(1.2rem);
  opacity: 0.75;
  animation: journey-offer-spotlight 6s ease-in-out infinite alternate;
}

.flow[data-journey="true"][data-atmosphere="offer"]::after { display: none; }

@keyframes journey-offer-spotlight { to { opacity: 0.48; transform: scaleX(1.12); } }

/* --- Cancel: the light drains out of the room --------------------------- */
.flow[data-journey="true"][data-atmosphere="cancel"] {
  --journey-panel: rgb(38 32 43 / 84%);
  background:
    radial-gradient(ellipse at 50% 70%, rgb(139 71 76 / 18%), transparent 41%),
    linear-gradient(160deg, #292934, #10121b 57%, #211417);
}

.flow[data-journey="true"][data-atmosphere="cancel"]::before {
  width: 100%;
  height: 100%;
  inset: 0;
  border-radius: 0;
  background: linear-gradient(115deg, transparent 0 47%, rgb(218 126 112 / 5%) 48% 49%, transparent 50%);
  filter: none;
  opacity: 0.8;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="cancel"]::after { display: none; }

/* --- Final offer: it comes back, calmer -------------------------------- */
.flow[data-journey="true"][data-atmosphere="final-offer"] {
  --journey-panel: rgb(23 55 45 / 84%);
  --atmosphere-chrome: rgb(10 26 22 / 58%);
  background:
    radial-gradient(circle at 50% 24%, rgb(131 218 147 / 22%), transparent 29%),
    radial-gradient(ellipse at 50% 110%, rgb(74 190 126 / 22%), transparent 45%),
    linear-gradient(160deg, #24483d, #0c211d 56%, #102018);
}

.flow[data-journey="true"][data-atmosphere="final-offer"]::before {
  width: 22rem;
  height: 22rem;
  left: calc(50% - 11rem);
  top: 8%;
  border: 1px solid rgb(135 224 163 / 13%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 2.4rem, rgb(135 224 163 / 7%) 2.5rem 2.6rem);
  filter: none;
  opacity: 0.72;
  animation: journey-radar-breathe 5s ease-in-out infinite alternate;
}

.flow[data-journey="true"][data-atmosphere="final-offer"]::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .flow[data-journey="true"]::before,
  .flow[data-journey="true"]::after {
    animation: none !important;
  }
}

/* ===================================== Full-height journey choreography
   A screen is a composition, not a stack with unused space below it. These
   rules distribute each screen family across the viewport with deliberate
   breathing zones above, within, and below its primary interaction. */

/* Questions: center the complete question, cue, and answer composition. */
.flow[data-journey="true"] > .journey-question {
  justify-content: center;
  padding-top: clamp(2rem, 5vh, 3.25rem);
  padding-bottom: clamp(2.25rem, 6vh, 4rem);
}

.journey-question .question-helper {
  margin-top: clamp(0.85rem, 1.8vh, 1.15rem);
}

.journey-question-cue {
  margin-top: clamp(1.45rem, 3vh, 2.15rem);
}

.journey-question .options {
  gap: clamp(0.72rem, 1.55vh, 0.9rem);
  margin-top: clamp(1.85rem, 4.2vh, 2.7rem);
}

.journey-question:has(.journey-question-cue) .options {
  margin-top: clamp(1.45rem, 3vh, 2rem);
}

/* Selections: reserve the middle of the device for the decision itself. */
.flow[data-journey="true"] > .journey-select {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding-top: clamp(2.7rem, 6.5vh, 4.25rem);
}

.journey-select > .journey-choice-list {
  align-self: center;
  width: 100%;
  margin-top: clamp(2rem, 4.5vh, 3rem);
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}

.journey-select:not(:has(> .journey-body)) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.journey-select:not(:has(> .journey-body)) > .journey-choice-list {
  margin-block: clamp(2.5rem, 7vh, 4.8rem);
}

/* Goals: the six choices occupy the center field instead of hugging the title. */
.flow[data-journey="true"] > .journey-goals {
  display: grid;
  /* The decision grid must retain its intrinsic height. A zero-minimum track
     let its final row escape into the CTA while fonts were still settling. */
  grid-template-rows: auto auto auto minmax(min-content, 1fr) auto;
  padding-top: clamp(2.7rem, 6.5vh, 4.25rem);
}

.journey-goals > :is(.journey-goal-grid, .journey-goal-roadmap) {
  align-self: center;
  width: 100%;
  margin-top: clamp(2.15rem, 5.5vh, 3.5rem);
  margin-bottom: clamp(1.75rem, 4.2vh, 2.8rem);
}

.journey-goals > .journey-next {
  align-self: end;
  position: relative;
  z-index: 20;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Reviews: social proof gets a visual middle, not a pile under the heading. */
.flow[data-journey="true"] > .journey-review {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding-top: clamp(2.6rem, 6vh, 4rem);
}

.journey-review-summary {
  margin-top: clamp(1.4rem, 3vh, 2rem);
}

.journey-review-stack {
  align-self: center;
  width: 100%;
  margin-top: clamp(1.8rem, 4vh, 2.7rem);
  margin-bottom: clamp(1.4rem, 3.5vh, 2.3rem);
}

/* Commitment: ceremony and promise are given a centered stage. */
.flow[data-journey="true"] > .journey-pledge {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  padding-top: clamp(2.6rem, 6vh, 4rem);
}

.journey-pledge-ceremony {
  align-self: stretch;
  align-content: center;
  margin-top: clamp(1.4rem, 3.6vh, 2.4rem);
}

.journey-pledge-card {
  margin-top: clamp(1.25rem, 2.8vh, 1.9rem);
}

/* Signature: the paper is the central artifact, with clear air around it. */
.flow[data-journey="true"] > .journey-signature {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding-top: clamp(2.6rem, 6vh, 4rem);
}

.journey-signature-frame {
  align-self: center;
  width: 100%;
  margin-top: clamp(2rem, 5vh, 3.25rem);
  margin-bottom: clamp(1.5rem, 3.5vh, 2.35rem);
}

/* Analysis result and plan artifacts sit in the middle of the available field. */
.flow[data-journey="true"] > .journey-result {
  padding-top: clamp(2.6rem, 6vh, 4rem);
}

.journey-result .journey-chart {
  margin-block: auto;
}

.flow[data-journey="true"] > .journey-plan-build {
  padding-top: clamp(2.6rem, 6vh, 4rem);
}

.journey-plan-build > .journey-schedule-artifact {
  margin-block: auto;
}

/* When a loader or the free-value card follows, the artifact hands the lower
   half of the free height to it instead of opening a second void. */
.journey-plan-build:has(.journey-loader) > .journey-schedule-artifact,
.journey-plan-build:has(.journey-plan-focus) > .journey-schedule-artifact {
  margin-top: auto;
  margin-bottom: 0.85rem;
}

.journey-plan-build > :is(.journey-loader, .journey-plan-focus) {
  margin-bottom: auto;
}

.journey-plan-build > .journey-next {
  margin-top: clamp(1.4rem, 3.6vh, 2.3rem);
}

/* Story screens divide free height above and below the stage, not only below. */
.journey-story-stage {
  align-content: center;
  gap: clamp(2rem, 5vh, 3.4rem);
  padding-block: clamp(1.15rem, 3vh, 2rem);
}

.journey-story-actions {
  padding-top: clamp(1.1rem, 2.8vh, 1.8rem);
}

/* Cancellation: the locked plan is the central decision object. */
.flow[data-journey="true"] > .journey-cancel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  padding-top: clamp(2.6rem, 6vh, 4rem);
}

.journey-cancel > .journey-schedule-artifact {
  align-self: center;
  width: 100%;
  margin-top: clamp(1.8rem, 4vh, 2.7rem);
  margin-bottom: clamp(1.5rem, 3.5vh, 2.3rem);
}

/* Offer content moves into the center field, keeping the decision rail grounded. */
.flow[data-journey="true"] > .journey-offer {
  padding-top: clamp(3rem, 7vh, 4.6rem);
}

.journey-offer h2 {
  margin-top: clamp(1.25rem, 2.6vh, 1.8rem);
}

.journey-offer > .journey-body,
.journey-offer-list,
.journey-price {
  margin-top: clamp(1.2rem, 2.4vh, 1.65rem);
}

@media (max-height: 46rem) {
  .flow[data-journey="true"] > .journey-question {
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 1.75rem;
  }

  .journey-question .options {
    gap: 0.7rem;
    margin-top: 1.75rem;
  }

  .journey-question:has(.journey-question-cue) .options {
    margin-top: 1.2rem;
  }

  .flow[data-journey="true"] > :is(
    .journey-select,
    .journey-goals,
    .journey-review,
    .journey-pledge,
    .journey-signature,
    .journey-plan-build,
    .journey-result,
    .journey-cancel
  ) {
    padding-top: 2rem;
  }

  .journey-select > .journey-choice-list,
  .journey-goals > :is(.journey-goal-grid, .journey-goal-roadmap),
  .journey-review-stack,
  .journey-signature-frame,
  .journey-cancel > .journey-schedule-artifact {
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .journey-pledge-ceremony {
    margin-top: 1rem;
  }

  .journey-pledge-card {
    margin-top: 0.8rem;
    margin-bottom: 1.15rem;
  }

  .journey-story-stage {
    gap: 1.45rem;
    padding-block: 0.65rem;
  }

  .journey-story-actions {
    padding-top: 0.75rem;
  }

  .flow[data-journey="true"] > .journey-offer {
    padding-top: 1.8rem;
  }
}

/* ===================================== Mobile legibility and selection clarity
   Supporting copy is product copy, not decoration. Keep it at a real reading
   size and make binary interaction state unmistakable. */
.journey-question .question-helper,
.journey-goals-intro,
.journey-body {
  font-size: clamp(0.98rem, 4vw, 1.08rem);
  line-height: 1.48;
}

.journey-question .option {
  min-height: clamp(3.55rem, 7.6vh, 4.15rem);
  padding: 0.82rem 1rem;
  gap: 0.9rem;
  font-size: clamp(1rem, 4.2vw, 1.1rem);
  font-weight: 570;
  line-height: 1.3;
}

.journey-question .option .dot {
  width: 1.35rem;
  height: 1.35rem;
}

.journey-kicker {
  font-size: 0.74rem;
  line-height: 1.25;
}

.journey-choice {
  min-height: 3.7rem;
  font-size: 1rem;
  line-height: 1.3;
}

.journey-goal {
  min-height: 5.05rem;
  padding: 0.78rem;
}

.journey-goal-copy {
  gap: 0.28rem;
}

.journey-goal-copy strong {
  font-size: 1rem;
  line-height: 1.16;
  min-height: 2.32em;
  display: flex;
  align-items: center;
  text-wrap: balance;
}

.journey-goal-copy small {
  width: max-content;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  color: rgb(234 239 255 / 66%);
  font-size: 0.82rem;
  line-height: 1.15;
}

.journey-goal-selected-mark {
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  width: 1.35rem;
  height: 1.35rem;
  border-color: rgb(255 255 255 / 24%);
  color: rgb(238 242 255 / 72%);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

.journey-goal-selected-mark::before {
  display: none;
}

.journey-goal[aria-pressed="false"] {
  border-color: rgb(255 255 255 / 14%);
  background: linear-gradient(145deg, rgb(28 36 68 / 88%), rgb(13 18 42 / 92%));
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
}

.journey-goal[aria-pressed="false"] .journey-goal-symbol {
  opacity: 0.76;
  filter: saturate(0.72);
}

.journey-goal[aria-pressed="true"] {
  border-width: 2px;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 13%),
    0 0 0 3px color-mix(in srgb, var(--journey-action) 12%, transparent);
}

.journey-review-summary strong {
  font-size: 1rem;
}

.journey-review-summary > span:last-child,
.journey-review-card cite {
  font-size: 0.82rem;
}

.journey-review-card p {
  font-size: 1rem;
  line-height: 1.38;
}

.journey-pledge-card p {
  font-size: 1.05rem;
}

.journey-pledge-card footer,
.journey-signature-frame-head span,
.journey-signature-frame-head small,
.journey-signature-hint,
.journey-signature-clear {
  font-size: 0.75rem;
}

.journey-signature-clear {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.journey-schedule-artifact-head strong,
.journey-schedule-row-copy strong {
  font-size: 0.78rem;
}

.journey-schedule-artifact-head small,
.journey-schedule-style b,
.journey-schedule-row-copy small,
.journey-schedule-row-copy span,
.journey-schedule-artifact-foot small,
.journey-schedule-artifact-foot strong {
  font-size: 0.68rem;
  line-height: 1.25;
}

.journey-story .journey-body {
  font-size: clamp(0.98rem, 4vw, 1.08rem);
  line-height: 1.48;
}

.journey-offer-list li,
.journey-offer-note,
.journey-leave {
  font-size: 0.88rem;
  line-height: 1.4;
}

.analysis-phase {
  font-size: 0.98rem;
}

.analysis-phase-detail,
.analysis-stage-state,
.analysis-signal b {
  font-size: 0.74rem;
  line-height: 1.25;
}



.analysis-ring-head {
  transition: transform 32ms linear;
}

/* Ring growth stays continuous. Phase-copy changes must never interrupt it. */
.analysis-progress-bump .analysis-ring {
  animation: none;
}

@media (max-height: 46rem) {
  /* Six goal cards cannot share a 568px viewport with the browser chrome and
     still preserve legible type. Let this one dense decision screen scroll in
     normal document order instead of shrinking the grid until the CTA covers
     its final row. Current-height iPhones keep the full-screen composition. */
  .flow[data-journey="true"] > :is(.journey-goals, .journey-select) {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .journey-goals > :is(.journey-goal-grid, .journey-goal-roadmap) {
    margin-block: 1.5rem 1.25rem;
  }

  .journey-goals > .journey-next {
    margin-top: 1.25rem;
    margin-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .journey-select > .journey-choice-list {
    margin-block: 1.5rem 1.25rem;
  }

  .journey-select > .journey-next {
    margin-top: 1.25rem;
    margin-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .journey-question .option {
    min-height: 3.35rem;
    padding-block: 0.7rem;
    font-size: 1rem;
  }

  .journey-question .question-helper,
  .journey-body,
  .journey-goals-intro,
  .journey-story .journey-body {
    font-size: 0.98rem;
  }

  .journey-goal {
    min-height: 4.85rem;
  }

  .journey-goal-copy strong {
    font-size: 0.98rem;
  }

  .journey-goal-copy small {
    font-size: 0.78rem;
  }
}

/* ===================================== Reference-informed journey refinement
   Five section rails make the long experience feel finite without advertising
   the total screen count. Evidence screens use readable research categories,
   never borrowed institutional branding or implied endorsements. */
/* width:100% plus the inherited side margin used to push the rail off the
   right edge, leaving 37px of gutter on the left and 8px on the right. The
   rail owns the gutter through padding alone so both ends match. */
.flow[data-journey="true"] .progress--segmented {
  width: auto;
  height: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.34rem;
  margin-inline: 0;
  padding: 0 var(--journey-gutter) 0.58rem;
  background: transparent;
}

.flow[data-journey="true"] .progress--segmented > .progress-segment {
  width: auto;
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  box-shadow: inset 0 1px rgb(0 0 0 / 16%);
}

.flow[data-journey="true"] .progress--segmented > .progress-segment > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--journey-action);
  transition: width 420ms var(--ease);
}

/* A finished chapter stays lit but stops competing with the current one. */
.flow[data-journey="true"] .progress--segmented > .progress-segment[data-complete="true"] > i {
  opacity: 0.5;
}

.journey-story-eyebrow {
  margin: 0 0 0.7rem;
  color: var(--journey-accent);
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.journey-story-note {
  max-width: 24rem;
  margin: 0.82rem 0 0;
  padding-left: 0.82rem;
  border-left: 2px solid color-mix(in srgb, var(--journey-accent) 72%, transparent);
  color: rgb(229 235 255 / 72%);
  font-size: 0.84rem;
  line-height: 1.42;
}

.journey-scene--evidence {
  background:
    linear-gradient(rgb(105 218 196 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(105 218 196 / 6%) 1px, transparent 1px),
    radial-gradient(circle at 80% 18%, rgb(101 216 196 / 23%), transparent 35%),
    linear-gradient(145deg, rgb(13 56 66 / 96%), rgb(6 24 39 / 98%));
  background-size: 1.6rem 1.6rem, 1.6rem 1.6rem, auto, auto;
}

.scene-method {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.6rem;
  padding: 0.9rem 1rem 1.05rem;
}

.scene-method-head,
.scene-method-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.scene-method-head span,
.scene-method-result span {
  color: rgb(213 238 239 / 58%);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

.scene-method-head b,
.scene-method-result b {
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.2;
}

.scene-method-stack {
  display: grid;
  gap: 0.45rem;
  align-content: center;
}

.scene-method-stack > div {
  min-height: 2.65rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.68rem;
  padding: 0.5rem 0.66rem;
  border: 1px solid rgb(161 229 220 / 13%);
  border-radius: 0.78rem;
  background: rgb(5 24 37 / 72%);
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
  opacity: 0;
  transform: translateX(-0.65rem);
}

.scene-method-stack > div > i {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 0.48rem;
  background: rgb(101 216 196 / 14%);
  color: #8be4d2;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 780;
}

.scene-method-stack > div > span {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.scene-method-stack > div b {
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.15;
}

.scene-method-stack > div small {
  color: rgb(215 235 239 / 62%);
  font-size: 0.69rem;
  line-height: 1.2;
}

.scene-method-stack > div > em {
  color: #82ddca;
  font-size: 0.86rem;
  font-style: normal;
}

.scene-method-result {
  padding-top: 0.55rem;
  border-top: 1px solid rgb(161 229 220 / 12%);
}

.journey-story[data-ready="true"] .scene-method-stack > div {
  animation: scene-method-card 300ms calc(120ms + var(--pillar-index) * 70ms) cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.journey-story[data-ready="true"] .scene-method-result {
  animation: scene-method-result 300ms 170ms cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

@keyframes scene-method-card {
  to { opacity: 1; transform: none; }
}

@keyframes scene-method-result {
  from { opacity: 0; transform: translateY(0.4rem); }
  to { opacity: 1; transform: none; }
}

/* Meaning-carrying labels remain legible on a real phone. */
.journey-scene svg text {
  font-size: 11.5px;
}

.journey-story-evidence span {
  font-size: 0.68rem;
}

.journey-story-evidence b {
  font-size: 0.78rem;
}

@media (max-height: 46rem) {
  .flow[data-journey="true"] .progress--segmented {
    padding-bottom: 0.42rem;
  }

  .scene-method {
    gap: 0.42rem;
    padding: 0.72rem;
  }

  .scene-method-stack {
    gap: 0.3rem;
  }

  .scene-method-stack > div {
    min-height: 2.25rem;
    padding: 0.36rem 0.5rem;
  }

  .scene-method-stack > div small {
    display: none;
  }

  .journey-story-note {
    margin-top: 0.58rem;
    font-size: 0.78rem;
  }
}


/* ===================================== Journey vertical rhythm
   Every screen reads header -> subject -> action. The action rail keeps a
   fixed resting gap so no block can ever sit flush against the button, and
   spare height is distributed rather than dumped into a single void. */
.flow[data-journey="true"] > .journey-screen > .journey-next {
  margin-top: max(clamp(1.25rem, 3.4vh, 2rem), 1.25rem);
}

.flow[data-journey="true"] > .journey-screen > .journey-pips + .journey-next,
.flow[data-journey="true"] > .journey-story .journey-story-actions .journey-next {
  margin-top: 0;
}

/* Screens whose subject is a single block centre that block in the space the
   header and the action rail leave behind. */
:is(.journey-goals, .journey-review, .journey-select) > :is(
  .journey-goal-grid,
  .journey-goal-roadmap,
  .journey-review-stack,
  .journey-choice-list
) {
  margin-block: auto;
}

.journey-goals--locked > .journey-goal-week-preview {
  margin-top: clamp(1rem, 2.6vh, 1.5rem);
  margin-bottom: 0;
}

/* ===================================== Short-phone density
   The label floor that makes the scenes readable on a 390x844 phone does not
   fit the fixed-height artwork on a 664px Safari viewport. Compact phones step
   the secondary type back down and tighten the artifact rather than clipping
   the bottom of a card. */
@media (max-height: 46rem) {
  .flow[data-journey="true"] :is(
    .scene-habits-caption,
    .scene-handoff-status,
    .scene-nap-times,
    .scene-recalc span,
    .scene-recalc b,
    .scene-bed-note span,
    .scene-bed-note b,
    .scene-product-time i,
    .scene-product-time small,
    .scene-product-time span
  ) {
    font-size: 0.66rem;
  }

  .journey-scene svg text {
    font-size: 10.5px;
  }

  .journey-schedule-row {
    min-height: 3rem;
    padding: 0.48rem 0.7rem;
  }

  .journey-schedule-row-copy small {
    font-size: 0.66rem;
  }

  .journey-schedule-row-copy strong {
    font-size: 0.8rem;
  }

  .journey-schedule-artifact-head {
    padding: 0.52rem 0.72rem;
  }

  .journey-schedule-artifact-foot {
    padding: 0.46rem 0.7rem;
  }

  .journey-plan-focus {
    padding: 0.56rem 0.75rem;
  }

  .journey-pledge-nights i {
    height: 2rem;
  }

  /* Scenes with a fixed top inset have no room for it on a short phone. */
  .journey-scene--nap {
    padding: 1.7rem 1rem 0.6rem;
  }

  .scene-nap-times {
    margin-top: 0.2rem;
  }

  .scene-recalc {
    padding: 0.45rem 0.6rem;
  }

  .journey-scene--nap .scene-nap-head {
    margin-bottom: 0.15rem;
  }

  /* The handoff and habits captions restate the headline underneath them, so
     a short phone drops the caption instead of clipping the card. */
  .journey-scene--value-handoff {
    padding-block: 0.7rem;
  }

  .scene-handoff-status,
  .scene-habits-caption {
    display: none;
  }

  .journey-scene--value-habits {
    padding: 0.7rem;
    gap: 0.4rem;
  }

  .scene-habits > div {
    min-height: 2.5rem;
  }

  /* Three anchors matter more than the format footnote when height is the
     scarce resource. */
  .journey-plan-build .journey-schedule-artifact-foot {
    display: none;
  }

  .journey-plan-build h2 {
    font-size: clamp(1.45rem, 6.2vw, 1.8rem);
  }
}


/* ===================================== Analysis breathing room
   The computing screen is a moment of anticipation, not a dashboard. The ring,
   the line that names what is happening, the status card and the four signal
   chips each get their own band of air instead of stacking tight. */
.flow[data-journey="true"] > .analysis {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  justify-items: center;
  align-content: stretch;
  padding-top: clamp(1.6rem, 5vh, 2.8rem);
}

.flow[data-journey="true"] .analysis-progress {
  align-self: center;
  margin-block: clamp(0.8rem, 3vh, 1.8rem);
}

.flow[data-journey="true"] .analysis h2 {
  margin-top: clamp(1.1rem, 3.4vh, 1.9rem);
}

.flow[data-journey="true"] .analysis-status {
  margin-top: clamp(1.1rem, 3.2vh, 1.7rem);
}

.flow[data-journey="true"] .analysis-signal-rail {
  margin-top: clamp(0.9rem, 2.8vh, 1.4rem);
  margin-bottom: clamp(0.5rem, 2vh, 1.2rem);
  gap: 0.45rem;
}

.flow[data-journey="true"] .analysis-signal {
  padding: 0.6rem 0.35rem;
}

@media (max-height: 46rem) {
  .flow[data-journey="true"] > .analysis {
    padding-top: 1.1rem;
  }

  .flow[data-journey="true"] .analysis-progress {
    margin-block: 0.7rem;
  }

  .flow[data-journey="true"] .analysis h2 {
    margin-top: 0.9rem;
  }

  .flow[data-journey="true"] .analysis-status {
    margin-top: 0.8rem;
  }

  .flow[data-journey="true"] .analysis-signal-rail {
    margin-top: 0.7rem;
    margin-bottom: 0.3rem;
  }
}

/* The status detail names the signal being read; truncating it to an ellipsis
   made the one informative line on the screen unreadable. */
.flow[data-journey="true"] .analysis-phase-detail {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.3;
}

.flow[data-journey="true"] .analysis-status {
  align-items: flex-start;
  min-height: 4rem;
  border-radius: 1.25rem;
}

.flow[data-journey="true"] .analysis-status-dot {
  margin-top: 0.35rem;
}

.flow[data-journey="true"] .analysis-stage-state {
  flex: none;
  margin-top: 0.1rem;
}

/* ===================================== Quiz presentation
   Twelve identical lists of grey rectangles is what made the assessment feel
   like a form. Short-label questions become a compact two-column grid, longer
   ones get an icon tile so the eye lands on a shape before it reads. Each of
   the four quiz worlds also carries its own card treatment. */
.journey-question .option-label {
  min-width: 0;
}

/* ---- icon-led rows ---- */
.journey-question .options--iconic .option {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0.9rem;
}

.option-icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.72rem;
  background: rgb(255 255 255 / 6%);
  color: rgb(226 234 255 / 78%);
  transition: border-color 180ms linear, background 180ms linear, color 180ms linear;
}

.option-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.journey-question .option[aria-checked="true"] .option-icon {
  border-color: color-mix(in srgb, var(--journey-action) 52%, transparent);
  background: color-mix(in srgb, var(--journey-action) 18%, transparent);
  color: color-mix(in srgb, var(--journey-action) 82%, #fff);
}

/* ---- the confirm mark, shared by rows and grid ---- */
.option-mark {
  width: 1.3rem;
  height: 1.3rem;
  justify-self: end;
  border: 1.5px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  transition: border-color 180ms linear, background 180ms linear;
}

.journey-question .option[aria-checked="true"] .option-mark {
  border-color: var(--journey-action);
  background: var(--journey-action) no-repeat center / 0.62rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1705' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7L10 17l-5-5'/%3E%3C/svg%3E");
}

/* ---- compact two-column grid for short labels ---- */
.journey-question .options--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.journey-question .options--grid .option {
  min-height: 4.4rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem;
  font-size: 0.95rem;
}

.journey-question .options--grid .option-label {
  align-self: center;
  line-height: 1.2;
}

.journey-question .options--grid .option-mark {
  justify-self: end;
}

/* ---- one card treatment per quiz world ---- */
.flow[data-journey="true"][data-atmosphere="morning"] .journey-question .option {
  border-radius: 0.9rem;
  background: linear-gradient(120deg, rgb(38 58 100 / 62%), rgb(22 33 66 / 72%));
}

.flow[data-journey="true"][data-atmosphere="naps"] .journey-question .option {
  border-radius: 1.35rem;
  background: rgb(46 39 86 / 62%);
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 0.7rem 1.6rem rgb(0 0 0 / 22%);
}

.flow[data-journey="true"][data-atmosphere="night"] .journey-question .option {
  border-radius: 1rem;
  background: rgb(13 18 45 / 78%);
  box-shadow: inset 0 1px rgb(255 255 255 / 9%);
}

/* ---- breathing room: the answer block is centred in the field the prompt
        and the safe area leave behind, never run edge to edge.
        Flex auto margins rather than a grid row, because questions have a
        varying number of preceding blocks (some have no helper and no cue)
        and grid auto-placement would drop the answers into an auto row. ---- */
.flow[data-journey="true"] > .journey-question {
  display: flex;
  flex-direction: column;
}

.journey-question .options {
  flex: none;
  width: 100%;
  margin-block: auto;
  padding-block: clamp(0.75rem, 2.5vh, 1.5rem);
}

@media (max-height: 46rem) {
  .journey-question .options {
    padding-block: 0.5rem;
  }

  .journey-question .options--iconic .option {
    grid-template-columns: 2.05rem minmax(0, 1fr) auto;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
  }

  .option-icon {
    width: 2.05rem;
    height: 2.05rem;
  }

  .journey-question .options--grid .option {
    min-height: 3.8rem;
    padding: 0.7rem 0.75rem;
  }
}

/* ===================================== Cue breathing room
   The gauge arc was drawn 4.75rem tall inside a 3.25rem artwork row, so it
   painted 20px above its own box and came within 5px of the question heading
   while every other cue kept 25px. The cue now owns enough height for its
   artwork, and stands clear of both the heading and the answers. */
.journey-question-cue {
  height: 6.1rem;
  margin-top: clamp(1.9rem, 4.4vh, 2.9rem);
}

.journey-question:has(.journey-question-cue) .options {
  padding-block: clamp(1.6rem, 4vh, 2.6rem);
}

.question-window-gauge::before {
  width: 8.6rem;
  height: 4.3rem;
  border-width: 0.55rem;
  border-radius: 5rem 5rem 0 0;
}

.question-window-gauge > i:first-child { left: calc(50% - 4.55rem); }
.question-window-gauge > i:nth-child(3) { right: calc(50% - 4.55rem); }
.question-window-gauge > b { width: 3.7rem; }

@media (max-height: 46rem) {
  .journey-question-cue {
    height: 4.9rem;
    margin-top: 1.15rem;
  }

  .journey-question:has(.journey-question-cue) .options {
    padding-block: 0.85rem;
  }

  .question-window-gauge::before {
    width: 7.4rem;
    height: 3.5rem;
    border-width: 0.48rem;
  }

  .question-window-gauge > i:first-child { left: calc(50% - 3.9rem); }
  .question-window-gauge > i:nth-child(3) { right: calc(50% - 3.9rem); }
  .question-window-gauge > b { width: 3.05rem; }
}

/* The four quiz worlds are only ever shown behind a question, whose lower
   third is empty. Motifs live there so they read as atmosphere instead of
   smudging through the answer cards and the cue labels. */
.flow[data-journey="true"][data-atmosphere="morning"]::before {
  top: auto;
  bottom: 16%;
  right: -6rem;
  opacity: 0.42;
}

.flow[data-journey="true"][data-atmosphere="naps"]::before {
  top: auto;
  bottom: 20%;
  right: 4%;
  opacity: 0.3;
}

.flow[data-journey="true"][data-atmosphere="night"]::before {
  top: auto;
  bottom: 18%;
  right: -2.5rem;
  opacity: 0.3;
}

/* ===================================== Analysis stability
   Phase copy changes length as the read progresses, so the status card grew
   and shrank and dragged the signal chips up and down under it. Every row now
   reserves its worst-case height, so nothing below it ever moves, and the
   three rows get real air between them. */
.flow[data-journey="true"] .analysis-status {
  min-height: 6.15rem;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  align-items: flex-start;
}

.flow[data-journey="true"] .analysis-status-copy {
  min-height: 4.5rem;
}

.flow[data-journey="true"] .analysis h2 {
  min-height: 2.35rem;
  margin-top: clamp(1.7rem, 4.2vh, 2.6rem);
}

.flow[data-journey="true"] .analysis-signal-rail {
  margin-top: clamp(1.5rem, 3.8vh, 2.2rem);
  margin-bottom: clamp(0.6rem, 2.2vh, 1.3rem);
}

.flow[data-journey="true"] .analysis-signal {
  min-height: 2.6rem;
  align-content: center;
}

@media (max-height: 46rem) {
  .flow[data-journey="true"] .analysis-status {
    min-height: 5.3rem;
    margin-top: 1rem;
  }

  .flow[data-journey="true"] .analysis-status-copy {
    min-height: 3.9rem;
  }

  .flow[data-journey="true"] .analysis h2 {
    margin-top: 1.05rem;
  }

  .flow[data-journey="true"] .analysis-signal-rail {
    margin-top: 0.95rem;
    margin-bottom: 0.35rem;
  }

  .flow[data-journey="true"] .analysis-signal {
    min-height: 2.3rem;
  }
}

/* ===================================== Plan selector and build promise
   The visitor chooses the plan on the paywall, and that choice is what the
   review screen and Stripe use. Price, cadence and renewal are all on the card
   so nothing about the commitment waits until checkout. */
.journey-plan-picker {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  margin-block: clamp(1rem, 3vh, 1.6rem) auto;
}

.journey-plan-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.15rem 0.9rem;
  padding: 0.9rem 1rem;
  border: 1.5px solid rgb(255 255 255 / 14%);
  border-radius: 1.1rem;
  background: rgb(255 255 255 / 5%);
  color: var(--journey-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms linear, background 180ms linear;
}

.journey-plan-card[aria-checked="true"] {
  border-color: var(--journey-action);
  background: color-mix(in srgb, var(--journey-action) 13%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--journey-action) 12%, transparent);
}

.journey-plan-head {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.journey-plan-head strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 640;
}

.journey-plan-badge {
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--journey-action) 22%, transparent);
  color: color-mix(in srgb, var(--journey-action) 86%, #fff);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.journey-plan-price {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  white-space: nowrap;
}

.journey-plan-price b { color: #fff; font-size: 1.15rem; font-weight: 700; }
.journey-plan-price span { color: var(--journey-muted); font-size: 0.8rem; }

.journey-plan-sub {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--journey-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.journey-plan-card[aria-checked="true"] .journey-plan-sub {
  color: rgb(240 244 255 / 82%);
}

.journey-plan-mark { display: none; }

/* ---- the build promise ----
   Three moments on one rail, nothing else. The order review earns its calm
   from generous leading and a single quiet divider per row, so this borrows
   the rhythm rather than the palette. */
.journey-promise-rail {
  display: grid;
  width: 100%;
  margin: clamp(1.8rem, 5vh, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.journey-promise-step {
  display: grid;
  gap: 0.3rem;
  padding: clamp(1rem, 2.8vh, 1.5rem) 0;
  border-top: 1px solid rgb(255 255 255 / 10%);
  opacity: 0;
  transform: translateY(0.4rem);
}

.journey-promise-step:last-child {
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.journey-promise[data-ready="true"] .journey-promise-step {
  animation: journey-copy-arrive 320ms calc(120ms + var(--promise-index) * 90ms) cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.journey-promise-when {
  color: color-mix(in srgb, var(--journey-action) 82%, #fff);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journey-promise-step strong {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* The eyebrow needs room to read as a label rather than as a first line. */
.journey-promise .journey-kicker {
  margin-bottom: clamp(0.9rem, 2.6vh, 1.5rem);
}

.journey-promise h2 {
  max-width: 15ch;
}

.journey-promise > .journey-body {
  margin-top: clamp(0.7rem, 2vh, 1.1rem);
  max-width: 26ch;
}





/* The offer world is a spotlight, which is wrong behind a quiet three-step
   rail. The promise screen keeps the light but drops the hotspot. */
.flow[data-journey="true"][data-atmosphere="offer"]:has(.journey-promise)::before {
  opacity: 0.3;
}

.flow[data-journey="true"] > .journey-promise {
  padding-top: clamp(2rem, 5.5vh, 3.2rem);
}

/* Needs to out-specify the shared action-rail rule so the button rests on the
   bottom rail like every other screen instead of floating under the rail. */
.flow[data-journey="true"] > .journey-promise > .journey-next {
  margin-top: auto;
}

@media (max-height: 46rem) {
  .journey-promise-rail {
    margin-top: 1.1rem;
  }

  .journey-promise-step {
    padding: 0.75rem 0;
  }

  .journey-promise-step strong {
    font-size: 1.02rem;
  }
}