.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 clamp(46px,min(14.6vw,12svh),112px)/.9 var(--display);letter-spacing:-.045em;text-wrap:balance;max-width:10.5ch}
.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:44ch;opacity:.86;text-wrap:pretty}
.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, one day's stops as photo cards */
.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}

/* 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-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}

@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}}