.home .top{position:fixed;left:0;right:0}
.home main{padding-top:72px}

/* ---------- hero + story ----------
   One grid. Stacked (phones, portrait windows): the copy, then the stage (sticky under the header), then the beats,
   each sticky just under the stage so the next one slides up over it. Side by side (landscape windows from 640 px): copy and beats on the left, the stage sticky
   on the right. --p (0 → 1 until the first beat) moves the phone from its hero pose to the middle of the stage. */
.h-hero{overflow-x:clip}
.h-grid{--pw:min(300px,29svh,68vw);display:grid}
.h-copy{position:relative;z-index:2;display:grid;justify-items:start;align-content:center;gap:18px;padding:20px 0 28px}
.h-h1{font:700 calc(clamp(46px,min(14.6vw,12svh),112px)*var(--h1,1))/.9 var(--display);letter-spacing:-.045em;text-wrap:balance;max-width:12ch}
.h-mark{position:relative;white-space:nowrap;z-index:0}
.h-mark::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.08em;bottom:.04em;height:.36em;border-radius:.06em;background:var(--sun);transform-origin:left;animation:mark .8s .5s var(--ease) both}
@keyframes mark{from{transform:scaleX(0)}}
.h-sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:34em;opacity:.86}
.h-sub span{display:inline-block}
.h-copy .ask{margin-top:4px}
.h-chips{justify-content:flex-start;max-width:640px;margin-top:-2px}
@media (max-width:719px){.h-chips{flex-wrap:nowrap;width:calc(100% + 2 * var(--g))}}

/* the phone: as big as the window allows (a store screenshot, not a real-size phone); stacked, ~60% of the height */
.h-stage{--q:calc(1 - var(--p,0));position:sticky;top:72px;z-index:1;height:calc(var(--pw) * 2.073 + 28px);margin:0 calc(-1 * var(--g));background:var(--paper)}
.h-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--paper),rgba(255,247,236,0));pointer-events:none}
.h-dio{position:absolute;left:50%;top:50%;width:min(130%,64svh * 1.5);max-width:none;height:auto;translate:-50% -50%;filter:drop-shadow(0 30px 30px rgba(22,32,58,.16));animation:assemble 1.2s .1s var(--spring) both}
@keyframes assemble{from{transform:translateY(36px) scale(.94)}}
.h-phone{position:absolute;z-index:2;left:calc(50% - var(--pw) / 2);top:calc(50% - var(--pw) * 1.037);width:var(--pw);translate:calc(var(--q) * var(--hx,0%)) calc(var(--q) * var(--hy,0%));rotate:calc(var(--q) * -4deg);animation:rise 1.1s .35s var(--ease) both}
@keyframes rise{from{transform:translateY(80px) rotate(4deg);opacity:0}}
.h-sally{position:absolute;z-index:3;right:4%;top:2%;width:clamp(72px,19vw,150px);animation:float-in 1.2s .7s var(--spring) both}
.h-sally .sally-wrap{width:100%!important}
@keyframes float-in{from{transform:translateY(60px) scale(.6);opacity:0}}
.h-beats{position:relative;z-index:0}
.h-beat{position:sticky;top:calc(100px + var(--pw) * 2.073);min-height:44svh;padding:24px 0 20px;max-width:520px;background:var(--paper)}
.h-kick{font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--coral-d);margin-bottom:10px}
.h-beat h2{font:700 clamp(29px,3.8vw,56px)/.98 var(--display);letter-spacing:-.035em;text-wrap:balance}
.h-beat p:not(.h-kick){margin-top:10px;font-size:clamp(16px,1.4vw,19px);line-height:1.55;opacity:.86;max-width:40ch;text-wrap:pretty}
.h-beat .stores{margin-top:20px}
.h-credit{position:relative;padding:24px 0 8px;background:var(--paper);max-width:60ch;font-size:12px;line-height:1.5;color:var(--muted)}
.h-credit a{color:inherit}
@media (min-width:640px) and (min-aspect-ratio:1/1){
  .h-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(16px,3vw,48px)}
  .h-copy{grid-area:1/1;min-height:calc(100svh - 72px);padding:24px 0 48px}
  .h-stage{--pw:min(330px,36svh);--hx:-30%;--hy:10%;grid-area:1/2/3/3;align-self:start;height:calc(100svh - 72px);margin:0 calc(-1 * var(--g)) 0 0;background:none}
  .h-stage::after{display:none}
  .h-dio{width:min(124%,(100svh - 72px) * 1.3);translate:-46% -54%}
  .h-sally{right:8%;top:2%}
  .h-beats{grid-area:2/1}
  .h-beat{position:static;display:grid;align-content:center;min-height:70svh;padding:0;background:none}
  .h-live .h-beat{opacity:.28;transition:opacity .4s var(--ease)}
  .h-live .h-beat.on{opacity:1}
  .h-credit{padding:0 0 32px}
}

/* ---------- the phone and its screens ---------- */
.phone{position:relative;width:100%;aspect-ratio:300/622;padding:3.4%;border-radius:15%/7.2%;background:linear-gradient(150deg,#3A4266,#0C1021 45%,#262D4D);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 5px #070A14,0 50px 80px -30px rgba(22,32,58,.55),0 22px 34px -14px rgba(22,32,58,.45)}
.phone::before{content:"";position:absolute;right:-1.4%;top:22%;width:1.4%;height:13%;border-radius:0 3px 3px 0;background:#1B2038}
.ph-scr{position:relative;height:100%;border-radius:12.5%/6%;overflow:hidden;background:var(--paper);container-type:inline-size;color:var(--ink);isolation:isolate}
.ph-bar{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:13cqw;padding:0 7cqw 0 9cqw;color:#fff;font:700 4.6cqw/1 var(--sans);transition:color .3s}
.scr-light.on~.ph-bar{color:var(--ink)}
.ph-bar span{display:flex;gap:1.6cqw;align-items:center}
.ph-bar svg{width:auto;height:3.8cqw}
.ph-isl{position:absolute;left:50%;top:3cqw;width:30cqw;height:8.6cqw;margin-left:-15cqw;border-radius:99px;background:#05070D}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;translate:0 3%;transition:opacity .45s var(--ease),visibility .45s,translate .6s var(--ease)}
.scr.on{opacity:1;visibility:visible;translate:none}
.scr img{display:block;width:100%;height:100%;object-fit:cover}
/* a screen's parts arrive in turn (--t) once it is on, and reset after it has faded out */
.k{opacity:0;translate:0 4cqw;transition:opacity .3s var(--t,0s),translate .5s var(--spring) var(--t,0s)}
.on .k{opacity:1;translate:none}
.scr:not(.on) .k{transition:opacity 0s .5s,translate 0s .5s}
.pic-poster{object-position:50% 30%}
.dark{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}

/* the plan: the poster, the days, each day's stops as photo cards. The days play in turn, 3.2 s each (a 16 s loop that
   starts 0.8 s in, as the phone rises): the day's tab lights and its title, stops and walks drop in one after another
   (--o: the day's place in the loop, --j: a part's place in its day). Every part runs the same loop, offset, so they stay
   in step, and they pause together while another screen is on. Without motion, only the first day shows. */
.tp-hero{position:relative;flex:none;height:86cqw;overflow:hidden}
.tp-hero img{object-position:50% 34%}
.tp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,28,.4),transparent 28%,transparent 46%,rgba(10,14,28,.78))}
.tp-ttl{position:absolute;z-index:1;left:5.5cqw;right:30cqw;bottom:5cqw;color:#fff}
.tp-ttl small{display:block;font:700 3.9cqw/1.2 var(--sans);opacity:.94}
.tp-ttl b{display:block;margin-top:1cqw;font:700 13cqw/.95 var(--display);letter-spacing:-.035em}
.tp-avs{position:absolute;z-index:1;right:5cqw;bottom:6cqw;display:flex}
.tp-avs .av{width:8.4cqw;height:8.4cqw;margin-left:-2cqw;font-size:3.2cqw;box-shadow:0 0 0 .7cqw rgba(255,255,255,.9)}
.tp-days{display:flex;gap:1.8cqw;padding:4cqw 5cqw 2cqw;overflow:hidden}
.tp-days span{flex:none;padding:2cqw 3.6cqw;border-radius:99px;background:#F1E6D6;font:700 3.8cqw/1 var(--sans);color:var(--muted)}
.tp-days .on{background:var(--dc);color:#fff}
.tp-dt{padding:1.4cqw 5cqw 2.8cqw;font:700 6.4cqw/1.08 var(--display);letter-spacing:-.025em}
.tp-stops{display:grid;padding:0 4cqw}
.tp-stop{position:relative;display:grid;grid-template-columns:19cqw minmax(0,1fr);gap:3.4cqw;align-items:center;padding:2.4cqw;border-radius:5cqw;background:#fff;box-shadow:0 .5cqw 2cqw rgba(22,32,58,.1)}
.tp-stop img{width:19cqw;height:19cqw;border-radius:3.6cqw}
.tp-stop b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 4.4cqw/1.18 var(--sans)}
.tp-stop span{display:block;margin-top:1cqw;font:600 3.6cqw/1.2 var(--sans);color:var(--muted)}
.tp-stop em{font-style:normal;color:#B87D00}
.tp-stop i{position:absolute;left:1cqw;top:1cqw;display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border-radius:50%;background:var(--dc);color:#fff;font:800 3.4cqw/1 var(--sans);font-style:normal;box-shadow:0 0 0 .7cqw #fff}
.tp-leg{display:flex;align-items:center;gap:1.4cqw;height:7.2cqw;padding-left:9cqw;font:700 3.3cqw/1 var(--sans);color:var(--muted)}
.tp-leg svg{width:3.6cqw;height:3.6cqw}
.tp-run{display:grid}
.tp-day{grid-area:1/1;visibility:hidden}
.tp-day.cur{visibility:visible}
@media (prefers-reduced-motion:no-preference){
  .tp-day{visibility:visible}
  .tp-days span{animation:tp-tab 16s calc(var(--o) * 3.2s - 15.2s) infinite}
  .tp-day :is(.tp-dt,.tp-stop,.tp-leg){animation:tp-in 16s calc(var(--o) * 3.2s - 15.2s + var(--j) * .12s) infinite}
  .scr:not(.on) :is(.tp-days span,.tp-dt,.tp-stop,.tp-leg){animation-play-state:paused}
}
@keyframes tp-tab{0%,18%{background:var(--dc);color:#fff}20%,98%{background:#F1E6D6;color:var(--muted)}100%{background:var(--dc);color:#fff}}
@keyframes tp-in{0%{opacity:0;translate:0 5cqw}4%,18%{opacity:1;translate:none}20%,100%{opacity:0;translate:none}}

/* every day on the map: the real streets full bleed, the routes drawing in turn, the days in a sheet */
.sc-map{position:absolute;inset:0}
.sc-map img,.smap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.smap .draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .4s linear var(--t)}
.on .smap .draw{stroke-dashoffset:0}
.smap .pin-in{transform:scale(0);transition:transform .4s var(--spring) var(--t)}
.on .smap .pin-in{transform:none}
.scr:not(.on) .smap .draw,.scr:not(.on) .smap .pin-in{transition-duration:0s;transition-delay:.5s}
.sc-pills{position:relative;display:flex;gap:1.8cqw;padding:15cqw 4cqw 0;overflow:hidden}
.sc-pills span{display:inline-flex;align-items:center;gap:1.4cqw;flex:none;padding:2.2cqw 3.6cqw;border-radius:99px;background:rgba(255,255,255,.94);font:700 3.7cqw/1 var(--sans);box-shadow:0 .6cqw 2cqw rgba(22,32,58,.14)}
.sc-pills span[style]::before{content:"";width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--dc)}
.sc-pills .on{background:var(--ink);color:#fff}
.sc-days{position:relative;display:grid;gap:1.4cqw;margin-top:auto;padding:4.4cqw 4cqw 6cqw;border-radius:6cqw 6cqw 0 0;background:var(--paper);box-shadow:0 -1cqw 4cqw rgba(22,32,58,.16)}
.sc-days::before{content:"";justify-self:center;width:10cqw;height:1.2cqw;margin:-1.6cqw 0 1cqw;border-radius:9px;background:var(--line-strong)}
.sc-days li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.6cqw;align-items:center;padding:2.2cqw 3cqw;border-radius:3.6cqw;background:#fff;font:600 3.6cqw/1.2 var(--sans)}
.sc-days b{display:inline-flex;align-items:center;gap:1.4cqw;color:var(--dc);font:800 3cqw/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.sc-days b::before{content:"";width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--dc)}
.sc-days span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* one stop up close */
.pl-pic{flex:none;height:84cqw}
.pl-body{display:grid;gap:2.4cqw;padding:5cqw 5.5cqw}
.pl-kick{font:800 3.3cqw/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--coral-d)}
.pl-name{font:700 9.4cqw/1 var(--display);letter-spacing:-.03em}
.pl-meta{font:600 3.9cqw/1.2 var(--sans);color:var(--muted)}
.pl-meta em{font-style:normal;color:#B87D00;font-weight:800}
.pl-btns,.td-btns{display:flex;gap:2cqw}
.pl-btns span,.td-btns span{display:inline-flex;align-items:center;gap:1.4cqw;padding:2.6cqw 4cqw;border-radius:99px;border:1px solid var(--line-strong);background:#fff;font:700 3.7cqw/1 var(--sans)}
.pl-btns svg,.td-btns svg{width:3.8cqw;height:3.8cqw}
.pl-why{padding:3.6cqw 4cqw;border-radius:4cqw;background:#F6ECDD;font:500 3.9cqw/1.4 var(--sans)}
.pl-why b{display:block;margin-bottom:1cqw;font:800 3cqw/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pl-ok{display:flex;align-items:center;gap:1.4cqw;font:700 3.5cqw/1 var(--sans);color:var(--leaf-d)}
.pl-ok svg{width:3.6cqw;height:3.6cqw}

/* the invite, on the share pages' night shell */
.scr-share{align-items:center;gap:3cqw;padding:15cqw 6cqw 7cqw;background:radial-gradient(120% 70% at 50% 0%,#2A3566,var(--lock) 60%);color:#fff;text-align:center}
.sh-from{display:flex;align-items:center;gap:2cqw;font:600 3.6cqw/1 var(--sans);opacity:.85}
.sh-from .av{width:7cqw;height:7cqw;font-size:2.8cqw}
.sh-name{font:700 9.6cqw/1 var(--display);letter-spacing:-.03em}
.sh-poster{width:62cqw;aspect-ratio:3/4;border-radius:5cqw;overflow:hidden;box-shadow:0 3cqw 8cqw rgba(0,0,0,.45)}
.sh-when{font:600 3.7cqw/1.3 var(--sans);opacity:.85}
.sh-rsvp{display:flex;justify-content:center;gap:3.4cqw;margin-top:1cqw}
.sh-rsvp span{display:grid;place-items:center;align-content:center;gap:.6cqw;width:19cqw;aspect-ratio:1;border-radius:50%;color:#fff;font:700 3cqw/1 var(--sans);background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.5),transparent 42%),linear-gradient(150deg,var(--b1),var(--b2));box-shadow:0 2cqw 4cqw rgba(0,0,0,.3)}
.sh-rsvp span:nth-child(1){--b1:#4FD69C;--b2:#16A3B8}.sh-rsvp span:nth-child(2){--b1:#FFD166;--b2:#FF6A55}.sh-rsvp span:nth-child(3){--b1:#7FB2FF;--b2:#8B5CF6}
.sh-rsvp span:nth-child(1){animation:pick 2.4s 1.6s var(--spring) infinite}
@keyframes pick{0%,70%,100%{transform:none}80%{transform:scale(1.12)}}
.sh-rsvp i{font-style:normal;font-size:6.4cqw;line-height:1}
.sh-going{display:flex;align-items:center;justify-content:center;gap:2.4cqw;font:700 3.6cqw/1 var(--sans)}
.sc-avs{display:flex}
.sc-avs .av{width:7cqw;height:7cqw;margin-right:-1.6cqw;font-size:2.6cqw;box-shadow:0 0 0 .6cqw var(--lock)}
.sc-avs .av:last-child{margin-right:0}

/* the day itself: the next stop, then the Live Activity card */
.scr-today{gap:3cqw;padding:15cqw 4.5cqw 5cqw}
.td-top{display:flex;align-items:center;justify-content:space-between;font:800 3.3cqw/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.td-top em{display:inline-flex;align-items:center;gap:1.2cqw;padding:1.6cqw 2.6cqw;border-radius:99px;background:color-mix(in srgb,var(--leaf) 22%,#fff);color:var(--leaf-d);font-style:normal;letter-spacing:0;text-transform:none}
.td-top svg{width:3.4cqw;height:3.4cqw}
.td-title{font:700 7.4cqw/1.04 var(--display);letter-spacing:-.025em}
.td-card{overflow:hidden;border-radius:5.5cqw;background:#fff;box-shadow:0 1cqw 3cqw rgba(22,32,58,.12)}
.td-card img{height:46cqw}
.td-card div{display:grid;gap:1.4cqw;padding:3.6cqw 4cqw 4cqw}
.td-card small{font:800 3.2cqw/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-d)}
.td-card b{font:700 5.8cqw/1.1 var(--display);letter-spacing:-.02em}
.td-card span{font:600 3.6cqw/1.2 var(--sans);color:var(--muted)}
.td-btns{margin-top:1.4cqw}
.td-btns span{flex:1;justify-content:center}
.td-rest{display:grid;gap:2cqw;list-style:none}
.td-rest li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2.6cqw;align-items:center;padding:3cqw 3.6cqw;border-radius:4cqw;background:#fff;font:600 3.6cqw/1.2 var(--sans)}
.td-rest span{color:var(--muted)}
.td-rest b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-rest small{display:inline-flex;align-items:center;gap:1cqw;color:var(--muted)}
.td-live{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2.6cqw;align-items:center;margin-top:auto;padding:3.4cqw 4cqw;border-radius:6cqw;background:rgba(18,22,38,.92);color:#fff;box-shadow:0 2cqw 5cqw rgba(22,32,58,.3)}
.td-live .mark{width:8cqw;height:auto}
.td-live small{display:block;font:700 3cqw/1.2 var(--sans);opacity:.7}
.td-live b{display:block;font:700 3.9cqw/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-live em{display:inline-flex;align-items:center;gap:1cqw;padding:1.6cqw 2.4cqw;border-radius:99px;background:rgba(255,255,255,.14);font:700 3.2cqw/1 var(--sans);font-style:normal}
.td-live svg,.td-rest svg{width:3.4cqw;height:3.4cqw}

/* ---------- why, plans, questions ---------- */
.h-why ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(40px,6vw,72px)}
.h-why li{display:grid;gap:6px;align-content:start;padding:18px;border-radius:22px;background:var(--card);box-shadow:var(--shadow)}
.h-why .ic{color:var(--coral-d)}
.h-why b{font:700 17px/1.2 var(--sans)}
.h-why span{font-size:15px;line-height:1.45;color:var(--muted)}
@media (min-width:900px){.h-why ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.h-why li{padding:24px}}
.h-proof{margin-top:12px;padding:20px 18px 16px;border-radius:22px;background:var(--card);box-shadow:var(--shadow)}
.h-proof dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.h-proof dl div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px}
.h-proof dt{font-size:13.5px;line-height:1.35;color:var(--muted)}
.h-proof dd{display:flex;align-items:center;gap:4px;margin:0;font:700 clamp(30px,6vw,48px)/1 var(--display);letter-spacing:-.03em}
.h-proof dd .ic{color:var(--sun-d);fill:var(--sun)}
.h-proof p{margin-top:14px;padding-top:12px;border-top:1.5px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--muted)}
@media (min-width:900px){.h-proof{margin-top:18px;padding:28px 28px 20px}.h-proof dl{gap:24px}.h-proof dt{font-size:15px}}
.h-plans{margin-top:clamp(56px,8vw,96px)}
.h-lede{margin-top:10px;max-width:56ch;font-size:17px;line-height:1.5;color:var(--muted);text-wrap:pretty}
@media (min-width:720px){.h-row{grid-template-columns:repeat(4,1fr)}}
.h-faq{max-width:820px;margin-top:clamp(56px,8vw,96px)}
.h-faq h2{font:700 clamp(30px,4.2vw,48px)/1 var(--display);letter-spacing:-.03em;margin-bottom:8px}
.h-faq a{color:var(--ink);font-weight:700}

/* A phone's first screen ends about where the plan starts (about two in three phone visitors have under 760 px of
   height), so what moves has to start high. Until the phone stands up (--q), its poster is a short band: the day tabs and
   the first stop, or the invite's Going, Maybe and Can't go, are on the first screen; they grow back to the full screen on
   the way to the first beat. After the base rules so these win. */
@media (max-width:639px){
  .h-copy{gap:14px;padding:8px 0 6px}
  .tp-hero{height:calc(86cqw - var(--q,0) * 48cqw)}
  .sh-poster{aspect-ratio:auto;height:calc(82.7cqw - var(--q,0) * 42cqw)}
}

@media (prefers-reduced-motion:reduce){.h-dio,.h-phone,.h-sally,.h-mark::before,.sh-rsvp span{animation:none!important}.scr,.k,.smap .draw,.smap .pin-in,.h-beat{transition:none!important}}