/* Version D: the hero's moving film becomes a real CU Card. */
#card-details{display:none!important}
.app-map-context{position:absolute;z-index:4;opacity:0;pointer-events:none;overflow:hidden;border-radius:28px;box-shadow:0 0 0 1px #dee8f926,0 35px 90px #0008;transform-origin:center;will-change:transform,opacity}
.app-map-context>img{width:100%;height:100%;object-fit:fill}
.app-map-glass{position:absolute;inset:0;background:linear-gradient(110deg,#dee8f909,transparent 40%,#010d1f20);border-radius:inherit}
.app-card-shell{position:absolute;z-index:5;opacity:0;pointer-events:none;will-change:transform,opacity;perspective:1400px}
.app-card-turn{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.app-card-face{position:absolute;inset:0;overflow:hidden;border-radius:6.3%;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px #dee8f918,0 22px 80px #0009;background:#212526}
.app-card-face>img{position:absolute;width:111.910112%;max-width:none;height:224.532225%;left:-6.067416%;top:-62.577963%;object-fit:fill}
.app-card-back{transform:rotateY(180deg)}
.app-card-note{position:absolute;left:0;right:0;top:calc(100% + 26px);display:flex;align-items:center;gap:12px;white-space:nowrap;font:600 clamp(11px,.9vw,14px)/1.3 Urbanist,sans-serif;letter-spacing:.01em;color:#afc3d2}
.app-note-line{width:28px;height:2px;background:#ff5270;flex-shrink:0}
.app-note-number{margin-left:auto;font-size:9px;letter-spacing:.12em;color:#ff5270}
.app-copy-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.plan-copy{top:27%;max-width:45%}.plan-copy h2{font-size:7.1vw;line-height:1.04;letter-spacing:-.055em}.plan-copy h2 em{font-family:'Permanent Marker';font-weight:400;letter-spacing:-.055em;display:inline-block;transform:rotate(-4deg);font-size:1.08em}.plan-copy p{max-width:30ch}
.static-plan article.static-real-plan{background:transparent;padding:0;max-width:330px}.static-plan article.static-real-plan>img{width:100%;aspect-ratio:auto;object-fit:contain;border-radius:24px}.static-plan article.static-real-plan>span{color:#92a8ae;text-align:center}
@media(max-width:600px){.plan-copy{top:15%;left:8%;right:8%;max-width:none}.plan-copy h2{font-size:12vw;line-height:1;margin-top:12px}.plan-copy h2 br{display:none}.plan-copy h2 em{font-size:1em}.plan-copy p{font-size:13px;margin-top:13px}.app-card-note{top:calc(100% + 18px);font-size:10px;gap:8px}.app-note-line{width:18px}.app-note-number{font-size:8px}.app-map-context{border-radius:20px}}
@media(max-width:600px){.plan-copy h2 br{display:block}.plan-copy p{max-width:none}.plan-copy p br{display:block}.app-map-context{mask-image:linear-gradient(transparent,#000 18%,#000 90%,transparent)}}
/* Live type and vector icons keep the app UI crisp at every display density. */
.app-card-face{container-type:inline-size;color:#f6f6f6;font-family:Urbanist,sans-serif;font-weight:500}
.cu-ui-header{position:absolute;left:4.5%;right:4.5%;top:4.35%;height:11%;display:flex;align-items:center;gap:2.8cqw}
.cu-ui-avatar{position:relative;display:block;width:10.8cqw;height:12.4cqw;flex-shrink:0}
.cu-ui-avatar-photo{position:absolute;inset:0 0 auto;aspect-ratio:1;overflow:hidden;border-radius:2cqw;box-shadow:0 0 0 .22cqw #ff5270}
.cu-ui-avatar-photo img{position:absolute;width:278.2123%;height:603.352%;max-width:none;left:-89.3855%;top:-53.6313%}
.cu-ui-live{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:.55cqw 1.25cqw .6cqw;border-radius:1.2cqw;background:#ff5270;color:#fff;font:800 2.45cqw/1 Urbanist,sans-serif;letter-spacing:.03em}
.cu-ui-owner{display:flex;flex-direction:column;font-size:4.5cqw;line-height:1.32;gap:.3cqw}.cu-ui-owner b{font-size:5.4cqw;font-weight:750}.cu-ui-owner>span{color:#9da1a2}
.cu-ui-flip{margin-left:auto;display:flex;gap:2.5cqw;align-items:center;background:#414546;border-radius:8cqw;padding:2.5cqw 4cqw;font-size:5cqw;line-height:1}
.cu-ui-flip svg{width:6.1cqw;height:6.1cqw}.cu-ui-close{width:6cqw;margin-left:1.5cqw}.cu-ui-close svg{width:100%;display:block}
.cu-ui-art{position:absolute;left:4.5%;top:18.71%;width:91.23%;height:76.92%;border-radius:1.8cqw;overflow:hidden}.cu-ui-art img{position:absolute;max-width:none;width:122.66%;height:291.89%;left:-11.58%;top:-105.68%}
.cu-ui-description{position:absolute;left:4.5%;top:19.1%;width:91%;font-size:4.65cqw;line-height:1.36;padding:1cqw 0}
.cu-ui-details{position:absolute;left:4.5%;top:34.3%;width:91%;height:29%;background:#2b2f30;border-radius:3cqw}
.cu-ui-address,.cu-ui-time{position:absolute;left:0;width:100%;height:50%;display:flex;align-items:center;padding:1.8cqw 2.7cqw;gap:3.2cqw;color:#b6b9ba;font-size:4.45cqw;line-height:1.35}.cu-ui-time{top:50%}
.cu-ui-details svg{width:5.7cqw;height:5.7cqw;flex-shrink:0;color:#eee}.cu-ui-details i{margin-left:auto;display:flex}.cu-ui-details i svg{color:#ff5270;width:5.2cqw}
.cu-ui-people{position:absolute;left:4.5%;top:67.7%;width:91%;height:10%;display:flex;align-items:center;font-size:4.5cqw}
.cu-ui-portraits{position:relative;width:53cqw;height:10cqw;overflow:hidden;border-radius:2cqw 0 0 2cqw;flex-shrink:0}.cu-ui-portraits img{position:absolute;max-width:none;width:211.91%;height:2400%;left:-20.85%;top:-1393.33%}
.cu-ui-plus{background:#383d3f;border-radius:2cqw;width:10.5cqw;height:10cqw;display:grid;place-items:center;font-size:5cqw;margin-left:-.8cqw;z-index:1}.cu-ui-going{margin-left:auto;white-space:nowrap}.cu-ui-people>svg{width:4cqw;height:4cqw;margin-left:2.5cqw}
.cu-ui-actions{position:absolute;left:4.5%;top:81.3%;width:91%;height:12.5%;display:flex;gap:3cqw;font-size:5cqw;font-weight:650;align-items:stretch}.cu-ui-actions>span{display:flex;align-items:center;justify-content:center;background:#414546;border-radius:10cqw;white-space:nowrap}.cu-ui-more{width:13.4cqw;font-size:6cqw;letter-spacing:.6cqw}.cu-ui-go{flex:1}.cu-ui-actions .cu-ui-offers{width:35.5cqw;background:#ff5270}
.cu-receive{border-radius:2cqw;box-shadow:0 0 0 calc(var(--receive,0)*2px) rgba(255,82,112,var(--receive,0)),0 0 calc(var(--receive,0)*24px) rgba(255,82,112,calc(var(--receive,0)*.3))}.cu-receive::after{content:'';position:absolute;inset:0;background:rgba(255,82,112,calc(var(--receive,0)*.17));border-radius:inherit;pointer-events:none}
.cu-ingest-ring{position:absolute;left:50%;top:57%;width:25%;aspect-ratio:1;border:2px solid #ff5270;border-radius:50%;opacity:0;transform:translate(-50%,-50%);box-shadow:0 0 30px #ff52704a}
.message{transform-origin:0 0}
.cu-ui-offers{position:relative}
/* The plan becomes CU's artwork pin while friends travel to it. */
.app-map-stem{position:absolute;left:50%;top:calc(100% - 1px);width:4px;background:#ff5270;transform-origin:top;opacity:0;border-radius:0 0 3px 3px}
.app-map-stem::after{content:'';position:absolute;bottom:-5px;left:50%;width:13px;height:13px;border-radius:50%;background:#ff5270;transform:translateX(-50%)}
#destination-label{display:none}
.traveler-j small{position:absolute;right:calc(100% + 8px);white-space:nowrap}
@media(max-width:600px){.traveler-j small{right:auto;left:0;bottom:calc(100% + 6px);min-width:50px}}
/* Wider Vancouver / Stanley Park arrival scene. Pin dimensions stay unchanged. */
.journey{height:862svh}
.arrival-map{background:#102b39}
.arrival-map:after{background:linear-gradient(90deg,#010d1ff5 0%,#010d1fd9 27%,#010d1f25 53%,transparent 75%)}
.vancouver-land{fill:#1d2e35}.stanley-forest{fill:#203d33}.vancouver-shore{fill:none;stroke:#598579;stroke-width:2;opacity:.65}
.park-lake{fill:#143441;stroke:#648d7c;stroke-width:1.5}
.city-streets path{fill:none;stroke:#41535b;stroke-width:3}.city-streets .city-arterial{stroke:#53656b;stroke-width:5}
.park-roads path{fill:none;stroke:#617166;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.park-roads .park-causeway{stroke:#6a7d72;stroke-width:6}
.park-trails path{fill:none;stroke:#78917b;stroke-width:2;stroke-dasharray:3 5;opacity:.65}
.arrival-routes .route-beds path{stroke:#405d63;stroke-width:6;opacity:.65}
.arrival-routes .route-progress path{stroke-width:2.5;opacity:1}
.vancouver-labels text{font-family:Urbanist,sans-serif;fill:#a7bbb8;font-size:9px;letter-spacing:.035em;paint-order:stroke;stroke:#142830;stroke-width:3px;stroke-linejoin:round}
.vancouver-labels .map-park-label{fill:#b9d1a4;font-weight:750;font-size:13px;letter-spacing:.18em;stroke:#203d33}
.vancouver-labels .map-district-label{font-size:11px;letter-spacing:.18em;fill:#a6b7ba}.vancouver-labels .map-water-label{fill:#63929e;font-size:11px;letter-spacing:.16em;stroke:#102b39}.vancouver-labels .map-lake-label{font-size:9px;fill:#96bac2;stroke:#143441}
.arrival-status{bottom:15%;right:5%}.map-concept{bottom:11%;right:5%}
.traveler small{background:#010d1feb}.traveler>span{box-shadow:0 2px 10px #010d1f70}
@media(max-width:600px){.journey{height:838svh}.arrival-map:after{background:linear-gradient(180deg,#010d1ff5 0%,#010d1feb 31%,#010d1f20 48%,transparent 67%)}.vancouver-labels .map-park-label{font-size:9px;letter-spacing:.10em}.vancouver-labels .map-district-label,.vancouver-labels .map-water-label{font-size:8px;letter-spacing:.10em}.vancouver-labels .map-lake-label{font-size:7px}.arrival-routes .route-beds path{stroke-width:4}.arrival-routes .route-progress path{stroke-width:1.7}.arrival-status{right:50%;bottom:15%}.map-concept{right:50%;bottom:11.3%}}
/* Place labels on opposite sides of the converging routes. */
.traveler small,.traveler-j small{position:absolute;left:calc(100% + 7px);right:auto;bottom:auto;white-space:nowrap}
.traveler-a small,.traveler-s small{left:auto;right:calc(100% + 7px)}
@media(max-width:600px){.traveler small,.traveler-j small{left:calc(100% + 4px);right:auto;bottom:auto;min-width:42px}.traveler-a small,.traveler-s small{left:auto;right:calc(100% + 4px)}}
/* Keep the arrival summary clear of the longer city routes. */
@media(min-width:601px){.arrival-status{left:7%;right:auto;bottom:20%}.map-concept{left:7%;right:auto;bottom:15%}}
@media(max-width:600px){.arrival-status{left:8%;right:auto;top:36.5%;bottom:auto;transform:none;min-width:0;width:82px;padding:0;background:none;font-size:10px;line-height:1.4;white-space:normal;gap:6px}.arrival-count{font-size:7px;letter-spacing:.07em}.arrival-status .status-dot{width:5px;height:5px;margin-top:5px}}
.traveler-j:not(.arrived) small{left:auto;right:calc(100% + 7px)}
@media(max-width:600px){.traveler-j:not(.arrived) small{left:auto;right:calc(100% + 4px)}}
/* A single meeting badge replaces overlapping route labels at the destination. */
.arrival-party{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:174px;padding:12px 17px;border:1px solid #ff52703b;border-radius:20px;background:#010d1ff2;box-shadow:0 9px 25px #010d1f55;opacity:0;pointer-events:none;transform:translateX(-50%)}
.arrival-party-avatars{display:flex;gap:7px;align-items:center;justify-content:center}
.arrival-party-avatars>span{display:grid;place-items:center;width:36px;height:36px;border:2px solid #dee8f9;border-radius:50%;font-size:14px;font-weight:800;color:#010d1f;background:#dee8f9;will-change:opacity,transform}
.arrival-party-avatars>.party-j{background:#ff5270;border-color:#ff5270}.arrival-party-avatars>.party-s{background:#92a8ae;border-color:#92a8ae}
/* Frame faces from the existing trip photos, consistently in transit and on arrival. */
.map-avatar{position:relative;overflow:hidden;flex-shrink:0}
.map-avatar img{position:absolute;max-width:none;height:auto;display:block}
.avatar-j img{width:276.765%;left:-29.412%;top:-64.706%}
.avatar-a img{width:268.857%;left:-134.286%;top:-80%}
.avatar-s img{width:294.063%;left:-150%;top:-84.375%}
#arrival-party-copy{color:#aec2c7;font-size:11px;font-weight:600;white-space:nowrap}.arrival-party.all-here{border-color:#ff527080}.arrival-party.all-here #arrival-party-copy{color:#dee8f9}
@media(max-width:600px){.arrival-party{min-width:152px;gap:7px;padding:10px 14px;border-radius:17px}.arrival-party-avatars>span{width:31px;height:31px;font-size:12px}.arrival-party-avatars{gap:6px}#arrival-party-copy{font-size:10px}}
/* Double the supporting copy and continuation link beneath the memory headline. */
.payoff-bottom{flex-wrap:wrap;gap:24px}
.payoff-bottom p{font-size:30px}
.continue-story{font-size:22px;white-space:nowrap}
.continue-story span{font-size:50px}
@media(max-width:600px){.payoff-bottom p{font-size:26px}.continue-story{font-size:18px}}
/* More readable arrival copy, without the separate status box and counter. */
.arrival-copy .eyebrow{font-size:20px}
.arrival-copy p,.plan-copy p{font-size:26px;line-height:1.5}
.arrival-status{display:none}
@media(max-width:600px){.arrival-copy .eyebrow{font-size:14px}.arrival-copy p,.plan-copy p{font-size:18px;line-height:1.45}}

/* Keep the longer resolution together beside the app Card. */
.plan-copy .plan-together{display:block;font-size:.66em;white-space:nowrap;line-height:1.35}
.plan-copy p{max-width:39ch}

/* Give the planning problem the same readable supporting hierarchy. */
.chaos-copy .eyebrow{font-size:clamp(14px,1.4vw,20px)}
.chaos-copy p{font-size:clamp(18px,1.8vw,26px);line-height:1.5}
@media(max-width:600px){.chaos-copy .eyebrow{font-size:14px}.chaos-copy p{font-size:18px;line-height:1.45}}

/* Make the closing invitation more prominent. */
.final-bottom p{font-size:clamp(30px,3vw,46px);line-height:1.2}
@media(max-width:600px){.final-bottom p{font-size:30px}}