/* ================================================== Steady Dog journey */
/* ================================================== Steady Dog outcome landing */
body[data-page="landing"] {
  background: #f1f6f2;
}

.landing-outcome-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgb(29 109 146 / 18%), transparent 32%),
    linear-gradient(150deg, #f7fbf8 0%, #e7f0e9 58%, #dce9ef 100%);
}

.landing-outcome-hero h1 {
  max-width: 13ch;
  text-wrap: balance;
}

.landing-outcome-hero .entry-welcome-cta {
  position: relative;
  bottom: auto;
  width: 100%;
  margin-top: 1rem;
}

.landing-scroll-cue {
  color: inherit;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.landing-section {
  position: relative;
  overflow: hidden;
}

.landing-section > .wrap {
  position: relative;
  z-index: 1;
}

.landing-section h2 {
  max-width: 18ch;
  text-wrap: balance;
}

.landing-section-items {
  display: grid;
  gap: 0.8rem;
}

.landing-section-item {
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgb(18 37 27 / 10%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 1rem 2.5rem rgb(20 82 46 / 7%);
}

.landing-section-item h3 {
  color: #12251b;
}

.landing-section--why_failed {
  background: #12251b;
  color: #f1f6f2;
}

.landing-section--why_failed h2,
.landing-section--why_failed .landing-section-item h3 {
  color: #fff;
}

.landing-section--why_failed .eyebrow,
.landing-section--why_failed .landing-section-body,
.landing-section--why_failed .landing-section-item p {
  color: rgb(241 246 242 / 78%);
}

.landing-section--why_failed .landing-section-item {
  border-color: rgb(255 255 255 / 12%);
  background: rgb(255 255 255 / 7%);
  box-shadow: none;
}

.landing-section--why_different,
.landing-section--personalization,
.landing-section--receive {
  background: #e7f0e9;
}

.landing-section--testimonial .landing-section-items {
  counter-reset: owner-story;
}

.landing-section--testimonial .landing-section-item {
  counter-increment: owner-story;
}

.landing-section--testimonial .landing-section-item::before {
  content: counter(owner-story, decimal-leading-zero);
  display: block;
  margin-bottom: 0.65rem;
  color: #1c6b3d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.landing-section--receive .landing-section-item {
  border-color: rgb(28 107 61 / 18%);
}

@media (min-width: 48rem) {
  .landing-section-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-section--why_failed .landing-section-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.flow[data-journey="true"] {
  --journey-bg: #f1f6f2;
  --journey-panel: rgb(255 255 255 / 82%);
  --journey-line: rgb(18 37 27 / 12%);
  --journey-text: #12251b;
  --journey-muted: rgb(77 104 90 / 92%);
  /* One gutter for the whole journey. The back chevron, the progress rail,
     the content and the action all resolve to the same two vertical lines. */
  --journey-gutter: 1.25rem;
  /* One primary-action colour for all 45 screens. Warm dark ink on it reads
     at 8.2:1, so the most important control is also the most legible one. */
  --journey-action: #1c6b3d;
  --journey-action-ink: #ffffff;
  position: relative;
  isolation: isolate;
  color: var(--journey-text);
  background:
    radial-gradient(circle at 12% 12%, rgb(60 93 174 / 30%), transparent 31%),
    radial-gradient(circle at 88% 82%, rgb(28 107 61 / 17%), transparent 35%),
    linear-gradient(155deg, #111733 0%, #f1f6f2 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: #12251b;
  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(18 37 27 / 63%);
  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: #12251b;
}

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

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

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

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

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

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

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

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

.journey-question .question-prompt {
  max-width: 24rem;
  margin: clamp(1rem, 4vh, 2rem) auto 0;
  color: #12251b;
  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(18 37 27 / 63%);
  background: var(--journey-panel);
  box-shadow: inset 0 1px rgb(18 37 27 / 4%), 0 0.8rem 1.8rem rgb(18 37 27 / 4%);
  font-size: clamp(0.82rem, 3.4vw, 0.96rem);
  line-height: 1.25;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.journey-question .option:hover {
  border-color: rgb(28 107 61 / 55%);
}

.journey-question .option .dot {
  width: 1.15rem;
  height: 1.15rem;
  border-color: rgb(18 37 27 / 16%);
}

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

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

.flow[data-journey="true"][data-screen="analysis"] {
  background:
    radial-gradient(circle at 50% 41%, rgb(38 132 78 / 24%), transparent 34%),
    #07170e;
}

.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: #d9f8e5;
}

.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(126 226 166 / 12%), transparent 58%),
    #102b1c;
  box-shadow:
    inset 0 0 0 1px rgb(18 37 27 / 4%),
    inset 0 0 2.5rem rgb(29 109 146 / 8%),
    0 1.6rem 4.4rem rgb(18 37 27 / 14%),
    0 0 3rem rgb(63 109 212 / 13%);
}

.flow[data-journey="true"] .analysis-ring::before {
  background: radial-gradient(circle, rgb(29 109 146 / 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%, #12251b);
  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: rgb(255 255 255 / 18%);
  background: #102b1c;
}

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

.flow[data-journey="true"] .analysis[data-complete="true"] h2 {
  color: #f4fbf7;
  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%, #12251b);
  font-size: 0.8rem;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.journey-screen h2 {
  color: #12251b;
  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(18 37 27 / 12%);
}

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

.journey-result h3 {
  max-width: 24rem;
  margin-top: 0.8rem;
  color: #12251b;
  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(18 37 27 / 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(18 37 27 / 63%);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

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

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

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

.journey-chart-tag {
  color: color-mix(in srgb, var(--journey-action) 84%, #12251b);
  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(18 37 27 / 63%);
  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(18 37 27 / 15%);
  border-radius: 50%;
  color: transparent;
  font-size: 0.72rem;
}

.journey-choice[aria-checked="true"] {
  border-color: #1c6b3d;
  background: rgb(28 107 61 / 14%);
  box-shadow: 0 0 1.6rem rgb(28 107 61 / 11%);
}

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

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

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

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

.journey-goal[aria-pressed="true"] {
  border-color: #7aaefc;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
  box-shadow: 0 0 1.4rem rgb(78 122 211 / 15%);
}

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

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

.journey-review-count {
  margin-top: 0.35rem;
  color: #1c6b3d;
  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(18 37 27 / 4%);
  text-align: left;
}

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

.journey-quote p {
  margin-top: 0.35rem;
  color: rgb(18 37 27 / 63%);
  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(28 107 61 / 28%);
  border-radius: 1.1rem;
  background: rgb(28 107 61 / 8%);
  color: #12251b;
  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(18 37 27 / 9%);
  touch-action: none;
}

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

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

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

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

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

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

.journey-card-head {
  background: rgb(18 37 27 / 4%);
  color: #12251b;
  font-size: 0.74rem;
}

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

.journey-card-row + .journey-card-row {
  border-top: 1px solid rgb(18 37 27 / 4%);
}

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

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

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

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

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

.journey-result-revelation {
  margin-top: 0.7rem;
  padding: 0.72rem 0.82rem;
  border-radius: 0.9rem;
  background: rgb(118 201 141 / 12%);
  color: rgb(18 37 27 / 90%);
  font-size: 0.76rem;
  line-height: 1.3;
}

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

.journey-offer-eyebrow {
  color: #175a79;
  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, #1c6b3d, #2f8a55);
  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(28 107 61 / 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(18 37 27 / 63%);
  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(28 107 61 / 33%);
  border-radius: 0.9rem;
  background: rgb(28 107 61 / 8%);
  text-align: left;
}

.journey-price span {
  color: rgb(18 37 27 / 63%);
  font-size: 0.7rem;
}

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

.journey-price del {
  color: rgb(18 37 27 / 26%);
  font-size: 0.72rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.journey-goal[data-goal="walk"] { --goal-color: #c98a2e; }
.journey-goal[data-goal="leash"] { --goal-color: #85aefe; }
.journey-goal[data-goal="door"] { --goal-color: #f19483; }
.journey-goal[data-goal="settle"] { --goal-color: #9f91ef; }
.journey-goal[data-goal="guests"] { --goal-color: #77cfb6; }
.journey-goal[data-goal="joy"] { --goal-color: #8ec4e8; }
.journey-goal-roadmap-item[data-goal="walk"] { --goal-color: #c98a2e; }
.journey-goal-roadmap-item[data-goal="leash"] { --goal-color: #85aefe; }
.journey-goal-roadmap-item[data-goal="door"] { --goal-color: #f19483; }
.journey-goal-roadmap-item[data-goal="settle"] { --goal-color: #9f91ef; }
.journey-goal-roadmap-item[data-goal="guests"] { --goal-color: #77cfb6; }
.journey-goal-roadmap-item[data-goal="joy"] { --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: #12251b;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.18;
}

.journey-goal-copy small {
  color: rgb(77 104 90 / 90%);
  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(18 37 27 / 4%);
}

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

.journey-goal-symbol--walk 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--walk 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--leash i:first-child,
.journey-goal-symbol--settle i:first-child {
  width: 1.05rem;
  height: 1.05rem;
  left: 0.57rem;
  top: 0.48rem;
  border-radius: 50%;
  background: currentColor;
}

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

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

.journey-goal-symbol--door 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--door 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--guests 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--guests 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--joy i:first-child,
.journey-goal-symbol--joy i:nth-child(2) {
  width: 0.58rem;
  height: 0.58rem;
  top: 0.48rem;
  border-radius: 50%;
  background: currentColor;
}

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

@keyframes goal-check-pop {
  from { opacity: 0; transform: scale(0.65); }
  to { opacity: 1; transform: none; }
}

@keyframes goal-row-in {
  from { opacity: 0; transform: translateY(0.35rem); }
  to { opacity: 1; transform: none; }
}

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

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

.journey-goal[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--journey-action) 72%, transparent);
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--journey-action) 16%, transparent), transparent 52%),
    linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
  box-shadow: inset 0 1px rgb(18 37 27 / 6%), 0 0 1.5rem rgb(18 37 27 / 8%);
}

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

.journey-goal[aria-pressed="true"] .journey-goal-selected-mark::before {
  animation: goal-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(18 37 27 / 5%);
  border-radius: 0.9rem;
  background: linear-gradient(100deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
  opacity: 0;
  transform: translateX(0.75rem);
}

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

.journey-goal-roadmap-step {
  position: relative;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 2px solid color-mix(in srgb, var(--journey-action) 62%, transparent);
  border-radius: 50%;
  background: #fdfbf8;
  color: #12251b;
  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(18 37 27 / 6%);
  border-radius: 0.95rem;
  background: rgb(18 37 27 / 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%, #12251b);
  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: #12251b; font-size: 0.86rem; }
.journey-goal-week-preview span { color: rgb(77 104 90 / 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(18 37 27 / 5%);
  border-radius: 0.85rem;
  background: rgb(18 37 27 / 4%);
}

.journey-review-summary strong { color: #12251b; font-size: 0.76rem; }
.journey-review-summary > span:last-child { color: rgb(77 104 90 / 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(18 37 27 / 7%);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
  box-shadow: 0 1.15rem 2.5rem rgb(18 37 27 / 11%), inset 0 1px rgb(18 37 27 / 4%);
  text-align: left;
  opacity: 0;
}

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

.journey-review-card-head { display: flex; align-items: center; gap: 0.62rem; }
.journey-review-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.7rem; background: linear-gradient(145deg, #819ee7, #4b609b); color: #12251b; font-size: 0.725rem; font-weight: 800; box-shadow: inset 0 1px rgb(18 37 27 / 11%); }
.journey-review-card-head > div { display: grid; gap: 0.24rem; }
.journey-review-card cite { color: rgb(239 243 255 / 67%); font-size: 0.725rem; font-style: normal; }
.journey-review-card p { margin-top: 0.62rem; color: #12251b; 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(18 37 27 / 7%);
  border-radius: 0.6rem;
  background: rgb(18 37 27 / 4%);
  transform: scaleY(0.72);
  opacity: 0;
}

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

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

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

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

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

.journey-pledge-card {
  position: relative;
  margin: 0.45rem 0 0;
  padding: 0.85rem 0.95rem 0.75rem 1.1rem;
  overflow: hidden;
  border: 1px solid rgb(18 37 27 / 6%);
  border-radius: 1.05rem;
  background: linear-gradient(110deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
  opacity: 0;
  transform: translateY(0.55rem);
}

.journey-pledge-rule { position: absolute; left: 0; top: 0; bottom: 0; width: 0.24rem; background: linear-gradient(#739de9, #74c8ac); }
.journey-pledge-card p { color: #12251b; font-family: var(--font-display); font-size: 0.95rem; line-height: 1.3; }
.journey-pledge-card footer { margin-top: 0.42rem; color: rgb(77 104 90 / 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(18 37 27 / 7%);
  border-radius: 1.3rem;
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
  box-shadow: 0 1.2rem 2.8rem rgb(18 37 27 / 11%), inset 0 1px rgb(18 37 27 / 4%);
}

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

.journey-signature-frame-head span { color: #12251b; font-size: 0.812rem; font-weight: 740; }
.journey-signature-frame-head small { color: rgb(77 104 90 / 44%); font-size: 0.7rem; }
.journey-signature-drawing { position: relative; overflow: hidden; border-radius: 0.95rem; background: linear-gradient(160deg, #12251bdf5, #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(77 104 90 / 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(18 37 27 / 7%);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 88% 5%, rgb(111 151 235 / 16%), transparent 30%),
    linear-gradient(150deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
  box-shadow: 0 1.2rem 3rem rgb(18 37 27 / 11%), inset 0 1px rgb(18 37 27 / 5%);
  opacity: 0;
  transform: perspective(800px) translateY(0.75rem) rotateX(3deg);
}

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

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

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

.journey-schedule-artifact-head > div { display: grid; gap: 0.1rem; }
.journey-schedule-artifact-head small { color: rgb(77 104 90 / 52%); font-size: 0.68rem; letter-spacing: 0.1em; }
.journey-schedule-artifact-head strong { color: #12251b; 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(18 37 27 / 4%);
  transition: opacity 260ms ease, background 260ms ease;
}

.journey-schedule-row[data-state="waiting"] { opacity: 0.3; }
.journey-schedule-row[data-state="building"] { background: linear-gradient(90deg, rgb(116 154 235 / 12%), transparent); }
.journey-schedule-row[data-state="ready"] { background: linear-gradient(90deg, rgb(111 205 176 / 9%), transparent); }
.journey-schedule-row-index { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid rgb(18 37 27 / 7%); border-radius: 0.5rem; background: rgb(18 37 27 / 4%); color: rgb(77 104 90 / 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(77 104 90 / 52%); font-size: 0.7rem; line-height: 1.25; }
.journey-schedule-row-copy strong { color: #12251b; 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(18 37 27 / 14%); }
.journey-schedule-row[data-state="building"] .journey-schedule-row-state i { background: #8aaaf0; animation: schedule-reading 800ms ease-in-out infinite alternate; }
.journey-schedule-row[data-state="building"] .journey-schedule-row-state i:nth-child(2) { animation-delay: 120ms; }
.journey-schedule-row[data-state="building"] .journey-schedule-row-state i:nth-child(3) { animation-delay: 240ms; }
.journey-schedule-row[data-state="ready"] .journey-schedule-row-state::before { content: ""; width: 0.55rem; height: 0.3rem; border-left: 2px solid #78d0b4; border-bottom: 2px solid #78d0b4; transform: rotate(-45deg); }
.journey-schedule-row[data-state="ready"] .journey-schedule-row-state i { display: none; }
@keyframes schedule-reading { to { opacity: 0.25; transform: translateY(-0.16rem); } }

.journey-schedule-artifact-foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.62rem; padding: 0.58rem 0.7rem; background: rgb(18 37 27 / 4%); }
.journey-schedule-build-mark { position: relative; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 0.5rem; background: rgb(126 164 238 / 12%); }
.journey-schedule-build-mark i:first-child { width: 0.72rem; height: 0.72rem; border: 2px solid #86a9ed; border-right-color: transparent; border-radius: 50%; animation: schedule-build-spin 1.1s linear infinite; }
.journey-schedule-artifact[data-build-stage="2"] .journey-schedule-build-mark i:first-child,
.journey-schedule-artifact[data-build-stage="3"] .journey-schedule-build-mark i:first-child { width: 0.55rem; height: 0.3rem; border: 0; border-left: 2px solid #76cfb1; border-bottom: 2px solid #76cfb1; border-radius: 0; animation: none; transform: rotate(-45deg); }
@keyframes schedule-build-spin { to { transform: rotate(1turn); } }
.journey-schedule-artifact-foot p { display: grid; gap: 0.08rem; }
.journey-schedule-artifact-foot small { color: rgb(77 104 90 / 50%); font-size: 0.825rem; letter-spacing: 0.07em; }
.journey-schedule-artifact-foot strong { color: rgb(77 104 90 / 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-result-revelation { 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, #1d6d92, #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: #2f8a55; box-shadow: 0 0 1.4rem rgb(47 138 85 / 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 #2f8a55; 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: #12251b; font-size: 0.825rem; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.qcue-labels span {
  color: rgb(77 104 90 / 90%);
  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: #12251b;
}

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

/* ========================================== Steady Dog real-photo journey */
.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. Metadata is visible to production tooling only;
   the slot remains calm and intentional until the real asset is supplied. */
.journey-photo-slot {
  position: relative;
  width: 100%;
  min-height: 13.25rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, rgb(7 24 16 / 8%), rgb(7 24 16 / 42%)),
    #173426;
  box-shadow: 0 1rem 2.4rem rgb(4 16 10 / 24%);
  opacity: 0;
  transform: translateY(0.35rem);
}

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

@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(18 37 27 / 6%);
  border-radius: 0.72rem;
  background: rgb(5 9 26 / 64%);
  box-shadow: inset 0 1px rgb(18 37 27 / 4%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(0.3rem);
}

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

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

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

.journey-story-evidence b {
  min-width: 0;
  color: #12251b;
  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: 11.5rem;
    border-radius: 1.35rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===================================== Journey atmosphere system
   Eleven daylight worlds, one per section. The same field in different light, so
   a section change reads as the hour moving rather than a new product. The
   meadow-green action colour never changes, and nothing here is ever red. */
.flow[data-journey="true"] { --atmosphere-chrome: rgb(241 246 242 / 82%); }

.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: open air, first light */
.flow[data-journey="true"][data-atmosphere="arrival"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(28 107 61 / 10%), transparent 46%),
    linear-gradient(168deg, #f3f8f3 0%, #e4efe4 60%, #f3f8f3 100%);
}

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

.flow[data-journey="true"][data-atmosphere="arrival"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(28 107 61 / 10%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* walk: street cool, the block before the corner */
.flow[data-journey="true"][data-atmosphere="walk"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(29 109 146 / 14%), transparent 46%),
    linear-gradient(168deg, #eff5f6 0%, #dde9ec 60%, #eff5f6 100%);
}

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

.flow[data-journey="true"][data-atmosphere="walk"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(29 109 146 / 14%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* home: indoor light, the door just closed */
.flow[data-journey="true"][data-atmosphere="home"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(134 138 62 / 12%), transparent 46%),
    linear-gradient(168deg, #f6f7f1 0%, #ecefe0 60%, #f6f7f1 100%);
}

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

.flow[data-journey="true"][data-atmosphere="home"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(134 138 62 / 12%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* leash: low sun, a long path */
.flow[data-journey="true"][data-atmosphere="leash"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(96 132 52 / 15%), transparent 46%),
    linear-gradient(168deg, #f1f7ec 0%, #dceacd 60%, #f1f7ec 100%);
}

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

.flow[data-journey="true"][data-atmosphere="leash"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(96 132 52 / 15%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* reading: cool sky, someone is listening */
.flow[data-journey="true"][data-atmosphere="reading"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(29 109 146 / 12%), transparent 46%),
    linear-gradient(168deg, #f0f6f7 0%, #dfebee 60%, #f0f6f7 100%);
}

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

.flow[data-journey="true"][data-atmosphere="reading"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(29 109 146 / 12%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* insight: sun on grass, the thing clicks */
.flow[data-journey="true"][data-atmosphere="insight"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(122 138 46 / 13%), transparent 46%),
    linear-gradient(168deg, #f6f8ef 0%, #eaefdc 60%, #f6f8ef 100%);
}

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

.flow[data-journey="true"][data-atmosphere="insight"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(122 138 46 / 13%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* proof: steady light, plain facts */
.flow[data-journey="true"][data-atmosphere="proof"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(46 122 96 / 12%), transparent 46%),
    linear-gradient(168deg, #f2f7f4 0%, #e2eee7 60%, #f2f7f4 100%);
}

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

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

/* weeks: steady green, thirty days laid out */
.flow[data-journey="true"][data-atmosphere="weeks"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(28 107 61 / 14%), transparent 46%),
    linear-gradient(168deg, #eff6f0 0%, #dfece0 60%, #eff6f0 100%);
}

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

.flow[data-journey="true"][data-atmosphere="weeks"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(28 107 61 / 14%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* promise: clear haze, quiet confidence */
.flow[data-journey="true"][data-atmosphere="promise"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(46 122 96 / 11%), transparent 46%),
    linear-gradient(168deg, #f5f8f6 0%, #e7f0ec 60%, #f5f8f6 100%);
}

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

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

/* drafting: shade under trees, careful hands */
.flow[data-journey="true"][data-atmosphere="drafting"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(70 100 96 / 13%), transparent 46%),
    linear-gradient(168deg, #ecf1ef 0%, #d9e4e1 60%, #ecf1ef 100%);
}

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

.flow[data-journey="true"][data-atmosphere="drafting"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(70 100 96 / 13%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* offer: full daylight, the price makes sense */
.flow[data-journey="true"][data-atmosphere="offer"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(28 107 61 / 16%), transparent 46%),
    linear-gradient(168deg, #f7faf4 0%, #e9f2e0 60%, #f7faf4 100%);
}

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

.flow[data-journey="true"][data-atmosphere="offer"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(28 107 61 / 16%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

/* cancel: plain overcast, no pressure */
.flow[data-journey="true"][data-atmosphere="cancel"] {
  --journey-panel: rgb(255 255 255 / 86%);
  background:
    radial-gradient(ellipse at 16% 4%, rgb(88 106 102 / 9%), transparent 46%),
    linear-gradient(168deg, #f4f6f5 0%, #e6eae9 60%, #f4f6f5 100%);
}

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

.flow[data-journey="true"][data-atmosphere="cancel"]::after {
  width: 14rem; height: 14rem; top: auto; bottom: 18%; right: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(88 106 102 / 9%), transparent 68%);
  filter: blur(1.5rem); opacity: 0.62;
  animation: journey-day-light 12s ease-in-out infinite alternate;
}

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

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

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

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

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

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

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

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

/* Selections: reserve the middle of the device for the decision itself. */
.flow[data-journey="true"] > .journey-select {
  display: grid;
  /* Choice rows keep their intrinsic height so the final option cannot be
     compressed into the action rail on wide, shorter viewports. */
  grid-template-rows: auto auto auto minmax(min-content, 1fr) auto;
  padding-top: clamp(2.7rem, 6.5vh, 4.25rem);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.journey-goal-copy small {
  width: max-content;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgb(18 37 27 / 4%);
  color: rgb(77 104 90 / 90%);
  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(18 37 27 / 13%);
  color: rgb(77 104 90 / 90%);
  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(18 37 27 / 8%);
  background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
  box-shadow: inset 0 1px rgb(18 37 27 / 4%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


}


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

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

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

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

/* ===================================== Short-phone density
   The label floor that makes the scenes readable on a 390x844 phone does not
   fit the fixed-height artwork on a 664px Safari viewport. Compact phones step
   the secondary type back down and tighten the artifact rather than clipping
   the bottom of a card. */
@media (max-height: 46rem) {
  .journey-schedule-row {
    min-height: 3rem;
    padding: 0.48rem 0.7rem;
  }

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===================================== Quiz presentation
   Eleven 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(18 37 27 / 7%);
  border-radius: 0.72rem;
  background: rgb(18 37 27 / 4%);
  color: rgb(77 104 90 / 90%);
  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%, #12251b);
}

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

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

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

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

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

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

/* ---- one card treatment per quiz world ---- */
.flow[data-journey="true"][data-atmosphere="morning"] .journey-question .option {
  border-radius: 0.9rem;
  background: linear-gradient(120deg, rgb(255 255 255 / 94%), rgb(241 246 242 / 96%));
}

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

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

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

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

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

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

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

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

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

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

@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(18 37 27 / 8%);
  border-radius: 1.1rem;
  background: rgb(18 37 27 / 4%);
  color: var(--journey-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms linear, background 180ms linear;
}

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

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

.journey-plan-head strong {
  color: #12251b;
  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%, #12251b);
  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: #12251b; 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(77 104 90 / 90%);
}

.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(18 37 27 / 6%);
  opacity: 0;
  transform: translateY(0.4rem);
}

.journey-promise-step:last-child {
  border-bottom: 1px solid rgb(18 37 27 / 6%);
}

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

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

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

/* ---- Steady Dog question cues: objects from the walk, drawn in line ----
   Every cue is one SVG at viewBox="0 0 328 76" filling the art box. Colour
   comes only from the journey custom properties; the ink weight is carried by
   stroke, never fill, except for paw prints and the lamp's pool of light. */
.dogcue-threshold > svg,
.dogcue-keys > svg,
.dogcue-hour > svg,
.dogcue-veer > svg,
.dogcue-door > svg,
.dogcue-tension > svg,
.dogcue-fixtures > svg,
.dogcue-detour > svg,
.dogcue-kit > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dogcue-s {
  fill: none;
  stroke: var(--journey-line);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dogcue-s--mut { stroke: var(--journey-muted); }
.dogcue-s--ink { stroke: var(--journey-text); }
.dogcue-s--act { stroke: var(--journey-action); stroke-width: 2.9; }
.dogcue-f--mut { fill: var(--journey-muted); stroke: none; }
.dogcue-f--act { fill: var(--journey-action); stroke: none; }

/* Three entrances the whole set shares: a line that draws itself, an object
   that arrives from just below, an object that settles into place. */
@keyframes dogcue-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes dogcue-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes dogcue-settle { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: none; } }
@keyframes dogcue-fade { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: no travel, no draw-on, just the finished object fading in.
   Static transform attributes on unclassed groups (the rotated paw prints)
   are left alone, so the artwork still reads exactly as designed. */
@media (prefers-reduced-motion: reduce) {
  .journey-question[data-ready="true"] .dogcue-threshold [class*="dogcue-"],
  .journey-question[data-ready="true"] .dogcue-keys [class*="dogcue-"],
  .journey-question[data-ready="true"] .dogcue-hour [class*="dogcue-"],
  .journey-question[data-ready="true"] .dogcue-veer [class*="dogcue-"],
  .journey-question[data-ready="true"] .dogcue-door [class*="dogcue-"],
  .journey-question[data-ready="true"] .dogcue-tension [class*="dogcue-"],
  .journey-question[data-ready="true"] .dogcue-fixtures [class*="dogcue-"],
  .journey-question[data-ready="true"] .dogcue-detour [class*="dogcue-"],
  .journey-question[data-ready="true"] .dogcue-kit [class*="dogcue-"] {
    animation: dogcue-fade 240ms var(--ease) both;
    transform: none;
    stroke-dashoffset: 0;
  }
  .journey-question[data-ready="true"] .dogcue-tension .dogcue-tension-slack {
    animation: dogcue-tension-release 240ms var(--ease) both;
  }
}

.dogcue-threshold-ground,
.dogcue-threshold-lead { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-threshold-house,
.dogcue-threshold-clip { opacity: 0; }
.dogcue-threshold-clip { transform-box: fill-box; transform-origin: 50% 50%; }
.journey-question[data-ready="true"] .dogcue-threshold .dogcue-threshold-ground { animation: dogcue-draw 460ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-threshold .dogcue-threshold-house { animation: dogcue-rise 380ms 100ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-threshold .dogcue-threshold-clip { animation: dogcue-settle 300ms 180ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-threshold .dogcue-threshold-lead { animation: dogcue-draw 520ms 240ms var(--ease) both; }

.dogcue-keys-floor { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-keys-door,
.dogcue-keys-hook,
.dogcue-keys-set { opacity: 0; }
.dogcue-keys-set { transform-box: fill-box; transform-origin: 35% 0%; }
@keyframes dogcue-keys-swing {
  from { opacity: 0; transform: rotate(-11deg); }
  to { opacity: 1; transform: rotate(0deg); }
}
.journey-question[data-ready="true"] .dogcue-keys .dogcue-keys-floor { animation: dogcue-draw 440ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-keys .dogcue-keys-door { animation: dogcue-rise 380ms 110ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-keys .dogcue-keys-hook { animation: dogcue-fade 260ms 180ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-keys .dogcue-keys-set { animation: dogcue-keys-swing 460ms 250ms var(--ease) both; }

.dogcue-hour-ground,
.dogcue-hour-post { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-hour-window,
.dogcue-hour-lantern,
.dogcue-hour-light { opacity: 0; }
.dogcue-hour-lantern { transform-box: fill-box; transform-origin: 50% 100%; }
.dogcue-hour-light { transform-box: fill-box; transform-origin: 50% 0%; }
.dogcue-hour-pool { fill: var(--journey-action); fill-opacity: 0.22; stroke: none; }
.dogcue-hour-glow { fill: var(--journey-accent, var(--journey-muted)); fill-opacity: 0.14; stroke: none; }
.journey-question[data-ready="true"] .dogcue-hour .dogcue-hour-ground { animation: dogcue-draw 440ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-hour .dogcue-hour-window { animation: dogcue-rise 360ms 110ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-hour .dogcue-hour-post { animation: dogcue-draw 380ms 180ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-hour .dogcue-hour-lantern { animation: dogcue-settle 280ms 250ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-hour .dogcue-hour-light { animation: dogcue-settle 420ms 320ms var(--ease) both; }

.dogcue-veer-kerb { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-veer-trail,
.dogcue-veer-paw { opacity: 0; }
.journey-question[data-ready="true"] .dogcue-veer .dogcue-veer-kerb { animation: dogcue-draw 420ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-veer .dogcue-veer-trail { animation: dogcue-rise 360ms 120ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-veer .dogcue-veer-paw { animation: dogcue-rise 380ms 200ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-veer .dogcue-veer-paw + .dogcue-veer-paw { animation-delay: 270ms; }

.dogcue-door-floor,
.dogcue-door-frame,
.dogcue-door-leaf,
.dogcue-door-marks path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-door-handle { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.journey-question[data-ready="true"] .dogcue-door .dogcue-door-floor { animation: dogcue-draw 400ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-door .dogcue-door-frame { animation: dogcue-draw 460ms 90ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-door .dogcue-door-leaf { animation: dogcue-draw 420ms 170ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-door .dogcue-door-handle { animation: dogcue-settle 260ms 250ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-door .dogcue-door-marks path { animation: dogcue-draw 300ms 320ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-door .dogcue-door-marks path:nth-child(2) { animation-delay: 380ms; }
.journey-question[data-ready="true"] .dogcue-door .dogcue-door-marks path:nth-child(3) { animation-delay: 440ms; }

.dogcue-tension-slack { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-tension-grip,
.dogcue-tension-clip { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.dogcue-tension-taut { opacity: 0; }
@keyframes dogcue-tension-release { from { opacity: 1; } to { opacity: 0.42; } }
@keyframes dogcue-tension-pull { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.journey-question[data-ready="true"] .dogcue-tension .dogcue-tension-grip { animation: dogcue-settle 300ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-tension .dogcue-tension-clip { animation: dogcue-settle 280ms 110ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-tension .dogcue-tension-slack {
  animation: dogcue-draw 400ms 160ms var(--ease) both, dogcue-tension-release 240ms 540ms var(--ease-in-out) both;
}
.journey-question[data-ready="true"] .dogcue-tension .dogcue-tension-taut { animation: dogcue-tension-pull 300ms 520ms var(--ease) both; }

.dogcue-fixtures-floor,
.dogcue-fixtures-coil path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-fixtures-bowl { opacity: 0; }
.journey-question[data-ready="true"] .dogcue-fixtures .dogcue-fixtures-floor { animation: dogcue-draw 420ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-fixtures .dogcue-fixtures-bowl { animation: dogcue-rise 360ms 110ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-fixtures .dogcue-fixtures-coil path { animation: dogcue-draw 360ms 180ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-fixtures .dogcue-fixtures-coil path:nth-child(2) { animation-delay: 240ms; }
.journey-question[data-ready="true"] .dogcue-fixtures .dogcue-fixtures-coil path:nth-child(3) { animation-delay: 300ms; }

.dogcue-detour-route { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-detour-direct { stroke-dasharray: 4 7; opacity: 0; }
.dogcue-detour-pin { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; fill: var(--journey-muted); stroke: none; }
.dogcue-detour-block { opacity: 0; }
.journey-question[data-ready="true"] .dogcue-detour .dogcue-detour-pin { animation: dogcue-settle 280ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-detour .dogcue-detour-pin + .dogcue-detour-pin { animation-delay: 110ms; }
.journey-question[data-ready="true"] .dogcue-detour .dogcue-detour-direct { animation: dogcue-fade 320ms 180ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-detour .dogcue-detour-block { animation: dogcue-rise 320ms 250ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-detour .dogcue-detour-route { animation: dogcue-draw 480ms 320ms var(--ease) both; }

.dogcue-kit-box path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dogcue-kit-items > * { opacity: 0; }
.journey-question[data-ready="true"] .dogcue-kit .dogcue-kit-box path { animation: dogcue-draw 460ms 40ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-kit .dogcue-kit-box path:nth-child(2) { animation-delay: 110ms; }
.journey-question[data-ready="true"] .dogcue-kit .dogcue-kit-items > * { animation: dogcue-rise 360ms 190ms var(--ease) both; }
.journey-question[data-ready="true"] .dogcue-kit .dogcue-kit-items > *:nth-child(2) { animation-delay: 250ms; }
.journey-question[data-ready="true"] .dogcue-kit .dogcue-kit-items > *:nth-child(3) { animation-delay: 310ms; }

/* Conversion rewrite support */
.journey-story-evidence-list {
  display: grid;
  gap: 0.28rem;
  width: 100%;
  margin-bottom: 0.58rem;
}

.journey-story-evidence-list .journey-story-evidence {
  margin: 0;
}

.journey-review-summary--plain {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ================================================== Real-photo reserved states */
.landing-section-photo,
.journey-photo-slot {
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.2rem;
  background:
    linear-gradient(145deg, rgb(28 107 61 / 18%), rgb(29 109 146 / 12%)),
    #dcebe0;
  box-shadow: inset 0 0 0 1px rgb(18 37 27 / 10%);
}

.landing-section-photo {
  width: 100%;
  margin-top: 1.25rem;
}

.journey-photo-slot {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgb(7 24 16 / 5%), rgb(7 24 16 / 28%)),
    #234b36;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 1rem 2.4rem rgb(4 16 10 / 18%);
}

@media (min-width: 48rem) {
  .landing-section-photo {
    aspect-ratio: 16 / 9;
  }
}

/* ================================================== Dark analysis surface */
.flow[data-journey="true"][data-screen="analysis"] {
  --journey-text: #f4fbf7;
  --journey-muted: #c0d3c7;
  --journey-line: rgb(255 255 255 / 18%);
  color: #f4fbf7;
  background:
    radial-gradient(circle at 50% 38%, rgb(38 132 78 / 26%), transparent 34%),
    linear-gradient(155deg, #06140c, #0a2215 58%, #07110b);
}

.flow[data-journey="true"][data-screen="analysis"] .flow-bar,
.flow[data-journey="true"][data-screen="analysis"] .flow-bar-inner {
  color: #f4fbf7;
  background: #07170e;
}

.flow[data-journey="true"][data-screen="analysis"] .icon-btn,
.flow[data-journey="true"][data-screen="analysis"] .flow-step,
.flow[data-journey="true"][data-screen="analysis"] .flow-bar[data-journey="true"] .flow-step,
.flow[data-journey="true"][data-screen="analysis"] .analysis-kicker,
.flow[data-journey="true"][data-screen="analysis"] .analysis h2,
.flow[data-journey="true"][data-screen="analysis"] .analysis-percent {
  color: #f4fbf7;
}

.flow[data-journey="true"][data-screen="analysis"] .progress,
.flow[data-journey="true"][data-screen="analysis"] .analysis-ring {
  background: #102b1c;
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-ring {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 13%), 0 1.4rem 3.6rem rgb(0 0 0 / 38%);
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-ring-track {
  stroke: rgb(255 255 255 / 42%);
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-ring-value {
  stroke: #7ee2a6;
  filter: drop-shadow(0 0 0.45rem rgb(126 226 166 / 52%));
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-ring-head > span {
  border-color: #f4fbf7;
  background: #7ee2a6;
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-status {
  border-color: rgb(255 255 255 / 18%);
  background: #102b1c;
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 1rem 2rem rgb(0 0 0 / 24%);
}

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

.flow[data-journey="true"][data-screen="analysis"] .analysis-phase-detail {
  color: #c0d3c7;
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-stage-state {
  border-color: rgb(126 226 166 / 42%);
  color: #baf3cf;
  background: rgb(126 226 166 / 12%);
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-signal {
  border-color: rgb(255 255 255 / 16%);
  color: #c0d3c7;
  background: rgb(255 255 255 / 6%);
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-signal i {
  border-color: rgb(255 255 255 / 30%);
}

.flow[data-journey="true"][data-screen="analysis"] .analysis-signal[data-state="active"] {
  border-color: rgb(126 226 166 / 58%);
  color: #f4fbf7;
  background: rgb(126 226 166 / 14%);
}

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