/* A single little world. Native scroll, one shared spring, real product UI. */
/* clip prevents horizontal overflow without making body a nested scrollport. */
html, body { overflow-x: clip; }
.steady-journey {
  --hero-ink: #f1f4e8;
  --hero-mint: #c2ef88;
  --journey-header: 80px;
  --journey-travel: 320svh;
  --spring-stiffness: 300;
  --spring-damping: 30;
  --spring-mass: 1;
  position: relative;
  display: block;
  isolation: isolate;
  overflow-anchor: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--hero-ink);
  background: #10373b;
  border-bottom: 1px solid #96b99b55;
}
.steady-journey .journey-sticky {
  position: relative;
  height: max(620px, calc(100svh - var(--journey-header)));
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 93% 3%, #ffe5ac16, transparent 48%),
    radial-gradient(ellipse at 55% 50%, transparent 40%, #082f352b 100%),
    linear-gradient(90deg, #10373b70, transparent 65%),
    linear-gradient(0deg, #10373b, transparent 28%),
    url('../assets/hero-distant-worlds-v1.jpg') center / cover no-repeat,
    #10373b;
}
.steady-journey[data-journey-mode="motion"] { height: calc(max(620px, 100svh - var(--journey-header)) + var(--journey-travel)); }
.steady-journey[data-journey-mode="motion"] .journey-sticky { position: sticky; top: var(--journey-header); }
.steady-journey .journey-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.steady-journey .next-hero__copy {
  position: relative;
  z-index: 4;
  width: 46%;
  max-width: 630px;
  padding-top: clamp(42px, 7svh, 84px);
  margin-left: max(40px, calc((100% - 1320px) / 2));
  pointer-events: auto;
}
.steady-journey .next-eyebrow { margin: 0 0 30px; font-size: 10px; letter-spacing: .18em; color: #c0d2c4; text-transform: uppercase; }
.steady-journey .next-signal { width: 18px; height: 2px; border-radius: 0; background: var(--hero-mint); box-shadow: none; }
.steady-journey h1 {
  margin: 0 0 28px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(62px, 7.25vw, 110px);
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -.075em;
}
.steady-journey h1 > span { display: block; }
.steady-journey h1 > span:nth-child(2) { margin-left: .28em; color: var(--hero-mint); }
.steady-journey h1 em { display: block; margin-top: 16px; font: italic 400 clamp(32px, 3.4vw, 48px)/1.2 Georgia, serif; letter-spacing: -.04em; color: var(--hero-ink); }
.steady-journey .next-lead { max-width: 355px; color: #c1d1c9; font-size: 15px; line-height: 1.8; }
.steady-journey .next-actions { margin: 26px 0 19px; gap: 23px; }
.steady-journey .next-button {
  display: inline-flex; justify-content: center; align-items: center; min-height: 48px;
  padding: 14px 22px; border-radius: 10px; border: 1px solid #d5f4ac;
  color: #173c35; background: #c2ef88; font-size: 13px; font-weight: 700;
  box-shadow: inset 0 1px 0 #efffce, 0 12px 40px #041a2533;
  text-decoration: none; transition: none;
}
.steady-journey .next-button:hover { background: #d5f4ac; color: #123b32; }
.steady-journey .next-text-link { color: #f1f4e8; border-color: #91ada166; font-size: 12px; }
.steady-journey .next-note { color: #a9bfb4; font-size: 10px; max-width: 350px; }
.steady-journey .journey-visual-track { position: absolute; inset: 0; pointer-events: none; }
.steady-journey .next-hero__visual {
  position: absolute; top: 0; right: max(-35px, calc((100% - 1460px) / 2));
  width: 64%; max-width: 940px; height: 100%; margin: 0;
  border: 0; border-radius: 0; background: none; isolation: isolate;
  pointer-events: none;
}
.steady-journey .next-hero__visual::before, .steady-journey .next-hero__visual::after { content: none; }
.steady-journey .journey-world, .steady-journey .journey-actors {
  position: absolute; width: 76%; aspect-ratio: 10 / 9; left: 0; top: 55%;
  margin-top: -34.2%; transform-origin: 50% 55%;
}
.journey-actors { z-index: 4; pointer-events: none; }
.journey-landscape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.journey-trail-progress { stroke-dasharray: 0 5000; }
.steady-journey button.journey-actor {
  position: absolute; left: 12%; top: 82.444%; bottom: auto; width: 16%; height: auto; aspect-ratio: 1;
  transform: translate(-50%, -96%); padding: 0; border: 0; background: none; z-index: 5;
  border-radius: 25%; pointer-events: auto; filter: none; transform-origin: 50% 96%;
}
.steady-journey .journey-actor::after {
  content: ""; position: absolute; bottom: 0; left: 24%; width: 52%; height: 7%;
  border-radius: 50%; background: #062e2580; box-shadow: 0 3px 9px #05282155;
  transform: translateY(var(--shadow-drop, 0px)) scale(var(--shadow-scale, 1)); z-index: -1;
}
.steady-journey .journey-actor > img { width: 100%; height: 100%; object-fit: contain; }
.steady-journey .journey-actor .next-mascot__sprite {
  position: absolute; inset: 0; display: none; opacity: 1;
  background-repeat: no-repeat; background-size: 400% 200%;
  transform: translateY(var(--sole-offset, 0px)) scaleX(var(--facing, 1));
}
.steady-journey .journey-actor.is-ready > img { opacity: 0; }
.steady-journey .journey-actor.is-ready .next-mascot__sprite { display: block; }
.steady-journey .journey-actor.is-following { opacity: 0; pointer-events: none; }
.journey-crew-marker {
  position: absolute; width: 4.9%; aspect-ratio: 1; left: 8%; top: 85%;
  display: grid; place-items: center; transform: translate(-50%,-100%);
  border-radius: 50%; background: linear-gradient(135deg,#e7d8b6,#b7a88c); color: #31443b;
  border: 3px solid #d6e5b8; box-shadow: 0 9px 16px #062e2844, inset 0 2px 1px #fff7;
  font: 600 clamp(10px,1.2vw,16px)/1 Manrope,sans-serif;
}
.journey-crew-marker[data-crew="1"] { background: linear-gradient(135deg,#b4d9db,#87b5b3); }
.journey-crew-marker[data-crew="2"] { background: linear-gradient(135deg,#d1c4dc,#a595b3); }
.journey-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.journey-atmosphere span { position: absolute; top: 14%; left: 25%; width: 29%; height: 1px; transform: rotate(-24deg); background: linear-gradient(90deg,transparent,#c5dcab22,transparent); }
.journey-atmosphere span:nth-child(2) { top: 26%; left: 57%; width: 35%; }
.journey-atmosphere span:nth-child(3) { top: 83%; left: 9%; width: 40%; background: #c5dcab0d; }
.steady-journey .journey-phone-group {
  position: absolute; top: 18%; left: auto; right: 60px; width: clamp(160px,14.5vw,210px);
  pointer-events: auto; z-index: 3; transform-origin: top left;
}
.steady-journey .next-phone {
  position: relative; top: auto; left: auto; width: 100%; padding: 6px; border-radius: 35px;
  background: linear-gradient(135deg,#d7e0cb,#293f3f 7%,#122a2c 93%,#94a9a0);
  border: 1px solid #adc6b9; transform: rotate(-4deg);
  box-shadow: inset 0 0 0 3px #142c2d, 12px 25px 65px #031c2866;
}
.steady-journey .next-phone__screen { border-radius: 28px; touch-action: pan-y; }
.steady-journey .next-phone__track { transition: none; }
.steady-journey .next-phone .next-phone__slide { border-radius: 0; }
.steady-journey .next-phone-controls { position: relative; bottom: auto; right: auto; margin: 18px auto 0; justify-content: center; gap: 6px; }
.steady-journey .next-phone-controls button { width: calc(44px / var(--phone-scale, 1)); height: calc(44px / var(--phone-scale, 1)); flex: 0 0 calc(44px / var(--phone-scale, 1)); color: #e8efdc; border: 1px solid #bbd2b52b; background: #092d3340; }
.steady-journey .next-phone-controls button:hover { background: #bcd5b51a; }
.steady-journey .next-phone-controls button:disabled { opacity: .3; }
.journey-phone-sync { display: block; margin: 8px auto; padding: 7px; border: 0; border-bottom: 1px solid #bad2b766; background: transparent; color: #dce9d1; font: inherit; font-size: 10px; cursor: pointer; }
.steady-journey [hidden] { display: none !important; }
/* iOS supplies the foreground push banner (AppDelegate.swift); APNs copy is
   mirrored from notificationCatalog.ts; anchored to the walking character. */
.journey-notification {
  position: absolute; top: 15%; left: 5%; z-index: 6; width: 310px;
  margin: 0; pointer-events: none; transform-origin: top center;
  text-align: left; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.journey-notification__banner {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid #ffffff88; border-radius: 24px;
  background: linear-gradient(145deg, #f3f5eff2, #dce5dcf0);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 12px 36px #041e2a2e;
  backdrop-filter: blur(24px) saturate(1.12); -webkit-backdrop-filter: blur(24px) saturate(1.12);
  color: #17221c;
}
.journey-notification__icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.journey-life {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 3px;
  margin: 0; padding: 3px 7px 3px 6px; border-radius: 999px; background: #041e2a8c; color: #fff;
  font: 700 11px/1 Manrope, sans-serif; pointer-events: none; transform: translate(-50%, 6px);
  box-shadow: 0 4px 10px #041e2a44;
}
.journey-life span[aria-hidden] { color: #ff4b5c; font-size: 10px; }
.journey-life.is-gain [data-life-value] { color: #d6f5a2; }
.journey-life.is-loss span[aria-hidden] { color: #8d9890; }
.journey-notification__content { flex: 1; min-width: 0; }
.journey-notification__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; color: #536158; font-size: 11px; line-height: 1.2; }
.journey-notification__header > :first-child { font-weight: 500; }
.steady-journey .journey-notification__title { margin: 0 0 2px; color: #17221c; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.steady-journey .journey-notification__body { margin: 0; color: #25342a; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.35; letter-spacing: -.015em; }
.journey-chapters { position: absolute; z-index: 4; top: 24%; left: max(40px, calc((100% - 1320px) / 2)); width: 36%; max-width: 460px; }
.journey-kicker { display: block; font: 500 9px/1.5 Manrope,sans-serif; letter-spacing: .16em; color: #c6dcac; }
.journey-chapters h2 { font: 600 clamp(40px,4.5vw,68px)/1.09 Manrope,sans-serif; letter-spacing: -.065em; margin: 26px 0 22px; text-wrap: balance; color: #f1f4e8; }
.journey-chapters p { max-width: 320px; color: #c0d0c3; font-size: 15px; line-height: 1.8; margin: 0 0 28px; }
.journey-hud { position: absolute; bottom: 20px; left: -55%; right: 7%; z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #b2c7b6; }
.journey-scroll-cue { display: flex; align-items: center; gap: 12px; font-size: 8px; letter-spacing: .14em; }
.journey-scroll-cue > :first-child { font-size: 18px; color: #c2ef88; }
.journey-chapter-dots { display: flex; gap: 8px; }.journey-chapter-dots i { width: 4px; height: 4px; border-radius: 50%; background: #a2b99b50; }.journey-chapter-dots .is-current { background: #d3f09c; box-shadow: 0 0 0 4px #d3f09c0c; }
.journey-skip { color: #bdcebd; font-size: 10px; text-decoration: none; pointer-events: auto; min-height: 44px; display: inline-flex; align-items: center; }
.journey-skip:hover { color: #e1f4c2; }
.journey-mobile-story { display: none; }
.steady-journey a:focus-visible,.steady-journey button:focus-visible,.steady-journey .next-phone__screen:focus-visible { outline: 2px solid #e0ffb6; outline-offset: 5px; }
.steady-journey[data-journey-mode="static"] .journey-skip,.steady-journey[data-journey-mode="static"] .journey-scroll-cue { visibility: hidden; }
@media (min-width: 761px) and (max-width: 1099px) {
  .steady-journey { --journey-travel: 240svh; }
  .steady-journey .next-hero__copy { width: 46%; margin-left: 30px; }
  .steady-journey h1 { font-size: 7.3vw; }
  .steady-journey .next-lead { max-width: 300px; font-size: 14px; }
  .steady-journey .next-actions { gap: 16px; flex-wrap: wrap; }
  .steady-journey .next-hero__visual { width: 64%; right: -25px; }
  .steady-journey .journey-world, .steady-journey .journey-actors { width: 70%; margin-top: -31.5%; }
  .steady-journey .journey-phone-group { left: auto; right: 44px; width: 152px; top: 28%; }
  .journey-notification { left: 2%; top: 14%; width: 270px; }
  .journey-hud { left: 12%; }.journey-scroll-cue { display: none; }
}
@media (max-width: 760px) {
  .steady-journey { --journey-travel: 160svh; --journey-scene: 72svh; }
  .steady-journey, .steady-journey[data-journey-mode="motion"] { height: auto; }
  .steady-journey .journey-sticky,.steady-journey[data-journey-mode="motion"] .journey-sticky { position: relative; top: auto; height: auto; overflow: visible; }
  .steady-journey .next-hero__copy { width: auto; max-width: none; padding: 35px 22px 0; margin: 0; }
  .steady-journey h1 { font-size: clamp(44px,12vw,82px); margin: 0 0 24px; }
  .steady-journey h1 > span:nth-child(2) { margin-left: .35em; }
  .steady-journey h1 em { font-size: 31px; margin-top: 14px; }
  .steady-journey .next-eyebrow { font-size: 8px; margin-bottom: 26px; }
  .steady-journey .next-lead { max-width: 410px; font-size: 14px; line-height: 1.75; }
  .steady-journey .next-actions { gap: 22px; margin: 23px 0 17px; }
  .steady-journey .next-button { min-height: 48px; padding: 12px 18px; font-size: 12px; }
  .steady-journey .next-text-link { font-size: 12px; }
  .steady-journey .next-note { font-size: 9px; }
  .steady-journey .journey-visual-track { position: relative; inset: auto; height: max(610px, var(--journey-scene)); padding-top: 20px; }
  .steady-journey[data-journey-mode="motion"] .journey-visual-track { height: calc(max(610px,var(--journey-scene)) + var(--journey-travel)); }
  .steady-journey .next-hero__visual { position: sticky; top: var(--journey-header); width: 100%; max-width: none; right: auto; height: max(610px,var(--journey-scene)); }
  .steady-journey .journey-world, .steady-journey .journey-actors { width: 76%; left: 0; top: 275px; margin-top: 0; }
  .steady-journey button.journey-actor { width: 27%; left: 24%; }
  .journey-crew-marker { width: 8%; }
  .steady-journey .journey-phone-group { width: 104px; top: 250px; left: auto; right: 16px; }
  .steady-journey .next-phone { border-radius: 23px; padding: 4px; }.steady-journey .next-phone__screen { border-radius: 18px; }
  .steady-journey .next-phone-controls { width: 132px; margin: 12px 0 0 calc(100% - 132px); gap: 0; }.steady-journey .next-phone-controls button { border-color: transparent; background: none; }
  .journey-phone-sync { font-size: 9px; }
  .journey-notification { top: 130px; left: 22px; width: calc(100% - 44px); }
  .journey-notification__banner { border-radius: 23px; padding: 13px; gap: 11px; }
  .journey-notification__header { font-size: 11px; }
  .steady-journey .journey-notification__title, .steady-journey .journey-notification__body { font-size: 14px; }
  .journey-chapters { display: none; }
  .journey-mobile-story { display: block; position: absolute; top: 30px; left: 22px; right: 22px; z-index: 7; pointer-events: none; }
  .journey-mobile-story p { font: 500 27px/1.14 Manrope,sans-serif; letter-spacing: -.05em; color: #f1f4e8; margin: 13px 0; max-width: 310px; }
  .journey-mobile-story .next-button { pointer-events: auto; min-height: 44px; margin-top: 0; font-size: 11px; }
  .journey-hud { bottom: 12px; left: 22px; right: 22px; }.journey-scroll-cue { font-size: 7px; gap: 8px; max-width: 105px; }.journey-skip { font-size: 9px; }.journey-chapter-dots { gap: 7px; }
}
@media (max-width: 360px) { .steady-journey .journey-phone-group { width: 96px; right: 12px; }.journey-notification { left: 16px; width: calc(100% - 32px); } }
@media (prefers-reduced-motion: reduce) {
  .steady-journey .journey-sticky { position: relative !important; top: auto !important; }
  .steady-journey .next-phone__track { transition: none; }
}

/* Spatial mountain enhancement. The SVG stays available until WebGL succeeds. */
.steady-journey .next-hero__visual { width: 65%; right: max(-25px, calc((100% - 1460px) / 2)); }
.journey-mountain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.steady-journey[data-mountain="ready"] .journey-world { visibility: hidden; }
.steady-journey[data-mountain="ready"] .journey-actors { inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }
.steady-journey[data-mountain="ready"] .journey-actor::after { display: none; }
.steady-journey[data-mountain="ready"] .journey-crew-marker { width: 32px; }
.journey-notification { top: 7%; left: 25%; }
.journey-motion-toggle { pointer-events: auto; min-height: 44px; padding: 8px 0; color: #bdcebd; font: inherit; font-size: 10px; border: 0; background: none; cursor: pointer; }
.journey-motion-toggle:hover { color: #e1f4c2; }
/* The trail's mist opens into a clear, readable product presentation. */
.journey-product {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 100px);
  padding: 170px max(32px, calc((100% - 1120px) / 2)) 100px;
  background: linear-gradient(180deg, #203d40 0, #dbe7e2 100px, #f7fbfc 260px);
}
.journey-product > * { min-width: 0; }
.journey-product__copy { max-width: 470px; }
.journey-product__copy h2 { margin: 20px 0; font-size: clamp(34px, 3.8vw, 54px); line-height: 1.12; letter-spacing: -.045em; }
.journey-product__copy > p:not(.next-eyebrow) { color: #56717b; line-height: 1.8; margin-bottom: 24px; }
.journey-product .next-button { background: #244f40; border-color: #244f40; color: #fff; }
.product-views { display: grid; gap: 8px; margin: 28px 0 30px; }
.product-view {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 14px;
  width: 100%;
  padding: 17px 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: #526d71;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.product-view:hover { background: #eaf1eb; }
.product-view.is-active { background: #e8f1e6; border-color: #c4d8bb; color: #224c3c; box-shadow: 0 4px 16px #244f4006; }
.product-view__number { padding-top: 3px; font-size: 11px; letter-spacing: .08em; }
.product-view strong { display: block; font-size: 17px; font-weight: 650; margin-bottom: 5px; }
.product-view strong + span { display: block; font-size: 13px; line-height: 1.6; }
.product-view__arrow { font-size: 20px; opacity: 0; }
.product-view.is-active .product-view__arrow { opacity: 1; }
.journey-product .journey-phone-group { position: relative; width: min(310px, 100%); min-width: 0; justify-self: center; }
.product-phone-halo { position: absolute; z-index: -1; inset: 8% -18% 4%; border-radius: 50%; background: radial-gradient(ellipse, #d5e7c9 0, #e9f1e5 45%, transparent 70%); }
.journey-product .next-phone {
  position: relative; box-sizing: border-box; width: 100%; top: auto; left: auto; transform: none;
  padding: 8px; border-radius: 44px; border: 1px solid #82918b;
  background: linear-gradient(110deg, #a8b3aa, #26342f 5%, #0d1814 45%, #4c5e54 96%, #a9b5ad);
  box-shadow: inset 0 0 0 2px #a5b1a780, inset 0 0 0 5px #15231c, 0 25px 50px -14px #143a3538, 0 4px 10px #153a3524;
}
.journey-product .next-phone::before, .journey-product .next-phone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #8c9a92, #263a30); }
.journey-product .next-phone::before { left: -3px; top: 95px; height: 32px; box-shadow: 0 43px #43574c; }
.journey-product .next-phone::after { right: -3px; top: 130px; height: 58px; }
.journey-product .next-phone__screen { position: relative; width: 100%; border-radius: 36px; background: #def8ed; }
.journey-product .next-phone__screen::after { content: ''; pointer-events: none; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 27%; height: 21px; border-radius: 20px; background: #0a100e; box-shadow: inset -7px 0 3px #1c2424; }
.journey-product .next-phone__track { transition: none; }
.journey-product .next-phone .next-phone__slide { border-radius: 0; }
.product-phone-hint { margin: 24px -15px 0; text-align: center; font-size: 11px; letter-spacing: .02em; color: #59736c; }
.journey-product a:focus-visible, .journey-product button:focus-visible, .journey-product .next-phone__screen:focus-visible { outline: 2px solid #17604b; outline-offset: 5px; }
@media (min-width: 761px) and (max-width: 1099px) {
  .steady-journey .next-hero__visual { width: 64%; right: -10px; }
  .journey-notification { left: 16%; top: 10%; }
  .journey-product { gap: 32px; }
}
@media (max-width: 760px) {
  .steady-journey .next-hero__visual { width: 100%; right: auto; }
  .journey-mountain { top: 145px; height: calc(100% - 145px); }
  .steady-journey[data-mountain="ready"] .journey-actors { top: 145px; height: calc(100% - 145px); }
  .steady-journey[data-mountain="ready"] .journey-crew-marker { width: 24px; }
  .journey-notification { top: 130px; left: 22px; width: calc(100% - 44px); }
  .journey-product { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 145px 24px 65px; }
  .journey-product__copy { max-width: 480px; }
  .journey-product .journey-phone-group { width: min(290px, 100%); }
  .journey-scroll-cue { display: none; }
}

/* The impossible world disappears into mist at the frame edges. */
.journey-mountain { mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 87%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 87%, transparent); }
.journey-product .next-phone-controls { transform: none; }

/* A full-width atmosphere lets the dream world merge with the editorial hero. */
@media (min-width:761px) {
  .steady-journey[data-mountain="ready"] .next-hero__visual { width:100%; max-width:none; right:0; }
  .journey-notification { left:61%; }
  .journey-hud { left:40px; right:40px; }
  .journey-mountain { mask-image:linear-gradient(to right,transparent,#000 40%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 88%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in; }
}
@media (min-width:761px) and (max-width:1099px) {
  .journey-notification { left:58%; }
  .journey-hud { left:30px; right:30px; }
}

/* Visible characters use the same GPU depth test as the world. Keep the button's
   bounds and focus ring for keyboard access and the existing companion handoff. */
.steady-journey[data-depth-actors="ready"] .journey-actor > img,
.steady-journey[data-depth-actors="ready"] .journey-actor .next-mascot__sprite { visibility: hidden; }
.steady-journey[data-depth-actors="ready"] .journey-crew-marker { visibility: hidden; }

/* Push banners follow Turtly's projected feet; JS supplies local pixel anchors. */
.steady-journey .journey-notification { left: 0; top: 0; width: min(310px, calc(100% - 32px)); }
@media (min-width:761px) and (max-width:1099px) {
  .journey-product .journey-phone-group { width: min(290px, 100%); }
}

.next-skin[role="button"] { cursor: pointer; }
.next-skin[aria-pressed="true"] { outline: 2px solid #478560; outline-offset: 4px; }
.next-skin[role="button"]:focus-visible { outline: 3px solid #17604b; outline-offset: 5px; }

/* Keep the landscape at scene scale on phones, independent of the long scroll track. */
@media (max-width: 760px) {
  .steady-journey .journey-sticky { background: #10373b; }
  .steady-journey .next-hero__visual {
    background:
      linear-gradient(180deg, #10373b 0, #10373b99 24%, #10373b22 55%, #10373b 100%),
      url('../assets/hero-distant-worlds-v1.jpg') center / cover no-repeat,
      #10373b;
  }
}