/* Layout: three phone-height frames side by side, each its own scroller, so every section transition plays as a parent would scroll it. Soft-blue kit. */
:root{
  --pg:#F3F5F8; --pgt:#1B2230; --pgd:#56606F;
  --bg:#FBFCFE; --card:#EAF0F8; --open:#DCE6F3; --edge:#BBCDE5; --ink:#1B2230; --dusk:#56606F;
  --acc:#3A6FB0; --sel:#D3E1F4; --sun:#E3A72F; --faint:#8C96A6; --white:#FFFFFF; --paper:#FFFFFF;
  --calmBg:#FBFCFE; --calmCard:#EAF0F8; --calmInk:#1B2230; --calmDusk:#56606F; --calmAcc:#3A6FB0; --calmEdge:#BBCDE5;
  --night:#121826; --nightText:#E9EDF4; --nightDusk:#9AA6BA;
  --k1b:#DDE8F7; --k1t:#2F5D96; --k2b:#F6E7C9; --k2t:#8A5E10; --k3b:#DCEFE3; --k3t:#2D6B45;
  --mess1:#E8504A; --mess2:#3E8EF7; --mess3:#33B36B; --mess4:#A65BD9; --mess5:#F29A2E; --mess6:#2BB3B1;
  --serif:"Cormorant Garamond","Times New Roman",serif; --sans:"DM Sans",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --pg:#0D1015; --pgt:#E9EDF4; --pgd:#A5AEBE; --bg:#141922; --card:#1E2633; --open:#263142; --edge:#34445C;
  --ink:#E9EDF4; --dusk:#A5AEBE; --acc:#7FA9DF; --sel:#2A3A52; --white:#1B2230; --paper:#1B2230;
  --k1b:#24344B; --k1t:#A9C6EC; --k2b:#3B3020; --k2t:#E8C27A; --k3b:#1F3A2B; --k3t:#9AD6AF; color-scheme:dark}}
:root[data-theme="dark"]{
  --pg:#0D1015; --pgt:#E9EDF4; --pgd:#A5AEBE; --bg:#141922; --card:#1E2633; --open:#263142; --edge:#34445C;
  --ink:#E9EDF4; --dusk:#A5AEBE; --acc:#7FA9DF; --sel:#2A3A52; --white:#1B2230; --paper:#1B2230;
  --k1b:#24344B; --k1t:#A9C6EC; --k2b:#3B3020; --k2t:#E8C27A; --k3b:#1F3A2B; --k3t:#9AD6AF; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--pg);color:var(--pgt);font-family:var(--sans);margin:0;padding:32px 16px 56px}
.intro{max-width:1240px;margin:0 auto 26px}
.intro h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:40px;margin:0 0 8px}
.intro p{color:var(--pgd);line-height:1.5;margin:0;max-width:74ch}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:12px}
.legend span{padding:4px 10px;border-radius:999px;background:var(--card);color:var(--ink)}
.board{display:flex;flex-wrap:wrap;gap:36px 30px;justify-content:center;align-items:flex-start;max-width:1400px;margin:0 auto}
.opt{display:flex;flex-direction:column;gap:12px;width:390px;max-width:100%}
.opt .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:700}
.opt h2{font-size:19px;margin:4px 0}
.opt header p{font-size:13px;color:var(--pgd);margin:0;line-height:1.45}
.phone{width:390px;max-width:100%;height:760px;border-radius:42px;border:10px solid #1a1f29;background:var(--bg);color:var(--ink);overflow:hidden auto;position:relative;box-shadow:0 20px 50px rgba(20,30,50,.2);scrollbar-width:none;overscroll-behavior:contain}
.phone::-webkit-scrollbar{display:none}
.hint{font-size:12px;color:var(--pgd);text-align:center}
/* shared pieces */
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 6px;position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.mark{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-style:italic;font-size:23px;font-weight:600}
.sunm{width:17px;height:17px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px color-mix(in srgb,var(--sun) 25%,transparent)}
.navbtn{font-size:12px;font-weight:600;color:var(--acc);border:1px solid var(--edge);border-radius:999px;padding:6px 12px}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700}
.status{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;margin-left:6px;vertical-align:2px}
.live{background:var(--k3b);color:var(--k3t)}.coming{background:var(--k2b);color:var(--k2t)}
.c{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;padding:10px 12px;margin-bottom:6px}
.c .e{font-size:19px;line-height:1}
.c .t{font-size:14px;font-weight:600;line-height:1.3}
.c .m{font-size:12px;color:var(--dusk);margin-top:2px}
.c .need{font-size:12px;margin-top:4px}
.c .d{margin-left:auto;font-size:12px;color:var(--dusk);white-space:nowrap}
.c .from{font-size:11px;color:var(--acc);margin-top:4px;font-weight:600}
.kid{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;margin-right:4px;vertical-align:1px}
.k1{background:var(--k1b);color:var(--k1t)}.k2{background:var(--k2b);color:var(--k2t)}.k3{background:var(--k3b);color:var(--k3t)}
.cta{display:flex;flex-direction:column;gap:8px}
.in{border:1px solid var(--edge);border-radius:12px;padding:13px 14px;font-size:15px;color:var(--faint);background:var(--white)}
.go{background:var(--acc);color:#fff;border-radius:12px;padding:14px;text-align:center;font-weight:600;font-size:15px}
.fine{font-size:12px;color:var(--faint);text-align:center;margin:6px 0 0}
.promise{background:var(--card);border-radius:16px;padding:16px}
.promise b{display:block;font-size:14px;margin-bottom:6px}
.promise li{font-size:13px;color:var(--dusk);line-height:1.5}
.promise ul{margin:0;padding-left:18px}
.foot{font-size:12px;color:var(--faint);text-align:center;padding:20px 20px 30px}
.bub{max-width:84%;font-size:12.5px;line-height:1.35;padding:7px 10px;border-radius:16px;background:var(--open)}
.bub small{display:block;font-size:10px;opacity:.7;margin-bottom:1px}
.flyer{background:#FFF6C9;color:#3b3200;border-radius:4px;padding:12px 10px;font-size:11px;line-height:1.35;box-shadow:0 6px 14px rgba(0,0,0,.15);position:relative;text-align:center}
.flyer::before{content:"";position:absolute;top:-7px;left:40%;width:34px;height:13px;background:rgba(210,210,190,.85)}
.flyer b{display:block;font-size:15px;margin-bottom:3px;letter-spacing:.04em}
.mail{background:var(--paper);border:1px solid var(--edge);border-radius:10px;padding:8px 10px;font-size:12px;box-shadow:0 2px 6px rgba(20,30,50,.07)}
.mail b{display:block;font-size:10.5px;color:var(--dusk);font-weight:600}
.rsvp{display:flex;gap:6px;margin-top:7px}
.rsvp span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:7px;border-radius:10px;border:1px solid var(--edge)}
.rsvp .on{background:var(--acc);color:#fff;border-color:var(--acc)}
.row{display:flex;align-items:center;gap:8px;font-size:13px;padding:8px 0;border-top:1px solid var(--edge)}
.row:first-child{border-top:0}
.who{margin-left:auto;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.who.me{background:var(--k1b);color:var(--k1t)}.who.p{background:var(--k3b);color:var(--k3t)}.who.q{background:var(--open);color:var(--dusk)}

/* ============ VARIANT 1: THE UNFOLD ============ */
.v1 .h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:44px;line-height:1;margin:8px 0 8px;text-wrap:balance}
.v1 .sub{font-size:15px;line-height:1.5;color:var(--dusk);margin:0}
.v1 .stage{height:1400px;position:relative;view-timeline:--unfold block}
.v1 .sticky{position:sticky;top:56px;height:680px;padding:12px 20px 0;overflow:hidden}
.v1 .pile{position:relative;height:330px;margin-top:16px}
.v1 .pile .mail{position:absolute;left:0;right:0}
.v1 .pile .mail:nth-child(1){top:0;--r:-4deg;--x:-6px}
.v1 .pile .mail:nth-child(2){top:44px;--r:3deg;--x:12px}
.v1 .pile .mail:nth-child(3){top:90px;--r:-2deg;--x:-10px}
.v1 .pile .mail:nth-child(4){top:136px;--r:4deg;--x:8px}
.v1 .pile .mail:nth-child(5){top:182px;--r:-3deg;--x:14px}
.v1 .pile .mail:nth-child(6){top:228px;--r:2deg;--x:-4px}
.v1 .pile .mail{transform:translateX(var(--x)) rotate(var(--r))}
.v1 .tidy{position:absolute;inset:0;padding-top:4px}
.v1 .count{font-size:13px;font-weight:700;color:var(--acc);text-align:center;margin-top:12px;font-variant-numeric:tabular-nums}
.v1 .count .after{display:none}
.v1 .scrollcue{font-size:11px;color:var(--faint);text-align:center;margin-top:8px;letter-spacing:.08em;text-transform:uppercase}
.v1 .tidy{opacity:0}
@supports (animation-timeline: view()){
  .v1 .pile .mail{animation:v1fold linear both;animation-timeline:--unfold;animation-range:contain 0% contain 45%}
  .v1 .pile .mail:nth-child(2){animation-range:contain 3% contain 48%}
  .v1 .pile .mail:nth-child(3){animation-range:contain 6% contain 51%}
  .v1 .pile .mail:nth-child(4){animation-range:contain 9% contain 54%}
  .v1 .pile .mail:nth-child(5){animation-range:contain 12% contain 57%}
  .v1 .pile .mail:nth-child(6){animation-range:contain 15% contain 60%}
  .v1 .tidy{animation:v1rise linear both;animation-timeline:--unfold;animation-range:contain 45% contain 75%}
  .v1 .tidy .c{animation:v1card linear both;animation-timeline:--unfold}
  .v1 .tidy .c:nth-child(1){animation-range:contain 48% contain 62%}
  .v1 .tidy .c:nth-child(2){animation-range:contain 53% contain 67%}
  .v1 .tidy .c:nth-child(3){animation-range:contain 58% contain 72%}
  .v1 .tidy .c:nth-child(4){animation-range:contain 63% contain 77%}
  .v1 .count .before{animation:v1out linear both;animation-timeline:--unfold;animation-range:contain 40% contain 50%}
  .v1 .scrollcue{animation:v1out linear both;animation-timeline:--unfold;animation-range:contain 0% contain 12%}
  .v1 .count .after{display:inline;animation:v1in linear both;animation-timeline:--unfold;animation-range:contain 70% contain 80%;position:absolute;left:0;right:0}
  .v1 .count{position:relative}
}
@supports not (animation-timeline: view()){ .v1 .pile .mail{opacity:.25} .v1 .tidy{opacity:1} }
@keyframes v1fold{to{transform:translateY(120px) translateX(0) rotate(0) scale(.55);opacity:0}}
@keyframes v1rise{from{opacity:0}to{opacity:1}}
@keyframes v1card{from{transform:translateY(26px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes v1out{to{opacity:0}}
@keyframes v1in{from{opacity:0}to{opacity:1}}
.v1 .chap{padding:34px 20px 40px;view-timeline:--chap block}
.v1 .chap h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:32px;line-height:1.05;margin:6px 0 14px;text-wrap:balance}
.v1 .before,.v1 .afterc{transition:none}
.v1 .pair{display:grid;gap:10px}
.v1 .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint);margin-bottom:5px}
.v1 .lbl.ok{color:var(--acc)}
@supports (animation-timeline: view()){
  .v1 .chap h3,.v1 .chap .eyebrow{animation:v1card linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  .v1 .chap .before{animation:v1dim linear both;animation-timeline:view();animation-range:cover 30% cover 60%}
  .v1 .chap .afterc{animation:v1slide linear both;animation-timeline:view();animation-range:entry 60% cover 45%}
}
@keyframes v1dim{to{opacity:.35;transform:scale(.97);filter:grayscale(1)}}
@keyframes v1slide{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.v1 .band{background:var(--card);padding:30px 20px}

.v1 .apps .chip{animation:v1card linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
.v1 .apps .chip:nth-child(2){animation-range:entry 25% cover 43%}.v1 .apps .chip:nth-child(3){animation-range:entry 30% cover 46%}.v1 .apps .chip:nth-child(4){animation-range:entry 35% cover 49%}
.v1 .appsfeed .c{animation:v1slide linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
.v1 .flows{display:grid;gap:12px}
.v1 .flow{display:grid;grid-template-columns:96px 22px 1fr;align-items:center}
.v1 .flow .app{font-size:12px;font-weight:700;color:var(--dusk);text-align:right;letter-spacing:.01em}
.v1 .flow .wire{height:1.5px;background:var(--edge);margin:0 4px;transform-origin:left}
.v1 .flow .c{margin:0}
.v1 .also{font-size:12.5px;color:var(--faint);margin:14px 0 0;line-height:1.5}
.v1 .flow .app{animation:v1card linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
.v1 .flow .wire{animation:v1wire linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
.v1 .flow .c{animation:v1slide linear both;animation-timeline:view();animation-range:entry 40% cover 48%}
.wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding-block:20px 40px}
@media (prefers-reduced-motion: reduce){ *{animation:none!important} .v1 .tidy{opacity:1} .v1 .pile .mail{opacity:.2} }

.x0{background:var(--bg)}
.x1{display:block}
.x2{display:grid;gap:5px}
.x3{font-size:14px;line-height:1.5;color:var(--dusk);margin:0 0 16px}
.x4{margin-top:14px}
.x5{margin-top:6px}
.x6{max-width:100%}
.x7{transform:rotate(-3deg);max-width:200px}