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

.flow[data-journey="true"] {
  --journey-bg: #141426;
  --journey-panel: rgb(28 27 49 / 76%);
  --journey-line: rgb(255 255 255 / 12%);
  --journey-text: #f4f2fa;
  --journey-muted: rgb(169 165 192 / 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: #e0913f;
  --journey-action-ink: #231604;
  /* 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%, #141426 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: #e0913f;
  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: #e0913f;
  background-color: #e0913f;
}

.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, #141426 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: #eda95f;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.journey-choice[aria-checked="true"] {
  border-color: #e0913f;
  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: #e0913f;
  background: #e0913f;
  color: #11162e;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.journey-goal-copy small {
  color: rgb(169 165 192 / 42%);
  font-size: 0.7rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.journey-goal[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--journey-action) 72%, transparent);
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--journey-action) 16%, transparent), transparent 52%),
    linear-gradient(145deg, rgb(31 43 82 / 96%), rgb(22 21 40 / 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: #1f1d38;
  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(169 165 192 / 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(169 165 192 / 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(169 165 192 / 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(169 165 192 / 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(38 35 64 / 97%), rgb(21 20 38 / 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(169 165 192 / 52%); font-size: 0.68rem; letter-spacing: 0.1em; }
.journey-schedule-artifact-head strong { color: #fff; font-size: 0.92rem; }
.journey-schedule-style { min-width: 0; max-width: 54%; display: flex; align-items: center; gap: 0.38rem; padding: 0.34rem 0.5rem; border: 1px solid rgb(126 166 240 / 22%); border-radius: 999px; background: rgb(105 144 220 / 9%); }
.journey-schedule-style i { width: 0.4rem; height: 0.4rem; flex: none; border-radius: 50%; background: #7da5ee; box-shadow: 0 0 0.55rem #7da5ee; }
.journey-schedule-style b { overflow: hidden; color: #cddcff; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }

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

.journey-schedule-row[data-state="waiting"] { opacity: 0.3; }
.journey-schedule-row[data-state="building"] { background: linear-gradient(90deg, rgb(116 154 235 / 12%), transparent); }
.journey-schedule-row[data-state="ready"] { background: linear-gradient(90deg, rgb(111 205 176 / 9%), transparent); }
.journey-schedule-row-index { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 12%); border-radius: 0.5rem; background: rgb(255 255 255 / 4%); color: rgb(169 165 192 / 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(169 165 192 / 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(169 165 192 / 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-diagnosis-note { margin: 0.3rem 0 0; padding: 0; background: transparent; font-size: 0.78rem; line-height: 1.35; }

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

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

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

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

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

/* ===================================== Assessment-specific microvisuals */
.journey-question-cue {
  position: relative;
  width: min(100%, 20.5rem);
  height: 4.75rem;
  flex: none;
  margin: 0.85rem auto 0;
  color: 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 { 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(169 165 192 / 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;
  }
}

/* ========================================== No Contact 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);
}

/* Reserved real-photo frame. The shared helper keeps this neutral until a
   commissioned asset is supplied, then the same crop holds without reflow. */
.journey-photo-slot {
  width: 100%;
  height: 100%;
  min-height: 13.25rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 1.5rem;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%)),
    #1c1b31;
  box-shadow: 0 1rem 2.4rem rgb(0 0 0 / 26%);
  opacity: 0;
  transform: translateY(0.4rem);
}

.journey-story[data-ready="true"] .journey-photo-slot {
  animation: journey-photo-arrive 280ms ease-out both;
}

.journey-photo-slot .photo-slot-reserve {
  content: "";
  display: block;
  width: 100%;
  min-height: inherit;
  background:
    radial-gradient(circle at 72% 25%, rgb(224 145 63 / 15%), transparent 35%),
    linear-gradient(160deg, #282540, #17162a);
}

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

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

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

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

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

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

/* 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: 10.25rem;
    border-radius: 1.2rem;
  }

  .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
   Eleven night worlds, one per section. Deep indigo throughout, so a section
   change reads as the light shifting in the same room. The amber action colour
   never changes, and nothing here is ever red. */
.flow[data-journey="true"] { --atmosphere-chrome: rgb(20 20 38 / 66%); }

.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: arriving, one lamp on */
.flow[data-journey="true"][data-atmosphere="arrival"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(224 145 63 / 12%), transparent 44%),
    linear-gradient(168deg, #1a1930 0%, #141426 58%, #1a1930 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%, #141426 47%);
  filter: none; opacity: 0.88; animation: none;
}

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

/* night: the hour it gets hard */
.flow[data-journey="true"][data-atmosphere="night"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(142 127 196 / 14%), transparent 44%),
    linear-gradient(168deg, #181733 0%, #12111f 58%, #181733 100%);
}

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

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

/* distance: space opening up */
.flow[data-journey="true"][data-atmosphere="distance"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(127 160 196 / 12%), transparent 44%),
    linear-gradient(168deg, #171a33 0%, #121424 58%, #171a33 100%);
}

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

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

/* evening: the empty hour, warmed */
.flow[data-journey="true"][data-atmosphere="evening"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(224 145 63 / 14%), transparent 44%),
    linear-gradient(168deg, #1c1930 0%, #151223 58%, #1c1930 100%);
}

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

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

/* reading: the pattern being read */
.flow[data-journey="true"][data-atmosphere="reading"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(111 164 140 / 12%), transparent 44%),
    linear-gradient(168deg, #161a30 0%, #111420 58%, #161a30 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%, #111420 47%);
  filter: none; opacity: 0.88; animation: none;
}

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

/* insight: the argument, low light */
.flow[data-journey="true"][data-atmosphere="insight"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(196 131 155 / 13%), transparent 44%),
    linear-gradient(168deg, #1e1933 0%, #161122 58%, #1e1933 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%, #161122 47%);
  filter: none; opacity: 0.88; animation: none;
}

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

/* weeks: a week that holds */
.flow[data-journey="true"][data-atmosphere="weeks"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(111 164 140 / 12%), transparent 44%),
    linear-gradient(168deg, #181d31 0%, #121722 58%, #181d31 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%, #121722 47%);
  filter: none; opacity: 0.88; animation: none;
}

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

/* promise: a quiet commitment */
.flow[data-journey="true"][data-atmosphere="promise"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(155 143 199 / 13%), transparent 44%),
    linear-gradient(168deg, #1d1a34 0%, #161326 58%, #1d1a34 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%, #161326 47%);
  filter: none; opacity: 0.88; animation: none;
}

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

/* drafting: the plan being drawn */
.flow[data-journey="true"][data-atmosphere="drafting"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(127 160 196 / 13%), transparent 44%),
    linear-gradient(168deg, #151b2e 0%, #101520 58%, #151b2e 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%, #101520 47%);
  filter: none; opacity: 0.88; animation: none;
}

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

/* offer: one light on the decision */
.flow[data-journey="true"][data-atmosphere="offer"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(224 145 63 / 16%), transparent 44%),
    linear-gradient(168deg, #211b2f 0%, #171120 58%, #211b2f 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%, #171120 47%);
  filter: none; opacity: 0.88; animation: none;
}

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

/* cancel: the light drains a little */
.flow[data-journey="true"][data-atmosphere="cancel"] {
  --journey-panel: rgb(28 27 49 / 82%);
  background:
    radial-gradient(ellipse at 14% 6%, rgb(169 165 192 / 8%), transparent 44%),
    linear-gradient(168deg, #181722 0%, #12111a 58%, #181722 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%, #12111a 47%);
  filter: none; opacity: 0.88; animation: none;
}

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

@keyframes journey-night-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(169 165 192 / 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 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 */
@media (max-height: 46rem) {
  .journey-photo-slot {
    min-height: 10.25rem;
  }

  .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 { display: none; }
  .journey-plan-focus { padding: 0.56rem 0.75rem; }

  .flow[data-journey="true"] > .journey-plan-build:has(.journey-plan-focus) {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }

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

/* ================================================ No Contact question cues
   Ten drawn objects from this funnel's own night: a door, a path, two
   bubbles, a table, a phone, a compose box, a street, a window, a lamp,
   some cups. No rails, dials, gauges or dot grids.

   Colour never appears as a literal inside an SVG. Every stroke and fill
   resolves through one of these seven classes, so the whole set retints
   with the journey. */

.qcue-art > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.qcue-art .nc-line,
.qcue-art .nc-mut,
.qcue-art .nc-ink,
.qcue-art .nc-act {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qcue-art .nc-line { stroke: var(--journey-line); stroke-width: 1.6; }
.qcue-art .nc-mut { stroke: var(--journey-muted); stroke-width: 1.7; }
.qcue-art .nc-ink { stroke: var(--journey-text); stroke-width: 2; }
.qcue-art .nc-act { stroke: var(--journey-action); stroke-width: 2.3; }
.qcue-art .nc-fill-mut { fill: var(--journey-muted); stroke: none; }
.qcue-art .nc-fill-acc { fill: var(--journey-accent); stroke: none; }
.qcue-art .nc-fill-act { fill: var(--journey-action); stroke: none; }

/* Five shared entrances. Each names only the state it starts from, so with
   `both` the resting state is exactly the pose the artwork was drawn in and
   nothing has to be restated in a `to` block. */
@keyframes nc-draw { to { stroke-dashoffset: 0; } }
@keyframes nc-rise { from { opacity: 0; transform: translateY(7px); } }
@keyframes nc-drop { from { opacity: 0; transform: translateY(-7px); } }
@keyframes nc-appear { from { opacity: 0; transform: scale(0.95); } }
@keyframes nc-cue-fade { from { opacity: 0; } }

/* One reduced-motion block covering every class authored for this funnel.
   It matches the ten cue roots and their nccue- children and nothing else,
   so the static transform attribute that tilts the phone in nccue-wake
   survives while every animated offset is cleared to a plain fade. */
@media (prefers-reduced-motion: reduce) {
  .journey-question[data-ready="true"] [class*="nccue-"],
  .journey-question[data-ready="true"] [class*="nccue-"] [class*="nccue-"] {
    animation: nc-cue-fade 240ms var(--ease) both !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

.nccue-bolt-floor { stroke-dasharray: 240; stroke-dashoffset: 240; }
.nccue-bolt-jamb { stroke-dasharray: 66; stroke-dashoffset: 66; }

.journey-question[data-ready="true"] .nccue-bolt .nccue-bolt-floor { animation: nc-draw 380ms 80ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-bolt .nccue-bolt-door { animation: nc-rise 420ms 150ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-bolt .nccue-bolt-jamb { animation: nc-draw 300ms 220ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-bolt .nccue-bolt-throw { animation: nccue-bolt-shoot 400ms 300ms var(--ease-in-out) both; }

/* The bolt starts retracted inside the door, then crosses into the jamb. */
@keyframes nccue-bolt-shoot {
  from { opacity: 0; transform: translateX(-18px); }
  40% { opacity: 1; }
}

.nccue-gap-span { stroke-dasharray: 52; stroke-dashoffset: 52; }

.journey-question[data-ready="true"] .nccue-gap .nccue-gap-them { animation: nc-rise 380ms 90ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-gap .nccue-gap-span { animation: nc-draw 420ms 170ms var(--ease-in-out) both; }
.journey-question[data-ready="true"] .nccue-gap .nccue-gap-you { animation: nccue-gap-away 440ms 250ms var(--ease) both; }

/* Your bubble arrives from up near theirs and settles out at the far end. */
@keyframes nccue-gap-away {
  from { opacity: 0; transform: translate(-14px, -8px); }
}

.nccue-lift-table { stroke-dasharray: 250; stroke-dashoffset: 250; }
/* The slab is drawn already tilted and pivots on the corner still resting on
   the table, so rotate(0) is the pose the artwork was authored in. */
.nccue-lift-slab { transform-box: fill-box; transform-origin: 98.5% 100%; }
.nccue-lift-spill { transform-box: fill-box; transform-origin: 100% 50%; }

.journey-question[data-ready="true"] .nccue-liftoff .nccue-lift-table { animation: nc-draw 360ms 80ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-liftoff .nccue-lift-slab { animation: nccue-lift-tilt 480ms 150ms var(--ease-in-out) both; }
.journey-question[data-ready="true"] .nccue-liftoff .nccue-lift-spill { animation: nccue-lift-spill-in 300ms 230ms var(--ease) both; }

@keyframes nccue-lift-tilt {
  from { opacity: 0; transform: rotate(-10deg); }
  30% { opacity: 1; }
}

@keyframes nccue-lift-spill-in {
  from { opacity: 0; transform: scaleX(0.92); }
}

/* The casual tilt lives on a transform attribute on an unclassed group, so no
   rule here, including the reduced-motion reset, disturbs it. */
.nccue-wake-table { stroke-dasharray: 288; stroke-dashoffset: 288; }

.journey-question[data-ready="true"] .nccue-wake .nccue-wake-table { animation: nc-draw 360ms 80ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-wake .nccue-wake-body { animation: nc-rise 420ms 160ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-wake .nccue-wake-screen { animation: nccue-wake-on 320ms 240ms var(--ease) both; }

/* The content is there before the phone has finished settling. */
@keyframes nccue-wake-on {
  from { opacity: 0; transform: translateY(5px); }
}

.nccue-draft-field { transform-box: fill-box; transform-origin: 50% 50%; }
.nccue-draft-send { transform-box: fill-box; transform-origin: 50% 50%; }
.nccue-draft-l1 { stroke-dasharray: 160; stroke-dashoffset: 160; }
.nccue-draft-l2 { stroke-dasharray: 134; stroke-dashoffset: 134; }
.nccue-draft-l3 { stroke-dasharray: 68; stroke-dashoffset: 68; }

.journey-question[data-ready="true"] .nccue-draft .nccue-draft-field { animation: nc-appear 400ms 80ms var(--ease) both; }
/* The three lines type themselves out, shortest last. */
.journey-question[data-ready="true"] .nccue-draft .nccue-draft-l1 { animation: nc-draw 300ms 150ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-draft .nccue-draft-l2 { animation: nc-draw 280ms 210ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-draft .nccue-draft-l3 { animation: nc-draw 260ms 270ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-draft .nccue-draft-caret { animation: nc-rise 260ms 340ms var(--ease) both; }
/* Send arrives last and keeps the inactive stroke: it is never pressed. */
.journey-question[data-ready="true"] .nccue-draft .nccue-draft-send { animation: nc-appear 320ms 400ms var(--ease) both; }

.nccue-dusk-ground { stroke-dasharray: 300; stroke-dashoffset: 300; }
.nccue-dusk-window { transform-box: fill-box; transform-origin: 50% 100%; }

.journey-question[data-ready="true"] .nccue-dusk .nccue-dusk-ground { animation: nc-draw 360ms 80ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-dusk .nccue-dusk-roofs { animation: nc-rise 420ms 150ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-dusk .nccue-dusk-sun { animation: nccue-dusk-set 460ms 230ms var(--ease-in-out) both; }
.journey-question[data-ready="true"] .nccue-dusk .nccue-dusk-window { animation: nc-appear 280ms 310ms var(--ease) both; }

/* The sun comes down into the gap between the buildings, not up. */
@keyframes nccue-dusk-set {
  from { opacity: 0; transform: translateY(-16px); }
  35% { opacity: 1; }
}

/* The blind is drawn overlong above the pane and clipped by the frame, so it
   travels on transform alone and never resizes. */
.nccue-shutter-frame { transform-box: fill-box; transform-origin: 50% 100%; }

.journey-question[data-ready="true"] .nccue-shutter .nccue-shutter-frame { animation: nc-appear 400ms 80ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-shutter .nccue-shutter-view { animation: nc-rise 340ms 160ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-shutter .nccue-shutter-sill { animation: nc-rise 320ms 230ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-shutter .nccue-shutter-blind { animation: nccue-shutter-lower 480ms 300ms var(--ease-in-out) both; }

@keyframes nccue-shutter-lower {
  from { opacity: 0; transform: translateY(-34px); }
  25% { opacity: 1; }
}

.nccue-lamp-table { stroke-dasharray: 240; stroke-dashoffset: 240; }
/* The cone opens downward from the shade it hangs off. */
.nccue-lamp-cone { transform-box: fill-box; transform-origin: 50% 0%; }

.journey-question[data-ready="true"] .nccue-lamp .nccue-lamp-table { animation: nc-draw 360ms 80ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-lamp .nccue-lamp-head { animation: nc-drop 400ms 150ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-lamp .nccue-lamp-cone { animation: nccue-lamp-on 380ms 220ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-lamp .nccue-lamp-book { animation: nc-rise 360ms 300ms var(--ease) both; }

@keyframes nccue-lamp-on {
  from { opacity: 0; transform: scaleY(0.94); }
}

.nccue-cups-top { stroke-dasharray: 224; stroke-dashoffset: 224; }

.journey-question[data-ready="true"] .nccue-cups .nccue-cups-top { animation: nc-draw 360ms 80ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-cups .nccue-cups-a { animation: nc-rise 360ms 160ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-cups .nccue-cups-b { animation: nccue-cups-join 380ms 240ms var(--ease) both; }
.journey-question[data-ready="true"] .nccue-cups .nccue-cups-c { animation: nc-rise 340ms 320ms var(--ease) both; }

/* The second cup is set down from the side, the way someone joining does it. */
@keyframes nccue-cups-join {
  from { opacity: 0; transform: translate(10px, 8px); }
}

.nccue-corridor .nccue-corridor-floor { stroke-dasharray: 300; stroke-dashoffset: 300; }
.nccue-corridor .nccue-corridor-ceil { stroke-dasharray: 290; stroke-dashoffset: 290; }
.nccue-corridor .nccue-corridor-frame { opacity: 0; }
.nccue-corridor .nccue-corridor-light { opacity: 0; transform-box: fill-box; transform-origin: center bottom; }

/* Floor first, then ceiling, so the perspective builds before the doorway that
   sits at its vanishing point. */
.journey-question[data-ready="true"] .nccue-corridor .nccue-corridor-floor {
  animation: nc-draw 400ms 60ms var(--ease) both;
}

.journey-question[data-ready="true"] .nccue-corridor .nccue-corridor-ceil {
  animation: nc-draw 400ms 130ms var(--ease) both;
}

.journey-question[data-ready="true"] .nccue-corridor .nccue-corridor-frame {
  animation: nc-rise 300ms 210ms var(--ease) both;
}

/* The month is depth in her own flat with the light on at the far end, rather
   than a line climbing to a flag. */
.journey-question[data-ready="true"] .nccue-corridor .nccue-corridor-light {
  animation: nccue-corridor-warm 400ms 280ms var(--ease) both;
}

@keyframes nccue-corridor-warm {
  from { opacity: 0; transform: scaleY(0.9); }
  to { opacity: 1; transform: none; }
}


/* No Contact simplified photo-led landing */
body[data-page="landing"] .landing-outcome-hero,
body[data-page="landing"] .landing-outcome-hero > .wrap {
  min-height: 100svh;
}

body[data-page="landing"] .landing-outcome-hero > .wrap {
  padding-top: max(1.25rem, calc(env(safe-area-inset-top) + 0.75rem));
  padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
}

body[data-page="landing"] .landing-outcome-hero .entry-scene::after {
  background: linear-gradient(180deg, rgb(7 8 24 / 26%) 0%, rgb(7 8 24 / 18%) 42%, rgb(7 8 24 / 92%) 84%, #111126 100%);
}

body[data-page="landing"] .landing-outcome-copy {
  max-width: 29rem;
  margin-top: auto;
}

body[data-page="landing"] .landing-outcome-copy h1 {
  margin-top: 0;
  color: #fff;
  font-size: clamp(2.35rem, 10.5vw, 3.45rem);
  line-height: 0.98;
  text-shadow: 0 2px 24px rgb(0 0 0 / 55%);
}

body[data-page="landing"] .landing-outcome-copy .lede {
  max-width: 24rem;
  margin-top: 0.85rem;
  color: rgb(255 255 255 / 88%);
  font-size: clamp(1rem, 4.2vw, 1.15rem);
  line-height: 1.4;
  text-shadow: 0 1px 16px rgb(0 0 0 / 55%);
}

body[data-page="landing"] .entry-welcome-cta {
  position: static;
  justify-self: start;
  min-width: 10rem;
  margin-top: 1.15rem;
  color: #231604;
  background: #e9a55f;
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 30%);
}

body[data-page="landing"] .entry-welcome-cta span:last-child {
  color: #fff;
  background: #231604;
}

body[data-page="landing"] .landing-section {
  border-top: 1px solid rgb(255 255 255 / 9%);
}

body[data-page="landing"] .landing-section-body {
  max-width: 32rem;
  color: #b9b4c9;
}

body[data-page="landing"] .landing-section-item h3 {
  color: #f4f2fa;
  font-size: 1rem;
}

body[data-page="landing"] .landing-section-photo {
  min-height: 14rem;
  border: 1px solid rgb(255 255 255 / 14%);
  background: #211f36;
}

body[data-page="landing"] .landing-section-photo .photo-slot-reserve {
  background:
    radial-gradient(circle at 72% 24%, rgb(224 145 63 / 14%), transparent 34%),
    linear-gradient(150deg, #2b2842, #19182c);
}

@media (max-height: 46rem) {
  body[data-page="landing"] .landing-outcome-copy h1 { font-size: 2.25rem; }
  body[data-page="landing"] .landing-outcome-copy .lede { margin-top: 0.6rem; font-size: 0.98rem; }
  body[data-page="landing"] .entry-welcome-cta { min-height: 3.25rem; margin-top: 0.8rem; }
}

@media (min-width: 48rem) {
  body[data-page="landing"] .landing-section { padding-block: 5rem; }
}

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

/* ===================================== Offer decision
   Capacity is live, the annual rate is expressed in comparable monthly terms,
   and the exact charge stays immediately below the action. */
.journey-offer > h2 {
  margin-top: 0;
}

.journey-offer-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.28rem 0.75rem;
  width: 100%;
  margin-top: clamp(0.75rem, 2vh, 1rem);
  padding: 0.68rem 0.78rem;
  border: 1px solid rgb(224 145 63 / 30%);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 8% 10%, rgb(224 145 63 / 16%), transparent 52%),
    rgb(255 255 255 / 5%);
  text-align: left;
  box-shadow: inset 0 1px rgb(255 255 255 / 7%);
}

.journey-offer-savings {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #ffd7a5;
  font-size: 0.73rem;
}

.journey-offer-savings i {
  color: #e7a760;
  font-style: normal;
}

.journey-offer-savings b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-offer-banner > strong {
  color: #fff7ed;
  font-size: 0.86rem;
  font-weight: 780;
  white-space: nowrap;
}

.journey-offer-banner > small {
  grid-column: 1 / -1;
  color: rgb(255 243 229 / 78%);
  font-size: 0.72rem;
  line-height: 1.35;
}

.journey-offer .journey-offer-list {
  margin-top: clamp(0.72rem, 1.8vh, 0.95rem);
}

.journey-offer .journey-plan-picker {
  gap: 0.52rem;
  margin-block: clamp(0.72rem, 2vh, 1rem) 0.55rem;
}

.journey-offer .journey-plan-card {
  min-height: 4.35rem;
  padding: 0.72rem 0.82rem 0.72rem 3rem;
  border-color: rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 6%);
}

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

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

.journey-offer .journey-plan-card[aria-checked="true"] {
  border-color: #e7a760;
  background: rgb(224 145 63 / 15%);
  box-shadow: 0 0 0 2px rgb(224 145 63 / 13%);
}

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

.journey-offer .journey-plan-head strong {
  color: #fff8f0;
}

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

.journey-offer .journey-plan-price s {
  color: rgb(255 236 216 / 62%);
  font-size: 0.78rem;
  text-decoration-thickness: 1.5px;
}

.journey-offer .journey-plan-price b {
  color: #fff;
  font-size: 1.16rem;
}

.journey-offer .journey-plan-card:has(.journey-plan-price s) .journey-plan-price b {
  font-size: 1.34rem;
  letter-spacing: -0.03em;
}

.journey-offer .journey-plan-price span,
.journey-offer .journey-plan-sub {
  color: rgb(255 243 229 / 76%);
}

.journey-cancel-anytime {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  margin: 0 0 0.58rem;
  color: rgb(255 243 229 / 78%);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: center;
}

.journey-cancel-anytime::before {
  content: "✓";
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border-radius: 50%;
  background: rgb(224 145 63 / 16%);
  color: #ffd7a5;
  font-size: 0.62rem;
  font-weight: 900;
}

.journey-cancel-anytime strong {
  color: #fff8f0;
}

.journey-offer > .journey-offer-note {
  margin: 0.45rem 0 0;
  color: rgb(255 243 229 / 72%);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
}

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

  .journey-offer-banner,
  .journey-offer .journey-plan-card {
    padding-block: 0.58rem;
  }

  .journey-offer .journey-plan-picker {
    margin-top: 0.6rem;
  }

  .journey-offer > .journey-next {
    margin-top: 0;
  }
}

/* ===================================== Contrast stability
   Small supporting copy still carries hierarchy through size and spacing; it
   does not need translucent paint. Keeping these colours opaque also prevents
   an entrance animation from briefly dropping real text below AA. */
.flow[data-journey="true"] {
  --journey-muted: #c8c5d4;
}

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

.journey-question .question-helper,
.journey-body,
.journey-result-intro,
.journey-goals-intro,
.journey-quote cite,
.journey-pledge-nights-label,
.journey-signature-hint {
  color: #c8c5d4;
}

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

.journey-chart-tag {
  color: #ffd2a3;
}

/* Inactive analysis signals are still meaningful status labels. The shared
   treatment intentionally dimmed them to 37% white, which fails AA while the
   analysis is running. State remains visible through border/fill/checkmark. */
.flow[data-journey="true"][data-screen="analysis"] .analysis-signal {
  color: #c8c5d4;
}

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

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

.journey-next > span {
  background: var(--journey-action);
  color: #231604;
  opacity: 1;
}

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

.journey-next:disabled,
.journey-next[aria-disabled="true"] {
  border-color: #66647a;
  background: #454359;
  color: #f4f2fa;
  opacity: 1;
}

.journey-next:disabled > span,
.journey-next[aria-disabled="true"] > span {
  background: #454359;
  color: #f4f2fa;
}

.journey-goal-copy small,
.journey-goal .visually-hidden,
.journey-goal-week-preview span {
  color: #c8c5d4;
}

.journey-goal-roadmap-item,
.journey-goal-week-preview {
  opacity: 1;
}

.journey-schedule-card,
.journey-schedule-artifact,
.journey-schedule-row[data-state="waiting"] {
  opacity: 1;
}

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

.journey-schedule-artifact-foot strong {
  color: #f1f0f6;
}

.journey-plan-focus > small {
  color: #c9f3e4;
}

.journey-promise-step {
  opacity: 1;
}

.journey-promise-when {
  color: #ffd2a3;
}

.journey-offer-banner > small,
.journey-offer .journey-plan-price span,
.journey-offer .journey-plan-sub,
.journey-cancel-anytime,
.journey-offer > .journey-offer-note {
  color: #e0dce2;
}

.journey-offer .journey-plan-price s {
  color: #d8c9bc;
}

/* A five-row safety question is taller than the first-generation iPhone
   viewport. Keep the prompt at the top and let the answer list scroll in
   document order; centring an over-tall flex stack clipped the helper above
   the viewport. */
@media (max-height: 46rem) {
  .flow[data-journey="true"] > .journey-question {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .journey-question .options,
  .journey-question:has(.journey-question-cue) .options {
    margin-block: 1rem 0;
    padding-block: 0;
  }
}

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