/* v3.7: A single interactive story in the existing homepage flow. */
.waddles-story { padding-block: 52px; scroll-margin-top: 80px; }
.journey-layout { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.journey-copy h2 { margin: 14px 0 22px; line-height: 1.12; }
.journey-copy .story-lede { max-width: 39ch; }
.journey-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0 24px; }
.journey-prompt { display: block; color: var(--ink); font-size: .91rem; font-weight: 600; margin-top: 24px; }
.journey-choice { font: inherit; font-size: .92rem; font-weight: 600; padding: 12px 17px; min-height: 48px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); cursor: pointer; }
.journey-choice:hover { border-color: var(--brand-ink); }
.journey-choice[aria-pressed="true"] { background: var(--brand-cta); color: var(--on-accent); border-color: var(--brand-cta); }
.journey-choice:focus-visible, .journey-small-button:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 4px; }
.journey-result { min-height: 134px; border-left: 2px solid var(--brand-ink); padding: 2px 0 0 18px; }
.launch-page .journey-result h3 { font-size: 1.15rem; line-height: 1.35; margin: 0 0 10px; letter-spacing: -.015em; }
.journey-result p { font-size: .93rem; line-height: 1.65; margin: 0; max-width: 43ch; }
.journey-copy .journey-app-link { display: inline-block; margin-top: 21px; font-size: .85rem; }
.journey-figure { margin: 0; min-width: 0; }
.journey-scene { position: relative; overflow: hidden; }
.journey-scene::before { content: ''; position: absolute; inset: 4% -4% 0; pointer-events: none; background: radial-gradient(ellipse at center, #75b7b71c, transparent 68%); }
waddles-journey { display: block; position: relative; width: 100%; aspect-ratio: 1.4; isolation: isolate; }
waddles-journey > img { position: absolute; width: 85%; height: 85%; left: 7.5%; top: 7.5%; object-fit: contain; }
.journey-stop-label { position: absolute; transform: translate(-50%, 22px); z-index: 1; opacity: 0; pointer-events: none; white-space: nowrap; font-size: .69rem; line-height: 1.3; font-weight: 600; color: #294e50; background: #fbf8efee; border-radius: 5px; padding: 6px 8px; }
.journey-stop-label[data-selected="true"] { color: #fff; background: #126979; }
.journey-stop-label small { display: block; font-size: .64rem; font-weight: 400; margin-top: 2px; }
.journey-scene-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.launch-page .journey-status { font-size: .82rem; margin: 0; color: var(--ink); font-weight: 500; }
.journey-small-button { appearance: none; background: transparent; border: 0; color: var(--ink-2); font: inherit; font-size: .75rem; padding: 12px 0 12px 10px; cursor: pointer; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }
.journey-replay-row { height: 32px; text-align: center; }
.journey-replay-row button { padding: 8px 12px; }
.launch-page .journey-example-note { font-size: .73rem; line-height: 1.55; margin: 10px 0 0; }
.waddles-story [hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
 .journey-scene::before { background: radial-gradient(ellipse at center, #75b7b713, transparent 68%); }
}
@media (max-width: 760px) {
 .waddles-story { padding-block: 44px; }
 .journey-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
 .journey-copy { display: contents; }
 .journey-copy > .eyebrow { order: 0; margin: 0; }
 .journey-copy h2 { order: 1; }
 .journey-copy > .story-lede { order: 2; margin-bottom: 0; }
 .journey-copy > [data-journey-controls] { order: 3; }
 .journey-figure { order: 4; }
 .journey-copy > .journey-result { order: 5; margin-top: 22px; }
 .journey-copy > .journey-app-link { order: 6; }
 .journey-copy h2 br { display: none; }
 .journey-copy h2 { max-width: 14ch; font-size: 2.2rem; margin-bottom: 16px; }
 .journey-copy .story-lede { font-size: 1rem; line-height: 1.65; }
 .journey-result { min-height: 110px; }
 .journey-copy .journey-app-link { margin-top: 15px; }
 waddles-journey { aspect-ratio: 1.28; max-height: 300px; }
 .journey-prompt { margin-top: 18px; }
 .journey-choices { margin-bottom: 20px; }
 .journey-stop-label { font-size: .62rem; transform: translate(-50%, 17px); padding: 5px 6px; }
 .journey-stop-label small { font-size: .59rem; }
}