/* Two consecutive moments, framed as straight, paired app screens. */
.product-window .preview-apps {
  --screen-width: min(17.2vw, 218px, 25svh);
  right: 3.5%;
  top: 53%;
  transform: translateY(-50%);
}
.preview-journey {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 18px);
  animation: journeyArrival .5s var(--ease) both;
}
.preview-journey[hidden] { display: none; }
.journey-step { width: var(--screen-width); margin: 0; flex: none; }
.journey-step figcaption {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  color: #f4f2e9;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 8px #0009;
}
.journey-step figcaption > span { opacity: .6; font-variant-numeric: tabular-nums; }
.journey-phone {
  --u: calc(var(--screen-width) * .01);
  width: var(--screen-width);
  height: calc(var(--screen-width) * 2.1);
  padding: calc(var(--u) * 1.8);
  border: 1px solid #ffffff80;
  border-radius: calc(var(--u) * 13.5);
  background: linear-gradient(145deg, #bdc0b8, #20231f 35%, #6e7269);
  box-shadow: 0 12px 30px #0002;
  letter-spacing: 0;
  text-align: left;
  overflow: hidden;
}
.journey-screen {
  height: 100%;
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 11.5);
  background: var(--screen-bg);
  color: var(--screen-ink);
  line-height: 1.25;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen-paper { --screen-bg: #f1f0e9; --screen-ink: #1a201b; --screen-muted: #677065; --screen-line: #1a201b22; }
.screen-ink { --screen-bg: #17201c; --screen-ink: #f1f0e9; --screen-muted: #b0b9ac; --screen-line: #f1f0e92b; }
.journey-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 6);
  font-size: calc(var(--u) * 3.4);
  flex: none;
}
.journey-status i { width: 25%; height: calc(var(--u) * 4); border-radius: 20px; background: #090d0a; }
.journey-app { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * 8); flex: none; }
.journey-app > strong { font-size: calc(var(--u) * 7); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.journey-app > strong > span { color: var(--orange); }
.journey-app > span { font-size: calc(var(--u) * 4); letter-spacing: .1em; }
.journey-main { display: flex; flex-direction: column; gap: calc(var(--u) * 5); flex: 1; min-height: 0; }
.journey-eyebrow { font-size: calc(var(--u) * 3.5); line-height: 1.2; letter-spacing: .06em; color: var(--screen-muted); }
.journey-main h3 { font-size: calc(var(--u) * 11); line-height: 1.04; letter-spacing: -.055em; font-weight: 400; margin: 0; }
.journey-home { position: absolute; bottom: calc(var(--u) * 3); left: 35%; width: 30%; height: calc(var(--u) * 1.2); border-radius: 10px; background: var(--screen-ink); opacity: .75; }
.journey-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.course-card { display: flex; gap: calc(var(--u) * 4); align-items: center; background: #e4e7dc; padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 3); }
.course-page { display: grid; place-items: center; width: calc(var(--u) * 10); height: calc(var(--u) * 12); background: #fdfdf7; border: 1px solid #bfc5b4; font-size: calc(var(--u) * 8); line-height: 1; }
.course-card strong { display: block; font-size: calc(var(--u) * 4.8); line-height: 1.2; font-weight: 400; }
.course-card small { display: block; font-size: calc(var(--u) * 3.6); color: var(--screen-muted); margin-top: calc(var(--u) * 1.5); }
.course-check { margin-left: auto; color: #526c39; font-size: calc(var(--u) * 5); }
.journey-section-label { display: flex; justify-content: space-between; font-size: calc(var(--u) * 3.6); color: var(--screen-muted); letter-spacing: .04em; }
.journey-list { display: flex; flex-direction: column; }
.journey-row { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) 0; border-bottom: 1px solid var(--screen-line); }
.journey-row:first-child { padding-top: 0; }
.journey-row:last-child { border-bottom: 0; }
.journey-row > div { min-width: 0; }
.journey-thumb { width: calc(var(--u) * 15); height: calc(var(--u) * 15); object-fit: cover; border-radius: calc(var(--u) * 2); flex: none; }
.journey-row strong { display: block; font-size: calc(var(--u) * 4.8); line-height: 1.15; font-weight: 400; }
.journey-row small { display: block; font-size: calc(var(--u) * 3.5); line-height: 1.2; color: var(--screen-muted); margin-top: calc(var(--u) * 1.5); }
.journey-chevron { margin-left: auto; font-size: calc(var(--u) * 7); color: var(--screen-muted); }
.journey-row-number { width: calc(var(--u) * 9); font-size: calc(var(--u) * 3.8); color: var(--screen-muted); flex: none; }
.journey-action { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: calc(var(--u) * 4) calc(var(--u) * 5); background: var(--orange); color: #11110f; font-size: calc(var(--u) * 4.8); border-radius: calc(var(--u) * 2.5); line-height: 1.1; }
.object-study { position: relative; height: calc(var(--u) * 53); border-radius: calc(var(--u) * 3); overflow: hidden; flex: none; }
.object-study .journey-image { filter: brightness(.78); }
.object-study svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--acid); stroke-width: .8; }
.object-study > span { position: absolute; left: 8%; bottom: 8%; font-size: calc(var(--u) * 3.5); color: #fff; }
.journey-player { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.journey-player > small { font-size: calc(var(--u) * 3.4); color: var(--screen-muted); letter-spacing: .07em; }
.journey-player > strong { font-size: calc(var(--u) * 6); font-weight: 400; line-height: 1.2; }
.journey-wave { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 7); }
.journey-wave i { width: calc(var(--u) * .65); height: 35%; border-radius: 3px; background: var(--acid); opacity: .8; }
.journey-wave i:nth-child(3n) { height: 80%; }
.journey-wave i:nth-child(4n) { height: 55%; }
.journey-wave i:nth-child(7n) { height: 100%; }
.journey-player-controls { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 13); color: var(--screen-muted); font-size: calc(var(--u) * 8); }
.journey-player-controls b { display: grid; place-items: center; height: calc(var(--u) * 16); width: calc(var(--u) * 16); border-radius: 50%; background: var(--orange); color: #11110f; font-size: calc(var(--u) * 5); }
.journey-next { border-top: 1px solid var(--screen-line); padding-top: calc(var(--u) * 4); margin-top: auto; }
.journey-next small { display: block; font-size: calc(var(--u) * 3.4); color: var(--screen-muted); margin-bottom: calc(var(--u) * 2); letter-spacing: .05em; }
.journey-next strong { display: flex; justify-content: space-between; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 4.8); font-weight: 400; }
.way-plan .journey-main { gap: calc(var(--u) * 3.5); }
.way-plan h3 { font-family: Nimbus, Arial, sans-serif; letter-spacing: -.045em; }
.journey-duration { display: flex; padding: calc(var(--u) * 1); border: 1px solid #1a201b2e; border-radius: calc(var(--u) * 3); }
.journey-duration > * { flex: 1; padding: calc(var(--u) * 2.5) 0; text-align: center; font-size: calc(var(--u) * 4); font-weight: 400; }
.journey-duration > b { background: #1f3328; color: #f1f0e9; border-radius: calc(var(--u) * 2); }
.journey-map { display: block; width: 100%; height: calc(var(--u) * 48); border-radius: calc(var(--u) * 3); flex: none; }
.map-water { fill: none; stroke: #9eada5; stroke-width: 35; }
.map-blocks { fill: #c5cec0; stroke: #f6f8ed; stroke-width: 2; }
.map-walk { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linejoin: round; }
.map-point { fill: #263e30; stroke: #f1f0e9; stroke-width: 2; }
.map-point-text { fill: #fff; font: 600 10px Graphie, sans-serif; text-anchor: middle; }
.map-you { fill: var(--orange); stroke: #fff; stroke-width: 2; }
.journey-route-summary { display: flex; justify-content: space-between; font-size: calc(var(--u) * 4); }
.journey-route-summary strong { font-weight: 400; }
.journey-route-summary > span { color: var(--screen-muted); }
.way-plan .journey-row { padding: calc(var(--u) * 2.5) 0; }
.way-plan .journey-row small { display: none; }
.way-plan .journey-row strong { font-size: calc(var(--u) * 4.7); }
.journey-place-photo { position: relative; height: calc(var(--u) * 84); overflow: hidden; border-radius: calc(var(--u) * 3); flex: none; }
.journey-place-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, #101d16cc); }
.journey-place-step { position: absolute; top: 8%; left: 8%; background: #17201cbb; padding: calc(var(--u) * 2); font-size: calc(var(--u) * 3.5); z-index: 1; }
.journey-place-photo h3 { position: absolute; bottom: 8%; left: 8%; color: #fff; font-family: Nimbus, Arial, sans-serif; font-size: calc(var(--u) * 10.5); z-index: 1; }
.intent-context { font-size: calc(var(--u) * 4); color: var(--screen-muted); }
.journey-intents { display: flex; flex-direction: column; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 3); }
.journey-intent { display: flex; align-items: center; gap: calc(var(--u) * 4); border: 1px solid var(--screen-line); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 3); }
.match-intent .journey-main { gap: calc(var(--u) * 4); }
.journey-intent.selected { background: var(--orange); color: #171c16; border-color: var(--orange); }
.intent-mark { font-size: calc(var(--u) * 3.8); opacity: .65; }
.journey-intent strong { display: block; font-size: calc(var(--u) * 5.3); line-height: 1.2; font-weight: 400; }
.journey-intent small { display: block; font-size: calc(var(--u) * 3.5); margin-top: calc(var(--u) * 1.5); opacity: .65; }
.journey-intent > span:last-child { margin-left: auto; font-size: calc(var(--u) * 5); }
.journey-intent-note { display: flex; align-items: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 3); }
.intent-rule { width: calc(var(--u) * 12); height: 1px; background: var(--acid); }
.journey-intent-note p { font-size: calc(var(--u) * 5); line-height: 1.3; margin: 0; color: var(--screen-muted); }
.match-results .journey-main { gap: calc(var(--u) * 4); }
.journey-feature { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.journey-feature .journey-image { height: calc(var(--u) * 40); border-radius: calc(var(--u) * 3); }
.journey-feature > span { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 3.4); color: #846140; }
.journey-feature > strong { font-size: calc(var(--u) * 7); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; }
.journey-feature > small { font-size: calc(var(--u) * 4); color: var(--screen-muted); }
.match-results .journey-thumb { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.journey-mini-audio { margin-top: auto; padding: calc(var(--u) * 3); display: flex; align-items: center; gap: calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: #e3e6db; }
.journey-mini-audio > b { display: grid; place-items: center; width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: var(--orange); color: #111; font-size: calc(var(--u) * 4); }
.journey-mini-audio small { display: block; font-size: calc(var(--u) * 3); color: var(--screen-muted); }
.journey-mini-audio strong { display: block; font-size: calc(var(--u) * 4.5); margin-top: calc(var(--u) * 1); font-weight: 400; }
.journey-mini-audio > span { font-size: calc(var(--u) * 5); margin-left: auto; }
.product-window .window-copy h2 { max-width: 44%; font-size: clamp(28px, 3.6vw, 58px); }
.product-window .window-copy a, .product-window .window-copy > .eyebrow { max-width: 43%; }
@keyframes journeyArrival { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .compact-home .product-window { top: 104px; bottom: 100px; }
  .product-window .preview-apps { --screen-width: min(34vw, 150px, 22svh); top: 50%; left: 50%; right: auto; transform: translate(-50%, -64%); }
  .preview-journey { gap: 12px; }
  .journey-step figcaption { font-size: 11px; gap: 5px; margin-top: 8px; }
  .product-window .window-copy h2 { max-width: 100%; font-size: clamp(22px, 5.4vw, 30px); line-height: 1.03; }
  .product-window .window-copy a { max-width: 100%; margin-top: 12px; }
  .product-window .window-copy > .eyebrow { max-width: 80%; font-size: 12px; }
  .product-window .preview-sketches { width: 94%; left: 0; top: 40px; height: 48%; }
}
@media (prefers-reduced-motion: reduce) { .preview-journey { animation: none; } }