/* app-matched flow pieces (oct 22): the web host flow mirrors the expo app screen for screen */
body.flow { min-height:100dvh }
body.flow #app { min-height:100dvh; display:flex; flex-direction:column; max-width:640px; margin:0 auto; position:relative }
.flow .c { text-align:center; justify-content:center }
.ftop { display:flex; align-items:center; gap:14px; padding:calc(14px + env(safe-area-inset-top,0px)) 20px 6px; position:sticky; top:0; z-index:5; background:#000 }
.ftop.c { background:transparent; padding-top:calc(18px + env(safe-area-inset-top,0px)) }
.ftop .logo { font-size:24px }
.chev { width:36px; height:36px; border-radius:50%; background:#1A1917; border:none; color:var(--fg); font-size:24px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0 0 3px; font-family:var(--display); font-weight:300; flex-shrink:0 }
.track { flex:1; height:1.5px; background:#1E1D1A; border-radius:2px; overflow:hidden } .track i { display:block; height:100%; background:var(--gold); transition:width .35s }
.count { font-family:var(--mono); font-size:11px; color:var(--dim) }
.fbody { flex:1; padding:0 20px 30px; position:relative; z-index:1 }
.ffoot { position:sticky; bottom:0; z-index:4; padding:8px 20px calc(14px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,rgba(0,0,0,0),#000 22%) }
.pill.tall { height:58px }
.q { font-size:32px; line-height:36px; font-weight:600; letter-spacing:-1px; margin-top:18px; padding-left:2px }
.qs { font-size:14px; line-height:20px; color:var(--mute); margin-top:8px }
.invline { display:block; width:100%; text-align:center; margin-top:14px; font-size:13px; color:var(--mute); background:none; border:none; font-family:var(--display); cursor:pointer }
.invline a { color:var(--fg); font-weight:600 }
.hwbg { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.hwbg img { width:100%; height:100%; object-fit:cover; filter:blur(40px); opacity:.35; transform:scale(1.2) }
.hwbg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(226,118,47,.22),rgba(0,0,0,.55) 55%,#000 90%) }
/* type carousel */
.carousel { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:30px -20px 0; padding:4px calc(50% - min(125px,31vw)); scrollbar-width:none }
.carousel::-webkit-scrollbar { display:none }
.vcard { flex:0 0 auto; width:min(250px,62vw); aspect-ratio:1; border-radius:22px; overflow:hidden; position:relative; background:#111; border:none; padding:0; scroll-snap-align:center; cursor:pointer; opacity:.45; transform:scale(.92); transition:opacity .25s, transform .25s; color:var(--fg); font-family:var(--display); display:flex; align-items:center; justify-content:center }
.vcard.on { opacity:1; transform:none; box-shadow:inset 0 0 0 2px #D9BC7E }
.vcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.vcard::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.2) 45%,rgba(0,0,0,.65)); border-radius:22px; box-shadow:inherit }
.vcard span { position:relative; z-index:2; font-size:24px; font-weight:600; letter-spacing:-.8px; text-shadow:0 2px 14px rgba(0,0,0,.6) }
.feat { position:absolute; top:12px; right:12px; z-index:3; font-style:normal; font-family:var(--mono); font-size:10px; color:#000; background:var(--orange); padding:3px 10px; border-radius:999px }
.dots { display:flex; justify-content:center; gap:5px; margin-top:18px } .dots i { width:5px; height:5px; border-radius:3px; background:#2A2824; transition:width .25s } .dots i.on { width:16px; background:var(--fg) }
.vline { text-align:center; margin-top:14px; font-size:14px; color:var(--mute) }
/* when */
.weekhead { display:flex; justify-content:space-between; align-items:center; margin-top:34px; font-size:14px; color:#D8D3CA }
.arr { background:none; border:none; color:var(--fg); font-size:24px; font-weight:300; margin-left:14px; cursor:pointer; font-family:var(--display) } .arr[disabled] { color:#2A2824 }
.days { display:flex; justify-content:space-between; margin-top:18px }
.day { flex:1; display:flex; flex-direction:column; align-items:center; background:none; border:none; padding:4px 0; cursor:pointer; font-family:var(--display) }
.day small { font-size:12px; color:var(--dim) } .day b { font-weight:300; font-size:30px; line-height:36px; letter-spacing:-1px; color:#5E5A53; margin-top:2px } .day i { width:22px; height:1.5px; margin-top:4px }
.day.on small { color:var(--gold) } .day.on b { color:var(--fg) } .day.on i { background:var(--fg) } .day[disabled] b { color:#2A2824 } .day[disabled] { cursor:default }
.quick { display:flex; gap:22px; margin-top:26px } .quick button { background:none; border:none; padding:0; font-size:14px; color:var(--mute); cursor:pointer; font-family:var(--display) } .quick button.on { color:var(--gold) }
.rule { height:1px; background:var(--line); margin:26px 0 16px }
.monoline { font-family:var(--mono); font-size:12px; color:var(--mute) }
/* crowd + budget */
.crow { display:flex; align-items:center; gap:10px; margin-top:30px } .crow .mid { flex:1; text-align:center }
.stepper { width:52px; height:52px; border-radius:50%; background:none; box-shadow:inset 0 0 0 1px #2A2824; border:none; color:var(--fg); font-size:24px; font-weight:300; cursor:pointer; font-family:var(--display); flex-shrink:0 }
.big { font-weight:300; font-size:96px; line-height:104px; letter-spacing:-5px; font-variant-numeric:tabular-nums; margin-top:30px } .big.sm { font-size:clamp(48px,15vw,72px); line-height:80px; letter-spacing:-3px }
.bigsub { font-size:16px; color:var(--gold); margin-top:2px } .bigsub.mute { color:var(--mute) }
.presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px }
.preset { min-width:64px; height:42px; border-radius:21px; background:none; border:none; box-shadow:inset 0 0 0 1px #2A2824; color:var(--fg); font-size:15px; font-weight:500; padding:0 14px; cursor:pointer; font-family:var(--display) } .preset.on { background:var(--gold); color:#000; box-shadow:none }
input.ticks { -webkit-appearance:none; appearance:none; height:44px; margin-top:26px; background:repeating-linear-gradient(90deg,#4A4741 0 1px,transparent 1px 10%) bottom/100% 16px no-repeat }
input.ticks::-webkit-slider-thumb { -webkit-appearance:none; width:3px; height:34px; background:var(--fg); border-radius:1px; cursor:pointer }
input.ticks::-moz-range-thumb { width:3px; height:34px; background:var(--fg); border:none; border-radius:1px }
.ticklabels { display:flex; justify-content:space-between; margin-top:8px; font-family:var(--mono); font-size:10px; color:var(--dim) }
.covr { display:flex; align-items:center; gap:12px; padding:5px 0; font-size:15px; color:#D8D3CA } .covr i { width:10px; height:1px; background:var(--gold) }
/* where */
.wcard { display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; width:100%; height:200px; border-radius:18px; overflow:hidden; margin-top:12px; position:relative; background:#111; border:none; padding:16px; box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; color:var(--fg); font-family:var(--display) }
.wcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7 } .wcard.on img { opacity:1 }
.wcard::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.15) 45%,rgba(0,0,0,.8)); border-radius:18px }
.wcard.on::after { box-shadow:inset 0 0 0 2px #D9BC7E }
.wcard b, .wcard small, .ptile b, .ptile small, .ptile em, .surprise div, .surprise .badge { position:relative; z-index:2 }
.wcard b { font-weight:500; font-size:24px; letter-spacing:-.8px } .wcard small { font-size:12.5px; color:#B8B2A7; margin-top:3px }
.check { position:absolute; top:10px; right:10px; z-index:3; width:24px; height:24px; border-radius:12px; background:var(--gold); color:#000; font-style:normal; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center }
/* spice */
.rowh { font-family:var(--mono); font-size:11px; color:var(--mute); margin-top:22px }
.srow { display:flex; gap:10px; overflow-x:auto; margin:14px -20px 0; padding:0 20px; scrollbar-width:none } .srow::-webkit-scrollbar { display:none }
.ptile, .ttile { flex:0 0 150px; border-radius:18px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; padding:12px; border:none; cursor:pointer; color:var(--fg); font-family:var(--display) }
.ptile { height:176px; background:#111; box-shadow:inset 0 0 0 1px var(--line) } .ptile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.ptile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.8)) }
.ttile { height:108px; border-radius:16px; background:#0E0D0C; box-shadow:inset 0 0 0 1px #24231F }
.ptile.on, .ttile.on { box-shadow:inset 0 0 0 1.5px var(--gold) } .ptile.on::after { box-shadow:inset 0 0 0 1.5px var(--gold); border-radius:18px }
.ptile em, .ttile em { position:absolute; top:12px; left:12px; font-style:normal; font-family:var(--mono); font-size:10px; color:var(--gold); z-index:2 }
.ptile b, .ttile b { font-weight:500; font-size:18px; letter-spacing:-.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.ptile small, .ttile small { margin-top:2px; font-size:11.5px; line-height:15px; color:#B8B2A7 }
.surprise { display:flex; align-items:center; width:100%; height:76px; border-radius:16px; overflow:hidden; position:relative; margin-bottom:10px; background:#111; border:none; box-shadow:inset 0 0 0 1px var(--line); padding:0 16px; cursor:pointer; color:var(--fg); font-family:var(--display); text-align:left }
.surprise img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5 } .surprise.on img { opacity:.9 } .surprise.on { box-shadow:inset 0 0 0 1.5px var(--gold) }
.surprise::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.2)) }
.surprise div { flex:1 } .surprise b { display:block; font-weight:500; font-size:20px; letter-spacing:-.6px } .surprise small { font-size:12.5px; color:#B8B2A7 }
.surprise .badge { font-family:var(--mono); font-size:10px; color:#000; background:rgba(245,242,236,.9); border-radius:999px; padding:3px 10px } .surprise.on .badge { background:var(--gold) }
.soon { display:inline-block; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(217,188,126,.5); padding:4px 12px; font-family:var(--mono); font-size:11px; color:var(--gold) }
.linkish { background:none; border:none }
.buildimg { width:100%; height:220px; object-fit:cover; border-radius:22px; margin-top:28px; background:#111; display:block }
/* plan summary */
.phero { position:relative; height:42dvh; min-height:280px; overflow:hidden; background:#111 }
.phero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.phero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 30%,rgba(0,0,0,.8) 82%,#000) }
.pherotop { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:calc(12px + env(safe-area-inset-top,0px)) 20px 0 }
.logo.sm { font-size:22px }
.sharepill { font-size:13px; color:var(--fg); background:rgba(0,0,0,.45); padding:6px 12px; border-radius:999px; border:none; font-family:var(--display); cursor:pointer }
.sum { margin-top:-40px; padding:0 22px } .sum .kicker { font-size:11px }
.titlerow { display:flex; align-items:flex-end; gap:10px; margin-top:6px }
.ptitle { font-weight:500; font-size:36px; line-height:40px; letter-spacing:-1.4px; cursor:pointer }
.titlein { width:100%; background:none; border:none; border-bottom:1.5px solid var(--gold); color:var(--fg); font-family:var(--display); outline:none; padding:0; text-transform:lowercase }
.rename { font-size:13px; color:var(--gold); text-decoration:underline; background:none; border:none; padding:0 0 6px; cursor:pointer; font-family:var(--display) }
.meta { margin-top:8px; font-size:14px; color:var(--mute) }
.srows { margin-top:18px; border-radius:18px; box-shadow:inset 0 0 0 1px var(--line); background:#070707; padding:0 16px }
.srowx { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line) } .srowx:first-child { border-top:none }
.srowx b { width:92px; flex-shrink:0; font-family:var(--mono); font-weight:400; font-size:11px; color:var(--dim) } .srowx span { flex:1; font-size:15px; line-height:20px; color:#D8D3CA }
.propv{display:block;margin:22px auto 0;width:230px;max-width:70%;aspect-ratio:9/16;object-fit:cover;border-radius:22px;border:1px solid rgba(217,188,126,.28);background:#000}
.cut{position:fixed;inset:0;background:#000;z-index:50;transition:opacity .45s}.cut.out{opacity:0}.cut video{width:100%;height:100%;object-fit:contain;display:block}
@keyframes popin{0%{opacity:0;transform:scale(.92)}70%{opacity:1;transform:scale(1.02)}100%{transform:scale(1)}}@keyframes fadein{from{opacity:0}to{opacity:1}}
.reveal .step{animation:popin .55s cubic-bezier(.2,.9,.3,1.2) both}.reveal .ffoot,.reveal .ftop,.reveal header{animation:fadein .38s .52s both}

.pv { margin-top:22px; display:flex; flex-direction:column; gap:12px }
.pvc { background:#070707; border:1px solid #2A2824; border-radius:16px; padding:14px }
.pvr { display:flex; justify-content:space-between; margin-bottom:10px; font-family:var(--mono); font-size:10px } .pvr b { color:var(--gold); font-weight:400 } .pvr i { color:#5E5A53; font-style:normal }
.pvme { margin:0 0 0 auto; max-width:82%; width:fit-content; background:var(--gold); color:#000; border-radius:14px 14px 4px 14px; padding:8px 12px; font-size:13px; line-height:18px }
.pvai { margin-top:8px; max-width:90%; background:#0C0C0B; border:1px solid #24231F; border-radius:14px 14px 14px 4px; padding:10px; display:flex; flex-direction:column; gap:6px } .pvai p { margin:0; font-size:13px; line-height:18px; color:#D8D3CA }
.pvrec { border:1px solid rgba(217,188,126,.35); border-radius:10px; padding:6px 10px } .pvrec b { display:block; font-size:13px; font-weight:600; color:var(--fg) } .pvrec small { font-size:11px; color:var(--mute) }
.pvt { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:14px; color:var(--fg) } .pvt span { width:18px; height:18px; border-radius:9px; border:1px solid #2A2824; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#000 }
.pvt.on { color:var(--mute); text-decoration:line-through } .pvt.on span { background:var(--gold); border-color:var(--gold) }