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

.flow[data-journey="true"] {
  --journey-bg: #1b1512;
  --journey-panel: rgb(36 29 24 / 76%);
  --journey-line: rgb(255 255 255 / 12%);
  --journey-text: #f5efe8;
  --journey-muted: rgb(186 172 158 / 68%);
  /* One gutter for the whole journey. The back chevron, the progress rail,
     the content and the action all resolve to the same two vertical lines. */
  --journey-gutter: 1.25rem;
  /* One primary-action colour for all 45 screens. Warm dark ink on it reads
     at 8.2:1, so the most important control is also the most legible one. */
  --journey-action: #d2e3ea;
  --journey-action-ink: #14222a;
  /* Declared here, not on .journey-screen, so the question screens can use
     it too. Scenes still override it per chapter. */
  --journey-accent: var(--journey-action);
  position: relative;
  isolation: isolate;
  color: var(--journey-text);
  background:
    radial-gradient(circle at 12% 12%, rgb(60 93 174 / 30%), transparent 31%),
    radial-gradient(circle at 88% 82%, rgb(243 166 90 / 17%), transparent 35%),
    linear-gradient(155deg, #111733 0%, #1b1512 54%, #101026 100%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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, #1b1512 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: #e3eff4;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.journey-offer-eyebrow {
  color: #9bc0cd;
  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, #d2e3ea, #e3eff4);
  color: #20150c;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 5vw, 1.45rem);
  font-weight: 820;
  box-shadow: 0 0.8rem 2rem rgb(243 166 90 / 24%);
  animation: journey-discount-arrive 660ms cubic-bezier(0.2, 1.45, 0.3, 1) both;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.journey-offer--fallback {
  --journey-accent: #8fb8a6;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.journey-goal[data-goal="morning"] { --goal-color: #c6a074; }
.journey-goal[data-goal="nap"] { --goal-color: #aecfda; }
.journey-goal[data-goal="bedtime"] { --goal-color: #f19483; }
.journey-goal[data-goal="night"] { --goal-color: #9bc0cd; }
.journey-goal[data-goal="clarity"] { --goal-color: #8fb8a6; }
.journey-goal[data-goal="handoff"] { --goal-color: #aecfda; }
.journey-goal-roadmap-item[data-goal="morning"] { --goal-color: #c6a074; }
.journey-goal-roadmap-item[data-goal="nap"] { --goal-color: #aecfda; }
.journey-goal-roadmap-item[data-goal="bedtime"] { --goal-color: #f19483; }
.journey-goal-roadmap-item[data-goal="night"] { --goal-color: #9bc0cd; }
.journey-goal-roadmap-item[data-goal="clarity"] { --goal-color: #8fb8a6; }
.journey-goal-roadmap-item[data-goal="handoff"] { --goal-color: #aecfda; }

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

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

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

.journey-goal-copy small {
  color: rgb(186 172 158 / 42%);
  font-size: 0.7rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sticky-cta {
    display: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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-photo-slot {
    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 warm-dark worlds, one per section. Espresso and clay throughout, so a
   section change reads as the light moving in one room at dawn. The pale
   horizon action colour never changes, and nothing here is ever red. */
.flow[data-journey="true"] { --atmosphere-chrome: rgb(27 21 18 / 72%); }

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

/* arrival: First light, the road is visible */
.flow[data-journey="true"][data-atmosphere="arrival"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(210 227 234 / 10%), transparent 45%),
    linear-gradient(168deg, #241C16 0%, #160F0B 58%, #241C16 100%);
}

.flow[data-journey="true"][data-atmosphere="arrival"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #160F0B 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="arrival"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(210 227 234 / 10%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* structure: Cool order, edges you can find */
.flow[data-journey="true"][data-atmosphere="structure"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(155 192 205 / 13%), transparent 45%),
    linear-gradient(168deg, #1A1B1D 0%, #0F1012 58%, #1A1B1D 100%);
}

.flow[data-journey="true"][data-atmosphere="structure"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #0F1012 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="structure"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(155 192 205 / 13%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* satiety: Kitchen warmth, a meal that holds */
.flow[data-journey="true"][data-atmosphere="satiety"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(198 160 116 / 13%), transparent 45%),
    linear-gradient(168deg, #271C13 0%, #170F09 58%, #271C13 100%);
}

.flow[data-journey="true"][data-atmosphere="satiety"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #170F09 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="satiety"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(198 160 116 / 13%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* strength: Granite light, weight that stays */
.flow[data-journey="true"][data-atmosphere="strength"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(150 172 182 / 14%), transparent 45%),
    linear-gradient(168deg, #1E2021 0%, #121414 58%, #1E2021 100%);
}

.flow[data-journey="true"][data-atmosphere="strength"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #121414 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="strength"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(150 172 182 / 14%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* reading: Low lamp, close attention */
.flow[data-journey="true"][data-atmosphere="reading"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(170 145 170 / 12%), transparent 45%),
    linear-gradient(168deg, #241A1E 0%, #160E11 58%, #241A1E 100%);
}

.flow[data-journey="true"][data-atmosphere="reading"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #160E11 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="reading"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(170 145 170 / 12%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* insight: The room lifts, one thing lands */
.flow[data-journey="true"][data-atmosphere="insight"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(210 227 234 / 17%), transparent 45%),
    linear-gradient(168deg, #2B2421 0%, #1A1513 58%, #2B2421 100%);
}

.flow[data-journey="true"][data-atmosphere="insight"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #1A1513 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="insight"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(210 227 234 / 17%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* proof: Matte daylight, evidence from others */
.flow[data-journey="true"][data-atmosphere="proof"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(182 167 154 / 12%), transparent 45%),
    linear-gradient(168deg, #1E1B17 0%, #120F0C 58%, #1E1B17 100%);
}

.flow[data-journey="true"][data-atmosphere="proof"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #120F0C 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="proof"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(182 167 154 / 12%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* weeks: Wider horizon, twelve markers ahead */
.flow[data-journey="true"][data-atmosphere="weeks"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(155 192 205 / 15%), transparent 45%),
    linear-gradient(168deg, #232326 0%, #151517 58%, #232326 100%);
}

.flow[data-journey="true"][data-atmosphere="weeks"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #151517 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="weeks"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(155 192 205 / 15%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* promise: Held warmth, a steady undertaking */
.flow[data-journey="true"][data-atmosphere="promise"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(198 160 116 / 14%), transparent 45%),
    linear-gradient(168deg, #291F17 0%, #180F0A 58%, #291F17 100%);
}

.flow[data-journey="true"][data-atmosphere="promise"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #180F0A 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="promise"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(198 160 116 / 14%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* drafting: Quiet workroom while it is written */
.flow[data-journey="true"][data-atmosphere="drafting"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(150 172 182 / 11%), transparent 45%),
    linear-gradient(168deg, #1B1A19 0%, #100F0E 58%, #1B1A19 100%);
}

.flow[data-journey="true"][data-atmosphere="drafting"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #100F0E 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="drafting"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(150 172 182 / 11%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* offer: Full light on the plan */
.flow[data-journey="true"][data-atmosphere="offer"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(210 227 234 / 20%), transparent 45%),
    linear-gradient(168deg, #302722 0%, #1C1613 58%, #302722 100%);
}

.flow[data-journey="true"][data-atmosphere="offer"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #1C1613 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="offer"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(210 227 234 / 20%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

/* cancel: Flat calm, nothing pushing */
.flow[data-journey="true"][data-atmosphere="cancel"] {
  --journey-panel: rgb(36 29 24 / 84%);
  background:
    radial-gradient(ellipse at 15% 5%, rgb(182 167 154 / 9%), transparent 45%),
    linear-gradient(168deg, #211D19 0%, #141210 58%, #211D19 100%);
}

.flow[data-journey="true"][data-atmosphere="cancel"]::before {
  width: 150%; height: 17rem; left: -25%; bottom: -9.5rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(172deg, transparent 0 46%, #141210 47%);
  filter: none; opacity: 0.88; animation: none;
}

.flow[data-journey="true"][data-atmosphere="cancel"]::after {
  width: 15rem; height: 15rem; top: auto; bottom: 17%; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(182 167 154 / 9%), transparent 66%);
  filter: blur(1.6rem); opacity: 0.6;
  animation: journey-horizon-light 12s ease-in-out infinite alternate;
}

@keyframes journey-horizon-light {
  to { opacity: 0.36; transform: translate3d(-0.9rem, 0.7rem, 0) scale(1.06); }
}

@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;
  /* The renderer has four children: title, proof summary, review stack and
     CTA. Keep the flexible space on the review stack so the CTA owns its
     intrinsic final row instead of stretching to fill the viewport. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding-top: clamp(2.6rem, 6vh, 4rem);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* 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(255 255 255 / 12%);
  border-radius: 0.72rem;
  background: rgb(255 255 255 / 6%);
  color: rgb(226 234 255 / 78%);
  transition: border-color 180ms linear, background 180ms linear, color 180ms linear;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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





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

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

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

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

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

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

/* 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;
}

/* The question cues had no reduced-motion coverage: the existing blocks only
   reach the atmosphere layers and the story scenes. Keep the reveal legible as
   a fade and drop every transform. */
@media (prefers-reduced-motion: reduce) {
  .journey-question[data-ready="true"] .journey-question-cue,
  .journey-question[data-ready="true"] .journey-question-cue * {
    animation: journey-cue-fade 200ms var(--ease) both !important;
    transform: none !important;
  }

  @keyframes journey-cue-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Runway question cues. One object language across the ten screens: a path and
   a gate, a plate and its cutlery, a written card, a bar on the floor, a pot,
   a mug, a window, a doorway. Every SVG carries the family's line weight and
   colour on its root element, so a child only declares what it changes and no
   two rules ever fight over a stroke. */
.qcue-art .rwcue-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--journey-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rwcue-svg .rwcue-mut { stroke: var(--journey-muted); }
/* the question screen is not a .journey-screen, so accent is not declared
   there; it falls back to muted rather than to an invalid stroke */
.rwcue-svg .rwcue-acc { stroke: var(--journey-accent, var(--journey-muted)); }
.rwcue-svg .rwcue-act { stroke: var(--journey-action); stroke-width: 2.5; }
.rwcue-svg .rwcue-glow { stroke: none; fill: color-mix(in srgb, var(--journey-action) 26%, transparent); }

/* Three keyframes serve every cue. Each animates only to a resting value, so
   the from-state is whatever the element's own static rule already declares:
   one dashoffset, one transform, one opacity, written once per element. */
@keyframes rwcue-draw { to { stroke-dashoffset: 0; } }
@keyframes rwcue-settle { to { opacity: 1; transform: none; } }
@keyframes rwcue-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rwcue-path *,
  .rwcue-call *,
  .rwcue-dinner *,
  .rwcue-plate *,
  .rwcue-shelf *,
  .rwcue-lift *,
  .rwcue-rule *,
  .rwcue-window *,
  .rwcue-morning *,
  .rwcue-access * {
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  /* A tilt is composition, not motion, so the resting picture survives the
     reset: the food still sits at an angle and the door is still ajar. */
  .rwcue-plate-portion { transform: rotate(-8deg) !important; }
  .rwcue-shelf-card { transform: rotate(-3deg) !important; }
  .rwcue-rule-card { transform: rotate(-2deg) !important; }
  .rwcue-access-leaf { transform: scaleX(0.72) !important; }
  .journey-question[data-ready="true"] .rwcue-path *,
  .journey-question[data-ready="true"] .rwcue-call *,
  .journey-question[data-ready="true"] .rwcue-dinner *,
  .journey-question[data-ready="true"] .rwcue-plate *,
  .journey-question[data-ready="true"] .rwcue-shelf *,
  .journey-question[data-ready="true"] .rwcue-lift *,
  .journey-question[data-ready="true"] .rwcue-rule *,
  .journey-question[data-ready="true"] .rwcue-window *,
  .journey-question[data-ready="true"] .rwcue-morning *,
  .journey-question[data-ready="true"] .rwcue-access * {
    animation: rwcue-fade 240ms var(--ease) both !important;
  }
}

/* the handset arrives, the care mark lands on it, the signal goes out */
.rwcue-call-body { opacity: 0; transform: scale(0.94); transform-box: fill-box; transform-origin: center; }
.rwcue-call-plus { opacity: 0; transform: scale(0.9); transform-box: fill-box; transform-origin: center; }
.rwcue-call-wave { stroke-dasharray: 40; stroke-dashoffset: 40; opacity: 0; }
.journey-question[data-ready="true"] .rwcue-call .rwcue-call-body { animation: rwcue-settle 400ms 60ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-call .rwcue-call-plus { animation: rwcue-settle 320ms 140ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-call .rwcue-call-wave--a { animation: rwcue-draw 320ms 220ms var(--ease) both, rwcue-fade 240ms 220ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-call .rwcue-call-wave--b { animation: rwcue-draw 320ms 300ms var(--ease) both, rwcue-fade 240ms 300ms var(--ease) both; }

/* the list is written out line by line, then the pot lands and starts steaming */
.rwcue-dinner-card { opacity: 0; transform: scale(0.96); transform-box: fill-box; transform-origin: center; }
.rwcue-dinner-rule { stroke-dasharray: 60; stroke-dashoffset: 60; opacity: 0; }
.rwcue-dinner-split { opacity: 0; }
.rwcue-dinner-pot { opacity: 0; transform: translateY(8px); }
.rwcue-dinner-steam { stroke-dasharray: 22; stroke-dashoffset: 22; opacity: 0; }
.journey-question[data-ready="true"] .rwcue-dinner .rwcue-dinner-card { animation: rwcue-settle 380ms 60ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-dinner .rwcue-dinner-rule--a { animation: rwcue-draw 260ms 140ms var(--ease) both, rwcue-fade 240ms 140ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-dinner .rwcue-dinner-rule--b { animation: rwcue-draw 260ms 190ms var(--ease) both, rwcue-fade 240ms 190ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-dinner .rwcue-dinner-rule--c { animation: rwcue-draw 260ms 240ms var(--ease) both, rwcue-fade 240ms 240ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-dinner .rwcue-dinner-pot { animation: rwcue-settle 380ms 310ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-dinner .rwcue-dinner-split { animation: rwcue-fade 260ms 370ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-dinner .rwcue-dinner-steam--a { animation: rwcue-draw 300ms 430ms var(--ease) both, rwcue-fade 240ms 430ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-dinner .rwcue-dinner-steam--b { animation: rwcue-draw 300ms 490ms var(--ease) both, rwcue-fade 240ms 490ms var(--ease) both; }

/* fork in from the left, plate drawn round, the portion served onto it, knife in from the right */
.rwcue-plate-fork { opacity: 0; transform: translateX(-8px); }
.rwcue-plate-rim { stroke-dasharray: 172; stroke-dashoffset: 172; opacity: 0; }
.rwcue-plate-well { opacity: 0; }
.rwcue-plate-portion { opacity: 0; transform: rotate(-8deg) scale(0.9); transform-box: fill-box; transform-origin: center; }
.rwcue-plate-knife { opacity: 0; transform: translateX(8px); }
.journey-question[data-ready="true"] .rwcue-plate .rwcue-plate-fork { animation: rwcue-settle 340ms 80ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-plate .rwcue-plate-rim { animation: rwcue-draw 440ms 140ms var(--ease) both, rwcue-fade 240ms 140ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-plate .rwcue-plate-well { animation: rwcue-fade 280ms 210ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-plate .rwcue-plate-portion { animation: rwcue-plate-serve 340ms 280ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-plate .rwcue-plate-knife { animation: rwcue-settle 340ms 350ms var(--ease) both; }
@keyframes rwcue-plate-serve { to { opacity: 1; transform: rotate(-8deg); } }

/* the shelf draws, then each thing takes its place on it; the card comes to rest
   still leaning, pivoting on the corner that touches the board */
.rwcue-shelf-board { stroke-dasharray: 250; stroke-dashoffset: 250; opacity: 0; }
.rwcue-shelf-plate { opacity: 0; transform: translateY(9px); }
.rwcue-shelf-weight { opacity: 0; transform: translateY(9px); }
.rwcue-shelf-card { opacity: 0; transform: translateY(9px) rotate(-9deg); transform-box: fill-box; transform-origin: 0% 100%; }
.journey-question[data-ready="true"] .rwcue-shelf .rwcue-shelf-board { animation: rwcue-draw 420ms 40ms var(--ease) both, rwcue-fade 240ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-shelf .rwcue-shelf-plate { animation: rwcue-settle 320ms 120ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-shelf .rwcue-shelf-weight { animation: rwcue-settle 320ms 190ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-shelf .rwcue-shelf-card { animation: rwcue-shelf-lean 400ms 260ms var(--ease) both; }
@keyframes rwcue-shelf-lean { to { opacity: 1; transform: rotate(-3deg); } }

/* the floor draws, then the bar comes up off it once and sets back down */
.rwcue-lift-floor { stroke-dasharray: 186; stroke-dashoffset: 186; opacity: 0; }
.rwcue-lift-bar { opacity: 0; transform: translateY(14px); }
.journey-question[data-ready="true"] .rwcue-lift .rwcue-lift-floor { animation: rwcue-draw 420ms 40ms var(--ease) both, rwcue-fade 240ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-lift .rwcue-lift-bar { animation: rwcue-lift-pick 520ms 120ms var(--ease) both; }
@keyframes rwcue-lift-pick { 0% { opacity: 0; transform: translateY(14px); } 55% { opacity: 1; transform: translateY(-5px); } 100% { opacity: 1; transform: none; } }

/* the card lands slightly askew, then the rule is written onto it line by line */
.rwcue-rule-card { opacity: 0; transform: translateY(9px) rotate(-6deg); transform-box: fill-box; transform-origin: center; }
.rwcue-rule-margin { opacity: 0; }
.rwcue-rule-line { opacity: 0; }
.rwcue-rule-line--a { stroke-dasharray: 120; stroke-dashoffset: 120; }
.rwcue-rule-line--b { stroke-dasharray: 62; stroke-dashoffset: 62; }
.rwcue-rule-line--c { stroke-dasharray: 32; stroke-dashoffset: 32; }
.journey-question[data-ready="true"] .rwcue-rule .rwcue-rule-card { animation: rwcue-rule-land 400ms 70ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-rule .rwcue-rule-margin { animation: rwcue-fade 260ms 150ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-rule .rwcue-rule-line--a { animation: rwcue-draw 340ms 220ms var(--ease) both, rwcue-fade 240ms 220ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-rule .rwcue-rule-line--b { animation: rwcue-draw 300ms 290ms var(--ease) both, rwcue-fade 240ms 290ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-rule .rwcue-rule-line--c { animation: rwcue-draw 300ms 360ms var(--ease) both, rwcue-fade 240ms 360ms var(--ease) both; }
@keyframes rwcue-rule-land { to { opacity: 1; transform: rotate(-2deg); } }

/* the floor draws, the window arrives, then the light swings down onto the floor,
   pivoting on the corner of the sill it falls from */
.rwcue-window-floor { stroke-dasharray: 274; stroke-dashoffset: 274; opacity: 0; }
.rwcue-window-frame { opacity: 0; transform: scale(0.96); transform-box: fill-box; transform-origin: center; }
.rwcue-window-light { opacity: 0; transform: rotate(-7deg); transform-box: fill-box; transform-origin: 0% 0%; }
.journey-question[data-ready="true"] .rwcue-window .rwcue-window-floor { animation: rwcue-draw 400ms 40ms var(--ease) both, rwcue-fade 240ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-window .rwcue-window-frame { animation: rwcue-settle 380ms 120ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-window .rwcue-window-light { animation: rwcue-settle 460ms 200ms var(--ease-in-out) both; }

/* the plate settles, the mug lands beside it, and only then does the steam rise */
.rwcue-morning-plate { opacity: 0; transform: scale(0.94); transform-box: fill-box; transform-origin: center; }
.rwcue-morning-well { opacity: 0; }
.rwcue-morning-mug { opacity: 0; transform: translateY(9px); }
.rwcue-morning-steam { stroke-dasharray: 22; stroke-dashoffset: 22; opacity: 0; }
.journey-question[data-ready="true"] .rwcue-morning .rwcue-morning-plate { animation: rwcue-settle 380ms 70ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-morning .rwcue-morning-mug { animation: rwcue-settle 380ms 150ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-morning .rwcue-morning-well { animation: rwcue-fade 280ms 220ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-morning .rwcue-morning-steam--a { animation: rwcue-draw 320ms 290ms var(--ease) both, rwcue-fade 240ms 290ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-morning .rwcue-morning-steam--b { animation: rwcue-draw 320ms 360ms var(--ease) both, rwcue-fade 240ms 360ms var(--ease) both; }

/* one floor draws under both, the doorway arrives, the leaf swings open on its
   hinge, and the bar sets down at the other end */
.rwcue-access-floor { stroke-dasharray: 258; stroke-dashoffset: 258; opacity: 0; }
.rwcue-access-door { opacity: 0; transform: scale(0.95); transform-box: fill-box; transform-origin: center; }
.rwcue-access-leaf { transform: scaleX(1); transform-box: fill-box; transform-origin: 0% 50%; }
.rwcue-access-weight { opacity: 0; transform: translateY(9px); }
.journey-question[data-ready="true"] .rwcue-access .rwcue-access-floor { animation: rwcue-draw 420ms 40ms var(--ease) both, rwcue-fade 240ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-access .rwcue-access-door { animation: rwcue-settle 360ms 120ms var(--ease) both; }
.journey-question[data-ready="true"] .rwcue-access .rwcue-access-leaf { animation: rwcue-access-open 420ms 200ms var(--ease-in-out) both; }
.journey-question[data-ready="true"] .rwcue-access .rwcue-access-weight { animation: rwcue-settle 360ms 270ms var(--ease) both; }
@keyframes rwcue-access-open { to { transform: scaleX(0.72); } }

.rwcue-month .rwcue-month-counter { stroke-dasharray: 144; stroke-dashoffset: 144; }
.rwcue-month .rwcue-month-turn { stroke-dasharray: 46; stroke-dashoffset: 46; }
.rwcue-month .rwcue-month-block { opacity: 0; }
.rwcue-month .rwcue-month-day { opacity: 0; transform-box: fill-box; transform-origin: center; }

.journey-question[data-ready="true"] .rwcue-month .rwcue-month-counter {
  animation: rwcue-draw 340ms 50ms var(--ease) both;
}

.journey-question[data-ready="true"] .rwcue-month .rwcue-month-block {
  animation: rwcue-settle 320ms 140ms var(--ease) both;
}

/* The page lifts at its corner rather than a marker sliding along a track: the
   question is which side of the turn you are on, not how far along you are. */
.journey-question[data-ready="true"] .rwcue-month .rwcue-month-turn {
  animation: rwcue-draw 360ms 220ms var(--ease) both;
}

.journey-question[data-ready="true"] .rwcue-month .rwcue-month-day {
  animation: rwcue-month-circle 300ms 300ms var(--ease) both;
}

@keyframes rwcue-month-circle {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}


/* ========================================== Runway conversion landing */
.quiz-entry--runway.landing-story {
  overflow: clip;
  padding-bottom: 0;
  background: #1b1512;
  color: #f5efe8;
}

.quiz-entry--runway .landing-outcome-hero,
.quiz-entry--runway .landing-outcome-hero > .wrap {
  min-height: 100svh;
}

.quiz-entry--runway .landing-outcome-hero > .wrap {
  gap: 0;
  padding-top: max(1.35rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.quiz-entry--runway .entry-scene::after {
  background:
    linear-gradient(180deg, rgb(15 11 9 / 40%) 0%, rgb(15 11 9 / 28%) 31%, rgb(20 14 11 / 93%) 76%, #1b1512 100%),
    linear-gradient(90deg, rgb(21 16 13 / 72%) 0%, transparent 86%);
}

.quiz-entry--runway .entry-scene img {
  object-position: 58% center;
}

.quiz-entry--runway .landing-outcome-copy {
  max-width: 34rem;
  margin-top: auto;
}

.quiz-entry--runway .landing-outcome-copy .eyebrow {
  color: #d2e3ea;
  letter-spacing: 0.12em;
}

.quiz-entry--runway .landing-outcome-copy h1 {
  margin-top: 0.65rem;
  font-size: clamp(2.7rem, 13vw, 4.4rem);
  line-height: 0.94;
}

.quiz-entry--runway .landing-status {
  width: fit-content;
  padding: 0.48rem 0.7rem;
  border: 1px solid rgb(210 227 234 / 28%);
  border-radius: 999px;
  background: rgb(27 21 18 / 62%);
  color: rgb(245 239 232 / 78%);
  font-size: 0.76rem;
  backdrop-filter: blur(12px);
}

.quiz-entry--runway .entry-welcome-cta {
  width: 100%;
  margin-top: 1.25rem;
  background: #d2e3ea;
  color: #14222a;
}

.quiz-entry--runway .landing-scroll-cue {
  color: rgb(245 239 232 / 66%);
}

.quiz-entry--runway .landing-section {
  position: relative;
  padding-block: clamp(4.5rem, 15vw, 8rem);
  border-top: 1px solid rgb(210 227 234 / 9%);
}

.quiz-entry--runway .landing-section > .wrap {
  position: relative;
}

.quiz-entry--runway .landing-section-copy {
  max-width: 42rem;
}

.quiz-entry--runway .landing-section .eyebrow {
  color: #9bc0cd;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

.quiz-entry--runway .landing-section h2 {
  margin-top: 0.75rem;
  color: #f5efe8;
  font-size: clamp(2.05rem, 8.5vw, 3.65rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.quiz-entry--runway .landing-section-body {
  max-width: 40rem;
  color: #b6a79a;
  font-size: clamp(1rem, 3.8vw, 1.18rem);
  line-height: 1.58;
}

.quiz-entry--runway .landing-section-items {
  gap: 0.75rem;
}

.quiz-entry--runway .landing-section-item {
  padding: 1.1rem;
  border: 1px solid rgb(210 227 234 / 11%);
  border-radius: 1rem;
  background: rgb(44 36 30 / 72%);
}

.quiz-entry--runway .landing-section-item h3 {
  color: #f5efe8;
  font-size: 1rem;
  line-height: 1.25;
}

.quiz-entry--runway .landing-section-item p {
  color: #b6a79a;
  font-size: 0.88rem;
  line-height: 1.48;
}

.quiz-entry--runway .landing-section-cta .btn {
  background: #d2e3ea;
  color: #14222a;
}

.quiz-entry--runway .landing-section--why_failed,
.quiz-entry--runway .landing-section--possibilities,
.quiz-entry--runway .landing-section--research {
  background:
    radial-gradient(circle at 88% 12%, rgb(155 192 205 / 10%), transparent 31%),
    #211a16;
}

.quiz-entry--runway .landing-section--testimonial .landing-section-item {
  padding: 1.35rem;
  border-color: rgb(210 227 234 / 18%);
  background: linear-gradient(145deg, rgb(47 41 36 / 88%), rgb(35 28 23 / 88%));
}

.quiz-entry--runway .landing-section--testimonial .landing-section-item h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 620;
  line-height: 1.35;
}

.quiz-entry--runway .landing-section--possibilities .landing-section-items {
  counter-reset: runway-possibility;
}

.quiz-entry--runway .landing-section--possibilities .landing-section-item {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  align-items: center;
  background: transparent;
}

.quiz-entry--runway .landing-section--possibilities .landing-section-item::before {
  counter-increment: runway-possibility;
  content: "0" counter(runway-possibility);
  color: #9bc0cd;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.quiz-entry--runway .landing-section--receive {
  padding-bottom: max(6rem, calc(4.5rem + env(safe-area-inset-bottom)));
  background: linear-gradient(180deg, #1b1512, #14222a);
}

.quiz-entry--runway .landing-section--receive .landing-section-item {
  padding-left: 2.8rem;
  position: relative;
}

.quiz-entry--runway .landing-section--receive .landing-section-item::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  color: #9bc0cd;
  font-weight: 800;
}

.journey-result-answer {
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-left: 2px solid var(--journey-action);
  color: rgb(245 239 232 / 78%);
  font-size: 0.82rem;
  line-height: 1.4;
}

@media (min-width: 48rem) {
  .quiz-entry--runway .landing-outcome-hero > .wrap {
    padding-bottom: 2rem;
  }

  .quiz-entry--runway .entry-welcome-cta {
    width: fit-content;
    min-width: 18rem;
  }

  .quiz-entry--runway .landing-section-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quiz-entry--runway .landing-section--outcomes .landing-section-items,
  .quiz-entry--runway .landing-section--personalization .landing-section-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .quiz-entry--runway .landing-outcome-copy h1 {
    max-width: 45rem;
    font-size: clamp(4rem, 6.7vw, 6rem);
  }

  .quiz-entry--runway .landing-section > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
    gap: 4rem 6rem;
    align-items: start;
  }

  .quiz-entry--runway .landing-section-items {
    margin-top: 0;
  }

  .quiz-entry--runway .landing-section-cta {
    grid-column: 1 / -1;
    width: min(24rem, 100%);
    margin-top: 0;
  }
}


/* The diagnosis adds answer recognition without pushing the action below a
   short mobile viewport. */
.flow[data-journey="true"] > .journey-result {
  padding-top: clamp(0.7rem, 2vh, 1.1rem);
}

.journey-result .journey-body {
  max-width: 25rem;
  margin-top: 0.55rem;
  color: rgb(245 239 232 / 72%);
  font-size: 0.78rem;
  line-height: 1.38;
}

.journey-result .journey-chart {
  margin-block: 0.7rem;
  padding: 0.7rem;
}

.journey-result .journey-chart-row {
  min-height: 1.9rem;
}


/* ========================================== Reserved real-photo surfaces */
.quiz-entry--runway .landing-section-photo {
  min-height: 13rem;
  aspect-ratio: 4 / 3;
  border: 1px solid rgb(210 227 234 / 14%);
  border-radius: 1.15rem;
  background:
    linear-gradient(145deg, rgb(155 192 205 / 10%), transparent 58%),
    #2c241e;
  box-shadow: 0 1.2rem 2.8rem rgb(0 0 0 / 18%);
}

.journey-photo-slot {
  position: relative;
  min-height: 13.25rem;
  height: 100%;
  border: 1px solid rgb(210 227 234 / 14%);
  border-radius: 1.5rem;
  background:
    linear-gradient(145deg, rgb(155 192 205 / 12%), transparent 55%),
    #2c241e;
  box-shadow: 0 1rem 2.4rem rgb(0 0 0 / 24%);
  opacity: 0;
  transform: translateY(0.35rem);
}

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

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

@media (max-height: 46rem) {
  .journey-photo-slot {
    min-height: 10.5rem;
    border-radius: 1.2rem;
  }

  .journey-story-stage {
    grid-template-rows: minmax(10.5rem, 11rem) auto;
    gap: 0.65rem;
    padding-block: 0.35rem;
  }

  .journey-story-copy .journey-story-evidence {
    padding-block: 0.42rem;
  }
}

@media (min-width: 64rem) {
  .quiz-entry--runway .landing-section-photo {
    aspect-ratio: 4 / 3;
    min-height: 22rem;
  }

  .quiz-entry--runway .landing-section:nth-of-type(even) .landing-section-photo {
    order: 2;
  }
}


@media (max-height: 46rem) {
  .flow[data-journey="true"] > .journey-offer {
    padding-top: 0.55rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

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

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

  .journey-plan-picker {
    gap: 0.5rem;
    margin-block: 0.7rem;
  }

  .journey-plan-card {
    padding-block: 0.72rem;
  }
}

/* Narrow and short phones cannot reserve a fixed absolute-height stack for
   review copy because line wrapping changes each card's height. Return the
   cards to document flow so they can never cover the CTA. */
@media (max-width: 22.5rem), (max-height: 46rem) {
  .flow[data-journey="true"] > .journey-review {
    grid-template-rows: auto auto auto auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .flow[data-journey="true"] > .journey-review > .journey-review-stack {
    min-height: auto;
    display: grid;
    gap: 0.65rem;
    margin-block: 1rem;
  }

  .journey-review-card,
  .journey-review-card[data-review-position] {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
  }

  .journey-review[data-ready="true"] .journey-review-card[data-review-position] {
    animation: none;
  }
}

/* ===================================== Membership offer
   The annual price is expressed in the same monthly unit as the flexible
   option, while the actual charge remains immediately below the action. */
.flow[data-journey="true"] > .journey-offer {
  gap: 0;
  padding-top: clamp(0.72rem, 2vh, 1.15rem);
  text-align: center;
}

.flow[data-journey="true"] > .journey-offer h2 {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(1.55rem, 6.4vw, 2.05rem);
  line-height: 1.02;
}

.journey-offer-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.08rem 0.7rem;
  width: 100%;
  margin-top: clamp(0.58rem, 1.6vh, 0.82rem);
  padding: 0.58rem 0.68rem;
  border: 1px solid rgb(210 227 234 / 20%);
  border-radius: 1rem;
  background:
    linear-gradient(118deg, rgb(210 227 234 / 10%), transparent 60%),
    rgb(20 17 15 / 60%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
  text-align: left;
}

.journey-offer-savings {
  grid-row: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.42rem 0.58rem;
  border-radius: 0.7rem;
  background: #d2e3ea;
  color: #14222a;
  box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 16%);
  white-space: nowrap;
}

.journey-offer-savings i {
  font-size: 0.78rem;
  font-style: normal;
}

.journey-offer-savings b {
  font-size: 0.72rem;
  font-weight: 840;
  letter-spacing: 0.035em;
}

.journey-offer-banner > strong {
  color: #f8f3ed;
  font-size: 0.86rem;
  line-height: 1.15;
}

.journey-offer-banner > small {
  color: rgb(226 216 205 / 72%);
  font-size: 0.68rem;
  line-height: 1.25;
}

.journey-offer .journey-offer-list {
  gap: 0.28rem;
  width: 100%;
  margin: 0.62rem 0 0;
  padding: 0;
}

.journey-offer .journey-offer-list li {
  padding-left: 1.2rem;
  color: rgb(245 239 232 / 86%);
  font-size: clamp(0.75rem, 3.1vw, 0.84rem);
  line-height: 1.3;
}

.journey-offer .journey-offer-list li::before {
  color: #d2e3ea;
}

.journey-offer .journey-plan-picker {
  gap: 0.5rem;
  width: 100%;
  margin: clamp(0.68rem, 1.8vh, 1rem) 0 0;
}

.journey-offer .journey-plan-card {
  min-height: 4rem;
  grid-template-columns: minmax(4.1rem, 0.7fr) minmax(0, 1.3fr);
  grid-template-rows: auto auto;
  gap: 0.12rem 0.55rem;
  padding: 0.72rem 0.82rem 0.72rem 3rem;
  border-color: rgb(210 227 234 / 17%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 4%);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

.journey-offer .journey-plan-mark {
  position: absolute;
  top: 50%;
  left: 0.88rem;
  width: 1.45rem;
  height: 1.45rem;
  display: block;
  border: 2px solid rgb(210 227 234 / 58%);
  border-radius: 50%;
  transform: translateY(-50%);
}

.journey-offer .journey-plan-card[aria-checked="true"] .journey-plan-mark {
  border-color: #d2e3ea;
  background: #d2e3ea;
  box-shadow: inset 0 0 0 0.27rem #25211f;
}

.journey-offer .journey-plan-card:has(.journey-plan-price s) {
  background:
    linear-gradient(118deg, rgb(210 227 234 / 8%), transparent 68%),
    rgb(255 255 255 / 4%);
}

.journey-offer .journey-plan-card[aria-checked="true"] {
  border-color: #d2e3ea;
  background: rgb(210 227 234 / 12%);
  box-shadow: 0 0 0 3px rgb(210 227 234 / 10%), inset 0 1px rgb(255 255 255 / 7%);
}

.journey-offer .journey-plan-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.journey-offer .journey-plan-head strong {
  color: #f5efe8;
  font-size: 0.93rem;
  font-weight: 720;
}

.journey-offer .journey-plan-price {
  justify-content: flex-end;
  gap: 0.28rem;
}

.journey-offer .journey-plan-price s {
  color: rgb(218 206 195 / 52%);
  font-size: 0.76rem;
  text-decoration-color: rgb(235 221 208 / 72%);
  text-decoration-thickness: 1.5px;
}

.journey-offer .journey-plan-price b {
  color: #f8fcff;
  font-size: 1.2rem;
  font-weight: 820;
  letter-spacing: -0.035em;
}

.journey-offer .journey-plan-card:has(.journey-plan-price s) .journey-plan-price b {
  font-size: 1.46rem;
}

.journey-offer .journey-plan-price span {
  color: rgb(226 216 205 / 70%);
  font-size: 0.68rem;
}

.journey-offer .journey-plan-sub {
  color: rgb(226 216 205 / 65%);
  font-size: 0.69rem;
  line-height: 1.2;
}

.journey-offer .journey-plan-card[aria-checked="true"] .journey-plan-sub {
  color: rgb(245 239 232 / 78%);
}

.journey-cancel-anytime {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  margin-top: 0.52rem;
  color: rgb(245 239 232 / 72%);
  font-size: 0.76rem;
  line-height: 1.25;
}

.journey-cancel-anytime::before {
  content: "✓";
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border-radius: 50%;
  background: rgb(210 227 234 / 15%);
  color: #d2e3ea;
  font-size: 0.62rem;
  font-weight: 900;
}

.journey-cancel-anytime strong {
  color: #f5efe8;
  font-weight: 720;
}

.flow[data-journey="true"] > .journey-offer > .journey-next {
  margin-top: auto;
  box-shadow: 0 0.7rem 1.8rem rgb(0 0 0 / 24%);
}

.journey-offer .journey-offer-note {
  max-width: 34rem;
  margin: 0.38rem auto 0;
  color: rgb(226 216 205 / 68%);
  font-size: 0.7rem;
  line-height: 1.28;
  text-align: center;
}

@media (max-height: 46rem) {
  .flow[data-journey="true"] > .journey-offer {
    display: flex;
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .flow[data-journey="true"] > .journey-offer h2 {
    font-size: 1.4rem;
  }

  .journey-offer-banner {
    margin-top: 0.42rem;
    padding-block: 0.46rem;
  }

  .journey-offer .journey-offer-list {
    gap: 0.2rem;
    margin-top: 0.42rem;
  }

  .journey-offer .journey-plan-picker {
    gap: 0.38rem;
    margin-top: 0.48rem;
  }

  .journey-offer .journey-plan-card {
    min-height: 3.5rem;
    padding-block: 0.55rem;
  }

  .journey-offer .journey-plan-card:has(.journey-plan-price s) .journey-plan-price b {
    font-size: 1.3rem;
  }

  .journey-cancel-anytime {
    margin-top: 0.38rem;
  }

  .flow[data-journey="true"] > .journey-offer > .journey-next {
    min-height: 3.2rem;
    margin-top: 0.5rem;
  }
}

@media (max-width: 22.5rem) {
  .journey-offer-banner {
    gap: 0.05rem 0.5rem;
    padding-inline: 0.55rem;
  }

  .journey-offer-savings {
    padding-inline: 0.45rem;
  }

  .journey-offer-savings b,
  .journey-offer-banner > small {
    font-size: 0.64rem;
  }

  .journey-offer .journey-plan-card {
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: 0.1rem 0.35rem;
    padding-right: 0.65rem;
    padding-left: 3rem;
  }

  .journey-offer .journey-plan-price {
    gap: 0.2rem;
  }

  .journey-offer .journey-plan-price s {
    font-size: 0.7rem;
  }

  .journey-offer .journey-plan-price span {
    font-size: 0.62rem;
  }
}

/* ================================================== Text contrast contract
   Runway's hierarchy comes from scale, weight and spacing—not translucent
   type. Keep reading copy opaque so every animated atmosphere and card state
   stays above WCAG AA as the scene behind it changes. */
.journey-question .question-helper,
.journey-goals-intro,
.journey-body,
.journey-story .journey-body,
.journey-result .journey-body {
  color: #e8ded5;
}

/* A full-screen opacity fade briefly composites every otherwise compliant
   label into the background. The scene-specific movement still supplies the
   transition without making readable copy translucent. */
.flow[data-journey="true"] > .screen {
  animation: none;
}

.journey-story-copy,
.journey-schedule-artifact,
.journey-promise-step {
  opacity: 1;
}

.journey-chart-name {
  color: #e1d7ce;
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-signal {
  color: #e8ded5;
}

.journey-chart-row[data-lead="true"] .journey-chart-name {
  color: #ffffff;
}

.journey-chart-tag,
.journey-promise-when {
  color: #d2e3ea;
}

/* CTA copy is dark on the opaque powder-blue action. Disabled actions switch
   to an opaque light label because their surface is deliberately dark. */
.journey-next > span {
  color: #14222a;
}

/* Keep the CTA text leaves on the same opaque surface as their button. The
   pixels are visually identical, while resized mobile captures no longer have
   to infer a transparent span's backdrop between compositor frames. */
.journey-next:not(:disabled):not([aria-disabled="true"]) > span {
  background: var(--journey-action);
}

.journey-next:not(:disabled):not([aria-disabled="true"]):is(:hover, :active) > span {
  background: color-mix(in srgb, var(--journey-action) 92%, #fff);
}

.journey-next:is(:disabled, [aria-disabled="true"]) > span {
  color: #f5efe8;
}

/* A waiting row is communicated by its state glyph and copy, not by fading
   the entire row (which also faded its text below readable contrast). */
.journey-schedule-row[data-state="waiting"] {
  opacity: 1;
}

.journey-schedule-artifact-head small,
.journey-schedule-row-copy small,
.journey-schedule-artifact-foot small,
.journey-schedule-row-index {
  color: #d8cdc3;
}

.journey-schedule-style b,
.journey-schedule-row-copy span,
.journey-schedule-artifact-foot strong {
  color: #e2e9f9;
}

.journey-schedule-artifact-head strong,
.journey-schedule-row-copy strong {
  color: #ffffff;
}

/* The app-level visually-hidden rule precedes this concept sheet. Reassert it
   after the goal-card small-label styles, which otherwise make Select/Selected
   into a painted one-pixel text leaf. */
.journey-goal-copy .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  color: #f5efe8;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Offer cards are dark in every selected state. Use solid secondary ink for
   the live capacity, comparable prices and exact billing disclosure. */
.journey-offer-banner > small,
.journey-offer .journey-offer-list li,
.journey-offer .journey-plan-price span,
.journey-offer .journey-plan-sub,
.journey-offer .journey-plan-card[aria-checked="true"] .journey-plan-sub,
.journey-cancel-anytime,
.journey-offer .journey-offer-note {
  color: #e5dad0;
}

.journey-offer .journey-plan-price s {
  color: #d8cdc3;
  text-decoration-color: #eee2d7;
}
/* ================================================== Offer value qualifier */
.flow[data-journey="true"] > .journey-offer-qualifier {
  justify-content: center;
  padding-top: clamp(2rem, 5.5vh, 3.2rem);
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  text-align: center;
}

.journey-offer-qualifier > h2 {
  max-width: 15ch;
  margin-inline: 0;
  text-align: left;
}

.journey-offer-qualifier-actions {
  width: 100%;
  display: grid;
  gap: 0.72rem;
  margin-top: clamp(2.5rem, 8vh, 4.5rem);
}

.journey-offer-qualifier-actions > .journey-next {
  width: 100%;
  min-height: 4rem;
  margin-top: 0;
  border-radius: 1rem;
  color: var(--journey-action-ink);
  background: var(--journey-action);
  font-size: 1.05rem;
  font-weight: 760;
}

.journey-offer-qualifier-actions .journey-next-arrow {
  display: none;
}

.journey-offer .journey-next-arrow {
  display: none;
}

.journey-offer-qualifier-control {
  width: 100%;
  padding: clamp(1.2rem, 3.5vh, 1.65rem) 1.1rem 1rem;
  display: grid;
  gap: 1rem;
  border: 1px solid var(--journey-line);
  border-radius: 1.15rem;
  background: var(--journey-panel);
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 10%);
}

.journey-offer-qualifier-value {
  color: var(--journey-text);
  font-size: clamp(1.45rem, 6vw, 1.8rem);
  font-weight: 760;
  letter-spacing: -0.03em;
}

.journey-offer-qualifier-range {
  width: 100%;
  min-height: 2.75rem;
  height: 2.75rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: grab;
}

.journey-offer-qualifier-range:active {
  cursor: grabbing;
}

.journey-offer-qualifier-range::-webkit-slider-runnable-track {
  height: 0.55rem;
  border-radius: 999px;
  background:
    linear-gradient(var(--journey-action), var(--journey-action)) 0 / var(--range-progress) 100% no-repeat,
    color-mix(in srgb, var(--journey-text) 22%, transparent);
}

.journey-offer-qualifier-range::-webkit-slider-thumb {
  width: 1.7rem;
  height: 1.7rem;
  margin-top: -0.58rem;
  border: 3px solid var(--journey-text);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--journey-action);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--journey-action) 28%, transparent), 0 0.35rem 0.8rem rgb(0 0 0 / 20%);
}

.journey-offer-qualifier-range::-moz-range-track {
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--journey-text) 22%, transparent);
}

.journey-offer-qualifier-range::-moz-range-progress {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--journey-action);
}

.journey-offer-qualifier-range::-moz-range-thumb {
  width: 1.45rem;
  height: 1.45rem;
  border: 3px solid var(--journey-text);
  border-radius: 50%;
  background: var(--journey-action);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--journey-action) 28%, transparent), 0 0.35rem 0.8rem rgb(0 0 0 / 20%);
}

.journey-offer-qualifier-range:focus-visible {
  outline: 2px solid var(--journey-action);
  outline-offset: 0.35rem;
}

.journey-offer-qualifier-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -0.45rem;
  color: var(--journey-text);
  font-size: 0.75rem;
  font-weight: 650;
}

@media (max-height: 46rem) {
  .journey-offer-qualifier-actions {
    margin-top: 1.8rem;
  }
}