:root{
  color-scheme:light;
  --ink:#0B1324; --ink2:#4A5468; --ink3:#8790A2; --line:#E6E9EF; --line2:#EEF0F4;
  --paper:#FFFFFF; --mist:#F5F7FA; --cream:#FBF7F1; --sand:#F3ECE1;
  --cobalt:#065CFF; --cobalt-deep:#0047D9; --cobalt-tint:#EAF1FF;
  --night:#0D0E12; --night2:#16181E; --night-line:rgba(255,255,255,.12); --night-ink:#F4F1EA; --night-mute:rgba(244,241,234,.66);
  --gold:#F1C778;
  --r-s:12px; --r-m:20px; --r-l:28px; --r-xl:40px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-s:0 1px 2px rgba(11,19,36,.06),0 4px 12px rgba(11,19,36,.06);
  --shadow-m:0 2px 6px rgba(11,19,36,.05),0 18px 40px -12px rgba(11,19,36,.18);
  --shadow-l:0 4px 10px rgba(11,19,36,.05),0 40px 80px -24px rgba(11,19,36,.28);
  --gutter:clamp(20px,4vw,40px);
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0}
.wrap{width:min(1200px,100% - var(--gutter)*2);margin-inline:auto}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.kicker i{display:block;width:22px;height:1px;background:currentColor;opacity:.6}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink2);line-height:1.6;max-width:34ch}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;z-index:99}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;letter-spacing:-.01em;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s}
.btn svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn-primary{background:var(--cobalt);color:#fff;box-shadow:0 10px 24px -10px rgba(6,92,255,.65)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(6,92,255,.7)}
.btn-ghost{color:var(--ink);padding:0 8px}
.btn-ghost:hover{color:var(--cobalt)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px)}
.btn-sm{height:42px;padding:0 18px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--cobalt)}
.link svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.link:hover svg{transform:translate(2px,-2px)}

/* Header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .4s,box-shadow .4s,backdrop-filter .4s}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.top.scrolled{background:rgba(255,255,255,.78);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 0 var(--line)}
.lockup{display:flex;align-items:center;gap:9px}
.lockup img.face{width:38px;height:38px}
.lockup img.word{height:26px;width:auto;margin-top:2px}
.nav{display:flex;gap:34px;font-size:15px;font-weight:500;color:var(--ink2)}
.nav a{position:relative;padding:6px 0;transition:color .3s}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.top-cta{display:flex;align-items:center;gap:14px}

/* Hero */
.hero{padding-top:clamp(120px,15vh,168px);text-align:center;position:relative;overflow-x:clip}
.hero .pill{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;color:var(--ink2);background:#fff;box-shadow:var(--shadow-s)}
.hero .pill img{width:28px;height:28px;border-radius:50%;background:var(--cream);padding:3px}
.hero h1{font-size:clamp(54px,10vw,136px);letter-spacing:-.045em;line-height:.92;margin-top:28px}
.hero h1 .l2{display:block}
.hero .lede{margin:28px auto 0;text-align:center;max-width:40ch;text-wrap:balance}
.hero .actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:36px;flex-wrap:wrap}

.reel{position:relative;margin-top:clamp(56px,7vw,88px);height:clamp(340px,44vw,600px);perspective:1600px}
.reel .frame{position:absolute;top:50%;left:50%;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-l);background:var(--mist);will-change:transform}
.reel .frame img{width:100%;height:100%;object-fit:cover}
.reel .f0{width:min(64vw,820px);height:100%;transform:translate(-50%,-50%);z-index:3}
.reel .f0 img{animation:kenburns 26s var(--ease) infinite alternate;transform-origin:60% 40%}
.reel .f1,.reel .f2{width:min(26vw,330px);height:72%;z-index:2}
.reel .f3,.reel .f4{width:min(18vw,230px);height:52%;z-index:1;opacity:.95}
.reel .f1{transform:translate(calc(-50% - min(40vw,520px)),-46%) rotate(-4deg)}
.reel .f2{transform:translate(calc(-50% + min(40vw,520px)),-54%) rotate(4deg)}
.reel .f3{transform:translate(calc(-50% - min(58vw,760px)),-40%) rotate(-7deg)}
.reel .f4{transform:translate(calc(-50% + min(58vw,760px)),-60%) rotate(7deg)}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.reel .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(8,10,16,.62));pointer-events:none}
.reel .caption{position:absolute;left:clamp(20px,3vw,36px);bottom:clamp(20px,3vw,34px);right:clamp(20px,3vw,36px);text-align:left;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.reel .caption strong{display:block;font-size:clamp(22px,2.6vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.08;max-width:15ch}
.reel .caption span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;font-weight:600}
.glass{background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-m);border-radius:18px;color:var(--ink)}
.float-card{position:absolute;z-index:5;padding:14px 16px;display:flex;align-items:center;gap:12px;text-align:left;animation:bob 7s ease-in-out infinite}
.float-card b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.float-card small{display:block;font-size:13px;color:var(--ink2)}
.float-card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cream);font-size:20px}
.fc-a{left:calc(50% - min(32vw,410px) - 54px);top:18%}
.fc-b{right:calc(50% - min(32vw,410px) - 40px);bottom:16%;animation-delay:-3s}
.faces{display:flex}
.faces img{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-8px;background:#fff}
.faces img:first-child{margin-left:0}
.hero-stamp{position:absolute;z-index:6;width:clamp(70px,7vw,104px);right:calc(50% - min(32vw,410px) + 30px);top:-34px;transform:rotate(9deg);filter:drop-shadow(0 12px 18px rgba(11,19,36,.25));animation:bob 9s ease-in-out infinite;animation-delay:-5s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}

.marquee{margin-top:clamp(48px,6vw,72px);border-block:1px solid var(--line);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;width:max-content;animation:slide 60s linear infinite}
.marquee span{display:inline-flex;align-items:center;gap:26px;padding:20px 13px;font-size:clamp(18px,1.8vw,24px);font-weight:600;color:var(--ink2);letter-spacing:-.02em;white-space:nowrap}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--cobalt);opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}

/* Section scaffolding */
.sec{padding-block:clamp(96px,12vw,168px)}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:clamp(44px,6vw,72px)}
.sec-head h2,.h2{font-size:clamp(42px,6.2vw,88px);letter-spacing:-.048em;line-height:.96;margin-top:22px}
.sec-head .lede{justify-self:end}

/* Circles */
.circles{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.ilist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ilist button{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;text-align:left;padding:22px 0;border-bottom:1px solid var(--line);transition:color .3s}
.ilist .no{font-size:13px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums}
.ilist strong{font-size:clamp(22px,2.3vw,30px);font-weight:700;letter-spacing:-.03em;color:var(--ink3);transition:color .4s}
.ilist small{display:block;font-size:15px;color:var(--ink3);margin-top:4px;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s}
.ilist .arr{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:all .4s var(--ease)}
.ilist .arr svg{width:14px}
.ilist button[aria-selected="true"] strong{color:var(--ink)}
.ilist button[aria-selected="true"] small{max-height:60px;opacity:1}
.ilist button[aria-selected="true"] .arr{opacity:1;transform:none;background:var(--ink);border-color:var(--ink);color:#fff}
.ilist button:hover strong{color:var(--ink)}
.stage{position:relative;aspect-ratio:5/4;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);background:var(--mist)}
.stage img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.stage img.ph.on{opacity:1;transform:none}
.circle-card{position:absolute;left:24px;bottom:24px;width:min(330px,calc(100% - 48px));padding:18px;z-index:2}
.circle-card .row{display:flex;align-items:center;gap:12px}
.circle-card .emo{width:46px;height:46px;border-radius:14px;background:var(--cream);display:grid;place-items:center;font-size:24px}
.circle-card b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.circle-card small{display:block;font-size:13px;color:var(--ink2)}
.circle-card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;background:var(--cobalt);color:#fff;font-size:13px;font-weight:600}
.chip.soft{background:var(--cobalt-tint);color:var(--cobalt)}

/* Living map */
.mapsec{background:var(--mist)}
.mapgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.filters span{height:38px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;font-size:14px;font-weight:500;color:var(--ink2)}
.filters span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.privacy{display:flex;gap:14px;align-items:flex-start;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--ink2);max-width:42ch}
.privacy svg{flex:none;width:22px;height:22px;color:var(--cobalt);margin-top:2px}
.map{position:relative;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden;background:#EEF1F4;box-shadow:var(--shadow-l)}
.map svg.base{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--cobalt);border:3px solid #fff;box-shadow:0 4px 10px rgba(6,92,255,.45);z-index:2}
.pin::before,.pin::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--cobalt);animation:ring 3.2s var(--ease) infinite;opacity:0}
.pin::after{animation-delay:1.6s}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.6);opacity:0}}
.me{position:absolute;left:47%;top:55%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#fff;box-shadow:0 8px 24px rgba(11,19,36,.2);display:grid;place-items:center;z-index:3}
.me img{width:40px}
.me::before{content:"";position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(closest-side,rgba(6,92,255,.18),rgba(6,92,255,0));}
.mapcard{position:absolute;z-index:4;padding:12px 14px 12px 12px;display:flex;gap:12px;align-items:center;width:max-content;max-width:250px;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.mapcard.on{opacity:1;transform:none}
.mapcard img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.mapcard b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.mapcard small{display:block;font-size:13px;color:var(--ink2);margin-top:2px}
.glow{position:absolute;border-radius:50%;filter:blur(18px);background:radial-gradient(closest-side,rgba(6,92,255,.28),rgba(6,92,255,0));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.15);opacity:.7}}
.maplabel{position:absolute;right:18px;bottom:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600;z-index:4}

/* Postcards */
.pc{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:center}
.pc-stage{position:relative;perspective:1800px;padding:20px 0}
.card3d{position:relative;width:100%;aspect-ratio:3/2;transform-style:preserve-3d;transition:transform 1.2s var(--ease);cursor:pointer}
.card3d.flipped{transform:rotateY(180deg)}
.side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;background:#FFFDF8;box-shadow:var(--shadow-l),inset 0 0 0 1px rgba(11,19,36,.06);overflow:hidden}
.front{padding:16px;display:grid;grid-template-rows:1fr auto}
.front .photo{border-radius:4px;overflow:hidden;position:relative}
.front .photo img{width:100%;height:100%;object-fit:cover}
.front .note{display:flex;justify-content:space-between;align-items:flex-end;padding:14px 4px 2px}
.hand{font-family:"Caveat",cursive;font-size:clamp(22px,2.4vw,32px);line-height:1.1;color:#24324F}
.tiny{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.front .stamp{position:absolute;top:26px;right:26px;width:clamp(64px,8vw,96px);transform:rotate(4deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.back{transform:rotateY(180deg);display:grid;grid-template-columns:1.2fr 1fr;padding:clamp(20px,3vw,36px);gap:clamp(16px,2vw,28px)}
.back .msg{border-right:1px solid var(--line);padding-right:clamp(16px,2vw,28px)}
.back .msg .hand{font-size:clamp(22px,2.3vw,30px);line-height:1.25}
.back .addr{display:flex;flex-direction:column;justify-content:space-between}
.back .addr img{width:clamp(56px,6vw,80px);align-self:flex-end;transform:rotate(-3deg)}
.back .addr i{display:block;height:1px;background:var(--line);margin-top:26px}
.postmark{position:absolute;left:-24px;top:-18px;width:118px;height:118px;border-radius:50%;border:2px solid rgba(36,50,79,.45);display:grid;place-items:center;text-align:center;font-size:9px;letter-spacing:.16em;color:rgba(36,50,79,.65);font-weight:700;transform:rotate(-14deg);z-index:2;pointer-events:none;background:transparent}
.flip-hint{display:flex;align-items:center;gap:10px;margin-top:28px;font-weight:600;color:var(--cobalt)}
.album{margin-top:clamp(64px,8vw,104px);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.album .track{display:flex;gap:28px;width:max-content;animation:slide 80s linear infinite;padding-block:18px}
.album img{width:96px;height:auto;transition:transform .5s var(--ease);filter:drop-shadow(0 8px 14px rgba(11,19,36,.14))}
.album img:nth-child(odd){transform:rotate(-3deg)}
.album img:nth-child(even){transform:rotate(3deg) translateY(8px)}
.album img:hover{transform:rotate(0) translateY(-10px) scale(1.08)}
.album-cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:18px}
.album-cap strong{font-size:22px;font-weight:700;letter-spacing:-.02em}
.album-cap p{color:var(--ink2);font-size:16px}

/* Nights */
.nights{background:var(--night);color:var(--night-ink);position:relative;overflow:hidden}
.nights-band{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end}
.nights-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) brightness(1.08)}
.nights-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,14,18,.55) 0%,rgba(13,14,18,.15) 35%,rgba(13,14,18,.82) 78%,var(--night) 100%),linear-gradient(90deg,rgba(13,14,18,.55),rgba(13,14,18,0) 60%)}
.nights-band .wrap{position:relative;z-index:2;padding-bottom:clamp(56px,7vw,96px)}
.nl{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.nl img{height:22px;filter:brightness(0) invert(1)}
.nl .moon{width:20px;height:20px;color:var(--gold)}
.nights h2{font-size:clamp(44px,7vw,108px);letter-spacing:-.05em;line-height:.95;margin-top:28px;color:#fff}
.nights .lede{color:var(--night-mute);margin-top:28px;max-width:38ch}
.nights .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.nights .badges span{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--night-line);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);font-size:14px;font-weight:500;color:var(--night-ink)}
.nights .badges svg{width:15px;height:15px;color:var(--gold)}

.table-band{padding-block:clamp(72px,9vw,128px);border-bottom:1px solid var(--night-line)}
.table-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.tablewrap{position:relative;aspect-ratio:1/1;max-width:480px;margin-inline:auto;width:100%}
.tablewrap .tbl{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2A2C33,#17191F 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.5)}
.tablewrap .candle{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--gold);box-shadow:0 0 30px 12px rgba(241,199,120,.35),0 0 80px 30px rgba(241,199,120,.12);animation:flicker 3s ease-in-out infinite}
@keyframes flicker{50%{box-shadow:0 0 24px 9px rgba(241,199,120,.3),0 0 70px 26px rgba(241,199,120,.1)}}
.seat{position:absolute;width:19%;aspect-ratio:1;margin:-9.5%;border-radius:50%;border:1.5px dashed rgba(244,241,234,.28);display:grid;place-items:center;transition:border-color .6s}
.seat img{width:100%;height:100%;border-radius:50%;opacity:0;transform:scale(.6);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.seat.in{border-color:transparent}
.seat.in img{opacity:1;transform:none}
.seat.you::after{content:"You";position:absolute;bottom:-26px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.table-copy h3{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.045em;line-height:.98;color:#fff}
.table-copy p{margin-top:22px;color:var(--night-mute);font-size:18px;max-width:36ch}

.evening{padding-block:clamp(72px,9vw,128px)}
.ev-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,6vw,96px);align-items:center}
.steps{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--night-line)}
.steps button{display:grid;grid-template-columns:52px 1fr;gap:6px;width:100%;text-align:left;padding:24px 0;border-bottom:1px solid var(--night-line);position:relative}
.steps .n{font-size:13px;font-weight:600;color:var(--night-mute);font-variant-numeric:tabular-nums;padding-top:7px}
.steps strong{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.03em;color:rgba(244,241,234,.42);transition:color .4s}
.steps small{display:block;font-size:16px;color:var(--night-mute);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s;margin-top:6px;max-width:44ch}
.steps button[aria-selected="true"] strong{color:#fff}
.steps button[aria-selected="true"] small{max-height:80px;opacity:1}
.steps .bar{position:absolute;left:0;bottom:-1px;height:1px;background:var(--gold);width:0}
.steps button[aria-selected="true"] .bar{animation:fill 6s linear forwards}
[data-motion="off"] .steps button[aria-selected="true"] .bar{animation:none;width:100%}
@keyframes fill{to{width:100%}}
.avail{margin-top:28px;font-size:14px;color:var(--night-mute)}

/* Phone */
.phone{position:relative;width:clamp(250px,24vw,310px);aspect-ratio:462/1000;border-radius:48px;padding:10px;background:#0A0B0E;box-shadow:inset 0 0 0 1.5px #2A2C33,0 50px 100px -30px rgba(0,0,0,.6),0 30px 60px -30px rgba(11,19,36,.5)}
.phone .scr{position:relative;width:100%;height:100%;border-radius:39px;overflow:hidden;background:#fff}
.phone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease);transform:scale(1.02)}
.phone .scr img.on{opacity:1;transform:none}
.phone .island{position:absolute;top:18px;left:50%;width:30%;height:22px;margin-left:-15%;background:#0A0B0E;border-radius:20px;z-index:3}
.phone.light{background:#11131A}

/* Trips */
.trips{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,6vw,96px);align-items:center}
.trip-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-l)}
.trip-photo img{width:100%;height:100%;object-fit:cover}
.trip-photo .stamp{height:auto;position:absolute;width:clamp(76px,8vw,108px);right:22px;top:22px;transform:rotate(6deg);filter:drop-shadow(0 10px 16px rgba(0,0,0,.3))}
.itin{position:absolute;left:22px;bottom:22px;right:22px;max-width:340px;padding:18px}
.itin .d{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:10px 0;border-top:1px solid var(--line2);font-size:14px}
.itin .d:first-of-type{border-top:0}
.itin .d span{font-weight:600;color:var(--ink3);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.itin .d b{font-weight:600}
.itin .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.itin .head b{font-size:17px;letter-spacing:-.02em}
.duo{margin-top:40px;border-top:1px solid var(--line)}
.duo > div{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.duo span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);padding-top:6px}
.duo b{display:block;font-size:22px;font-weight:700;letter-spacing:-.025em}
.duo p{color:var(--ink2);margin-top:4px;font-size:16px}

/* App tour */
.tour{background:var(--mist)}
.tour-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,7vw,120px);align-items:center}
.tabs{display:flex;flex-direction:column;margin-top:36px;border-top:1px solid var(--line)}
.tabs button{display:grid;grid-template-columns:44px 1fr;gap:6px;text-align:left;padding:20px 0;border-bottom:1px solid var(--line)}
.tabs .n{font-size:13px;font-weight:600;color:var(--ink3);padding-top:5px;font-variant-numeric:tabular-nums}
.tabs strong{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.03em;color:var(--ink3);transition:color .4s}
.tabs small{display:block;font-size:15px;color:var(--ink2);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s;margin-top:4px}
.tabs button[aria-selected="true"] strong,.tabs button:hover strong{color:var(--ink)}
.tabs button[aria-selected="true"] small{max-height:60px;opacity:1}
.phone-stage{position:relative;padding:40px 60px}
.phone-stage .halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,0))}
.phone-stage .nubo{position:absolute;left:-30px;bottom:30px;width:150px;z-index:4;filter:drop-shadow(0 18px 24px rgba(11,19,36,.18));animation:bob 8s ease-in-out infinite}
.real{position:absolute;right:56px;bottom:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600}

/* Safety */
.safety{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.safety .art{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;background:var(--cream)}
.safety .art img.photo{width:100%;height:100%;object-fit:cover}
.safety .art .nubo-card{position:absolute;left:20px;bottom:20px;right:20px;display:flex;align-items:center;gap:14px;padding:14px 16px}
.safety .art .nubo-card img{width:58px;height:58px;object-fit:contain}
.safety .art .nubo-card b{display:block;font-size:16px}
.safety .art .nubo-card small{display:block;font-size:14px;color:var(--ink2)}
.points{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:40px}
.points div{padding:24px 0;border-top:1px solid var(--line)}
.points .ic{width:44px;height:44px;border-radius:14px;background:var(--cobalt-tint);color:var(--cobalt);display:grid;place-items:center}
.points .ic svg{width:22px;height:22px}
.points b{display:block;font-size:20px;font-weight:700;letter-spacing:-.025em;margin-top:16px}
.points p{color:var(--ink2);font-size:16px;margin-top:6px}

.points.points3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1020px){.points.points3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.points.points3{grid-template-columns:1fr}}

/* The whole journey: linked steps along a line that fills as you scroll */
.journey{background:linear-gradient(180deg,var(--paper),var(--mist))}
.j-head{max-width:720px;margin:0 auto clamp(40px,6vw,72px);text-align:center}
.j-head .lede{margin:18px auto 0;max-width:46ch}
.jlist{position:relative;margin:0 auto;max-width:1040px}
.jsteps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vw,36px)}
.jline{position:absolute;left:50%;top:24px;bottom:24px;width:4px;margin-left:-2px;border-radius:4px;background:var(--line)}
.jline i{position:absolute;inset:0;border-radius:4px;background:linear-gradient(180deg,var(--sun),var(--coral) 45%,var(--cobalt));transform-origin:top;transform:scaleY(var(--p,0))}
.jn{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center}
.jn .dot{grid-column:2;justify-self:center;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;background:#fff;color:var(--ink3);border:3px solid var(--line);z-index:1;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.jn.lit .dot{color:var(--ink);border-color:#fff;transform:scale(1.08);box-shadow:0 8px 20px -8px rgba(11,19,36,.35)}
.jn.lit .dot.c-sun{background:var(--sun)}.jn.lit .dot.c-mint{background:#7FE0B5}.jn.lit .dot.c-coral{background:#FFA394}.jn.lit .dot.c-lilac{background:#C9BEFF}.jn.lit .dot.c-sky{background:#AFCFFF}
.jcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px;box-shadow:var(--shadow-s);min-width:0;transition:transform .6s var(--ease),box-shadow .6s}
.jn.l .jcard{grid-column:1;grid-row:1}
.jn.r .jcard{grid-column:3;grid-row:1}
.jn .dot{grid-row:1}
.jn.lit .jcard{box-shadow:var(--shadow-m)}
.jcard h3{font-size:clamp(22px,2vw,26px);letter-spacing:-.03em}
.jcard p{margin-top:6px;color:var(--ink2);font-size:16px}
.ui{margin-top:18px;border-radius:16px;background:var(--mist);padding:14px;font-size:14px}
.ui small{display:block;color:var(--ink2);font-size:12.5px}
.ui b{font-size:15px;letter-spacing:-.01em}
.ui-circle{display:flex;align-items:center;gap:12px}
.ui-circle .sq{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.ui-circle .sq svg{width:22px;height:22px}
.ui-circle .chip{margin-left:auto;flex:none}
.ui-hello .b{display:inline-block;background:#fff;padding:10px 14px;border-radius:16px 16px 16px 4px;font-weight:500;box-shadow:var(--shadow-s)}
.ui-hello .acts{display:flex;gap:8px;margin-top:10px}
.ui-hello .acts span{height:32px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;font-weight:600;font-size:13px;border:1px solid var(--line);background:#fff}
.ui-hello .acts .ok{background:var(--lilac);color:#fff;border-color:var(--lilac)}
.ui-ticket{display:flex;align-items:stretch;background:#fff;padding:0;overflow:hidden;border:1px solid var(--line)}
.ui-ticket > div{padding:12px 14px;flex:1}
.ui-ticket small:first-child{color:var(--mint);font-weight:700;letter-spacing:.1em;font-size:11px}
.ui-ticket .stub{display:grid;place-items:center;padding:0 16px;border-left:2px dashed var(--line);font-weight:700;color:var(--ink3)}
.ui-table{display:flex;align-items:center;gap:16px}
.ui-table .ring{position:relative;width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 6px var(--coral-t);display:grid;place-items:center;flex:none}
.ui-table .ring span{font-weight:800;font-size:15px}
.ui-table .ring i{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--coral);border:2px solid #fff;left:50%;top:50%;margin:-7px;transform:rotate(calc(var(--k) * 60deg)) translateY(-44px)}
.ui-table .ring i:nth-child(1){--k:0}.ui-table .ring i:nth-child(2){--k:1}.ui-table .ring i:nth-child(3){--k:2}.ui-table .ring i:nth-child(4){--k:3}.ui-table .ring i:nth-child(5){--k:4}.ui-table .ring i:nth-child(6){--k:5}
.ui-picks{display:flex;align-items:center;gap:6px}
.ui-picks .av{width:38px;height:38px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;margin-left:-10px;box-shadow:var(--shadow-s)}
.ui-picks .av:first-child{margin-left:0}
.ui-picks .av img{width:80%;height:80%}
.ui-picks b{margin-left:10px}
.ui-post{display:flex;align-items:center;gap:14px;background:#FFFDF8;border:1px solid var(--line)}
.ui-post img{width:56px;height:auto;transform:rotate(-4deg);filter:drop-shadow(0 4px 6px rgba(11,19,36,.2))}
.ui-post p{font-family:"Caveat",cursive;font-size:24px;line-height:1.1;color:#24324F}
.js .jn.rv{transform:translateY(28px)}
@media (max-width:820px){
  .jline{left:22px}
  .jn{grid-template-columns:44px 1fr;gap:16px;align-items:start}
  .jn .dot{grid-column:1;justify-self:start}
  .jn.l .jcard,.jn.r .jcard{grid-column:2}
}

/* Four ways in that merge into one path */
.how-head .lede{margin-top:18px;max-width:46ch}
.doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.door{border-radius:var(--r-l);padding:22px 20px 0;display:flex;flex-direction:column;min-width:0;min-height:330px}
.door.c-sun{background:var(--sun-t)}.door.c-mint{background:var(--mint-t)}.door.c-coral{background:var(--coral-t)}.door.c-lilac{background:#EEEBFF}
.door h3{font-size:clamp(21px,1.8vw,25px);letter-spacing:-.03em}
.door p{margin-top:6px;color:var(--ink2);font-size:15px}
.door .demo{padding:18px 0 20px}
.door .chips span{height:34px;padding:0 13px;font-size:13px}
.door .plancard{padding:10px;gap:10px}
.door .plancard{flex-wrap:wrap}
.door .plancard img{width:44px;height:44px}
.door .plancard .in{margin-left:0;flex-basis:auto}
.hostcard{background:#fff;border-radius:18px;padding:14px;box-shadow:var(--shadow-m)}
.hostcard b{display:block;font-size:16px}.hostcard small{color:var(--ink2);font-size:13px}
.joiners{display:flex;align-items:center;margin-top:12px}
.joiners span{width:34px;height:34px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;margin-left:-8px;opacity:0;transform:scale(.5)}
.joiners span:first-child{margin-left:0}
.joiners img{width:80%;height:80%}
.joiners em{font-style:normal;font-size:13px;font-weight:700;color:var(--lilac);margin-left:10px;opacity:0}
.play .joiners span{animation:pop .45s var(--ease) forwards}
.play .joiners span:nth-child(2){animation-delay:.35s}.play .joiners span:nth-child(3){animation-delay:.7s}
.play .joiners em{animation:pop .4s 1.1s var(--ease) forwards}
.seats6{display:grid;place-items:center;padding:32px 0 34px!important}
.seats6 .ring{position:relative;width:110px;height:110px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 8px #FFD9D1,0 14px 30px -14px rgba(11,19,36,.35);display:grid;place-items:center;text-align:center}
.seats6 .ring span{font-weight:800;font-size:15px;line-height:1.1}
.seats6 i{position:absolute;width:20px;height:20px;border-radius:50%;left:50%;top:50%;margin:-10px;border:2px dashed #E7B9AF;background:#fff;transform:rotate(calc(var(--k) * 60deg)) translateY(-66px)}
.seats6 i:nth-child(1){--k:0}.seats6 i:nth-child(2){--k:1}.seats6 i:nth-child(3){--k:2}.seats6 i:nth-child(4){--k:3}.seats6 i:nth-child(5){--k:4}.seats6 i:nth-child(6){--k:5}
.play .seats6 i{animation:seatfill .35s var(--ease) forwards}
.play .seats6 i:nth-child(2){animation-delay:.25s}.play .seats6 i:nth-child(3){animation-delay:.5s}.play .seats6 i:nth-child(4){animation-delay:.75s}.play .seats6 i:nth-child(5){animation-delay:1s}.play .seats6 i:nth-child(6){animation-delay:1.25s}
@keyframes seatfill{to{background:var(--coral);border:2px solid #fff}}
.merge{display:block;width:100%;height:clamp(70px,9vw,120px);margin-top:-2px}
.merge path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:6 8;vector-effect:non-scaling-stroke;opacity:.35}
.merge + .jlist{margin-top:0}
.ui-check{display:flex;align-items:center;gap:12px}
.ui-check .tick{width:36px;height:36px;border-radius:50%;background:var(--mint);display:grid;place-items:center;flex:none}
.ui-check .tick svg{width:18px;height:18px}
.ui-chat{display:flex;flex-direction:column;gap:8px}
.ui-chat .m{max-width:85%;padding:9px 13px;font-size:14px;font-weight:500;border-radius:16px}
.ui-chat .l{align-self:flex-start;background:#fff;border-bottom-left-radius:5px}
.ui-chat .r{align-self:flex-end;background:var(--coral);color:#fff;border-bottom-right-radius:5px}
@media (max-width:1020px){.doors{grid-template-columns:1fr 1fr}.merge{display:none}.doors + .merge + .jlist{margin-top:40px}}
@media (max-width:560px){.doors{grid-template-columns:1fr}.door{min-height:0}}
@media (prefers-reduced-motion:reduce){.joiners span,.joiners em{opacity:1!important;transform:none!important}.seats6 i{background:var(--coral)!important}}

.jcard.with-phone{display:grid;grid-template-columns:1fr 132px;gap:20px;align-items:center}
.mini-phone{margin:0;width:132px}
.mini-phone img{width:100%;height:auto;border-radius:22px;border:5px solid #0A0B0E;box-shadow:0 18px 36px -16px rgba(11,19,36,.45)}
.mini-phone figcaption{margin-top:8px;text-align:center;font-size:12px;color:var(--ink3)}
@media (max-width:640px){.jcard.with-phone{grid-template-columns:1fr}.mini-phone{width:150px;justify-self:center}}

/* Phones: headline, line, then the scene, then the form */
@media (max-width:1020px){
  .hero2-copy{display:contents}
  .hero2-grid{gap:0}
  .hero2 .pill{order:1;justify-self:start}
  .hero2 h1{order:2}
  .hero2 .lede{order:3}
  .hero2 .scene{order:4;max-width:min(100%,380px);justify-self:center;margin-top:26px}
  .hero2 #join{order:5}
}
@media (max-width:640px){
  .hero2{padding-top:92px}
  .hero2 h1{margin-top:18px}
  .hero2 .lede{margin-top:14px;font-size:16px}
  .hero2 .scene{max-width:290px;margin-top:20px;border-radius:28px}
  .hero2 .scene figcaption{font-size:11.5px;padding:8px 10px 10px}
  .hero2 .pp em{font-size:9.5px;padding:3px 7px}
  .hero2 .tbl2{width:40%}
  .hero2 .tbl2 span{font-size:8px;letter-spacing:.04em}
  .hero2 .tbl2 b{font-size:12.5px}
  .hero2 .say{font-size:10.5px;padding:6px 10px}
}

/* Tighter rhythm between sections */
.sec{padding-block:clamp(64px,8vw,112px)}
.hero2{padding-bottom:clamp(24px,4vw,56px)}
.how{padding-top:clamp(48px,6vw,88px)}
.joinsec .nubo-wrap{width:160px}
.joinsec .nubo{width:160px}
.joinsec h2{margin-top:12px}
.perks{margin-top:40px}

/* Venues */
.venues{background:var(--cream)}
.vgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-m)}
.vgrid .ph{min-height:520px;position:relative}
.vgrid .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vgrid .copy{padding:clamp(32px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.vgrid h2{font-size:clamp(36px,4.4vw,60px);letter-spacing:-.045em;line-height:.98;margin-top:20px}
.vgrid .lede{margin-top:20px}
.vlist{list-style:none;padding:0;margin:28px 0 32px;display:grid;gap:12px}
.vlist li{display:flex;gap:12px;align-items:center;font-size:16px;color:var(--ink)}
.vlist svg{width:20px;height:20px;color:var(--cobalt);flex:none}

/* Closing */
.closing{background:linear-gradient(180deg,var(--paper),var(--cream));position:relative;overflow:hidden}
.close-grid{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:40px}
.closing h2{font-size:clamp(44px,7vw,108px);letter-spacing:-.055em;line-height:.92}
.closing .actions{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap;align-items:center}
.closing .soon{font-size:14px;color:var(--ink3);margin-top:18px}
.closing .nubo{width:min(100%,380px);justify-self:end;filter:drop-shadow(0 30px 40px rgba(11,19,36,.18));animation:bob 8s ease-in-out infinite}
.closing .nubo-wrap{position:relative;display:grid;place-items:center}
.closing .nubo-wrap::before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 18px rgba(255,255,255,.5),0 0 0 44px rgba(255,255,255,.25)}

/* FAQ + footer */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
.faq h2{font-size:clamp(34px,4vw,52px)}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:19px;font-weight:600;letter-spacing:-.015em;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary .pm{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:transform .5s var(--ease),background .3s}
details[open] summary .pm{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
details p{padding:0 48px 26px 0;color:var(--ink2);font-size:17px}
footer{padding-block:56px 40px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.foot nav{display:flex;gap:28px;flex-wrap:wrap;font-size:15px;color:var(--ink2)}
.foot nav a:hover{color:var(--ink)}
.fine{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:40px;font-size:13px;color:var(--ink3)}

/* Reveal */
.up{animation:rise 1.2s var(--ease) both}.up.d1{animation-delay:.08s}.up.d2{animation-delay:.18s}.up.d3{animation-delay:.28s}
.reel{animation:rise 1.4s .3s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

.motion-btn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;height:40px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.motion-btn svg{width:14px;height:14px}
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .motion-btn{display:none}
}


/* Waitlist form */
.wl{position:relative;display:flex;align-items:center;gap:6px;width:min(100%,660px);margin:36px auto 0;padding:7px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-m);transition:box-shadow .4s var(--ease),border-color .3s;text-align:left}
.wl:focus-within{border-color:#C9D7F5;box-shadow:0 0 0 4px var(--cobalt-tint),var(--shadow-m)}
.wl label{flex:1;min-width:0;display:flex;flex-direction:column;padding:6px 18px 6px 22px}
.wl label + label{border-left:1px solid var(--line);flex:.8}
.wl label span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.wl input{width:100%;min-width:0;border:0;background:transparent;padding:2px 0 0;font:inherit;font-size:16px;font-weight:500;color:var(--ink);outline:none}
.wl input::placeholder{color:#A5ADBC;font-weight:400}
.wl .btn{flex:none;height:56px}
.wl .btn[disabled]{opacity:.7;cursor:progress}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-opts{display:flex;justify-content:center;align-items:center;gap:10px 22px;flex-wrap:wrap;margin:16px auto 0;width:min(100%,660px);font-size:14px;color:var(--ink2)}
.tick{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:500;color:var(--ink)}
.tick input{appearance:none;-webkit-appearance:none;margin:0;width:22px;height:22px;border-radius:7px;border:1.5px solid #C4CAD6;background:#fff;display:grid;place-items:center;transition:background .25s,border-color .25s;cursor:pointer}
.tick input::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(.4);opacity:0;transition:transform .3s var(--ease),opacity .2s}
.tick input:checked{background:var(--cobalt);border-color:var(--cobalt)}
.tick input:checked::after{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.tick small{font-weight:400;color:var(--ink3);font-size:13px}
.fineprint{font-size:13px;color:var(--ink3)}
.fineprint a{text-decoration:underline;text-underline-offset:2px}
.wl-msg{min-height:22px;margin-top:10px;font-size:14px;font-weight:500;text-align:center}
.wl-msg.bad{color:#C2410C}
.wl-done{display:none;width:min(100%,560px);margin:32px auto 0;padding:28px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-m);text-align:center}
.wl-done img{width:112px;height:112px;margin:-8px auto 0;object-fit:contain}
.wl-done h3{font-size:30px;margin-top:6px}
.wl-done p{color:var(--ink2);margin-top:10px;font-size:16px}
.wl-done .share{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.wl-done .share .btn{height:46px;padding:0 20px;font-size:15px}
.btn-wa{background:#25D366;color:#fff}
.btn-wa svg{width:18px;height:18px}
.btn-wa:hover svg{transform:none}
.btn-line{border:1px solid var(--line);background:#fff}
.btn-line:hover{border-color:var(--ink3)}
.joined .wl,.joined .wl-opts,.joined .wl-msg{display:none}
.joined .wl-done{display:block;animation:rise .9s var(--ease) both}
.soonrow{display:flex;justify-content:center;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:var(--ink2)}
.soonrow .os{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--ink)}
.soonrow svg{width:16px;height:16px}
.authnote{display:none;width:min(100%,520px);margin:20px auto 0;padding:12px 16px;border-radius:14px;background:var(--mist);font-size:14px;color:var(--ink2)}
.authpage .authnote{display:block}

/* What Yoopzi is, under the hero form */
.what{list-style:none;padding:0;margin:40px auto 0;width:min(100%,860px);display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:left;border-top:1px solid var(--line)}
.what li{padding:20px 22px 0;border-left:1px solid var(--line)}
.what li:first-child{border-left:0;padding-left:0}
.what b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em}
.what span{display:block;margin-top:4px;font-size:15px;color:var(--ink2);line-height:1.5}
@media (max-width:640px){.what{grid-template-columns:1fr;margin-top:28px}.what li{border-left:0;padding:16px 0;border-bottom:1px solid var(--line)}}

/* Waitlist section */
.joinsec{background:linear-gradient(180deg,var(--paper),var(--cream));position:relative;overflow:hidden;text-align:center}
.joinsec .nubo-wrap{position:relative;display:grid;place-items:center;width:200px;margin:0 auto 8px}
.joinsec .nubo-wrap::before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 14px rgba(255,255,255,.55),0 0 0 34px rgba(255,255,255,.25)}
.joinsec .nubo{position:relative;width:200px;filter:drop-shadow(0 24px 30px rgba(11,19,36,.16));animation:bob 8s ease-in-out infinite}
.joinsec h2{font-size:clamp(44px,7vw,100px);letter-spacing:-.055em;line-height:.92;margin-top:20px}
.joinsec .lede{margin:22px auto 0;max-width:42ch;text-wrap:balance}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:min(100%,900px);margin:56px auto 0;text-align:left}
.perks div{padding:22px;border-radius:var(--r-m);background:rgba(255,255,255,.75);border:1px solid var(--line)}
.perks b{display:block;font-size:18px;letter-spacing:-.02em}
.perks p{color:var(--ink2);font-size:15px;margin-top:6px}

/* Footer links */
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-cols h4{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.foot-cols nav{flex-direction:column;gap:10px}

/* Guide pages */
.guide{padding-top:clamp(120px,15vh,160px)}
.guide .wrap{width:min(760px,100% - var(--gutter)*2)}
.guide .kicker{margin-bottom:22px}
.guide h1{font-size:clamp(42px,6.4vw,76px);letter-spacing:-.045em;line-height:.98}
.guide .lede{margin-top:24px;max-width:none}
.guide .cover{margin:44px 0 0;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-l)}
.guide .cover img{width:100%;height:100%;object-fit:cover}
.prose{margin-top:56px;font-size:18px;color:var(--ink2);line-height:1.7}
.prose h2{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.035em;line-height:1.08;color:var(--ink);margin:56px 0 16px}
.prose h3{font-size:21px;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:32px 0 8px}
.prose p+p{margin-top:16px}
.prose ul,.prose ol{padding-left:22px;margin:16px 0}
.prose li{margin:8px 0}
.prose li::marker{color:var(--cobalt)}
.prose strong{color:var(--ink)}
.prose a{color:var(--cobalt);font-weight:600}
.callout{margin-top:64px;padding:clamp(28px,4vw,44px);border-radius:var(--r-xl);background:var(--cream);text-align:center}
.callout h2{font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;margin-top:0}
.callout .wl{margin-top:26px}
.crumbs{font-size:14px;color:var(--ink3)}
.crumbs a:hover{color:var(--ink)}
.more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.more a{display:block;padding:20px;border-radius:var(--r-m);border:1px solid var(--line);transition:border-color .3s,transform .4s var(--ease)}
.more a:hover{border-color:var(--ink3);transform:translateY(-2px)}
.more b{display:block;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.more span{font-size:14px;color:var(--ink3)}

@media (max-width:1020px){
  .perks{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wl{flex-direction:column;align-items:stretch;border-radius:24px;padding:8px;gap:0}
  .wl label{padding:12px 14px}
  .wl label + label{border-left:0;border-top:1px solid var(--line)}
  .wl .btn{width:100%;justify-content:center;margin-top:6px;height:54px}
  .wl-opts{flex-direction:column;gap:12px}
  .more{grid-template-columns:1fr}
  .prose{font-size:17px}
  .foot-cols{gap:32px}
}

/* Responsive */
@media (max-width:1020px){
  .nav{display:none}
  .sec-head{grid-template-columns:1fr}
  .sec-head .lede{justify-self:start}
  .circles,.mapgrid,.pc,.table-grid,.trips,.safety,.faq,.close-grid{grid-template-columns:1fr}
  .ev-grid,.tour-grid{grid-template-columns:1fr;justify-items:center}
  .ev-grid > div:first-child,.tour-grid > div:first-child{justify-self:stretch}
  .vgrid{grid-template-columns:1fr}
  .vgrid .ph{min-height:320px}
  .closing .nubo{justify-self:center;width:260px}
  .reel .f3,.reel .f4{display:none}
  .fc-a{left:4%;top:6%}
  .fc-b{right:4%;bottom:8%}
}
@media (max-width:640px){
  body{font-size:16px}
  .top .wrap{height:64px}
  .lockup img.face{width:32px;height:32px}
  .lockup img.word{height:22px}
  .top-cta .btn-sm{height:38px;padding:0 14px;font-size:13px}
  .hero h1{font-size:clamp(46px,14.2vw,72px)}
  .hero .actions .btn{height:50px;padding:0 22px;font-size:15px}
  .reel{height:auto;aspect-ratio:4/5;perspective:none}
  .reel .f0{width:84%}
  .reel .f1,.reel .f2{width:30%;height:58%}
  .reel .f1{transform:translate(calc(-50% - 52vw),-40%) rotate(-5deg)}
  .reel .f2{transform:translate(calc(-50% + 52vw),-60%) rotate(5deg)}
  .fc-a{left:2%;top:4%;transform:scale(.86);transform-origin:left top}
  .fc-b{display:none}
  .hero-stamp{right:6%;top:-24px;width:64px}
  .reel .caption strong{font-size:22px}
  .reel .caption span{display:none}
  .ilist strong{font-size:22px}
  .stage{aspect-ratio:4/5}
  .points{grid-template-columns:1fr}
  .back{grid-template-columns:1fr}
  .back .msg{border-right:0;padding-right:0}
  .back .addr{display:none}
  .front .stamp{top:20px;right:20px}
  .postmark{width:80px;height:80px;font-size:7px;left:-8px;top:-14px}
  .album img{width:72px}
  .phone{width:250px}
  .phone-stage{padding:30px 40px}
  .phone-stage .nubo{width:104px;left:-14px}
  .real{right:30px}
  .duo > div{grid-template-columns:1fr;gap:4px}
  details p{padding-right:0}
  .motion-btn{display:none}
  .nights-band{min-height:auto;padding-top:120px}
  .nights-band::after{background:linear-gradient(180deg,rgba(13,14,18,.6) 0%,rgba(13,14,18,.55) 40%,rgba(13,14,18,.9) 75%,var(--night) 100%)}
}

/* ---------- Redesign (11 Oct): problem → answer hero, living scene, how it works ---------- */
:root{--sun:#FFC93C;--sun-t:#FFF5D9;--mint:#1FB57A;--mint-t:#DFF5EA;--coral:#FF6A55;--coral-t:#FFE8E3;--lilac:#7C6CF2}
.hero2{padding-top:clamp(112px,14vh,150px);padding-bottom:clamp(40px,6vw,80px);position:relative;overflow-x:clip;background:radial-gradient(1200px 500px at 85% 0%,#FFF6E0 0%,rgba(255,246,224,0) 60%),radial-gradient(900px 500px at 0% 30%,#EEF4FF 0%,rgba(238,244,255,0) 60%),var(--paper)}
.hero2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero2-copy{min-width:0}
.hero2 .pill{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;color:var(--ink2);background:#fff;box-shadow:var(--shadow-s)}
.hero2 .pill img{width:28px;height:28px;border-radius:50%;background:var(--cream);padding:3px}
.hero2 h1{font-size:clamp(48px,6.6vw,96px);letter-spacing:-.05em;line-height:.95;margin-top:24px}
.scribble{position:relative;display:inline-block;white-space:nowrap}
.scribble svg{position:absolute;left:-2%;right:-2%;width:104%;bottom:-.08em;height:.32em;overflow:visible}
.scribble path{fill:none;stroke:var(--sun);stroke-width:9;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.1s .9s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero2 .lede{margin-top:22px;max-width:44ch}
.hero2 .wl{margin:28px 0 0;width:100%;display:grid;grid-template-columns:1fr 1fr;border-radius:24px;padding:8px;gap:0}
.hero2 .wl label{padding:10px 18px}
.hero2 .wl .btn{grid-column:1/-1;justify-content:center;margin-top:6px;width:100%}
.hero2 .wl-opts{justify-content:flex-start;margin:14px 0 0;width:100%}
.hero2 .wl-msg{text-align:left}
.hero2 .wl-done{margin:28px 0 0}

/* The scene: an illustrated block of a city, six people, one table */
.scene{position:relative;margin:0;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:end;border-radius:var(--r-xl);background:#F5EFE4;box-shadow:var(--shadow-l);overflow:hidden;transition:opacity .5s}
.scene svg.city,.scene svg.seats{position:absolute;inset:0;width:100%;height:100%;display:block}
.seats .empty circle{fill:none;stroke:#C9BFAE;stroke-width:.5;stroke-dasharray:1.6 1.4;transition:opacity .6s}
.full .seats .empty circle{opacity:0}
.trails path{fill:none;stroke:var(--ink);stroke-width:.45;stroke-linecap:round;stroke-dasharray:1.2 1.6;opacity:0;transition:opacity .5s}
.go .trails path{opacity:.45}
.full .trails path{opacity:0}
.pp{position:absolute;left:var(--x0);top:var(--y0);width:15%;transform:translate(-50%,-50%);transition:left 1.4s var(--ease) calc(var(--i) * 90ms),top 1.4s var(--ease) calc(var(--i) * 90ms),opacity .45s;z-index:3}
.pp img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:50%;background:var(--c);border:3px solid #fff;padding:7%;box-shadow:0 10px 22px -10px rgba(11,19,36,.45);transition:transform .4s var(--ease)}
.pp::before{content:"";position:absolute;inset:-12%;border-radius:50%;border:2px solid var(--c);opacity:0;animation:seek 2.6s var(--ease) infinite;animation-delay:calc(var(--i) * -.45s)}
@keyframes seek{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.together .pp::before{animation:none;opacity:0}
.pp em{position:absolute;left:50%;font-style:normal;font-size:clamp(11px,1.05vw,13px);font-weight:600;line-height:1.2;white-space:nowrap;background:#fff;color:var(--ink);padding:5px 10px;border-radius:999px;box-shadow:0 6px 16px -8px rgba(11,19,36,.35);transform:translateX(-50%);transition:opacity .35s}
.pp em.b{top:calc(100% + 6px)}
.pp em.t{bottom:calc(100% + 6px)}
.go .pp em{opacity:0}
.together .pp{left:var(--x1);top:var(--y1)}
.full .pp img{animation:hop .5s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes hop{40%{transform:translateY(-14%)}}
.tbl2{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 18px 40px -18px rgba(11,19,36,.35);display:grid;place-content:center;text-align:center;z-index:2;transition:box-shadow .6s}
.tbl2::after{content:"";position:absolute;inset:9%;border-radius:50%;border:2px dashed #E2D8C6;transition:border-color .6s}
.full .tbl2{box-shadow:0 0 0 10px var(--sun-t),0 18px 40px -18px rgba(11,19,36,.35)}
.full .tbl2::after{border-color:transparent}
.tbl2 span{font-size:clamp(10px,1vw,12px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.tbl2 b{font-size:clamp(15px,1.7vw,20px);letter-spacing:-.02em;margin-top:2px}
.tbl2 .t-full{display:none}
.full .tbl2 .t-open{display:none}
.full .tbl2 .t-full{display:block}
.say{position:absolute;left:50%;top:2.5%;transform:translate(-50%,8px);background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:8px 13px;border-radius:14px;opacity:0;transition:opacity .4s,transform .5s var(--ease);z-index:5;white-space:nowrap}
.say::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.full .say{opacity:1;transform:translate(-50%,0);transition-delay:.6s}
.scene.fade .pp,.scene.fade .tbl2,.scene.fade .say{opacity:0;transition:opacity .45s}
.scene.reset .pp{transition:none}
.scene figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 18px 14px;font-size:14px;font-weight:600;color:var(--ink2);text-align:center;z-index:5}
.scene .cap-b{display:none}
.together figcaption .cap-a{display:none}
.together figcaption .cap-b{display:inline}

/* How it works */
.how{padding-top:clamp(64px,8vw,112px)}
.how-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,56px)}
.how-head .h2{font-size:clamp(38px,5.4vw,76px)}
.stat{padding:24px;border-radius:var(--r-l);background:var(--ink);color:#fff}
.stat b{display:block;font-size:56px;line-height:1;letter-spacing:-.04em;color:var(--sun)}
.stat p{margin-top:10px;font-size:16px;color:rgba(255,255,255,.82)}
.stat small{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.55)}
.stat a{text-decoration:underline;text-underline-offset:2px}
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps3 li{position:relative;border-radius:var(--r-l);padding:26px 24px 0;display:flex;flex-direction:column;overflow:hidden;min-height:400px;min-width:0}
.steps3 .c-sun{background:var(--sun-t)}.steps3 .c-mint{background:var(--mint-t)}.steps3 .c-coral{background:var(--coral-t)}
.steps3 .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--ink)}
.steps3 h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;margin-top:18px}
.steps3 p{margin-top:8px;color:var(--ink2);font-size:16px}
.demo{margin-top:auto;padding:24px 0 26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{height:38px;padding:0 16px;border-radius:999px;background:#fff;display:inline-flex;align-items:center;font-size:14px;font-weight:600;box-shadow:var(--shadow-s);opacity:0;transform:translateY(10px) scale(.9)}
.play .chips span{animation:pop .5s var(--ease) forwards}
.chips span:nth-child(2){animation-delay:.15s!important}.chips span:nth-child(3){animation-delay:.3s!important}.chips span:nth-child(4){animation-delay:.45s!important}.chips span:nth-child(5){animation-delay:.6s!important}.chips span:nth-child(6){animation-delay:.75s!important}
.play .chips span:nth-child(2),.play .chips span:nth-child(4){background:var(--ink);color:#fff}
@keyframes pop{to{opacity:1;transform:none}}
.plancard{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:12px;box-shadow:var(--shadow-m);opacity:0;transform:translateX(-24px)}
.plancard img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.plancard b{display:block;font-size:16px}.plancard small{font-size:13px;color:var(--ink2)}
.plancard .in{margin-left:auto;flex:none;font-size:13px;font-weight:700;color:#fff;background:var(--mint);padding:7px 12px;border-radius:999px;opacity:0;transform:scale(.6)}
.play .plancard{animation:slidein .7s .1s var(--ease) forwards}
.play .plancard .in{animation:pop .45s 1s var(--ease) forwards}
@keyframes slidein{to{opacity:1;transform:none}}
.chat{display:flex;flex-direction:column;gap:8px}
.chat .m{max-width:80%;padding:10px 14px;font-size:15px;font-weight:500;border-radius:18px;opacity:0;transform:translateY(10px)}
.chat .l{align-self:flex-start;background:#fff;border-bottom-left-radius:6px}
.chat .r{align-self:flex-end;background:var(--coral);color:#fff;border-bottom-right-radius:6px}
.play .chat .m{animation:pop .5s var(--ease) forwards}
.play .chat .m:nth-child(2){animation-delay:.7s}.play .chat .m:nth-child(3){animation-delay:1.4s}
.reduce-all .chips span,.reduce-all .plancard,.reduce-all .plancard .in,.reduce-all .chat .m{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .chips span,.plancard,.plancard .in,.chat .m{opacity:1!important;transform:none!important}
  .scribble path{stroke-dashoffset:0}
}
@media (max-width:1020px){
  .hero2-grid,.how-head{grid-template-columns:1fr}
  .scene{justify-self:center}
  .steps3{grid-template-columns:1fr}
  .steps3 li{min-height:0}
}
@media (max-width:640px){
  .hero2 h1{font-size:clamp(42px,12.5vw,60px)}
  .hero2 .wl{grid-template-columns:1fr}
  .hero2 .wl label + label{border-left:0;border-top:1px solid var(--line)}
  .pp em{font-size:10px;padding:4px 7px}
  .say{font-size:11px}
}
.sec.joinsec{padding-top:clamp(36px,4vw,64px)}

/* Stamp strip */
.stampband{padding-block:clamp(32px,4vw,56px) clamp(8px,2vw,24px);overflow:hidden}
.stampband .album{margin-top:0}
.stampband .album-cap{display:flex;justify-content:center;gap:6px 14px;flex-wrap:wrap;text-align:center;margin-top:14px;font-size:16px;color:var(--ink2)}
.stampband .album-cap strong{color:var(--ink);font-size:18px;letter-spacing:-.01em}

/* Travelling solo: a flight across stamped cities, and four luggage tags */
.travel2{background:linear-gradient(180deg,#FFF3E6 0%,#FFF9EF 60%,var(--paper) 100%);overflow:hidden}
.travel-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.travel2 .h2{font-size:clamp(36px,5vw,68px)}
.travel2 .lede{max-width:44ch}
.flight{position:relative;margin:clamp(20px,3vw,36px) auto 0;max-width:1100px}
.flight svg{display:block;width:100%;height:auto;overflow:visible}
#plane circle{filter:drop-shadow(0 6px 10px rgba(11,19,36,.25))}
.flight .cloud{position:absolute;width:180px;height:60px;border-radius:999px;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));animation:drift 38s linear infinite;pointer-events:none}
.flight .c1{top:6%;left:8%}.flight .c2{top:62%;left:40%;width:240px;animation-duration:52s;animation-delay:-20s}.flight .c3{top:18%;left:70%;width:150px;animation-duration:44s;animation-delay:-8s}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(60px)}}
#trail{stroke:url(#trailgrad)}
.stop{position:absolute;width:0;height:0;pointer-events:none;z-index:2}
.stop img{position:absolute;left:0;top:0;max-width:none;width:clamp(54px,6vw,76px);height:auto;transform:translate(-50%,-50%) rotate(-5deg) scale(.82);filter:drop-shadow(0 10px 14px rgba(11,19,36,.22)) saturate(.35);opacity:.8;transition:transform .6s cubic-bezier(.34,1.56,.64,1),filter .5s,opacity .5s}
.stop:nth-child(even) img{transform:translate(-50%,-50%) rotate(5deg) scale(.82)}
.stop.on img{transform:translate(-50%,-50%) rotate(-5deg) scale(1);filter:drop-shadow(0 12px 16px rgba(11,19,36,.28));opacity:1}
.stop.on:nth-child(even) img{transform:translate(-50%,-50%) rotate(5deg) scale(1)}
.stop .city{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink);background:#fff;padding:3px 10px;border-radius:999px;box-shadow:0 4px 12px -6px rgba(11,19,36,.35);opacity:.75;transition:opacity .4s}
.stop.on .city{opacity:1}
.stop.below .city{bottom:calc(clamp(54px,6vw,76px) * .62)}
.stop.above .city{top:calc(clamp(54px,6vw,76px) * .62)}
.stop .ping{position:absolute;left:0;top:0;width:90px;height:90px;margin:-45px;border-radius:50%;border:3px solid var(--coral);opacity:0}
.stop.land .ping{animation:ping .9s ease-out}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.stop .card{position:absolute;left:0;background:var(--ink);color:#fff;border-radius:16px;padding:10px 15px;box-shadow:0 16px 30px -14px rgba(11,19,36,.55);white-space:nowrap;text-align:left;opacity:0;transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1);z-index:3}
.stop .card b{display:block;font-size:15px;letter-spacing:-.01em}
.stop .card small{display:block;font-size:13px;color:rgba(255,255,255,.75);margin-top:2px}
.stop.below .card{top:calc(clamp(54px,6vw,76px) * .62 + 6px);transform:translate(var(--ax,-50%),10px) scale(.9)}
.stop.above .card{bottom:calc(clamp(54px,6vw,76px) * .62 + 6px);transform:translate(var(--ax,-50%),-10px) scale(.9)}
.stop.cur .card{opacity:1;transform:translate(var(--ax,-50%),0) scale(1)}
.stop.right{--ax:-86%}
.stop.cur .city{opacity:0}
.stop.last .card,.stop.last.cur .card{top:auto;bottom:auto;left:calc(clamp(54px,6vw,76px) * -.62);top:-24px;transform:translate(-100%,0) scale(.9)}
.stop.last.cur .card{transform:translate(-100%,0) scale(1)}

.tags{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tag{position:relative;background:var(--c);border-radius:18px;padding:36px 22px 24px;transform:rotate(calc((var(--n) - 1.5) * 1.2deg));box-shadow:0 14px 28px -18px rgba(11,19,36,.5);opacity:0;translate:0 16px;transition:opacity .5s,translate .6s var(--ease)}
.play .tag{opacity:1;translate:0 0}
.play .tag:nth-child(2){transition-delay:.12s}.play .tag:nth-child(3){transition-delay:.24s}.play .tag:nth-child(4){transition-delay:.36s}
.tag .hole{position:absolute;top:13px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#FFF6EA;box-shadow:inset 0 1px 3px rgba(11,19,36,.3)}
.tag .was{position:relative;display:inline-block}
.tag .hand{font-family:"Caveat",cursive;font-size:27px;white-space:nowrap;font-weight:600;line-height:1.05;color:rgba(11,19,36,.62)}
.tag .was svg{position:absolute;left:-4%;top:38%;width:108%;height:16px;overflow:visible}
.tag .was path{fill:none;stroke:#0B1324;stroke-width:3;stroke-linecap:round;opacity:.75;stroke-dasharray:240;stroke-dashoffset:240;vector-effect:non-scaling-stroke;transition:stroke-dashoffset .8s var(--ease)}
.play .tag .was path{stroke-dashoffset:0;transition-delay:calc(.5s + var(--n) * .2s)}
.tag .stitch{display:block;margin:16px 0 14px;border-top:2px dashed rgba(11,19,36,.22)}
.tag p{display:flex;gap:10px;align-items:flex-start;font-size:16.5px;font-weight:500;line-height:1.42;color:var(--ink);letter-spacing:-.005em}
.tag .ok{flex:none;width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-top:1px}
.tag .ok svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1020px){.travel-head{grid-template-columns:1fr}.tags{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.stop .card{display:none}.stop img{width:34px}.stop .city{font-size:9.5px;padding:2px 6px}.stop.below .city{bottom:22px}.stop.above .city{top:22px}.tags{grid-template-columns:1fr}.tag{transform:none}}
@media (prefers-reduced-motion:reduce){.flight .cloud{animation:none}.tag{opacity:1;translate:0 0}.tag .was path{stroke-dashoffset:0}}

/* Safety: Nubo with his shield at the centre, six promises linked around him */
.safety2{background:linear-gradient(180deg,var(--paper),#F2FAF6)}
.safety-head{text-align:center;max-width:720px;margin:0 auto clamp(32px,5vw,56px)}
.safety-head .lede{margin:16px auto 0}
.shield-map{position:relative;display:grid;grid-template-columns:1fr minmax(200px,280px) 1fr;gap:clamp(16px,3vw,40px);align-items:center;max-width:1120px;margin:0 auto}
.shield-map .links{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.shield-map .links path{fill:none;stroke:#13915F;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .8s .3s}
.play .links path{opacity:.5}
.shield-core{position:relative;z-index:1;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 14px rgba(255,255,255,.7),0 0 0 15px #D6EFE3,0 30px 60px -30px rgba(11,19,36,.4)}
.shield-core img{width:82%;height:auto;animation:bob 7s ease-in-out infinite}
.sp-col{list-style:none;margin:0;padding:0;display:grid;gap:16px;position:relative;z-index:1}
.sp{display:flex;gap:14px;align-items:flex-start;background:var(--t);border-radius:20px;padding:16px 18px;box-shadow:0 10px 24px -18px rgba(11,19,36,.45);opacity:0;transform:translateX(var(--from,-16px));transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(var(--n) * 90ms)}
.sp.r{--from:16px}
.play .sp{opacity:1;transform:none}
.sp .ic{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--k);display:grid;place-items:center}
.sp .ic svg{width:21px;height:21px}
.sp b{display:block;font-size:17px;letter-spacing:-.02em}
.sp p{margin-top:3px;font-size:14.5px;line-height:1.45;color:var(--ink2)}
@media (max-width:900px){.shield-map{grid-template-columns:1fr}.shield-map .links{display:none}.shield-core{order:-1;width:220px;justify-self:center;margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){.sp{opacity:1;transform:none}.shield-map .links path{opacity:.5}}

/* Stay in touch: a little group chat */
.ui-chat2{padding:0;overflow:hidden;background:#F6F7FA}
.ch-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line)}
.ch-head .stack{display:flex}
.ch-head .stack span{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px;display:grid;place-items:center}
.ch-head .stack span:first-child{margin-left:0}
.ch-head img,.ui-chat2 .av img{width:80%;height:80%}
.ch-head b{display:block;font-size:14px}.ch-head small{font-size:12px}
.ch-body{display:flex;flex-direction:column;gap:9px;padding:12px}
.ui-chat2 .msg{display:flex;gap:8px;align-items:flex-end;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease);transition-delay:calc(var(--d) * .45s + .2s)}
.jn.lit .ui-chat2 .msg,.jn.lit .ui-chat2 .typing{opacity:1;transform:none}
.ui-chat2 .av{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.ui-chat2 .msg small{display:block;font-size:11px;font-weight:600;color:var(--ink3);margin:0 0 2px 4px}
.ui-chat2 .msg p{background:#fff;padding:8px 12px;border-radius:16px 16px 16px 5px;font-size:14px;font-weight:500;line-height:1.35;box-shadow:0 1px 2px rgba(11,19,36,.06)}
.ui-chat2 .msg .pic{padding:4px}
.ui-chat2 .msg .pic img{display:block;width:150px;height:92px;object-fit:cover;border-radius:12px}
.ui-chat2 .msg.r{justify-content:flex-end}
.ui-chat2 .msg.r > div{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.ui-chat2 .msg.r p{background:var(--coral);color:#fff;border-radius:16px 16px 5px 16px}
.ui-chat2 .react{display:inline-flex;align-items:center;gap:4px;margin-top:-6px;margin-right:8px;background:#fff;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700;box-shadow:var(--shadow-s)}
.ui-chat2 .react svg{width:12px;height:12px;fill:var(--coral)}
.ui-chat2 .typing{display:flex;gap:8px;align-items:center;opacity:0;transition:opacity .4s;transition-delay:calc(var(--d) * .45s + .2s)}
.ui-chat2 .dots{display:inline-flex;gap:4px;background:#fff;padding:10px 12px;border-radius:16px 16px 16px 5px}
.ui-chat2 .dots i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:blink 1.2s infinite}
.ui-chat2 .dots i:nth-child(2){animation-delay:.2s}.ui-chat2 .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ui-chat2 .msg,.ui-chat2 .typing{opacity:1;transform:none}}

/* Hero scene, many kinds of plans: the spot in the middle changes each round */
.spot{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.92);border-radius:50%;background:#fff;box-shadow:0 0 0 0 var(--ring,#FFE3B0),0 18px 40px -18px rgba(11,19,36,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;z-index:2;transition:box-shadow .6s,transform .6s cubic-bezier(.34,1.56,.64,1),opacity .45s}
.spot::after{content:"";position:absolute;inset:9%;border-radius:50%;border:2px dashed #E2D8C6;transition:border-color .6s}
.scene .spot{transform:translate(-50%,-50%) scale(1)}
.scene.full .spot{box-shadow:0 0 0 10px var(--ring,#FFE3B0),0 18px 40px -18px rgba(11,19,36,.35)}
.scene.full .spot::after{border-color:transparent}
.spot .sic{width:clamp(30px,3.6vw,42px);height:clamp(30px,3.6vw,42px);border-radius:12px;background:var(--ring,#FFE3B0);color:var(--ink);display:grid;place-items:center;margin-bottom:4px;transition:background .5s}
.spot .sic svg{width:62%;height:62%}
.spot .sk{font-size:clamp(10px,1vw,12px);font-weight:600;letter-spacing:.04em;color:var(--ink3)}
.spot b{font-size:clamp(14px,1.5vw,18px);letter-spacing:-.02em}
.scene.fade .spot{opacity:0}
.scene .pp{transition:left 1.4s var(--ease) calc(var(--o,0) * 90ms),top 1.4s var(--ease) calc(var(--o,0) * 90ms),opacity .45s,transform .45s}
.together .pp{left:var(--x0);top:var(--y0)}
.together .pp.in{left:var(--x1);top:var(--y1)}
.go .pp em{opacity:1}
.go .pp.in em{opacity:0}
.together .pp:not(.in){opacity:0;transform:translate(-50%,-50%) scale(.6)}
.together .pp:not(.in) em{opacity:.0}
.full .pp.in img{animation:hop .5s var(--ease) both;animation-delay:calc(var(--o,0) * 70ms)}
.full .pp:not(.in) img{animation:none}
@media (max-width:640px){.hero2 .spot{width:40%}.hero2 .spot .sk{font-size:8px;letter-spacing:0}.hero2 .spot b{font-size:12px}.hero2 .spot .sic{width:24px;height:24px;border-radius:8px;margin-bottom:2px}}
/* No leftover lines: people just walk to their seats, lifted a little while they move */
.scene .trails{display:none}
.scene .pp img{transition:transform .5s var(--ease),box-shadow .5s}
.scene.together:not(.full) .pp.in img{transform:scale(1.08);box-shadow:0 16px 26px -10px rgba(11,19,36,.45)}
/* Empty seats appear only when a plan calls people over, sized to a face, and vanish once filled */
.seats .empty circle{opacity:0;transition:opacity .4s}
.go .seats .empty circle{opacity:1}
.full .seats .empty circle{opacity:0}

/* Loneliness, in numbers */
.how-head.solo{grid-template-columns:1fr;margin-bottom:28px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:var(--r-l);background:var(--night);color:#fff;padding:clamp(22px,3vw,34px) clamp(20px,3vw,34px) 24px;margin-bottom:clamp(36px,5vw,56px)}
.stats .st{padding:4px clamp(14px,2vw,26px);border-left:1px solid rgba(255,255,255,.12);min-width:0}
.stats .st:first-child{border-left:0;padding-left:0}
.stats b{display:flex;align-items:baseline;gap:4px;font-size:clamp(40px,4.6vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stats b em{font-style:normal;font-size:.42em;letter-spacing:-.01em}
.stats p{margin-top:12px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.82)}
.stats small{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.45)}
.stats .stats-foot{grid-column:1/-1;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:16px;color:#fff;font-weight:500}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr;row-gap:24px}.stats .st:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:480px){.stats{grid-template-columns:1fr}.stats .st{border-left:0;padding-left:0}}

/* Four ways in, each a small living moment from the app (loops) */
.door{min-height:440px;overflow:hidden}
.door .demo{position:relative;margin-top:auto;padding:22px 0 22px}
.door .av{width:26px;height:26px;border-radius:50%;border:2px solid #fff;display:inline-grid;place-items:center;flex:none}
.door .av img{width:80%;height:80%}
.door .tog{position:relative;display:inline-grid;flex:none;height:30px;border-radius:999px;font-size:12.5px;font-weight:700;overflow:hidden}
.door .tog i{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 12px;font-style:normal;border-radius:999px;animation:togA 6s infinite}
.door .tog .a{background:var(--ink);color:#fff}
.door .tog .b{background:var(--mint);color:#fff;animation-name:togB}
.door .tog svg,.postbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes togA{0%,38%{opacity:1;transform:none}44%,94%{opacity:0;transform:scale(.8)}100%{opacity:1}}
@keyframes togB{0%,38%{opacity:0;transform:scale(.8)}44%,94%{opacity:1;transform:none}100%{opacity:0}}
/* Circle */
.m-circle{padding-top:50px!important}
.fchip{position:absolute;left:var(--x);top:var(--y);height:30px;padding:0 12px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;box-shadow:0 8px 18px -10px rgba(11,19,36,.4);animation:float 5s ease-in-out infinite;animation-delay:var(--d)}
.fchip:nth-child(2){background:var(--ink);color:#fff}
@keyframes float{50%{transform:translateY(-8px) rotate(-2deg)}}
.mcard{position:relative;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 34px -20px rgba(11,19,36,.45)}
.mcard .cv{height:44px;background:#FFE29A}
.mcard .cv svg{width:100%;height:100%;display:block}
.mcard .cb{padding:10px 12px 12px}
.mcard b{display:block;font-size:15px}.mcard small{font-size:12px;color:var(--ink2)}
.mcard .post{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:8px;border-radius:12px;background:#FBF6E6}
.mcard .post p{font-size:12.5px;line-height:1.35;font-weight:500;margin:0;color:var(--ink)}
.mcard .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.mcard .stack{display:flex}.mcard .stack .av{margin-left:-7px}.mcard .stack .av:first-child{margin-left:0}
/* Plan */
.m-plan .mm{position:relative;border-radius:18px;overflow:hidden;height:150px;box-shadow:inset 0 0 0 1px rgba(11,19,36,.06)}
.m-plan .mm svg{width:100%;height:100%;display:block}
.m-plan .pin{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--mint);border:2px solid #fff;box-shadow:0 3px 8px rgba(11,19,36,.25)}
.m-plan .p1{left:22%;top:30%}.m-plan .p2{left:80%;top:72%}.m-plan .p3{left:52%;top:46%;width:18px;height:18px;margin:-9px;background:var(--ink)}
.m-plan .pin.hot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--ink);animation:seek 2s var(--ease) infinite}
.m-plan .pcard{position:relative;margin:-38px 8px 0;display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px;box-shadow:0 18px 30px -16px rgba(11,19,36,.45);animation:rise2 6s var(--ease) infinite}
.m-plan .pcard img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.m-plan .pcard div{min-width:0;flex:1}
.m-plan .pcard b{display:block;font-size:14px}.m-plan .pcard small{font-size:11.5px;color:var(--ink2)}
@keyframes rise2{0%{transform:translateY(16px);opacity:0}10%,96%{transform:none;opacity:1}100%{transform:translateY(16px);opacity:0}}
/* Host */
.m-host .sheet{background:#fff;border-radius:18px;padding:12px;box-shadow:0 18px 34px -20px rgba(11,19,36,.45);display:grid;gap:8px}
.m-host .f{background:#F5F3FF;border-radius:12px;padding:8px 10px;min-width:0}
.m-host .f small{display:block;font-size:11px;font-weight:600;color:var(--lilac)}
.m-host .f b{display:block;font-size:14px;white-space:nowrap}
.m-host .typed{clip-path:inset(0 100% 0 0);animation:type 6s steps(18) infinite}
@keyframes type{0%{clip-path:inset(0 100% 0 0)}30%,100%{clip-path:inset(0 0 0 0)}}
.m-host .two{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.postbtn{display:grid;height:36px;border-radius:12px;overflow:hidden;font-weight:700;font-size:13.5px}
.postbtn i{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:6px;font-style:normal;animation:togA 6s infinite}
.postbtn .a{background:var(--lilac);color:#fff}
.postbtn .b{background:var(--ink);color:#fff;animation-name:togB}
.m-host .joins{display:flex;align-items:center;gap:0;height:28px}
.m-host .joins .av{margin-left:-7px;opacity:0;animation:joinin 6s infinite}
.m-host .joins .av:first-child{margin-left:0}
.m-host .joins .av:nth-child(2){animation-delay:.25s}.m-host .joins .av:nth-child(3){animation-delay:.5s}
.m-host .joins em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--lilac);margin-left:8px;opacity:0;animation:joinin 6s infinite;animation-delay:.7s}
@keyframes joinin{0%,48%{opacity:0;transform:scale(.4)}56%,94%{opacity:1;transform:none}100%{opacity:0}}
/* Night */
.m-night{display:grid;justify-items:center;gap:18px;padding-top:40px!important}
.m-night .ring{position:relative;width:118px;height:118px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 8px #FFD9D1,0 14px 30px -14px rgba(11,19,36,.35);display:grid;place-items:center;text-align:center}
.m-night .ring span{font-weight:800;font-size:15px;line-height:1.1}
.m-night .ring i{position:absolute;width:22px;height:22px;border-radius:50%;left:50%;top:50%;margin:-11px;border:2px dashed #E7B9AF;background:#fff;transform:rotate(calc(var(--k) * 60deg)) translateY(-72px);animation:seatloop 6s infinite;animation-delay:calc(var(--k) * .3s)}
.m-night .ring i:nth-child(1){--k:0}.m-night .ring i:nth-child(2){--k:1}.m-night .ring i:nth-child(3){--k:2}.m-night .ring i:nth-child(4){--k:3}.m-night .ring i:nth-child(5){--k:4}.m-night .ring i:nth-child(6){--k:5}
@keyframes seatloop{0%,8%{background:#fff;border:2px dashed #E7B9AF}14%,90%{background:var(--coral);border:2px solid #fff}100%{background:#fff;border:2px dashed #E7B9AF}}
.m-night .nchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.m-night .nchips span{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;background:#fff;font-size:12px;font-weight:600;box-shadow:0 6px 14px -8px rgba(11,19,36,.35)}
.m-night .cd b{font-variant-numeric:tabular-nums}
.m-night .env svg{width:15px;height:15px;fill:none;stroke:var(--coral);stroke-width:2;stroke-linejoin:round}
@media (max-width:560px){.door{min-height:0}}
@media (prefers-reduced-motion:reduce){.door .tog i,.postbtn i,.fchip,.m-plan .pcard,.m-host .typed,.m-host .joins .av,.m-host .joins em,.m-night .ring i{animation:none!important;opacity:1;clip-path:none}.door .tog .a,.postbtn .a{opacity:0}}
.m-plan .pcard{display:grid;grid-template-columns:44px 1fr;gap:6px 10px;align-items:center}
.m-plan .pcard small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-plan .pcard .tog{grid-column:1/-1;width:100%;height:32px}
.m-plan .pcard .tog i{width:100%}
.mcard .row .tog{height:30px}
.fchip{white-space:nowrap}

/* Safety on phones: Nubo with six promise icons around him; one card cycles below */
.orbit-wrap{display:none}
@media (max-width:900px){
  .shield-map{display:none}
  .orbit-wrap{display:grid;justify-items:center;gap:22px}
  .orbit{position:relative;width:min(100%,320px);aspect-ratio:1}
  .oring{position:absolute;inset:6%;border-radius:50%;border:2px dashed #BFE3D0;animation:spin 40s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .ocore{position:absolute;inset:22%;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.7),0 24px 40px -24px rgba(11,19,36,.4)}
  .ocore img{width:84%;height:auto;animation:bob 7s ease-in-out infinite}
  .ob{position:absolute;left:var(--x);top:var(--y);width:50px;height:50px;margin:-25px;border-radius:16px;background:var(--t);color:var(--k);display:grid;place-items:center;box-shadow:0 10px 20px -12px rgba(11,19,36,.45);transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
  .ob svg{width:22px;height:22px}
  .ob.on{transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--k),0 14px 24px -12px rgba(11,19,36,.5)}
  .ocard{width:100%;max-width:420px;background:var(--t);border-radius:22px;padding:18px 20px 16px;text-align:center;box-shadow:0 14px 30px -20px rgba(11,19,36,.45);transition:background .4s}
  .ocard.swap b,.ocard.swap p{animation:pop .45s var(--ease) both}
  .ocard b{display:block;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
  .ocard p{margin-top:6px;font-size:15.5px;color:var(--ink2);min-height:2.9em}
  .odots{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .odots i{width:6px;height:6px;border-radius:50%;background:rgba(11,19,36,.2);transition:width .3s,background .3s}
  .odots i.on{width:18px;border-radius:3px;background:var(--k)}
}
@media (prefers-reduced-motion:reduce){.oring,.ocore img{animation:none}}

/* Sections off screen hold still */
.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}

/* One family: the same heading size, corner radius and soft shadow in every section */
.how .h2,.travel2 .h2,.safety2 .h2,.joinsec h2{font-size:clamp(38px,5.2vw,72px);letter-spacing:-.048em;line-height:.98}
.tag,.sp,.ocard,.pass{border-radius:22px}
.door,.jcard,.stats{border-radius:28px}
.safety2{background:linear-gradient(180deg,var(--paper),#F4FAF7 70%,var(--paper))}
.travel2{background:linear-gradient(180deg,var(--paper),#FFF4E8 30%,#FFF4E8 70%,var(--paper))}
/* Phones: the four ways in swipe sideways, and the numbers sit two by two, so the page stays short */
@media (max-width:560px){
  .doors{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .doors::-webkit-scrollbar{display:none}
  .door{flex:0 0 84%;scroll-snap-align:center;min-height:430px;transform:none}
  .stats{grid-template-columns:1fr 1fr;row-gap:22px;column-gap:14px}
  .stats .st{border-left:0;padding:0}
  .stats b{font-size:40px}
  .stats p{font-size:13.5px}
}
.swipe-hint{display:none}
@media (max-width:560px){.swipe-hint{display:block;text-align:center;font-size:13px;color:var(--ink3);margin-top:6px}}
@media (max-width:640px){
  .tags{grid-template-columns:1fr 1fr;gap:10px}
  .tag{padding:30px 12px 14px;transform:none}
  .tag .hand{font-size:20px;white-space:normal}
  .tag p{font-size:13.5px;gap:6px}
  .tag .ok{width:18px;height:18px}
  .tag .stitch{margin:10px 0 9px}
}