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

.flow[data-journey="true"] {
  --journey-bg: #fbf8f4;
  --journey-panel: rgb(255 255 255 / 82%);
  --journey-line: rgb(26 43 44 / 12%);
  --journey-text: #1a2b2c;
  --journey-muted: rgb(90 110 112 / 92%);
  /* 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: #0e5b62;
  --journey-action-ink: #ffffff;
  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(14 91 98 / 17%), transparent 35%),
    linear-gradient(155deg, #111733 0%, #fbf8f4 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: #1a2b2c;
  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(26 43 44 / 65%);
  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: #1a2b2c;
}

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

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

.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: #1a2b2c;
  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(26 43 44 / 65%);
  background: var(--journey-panel);
  box-shadow: inset 0 1px rgb(26 43 44 / 4%), 0 0.8rem 1.8rem rgb(26 43 44 / 4%);
  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(14 91 98 / 55%);
}

.journey-question .option .dot {
  width: 1.15rem;
  height: 1.15rem;
  border-color: rgb(26 43 44 / 16%);
}

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

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

.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, #fbf8f4 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: #0e5b62;
}

.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(21 129 139 / 13%), transparent 58%),
    rgb(26 43 44 / 4%);
  box-shadow:
    inset 0 0 0 1px rgb(26 43 44 / 4%),
    inset 0 0 2.5rem rgb(21 129 139 / 8%),
    0 1.6rem 4.4rem rgb(26 43 44 / 14%),
    0 0 3rem rgb(63 109 212 / 13%);
}

.flow[data-journey="true"] .analysis-ring::before {
  background: radial-gradient(circle, rgb(21 129 139 / 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%, #1a2b2c);
  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(26 43 44 / 4%);
}

.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%, #1a2b2c);
  font-size: 0.8rem;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.journey-screen h2 {
  color: #1a2b2c;
  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(26 43 44 / 12%);
}

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

.journey-next:disabled,
.journey-next[aria-disabled="true"] {
  border: 1px solid rgb(26 43 44 / 8%);
  background: rgb(26 43 44 / 4%);
  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(26 43 44 / 12%);
  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: #1a2b2c;
  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(26 43 44 / 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(26 43 44 / 65%);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

.journey-chart-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: rgb(26 43 44 / 12%);
  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%, #1a2b2c);
  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(26 43 44 / 65%);
  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(26 43 44 / 15%);
  border-radius: 50%;
  color: transparent;
  font-size: 0.72rem;
}

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

.journey-choice[aria-checked="true"] .journey-choice-check {
  border-color: #0e5b62;
  background: #0e5b62;
  color: #ffffff;
}

.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(26 43 44 / 65%);
  font-size: 0.78rem;
  line-height: 1.16;
  text-align: left;
}

.journey-goal[aria-pressed="true"] {
  border-color: #7aaefc;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  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: #0e5b62;
  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(26 43 44 / 4%);
  text-align: left;
}

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

.journey-quote p {
  margin-top: 0.35rem;
  color: rgb(26 43 44 / 65%);
  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(14 91 98 / 28%);
  border-radius: 1.1rem;
  background: rgb(14 91 98 / 8%);
  color: #1a2b2c;
  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(26 43 44 / 9%);
  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(26 43 44 / 8%);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: 0 1.2rem 3rem rgb(26 43 44 / 9%);
  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(26 43 44 / 4%);
  color: #1a2b2c;
  font-size: 0.74rem;
}

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

.journey-card-row + .journey-card-row {
  border-top: 1px solid rgb(26 43 44 / 4%);
}

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

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

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

.journey-loader span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #15818b, #0e5b62);
  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(26 43 44 / 90%);
  font-size: 0.76rem;
  line-height: 1.3;
}

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

.journey-offer-eyebrow {
  color: #a8541f;
  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, #0e5b62, #15818b);
  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(14 91 98 / 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(26 43 44 / 65%);
  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(14 91 98 / 33%);
  border-radius: 0.9rem;
  background: rgb(14 91 98 / 8%);
  text-align: left;
}

.journey-price span {
  color: rgb(26 43 44 / 65%);
  font-size: 0.7rem;
}

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

.journey-price del {
  color: rgb(26 43 44 / 26%);
  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(26 43 44 / 65%);
  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(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: inset 0 1px rgb(26 43 44 / 4%), 0 0.8rem 1.8rem rgb(26 43 44 / 5%);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.journey-goal[data-goal="morning"] { --goal-color: #c07a24; }
.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: #c07a24; }
.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: #1a2b2c;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.18;
}

.journey-goal-copy small {
  color: rgb(90 110 112 / 94%);
  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(26 43 44 / 4%);
}

.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(26 43 44 / 8%);
  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(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: inset 0 1px rgb(26 43 44 / 6%), 0 0 1.5rem rgb(26 43 44 / 8%);
}

.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(26 43 44 / 5%);
  border-radius: 0.9rem;
  background: linear-gradient(100deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  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: #fdfbf8;
  color: #1a2b2c;
  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(26 43 44 / 6%);
  border-radius: 0.95rem;
  background: rgb(26 43 44 / 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%, #1a2b2c);
  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: #1a2b2c; font-size: 0.86rem; }
.journey-goal-week-preview span { color: rgb(90 110 112 / 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(26 43 44 / 5%);
  border-radius: 0.85rem;
  background: rgb(26 43 44 / 4%);
}

.journey-review-summary strong { color: #1a2b2c; font-size: 0.76rem; }
.journey-review-summary > span:last-child { color: rgb(90 110 112 / 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(26 43 44 / 7%);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: 0 1.15rem 2.5rem rgb(26 43 44 / 11%), inset 0 1px rgb(26 43 44 / 4%);
  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: #1a2b2c; font-size: 0.725rem; font-weight: 800; box-shadow: inset 0 1px rgb(26 43 44 / 11%); }
.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: #1a2b2c; 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(26 43 44 / 7%);
  border-radius: 0.6rem;
  background: rgb(26 43 44 / 4%);
  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(26 43 44 / 6%);
  border-radius: 1.05rem;
  background: linear-gradient(110deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  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: #1a2b2c; font-family: var(--font-display); font-size: 0.95rem; line-height: 1.3; }
.journey-pledge-card footer { margin-top: 0.42rem; color: rgb(90 110 112 / 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(26 43 44 / 7%);
  border-radius: 1.3rem;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: 0 1.2rem 2.8rem rgb(26 43 44 / 11%), inset 0 1px rgb(26 43 44 / 4%);
}

.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: #1a2b2c; font-size: 0.812rem; font-weight: 740; }
.journey-signature-frame-head small { color: rgb(90 110 112 / 44%); font-size: 0.7rem; }
.journey-signature-drawing { position: relative; overflow: hidden; border-radius: 0.95rem; background: linear-gradient(160deg, #1a2b2cdf5, #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(90 110 112 / 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(26 43 44 / 7%);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 88% 5%, rgb(111 151 235 / 16%), transparent 30%),
    linear-gradient(150deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: 0 1.2rem 3rem rgb(26 43 44 / 11%), inset 0 1px rgb(26 43 44 / 5%);
  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(26 43 44 / 4%);
  background: rgb(26 43 44 / 4%);
}

.journey-schedule-artifact-head > div { display: grid; gap: 0.1rem; }
.journey-schedule-artifact-head small { color: rgb(90 110 112 / 52%); font-size: 0.68rem; letter-spacing: 0.1em; }
.journey-schedule-artifact-head strong { color: #1a2b2c; 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(26 43 44 / 4%);
  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(26 43 44 / 7%); border-radius: 0.5rem; background: rgb(26 43 44 / 4%); color: rgb(90 110 112 / 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(90 110 112 / 52%); font-size: 0.7rem; line-height: 1.25; }
.journey-schedule-row-copy strong { color: #1a2b2c; 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(26 43 44 / 14%); }
.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(26 43 44 / 4%); }
.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(90 110 112 / 50%); font-size: 0.825rem; letter-spacing: 0.07em; }
.journey-schedule-artifact-foot strong { color: rgb(90 110 112 / 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, #15818b, #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: #15818b; box-shadow: 0 0 1.4rem rgb(21 129 139 / 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 #15818b; 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: #1a2b2c; 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 #ffffff;
  border-bottom: 2px solid #ffffff;
  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;
  padding-inline: 0.4rem;
}

.qcue-labels span {
  color: rgb(90 110 112 / 94%);
  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(#4aa7b0, #1f6f78);
  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(26 43 44 / 7%);
  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 #4aa7b0;
  border-radius: 50%;
  background: #e2d8c9;
}

.question-dawn-sun {
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  left: 46%;
  bottom: 0.55rem;
  border-radius: 50%;
  background: #0e5b62;
  box-shadow: 0 0 1.1rem rgb(14 91 98 / 28%);
  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 #57b0b8; border-radius: 50%; background: conic-gradient(transparent 25%, #57b0b8 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: #2f8a76; transform: rotate(-35deg); }

.question-nap-modes em {
  height: 0.25rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, #4aa7b0, #2f8a76);
  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(#b8752a 0 47%, #ded3c2 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(90 110 112 / 52%); font-size: 0.72rem; }
.question-nap-meter > i { position: relative; height: 0.68rem; overflow: hidden; border-radius: 1rem; background: rgb(26 43 44 / 4%); }
.question-nap-meter > i b { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #2f8b95, #3a9c86); 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(26 43 44 / 4%);
  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: #3d9aa3; }
.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: #2f8a76; }
.question-window-gauge > i:nth-child(3) { right: calc(50% - 5rem); background: #a8541f; }
.question-window-gauge > b { position: absolute; width: 4.1rem; height: 3px; left: 50%; bottom: 0.15rem; border-radius: 1rem; background: #1a2b2c; box-shadow: 0 0 0.6rem #1a2b2c; 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(26 43 44 / 4%); border-radius: 50%; }
.question-settling-timer > div i { position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 2px; border-radius: 2px; background: #6cbcc3; 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: #1a2b2c; transform: translate(-50%, -50%); }
.question-settling-timer > em { height: 0.25rem; border-radius: 1rem; background: linear-gradient(90deg, #2f8a76 35%, #b8752a 35% 68%, #a8541f 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(26 43 44 / 6%);
}

.question-night-line > span { position: absolute; width: 1.8rem; height: 1.8rem; right: 0.5rem; top: 0; border-radius: 50%; background: #0e5b62; box-shadow: 0 0 1rem rgb(14 91 98 / 22%); }
.question-night-line > span::after { content: ""; position: absolute; width: 1.8rem; height: 1.8rem; left: 0.55rem; top: -0.3rem; border-radius: 50%; background: #fbf8f4; }
.question-night-line > i { position: absolute; width: 0.38rem; height: 0.38rem; bottom: 0.36rem; border-radius: 50%; background: #3e7c6a; box-shadow: 0 0 0.55rem rgb(62 124 106 / 45%); 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, #1f6f78, #2f8b95); 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, #a8541f, #b8752a, #2f8a76); }
.question-certainty > i b { width: 0.68rem; height: 0.68rem; justify-self: center; border: 2px solid #e2d8c9; border-radius: 50%; background: #1a2b2c; 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(26 43 44 / 6%); border-radius: 0.75rem; background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%)); box-shadow: 0 0.8rem 1.4rem rgb(26 43 44 / 8%); 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(26 43 44 / 7%); }
.question-plan-previews b:first-child { width: 55%; background: #4aa7b0; }
.journey-question[data-ready="true"] .question-plan-previews > i:nth-child(1) { animation: plan-preview-left 360ms 150ms ease-out both; }
.journey-question[data-ready="true"] .question-plan-previews > i:nth-child(2) { animation: plan-preview-mid 360ms 210ms ease-out both; }
.journey-question[data-ready="true"] .question-plan-previews > i:nth-child(3) { animation: plan-preview-right 360ms 270ms ease-out both; }
@keyframes plan-preview-left { to { opacity: 1; transform: rotate(-5deg); } }
@keyframes plan-preview-mid { to { opacity: 1; transform: none; } }
@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: #1a2b2c;
}

/* ------------------------------------------------------------ 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(26 43 44 / 6%);
  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(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow:
    inset 0 1px rgb(26 43 44 / 4%),
    0 1rem 2.4rem rgb(26 43 44 / 12%);
  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(90 110 112 / 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(26 43 44 / 6%);
  border-radius: 0.72rem;
  background: rgb(5 9 26 / 64%);
  box-shadow: inset 0 1px rgb(26 43 44 / 4%);
  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(26 43 44 / 65%);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.journey-story-evidence b {
  min-width: 0;
  color: #1a2b2c;
  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(26 43 44 / 10%);
  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: #fdfbf8;
  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(90 110 112 / 94%);
  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, #ffffff, #faf6f0);
}

.scene-nap-head,
.scene-nap-times {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  color: rgb(26 43 44 / 65%);
  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(26 43 44 / 4%) 33%, transparent 33.3%, transparent 66%, rgb(26 43 44 / 4%) 66.2%, transparent 66.5%),
    rgb(26 43 44 / 4%);
  box-shadow: inset 0 1px rgb(26 43 44 / 4%);
}

.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(26 43 44 / 13%);
  background: rgb(26 43 44 / 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: #1a2b2c;
  box-shadow: 0 0 0.8rem #1a2b2c;
  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(26 43 44 / 6%);
  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: #1a2b2c;
  stroke-linecap: round;
  stroke-width: 5;
  transform: rotate(-72deg);
  transform-origin: 160px 160px;
  filter: drop-shadow(0 0 8px rgb(26 43 44 / 30%));
}

.scene-bed-hand circle { fill: #fdfbf8; 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(26 43 44 / 6%);
  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: #1a2b2c; 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, #ffffff, #faf6f0);
}

.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: #fdfbf8; 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(26 43 44 / 9%); 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: #1a2b2c;
  box-shadow: 0 0 1rem #1a2b2c, 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, #ffffff, #faf6f0);
}

.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(26 43 44 / 65%);
  font-size: 0.725rem;
}

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

.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(255 255 255 / 94%), rgb(250 246 240 / 96%));
  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: #1a2b2c; 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, #ffffff, #faf6f0);
}

.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: #fdfbf8; 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(26 43 44 / 65%);
  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(26 43 44 / 8%);
  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(26 43 44 / 32%); font-size: 0.812rem; }
.scene-reassurance-copy b { color: #1a2b2c; 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, #ffffff, #faf6f0);
}

.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(26 43 44 / 6%);
  border-radius: 1.15rem;
  background: rgb(26 43 44 / 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(255 255 255 / 94%), rgb(250 246 240 / 96%));
  opacity: 0;
  transform: translateX(-1rem);
}

.scene-tomorrow-after strong { color: #d6f6df; font-size: 0.79rem; }
.scene-tomorrow-after span { color: #1a2b2c; font-size: 0.838rem; }
.scene-tomorrow-after i { height: 0.32rem; margin-top: auto; border-radius: 1rem; background: linear-gradient(90deg, #76c98d 68%, rgb(26 43 44 / 4%) 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, #ffffff, #faf6f0);
}

.scene-phone,
.scene-product {
  position: relative;
  z-index: 2;
  width: min(15rem, 78%);
  overflow: hidden;
  border: 1px solid rgb(26 43 44 / 8%);
  border-radius: 1.15rem;
  background: linear-gradient(160deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: 0 1.2rem 2.5rem rgb(26 43 44 / 15%), inset 0 1px rgb(26 43 44 / 5%);
  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(26 43 44 / 4%);
  color: rgb(90 110 112 / 94%);
  font-size: 0.7rem;
}

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

.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(26 43 44 / 4%);
}

.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: #1a2b2c; 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(26 43 44 / 13%);
  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, #ffffff, #faf6f0);
}

.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(26 43 44 / 6%);
  border-radius: 1rem;
  background: rgb(26 43 44 / 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: #1a2b2c; 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(14 91 98 / 10%), transparent 40%),
    linear-gradient(145deg, #ffffff, #faf6f0);
}

.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(26 43 44 / 7%);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: 0 1rem 2.4rem rgb(26 43 44 / 14%), inset 0 1px rgb(26 43 44 / 4%);
}

.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(26 43 44 / 5%); }
.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: #1a2b2c; font-size: 0.75rem; }
.scene-tab.final i { width: 100%; background: linear-gradient(90deg, #8f78e3 74%, rgb(26 43 44 / 4%) 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, #ffffff, #faf6f0);
}

.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(26 43 44 / 9%); border-radius: 50%; background: linear-gradient(145deg, #7c97d9, #364c85); box-shadow: 0 1rem 1.4rem rgb(26 43 44 / 11%); }
.scene-shared-card { z-index: 3; max-width: 11.5rem; display: grid; grid-template-columns: 1fr; gap: 0.12rem; padding: 0.65rem; border: 1px solid rgb(26 43 44 / 8%); border-radius: 0.85rem; background: rgb(255 255 255 / 92%); box-shadow: 0 0.8rem 1.8rem rgb(26 43 44 / 13%); transform: translateX(-3.3rem) rotate(-4deg); }
.scene-shared-card small { color: rgb(90 110 112 / 42%); font-size: 0.7rem; }
.scene-shared-card b { color: #1a2b2c; font-size: 0.762rem; }
.scene-shared-card span { color: rgb(90 110 112 / 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(1.6rem) 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, #ffffff, #faf6f0);
}

.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(26 43 44 / 5%); border-radius: 0.85rem; background: rgb(26 43 44 / 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: #1a2b2c; 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(26 43 44 / 5%); border-radius: 999px; background: rgb(26 43 44 / 4%); color: rgb(90 110 112 / 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(255 255 255 / 94%), rgb(250 246 240 / 96%)); box-shadow: 0 1.1rem 2.6rem rgb(26 43 44 / 14%), 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: #1a2b2c; 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, #ffffff, #faf6f0);
}

.scene-chart-grid { fill: none; stroke: rgb(26 43 44 / 4%); 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: #fdfbf8; 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: #1a2b2c; font-size: 0.71rem; }
.scene-offer-card span { padding-top: 0.24rem; border-top: 1px solid rgb(26 43 44 / 4%); 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
   Twelve light worlds, one per section. Warm paper throughout, so a section
   change reads as a shift in daylight rather than a different product. The
   action colour never changes. */
.flow[data-journey="true"] {
  --atmosphere-chrome: rgb(251 248 244 / 88%);
}

.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;
}

/* intake: first contact, calm paper */
.flow[data-journey="true"][data-atmosphere="intake"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(14 91 98 / 8%), transparent 46%),
    linear-gradient(168deg, #fbf8f4 0%, #f3ece1 62%, #fbf8f4 100%);
}

.flow[data-journey="true"][data-atmosphere="intake"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #f3ece1 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="intake"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(14 91 98 / 8%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* daylight: morning light through a window */
.flow[data-journey="true"][data-atmosphere="daylight"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(214 160 96 / 12%), transparent 46%),
    linear-gradient(168deg, #fdfaf5 0%, #f6efe3 62%, #fdfaf5 100%);
}

.flow[data-journey="true"][data-atmosphere="daylight"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #f6efe3 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="daylight"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(214 160 96 / 12%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* coordination: quiet focus, the release */
.flow[data-journey="true"][data-atmosphere="coordination"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(62 124 106 / 11%), transparent 46%),
    linear-gradient(168deg, #fbf9f6 0%, #eef1ec 62%, #fbf9f6 100%);
}

.flow[data-journey="true"][data-atmosphere="coordination"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #eef1ec 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="coordination"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(62 124 106 / 11%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* load: effort, warm and earned */
.flow[data-journey="true"][data-atmosphere="load"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(176 122 78 / 12%), transparent 46%),
    linear-gradient(168deg, #fbf8f3 0%, #f4ece2 62%, #fbf8f3 100%);
}

.flow[data-journey="true"][data-atmosphere="load"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #f4ece2 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="load"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(176 122 78 / 12%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* reading: the pattern being read */
.flow[data-journey="true"][data-atmosphere="reading"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(90 127 160 / 10%), transparent 46%),
    linear-gradient(168deg, #faf8f5 0%, #eceff1 62%, #faf8f5 100%);
}

.flow[data-journey="true"][data-atmosphere="reading"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #eceff1 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="reading"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(90 127 160 / 10%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* insight: the argument, clear light */
.flow[data-journey="true"][data-atmosphere="insight"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(14 91 98 / 10%), transparent 46%),
    linear-gradient(168deg, #fdfaf6 0%, #f4eee6 62%, #fdfaf6 100%);
}

.flow[data-journey="true"][data-atmosphere="insight"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #f4eee6 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="insight"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(14 91 98 / 10%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* proof: grounded, drafting paper */
.flow[data-journey="true"][data-atmosphere="proof"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(110 139 90 / 10%), transparent 46%),
    linear-gradient(168deg, #f9f8f6 0%, #eeefec 62%, #f9f8f6 100%);
}

.flow[data-journey="true"][data-atmosphere="proof"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #eeefec 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="proof"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(110 139 90 / 10%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* practice: the week ahead */
.flow[data-journey="true"][data-atmosphere="practice"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(122 106 158 / 9%), transparent 46%),
    linear-gradient(168deg, #fbf9f5 0%, #f2ece4 62%, #fbf9f5 100%);
}

.flow[data-journey="true"][data-atmosphere="practice"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #f2ece4 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="practice"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(122 106 158 / 9%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* promise: a quiet commitment */
.flow[data-journey="true"][data-atmosphere="promise"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(138 106 118 / 10%), transparent 46%),
    linear-gradient(168deg, #fbf8f4 0%, #f0ece6 62%, #fbf8f4 100%);
}

.flow[data-journey="true"][data-atmosphere="promise"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #f0ece6 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="promise"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(138 106 118 / 10%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* drafting: the plan being drawn */
.flow[data-journey="true"][data-atmosphere="drafting"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(14 91 98 / 9%), transparent 46%),
    linear-gradient(168deg, #f9f9f7 0%, #eaeeef 62%, #f9f9f7 100%);
}

.flow[data-journey="true"][data-atmosphere="drafting"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #eaeeef 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="drafting"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(14 91 98 / 9%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* offer: one light on the decision */
.flow[data-journey="true"][data-atmosphere="offer"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(14 91 98 / 13%), transparent 46%),
    linear-gradient(168deg, #fdfaf5 0%, #f6eee2 62%, #fdfaf5 100%);
}

.flow[data-journey="true"][data-atmosphere="offer"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #f6eee2 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="offer"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(14 91 98 / 13%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

/* cancel: the light drains a little */
.flow[data-journey="true"][data-atmosphere="cancel"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(90 110 112 / 8%), transparent 46%),
    linear-gradient(168deg, #f7f6f4 0%, #ececeb 62%, #f7f6f4 100%);
}

.flow[data-journey="true"][data-atmosphere="cancel"]::before {
  width: 150%;
  height: 16rem;
  left: -25%;
  bottom: -9rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 48%, #ececeb 49%);
  filter: none;
  opacity: 0.9;
  animation: none;
}

.flow[data-journey="true"][data-atmosphere="cancel"]::after {
  width: 14rem;
  height: 14rem;
  top: auto;
  bottom: 18%;
  right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(90 110 112 / 8%), transparent 68%);
  filter: blur(1.4rem);
  opacity: 0.55;
  animation: journey-paper-light 11s ease-in-out infinite alternate;
}

@keyframes journey-paper-light {
  to { opacity: 0.34; transform: translate3d(-0.8rem, 0.6rem, 0) scale(1.05); }
}

@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;
  /* Choice rows keep their intrinsic height so the final option cannot be
     compressed into the action rail on wide, shorter viewports. */
  grid-template-rows: auto auto auto minmax(min-content, 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(26 43 44 / 4%);
  color: rgb(90 110 112 / 94%);
  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(26 43 44 / 13%);
  color: rgb(90 110 112 / 94%);
  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(26 43 44 / 8%);
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(250 246 240 / 96%));
  box-shadow: inset 0 1px rgb(26 43 44 / 4%);
}

.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(26 43 44 / 7%),
    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(26 43 44 / 8%);
  box-shadow: inset 0 1px rgb(26 43 44 / 7%);
}

.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(90 110 112 / 94%);
  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(255 255 255 / 94%), rgb(250 246 240 / 96%));
  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(90 110 112 / 94%);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

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

@media (max-width: 340px) {
  .scene-method-result {
    gap: 0.45rem;
  }

  .scene-method-result b {
    font-size: 0.72rem;
    text-align: right;
    text-wrap: balance;
  }

  .scene-method-result span {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
}

.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(26 43 44 / 4%);
  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: #1a2b2c;
  font-size: 0.82rem;
  line-height: 1.15;
}

.scene-method-stack > div small {
  color: rgb(90 110 112 / 94%);
  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;
  }

  /* The completed schedule plus its answer-derived focus and CTA are taller
     than the first iPhone viewport. Keep them in document order and scroll the
     screen rather than compressing the focus card into the final schedule row. */
  .flow[data-journey="true"] > .journey-plan-build:has(.journey-plan-focus) {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* 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(26 43 44 / 7%);
  border-radius: 0.72rem;
  background: rgb(26 43 44 / 4%);
  color: rgb(90 110 112 / 94%);
  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%, #1a2b2c);
}

/* ---- the confirm mark, shared by rows and grid ---- */
.option-mark {
  width: 1.3rem;
  height: 1.3rem;
  justify-self: end;
  border: 1.5px solid rgb(26 43 44 / 12%);
  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(255 255 255 / 94%), rgb(250 246 240 / 96%));
}

.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(26 43 44 / 4%), 0 0.7rem 1.6rem rgb(26 43 44 / 10%);
}

.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(26 43 44 / 5%);
}

/* ---- 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(26 43 44 / 8%);
  border-radius: 1.1rem;
  background: rgb(26 43 44 / 4%);
  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: #1a2b2c;
  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%, #1a2b2c);
  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: #1a2b2c; 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(90 110 112 / 94%);
}

.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(26 43 44 / 6%);
  opacity: 0;
  transform: translateY(0.4rem);
}

.journey-promise-step:last-child {
  border-bottom: 1px solid rgb(26 43 44 / 6%);
}

.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%, #1a2b2c);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journey-promise-step strong {
  color: #1a2b2c;
  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;
  }
}

/* ===================================== Bladder scene primitives
   Every story illustration is built from these six shapes, so the set reads as
   one hand. Colour comes from --journey-scene-accent inside the frame only, the
   action colour never appears here. Nothing below 11px. */
.bscene {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem;
  color: var(--journey-scene-accent, #0e5b62);
}

.bscene-cap {
  margin: 0;
  color: rgb(26 43 44 / 65%);
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
}

.bscene-svg { width: 100%; height: auto; overflow: visible; }
.bscene-svg--short { max-height: 2.5rem; }
.bscene-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.bscene-track,
.bscene-threshold { stroke: rgb(26 43 44 / 14%); stroke-width: 3; }
.bscene-threshold { stroke-dasharray: 6 7; }
.bscene-spike { stroke: currentColor; stroke-width: 6; }
.bscene-slow,
.bscene-rise { stroke: currentColor; stroke-width: 5; opacity: 0.55; }
.bscene-flatline { stroke: rgb(26 43 44 / 22%); stroke-width: 4; }
.bscene-dot { fill: #fff; stroke: currentColor; stroke-width: 4; }
.bscene-dot--late { opacity: 0.5; }

.bscene-pair {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: rgb(26 43 44 / 65%);
  font-size: 0.78rem;
}

/* squeeze and release halves */
.bscene-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; width: 100%; }
.bscene-half { display: grid; gap: 0.45rem; justify-items: center; }
.bscene-half > span { color: rgb(26 43 44 / 62%); font-size: 0.78rem; }
.bscene-fill {
  width: 100%;
  height: 3.1rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, currentColor 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}
.bscene-fill--out { background: color-mix(in srgb, currentColor 7%, transparent); }

/* repeated bars with a flat outcome */
.bscene-bars { display: flex; align-items: flex-end; justify-content: center; gap: 0.4rem; height: 3.4rem; }
.bscene-bars i {
  width: 0.5rem;
  height: 100%;
  border-radius: 1rem;
  background: color-mix(in srgb, currentColor 30%, transparent);
}

/* breath: where the load goes */
.bscene-arrows { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; }
.bscene-arrow { display: grid; justify-items: center; gap: 0.4rem; }
.bscene-arrow > span { color: rgb(26 43 44 / 62%); font-size: 0.78rem; }
.bscene-arrow i {
  width: 0.32rem;
  height: 2.6rem;
  border-radius: 1rem;
  background: linear-gradient(currentColor, color-mix(in srgb, currentColor 12%, transparent));
}
.bscene-arrow--wide { grid-template-columns: repeat(3, auto); align-items: end; }
.bscene-arrow--wide > span { grid-column: 1 / -1; }
.bscene-arrow--wide i:nth-child(1) { height: 1.5rem; }
.bscene-arrow--wide i:nth-child(3) { height: 1.5rem; }

/* ordered rungs */
.bscene-rungs { display: grid; gap: 0.5rem; width: 100%; }
.bscene-rungs--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.bscene-rungs i {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgb(26 43 44 / 12%);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 70%);
  font-style: normal;
}
.bscene-rungs--row i { grid-template-columns: 1fr; justify-items: center; gap: 0.3rem; }
.bscene-rungs i.is-on {
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  background: color-mix(in srgb, currentColor 10%, #fff);
}
.bscene-rungs b {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: currentColor;
  font-size: 0.78rem;
}
.bscene-rungs span { color: rgb(26 43 44 / 74%); font-size: 0.84rem; }

/* seven days, five kept */
.bscene-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.34rem; width: 100%; }
.bscene-week i {
  height: 2.4rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(26 43 44 / 12%);
  background: rgb(255 255 255 / 60%);
}
.bscene-week i.is-on {
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  background: color-mix(in srgb, currentColor 20%, #fff);
}

/* many people, quietly */
.bscene-crowd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; width: 100%; }
.bscene-crowd i {
  height: 1.5rem;
  border-radius: 999px 999px 0.4rem 0.4rem;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.bscene-crowd i:nth-child(3) { background: color-mix(in srgb, currentColor 44%, transparent); }

/* five minutes */
.bscene-dial {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  border: 0.34rem solid rgb(26 43 44 / 10%);
  border-top-color: currentColor;
  border-radius: 50%;
}
.bscene-dial b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

/* the plan as cards */
.bscene-cards { position: relative; width: min(13rem, 80%); height: 5.2rem; }
.bscene-cards--full { width: min(15rem, 88%); }
.bscene-cards i {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(26 43 44 / 12%);
  border-radius: 0.85rem;
  background: rgb(255 255 255 / 84%);
  box-shadow: 0 0.5rem 1.1rem rgb(26 43 44 / 7%);
}
.bscene-cards i:nth-child(1) { transform: translate(-0.5rem, 0.45rem) rotate(-3deg); opacity: 0.55; }
.bscene-cards i:nth-child(2) { transform: translate(0.35rem, 0.2rem) rotate(2deg); opacity: 0.8; }
.bscene-cards i:nth-child(3) { background: color-mix(in srgb, currentColor 8%, #fff); }

/* one entrance for the whole set, inside the sub-300ms budget */
.journey-story[data-ready="true"] .bscene > * {
  animation: bscene-in 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.journey-story[data-ready="true"] .bscene > *:nth-child(2) { animation-delay: 60ms; }
.journey-story[data-ready="true"] .bscene > *:nth-child(3) { animation-delay: 120ms; }

@keyframes bscene-in { from { opacity: 0; transform: translateY(0.4rem); } }

@media (prefers-reduced-motion: reduce) {
  .journey-story[data-ready="true"] .bscene > * { animation: none; }
}

/* A question with no cue has nothing above the options to balance against, so
   centring them in the leftover space just opens a void under the heading. */
.journey-question:not(:has(.journey-question-cue)) .options {
  margin-block: clamp(1.1rem, 4vh, 2rem) auto;
}

/* A one-line prompt used to pull the cue and the options 28px up, so advancing
   between questions jumped. Reserve two lines and the stack holds still. */
.journey-question .question-prompt {
  min-height: 2.04em;
}