#journey *{box-sizing:border-box}#journey .stage{height:100svh;position:sticky;top:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:9vw;padding:90px 8vw 40px}#journey .editorial{position:relative;width:32vw;height:200px}#journey .caption{position:absolute;inset:0;will-change:opacity,transform}#journey .caption h2{font-size:clamp(42px,5vw,76px);font-weight:600;line-height:1.05;letter-spacing:-.05em;margin:0 0 22px}#journey .caption p{font-size:clamp(16px,1.5vw,22px);line-height:1.5;margin:0;max-width:410px}#journey .phone-wrap{position:relative;height:min(77svh,800px);aspect-ratio:.477;flex-shrink:0}#journey .phone{position:absolute;inset:0;border-radius:clamp(28px,4.5vh,50px);padding:7px;background:linear-gradient(125deg,#a6abb5,#303139 35%,#989ca5 75%,#34363d);overflow:hidden}#journey .display{position:relative;height:100%;width:100%;overflow:hidden;border:4px solid #101116;border-radius:clamp(23px,4vh,44px);background:#fff}#journey .screen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity}#journey .island{position:absolute;width:26%;height:2.6%;background:#090a0e;border-radius:50px;top:2.3%;left:37%}#journey #steps{margin-top:-100svh;pointer-events:none}#journey .step{height:110svh}#journey .step:last-child{height:100svh}@media(max-width:850px){#journey .stage{flex-direction:column;gap:18px;padding:75px 6vw 24px}#journey .editorial{width:100%;height:145px;flex-shrink:0;text-align:left}#journey .caption h2{font-size:36px;margin-bottom:12px}#journey .caption p{font-size:15px;line-height:1.45;max-width:390px;margin:0}#journey .phone-wrap{height:min(60svh,calc(100svh - 255px))}}@media(prefers-reduced-motion:reduce){}
/* Feature explanations frame the device, in the same composition for every scene. */#journey .stage{display:block;padding:0}#journey .editorial{position:absolute;top:88px;left:7vw;width:86vw;height:110px}#journey .caption h2{font-size:clamp(30px,3.4vw,48px);margin-bottom:10px}#journey .caption p{font-size:16px;max-width:680px;line-height:1.45}#journey .phone-wrap{position:absolute;height:min(66svh,740px);bottom:4svh;left:50%;transform:translateX(-50%)}#journey #features{position:absolute;top:27svh;bottom:8svh;left:7vw;right:7vw;pointer-events:none}#journey .feature-scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) min(36vw,440px) minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:4vw;row-gap:30px;align-items:center}#journey .feature-0{grid-column:1;grid-row:1}#journey .feature-1{grid-column:1;grid-row:2}#journey .feature-2{grid-column:3;grid-row:1}#journey .feature-3{grid-column:3;grid-row:2}#journey .feature svg{display:block;width:26px;height:26px;margin-bottom:16px}#journey .feature h2{font-size:clamp(17px,1.55vw,25px);font-weight:600;letter-spacing:-.035em;line-height:1.2;margin:0 0 12px}#journey .feature p{font-size:clamp(13px,1.1vw,17px);line-height:1.55;margin:0;max-width:300px;color:#000}
@media(max-width:850px){#journey .editorial{top:62px;left:6vw;width:88vw;height:105px;text-align:left}#journey .caption h2{font-size:28px;margin-bottom:6px}#journey .caption p{font-size:13px;max-width:100%;line-height:1.4}#journey .phone-wrap{height:36svh;top:175px;bottom:auto}#journey #features{top:calc(175px + 38svh);bottom:16px;left:6vw;right:6vw}#journey .feature-scene{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:start;gap:16px 24px}#journey .feature-0{grid-column:1;grid-row:1}#journey .feature-1{grid-column:1;grid-row:2}#journey .feature-2{grid-column:2;grid-row:1}#journey .feature-3{grid-column:2;grid-row:2}#journey .feature svg{width:18px;height:18px;margin-bottom:6px}#journey .feature h2{font-size:13px;margin-bottom:5px}#journey .feature p{font-size:11px;line-height:1.35}}
@media(max-width:850px) and (max-height:760px){#journey .phone-wrap{top:145px;height:29svh}#journey #features{top:calc(153px + 29svh)}#journey .editorial{top:55px}#journey .caption h2{font-size:24px}#journey .feature-scene{gap:10px 18px}#journey .feature svg{display:none}}
/* Centered heading and a tightly grouped device / feature composition. */
#journey .stage{--device-height:min(60svh,680px);--device-width:min(28.62svh,324.36px)}
#journey .editorial{top:4svh;left:8vw;width:84vw;height:30svh;text-align:center}#journey .screen-name{font-size:13px;font-weight:600;margin-bottom:12px}#journey .caption h2{font-size:clamp(32px,5.8svh,66px);line-height:1.04;letter-spacing:-.045em;margin:0 0 16px}#journey .caption p{max-width:640px;margin:0 auto;font-size:clamp(13px,1.8svh,18px);line-height:1.45}#journey .phone-wrap{height:var(--device-height);bottom:3svh}#journey #features{top:40svh;bottom:6svh;left:50%;right:auto;width:min(90vw,calc(var(--device-width) + 640px));transform:translateX(-50%)}#journey .feature-scene{grid-template-columns:minmax(0,1fr) var(--device-width) minmax(0,1fr);column-gap:clamp(20px,3vw,44px);row-gap:20px}#journey .feature h2{font-size:clamp(16px,1.4vw,22px)}#journey .feature p{font-size:clamp(12px,1vw,16px)}#journey .feature-0,#journey .feature-1{justify-self:end;max-width:255px}#journey .feature-2,#journey .feature-3{max-width:255px}
@media(max-width:850px){#journey .editorial{top:3svh;height:22svh;left:6vw;width:88vw;text-align:center}#journey .screen-name{font-size:11px;margin-bottom:7px}#journey .caption h2{font-size:clamp(26px,4svh,38px);margin-bottom:9px}#journey .caption p{font-size:12px;max-width:400px}#journey .phone-wrap{top:26svh;bottom:auto;height:35svh}#journey #features{top:64svh;bottom:12px;width:88vw;left:6vw;transform:none}#journey .feature-scene{grid-template-columns:1fr 1fr;gap:14px 22px}#journey .feature-0,#journey .feature-1{justify-self:stretch;max-width:none}#journey .feature-2,#journey .feature-3{max-width:none}#journey .feature svg{width:17px;height:17px;margin-bottom:5px}#journey .feature h2{font-size:13px;margin-bottom:4px}#journey .feature p{font-size:11px;line-height:1.35}}
@media(max-width:850px) and (max-height:760px){#journey .feature svg{display:none}#journey .feature-scene{gap:10px 18px}#journey .feature h2{font-size:12px}#journey .feature p{font-size:10px}}
/* Bring the device directly beneath the heading instead of anchoring it far below. */
@media(min-width:851px){#journey .stage{--device-height:min(67svh,760px);--device-width:min(31.959svh,362.52px)}#journey .editorial{top:3svh}#journey .screen-name{margin-bottom:8px}#journey .caption h2{font-size:clamp(36px,6.8svh,78px);margin-bottom:12px}#journey .phone-wrap{top:30svh;bottom:auto}#journey #features{top:34svh;bottom:5svh}}
@media(max-width:850px){#journey .phone-wrap{top:24svh}#journey #features{top:62svh}}
/* Typography tones from the reference. */
#journey .caption h2,#journey .feature h2{color:#1d1d1f}#journey .screen-name,#journey .caption p,#journey .feature p{color:#6e6e73}
/* Reveal each capability in sequence once its section becomes current. */
#journey .feature-scene .feature{opacity:0;transform:translateY(14px);transition:opacity 520ms ease,transform 650ms cubic-bezier(.22,1,.36,1);transition-delay:0ms}
#journey .feature-scene.is-visible .feature{opacity:1;transform:translateY(0)}
#journey .feature-scene.is-visible .feature-0{transition-delay:100ms}
#journey .feature-scene.is-visible .feature-1{transition-delay:240ms}
#journey .feature-scene.is-visible .feature-2{transition-delay:380ms}
#journey .feature-scene.is-visible .feature-3{transition-delay:520ms}
@media(prefers-reduced-motion:reduce){#journey .feature-scene .feature{transform:none;transition:none;transition-delay:0ms}}
/* Pings becomes a split composition, driven by the same reversible scroll progress. */
#journey .ping-story{position:absolute;left:9vw;top:18svh;width:43vw;max-width:680px;opacity:0;visibility:hidden}#journey .ping-story h2{font-size:clamp(32px,4.1vw,66px);line-height:1.05;letter-spacing:-.045em;font-weight:600;color:#1d1d1f;margin:18px 0 24px}#journey .ping-description{font-size:clamp(15px,1.5vw,23px);line-height:1.5;color:#6e6e73;margin:0 0 26px}#journey .ping-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}#journey .ping-tiles li{background:#f2f2f7;border:1px solid transparent;border-radius:13px;padding:14px 16px;font-size:clamp(12px,1.15vw,18px);line-height:1.3;color:#1d1d1f;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .65s cubic-bezier(.22,1,.36,1)}#journey .ping-story.is-visible li{opacity:1;transform:none}#journey .ping-story.is-visible li:nth-child(1){transition-delay:80ms}#journey .ping-story.is-visible li:nth-child(2){transition-delay:140ms}#journey .ping-story.is-visible li:nth-child(3){transition-delay:200ms}#journey .ping-story.is-visible li:nth-child(4){transition-delay:260ms}#journey .ping-story.is-visible li:nth-child(5){transition-delay:320ms}#journey .ping-story.is-visible li:nth-child(6){transition-delay:380ms}#journey .ping-story.is-visible li:nth-child(7){transition-delay:440ms}#journey .ping-story.is-visible li:nth-child(8){transition-delay:500ms}#journey .ping-anonymous{color:#6e6e73;font-size:clamp(12px,1.2vw,18px);margin:20px 0 0}
@media(min-width:851px){#journey .phone-wrap{top:calc(30svh - var(--ping,0)*23svh);height:calc(var(--device-height) + var(--ping,0)*19svh);transform:translateX(calc(-50% + var(--ping,0)*23vw))}}
@media(max-width:850px){#journey .ping-story{left:5vw;top:24svh;width:44vw}#journey .ping-story h2{font-size:clamp(21px,4vw,32px);margin:10px 0 14px}#journey .ping-description{font-size:12px;line-height:1.45;margin-bottom:16px}#journey .ping-tiles{grid-template-columns:1fr;gap:5px}#journey .ping-tiles li{font-size:11px;padding:7px 9px;border-radius:8px}#journey .ping-anonymous{font-size:11px;margin-top:12px}#journey .phone-wrap{transform:translateX(calc(-50% + var(--ping,0)*25vw))}#journey .ping-story .screen-name{font-size:11px}}
@media(prefers-reduced-motion:reduce){#journey .ping-tiles li{transition:none;transform:none}}
/* Shorter travel and faster reveals keep scrolling responsive. */
#journey .step{height:60svh}#journey .step:last-child{height:100svh}
#journey .feature-scene .feature{transition-duration:260ms,320ms}
#journey .feature-scene.is-visible .feature-0{transition-delay:0ms}#journey .feature-scene.is-visible .feature-1{transition-delay:70ms}#journey .feature-scene.is-visible .feature-2{transition-delay:140ms}#journey .feature-scene.is-visible .feature-3{transition-delay:210ms}
#journey .ping-tiles li{transition-duration:240ms,320ms}
#journey .ping-story.is-visible li:nth-child(1){transition-delay:0ms}#journey .ping-story.is-visible li:nth-child(2){transition-delay:40ms}#journey .ping-story.is-visible li:nth-child(3){transition-delay:80ms}#journey .ping-story.is-visible li:nth-child(4){transition-delay:120ms}#journey .ping-story.is-visible li:nth-child(5){transition-delay:160ms}#journey .ping-story.is-visible li:nth-child(6){transition-delay:200ms}#journey .ping-story.is-visible li:nth-child(7){transition-delay:240ms}#journey .ping-story.is-visible li:nth-child(8){transition-delay:280ms}
@media(prefers-reduced-motion:reduce){#journey .feature-scene .feature,#journey .ping-tiles li{transition:none!important}}
/* Profile opens into lifestyle, interests, and payment details. */
#journey .profile-story{position:absolute;top:33svh;left:49%;width:40%;max-width:610px;opacity:0;visibility:hidden}#journey .profile-group{margin-bottom:22px;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .4s}#journey .profile-story.is-visible .profile-group{opacity:1;transform:none}#journey .profile-story.is-visible .profile-group:nth-child(2){transition-delay:90ms}#journey .profile-story.is-visible .profile-group:nth-child(3){transition-delay:180ms}#journey .profile-group h2{color:#1d1d1f;font-size:clamp(17px,2.5svh,27px);letter-spacing:-.035em;margin:0 0 14px}#journey .lifestyle-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}#journey .lifestyle-grid>div,#journey .payment-grid>div{background:#f5f5f7;border-radius:17px;padding:12px 17px}#journey .lifestyle-grid dt{font-size:12px;color:#6e6e73;margin-bottom:5px}#journey .lifestyle-grid dd{font-size:15px;font-weight:600;margin:0;color:#1d1d1f}#journey .interests{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;max-width:430px}#journey .interests li{border-radius:30px;padding:7px 13px;font-size:14px;color:#fa5960;background:#fbe5e6}#journey .interests li:nth-child(2){color:#159348;background:#e0f5e7}#journey .interests li:nth-child(3){color:#6a5bdb;background:#e9e5fb}#journey .interests li:nth-child(4){color:#07989a;background:#dff4f4}#journey .interests li:nth-child(5){color:#c643b0;background:#f6e3f3}#journey .interests li:nth-child(7){color:#087bea;background:#e1edff}#journey .payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}#journey .payment-grid>div{display:flex;align-items:center;gap:12px}#journey .payment-grid img{width:32px;height:32px;object-fit:contain}#journey .payment-grid strong{display:block;font-size:15px;color:#1d1d1f}#journey .payment-grid small{display:block;font-size:12px;color:#6e6e73;margin-top:4px}
@media(min-width:851px){#journey .phone-wrap{transform:translateX(calc(-50% + var(--ping,0)*23vw - var(--profile,0)*var(--profile-offset)))}}
@media(max-width:850px){#journey .phone-wrap{transform:translateX(calc(-50% + var(--ping,0)*25vw - var(--profile,0)*var(--profile-offset)))}#journey .profile-story{top:28svh;left:47%;width:49%;max-width:none}#journey .profile-group{margin-bottom:13px}#journey .profile-group h2{font-size:15px;margin-bottom:8px}#journey .lifestyle-grid{gap:5px}#journey .lifestyle-grid>div{padding:8px;border-radius:10px}#journey .lifestyle-grid dt{font-size:10px}#journey .lifestyle-grid dd{font-size:11px}#journey .interests{gap:5px}#journey .interests li{font-size:10px;padding:5px 8px}#journey .payment-grid{grid-template-columns:1fr;gap:5px}#journey .payment-grid>div{padding:8px;border-radius:10px}#journey .payment-grid img{width:24px;height:24px}#journey .payment-grid strong{font-size:11px}#journey .payment-grid small{font-size:10px}}
@media(prefers-reduced-motion:reduce){#journey .profile-group{transition:none;transform:none}}

/* Native snapping handles wheel, trackpad, touch, and keyboard scrolling together. */
#journey .step{scroll-snap-align:start;scroll-snap-stop:always}

#journey .ping-tiles li{display:flex;align-items:center;gap:12px}#journey .ping-tiles svg{width:22px;height:22px;flex-shrink:0}
@media(max-width:850px){#journey .ping-tiles li{gap:8px}#journey .ping-tiles svg{width:17px;height:17px}}

#journey .lifestyle-grid>div{position:relative;padding-left:57px}
#journey .lifestyle-grid dt svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:25px;height:25px;color:#99999f}
@media(max-width:850px){#journey .lifestyle-grid>div{padding-left:32px}#journey .lifestyle-grid dt svg{left:8px;width:17px;height:17px}}

/* Ledger uses the main website's expandable overview composition. */
#journey .ledger-story{--paper:#f2f2f7;--ink:#1d1d1f;--ink-2:#6e6e73;--spring:cubic-bezier(.22,1,.36,1);--ease-out:ease-out;position:absolute;left:9.6vw;top:50%;transform:translateY(-50%);width:38.3vw;opacity:0;visibility:hidden}
#journey .ledger-story .pin-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#journey .ledger-story .pin-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; max-width: 480px; justify-self: start; }
#journey .ledger-story .pin-step { padding-inline: 22px; transition: padding .5s var(--spring); }
#journey .ledger-story .pin-step button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; background: var(--paper); border-radius: 24px; padding: 22px 28px; transition: padding .5s var(--spring); }
#journey .ledger-story .pin-step .ps-label { display: block; font-size: 17px; letter-spacing: -0.022em; color: var(--ink-2); transition: color .3s var(--ease-out); }
#journey .ledger-story .pin-step button:hover .ps-label { color: var(--ink); }
#journey .ledger-story .pin-step .ps-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--spring), opacity .35s var(--ease-out); }
#journey .ledger-story .pin-step .ps-body > span { min-height: 0; overflow: hidden; display: grid; gap: 14px; }
#journey .ledger-story .pin-step .ps-title { padding-top: 36px; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
#journey .ledger-story .pin-step .ps-text { font-size: 19px; line-height: 1.42; color: var(--ink-2); }
#journey .ledger-story .pin-step.is-active { padding-inline: 0; }
#journey .ledger-story .pin-step.is-active button { padding: 30px 34px 34px; box-shadow: none; }
#journey .ledger-story .pin-step.is-active .ps-body { grid-template-rows: 1fr; opacity: 1; }
#journey .ledger-story .pin-step button:focus-visible { outline-offset: 6px; }
#journey .ledger-story .ps-title{font-size:clamp(24px,2.8vw,36px)}
@media(min-width:851px){#journey .phone-wrap{top:calc(30svh - var(--ping,0)*23svh - var(--ledger,0)*14svh);height:calc(var(--device-height) + var(--ping,0)*19svh + var(--ledger,0)*1svh);transform:translateX(calc(-50% + var(--ping,0)*23vw + var(--ledger,0)*23vw - var(--profile,0)*var(--profile-offset)))}}
@media(max-width:850px){#journey .ledger-story{left:4vw;width:46vw}#journey .ledger-story .pin-step{padding-inline:6px}#journey .ledger-story .pin-step button{padding:12px;border-radius:15px}#journey .ledger-story .pin-step.is-active button{padding:16px}#journey .ledger-story .pin-step .ps-label{font-size:12px}#journey .ledger-story .pin-step .ps-title{padding-top:16px;font-size:20px}#journey .ledger-story .pin-step .ps-text{font-size:12px}#journey .phone-wrap{transform:translateX(calc(-50% + var(--ping,0)*25vw + var(--ledger,0)*25vw - var(--profile,0)*var(--profile-offset)))}}
@media(prefers-reduced-motion:reduce){#journey .ledger-story *{transition:none!important}}

/* Ledger introduction scrolls away before its five pinned detail steps. */
#journey .ledger-story{top:calc(50% + var(--ledger-intro,0)*var(--ledger,0)*38svh)}
@media(min-width:851px){#journey .phone-wrap{top:calc(30svh - var(--ping,0)*23svh - var(--ledger,0)*14svh + var(--ledger-intro,0)*var(--ledger,0)*38svh)}}

/* Keep the full Ledger composition within a single viewport throughout its steps. */
#journey .ledger-story{left:12vw;top:64svh;width:38vw;transform:translateY(-50%)}
#journey .ledger-story .pin-steps{gap:1svh}
#journey .ledger-story .pin-step{padding-inline:16px}
#journey .ledger-story .pin-step button{padding:1.6svh 22px;border-radius:20px}
#journey .ledger-story .pin-step.is-active button{padding:2.2svh 26px}
#journey .ledger-story .pin-step .ps-label{font-size:clamp(12px,1.8svh,17px)}
#journey .ledger-story .pin-step .ps-title{padding-top:2.3svh;font-size:clamp(20px,3.2svh,32px)}
#journey .ledger-story .pin-step .ps-text{font-size:clamp(12px,1.9svh,18px)}
#journey .ledger-story .pin-step .ps-body>span{gap:1.2svh}
@media(min-width:851px){#journey .phone-wrap{top:calc(30svh - var(--ping,0)*23svh + var(--ledger,0)*1svh);height:calc(var(--device-height) + var(--ping,0)*19svh - var(--ledger,0)*1svh);transform:translateX(calc(-50% + var(--ping,0)*23vw + var(--ledger,0)*21vw - var(--profile,0)*var(--profile-offset)))}}
@media(max-width:850px){#journey .ledger-story{left:4vw;width:46vw;top:61svh}#journey .ledger-story .pin-step{padding-inline:4px}#journey .ledger-story .pin-step button{padding:10px}#journey .ledger-story .pin-step.is-active button{padding:12px}#journey .ledger-story .pin-step .ps-title{font-size:18px}#journey .ledger-story .pin-step .ps-text{font-size:11px}}

/* Chat examples show reactions and reply context alongside the live screen. */
#journey .chat-story{position:absolute;left:12vw;top:34svh;width:38vw;max-width:560px;opacity:0;visibility:hidden;display:grid;gap:3svh}
#journey .chat-demo{opacity:0;transform:translateY(12px);transition:opacity .25s,transform .3s}#journey .chat-story.is-visible .chat-demo{opacity:1;transform:none}#journey .chat-story.is-visible .chat-demo:nth-child(2){transition-delay:100ms}
#journey .chat-demo h2{font-size:clamp(17px,2.5svh,25px);letter-spacing:-.03em;color:#1d1d1f;margin:0 0 6px}#journey .chat-demo>p{color:#6e6e73;font-size:clamp(12px,1.7svh,16px);line-height:1.4;margin:0 0 14px}
#journey .message-example{max-width:400px}#journey .message-author{display:block;font-size:12px;color:#6e6e73;margin:0 0 7px 12px}#journey .message-bubble{background:#f2f2f7;color:#1d1d1f;padding:16px 20px;border-radius:20px;font-size:clamp(13px,1.9svh,18px);line-height:1.45}#journey .message-reactions{display:flex;gap:6px;margin:-5px 0 0 12px;position:relative}#journey .message-reactions>span{background:#e7f1ff;border:2px solid #fff;border-radius:20px;padding:5px 11px;font-size:15px}#journey .message-reactions b{font-size:12px;color:#087bea;margin-left:4px;font-weight:500}
#journey .outgoing{margin-left:25px}#journey .outgoing .message-bubble{background:#087fff;color:white}#journey .message-bubble blockquote{margin:0 0 12px;padding:8px 12px;border-left:3px solid #fff;border-radius:4px;background:rgba(255,255,255,.17);font-size:13px}#journey .message-bubble blockquote strong,#journey .message-bubble blockquote span{display:block}#journey .message-bubble blockquote strong{margin-bottom:3px}
@media(min-width:851px){
 #journey .stage{--ledger-card-width:min(38vw,480px);--ledger-gap:clamp(32px,5vw,80px);--ledger-phone-width:calc(var(--device-width) - .477svh)}
 #journey .ledger-story{width:var(--ledger-card-width);left:calc(50% - (var(--ledger-card-width) + var(--ledger-gap) + var(--ledger-phone-width))/2)}
 #journey .phone-wrap{transform:translateX(calc(-50% + var(--ping,0)*23vw + var(--ledger,0)*(var(--ledger-card-width) + var(--ledger-gap))/2 + var(--chat,0)*21vw - var(--profile,0)*var(--profile-offset)))}
}
@media(max-width:850px){#journey .chat-story{left:4vw;top:30svh;width:44vw;gap:22px}#journey .chat-demo h2{font-size:16px}#journey .chat-demo>p{font-size:11px}#journey .message-bubble{padding:12px;font-size:12px}#journey .message-bubble blockquote{font-size:10px;padding:6px}#journey .outgoing{margin-left:0}#journey .message-reactions>span{font-size:12px;padding:4px 7px}#journey .phone-wrap{transform:translateX(calc(-50% + var(--ping,0)*25vw + var(--ledger,0)*25vw + var(--chat,0)*25vw - var(--profile,0)*var(--profile-offset)))}}
@media(prefers-reduced-motion:reduce){#journey .chat-demo{transition:none;transform:none}}

/* Match mobile/components/messages/MessageReplyThread.tsx. */
#journey .app-reply .reply-context{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:2px}
#journey .reply-quote{background:#f2f2f7;border-radius:14px;overflow:hidden;max-width:180px;min-width:36px;opacity:.8;color:#9a9aa0;font-size:12px;line-height:15px;padding:5px 9px}
#journey .reply-connector{display:block;margin-left:10px;margin-top:4px;overflow:hidden;flex-shrink:0}
#journey .app-reply .reply-answer{margin-left:44px;background:#087fff;color:#fff;width:fit-content;margin-top:-16px}

#journey .chat-story{left:8vw;width:46vw;max-width:700px;top:33svh;grid-template-columns:1fr 1fr;gap:3svh 24px}
#journey .chat-demo{min-width:0}#journey .chat-demo:nth-child(3){transition-delay:160ms}#journey .chat-demo:nth-child(4){transition-delay:230ms}
#journey .photo-widget{width:220px;max-width:100%}#journey .photo-count{display:block;text-align:right;padding-right:4px;margin-bottom:6px;color:#9a9aa0;font-size:13px;font-weight:600}
#journey .photo-deck{position:relative;height:236px;touch-action:pan-y;cursor:grab;outline-offset:8px}#journey .photo-card{position:absolute;top:0;left:0;width:210px;height:210px;border-radius:14px;border:.5px solid #ddd;box-shadow:0 2px 8px #00000024;background-image:url('../assets/room8-chats-photos-light.jpg');background-size:400px 870px;background-position:-160px -365px;transition:transform .35s cubic-bezier(.22,1,.36,1);pointer-events:none}
#journey .voice-widget{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:18px;width:228px;max-width:100%;min-height:48px;border:.5px solid #ddd;background:#f2f2f7;color:#087fff}#journey .voice-widget>svg{flex-shrink:0;margin:6px}#journey .voice-track{height:4px;flex:1;background:#e5e5ea;border-radius:2px}#journey .voice-track>span{display:block;width:32%;height:4px;background:#087fff;position:relative;border-radius:2px}#journey .voice-track>span:after{content:'';position:absolute;right:-4px;top:-3px;width:10px;height:10px;border-radius:50%;background:#087fff}#journey .voice-time{font-size:11px;font-variant-numeric:tabular-nums;min-width:34px;text-align:right;color:#9a9aa0}
@media(max-width:850px){#journey .chat-story{left:4vw;width:45vw;top:25svh;grid-template-columns:1fr;gap:12px}#journey .chat-demo>p{margin-bottom:7px}#journey .photo-widget{zoom:.55}#journey .chat-demo h2{font-size:13px}#journey .message-bubble{padding:8px;font-size:11px}#journey .voice-widget{min-height:38px;padding:4px 8px}}
@media(prefers-reduced-motion:reduce){#journey .photo-card{transition:none}}

/* Hover feedback stays separate from the staggered entrance animation. */
#journey .ping-tiles li{transition-property:opacity,transform,background-color,border-color,color,box-shadow;transition-duration:240ms,320ms,180ms,180ms,180ms,180ms}
@media(hover:hover){#journey .ping-story.is-visible .ping-tiles li:hover{background:#f2f2f7;border-color:transparent;color:#1d1d1f;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.08);transition-delay:0ms}}
@media(prefers-reduced-motion:reduce){#journey .ping-story.is-visible .ping-tiles li:hover{transform:none}}

/* Group the chat examples beside the device, using the quick-ping surface. */
#journey .chat-story{left:auto;right:calc(29vw + min(15.9795svh,181.26px) + 28px);width:46vw;max-width:640px;gap:16px;top:32svh}
#journey .chat-demo{background:#f2f2f7;border-radius:20px;padding:18px}
#journey .chat-demo .message-bubble:not(.reply-answer),#journey .chat-demo .reply-quote,#journey .chat-demo .voice-widget{background:#fff}
#journey .chat-demo .message-reactions>span{border-color:#f2f2f7}
#journey .photo-widget{zoom:.75}
@media(max-width:850px){#journey .chat-story{left:4vw;right:auto;width:calc(71vw - 17.5svh);max-width:46vw;top:25svh;gap:8px}#journey .chat-demo{padding:10px;border-radius:14px}#journey .photo-widget{zoom:.48}}

/* Give each chat example room to breathe and center its contents. */
#journey .chat-story{gap:24px}
#journey .chat-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(20px,2.6svh,30px) 22px}
#journey .chat-demo h2{margin-bottom:12px}
#journey .chat-demo>p{margin-bottom:24px;max-width:290px}
#journey .chat-demo .message-example{max-width:100%;margin-inline:auto;text-align:left}
#journey .chat-demo .photo-widget,#journey .chat-demo .voice-widget{margin-inline:auto}
#journey .chat-demo .message-author{text-align:center;margin-left:0;margin-bottom:10px}
#journey .chat-demo .message-reactions{justify-content:center;margin-left:0}
@media(max-width:850px){#journey .chat-story{gap:12px}#journey .chat-demo{padding:12px}#journey .chat-demo h2{margin-bottom:7px}#journey .chat-demo>p{margin-bottom:12px}}

#journey .chat-demo .message-author{text-align:left;margin-left:12px}
#journey .chat-demo .message-reactions{justify-content:flex-start;margin-left:12px}
#journey .voice-conversation{width:100%;max-width:290px;text-align:left;display:flex;flex-direction:column;gap:10px}
#journey .voice-conversation .message-author{margin-bottom:0}
#journey .voice-chat-question,#journey .voice-chat-answer{padding:10px 14px;border-radius:18px;font-size:clamp(12px,1.7svh,16px);line-height:1.4;max-width:95%;width:fit-content}
#journey .voice-chat-question{background:#fff;color:#1d1d1f}
#journey .voice-conversation .voice-widget{margin-inline:0}
#journey .voice-chat-answer{align-self:flex-end;background:#087fff;color:#fff;margin-top:2px}

/* Show the photo stack at its full app size. */
#journey .photo-widget{zoom:1}
@media(max-width:850px){#journey .photo-widget{zoom:.65}}

/* Match the chat grid to the phone bounds; enlarge photos only 10% from .75. */
#journey .photo-widget{zoom:.825}
@media(min-width:851px){
 #journey .chat-story{top:30svh;height:var(--device-height);grid-template-rows:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(12px,2svh,24px)}
 #journey .chat-demo{min-height:0;padding:clamp(12px,1.6svh,20px) 18px}
 #journey .chat-demo h2{margin-bottom:clamp(6px,1svh,12px)}
 #journey .chat-demo>p{margin-bottom:clamp(10px,1.5svh,18px)}

 #journey .voice-conversation{gap:6px}
 #journey .voice-chat-question,#journey .voice-chat-answer{padding:8px 12px}
}
@media(max-width:850px){#journey .photo-widget{zoom:.528}}

@media(min-width:851px) and (max-height:900px){#journey .photo-demo .photo-widget{zoom:.65}#journey .chat-demo h2{font-size:18px}#journey .chat-demo>p{font-size:12px}#journey .voice-conversation{gap:5px}#journey .voice-chat-question,#journey .voice-chat-answer{font-size:12px}}

#journey .photo-card{background-size:cover;background-position:center}
#journey .photo-card:nth-child(1){background-image:url('../assets/chat-stack-1-fixed.jpg')}
#journey .photo-card:nth-child(2){background-image:url('../assets/chat-stack-2.jpg')}
#journey .photo-card:nth-child(3){background-image:url('../assets/chat-stack-3-fixed.jpg')}

#journey .photo-card{transition:none;will-change:transform}#journey .photo-deck{user-select:none;-webkit-user-select:none}#journey .photo-deck.is-dragging{cursor:grabbing}

/* The supplied chat JPEG has off-white (238) whites baked in; normalize them. */



/* Keep the profile phone a consistent, close distance from its details. */
#journey .stage{--profile-gap:64px;--profile-phone-width:var(--device-width);--profile-content-width:min(40vw,610px);--profile-offset:calc((var(--profile-content-width) + var(--profile-gap))/2)}
#journey .profile-story{left:calc(50% + (var(--profile-phone-width) + var(--profile-gap) - var(--profile-content-width))/2)}
@media(max-width:850px){#journey .stage{--profile-gap:32px;--profile-phone-width:16.695svh}}

/* Align the profile features and closing note with the full phone height. */
#journey .profile-story{top:30svh;height:var(--device-height)}
#journey .profile-content{display:flex;flex-direction:column;justify-content:space-between;gap:16px;transform-origin:top left}
#journey .profile-content .profile-group{margin:0;flex-shrink:0}
#journey .profile-note{margin:0;color:#6e6e73;font-size:12px;line-height:1.5;flex-shrink:0}
@media(max-width:850px){#journey .profile-story{top:24svh;height:35svh}#journey .profile-content{gap:12px}#journey .profile-note{font-size:10px}}

/* Keep the interactive story within the retained main page. */
#journey { position: relative; isolation: isolate; background: #fff; color: #1d1d1f; }
#journey .stage { top: 0; height: 100svh; }
#journey .step { padding: 0; margin: 0; display: block; }
#journey #steps { margin-top: -100svh; }
#journey .step[id] { scroll-margin-top: 0; }
#journey .screen { border-radius: 0; }

#journey { overflow-anchor: none; }

/* A thin, uniform iPhone frame with continuous rounded corners. */
#journey .phone {
  padding: 0;
  border-radius: 18% / 8.5%;
  background: #17181c;
  overflow: visible;
  box-shadow: inset 0 0 0 1px #74767c, inset 0 0 0 3px #34353a, 0 18px 36px -20px #0005;
}
#journey .phone .display {
  position: absolute;
  inset: 1.1% 2.3%;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 16% / 7.7%;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}
#journey .phone::before,
#journey .phone::after {
  content: "";
  position: absolute;
  width: 2px;
  border-radius: 2px;
  pointer-events: none;
}
#journey .phone::before {
  left: -2px;
  top: 18%;
  height: 19%;
  background: linear-gradient(to bottom, #4e5057 0 18%, transparent 18% 29%, #4e5057 29% 60%, transparent 60% 69%, #4e5057 69% 100%);
}
#journey .phone::after { right: -2px; top: 28%; height: 10%; background: #4e5057; }
#journey .phone .island {
  top: 3.1%;
  left: 36%;
  width: 28%;
  height: 3.2%;
  border-radius: 999px;
  background: #050506;
  z-index: 2;
}

/* Mobile scenes scroll naturally and keep their text without phone previews. */
#journey .mobile-journey{display:none}
@media(max-width:850px){
 html,html.hero-free-scroll{scroll-snap-type:none!important}
 main *,#journey #steps>.step{scroll-snap-align:none!important;scroll-snap-stop:normal!important}
 #journey .stage,#journey #steps{display:none}
 #journey .mobile-journey{display:block;background:#fff}
 #journey .mobile-scene{padding:56px 6vw;max-width:680px;margin:auto}
 #journey .mobile-scene header{text-align:center;margin-bottom:28px}
 #journey .mobile-scene header h2{font-size:34px;line-height:1.08;letter-spacing:-.045em;margin:10px 0 16px;color:#1d1d1f}
 #journey .mobile-scene header p{font-size:15px;line-height:1.55;color:#6e6e73;margin:0}
 #journey .mobile-details{display:grid;gap:14px}
 #journey .mobile-details>article{padding:22px;border-radius:18px;background:#f2f2f7}
 #journey .mobile-details h3{font-size:20px;line-height:1.2;letter-spacing:-.025em;margin:0 0 10px;color:#1d1d1f}
 #journey .mobile-details article p{font-size:15px;line-height:1.5;color:#6e6e73;margin:0}
 #journey .mobile-details .ping-tiles{grid-template-columns:1fr 1fr}
 #journey .mobile-details .ping-tiles li{opacity:1;transform:none;font-size:13px;padding:14px 12px}
 #journey .mobile-details .ping-anonymous{text-align:center;font-size:14px}
 #journey .mobile-details .profile-story{position:static;width:100%;max-width:none;height:auto;opacity:1;visibility:visible;transform:none}
 #journey .mobile-details .profile-content{height:auto;transform:none;gap:24px}
 #journey .mobile-details .profile-group{opacity:1;transform:none}
 #journey .mobile-details .profile-group h2{font-size:21px}
 #journey .mobile-details .lifestyle-grid dt{font-size:12px}
 #journey .mobile-details .lifestyle-grid dd{font-size:14px}
 #journey .mobile-details .lifestyle-grid>div{padding:14px 10px 14px 42px}
 #journey .mobile-details .lifestyle-grid dt svg{left:12px;width:20px;height:20px}
 #journey .mobile-details .payment-grid{grid-template-columns:1fr 1fr}
 #journey .mobile-details .interests li{font-size:13px;padding:8px 12px}
 #journey .mobile-details .profile-note{font-size:12px}
}

@media(max-width:850px){
 #journey .mobile-details .chat-story{position:static;width:100%;max-width:none;height:auto;opacity:1;visibility:visible;display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:18px}
 #journey .mobile-details .chat-demo{opacity:1;transform:none;padding:24px 18px;min-height:0}
 #journey .mobile-details .chat-demo h2{font-size:21px;margin-bottom:10px}
 #journey .mobile-details .chat-demo>p{font-size:14px;line-height:1.5;margin-bottom:24px}
 #journey .mobile-details .message-bubble{font-size:15px;padding:14px 18px}
 #journey .mobile-details .photo-widget{zoom:.9}
 #journey .mobile-details .voice-widget{padding:9px 12px;min-height:48px}
 #journey .mobile-details .voice-chat-question,#journey .mobile-details .voice-chat-answer{font-size:14px}
}