/* Her Frontier dinners funnel — v5: herfrontier.ai style from the approved welcome-tonight.html (Poppins caps + one
   italic serif lilac line, Inter body, Caveat notes, black pill CTA, white cards, lilac accents, soft washes).
   Motion keeps the Yap contract: 420ms direction-aware enter, 40ms stagger, 240ms pick pop; all of it off under reduced motion.
   Layout-shift contract (IMPLEMENTATION "Stability pass"): fixed footer height, header overlays the stage, chips reserve their
   check, fixed-width counters, chat answer laid out under the dots, map dots move by transform, fonts block. */
:root{
 --white:#FEFEFD;--ink:#131313;--ink-2:rgba(19,19,19,.8);--ink-soft:rgba(19,19,19,.62);--faint:rgba(19,19,19,.58);
 --lilac:#9F8BE8;--lilac-deep:#7E66D6;--lilac-ink:#6A50C8;--lilac-tint:#F3EFFD;--lilac-line:#DDD5EE;
 --line:rgba(19,19,19,.12);--hair:rgba(19,19,19,.07);--mist:#F6F4FA;--gold:#e0ab47;--ok:#2f7d57;--live:#3BAA6E;
 --wash-lilac:rgba(197,162,242,.55);--wash-pink:rgba(244,187,220,.5);--wash-peri:rgba(178,168,246,.4);
 --sh-card:0 12px 30px #2a1d4a33,0 0 0 1px #13131310;--sh-photo:0 14px 34px #2a1d4a22;--sh-soft:0 8px 20px #2a1d4a14;
 --f:"Inter","Inter Fallback",-apple-system,Helvetica,sans-serif;--f-disp:"Poppins","Poppins Fallback",-apple-system,sans-serif;--f-serif:"Gambarino","Gambarino Fallback","Fraunces",Georgia,serif;--f-hand:"Caveat",cursive;
 --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
 --red:var(--lilac-deep); /* legacy alias for any inline use left from v4 */
 font-family:var(--f);color:var(--ink);background:#EEEBF3;font-synthesis:none;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;overflow-wrap:break-word;background:#EEEBF3}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--lilac-deep);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
img{display:block;max-width:100%}
figure{margin:0}
b,strong{font-weight:600}
/* Gambarino ships upright only; herfrontier.ai lets the browser slant it. Allow that synthesis wherever the serif is used. */
.accent,.ow-quote,.quote-card,.olly q,.review-slot blockquote,.hf-logo .her,.mb-h,.mb-seal b,.road-n,.prompt-card p,.wax,.msg.hf::before,.ico-img i,.mc-title,.g-off,.h2-em,.sheet h2 .accent{font-synthesis:style}

/* Preview chrome outside the phone frame: one 34px line at every width (the app height assumes it) */
.preview-tools{max-width:430px;height:34px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#7a7288;font-size:11px;line-height:1;white-space:nowrap;overflow:hidden}
.preview-tools a,.preview-tools button{flex:none;background:none;border:0;padding:0;font-size:inherit;color:inherit;text-decoration:none}
.preview-tools button{text-decoration:underline;text-underline-offset:3px}
.preview-tools span{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* Phone frame. It has a definite height, so it is the size container for the small-screen rules (as the etalon .phone). */
.app{position:relative;max-width:430px;width:100%;height:min(900px,calc(100dvh - 48px));min-height:0;margin:0 auto 14px;background:var(--white);display:flex;flex-direction:column;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px #DDD7E6,0 20px 50px #2a1d4a18;isolation:isolate;container-type:size}
/* Phones: the screen is the whole viewport (the prototype's 34px preview bar is not on the site), so the CTA sits at the very bottom. */
@media (max-width:480px){body{background:var(--white)}.app{height:100vh;height:100dvh;margin:0;border-radius:0;box-shadow:none}}

/* Top: back + progress. Overlays the stage, so showing/hiding it never resizes the screen. */
.top{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:12px;height:52px;padding:10px 20px 0 12px;background:linear-gradient(#FEFEFDf2 78%,#FEFEFD00)}
.back{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;color:var(--ink);transition:background .18s,transform .15s var(--ease)}
.back:hover{background:var(--lilac-tint)}.back:active{transform:scale(.9)}
.back svg{width:20px;height:20px}
.track{flex:1;height:4px;border-radius:99px;background:#ECE7F8;overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#B9A8F0,#7E66D6);transition:width .6s var(--ease)}

/* Stage and screens. Screens stay opaque (they overlap for ~240ms); washes are painted per screen. */
.stage{position:relative;flex:1;min-height:0}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:18px 22px 28px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#DDD5EE transparent;background:var(--white);isolation:isolate}
.screen::before{content:"";position:absolute;inset:-80px 0 auto;height:420px;z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 85% 30%,var(--wash-lilac),transparent 70%),radial-gradient(40% 45% at 15% 15%,var(--wash-pink),transparent 70%),radial-gradient(50% 50% at 55% 75%,var(--wash-peri),transparent 70%);filter:blur(30px);opacity:.55}
.screen.s-q::before{opacity:.28}
.screen.has-top{padding-top:70px}
.screen.leaving{pointer-events:none;z-index:0;animation:leave-forward .24s var(--ease) forwards}
.screen.leaving.leave-back{animation-name:leave-back}
.screen:not(.leaving){z-index:1}
.screen.enter-forward>:not(.notes,.hours,.pull,.note-lead,.olly,.gap){animation:enter-forward .42s var(--ease) backwards}
.screen.enter-back>:not(.notes,.hours,.pull,.note-lead,.olly,.gap){animation:enter-back .42s var(--ease) backwards}
.screen.enter-forward>:nth-child(2),.screen.enter-back>:nth-child(2){animation-delay:.04s}
.screen.enter-forward>:nth-child(3),.screen.enter-back>:nth-child(3){animation-delay:.08s}
.screen.enter-forward>:nth-child(4),.screen.enter-back>:nth-child(4){animation-delay:.12s}
.screen.enter-forward>:nth-child(n+5),.screen.enter-back>:nth-child(n+5){animation-delay:.16s}
@keyframes enter-forward{from{opacity:0;transform:translateX(26px)}}
@keyframes enter-back{from{opacity:0;transform:translateX(-26px)}}
@keyframes leave-forward{to{opacity:0;transform:translateX(-30px)}}
@keyframes leave-back{to{opacity:0;transform:translateX(30px)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes nd-pop{from{opacity:0;transform:scale(.3)}}
@keyframes breathe{50%{transform:scale(1.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sheet-up{from{opacity:0;transform:translateY(40px)}}

/* ---------- Typography ---------- */
.screen h1{margin:6px 0 0;text-wrap:balance}
.screen h1:focus{outline:none}
/* Question headline (Variant 1 default B): Poppins 700 sentence case + inline italic serif accent */
.qh{font:700 24px/1.15 var(--f-disp);letter-spacing:-.025em}
.accent{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--lilac);letter-spacing:-.02em;text-transform:none}
.qh .accent{font-size:1.2em;line-height:1;padding-right:.05em}
/* Variant 1 A (?v-head=caps): caps on questions too */
.v-head-caps .qh{font:800 24px/1.05 var(--f-disp);letter-spacing:-.04em;text-transform:uppercase}
.v-head-caps .qh .accent{font-size:1.25em}
/* Moment headline: heavy caps + the accent as its own italic serif line (etalon .copy h3) */
.m{font:800 27px/1.02 var(--f-disp);letter-spacing:-.045em;text-transform:uppercase}
.m .accent,.m .line.accent{display:block;margin-top:3px;font-size:36px;line-height:1;letter-spacing:-.03em}
.note-title .line{display:block}
.screen h2{margin:0;font:800 21px/1.05 var(--f-disp);letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.screen h2 .accent{display:block;margin-top:2px;font-size:28px;line-height:1.02;letter-spacing:-.025em}
.screen h3{margin:0 0 10px;font:700 10.5px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--lilac-ink)}
.lead{margin:12px 0 0;font:400 15.5px/1.45 var(--f);color:var(--ink-soft);text-wrap:pretty}
.lead b{color:var(--ink);font-weight:600}
.hint{margin:10px 0 18px;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.hint.at-cap{color:var(--lilac-ink)}
.hint-gap{height:18px}
.fine{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint)}
.eyebrow{font:700 10.5px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--lilac-ink)}
.hand{font:600 19px/1 var(--f-hand);color:var(--lilac-deep);transform:rotate(-5deg)}
.hand-line{display:block;width:max-content;max-width:100%;margin:12px 6px 0 auto;text-align:right}
.centered{text-align:center}
.pin{width:12px;height:12px;flex:none;color:var(--lilac-deep)}

/* ---------- Footer actions: one fixed height across the quiz ---------- */
/* Its empty top band overlaps the screen as a fade instead of an opaque white strip (Alex 19.10: the strip hid content). */
.actions{flex:none;position:relative;z-index:3;min-height:112px;margin-top:-30px;padding:10px 22px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,#FEFEFD00,var(--white) 30px);pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.actions.foot-in>*{animation:rise .38s var(--ease) backwards}
.actions>*{pointer-events:auto}
.actions:has(.count){background:linear-gradient(to bottom,#FEFEFD00,var(--white) 14px)}   /* the «N selected» line sits on solid white */
.screen{padding-bottom:58px}
.app.no-foot .screen{padding-bottom:28px}
.app.no-foot .actions{display:none}
.actions .count{margin:0;text-align:center;font-size:12.5px;line-height:18px;color:var(--ink-soft)}
.actions .count b{color:var(--lilac-ink);font-weight:700}
.primary{position:relative;overflow:hidden;width:100%;min-height:56px;border:0;border-radius:100px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff;font:700 16px var(--f);letter-spacing:-.005em;transition:background .18s,transform .15s var(--ease)}
.primary:hover{background:#000}
.primary:active{transform:scale(.98)}
.primary svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.primary:hover svg{transform:translateX(3px)}
.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff1f 50%,transparent 65%);transform:translateX(-120%);animation:sheen 3.6s 1.2s ease-in-out infinite}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.text-button{border:0;background:none;padding:6px;min-height:44px;font:500 13.5px var(--f);color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;align-self:center}
.text-button:hover{color:var(--ink)}
.actions .text-button{min-height:0;padding:2px 6px;position:relative}
.actions .text-button::before{content:"";position:absolute;inset:-11px -6px}

/* ---------- Shared: logo, live chip, Next-dinner card, seats ---------- */
.hf-logo{display:flex;justify-content:center;align-items:baseline;line-height:1;white-space:nowrap;color:var(--ink)}
.hf-logo .her{font:400 italic 1em var(--f-serif);color:var(--lilac-deep)}
.hf-logo .fr{font-family:var(--f-disp);font-weight:800}
.hf-logo.stack{flex-direction:column;align-items:center;gap:1px}
.hf-logo.stack .her{color:var(--lilac);font-size:30px;line-height:.9;letter-spacing:-.01em}
.hf-logo.stack .fr{font:800 17px/1 var(--f-disp);letter-spacing:.005em;display:flex;align-items:center}
.hf-logo .fr i{width:.2em;height:.2em;margin:0 .14em;border-radius:50%;background:currentColor}
.hf-logo.on-ink{color:#fff;align-items:flex-start}
.hf-logo.on-ink .her{font-size:22px}.hf-logo.on-ink .fr{font-size:12.5px}
.hf-live{position:absolute;z-index:2;left:12px;top:12px;display:flex;align-items:center;gap:7px;max-width:calc(100% - 24px);padding:7px 12px 7px 10px;border-radius:99px;background:#FEFEFDee;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 12.5px var(--f);color:var(--ink);white-space:nowrap;overflow:hidden}
.hf-live>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--live);animation:hf-ping 2s infinite}
.hf-live .t{color:var(--ink-soft);font-weight:500}
.hf-live .t+.t{margin-left:-6px}
@keyframes hf-ping{0%{box-shadow:0 0 0 0 #3BAA6E66}70%,100%{box-shadow:0 0 0 7px #3BAA6E00}}
.nd{position:relative;padding:13px 14px 12px;border-radius:16px;background:#FEFEFDf2;box-shadow:var(--sh-card)}
.nd-flat{margin-top:16px;background:var(--white)}
.nd-slides{position:relative;height:132px}
.nd-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.nd-slide.on{opacity:1}
.nd-eyebrow{display:flex;justify-content:space-between;gap:8px;font:700 10px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--lilac-ink)}
.nd-eyebrow span+span{color:var(--ink-soft)}
.nd-title{display:block;margin-top:4px;font:700 17px var(--f-disp);letter-spacing:-.02em}
.nd-where{display:flex;align-items:center;gap:4px;margin-top:2px;font:500 12.5px var(--f);color:var(--ink-soft)}
.nd-tags{display:flex;gap:5px;margin-top:8px;overflow:hidden}
.nd-tags span{flex:none;padding:3px 9px;border-radius:99px;background:var(--lilac-tint);color:var(--lilac-ink);font:600 11.5px var(--f)}
.nd-seats{display:flex;align-items:center;margin-top:10px}
.nd-seat{flex:none;width:30px;height:30px;margin-right:-6px;border-radius:50%;background:#E4DCEB center/cover;box-shadow:0 0 0 2px #fff;font-style:normal}
.nd-seat.anon{display:grid;place-items:center;background:var(--lilac-tint);color:var(--lilac-ink);font:700 12px var(--f)}
.nd-seat.you{margin:0 0 0 10px;background:var(--lilac-tint);border:1.5px dashed var(--lilac-deep);box-shadow:none;display:grid;place-items:center;color:var(--lilac-deep);font:700 15px var(--f);animation:breathe 2.4s ease-in-out infinite}
.nd-seats em{margin-left:9px;white-space:nowrap;font:500 12.5px/1.25 var(--f);font-style:normal;color:var(--ink-soft)}
.nd-seats em strong{color:var(--ink);font-weight:700}
.nd-dots{position:absolute;right:14px;bottom:14px;display:flex;gap:4px}
.nd-dots i{width:5px;height:5px;border-radius:99px;background:#DDD5EE;transition:width .4s var(--ease),background .4s}
.nd-dots i.on{width:14px;background:var(--lilac-deep)}

/* ---------- Welcome = etalon (welcome-tonight.html), 1:1 ---------- */
.s-welcome{display:flex;flex-direction:column;padding:16px 22px 0}
.wl{flex:1;display:flex;flex-direction:column;min-height:0}
.wl-stage{position:relative;margin-top:12px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.wl-photo,.pw-photo{position:relative;flex:1 1 auto;min-height:118px;max-height:380px;border-radius:22px;overflow:hidden;background:#3a2a22;box-shadow:var(--sh-photo)}
.wl-photo>img,.pw-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 88%;filter:saturate(1.08) sepia(.14) brightness(1.03)}
.wl-photo::before,.pw-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(#0000 70%,#140c1c59);pointer-events:none}
.wl-glow{position:absolute;z-index:1;left:50%;top:70%;width:320px;height:200px;margin:-100px 0 0 -160px;border-radius:50%;background:radial-gradient(closest-side,#ffb45a33,#ff9a3a10 60%,#0000);mix-blend-mode:screen;pointer-events:none;animation:wl-flicker 3.2s ease-in-out infinite}
@keyframes wl-flicker{0%,100%{opacity:.7}23%{opacity:1}41%{opacity:.8}67%{opacity:.95}}
.wl-card{z-index:2;margin:-46px 10px 0}
/* Welcome slim card (option A): one row — faces + when/where; old table fades out before the next fades in */
.wl-slim{margin:-34px 10px 0;padding:10px 12px}
.wl-slim .nd-slides{height:44px}
.wl-slim .nd-slide{display:flex;align-items:center;gap:12px;transition:none} /* the whole card slides (funnel.js), the slide inside swaps instantly */
.wl-slim{will-change:transform}
.wl-faces{display:flex;align-items:center;flex:none}
.wl-face{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:-7px;border-radius:50%;background:#E4DCEB center/cover;box-shadow:0 0 0 2px #fff;font:700 10px var(--f);color:var(--lilac-deep);font-style:normal}
.wl-face.anon{background:var(--lilac-tint)}
.wl-face.you{margin:0 0 0 9px;background:var(--lilac-tint);border:1.5px dashed var(--lilac-deep);box-shadow:none;font-size:13px}
.wl-t{min-width:0}
.wl-title{display:flex;align-items:center;gap:7px}
.wl-title small{flex:none;font:500 10px var(--f);color:var(--ink-soft)}
.wl-t b{display:block;font:700 15px/1.2 var(--f-disp);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-t span{display:flex;align-items:center;gap:4px;margin-top:2px;font:500 12px var(--f);color:var(--ink-soft);white-space:nowrap;overflow:hidden}
.wl-t span svg{width:11px;height:11px;flex:none;color:var(--lilac-deep)}
.wl-t em{font-style:normal;font-weight:600;color:var(--lilac-deep)}
/* Photo is capped so tall phones don't show the ceiling; spare height goes above the CTA */
.s-welcome .wl-stage{flex:0 1 auto}
.s-welcome .wl-photo{flex:0 1 330px;max-height:330px}
.s-welcome .wl-photo>img{object-position:50% 92%}
@media (max-width:350px){.wl-faces .wl-face:nth-child(3),.wl-faces .wl-face:nth-child(4){display:none}.wl-slim .nd-slide{gap:10px}}
.wl-copy{flex:none;padding-top:16px;position:relative}
.wl-h{margin:0!important;font-size:29px;line-height:1}
.wl-h .accent{margin-top:2px;font-size:40px}
.wl-hand{position:absolute;right:0;top:38px;text-align:right}
.wl-lead{margin-top:10px}
.where{display:flex;align-items:center;gap:5px;margin:6px 0 0;font:400 13px/1.35 var(--f);color:var(--ink-soft)}
.where b{color:var(--ink);font-weight:600}
.s-welcome .wl-photo>img{animation:wl-kb 14s ease-out both}
.s-welcome .hf-live{animation:rise .6s var(--ease) .3s both}
.s-welcome .wl-card{animation:rise .7s var(--ease) .6s both}
.s-welcome .nd-slide[data-i="0"] .nd-seat{animation:nd-pop .45s var(--spring) both;animation-delay:calc(1s + var(--i)*.09s)}
.s-welcome .nd-slide[data-i="0"] .nd-seat.you{animation:nd-pop .45s var(--spring) 1.5s both,breathe 2.4s ease-in-out 2.1s infinite}
.s-welcome .wl-h,.s-welcome .wl-lead{animation:rise .6s var(--ease) both}
.s-welcome .wl-lead{animation-delay:.12s}
.s-welcome .wl-hand{animation:fade .8s ease 1.4s both}
@keyframes wl-kb{from{transform:scale(1.1)}to{transform:scale(1)}}

/* ---------- Questions ---------- */
.choices{display:grid;gap:10px}
.q-native .choices{margin-top:24px}
.choice{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:11px 14px 11px 14px;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--white);transition:border-color .18s,background .18s,box-shadow .2s,transform .14s var(--ease)}
.choice:hover{border-color:rgba(19,19,19,.22)}
.choice:active{transform:scale(.982)}
/* selected: 1.5px look without changing the box (inset shadow adds the extra half pixel) */
.choice[aria-pressed=true]{border-color:var(--lilac-deep);box-shadow:inset 0 0 0 .5px var(--lilac-deep);background:var(--lilac-tint)}
.screen.enter-forward .choice,.screen.enter-back .choice{animation:choice-in .4s var(--ease) backwards;animation-delay:calc(.12s + var(--i,0)*40ms)}
@keyframes choice-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
.choice.just-picked[aria-pressed=true]{animation:pick .42s var(--ease)}
@keyframes pick{0%{box-shadow:inset 0 0 0 .5px var(--lilac-deep),0 0 0 0 #7E66D640}100%{box-shadow:inset 0 0 0 .5px var(--lilac-deep),0 0 0 12px #7E66D600}}
.ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;line-height:1;transition:transform .3s var(--spring)}
.txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font:600 15.5px/1.3 var(--f)}
.txt small{font:400 13px/1.35 var(--f);color:var(--ink-soft)}
.mark{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(19,19,19,.2);display:grid;place-items:center;color:#fff;transition:background .18s,border-color .18s}
.multi .mark{border-radius:7px}
.mark svg{width:12px;height:12px;opacity:0;transform:scale(.4);transition:opacity .15s,transform .25s var(--spring)}
.choice[aria-pressed=true] .mark{background:var(--lilac-deep);border-color:var(--lilac-deep)}
.choice[aria-pressed=true] .mark svg{opacity:1;transform:none}
.choice.is-exclusive{border-style:dashed;border-color:var(--lilac-line)}
.choice.is-exclusive[aria-pressed=true]{border-style:solid;border-color:var(--lilac-deep)}
/* tiles */
.choices.tiles{grid-template-columns:1fr 1fr}
.tiles .choice{flex-direction:column;align-items:flex-start;gap:10px;min-height:118px;padding:13px 13px 14px}
.tiles .txt{font-size:14.5px}
.tiles .mark{position:absolute;top:11px;right:11px}
.tiles .choice:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row;align-items:center;min-height:64px}
.tiles .choice:last-child:nth-child(odd) .mark{position:static}
.q-role .tiles .choice{min-height:76px;justify-content:center;padding-right:38px}
.ico-img{flex:none;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--lilac-tint);overflow:hidden;font-size:24px;transition:transform .35s var(--spring),background .2s}
.ico-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transform:scale(1.18)}
.ico-img i{font:italic 400 30px var(--f-serif);color:var(--lilac)}
.choice[aria-pressed=true] .ico-img{background:#fff;transform:rotate(-5deg) scale(1.06)}
/* pills and chips */
.choices.pills{grid-template-columns:repeat(3,1fr)}
.pills .choice{justify-content:center;min-height:64px;padding:12px 8px;text-align:center}
.pills .txt{align-items:center;font:700 17px var(--f-disp);letter-spacing:-.01em}
.pills .mark,.chips-q .mark{display:none}
.choices.chips-q{display:flex;flex-wrap:wrap;gap:8px}
.chips-q .choice{width:auto;max-width:100%;min-height:44px;padding:9px 15px;border-radius:99px}
.chips-q .choice[aria-pressed=true]{background:var(--lilac-tint);color:var(--lilac-ink)}
.chips-q .txt{flex-direction:row;align-items:center;gap:5px;font-size:15px;white-space:normal}
/* chips keep their width when selected: the check is always there, just invisible */
.chips-q .choice .txt::before{content:"✓";color:transparent;font-weight:700;margin-right:1px}
.chips-q .choice[aria-pressed=true] .txt::before{color:var(--lilac-deep)}
.choices.at-max .choice[aria-pressed=false]{opacity:.42}
/* fields */
.field-label{display:block;margin:0 0 7px;font:600 13px var(--f);color:var(--ink-2)}
.field{width:100%;min-height:54px;padding:12px 15px;border:1px solid var(--line);border-radius:16px;background:var(--white);font:400 16px var(--f);transition:border-color .2s,box-shadow .2s}
.field:focus{outline:none;border-color:var(--lilac-deep);box-shadow:0 0 0 4px #7E66D61f}
select.field{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%236C6C6C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center/13px,var(--white)}
.lang-native{margin:4px 0 18px}
.other-lang{margin-top:14px;animation:rise .3s var(--ease)}
.inline-answer{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:14px;border-radius:16px;background:var(--lilac-tint);font:400 14.5px/1.5 var(--f);color:var(--ink-2)}
.inline-answer p{margin:0}
.ia-ico{flex:none;width:18px;height:18px;margin-top:2px;color:var(--lilac-deep)}
.ia-ico svg{width:100%;height:100%}
.inline-answer .ia-src{margin-top:8px;font-size:12.5px;color:var(--ink-soft)}
.inline-answer.pop{animation:rise .4s var(--ease)}
.validation{min-height:18px;margin:8px 0 0;font-size:13px;color:#a3324a}
/* statement */
.quote-card{position:relative;margin:26px 0 0;padding:26px 22px 22px;border-radius:22px;background:var(--white);box-shadow:var(--sh-card);font:400 23px/1.3 var(--f-serif);letter-spacing:-.01em;color:var(--ink)}
.quote-card::before{content:"“";position:absolute;top:-22px;left:16px;font:400 72px/1 var(--f-serif);color:var(--lilac)}
.quote-card blockquote{margin:0}
.screen.enter-forward .quote-card{animation:quote-in .6s var(--ease) .06s backwards}
@keyframes quote-in{from{opacity:0;transform:translateY(18px) rotate(-1.6deg)}}
.reactions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.reactions .choice{flex-direction:column;justify-content:center;gap:8px;min-height:96px;padding:14px 6px;text-align:center}
.reactions .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid #E6E0F5;background:#fff;color:var(--lilac-deep);transition:background .18s,border-color .18s,color .18s}
.reactions .ico svg{width:24px;height:24px}
.reactions .choice[aria-pressed=true] .ico{background:var(--lilac-deep);border-color:var(--lilac-deep);color:#fff}
.reactions .txt{flex:none;font-size:13.5px;align-items:center}
.reactions .mark{display:none}
.reactions .choice.just-picked[aria-pressed=true] .ico{animation:pop .45s var(--spring)}
.reactions-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--faint)}

/* ---------- Interstitial scenes ---------- */
.note-title .line{animation:rise .6s var(--ease) backwards}
.note-title .line:nth-child(2){animation-delay:.35s}
.photo-scene{position:relative;margin:18px 0 0;border-radius:22px;overflow:hidden;aspect-ratio:1.05;background:#3a2a22;box-shadow:var(--sh-photo)}
.photo-scene img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(1.05) sepia(.1);animation:wl-kb 14s ease-out both}
.photo-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 55%,#140c1c73)}
.vibes{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vibes-label{flex-basis:100%;margin-bottom:2px;font:700 10.5px var(--f);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px #0006}
.vibe{display:flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:99px;background:#FEFEFDee;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 12.5px var(--f);animation:vibe-in .6s var(--spring) backwards;animation-delay:calc(.9s + var(--i)*.16s)}
.vibe::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lilac-deep)}
@keyframes vibe-in{from{opacity:0;transform:translateY(30px) scale(.6)}}
/* social: the table with her seat */
.seat-scene{position:relative;width:74%;margin:22px auto 36px;aspect-ratio:1}
.seat-table{width:100%;height:100%;object-fit:contain;animation:table-spin 1.2s var(--ease) .1s backwards}
@keyframes table-spin{from{opacity:0;transform:rotate(-25deg) scale(.85)}}
.seat-you{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-tint);border:1.5px dashed var(--lilac-deep);color:var(--lilac-deep);font:700 17px var(--f);animation:pop .6s var(--spring) 1s backwards,breathe 2.4s ease-in-out 1.8s infinite}
.seat-you em{position:absolute;top:100%;margin-top:6px;font:700 11px var(--f);font-style:normal;letter-spacing:.04em;color:var(--lilac-ink);white-space:nowrap}
.orbit-tag{position:absolute;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:99px;background:var(--white);box-shadow:var(--sh-soft),0 0 0 1px var(--hair);font:600 13px var(--f);white-space:nowrap;translate:-50% -50%;animation:bubble-in .55s var(--spring) backwards,float 5s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .6s)}
.orbit-tag i{width:7px;height:7px;border-radius:50%;background:var(--lilac-deep)}
.seat-scene .orbit-tag.t1{left:22%;top:4%}.seat-scene .orbit-tag.t2{left:84%;top:30%}.seat-scene .orbit-tag.t3{left:78%;top:84%}
@keyframes bubble-in{from{opacity:0;transform:scale(.5)}}
@keyframes float{50%{transform:translateY(-4px)}}
.seat-hand{position:absolute;left:-4%;top:104%;margin-top:22px;white-space:nowrap}
/* chapter polaroids */
.polaroids{position:relative;height:236px;margin:26px 0 0}
.pol{position:absolute;width:41%;margin:0;padding:7px 7px 46px;background:#fff;border-radius:4px;box-shadow:0 14px 30px #2a1d4a24,0 0 0 1px var(--hair);transform:rotate(var(--r));animation:pol-in .8s var(--spring) backwards;animation-delay:calc(.35s + var(--i)*.28s)}
.pol img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
.pol figcaption{position:absolute;left:9px;right:8px;bottom:6px;height:36px;display:flex;align-items:center;font:600 17px/1 var(--f-hand);color:var(--lilac-deep);overflow:hidden}
.pol:nth-child(1){left:0;top:22px}
.pol:nth-child(2){left:29.5%;top:0;z-index:1}
.pol:nth-child(3){right:0;top:28px;z-index:2}
@keyframes pol-in{from{opacity:0;transform:translateY(60px) rotate(calc(var(--r) * -2)) scale(.9)}}
/* notes card (leitmotif) */
.notes{margin-top:18px;padding:16px 18px 18px;border-radius:22px;background:var(--white);box-shadow:var(--sh-card);animation:rise .6s var(--ease) .3s backwards}
.notes-top{display:flex;align-items:center;gap:10px;color:var(--lilac-deep);font:600 15px var(--f)}
.notes-top span{margin-right:auto}
.notes-top i{width:18px;height:18px;border-radius:50%;border:1.6px solid var(--lilac)}
.notes-title{display:block;margin-top:12px;font:700 20px/1.2 var(--f);letter-spacing:-.02em}
.notes ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.notes li{position:relative;padding-left:20px;font:400 15.5px/1.4 var(--f);color:var(--ink-2);clip-path:inset(0 100% 0 0);animation:type-line .7s steps(24,end) forwards;animation-delay:calc(.7s + var(--i)*.7s)}
.notes li::before{content:"–";position:absolute;left:0}
.notes li.last{font:600 22px/1.1 var(--f-hand);color:var(--lilac-deep)}
@keyframes type-line{to{clip-path:inset(0 0 0 0)}}
/* her answers, highlighted (drift-note) */
.notes li.said .nl{background:linear-gradient(#0000 55%,#C9BBF5aa 55%,#C9BBF5aa 92%,#0000 92%) no-repeat 0 0/0% 100%;animation:hl .6s var(--ease) forwards;animation-delay:calc(1.3s + var(--i)*.7s)}
@keyframes hl{to{background-size:100% 100%}}
.said-tag{display:inline-block;margin-left:8px;font:600 17px/1 var(--f-hand);color:var(--lilac-deep);transform:rotate(-4deg);white-space:nowrap}
.hours{display:flex;gap:14px;align-items:center;margin-top:16px;padding:16px;border-radius:16px;background:var(--lilac-tint);animation:rise .6s var(--ease) 4.3s backwards}
.hours>b{flex:none;min-width:4.6ch;text-align:right;font:800 44px/1 var(--f-disp);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.hours>b i{font-style:normal;color:var(--lilac)}
.hours p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.hours strong{color:var(--ink)}
.source{margin:12px 0 0;font-size:12px;color:var(--faint);line-height:1.5}
.gap{margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--white);box-shadow:var(--sh-soft),0 0 0 1px var(--hair);display:grid;gap:10px}
.gap-row{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:4px 10px;font-size:13px;color:var(--ink-soft)}
.gap-row i{grid-column:2;height:10px;border-radius:99px;background:var(--lilac-line);width:var(--w);transform-origin:left;animation:bar-grow .9s var(--ease) .3s backwards}
.gap-row.want i{background:var(--lilac-deep);animation-delay:.7s}
.gap-row b{grid-column:2;font-size:13.5px;color:var(--ink);font-weight:600}
.gap-row span{grid-row:1/3;font-weight:600;color:var(--ink-2)}
.gap-line{display:none;margin:0;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.gap-line b{color:var(--ink)}
@keyframes bar-grow{from{transform:scaleX(0)}}
.gap-echo{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2)}
.det{margin-top:18px}
.det h3{margin-bottom:8px}
/* real-voice slots */
.review-slot{position:relative;margin:18px 0 0;padding:16px 16px 14px;border-radius:16px;border:1.5px dashed #CFC4EE;background:#FBFAFE}
.rs-badge{position:absolute;top:-10px;left:14px;padding:2px 8px;border-radius:99px;background:#fff;border:1px dashed #CFC4EE;font:700 10.5px var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.review-slot blockquote{margin:4px 0 0;font:400 italic 16px/1.4 var(--f-serif);color:var(--ink-soft)}
.review-slot figcaption{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--faint)}
.review-slot figcaption i{width:24px;height:24px;border-radius:50%;background:var(--lilac-tint)}
.olly{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;padding:14px;border-radius:16px;background:var(--white);box-shadow:var(--sh-card)}
.olly img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--lilac-line)}
.olly b{display:block;font-size:15px}
.olly span{display:block;font-size:12.5px;color:var(--ink-soft)}
.olly q{display:block;margin-top:8px;font:400 italic 16px/1.4 var(--f-serif);color:var(--ink-2);quotes:"“" "”"}
.olly em{display:block;margin-top:6px;font:700 10.5px var(--f);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.olly.compact{align-items:center}
/* olly-note */
.ow{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6px}
.ow-fan{position:relative;width:100%;height:236px;margin-top:4px}
.ow-card{position:absolute;left:50%;top:24px;height:calc(100% - 58px);width:auto;aspect-ratio:.82;object-fit:cover;border-radius:22px;border:4px solid #fff;box-shadow:0 16px 36px #2a1d4a26;translate:-50% 0;animation:ow-in .9s var(--spring) backwards;animation-delay:calc(.25s + var(--i)*.15s)}
.ow-card:nth-child(2){top:0;z-index:1;transform:none}
.ow-card:nth-child(1){transform:rotate(-10deg) translateX(-92px) translateY(26px)}
.ow-card:nth-child(3){transform:rotate(10deg) translateX(92px) translateY(26px);z-index:2}
@keyframes ow-in{from{opacity:0;transform:rotate(0) translateY(40px) scale(.9)}}
.ow-olly{position:absolute;left:50%;bottom:-6px;z-index:3;width:76px;height:76px;margin-left:-38px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 0 0 1.5px var(--lilac-line),0 10px 24px #2a1d4a33;animation:pop .6s var(--spring) .9s backwards}
.ow h1{margin-top:20px}
.ow-quote{margin:10px 6px 0;font:400 italic 17px/1.38 var(--f-serif);color:var(--ink-2)}
.ow-hand{margin:6px 0 0 auto;padding-right:14px}
.ow-sign{margin:6px 0 0;font-size:13.5px;color:var(--ink-soft)}
.ow-sign b{color:var(--ink)}
.ow-draft{margin:6px 0 0;font:700 10.5px var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
/* science */
.science-eyebrow{margin:6px 0 0}
.screen .science-eyebrow+h1{margin-top:8px}
/* meals vs money scale: the beam swings and settles level; pans move with its ends and stay upright */
.weigh{margin:10px -8px 0}
.weigh svg{display:block;width:100%;height:auto;max-height:min(300px,40dvh);overflow:visible}
.sc-beam{transform-origin:165px 56px;transform-box:view-box;animation:sc-settle 2.2s var(--spring) .5s backwards}
.sc-pan-l{animation:sc-pan-l 2.2s var(--spring) .5s backwards}.sc-pan-r{animation:sc-pan-r 2.2s var(--spring) .5s backwards}
@keyframes sc-settle{0%{transform:rotate(-14deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes sc-pan-l{0%{transform:translateY(23px)}45%{transform:translateY(-8px)}70%{transform:translateY(3px)}100%{transform:none}}
@keyframes sc-pan-r{0%{transform:translateY(-23px)}45%{transform:translateY(8px)}70%{transform:translateY(-3px)}100%{transform:none}}
.sc-spark{animation:fade .4s ease 2.4s backwards}
.sc-lab{font:700 14px var(--f);fill:var(--ink)}
.sc-dollar{font:800 8px var(--f-disp);fill:#A9822E}
.weigh figcaption{margin:14px 8px 0;font:700 18px/1.28 var(--f-disp);letter-spacing:-.02em;text-align:center;text-wrap:balance;animation:fade .6s ease 1.6s backwards}
.weigh figcaption span{color:var(--lilac-deep)}
@media (max-height:720px){.weigh{margin-top:4px}.weigh svg{max-height:205px}.weigh figcaption{margin-top:8px;font-size:16px}}
@media (max-height:600px){.weigh svg{max-height:165px}.weigh figcaption{font-size:15px}}
/* practical chat */
.chat{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.msg{max-width:84%;padding:12px 15px;border-radius:20px;font:400 15px/1.45 var(--f)}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px;animation:msg-in .5s var(--spring) .25s backwards}
.msg.hf{position:relative;align-self:flex-start;margin-left:40px;background:var(--lilac-tint);border-bottom-left-radius:6px;animation:msg-in .5s var(--spring) .9s backwards}
.msg.hf::before{content:"Her";position:absolute;left:-40px;bottom:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--lilac);font:400 italic 12px var(--f-serif)}
.msg .typing{display:flex;gap:4px;padding:4px 0}
.msg .typing i{width:7px;height:7px;border-radius:50%;background:var(--lilac-line);animation:dot 1s ease-in-out infinite}
.msg .typing i:nth-child(2){animation-delay:.15s}.msg .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);background:var(--lilac-deep)}}
.msg .answer{animation:fade .4s ease .1s backwards}
.msg.hf .typing{position:absolute;left:15px;top:12px}
.msg .answer.pending{visibility:hidden}
@keyframes msg-in{from{opacity:0;transform:translateY(14px) scale(.9)}}
.chat-photo{margin:18px 0 0;border-radius:22px;overflow:hidden;aspect-ratio:1.9;box-shadow:var(--sh-photo);animation:rise .6s var(--ease) 1.6s backwards}
.chat-photo img{width:100%;height:100%;object-fit:cover}

/* ---------- Member card (Variant 2): ink by default, .light with ?v-card=light ---------- */
.mc{position:relative;margin-top:20px;padding:16px 18px 18px;border-radius:22px;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;box-shadow:0 16px 36px #2a1d4a40}
.mc::before{content:"";position:absolute;inset:-40px;z-index:-1;background:radial-gradient(40% 50% at 90% 10%,var(--wash-lilac),transparent 70%),radial-gradient(35% 45% at 10% 95%,var(--wash-pink),transparent 70%),radial-gradient(40% 40% at 60% 60%,var(--wash-peri),transparent 70%);filter:blur(24px);opacity:.35}
.mc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mc-eyebrow{font:700 10px var(--f);letter-spacing:.12em;text-transform:uppercase;color:#C5B8F5;text-align:right}
.mc-main{display:flex;align-items:center;gap:14px;margin-top:14px}
.mc-main small{display:block;font:500 12px var(--f);color:#ffffffb3}
.mc-title{display:block;margin:2px 0 0;font:400 italic 26px/1.05 var(--f-serif)!important;letter-spacing:-.02em!important;text-transform:none!important;color:var(--lilac)}
.mc .meaning{margin:14px 0 0;font:400 14.5px/1.5 var(--f);color:#ffffffd9}
.mc .avatar{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-tint);color:var(--lilac-ink);font:700 22px var(--f);box-shadow:0 0 0 3px #ffffff26}
.mc .avatar.bump{animation:pop .35s var(--spring)}
.mc-name .mc-title{font-size:22px!important}
.ring{position:relative;flex:none;width:64px;height:64px}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .r-bg{stroke:#ffffff26}
.ring .r-fg{stroke:var(--lilac);stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:201;animation:draw 1.2s var(--ease) .3s forwards}
.ring b{position:absolute;inset:7px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-tint);color:var(--lilac-ink);font:700 22px var(--f);animation:pop .5s var(--spring) .2s backwards}
.mc::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff22 48%,transparent 66%);transform:translateX(-120%);animation:card-sheen 1.6s var(--ease) .8s forwards;pointer-events:none}
@keyframes card-sheen{to{transform:translateX(120%)}}
.mc-status{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding-top:12px;border-top:1px solid #ffffff1f;font:600 13px var(--f)}
.mc-status span{display:flex;align-items:center;gap:7px}
.mc-status i{width:8px;height:8px;border-radius:50%;background:var(--lilac)}
.mc-status i.wait{background:none;box-shadow:inset 0 0 0 1.5px #C5B8F5}
.mc.light{background:var(--white);color:var(--ink);box-shadow:var(--sh-card)}
.mc.light::before{opacity:.25}
.mc.light .mc-eyebrow{color:var(--lilac-ink);text-align:left}
.mc.light .mc-main small{color:var(--ink-soft)}
.mc.light .mc-title{font:700 19px/1.15 var(--f-disp)!important;font-style:normal!important;letter-spacing:-.02em!important;color:var(--ink)}
.mc.light .meaning{color:var(--ink-2)}
.mc.light .ring .r-bg{stroke:var(--lilac-tint)}.mc.light .ring .r-fg{stroke:var(--lilac-deep)}
.mc.light .avatar{box-shadow:0 0 0 3px var(--lilac-line)}
.mc.light .mc-status{border-top-color:var(--hair)}
.mc.light::after{background:linear-gradient(110deg,transparent 30%,#ffffff99 48%,transparent 66%)}
.name-field{margin-top:22px}
.mc-name{animation:rise .6s var(--ease) .2s backwards}

/* ---------- Loader ---------- */
.ld-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;font-size:14.5px}
.ld-stage{font-weight:600}
.ld-stage.swap{animation:rise .45s var(--ease)}
.ld-bar-top b{min-width:4ch;text-align:right;color:var(--lilac-ink);font:800 15px var(--f-disp);font-variant-numeric:tabular-nums}
.ld-track{height:8px;margin-top:10px;border-radius:99px;background:#ECE7F8;overflow:hidden}
.ld-tram+.ld-track{margin-top:0}
.ld-track i{position:relative;display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#B9A8F0,#7E66D6);overflow:hidden}
.ld-track i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff8c,transparent);transform:translateX(-100%);animation:ld-sheen 1.5s ease-in-out infinite}
@keyframes ld-sheen{to{transform:translateX(100%)}}
/* tram 28 rides the track by transform only (no layout shift): 100cqw is the app width, 44px the screen padding */
.ld-tram{position:relative;height:58px;margin-top:6px}
/* The sign rides with the tram (Alex 19.10): left-aligned to it at the start, right-aligned at the end, so it stays on the track. */
.tram-car{position:absolute;left:0;top:0;bottom:-1px;width:62px;transform:translateX(calc((100cqw - 44px - 62px) * var(--p,0)))}
.ld-tram img{position:absolute;left:0;bottom:0;width:62px}
.tram-sign{position:absolute;left:0;top:0;transform:translateX(calc((62px - 100%) * var(--p,0)));display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;background:var(--ink);color:#F3D27A;font:700 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;white-space:nowrap}
.tram-sign b{background:#F3D27A;color:var(--ink);border-radius:3px;padding:0 4px}
.ld-card{margin-top:16px;padding:12px 16px 14px;border-radius:22px;background:var(--white);box-shadow:var(--sh-card)}
.ld-card h3{margin:4px 0 2px}
.ld-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:38px;padding:6px 0;border-top:1px solid var(--hair);font-size:14px}
.ld-card h3+.ld-row{border-top:0}
.ld-row>span{color:var(--ink-soft);white-space:nowrap}
.ld-row strong{position:relative;min-width:0;font-weight:600;text-align:right}
.ld-row em{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-style:normal;overflow:hidden;line-height:1.3;max-width:220px;opacity:0;transform:translateY(5px);transition:opacity .4s,transform .5s var(--ease)}
.skel{position:absolute;right:0;top:50%;width:110px;height:12px;margin-top:-6px;border-radius:6px;background:linear-gradient(90deg,#F1EEF8 0,#FBFAFE 40%,#F1EEF8 80%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;transition:opacity .25s}
@keyframes shimmer{to{background-position:-200% 0}}
.ld-row.in em{opacity:1;transform:none}
.ld-row.in .skel{opacity:0}
.ld-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.ld-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:99px;background:var(--mist);color:var(--faint);font:600 12.5px var(--f);transition:background .35s,color .35s}
.sw{position:relative;width:26px;height:15px;border-radius:99px;background:#D9D3E6;transition:background .35s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:left .35s var(--ease)}
.ld-pill.in{background:var(--lilac-tint);color:var(--lilac-ink)}
.ld-pill.in .sw{background:var(--lilac-deep)}
.ld-pill.in .sw::after{left:13px}
.ld-photos{position:relative;margin-top:16px;border-radius:22px;overflow:hidden;aspect-ratio:1.75;background:#3a2a22;box-shadow:var(--sh-photo)}
.ld-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s,transform 4s ease-out}
.ld-photos img.on{opacity:1;transform:none}
.ld-photos figcaption{position:absolute;left:12px;bottom:10px;z-index:1;color:#fff;font:600 12.5px var(--f);text-shadow:0 1px 8px #0006}
.ld-photos::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 55%,#140c1c73)}
.ld-dots{display:flex;justify-content:center;gap:4px;margin-top:10px}
.ld-dots i{width:5px;height:5px;border-radius:99px;background:#DDD5EE;transition:width .4s var(--ease),background .4s}
.ld-dots i.on{width:14px;background:var(--lilac-deep)}

/* ---------- Email gate ---------- */
.s-email{padding:0}
.s-email.has-top{padding-top:0}
.gate{position:relative;min-height:100%;padding:18px 22px 24px;overflow:hidden}
.gate-bg{position:absolute;inset:0;padding:40px 22px;filter:blur(9px) saturate(1.1);opacity:.7;pointer-events:none;transform:scale(1.04)}
.gate-bg .mc{margin:0}
.gate-bg .pblock{margin-top:16px}
.gate-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#FEFEFD30,var(--white) 92%)}
.gate-card{position:relative;margin-top:96px;padding:46px 20px 20px;border-radius:22px;background:#FEFEFDf2;box-shadow:var(--sh-card);animation:sheet-up .6s var(--ease) .1s backwards}
.badge{position:absolute;left:50%;top:-30px;width:60px;height:60px;margin-left:-30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--lilac);box-shadow:0 0 0 6px var(--white),0 10px 26px #2a1d4a40;animation:pop .6s var(--spring) .45s backwards}
.badge svg{width:26px;height:26px}
.badge .ok{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:var(--lilac-deep);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px var(--white);animation:pop .45s var(--spring) .95s backwards}
.badge .ok svg{width:12px;height:12px}
.gate-card h1{text-align:center;margin:0}
.gate-card .lead{text-align:center;font-size:15px;margin:10px 0 18px}

/* ---------- Profile ---------- */
.pblock{margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:var(--lilac-tint);color:var(--lilac-ink);font:600 13px var(--f)}
.chip.loved{background:var(--ink);color:#fff}
.pop-in .chip,.pop-in li{animation:pop .45s var(--spring) backwards;animation-delay:calc(.9s + var(--i)*60ms)}
.hopes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hopes li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--hair);font:400 15px/1.4 var(--f)}
.hopes svg{flex:none;width:16px;height:16px;margin-top:2px;padding:2px;border-radius:50%;background:var(--lilac-deep);color:#fff}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--ink-soft)}
.meta-row span{display:flex;align-items:center;gap:6px}
.meta-row span>svg{width:14px;height:14px;color:var(--lilac-deep)}
.meta-row b{color:var(--ink);font-weight:600}
details.why{margin-top:16px;border-radius:14px;background:var(--mist);padding:0 14px}
details.why summary{padding:13px 0;font:600 14px var(--f);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
details summary::-webkit-details-marker{display:none}
details.why summary::after{content:"+";color:var(--lilac-deep);font-size:18px;line-height:1;transition:transform .25s var(--ease)}
details.why[open] summary::after{transform:rotate(45deg)}
details.why dl{margin:0 0 12px;display:grid;gap:8px;font-size:13.5px;animation:rise .35s var(--ease)}
details.why dt{color:var(--ink-soft)}
details.why dd{margin:0;font-weight:600}
.edit{display:block;margin:12px auto 0}

/* ---------- Table preview ---------- */
.table-scene{position:relative;margin:18px 0 0;padding:12px 10px 40px;border-radius:22px;background:radial-gradient(circle at 50% 46%,#fff 0,var(--lilac-tint) 72%);overflow:hidden}
.table-scene svg{display:block;width:100%;height:auto;overflow:visible}
.t-top{fill:#EEE8FB;stroke:var(--lilac-line);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pop .8s var(--spring) .1s backwards}
.t-cloth{fill:none;stroke:#fff;stroke-width:1.4;stroke-dasharray:3 6;opacity:.9}
.plate{transform-box:fill-box;transform-origin:center;animation:pop .5s var(--spring) backwards;animation-delay:calc(.5s + var(--i)*.15s)}
.plate .p1{fill:#fff;stroke:var(--lilac-line);stroke-width:1.5}
.plate .p2{fill:none;stroke:#EEE8FB;stroke-width:1.2}
.plate .glass{fill:#fff;stroke:var(--lilac-line);stroke-width:1.2}
.plate.me .p1{stroke:var(--lilac-deep);stroke-width:2.5}
.me-pulse{fill:none;stroke:var(--lilac-deep);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out 1.4s 3 backwards}
@keyframes pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.candle-glow{fill:url(#glow);transform-box:fill-box;transform-origin:center;animation:flicker 2.6s ease-in-out infinite}
.candle{fill:#fff;stroke:var(--lilac-line)}
.flame{fill:#f2b347;transform-box:fill-box;transform-origin:50% 100%;animation:flame 1.4s ease-in-out infinite}
@keyframes flicker{50%{opacity:.75;transform:scale(.94)}}
@keyframes flame{50%{transform:scaleY(.82) scaleX(1.08)}}
.flowers{transform-box:fill-box;transform-origin:center;animation:pop .6s var(--spring) .35s backwards}
.you-tag{position:absolute;left:34%;bottom:6px;transform:translateX(-50%);padding:8px 14px;border-radius:99px;background:var(--ink);color:#fff;font:600 13px var(--f);white-space:nowrap;animation:you-in .55s var(--spring) 1.35s backwards}
@keyframes you-in{from{opacity:0;transform:translate(-50%,12px) scale(.7)}}
.brief{list-style:none;margin:16px 0 0;padding:0;display:grid}
.brief li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--hair);animation:rise .5s var(--ease) backwards;animation-delay:calc(1.4s + var(--i)*.14s)}
.brief .bi{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--lilac-tint);color:var(--lilac-deep)}
.brief .bi svg{width:17px;height:17px}
.brief small{display:block;font-size:12.5px;color:var(--ink-soft)}
.brief b{display:block;margin-top:2px;font-size:15px;font-weight:600;line-height:1.35}
.brief .tick{margin-left:auto;align-self:center;width:22px;height:22px;border-radius:50%;background:var(--lilac-deep);color:#fff;display:grid;place-items:center;animation:pop .4s var(--spring) backwards;animation-delay:calc(1.75s + var(--i)*.14s)}
.brief .tick svg{width:11px;height:11px}
.picture{margin-top:26px}
.picture .lead{margin-top:10px}
.prompt-card{position:relative;margin-top:16px;padding:18px 18px 20px;border-radius:22px;background:var(--ink);color:#fff;overflow:hidden}
.prompt-card::before{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#9F8BE899,transparent 70%)}
.prompt-card small{position:relative;display:flex;align-items:center;gap:7px;font:700 10.5px var(--f);letter-spacing:.12em;text-transform:uppercase;color:#C5B8F5}
.prompt-card small svg{width:12px;height:12px}
.prompt-card p{position:relative;margin:10px 0 0;min-height:2.6em;font:400 22px/1.3 var(--f-serif);letter-spacing:-.01em}
.prompt-card .caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:#C5B8F5;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.steps li{position:relative;display:flex;gap:14px;align-items:center;padding:0 0 18px}
.steps li:not(:last-child)::after{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:var(--lilac-line)}
.steps .n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-tint);color:var(--lilac-ink);font:700 14px var(--f)}
.steps li:first-child .n{background:var(--ink);color:#fff}
.steps b{font-size:15px;font-weight:600}
.steps small{display:block;font-size:12.5px;color:var(--ink-soft)}
/* first-table match moment */
.match-h{display:grid}
.match-h>span{grid-area:1/1;transition:opacity .45s,transform .55s var(--ease)}
.match-h .mh-b{opacity:0;transform:translateY(10px)}
.matched .match-h .mh-a{opacity:0;transform:translateY(-10px)}
.matched .match-h .mh-b{opacity:1;transform:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Table, A1 (Alex, 15.10): longer matching on the map; women "come online", four take seats as initials around a bigger table.
   Everything moves by transform/opacity; seats sit on a ring sized in container units so the table stays round at any aspect. */
.match-st{display:flex;align-items:center;gap:8px;height:24px;margin:8px 0 0;font:500 13.5px var(--f);color:var(--ink-soft);transition:opacity .2s}
.match-st.out{opacity:0}
.match-st .spin{flex:none;width:13px;height:13px;border-radius:50%;border:2px solid var(--lilac-line);border-top-color:var(--lilac-deep);animation:spin .8s linear infinite}
.match-st.hand{font:700 21px var(--f-hand);color:var(--lilac-ink)}
.map-scene{position:relative;margin:12px 0 0;border-radius:22px;overflow:hidden;aspect-ratio:.8;background:#F3F0F7;box-shadow:var(--sh-photo);container-type:inline-size;--rr:30cqw;--cy:52%}
.map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.2s,filter 1.2s}
.gather .map-img,.map-scene.done .map-img{opacity:.38;filter:blur(1.6px) saturate(.7)}
.map-scene .hf-live{z-index:4}
.map-tag{position:absolute;z-index:4;right:10px;top:14px;padding:4px 8px;border-radius:99px;background:#FEFEFDcc;font:600 10px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.dot{position:absolute;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lilac-deep);box-shadow:0 0 0 3px #ffffffc0;opacity:0;transform:scale(.2);transition:opacity .45s,transform .5s var(--spring),background .4s,box-shadow .4s}
.p-dots .dot{opacity:.85;transform:none;transition-delay:var(--d),var(--d),0s,0s}
.s1 .dot[data-out="1"],.s2 .dot[data-out="2"],.s3 .dot[data-out="3"],.s4 .dot[data-out="4"]{opacity:.13;transform:scale(.6);transition-delay:0s}
.map-scene .dot.alive{opacity:1;background:#fff;box-shadow:0 0 0 3px var(--live),0 4px 10px #0002;transition-delay:0s}
.dot.alive::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--live);animation:dot-ring 1.5s ease-out infinite}
@keyframes dot-ring{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}
.map-scene .dot.gone,.gather .dot:not(.keep),.map-scene.done .dot{opacity:0;transform:scale(.3);transition-delay:0s}
.dot em{position:absolute;left:50%;bottom:14px;translate:-50% 0;display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:99px;background:#fff;box-shadow:0 6px 14px #2a1d4a1f;font:600 11px var(--f);font-style:normal;color:var(--ink);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(5px) scale(.85);transition:opacity .3s,transform .4s var(--spring)}
.dot em i{width:6px;height:6px;border-radius:50%;background:var(--live)}
.dot em.busy{color:var(--ink-soft)}.dot em.busy i{background:#C9C3D3}
.dot.say em{opacity:1;transform:none}
.gather .dot.keep{transition:transform 1s var(--ease),opacity .3s .95s}
.gather .dot.keep.moved{opacity:0}
.mini-table{position:absolute;z-index:1;left:50%;top:var(--cy);width:calc(var(--rr) * 2);aspect-ratio:1;translate:-50% -50%;opacity:0;transform:scale(.6) rotate(-20deg);transition:opacity .6s .3s,transform .9s var(--spring) .3s}
.mini-table img{width:100%;height:100%;object-fit:contain}
.gather .mini-table,.map-scene.done .mini-table{opacity:1;transform:none}
.seat-m,.dot-you{position:absolute;z-index:3;left:calc(50% + (var(--rr) + 14px) * var(--c));top:calc(var(--cy) + (var(--rr) + 14px) * var(--s));border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(.4)}
.seat-m{width:40px;height:40px;margin:-20px 0 0 -20px;background:#fff;box-shadow:var(--sh-soft),0 0 0 2px #fff;font:700 15px var(--f);color:var(--lilac-ink);transition:opacity .3s .85s,transform .5s var(--spring) .85s}
.dot-you{width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--lilac-tint);border:1.5px dashed var(--lilac-deep);color:var(--lilac-deep);font:700 16px var(--f);transition:opacity .3s 1.1s,transform .5s var(--spring) 1.1s}
.gather .seat-m,.map-scene.done .seat-m,.gather .dot-you,.map-scene.done .dot-you{opacity:1;transform:none}
.filters{position:absolute;z-index:3;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.filt{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;background:#FEFEFDee;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 12px var(--f);color:var(--ink-soft);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--spring),color .3s}
.filt svg{width:10px;height:10px;color:var(--lilac-deep)}
.s1 .filt[data-f="1"],.s2 .filt[data-f="2"],.s3 .filt[data-f="3"],.s4 .filt[data-f="4"]{opacity:1;transform:none;color:var(--ink)}
.filt.free{background:#EAF6EF;color:#1F6B45}.filt.free i{width:6px;height:6px;border-radius:50%;background:var(--live)}
.s5 .filt.free{opacity:1;transform:none}
.gather .filters,.map-scene.done .filters{opacity:0;transition:opacity .4s}
@container (max-height:600px){.map-scene{--rr:25cqw;--cy:57%}}

/* Roadmap (Alex, 15.10, B1): one line from done steps to her goal */
.rm{list-style:none;margin:12px 0 0;padding:0}
.rm li{position:relative;display:flex;gap:12px;padding:0 0 6px;animation:rise .5s var(--ease) both;animation-delay:calc(.15s + var(--i) * .14s)}
.rm li::before{content:"";position:absolute;left:12px;top:26px;bottom:-1px;width:2px;background:repeating-linear-gradient(#D9D3E3 0 4px,transparent 4px 8px)}
.rm li:last-child::before{display:none}
.rm li.done::after{content:"";position:absolute;left:12px;top:26px;bottom:-1px;width:2px;background:var(--lilac-deep);transform-origin:top;animation:rm-grow .5s var(--ease) both;animation-delay:calc(.6s + var(--i) * .14s)}
@keyframes rm-grow{from{transform:scaleY(0)}}
.rm-n{position:relative;z-index:1;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid #D9D3E3;background:#fff;font:700 11px var(--f);color:var(--ink-soft)}
.rm-n svg{width:12px;height:12px}
.rm li.done .rm-n{border:0;background:var(--lilac-deep);color:#fff;animation:pop .5s var(--spring) both;animation-delay:calc(.35s + var(--i) * .14s)}
.rm li.now .rm-n{border-color:var(--lilac-deep);background:var(--lilac-tint);color:var(--lilac-deep);animation:rm-halo 1.8s ease-out infinite}
@keyframes rm-halo{0%{box-shadow:0 0 0 0 #7E66D655}70%,100%{box-shadow:0 0 0 9px #7E66D600}}
.rm b{display:block;font:600 14.5px/1.3 var(--f)}
.rm small{display:block;margin-top:1px;font:400 12.5px/1.35 var(--f);color:var(--ink-soft)}
.rm li.done b{color:var(--ink-soft)}
.rm li.now{margin:0 -10px 8px;padding:8px 10px 9px;border-radius:14px;background:var(--white);box-shadow:var(--sh-soft)}
.rm li.now::before{top:34px;bottom:-9px;left:22px}
.rm-here{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;background:var(--ink);color:#fff;font:700 9.5px var(--f);letter-spacing:.08em;text-transform:uppercase;vertical-align:2px}
.rm-seats{display:flex;margin-top:4px}.rm-seats i{width:20px;height:20px;margin-right:-4px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-tint);box-shadow:0 0 0 1.5px #fff;font:700 9.5px var(--f);font-style:normal;color:var(--lilac-ink)}
.rm-seats i.me{margin-left:6px;border:1px dashed var(--lilac-deep);box-shadow:none}
.rm li.goal{margin:0 -10px;padding:10px 10px 11px;border-radius:16px;background:linear-gradient(135deg,#F3EFFD,#FBEFF7);box-shadow:0 0 0 1px #E6DDF5}
.rm li.goal .rm-n{border:0;background:var(--ink);color:#F5C542;font-size:13px}
.rm li.goal div{position:relative;flex:1;min-width:0}
.rm-eye{font:700 10px var(--f)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac-ink)!important;margin:0 0 2px!important}
.rm li.goal b{font:700 16px/1.25 var(--f-disp);letter-spacing:-.02em}
.rm-said{position:absolute;right:2px;top:-4px;font:700 17px var(--f-hand);color:var(--lilac-ink);transform:rotate(-4deg)}
@container (max-height:600px){.rm li:not(.now):not(.goal) small{display:none}.rm li{padding-bottom:10px}}
.after-match{opacity:0;transform:translateY(16px);transition:opacity .45s .6s,transform .55s var(--ease) .6s}
.matched .after-match{opacity:1;transform:none}
.seats{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.seats li{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:16px;background:var(--white);box-shadow:var(--sh-soft),0 0 0 1px var(--hair);opacity:0;transform:translateY(16px);transition:opacity .45s,transform .55s var(--ease);transition-delay:calc(.9s + var(--i)*.18s)}
.matched .seats li{opacity:1;transform:none}
.sv{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-tint);color:var(--lilac-ink);font:700 12px var(--f)}
.sv.face{background:#E4DCEB center/cover;box-shadow:0 0 0 2px #fff}
.seats strong{display:block;font-size:15px;line-height:1.25;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tags em{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;background:var(--lilac-tint);color:var(--lilac-ink);font:600 11.5px var(--f);font-style:normal}
.matching-now .seats,.matching-now .picture,.matching-now section,.matching-now .after-match{visibility:hidden}

/* ---------- Gift: her circle card turned invitation ---------- */
.gift{margin-top:22px;perspective:900px}
.gift-card{position:relative;display:block;width:100%;aspect-ratio:1.4;padding:0;border:0;border-radius:22px;overflow:hidden;background:none;box-shadow:0 22px 50px #2a1d4a40;animation:gift-in .8s var(--spring) .15s backwards;cursor:default;container-type:inline-size}
@keyframes gift-in{from{opacity:0;transform:rotateX(18deg) translateY(30px) scale(.92)}}
.gift-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;color:#fff;text-align:left;background:var(--ink);overflow:hidden;isolation:isolate}
.gift-face::before{content:"";position:absolute;inset:-40px;z-index:-1;background:radial-gradient(45% 50% at 85% 20%,var(--wash-lilac),transparent 70%),radial-gradient(40% 45% at 10% 90%,var(--wash-pink),transparent 70%),radial-gradient(50% 50% at 60% 70%,var(--wash-peri),transparent 70%);filter:blur(26px);opacity:.35}
.gift-face::after{content:"";position:absolute;inset:10px;border:1px solid #ffffff26;border-radius:14px;pointer-events:none}
.g-row{position:relative;display:flex;justify-content:space-between;align-items:flex-start;font:600 12.5px var(--f);letter-spacing:.02em;color:#ffffffcc}
.g-kind{font:700 10px var(--f);letter-spacing:.12em;text-transform:uppercase;color:#C5B8F5}
.g-mid{position:relative;display:flex;flex:1;align-items:center;gap:12px}
.g-mid strong{flex:none;font:800 clamp(72px,29cqw,104px)/.85 var(--f-disp);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.g-mid strong small{font-size:.5em;letter-spacing:-.03em}
.g-off{display:flex;flex:1;min-width:0;flex-direction:column;padding-bottom:4px;font:400 italic clamp(30px,12cqw,42px)/1 var(--f-serif);color:var(--lilac)}
.g-off .hand{margin-top:8px;font-size:clamp(22px,9cqw,32px);line-height:1.05;color:#fff;transform:rotate(-4deg);overflow-wrap:anywhere}
.g-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff40 48%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.gift-card.open .g-shine{animation:card-sheen 1.1s var(--ease) .2s forwards}
.gift-card.open{animation:gift-open .7s var(--spring)}
.gift-card.settled{animation:none}
@keyframes gift-open{40%{transform:scale(1.04) rotate(-1deg)}}
.scratch{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .6s}
.gift-card.open .scratch{opacity:0}
.scratch-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;padding:10px 16px 10px 10px;border-radius:99px;background:var(--white);color:var(--ink);font:600 15px var(--f);box-shadow:var(--sh-card);pointer-events:none;white-space:nowrap;animation:hint-bob 2s ease-in-out infinite}
.coin{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe6a6,#d79c33);box-shadow:inset 0 -2px 0 #b97f1f;animation:coin-rub 2s ease-in-out infinite}
@keyframes hint-bob{50%{transform:translate(-50%,calc(-50% - 3px))}}
@keyframes coin-rub{25%{transform:translateX(-4px) rotate(-12deg)}75%{transform:translateX(4px) rotate(12deg)}}
.gift-after{margin-top:16px;text-align:center;animation:rise .5s var(--ease) backwards}
.gift-after p{margin:0;font:600 16px var(--f)}
.timer{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 12px 7px 10px;border-radius:99px;background:var(--white);box-shadow:var(--sh-soft),0 0 0 1px var(--hair);font:600 12.5px var(--f);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.timer b{color:var(--ink)}
.timer>i{width:7px;height:7px;border-radius:50%;background:var(--lilac-deep);animation:lilac-ping 1.6s infinite}
@keyframes lilac-ping{0%{box-shadow:0 0 0 0 #7E66D666}70%,100%{box-shadow:0 0 0 7px #7E66D600}}

/* ---------- Paywall ---------- */
.s-offer{padding:0}
.s-offer::before{display:none}
.lto{position:sticky;top:0;z-index:5;height:0}
.lto>div{position:absolute;left:12px;right:12px;top:10px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:16px;background:#131313f0;color:#fff;box-shadow:0 12px 30px #13131340;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateY(-140%);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.lto.show>div{transform:none;opacity:1}
.lto:not(.show)>div{visibility:hidden;transition:transform .45s var(--ease),opacity .3s,visibility 0s .45s}
.lto-tag{flex:none;padding:6px 8px;border-radius:10px;background:var(--lilac-deep);font:800 14px var(--f-disp)}
.lto-copy{flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;font-size:12px;line-height:1.3}
.lto-copy b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lto-copy span{opacity:.75;font-variant-numeric:tabular-nums}
.lto-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lto-copy .lto-reserved{white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.2;opacity:.85}
.lto-copy .lto-clock{display:flex;align-items:center;gap:6px;margin-top:3px;overflow:visible;opacity:1}
.lto-clock svg{flex:none;width:14px;height:14px;color:var(--lilac)}
.lto-copy .lto-clock b{display:inline-block;flex:none;min-width:5ch;overflow:visible;font:700 17px/1.15 var(--f);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.lto-go{flex:none;min-height:44px;border:0;border-radius:99px;padding:9px 16px;white-space:nowrap;background:#fff;color:var(--ink);font:700 13.5px var(--f)}
.pw-hero{position:relative;padding:16px 22px 0;isolation:isolate}
.pw-hero .nd-seats{margin-top:14px}
.pw-hero::before{content:"";position:absolute;inset:-80px 0 auto;height:420px;z-index:-1;background:radial-gradient(45% 50% at 85% 30%,var(--wash-lilac),transparent 70%),radial-gradient(40% 45% at 15% 15%,var(--wash-pink),transparent 70%),radial-gradient(50% 50% at 55% 75%,var(--wash-peri),transparent 70%);filter:blur(30px);opacity:.55}
.pw-photo{margin-top:12px;height:200px;flex:none}
.pw-h{margin-top:16px!important}
.pw-hero .lead{margin-top:10px}
.sheet{position:relative;z-index:1;padding:8px 22px 34px}
.sheet>section{margin-top:40px}
.sheet>section:first-child{margin-top:18px}
.pw-gift .gift-card.mini{width:62%;margin:16px auto 0;animation:none;box-shadow:0 14px 30px #2a1d4a33}
.gift-card.mini .gift-face{padding:11px 12px}
.gift-card.mini .gift-face::after{inset:6px;border-radius:10px}
.gift-card.mini .hf-logo.on-ink .her{font-size:15px}.gift-card.mini .hf-logo.on-ink .fr{font-size:9px}
.gift-card.mini .g-kind{font-size:8px}
.gift-card.mini .g-mid strong{font-size:46px}.gift-card.mini .g-mid strong small{font-size:23px}
.gift-card.mini .g-off{font-size:19px}.gift-card.mini .g-off .hand{font-size:14px}
.gift-card.mini .g-row{font-size:9.5px}
.applied{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 12px;border-radius:12px;background:var(--lilac-tint);border:1px solid var(--lilac-line)}
.wo-ico{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--lilac-deep)}
.wo-ico svg{width:14px;height:14px}
.applied b{display:block;font:600 14px var(--f)}
.applied code{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:7px;background:var(--white);font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--lilac-ink);border:1px dashed var(--lilac-line)}
.applied .clock{margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--lilac-ink)}
.applied .clock svg{width:15px;height:15px}
.applied .clock b{font:800 17px var(--f-disp);color:var(--ink);font-variant-numeric:tabular-nums;min-width:4.4ch}
.reserve{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint)}
.pw-gift .applied{margin-top:0}
/* "Your plan" summary: the first CTA, high on the page */
.pw-plan{margin-top:14px}
.ps-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.ps-main{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.ps-name{font:700 16px var(--f-disp);letter-spacing:-.02em}
.ps-price{font-size:13.5px;color:var(--ink-soft);white-space:nowrap}
.ps-price del{margin-right:5px;color:var(--faint)}
.ps-price b{font:800 17px var(--f-disp);color:var(--ink);letter-spacing:-.02em}
.ps-then{flex-basis:100%;font-size:12.5px;color:var(--ink-soft)}
.ps-change{flex:none;min-height:44px;padding:0 4px;border:0;background:none;color:var(--lilac-ink);font:600 13.5px var(--f);text-decoration:underline;text-underline-offset:3px}
.pw-plan .primary{margin-top:10px}
.pw-plan .trust{margin-top:8px}
.pw-tags{margin-top:12px;flex-wrap:wrap}
.sheet .hopes{margin-top:12px}
.pw-for .gap-echo{margin-top:10px;font-size:14px}
.road{list-style:none;margin:12px 0 0;padding:0}
.road li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.road li:first-child{border-top:0;padding-top:2px}
.road-n{flex:none;width:36px;font:400 italic 28px/1 var(--f-serif);color:var(--lilac)}
.road small{display:block;font:700 9.5px var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--lilac-ink)}
.road b{font:700 15px var(--f-disp);letter-spacing:-.02em}
.road p{display:inline;margin:0 0 0 6px;font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
/* plan picker (Coach): week · month (popular, preselected) · quarter */
.plans{display:grid;gap:12px;margin-top:16px}
.plan{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--white);text-align:left;overflow:hidden;transition:border-color .2s,background .2s,transform .15s var(--ease)}
.plan:active{transform:scale(.985)}
.plan[aria-pressed=true]{border-color:var(--lilac-deep);box-shadow:inset 0 0 0 1px var(--lilac-deep);background:var(--lilac-tint)}
.plan-banner{display:block;padding:5px 0;background:var(--lilac-deep);color:#fff;text-align:center;font:600 11px var(--f);letter-spacing:.07em;text-transform:uppercase}
.plan-row{display:flex;align-items:center;gap:12px;padding:15px 14px}
.plan-check{flex:none;width:21px;height:21px;border-radius:50%;border:1.5px solid rgba(19,19,19,.22);display:grid;place-items:center;color:#fff;transition:background .2s,border-color .2s}
.plan-check svg{width:11px;height:11px;opacity:0;transform:scale(.4);transition:opacity .15s,transform .25s var(--spring)}
.plan[aria-pressed=true] .plan-check{background:var(--lilac-deep);border-color:var(--lilac-deep)}
.plan[aria-pressed=true] .plan-check svg{opacity:1;transform:none}
.plan-name{flex:1;min-width:0}
.plan-name b{display:block;font:700 17px var(--f-disp);letter-spacing:-.02em}
.plan-name small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--ink-soft)}
.plan-price{text-align:right}
.plan-price del{display:block;font-size:12.5px;color:var(--faint)}
.plan-price b{display:block;font:800 22px/1.1 var(--f-disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan-price small{font-size:11.5px;color:var(--ink-soft)}
.guarantee-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:6px;border:0;background:none;color:var(--lilac-ink);font:600 13.5px var(--f)}
.guarantee-link svg{width:16px;height:16px}
.cta-block{margin-top:4px}
.trust{margin:10px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.cta-block .fine{text-align:center;margin-top:8px}
/* money-back panel (Coach .money-back-panel); one #guarantee only */
.guarantee{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:16px;padding:18px;border-radius:20px;background:var(--lilac-tint);border:1px solid var(--lilac-line);text-align:left}
.mb-seal{position:relative;width:56px;height:74px;margin:0;border-radius:28px 28px 12px 12px;background:var(--white);border:1px solid var(--lilac);display:grid;place-items:center}
.mb-seal svg{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;animation:spin 40s linear infinite}
.mb-seal svg line{stroke:var(--lilac-line);stroke-width:2;stroke-linecap:round}
.mb-seal b{position:relative;display:grid;place-items:center;font:400 italic 30px/.9 var(--f-serif);color:var(--lilac-deep)}
.mb-seal b small{display:block;margin-top:4px;font:700 7px var(--f);font-style:normal;letter-spacing:.14em;color:var(--lilac-ink)}
.screen .mb-h{margin:0;font:400 22px/1.12 var(--f-serif);letter-spacing:-.02em;text-transform:none}
.mb-h em{display:block;color:var(--lilac-deep)}
.guarantee p{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.pw-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:32px;padding:16px 0 4px;border-top:1px solid var(--hair);font:400 12px/1.4 var(--f);color:var(--ink-soft)}
.pw-footer a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:3px}
.mb-list{list-style:none;margin:12px auto 0;padding:0;display:grid;gap:6px;width:max-content;max-width:100%;text-align:left;font:600 14px var(--f)}
.mb-list li{display:flex;align-items:center;gap:8px}
.mb-list svg{flex:none;width:16px;height:16px;padding:2px;border-radius:50%;background:var(--lilac-deep);color:#fff}
.guarantee details{margin-top:14px;text-align:left;border-radius:14px;background:var(--white);padding:0 14px}
.guarantee summary{display:flex;justify-content:space-between;padding:12px 0;font:600 14px var(--f);cursor:pointer;list-style:none}
.guarantee summary::after{content:"+";color:var(--lilac-deep);font-size:18px;line-height:1;transition:transform .25s var(--ease)}
.guarantee details[open] summary::after{transform:rotate(45deg)}
.guarantee details p{margin:0 0 12px;font-size:13.5px}
.reel{display:flex;gap:10px;margin:16px -22px 0;padding:0 22px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel figure{flex:none;width:72%;margin:0;border-radius:22px;overflow:hidden;scroll-snap-align:center;aspect-ratio:1.25;position:relative;box-shadow:var(--sh-soft)}
.reel img{width:100%;height:100%;object-fit:cover}
.format{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.format div{padding:12px 8px;border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--hair);text-align:center}
.format b{display:block;font:800 26px/1.1 var(--f-disp);color:var(--ink);letter-spacing:-.03em}
.format span{font-size:12px;color:var(--ink-soft)}
.faq{margin-top:14px;display:grid;gap:8px}
.faq details{border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--line);padding:0 16px}
.faq summary{display:flex;justify-content:space-between;gap:12px;padding:15px 0;font:600 15px var(--f);cursor:pointer;list-style:none}
.faq summary::after{content:"+";flex:none;color:var(--lilac-deep);font-size:20px;line-height:1;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 15px;font-size:14px;line-height:1.55;color:var(--ink-2);animation:rise .35s var(--ease)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* done-for-you list */
.todo{position:relative;margin-top:14px;animation:none}
.todo-stamp{position:absolute;right:16px;bottom:18px;padding:3px 9px;border:1.5px solid var(--lilac-ink);border-radius:7px;color:var(--lilac-ink);font:700 10.5px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-8deg) scale(1.6);opacity:0;transition:opacity .2s 2.4s,transform .35s var(--spring) 2.4s}
.reveal.in .todo-stamp,.still .todo-stamp{opacity:1;transform:rotate(-8deg)}
.todo .notes-title{font-size:17px}
.todo ul{gap:6px;margin-top:8px}.todo li{font-size:14.5px}
.todo{padding:14px 16px 14px}
.todo li{clip-path:none;animation:none;display:flex;align-items:center;gap:8px;font-size:15px}
.todo li span{white-space:nowrap;text-decoration:line-through 2px;text-decoration-color:transparent;transition:text-decoration-color .3s,color .3s;transition-delay:calc(.3s + var(--i)*.45s)}
.todo li em{margin-left:auto;padding:2px 7px;border:1.5px solid var(--lilac-ink);border-radius:6px;color:var(--lilac-ink);font:700 9px/1.3 var(--f);font-style:normal;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:rotate(-8deg) scale(1.6);transition:opacity .2s,transform .35s var(--spring);transition-delay:calc(.55s + var(--i)*.45s)}
.todo li.last{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--spring);transition-delay:2.9s}
.reveal.in .todo li span{color:var(--faint);text-decoration-color:var(--lilac-deep)}
.reveal.in .todo li em{opacity:1;transform:rotate(-8deg)}
.reveal.in .todo li.last{opacity:1;transform:none}
/* sealed invitation */
.envelope{position:relative;margin:18px auto 0;max-width:330px;padding:70px 20px 22px;border-radius:18px;background:linear-gradient(160deg,var(--white),var(--lilac-tint));text-align:center;overflow:hidden;cursor:pointer;box-shadow:var(--sh-card)}
.env-flap{position:absolute;left:0;right:0;top:0;height:86px;background:linear-gradient(160deg,#F4F0FD,#E6DEF8);clip-path:polygon(0 0,100% 0,50% 100%)}
.wax{position:absolute;left:50%;top:58px;width:48px;height:48px;margin-left:-24px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--lilac);font:400 italic 17px var(--f-serif);box-shadow:0 4px 10px #13131340,inset 0 -3px 0 #000;animation:seal-pulse 2.4s ease-in-out infinite}
@keyframes seal-pulse{50%{transform:scale(1.06)}}
.envelope b{display:block;margin-top:40px;font:700 18px var(--f-disp);letter-spacing:-.02em}
.envelope>span:last-child{display:block;margin-top:6px;font-size:14px;color:var(--ink-soft)}
.envelope.shake{animation:env-shake .5s}
@keyframes env-shake{20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-1deg)}80%{transform:rotate(1deg)}}

/* ---------- Checkout ---------- */
.co-head{display:flex;align-items:center;justify-content:space-between}
.co-head .back{margin-left:-10px}
.secure{display:flex;align-items:center;gap:6px;font:700 11px var(--f);letter-spacing:.14em;color:var(--ok)}
.secure svg{width:13px;height:13px}
.s-checkout h1{margin-top:12px}
.order{margin-top:14px;padding:16px;border-radius:16px;background:var(--white);box-shadow:var(--sh-soft),0 0 0 1px var(--hair)}
.order-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.order-head b{font:700 17px var(--f-disp);letter-spacing:-.02em}
.order-head button{min-height:44px;border:0;background:none;color:var(--lilac-ink);font:600 13.5px var(--f);text-decoration:underline;text-underline-offset:3px;padding:0}
.order-row{display:flex;justify-content:space-between;padding:9px 0 0;font-size:14.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.order-row.disc{color:var(--lilac-ink)}
.order-row.muted{color:var(--ink-soft)}
.order-row.total{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font:800 18px var(--f-disp);color:var(--ink)}
.methods{display:grid;gap:10px;margin-top:10px}
.method{display:flex;align-items:center;gap:12px;width:100%;padding:15px 14px;border:1px solid var(--line);border-radius:16px;background:var(--white);text-align:left;font:600 15.5px var(--f);transition:border-color .2s,background .2s}
.method[aria-pressed=true]{border-color:var(--lilac-deep);box-shadow:inset 0 0 0 .5px var(--lilac-deep);background:var(--lilac-tint)}
.radio{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(19,19,19,.22);display:grid;place-items:center;transition:border-color .2s}
.radio::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--lilac-deep);transform:scale(0);transition:transform .3s var(--spring)}
.method[aria-pressed=true] .radio{border-color:var(--lilac-deep)}
.method[aria-pressed=true] .radio::after{transform:scale(1)}
.method .mi{margin-left:auto;display:flex;gap:4px}
.method .mi i{padding:3px 6px;border-radius:5px;background:var(--white);font:700 10.5px var(--f);font-style:normal;color:var(--ink-2);box-shadow:0 0 0 1px var(--line)}
.card-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.card-wrap>.card-form{min-height:0;overflow:hidden;margin-top:0;transition:margin-top .35s}
.card-wrap.open{grid-template-rows:1fr}
.card-wrap.open>.card-form{margin-top:10px}
.card-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card-form span{padding:14px;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px var(--line);color:var(--faint);font-size:14px}
.card-form span:first-child{grid-column:1/-1}
.co-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:18px;padding:8px 0;font:600 15px/1.4 var(--f);color:var(--ink-2)}
.co-meta span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.co-meta svg{flex:none;width:18px;height:18px;color:var(--ok)}
.co-guarantee{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px;border-radius:16px;background:var(--lilac-tint);border:1px solid var(--lilac-line);font-size:13px;line-height:1.5;color:var(--ink-2)}
.co-guarantee b{display:block;margin-bottom:2px;font:600 14px var(--f);color:var(--ink)}
.mini-seal{flex:none;width:40px;height:50px;border-radius:20px 20px 8px 8px;display:grid;place-content:center;text-align:center;background:var(--white);border:1px solid var(--lilac);color:var(--lilac-deep);font:400 italic 20px/.9 var(--f-serif);font-synthesis:style}
.mini-seal small{display:block;margin-top:2px;font:700 6.5px var(--f);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac-ink)}
.co-links{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px;font-size:12.5px;color:var(--ink-soft)}

/* ---------- After payment and finish ---------- */
.stepper{display:flex;gap:5px;margin:4px 0 14px}.stepper i{flex:1;height:5px;border-radius:5px;background:var(--lilac-tint)}.stepper i.d{background:var(--lilac-deep)}.stepper i.now{background:linear-gradient(90deg,var(--lilac-deep) 50%,var(--lilac-tint) 50%)}
.steplab{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;font:600 11.5px var(--f);color:var(--ink-soft)}.steplab b{color:var(--lilac-ink);font-weight:700}
.check{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.check li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--hair);animation:rise .45s var(--ease) backwards}
.check li:nth-child(2){animation-delay:.08s}.check li:nth-child(3){animation-delay:.16s}.check li:nth-child(4){animation-delay:.24s}.check li:nth-child(5){animation-delay:.32s}
.check .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12.5px var(--f);background:var(--lilac-tint);color:var(--lilac-ink)}
.check .n svg{width:12px;height:12px}.check b{font:600 14.5px var(--f)}
.check .done .n{background:var(--lilac-deep);color:#fff}.check .done b{color:var(--ink-soft);font-weight:500}
.check .now{box-shadow:0 0 0 1.5px var(--lilac-deep),0 8px 20px #7E66D61f}.check .now .n{background:var(--lilac-deep);color:#fff}
.check .tag{margin-left:auto;font:600 11px var(--f);color:var(--ok)}.check .now .tag{color:var(--lilac-ink)}
.field-label .opt{color:var(--ink-soft);font-weight:400}
.photo-row{display:flex;gap:14px;align-items:center;margin-top:8px}
.photo-row .avatar{flex:none;width:76px;height:76px;border-radius:50%;background:var(--lilac-tint);display:grid;place-items:center;font-size:26px;box-shadow:0 0 0 1px var(--lilac-line);overflow:hidden;color:var(--lilac-ink)}
.photo-row .avatar img{width:100%;height:100%;object-fit:cover}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 18px;border-radius:99px;border:1.5px solid var(--lilac-line);color:var(--lilac-ink);font:600 14px var(--f);background:var(--white)}
.ghost:hover{border-color:var(--lilac-deep)}
.done-mark{position:relative;width:84px;height:84px;margin:18px auto 0}
.done-mark svg{width:100%;height:100%}
.done-mark .c{fill:none;stroke:var(--lilac-deep);stroke-width:4;stroke-dasharray:252;stroke-dashoffset:252;animation:draw .8s var(--ease) .15s forwards;transform:rotate(-90deg);transform-origin:center}
.done-mark .k{fill:none;stroke:var(--lilac-deep);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .45s var(--ease) .8s forwards}
.done-mark::after{content:"";position:absolute;inset:0;border-radius:50%;animation:burst .9s ease-out .8s}
@keyframes burst{0%{box-shadow:0 0 0 0 #7E66D650}100%{box-shadow:0 0 0 28px #7E66D600}}
.status{list-style:none;margin:18px 0 0;padding:16px;border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--hair);display:grid;gap:14px}
.status li{display:flex;align-items:center;gap:12px;font:600 15px var(--f);animation:rise .45s var(--ease) backwards;animation-delay:calc(.4s + var(--i)*.35s)}
.status .st{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-deep);color:#fff}
.status .st svg{width:12px;height:12px}
.status .wait .st{background:#fff;box-shadow:inset 0 0 0 2px var(--lilac-line);position:relative}
.status .wait .st::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--lilac);border-color:var(--lilac) transparent transparent;animation:spin 1s linear infinite}
.status .wait{color:var(--ink-soft)}
.next-box{margin-top:16px;padding:16px;border-radius:16px;background:var(--white);box-shadow:var(--sh-soft),0 0 0 1px var(--hair);font-size:14.5px;line-height:1.55}
.next-box h3{margin-bottom:6px}
.preview-line{margin-top:18px;text-align:center;font-size:12px;color:var(--faint)}
.confetti{position:fixed;pointer-events:none;z-index:50}

/* ---------- Small phones: the etalon's container rules (measured at 375×548 and 320×568) ---------- */
@container (max-height:720px){
 .s-welcome{padding-top:12px}.hf-logo.stack .her{font-size:25px}.hf-logo.stack .fr{font-size:14.5px}
 .wl-stage{margin-top:10px}.wl-card{margin-top:-40px;padding:11px 13px 10px}.wl-card .nd-slides{height:106px}.wl-card .nd-tags{display:none}.wl-slim{margin-top:-32px;padding:9px 11px}.wl-slim .nd-slides{height:42px}
 .wl-copy{padding-top:12px}.wl-h{font-size:25px}.wl-h .accent{font-size:33px}.wl-lead{font-size:14.5px;margin-top:7px}.wl-hand{top:30px;font-size:17px}
 .m{font-size:24px}.m .accent,.m .line.accent{font-size:32px}
 .qh{font-size:22px}.v-head-caps .qh{font-size:22px}
 .choices{gap:8px}.choice{min-height:52px;padding-top:9px;padding-bottom:9px}
 .tiles .choice{min-height:96px;gap:8px;padding:11px}.ico-img{width:48px;height:48px;border-radius:13px}
 .reactions .choice{min-height:84px}
 .pills .choice{min-height:56px}
 .hint{margin:8px 0 12px}.hint-gap{height:12px}
 .actions{min-height:104px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}.primary{min-height:52px}
 .photo-scene{aspect-ratio:1.4}.seat-scene{width:70%;margin:20px auto 44px}.polaroids{height:200px}.pol{padding-bottom:40px}.ow-fan{height:200px}.map-scene{aspect-ratio:.95}
 .quote-card{margin-top:20px;font-size:21px;padding:22px 20px 18px}
 .hours>b{font-size:38px}
 .pw-photo{height:170px}
}
@container (max-height:600px){
 .hf-logo.stack .her{font-size:22px}.hf-logo.stack .fr{font-size:13px}.wl-photo{min-height:96px}
 .wl-h{font-size:23px}.wl-h .accent{font-size:30px}.wl-hand{display:none}.wl-lead{font-size:13.5px}.where{margin-top:4px;font-size:12.5px}
 .m{font-size:22px}.m .accent,.m .line.accent{font-size:29px}
 .qh,.v-head-caps .qh{font-size:20.5px}
 .actions{min-height:96px;padding:8px 20px calc(10px + env(safe-area-inset-bottom))}
 .photo-scene{aspect-ratio:1.6}.seat-scene{width:62%}.polaroids{height:170px}.pol{width:38%;padding-bottom:36px}.ow-fan{height:170px}.map-scene{aspect-ratio:1.05}
 .gap-row{display:none}.gap-line{display:block}.gap{padding:11px 14px}
 .reactions .choice{min-height:76px;padding:10px 6px}
 .quote-card{font-size:19px}
}
@container (max-width:340px){
 .nd-dots{display:none}
 .m{font-size:22px}.m .accent,.m .line.accent{font-size:29px}
 .qh,.v-head-caps .qh{font-size:20.5px}
 .screen{padding-left:18px;padding-right:18px}.s-welcome{padding-left:18px;padding-right:18px}.sheet,.pw-hero{padding-left:18px;padding-right:18px}
 .actions{padding-left:18px;padding-right:18px}
 .tram-car{transform:translateX(calc((100cqw - 36px - 62px) * var(--p,0)))}
 .plan-row{gap:10px;padding:14px 12px}.plan-price b{font-size:20px}
 .tiles .txt{font-size:13.5px}
 .todo li{font-size:14px}.todo li span{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .reveal{opacity:1;transform:none}
 .ld-row em{opacity:1;transform:none}.skel{display:none}
 .lto>div{transform:none}
 .ring .r-fg,.done-mark .c,.done-mark .k{stroke-dashoffset:0}
 .seats li,.after-match{opacity:1;transform:none}
 .todo li span{text-decoration-color:var(--lilac-deep)}
 .c-line{stroke-dashoffset:0}.c-area{opacity:1}.todo li em,.todo li.last{opacity:1;transform:none}
 .notes li{clip-path:none}.notes li.said .nl{background-size:100% 100%}
}

/* Review screenshots (?still=1): final states */
.still *,.still *::before,.still *::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
.still .reveal{opacity:1;transform:none}
.still .notes li{clip-path:none}.still .notes li.said .nl{background-size:100% 100%}
.still .todo li span{color:var(--faint);text-decoration-color:var(--lilac-deep)}.still .todo li em,.still .todo li.last{opacity:1;transform:none}
.still .c-line{stroke-dashoffset:0}.still .c-area{opacity:1}
/* the paywall 50 counts up inside a fixed two-digit box, so OFF never moves */
.g-mid [data-count]{display:inline-block;min-width:2ch;text-align:right}

/* review fixes (2026-10-14) */
.ended{margin:0;padding:12px 14px;border-radius:16px;background:var(--mist);font-size:14px;line-height:1.5;color:var(--ink-2)}
.note-help{margin-top:10px;font-size:14.5px}
.vibes.many .vibe{padding:5px 10px 5px 8px;font-size:11.5px}
.order-row span:last-child,.order-head button{white-space:nowrap}
.order-row span:first-child{min-width:0;padding-right:10px}
.lto-copy span b{display:inline;font-size:inherit}
/* paywall blocks 3–5 compact, so the full picker comes up sooner */
.sheet>section.pw-for,.sheet>section.todo-sec,.sheet>section.pw-road,.sheet>section#plans{margin-top:30px}
.pw-for .nd-flat{margin-top:12px}
.pw-for .hopes{gap:2px}
.pw-for .hopes li{padding:6px 0;background:none;box-shadow:none;font-size:14.5px}
.sheet h2{font-size:19px}.sheet h2 .accent{font-size:25px}
@container (max-height:720px){
 .pw-hero{padding-top:12px}.pw-h{margin-top:10px!important}.pw-hero .lead{margin-top:6px;font-size:14px}.pw-hero .nd-seats{margin-top:10px}
 .sheet>section.pw-gift{margin-top:14px}.pw-plan{margin-top:10px}.ps-row{padding:9px 12px}.pw-plan .primary{margin-top:8px}
}
.pw-for .nd-flat .hopes{margin-top:10px;padding-top:6px;border-top:1px solid var(--hair)}
.pw-for .nd-flat .gap-echo{margin-top:6px;font-size:13.5px;color:var(--ink-soft)}
.todo ul{gap:3px}.todo li.last{margin-top:4px}
.sheet>section.pw-for,.sheet>section.todo-sec,.sheet>section.pw-road,.sheet>section#plans{margin-top:26px}

/* Italic serif only on real highlights (Alex, 15.10): welcome, "it's not just you", Olly, the table reveal,
   the paywall greeting, the post-payment steps and the finish. Everywhere else the accent phrase reads as part of the headline. */
.screen:not([data-screen=welcome]):not([data-screen=drift-note]):not([data-screen=olly-note]):not([data-screen=table]):not([data-screen=offer]):not([data-screen=upsell]):not([data-screen=next-steps]):not([data-screen=social-link]):not([data-screen=work-role]):not([data-screen=finish]) .accent,
.screen[data-screen=offer] h2 .accent{font-family:inherit;font-style:normal;font-weight:inherit;font-size:inherit;line-height:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;margin-top:0}

/* Line pictograms on answer rows and tiles (option 2): lilac outline circle, filled when picked */
.pic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid #E6E0F5;background:#fff;color:var(--lilac-deep);transition:background .18s,border-color .18s,color .18s,transform .35s var(--spring)}
.pic svg{width:21px;height:21px}
.choice[aria-pressed=true] .pic{background:var(--lilac-deep);border-color:var(--lilac-deep);color:#fff;transform:scale(1.04)}
.tiles .choice .pic{width:34px;height:34px}.tiles .choice .pic svg{width:19px;height:19px}
.q-role .tiles .choice{justify-content:flex-start}
@media (max-height:640px){.pic{width:32px;height:32px}.pic svg{width:18px;height:18px}.tiles .choice .pic{width:30px;height:30px}}

/* Member quotes (from the live funnel), chosen by her answers */
.review{position:relative;margin:18px 0 0;padding:16px 16px 14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px #2a1d4a0f}
.rv-mark{position:absolute;top:-14px;left:12px;font:700 40px/1 var(--f-disp);color:var(--lilac)}
.rv-h{display:block;font:700 15.5px/1.3 var(--f-disp);letter-spacing:-.01em;color:var(--ink)}
.review blockquote{margin:6px 0 0;font:400 14px/1.45 var(--f);color:var(--ink-soft)}
.review figcaption{display:flex;align-items:center;gap:8px;margin-top:10px;font:500 12.5px var(--f);color:var(--ink-soft)}
.review figcaption b{color:var(--ink);font-weight:700}
.review figcaption i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lilac-tint);color:var(--lilac-deep);font:700 12px var(--f);font-style:normal}
.rv-src{margin:8px 0 0;font:400 11.5px var(--f);color:var(--ink-soft);opacity:.8}

/* social-note: smaller table so the member quote is visible; the handwritten note sits on the right, clear of the quote */
.seat-hand{left:auto;right:-6%;top:98%;margin-top:0}

/* Olly screen: no avatar on the fan; her portrait sits next to her name */
.ow-sign{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;text-align:left;line-height:1.3;position:relative}
.ow-av{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 2px #fff,0 0 0 3px #E6E0F5;flex:none}
.ow-sign .ow-hand{position:static;margin-left:6px;transform:rotate(-6deg)}
.ow .m{margin-top:18px}

/* drift-note (Alex 19.10, mockup D3): a band of faces, wide at 25, narrow today; four new women join — her table */
.rf{position:relative;aspect-ratio:331/250;margin-top:20px}
.rf svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--lilac-tint)}
.rf-f{position:absolute;width:30px;height:30px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:0 3px 8px #2a1d4a22;filter:grayscale(1)}
.rf-f.fade{opacity:.16;transform:scale(.85)}
.rf-f.new{width:42px;height:42px;filter:none;box-shadow:0 0 0 2px var(--lilac-deep),0 4px 10px #2a1d4a2a}
.rf-l{position:absolute;font:700 10.5px var(--f);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.rf-l.new{color:var(--lilac-deep)}
.dn-help{margin:20px 0 0;font:700 18px/1.28 var(--f-disp);letter-spacing:-.015em;color:var(--ink)}
.dn-help span{color:var(--lilac-deep)}
.screen[data-screen=drift-note] .source{margin-top:10px}
.screen.enter-forward .rf-f.fade,.screen.enter-back .rf-f.fade{animation:rf-dim .7s var(--ease) backwards;animation-delay:calc(.6s + var(--j)*.05s)}
.screen.enter-forward .rf-f.new,.screen.enter-back .rf-f.new{animation:rf-pop .45s var(--spring) backwards;animation-delay:calc(1.8s + var(--j)*.13s)}
@keyframes rf-dim{from{opacity:1;transform:none}}
@keyframes rf-pop{from{opacity:0;transform:scale(.3)}}
@media (max-height:640px){.rf{margin-top:12px}.dn-help{font-size:16.5px;margin-top:14px}}
@media (max-width:340px){.rf-f{width:26px;height:26px}.rf-f.new{width:36px;height:36px}}

/* Chapter chat: attached reactions, reserved space and staggered replies. */
.ce-chat{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.ce-own{position:relative;align-self:flex-end;max-width:82%;margin-bottom:16px;animation:ce-message-in .28s var(--ease) .25s both}
.ce-msg{margin:0;max-width:82%;padding:11px 15px;font:600 15.5px/1.35 var(--f);color:var(--ink);border-radius:20px}
.ce-msg.me{max-width:100%;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.ce-msg.them{align-self:flex-start;display:flex;align-items:center;gap:9px;padding:8px 15px 8px 8px;background:var(--lilac-tint);border-bottom-left-radius:6px}
.ce-msg.them img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.ce-msg.them{animation:ce-message-in .28s var(--ease) both;animation-delay:calc(1.35s + var(--i)*.9s)}
.ce-reactions{position:absolute;right:12px;bottom:-16px;display:flex;gap:4px}
.ce-react{display:grid;place-items:center;min-width:35px;height:29px;padding:3px 8px;border:2px solid var(--white);border-radius:99px;background:var(--lilac-tint);box-shadow:0 2px 5px #2a1d4a10;font:400 17px/1 var(--f);transform-origin:50% 0;animation:ce-reaction-in .28s var(--ease) both}
.ce-heart{display:flex;align-items:center;gap:5px;animation-delay:.95s}.ce-fire{animation-delay:1.85s}
.ce-heart-icon{display:inline-block;transform-origin:50% 65%}
.ce-heart b{display:inline-block;width:1ch;font:600 12px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--lilac-deep);text-align:center}
@keyframes ce-message-in{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ce-reaction-in{0%{opacity:0;transform:translateY(-3px) scale(.92)}65%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:none}}
.ce-thought{margin:20px 0 0;font:700 17px/1.3 var(--f-disp);letter-spacing:-.015em;color:var(--ink)}
.ce-thought span{color:var(--lilac-deep)}
@media (max-height:640px){.ce-chat{margin-top:14px;gap:8px}.ce-msg{font-size:14.5px}.ce-thought{margin-top:14px;font-size:16px}}

/* review cards: five lilac stars + reviewer portrait */
.rv-stars{display:flex;gap:2px;margin-bottom:6px}
.rv-stars svg{width:15px;height:15px;fill:var(--lilac-deep)}
.review figcaption img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px #E6E0F5;flex:none}

/* quality chips with emoji: the emoji replaces the reserved check, selection shows by fill + border */
.chips-q .choice:has(.q-emo){gap:7px;padding:9px 15px 9px 12px}
.chips-q .q-emo{font-size:17px;line-height:1;flex:none}
.chips-q .q-emo~.txt::before{display:none}
.chips-q .choice:has(.q-emo)[aria-pressed=true]{border-color:var(--lilac-deep);box-shadow:inset 0 0 0 .5px var(--lilac-deep)}

/* Languages "Say hello": greeting chips with flags, first-language row, add-a-language sheet */
.lh-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.lh .hi{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:5px 10px 5px 7px;border-radius:99px;border:1px solid var(--line);background:#fff;transition:background .18s,border-color .18s}
.lh .hi .fl{font-size:16px;line-height:1}
.lh .hi b{font:700 14px var(--f);color:var(--ink)}.lh .hi small{font:500 10.5px var(--f);color:var(--ink-soft)}
.lh .hi[aria-pressed=true]{border-color:var(--lilac-deep);background:var(--lilac-tint);box-shadow:inset 0 0 0 .5px var(--lilac-deep)}
.lh .hi[aria-pressed=true] b{color:var(--lilac-deep)}
.lh .hi.add{border-style:dashed;border-color:#CFC4EE;color:var(--lilac-deep);font:700 13.5px var(--f);padding:7px 12px}
.lh-lbl{margin:12px 0 6px;font:700 10.5px var(--f);letter-spacing:.13em;text-transform:uppercase;color:var(--lilac-deep)}
.lh-first{display:flex;flex-wrap:wrap;gap:6px}
.lh-first button{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:7px 12px;border-radius:12px;border:1.5px dashed #CFC4EE;background:#fff;font:600 13.5px var(--f);color:var(--ink)}
.lh-first button[aria-pressed=true]{border-style:solid;border-color:var(--ink);background:var(--ink);color:#fff}
.lh-first button[aria-pressed=true]::before{content:"♥";color:#EDAEE9}
.lh-first.nudge button{animation:lh-nudge .7s var(--ease) 2}
@keyframes lh-nudge{50%{border-color:var(--lilac-deep);box-shadow:0 0 0 4px rgba(124,92,214,.18)}}
.actions .primary.is-waiting{opacity:.42}
.lh-empty{font:500 13px var(--f);color:var(--ink-soft)}
.lh-layer{position:absolute;inset:0;z-index:20;pointer-events:none}
.lh-layer.open{pointer-events:auto}
.lh-scrim{position:absolute;inset:0;background:#13131359;opacity:0;transition:opacity .25s}
.lh-layer.open .lh-scrim{opacity:1}
.lh-sheet{position:absolute;left:0;right:0;bottom:0;height:82%;padding:10px 18px 18px;border-radius:24px 24px 0 0;background:#fff;box-shadow:0 -12px 40px #2a1d4a33;transform:translateY(105%);transition:transform .35s var(--ease);display:flex;flex-direction:column}
.lh-layer.open .lh-sheet{transform:none}
.lh-sheet .grab{align-self:center;width:38px;height:4px;border-radius:99px;background:#DDD7E6;margin-bottom:10px}
.lh-sheet h3{margin:0;font:700 18px var(--f-disp);letter-spacing:-.02em}
.lh-search{display:flex;align-items:center;gap:8px;margin-top:10px;padding:0 12px;height:44px;border-radius:12px;background:#F4F2F6}
.lh-search input{flex:1;border:0;background:none;font:500 15px var(--f);outline:none;min-width:0}
.lh-list{flex:1;overflow:auto;margin-top:8px;min-height:0}
.lh-row{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 4px;border:0;border-bottom:1px solid #F1EEF5;background:none;text-align:left}
.lh-row .fl{font-size:20px;width:26px;text-align:center}
.lh-row b{font:600 15px var(--f)}.lh-row small{margin-left:6px;font:500 12.5px var(--f);color:var(--ink-soft)}
.lh-row i{margin-left:auto;width:22px;height:22px;border-radius:6px;border:1.5px solid #D5D0DC;font-style:normal;display:grid;place-items:center;color:#fff;font-size:12px}
.lh-row[aria-pressed=true] i{background:var(--lilac-deep);border-color:var(--lilac-deep)}
.lh-typed{display:flex;gap:8px;margin-top:10px}
.lh-typed input{flex:1;min-width:0;height:44px;padding:0 12px;border-radius:12px;border:1.5px dashed #CFC4EE;font:500 14.5px var(--f)}
.lh-typed button{height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--lilac-tint);color:var(--lilac-deep);font:700 14px var(--f)}
.lh-done{margin-top:10px;height:50px;border:0;border-radius:99px;background:var(--ink);color:#fff;font:700 15px var(--f)}
@media (max-width:340px){.lh .hi small{display:none}}

/* ===== Paywall v2 (2026-10-15): offer intro → done for you → picker with per-day cards → content → picker; LTO on top ===== */
.pw-intro{padding-bottom:6px}
.screen h1.po{margin-top:14px;font-size:25px;line-height:1.04}
.po>span{display:block}
.m .po-goal{margin:4px 0 6px;font-size:31px;line-height:1.04;text-wrap:balance}
.po-off{position:relative;display:flex!important;align-items:flex-end;gap:12px;margin-top:2px}
.po-num{display:flex;align-items:flex-start;font:800 96px/.86 var(--f-disp);letter-spacing:-.07em;background:linear-gradient(140deg,var(--ink) 35%,var(--lilac-ink) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.po-num b{font-weight:800;min-width:1.18em}
.po-num i{margin:8px 0 0 2px;font-style:normal;font-size:.5em;letter-spacing:-.04em;color:var(--lilac-deep);-webkit-text-fill-color:var(--lilac-deep)}
.po-word{margin-bottom:10px;padding:3px 13px 5px;border-radius:12px;background:var(--lilac-deep);color:#fff;font:800 34px/1 var(--f-disp);letter-spacing:-.03em;transform:rotate(-5deg);box-shadow:0 10px 22px #7E66D640;animation:pop .6s var(--spring) .5s backwards}
.po-note{position:absolute;left:calc(1.6em + 6px);top:100%;margin-top:6px;font-size:22px;white-space:nowrap;text-transform:none;letter-spacing:0;animation:rise .6s var(--ease) 1.1s backwards}
.po-off+*{margin-top:0}
.pw-intro .po-off{margin-bottom:30px}

.picker .pk-offer{margin-top:14px}
.picker .pk-offer:empty{display:none}
.picker .applied{margin-top:0}
.picker .plans{gap:12px;margin-top:16px}
.picker .plan{overflow:visible;border:1.5px solid var(--line);border-radius:18px;box-shadow:0 1px 0 #1313130a}
.picker .plan.popular{margin-top:8px}
.picker .plan[aria-pressed=true]{border-color:var(--lilac-deep);box-shadow:inset 0 0 0 1px var(--lilac-deep),0 12px 26px #7E66D626;background:var(--lilac-tint)}
.picker .plan-banner{position:absolute;top:-11px;left:16px;padding:4px 10px;border-radius:99px;background:var(--ink);color:#fff;font:700 10px/1.2 var(--f);letter-spacing:.09em}
.picker .plan-row{gap:12px;padding:14px 12px 14px 14px}
.picker .plan-name b{font-size:17px}
.picker .plan-name small{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;margin-top:3px;font-size:13px}
.picker .plan-name del{color:var(--faint)}
.pn-now{font-weight:700;color:var(--ink)}
.plan-day{flex:none;min-width:88px;padding:8px 10px 7px;border-radius:13px;background:var(--mist);text-align:center;transition:background .25s,color .25s}
.plan-day b{display:flex;justify-content:center;align-items:flex-start;font:800 23px/1 var(--f-disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan-day sup{margin:2px 1px 0 0;font-size:12px;line-height:1;letter-spacing:0}
.plan-day small{display:block;margin-top:3px;font:600 10.5px var(--f);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);transition:color .25s}
.plan[aria-pressed=true] .plan-day{background:var(--ink);color:#fff}
.plan[aria-pressed=true] .plan-day small{color:#FFFFFFb3}
.picker .guarantee-link{margin-top:8px}
.picker .cta-block{margin-top:2px}
.lto-go{background:var(--white)}
@media (max-width:360px){
 .screen h1.po{font-size:22px}.m .po-goal{font-size:27px}.po-num{font-size:80px}.po-word{font-size:28px}.po-note{font-size:20px}
 .screen.s-offer{padding-left:0;padding-right:0} /* the narrow .screen padding rule would double the sheet's own gutter */
 .picker .guarantee-link{font-size:12.5px;white-space:nowrap}
 .picker .plan-row{gap:10px;padding:13px 10px 13px 12px}.plan-day{min-width:76px;padding:7px 8px 6px}.plan-day b{font-size:20px}.picker .plan-name b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.po-word,.po-note,.po-spark{animation:none}}
.still .po-word,.still .po-note,.still .po-spark{animation:none}

/* Paywall v2b: the offer is its own deep-violet card (Coach-style separate offer block); goal in a warm marker colour */
.po-card{position:relative;isolation:isolate;overflow:hidden;margin-top:16px;padding:22px 20px 50px;border-radius:28px;color:#fff;background:radial-gradient(70% 60% at 100% 0%,#9F8BE8b3,transparent 70%),radial-gradient(60% 50% at 0% 100%,#F4BBDC59,transparent 70%),linear-gradient(160deg,#2A1D4A 0%,#4A3394 62%,#6A50C8 100%);box-shadow:0 22px 44px #2a1d4a40,inset 0 0 0 1px #FFFFFF1f}
.po-card--plain{padding-bottom:24px}
.po-card::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(1.4px 1.4px at 18% 22%,#fff9,transparent 60%),radial-gradient(1.2px 1.2px at 72% 14%,#fff8,transparent 60%),radial-gradient(1.6px 1.6px at 88% 46%,#fff7,transparent 60%),radial-gradient(1.2px 1.2px at 40% 86%,#fff6,transparent 60%),radial-gradient(1px 1px at 62% 70%,#fff8,transparent 60%)}
.po-spark{position:absolute;z-index:0;font-style:normal;color:#FFD98A;opacity:.85;animation:po-tw 2.6s ease-in-out infinite}
.po-spark.s1{top:16px;right:22px;font-size:18px}.po-spark.s2{top:52px;right:52px;font-size:10px;animation-delay:.8s}.po-spark.s3{bottom:20px;right:28px;font-size:13px;animation-delay:1.5s}
@keyframes po-tw{50%{opacity:.25;transform:scale(.7) rotate(20deg)}}
.po-card .screen h1.po,.screen .po-card h1.po{position:relative;margin:0;color:#fff}
.po-card .po-lead,.po-card .po-giving{color:#FFFFFFeb}
.po-card .po-goal{margin:6px 0 8px;font:italic 400 31px/1.08 var(--f-serif);letter-spacing:-.02em;text-transform:none;color:#FFE2A6;text-wrap:balance}
.po-mark{background:linear-gradient(transparent 78%,#FFD98A47 78%,#FFD98A47 95%,transparent 95%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.po-card .po-num{background:none;color:#fff;-webkit-text-fill-color:#fff}
.po-card .po-num i{color:#FFD98A;-webkit-text-fill-color:#FFD98A}
.po-card .po-word{background:#FFD98A;color:var(--ink);box-shadow:0 10px 22px #0000003d}
.po-card .po-note{color:#FFE2A6}
.pw-intro .po-off{margin-bottom:0}
.pw-intro::before{opacity:.35}
/* Week card: "€6.99 then €29.99/mo" */
.pn-then{color:var(--ink-soft)}
/* Short renewal line under the trust line */
.picker .fine.renew{margin:6px 0 0;text-align:center;font-size:11.5px;line-height:1.45;color:var(--faint)}
.picker .fine.renew b{color:var(--ink-2);font-weight:600}
/* Checkout: brand marks + Apple Pay-style wallet button */
.method .mi{gap:6px}
.method .mi .pm{display:inline-flex;align-items:center;justify-content:center;gap:1px;height:24px;min-width:38px;padding:0 6px;border-radius:5px;background:#fff;box-shadow:0 0 0 1px var(--line);font:600 12px/1 -apple-system,"Inter",sans-serif;font-style:normal;color:var(--ink)}
.pm-apple{background:#000!important;color:#fff!important;box-shadow:none!important;letter-spacing:-.01em}
.pm-apple svg{width:10px;height:12px;margin:-2px 1px 0 0}
.pm-google b{font:700 13px/1 "Inter",sans-serif;margin-right:2px;background:conic-gradient(from -40deg,#EA4335 0 25%,#FBBC05 0 45%,#34A853 0 70%,#4285F4 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-google{color:#5f6368!important}
.pm-visa{font:italic 900 12.5px/1 "Inter",sans-serif!important;letter-spacing:.02em;color:#1A1F71!important}
.pm-mc span{width:13px;height:13px;border-radius:50%;background:#EB001B}
.pm-mc span+span{margin-left:-5px;background:#F79E1Bdd;mix-blend-mode:multiply}
.primary.applepay{background:#000;gap:4px;font:600 20px -apple-system,"Inter",sans-serif;letter-spacing:-.01em}
.primary.applepay svg{width:17px;height:20px;margin-top:-3px}
@media (max-width:360px){.po-card{padding:20px 16px 46px}.po-card .po-goal{font-size:27px}}
/* Paywall v2c: the whole top block is one full-bleed colour fill (logo + offer), no side borders, soft bottom curve */
.pw-hero.pw-intro{padding:18px 22px 86px;border-radius:0;overflow:hidden;color:#fff;background:radial-gradient(70% 45% at 100% 8%,#9F8BE8b3,transparent 70%),radial-gradient(60% 40% at 0% 100%,#F4BBDC59,transparent 70%),linear-gradient(170deg,#2A1D4A 0%,#4A3394 62%,#6A50C8 100%)}
.pw-hero.pw-intro::before{display:none}
/* The white sheet rises over the hero with rounded TOP corners, so the purple runs on behind it (Alex 19.10). */
.pw-intro+.sheet{margin-top:-32px;padding-top:18px;border-radius:32px 32px 0 0;background:var(--white)}
.pw-hero.pw-intro::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1.4px 1.4px at 18% 30%,#fff9,transparent 60%),radial-gradient(1.2px 1.2px at 72% 20%,#fff8,transparent 60%),radial-gradient(1.6px 1.6px at 88% 52%,#fff7,transparent 60%),radial-gradient(1.2px 1.2px at 40% 88%,#fff6,transparent 60%),radial-gradient(1px 1px at 62% 74%,#fff8,transparent 60%)}
.pw-intro .hf-logo,.pw-intro .hf-logo .fr{color:#fff}
.pw-intro .hf-logo.stack .her{color:#C9BBF5}
.pw-intro .po-card{margin-top:20px;padding:0;border-radius:0;overflow:visible;background:none;box-shadow:none}
.pw-intro .po-card::after{display:none}
.pw-intro .po-card .po-spark.s1{top:-6px;right:2px}.pw-intro .po-card .po-spark.s2{top:30px;right:30px}.pw-intro .po-card .po-spark.s3{bottom:-30px;right:6px}
.pw-intro:has(.po-card--plain){padding-bottom:66px}
.s-offer .sheet>section:first-child{margin-top:28px}
@media (max-width:360px){.pw-hero.pw-intro{padding:16px 18px 82px}}


/* Languages screen on the common answer scale (Alex 16.10: the options read too small / too bold next to the other
   questions): 44px+ chips, the hello at the 16px answer size and regular-medium weight, a legible language name. */
.lh .hi{min-height:46px;padding:7px 14px 7px 10px;gap:7px}
.lh .hi .fl{font-size:19px}
.lh .hi b{font:500 16px var(--f)}
.lh .hi small{font:500 12px var(--f)}
.lh .hi.add{font:600 15px var(--f);padding:9px 14px}

/* No zoom (Alex 16.10): iOS ignores user-scalable=no for pinch, so also stop double-tap zoom, and keep every text input at
   16px+ — Safari zooms the page in when a smaller input gets focus. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,select,textarea,.field,.lh-typed input{font-size:16px!important}

/* ---------- City Guide upsell (mockup: docs/research/2026-10-21-city-guide-upsell/mockup.html) ----------
   One template for both cities (content in guides.js). The footer is the fixed price row + one button + «Skip». */
.s-upsell{padding-bottom:22px}
.s-upsell .stepper{margin:0 0 4px}.s-upsell .steplab{margin:0 0 12px}
.s-upsell .m{font-size:25px;line-height:1.04;letter-spacing:-.04em;margin-top:6px}.s-upsell .m .accent{font-size:31px;line-height:1.02;letter-spacing:-.02em}
.s-upsell .lead{margin-top:10px;font-size:14.5px}
.up-cover-row{display:flex;gap:14px;align-items:flex-end;margin-top:14px}
.up-cover{flex:none;width:132px;border-radius:10px;overflow:hidden;box-shadow:0 14px 30px #2a1d4a33,0 0 0 1px #13131314;transform:rotate(-3deg)}
.up-cover img{display:block;width:100%}
.up-facts{flex:1;display:grid;gap:8px;min-width:0}
.up-badge{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--lilac-tint);color:var(--lilac-ink);font:700 11.5px var(--f);box-shadow:0 0 0 1px var(--lilac-line)}
.up-fact{padding:9px 11px;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px var(--hair),0 6px 14px #2a1d4a0d}
.up-fact b{display:block;font:800 18px/1 var(--f-disp);letter-spacing:-.02em}.up-fact span{font-size:11.5px;color:var(--ink-soft)}
.up-sec{margin-top:20px}.up-sec h3{margin-bottom:9px}
.up-goals{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.up-goals li{display:flex;gap:10px;font-size:14px;line-height:1.4}
.up-goals .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--lilac-deep);color:#fff;display:grid;place-items:center;font:700 11px var(--f);font-style:normal;margin-top:1px}
.up-goals li span{color:var(--ink-soft)}
.up-moods{list-style:none;margin:0;padding:0;border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--hair)}
.up-moods li{display:flex;align-items:center;gap:10px;padding:10px 13px;border-top:1px solid var(--hair);font-size:13.5px}.up-moods li:first-child{border-top:0}
.up-moods .n{flex:none;width:24px;font:700 11.5px var(--f);color:var(--lilac-ink)}.up-moods .c{margin-left:auto;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.up-moods li.more{color:var(--lilac-ink);font-weight:600;justify-content:center}
.up-pages{display:flex;gap:8px}.up-pages figure{flex:1;min-width:0}
.up-pages img{display:block;width:100%;border-radius:6px;box-shadow:0 0 0 1px var(--hair),0 6px 14px #2a1d4a14}
.up-pages figcaption{font-size:11px;color:var(--ink-soft);margin-top:5px;text-align:center}
.up-disclaimer{margin:18px 0 6px;font-size:12px;line-height:1.5;color:var(--ink-soft);text-align:center}
.up-wait{margin:22px 0 0;text-align:center;font-size:13px;color:var(--ink-soft)}
/* footer: solid, with the price row above the button */
.actions[data-up="1"]{margin-top:0;min-height:0;padding-top:10px;background:var(--white);box-shadow:0 -10px 24px #2a1d4a12}
.up-price{display:flex;align-items:center;gap:10px;padding:2px 2px 4px}
.up-price .t{font:600 14px var(--f)}.up-price .t small{display:block;font:400 11.5px var(--f);color:var(--ink-soft)}
.up-price .p{margin-left:auto;text-align:right}.up-price s{font-size:12.5px;color:var(--ink-soft)}.up-price b{display:block;font:800 21px/1 var(--f-disp);letter-spacing:-.02em}
.up-off{flex:none;padding:4px 8px;border-radius:8px;background:var(--ink);color:#fff;font:700 12px var(--f)}.up-off.deep{background:var(--lilac-deep)}
.primary.lilac{background:var(--lilac-deep);box-shadow:0 10px 24px #7E66D640}.primary.lilac:hover{background:var(--lilac-ink)}
.actions .text-button.up-skip{font:600 14px var(--f);text-decoration:none;padding:4px 6px}
.up-err{padding:10px 12px;border-radius:12px;background:#FCEEEE;color:#B3261E;font-size:13px;line-height:1.4}
.actions[data-up="1"] .primary:disabled{cursor:default;transform:none}.actions[data-up="1"] .primary:disabled::after{animation:none}
.actions[data-up="1"] .primary[data-up-buy]:disabled{opacity:.55}
.actions[data-up="1"] .text-button:disabled{opacity:.45;cursor:default}
.up-spin{width:22px;height:22px;border-radius:50%;border:3px solid #ffffff55;border-top-color:#fff;animation:up-spin 1s linear infinite}@keyframes up-spin{to{transform:rotate(360deg)}}
/* the layer over the screen: dim while the bank step runs, bottom sheet for the gift coupon (variant B, Alex 21.10) */
.up-layer{position:absolute;inset:0;z-index:2}
.up-scrim{position:absolute;inset:0;background:#13131366}
.up-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--white);border-radius:24px 24px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));text-align:center;box-shadow:0 -12px 40px #2a1d4a33;animation:up-sheet .42s var(--ease) backwards}
@keyframes up-sheet{from{transform:translateY(46px);opacity:0}}
.up-sheet .kicker{font:700 10.5px/1.3 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--lilac-ink);margin-bottom:6px}
.up-ticket{position:relative;margin:4px auto 16px;width:250px;border-radius:18px;background:linear-gradient(135deg,#7E66D6,#B49AF0 60%,#F4BBDC);color:#fff;padding:18px 18px 16px;text-align:left;box-shadow:0 16px 30px #7E66D640;transform:rotate(-2deg)}
.up-ticket::before,.up-ticket::after{content:"";position:absolute;top:62%;width:22px;height:22px;border-radius:50%;background:var(--white)}.up-ticket::before{left:-11px}.up-ticket::after{right:-11px}
.up-ticket .tk{font:700 10.5px var(--f);letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.up-ticket .tv{font:800 44px/1 var(--f-disp);letter-spacing:-.04em;margin-top:6px}.up-ticket .tv small{font:italic 400 20px var(--f-serif);letter-spacing:0;margin-left:6px}
.up-ticket .tear{border-top:2px dashed #ffffff88;margin:14px -4px 10px}
.up-ticket .tf{display:flex;justify-content:space-between;font:600 13px var(--f)}.up-ticket .tf s{opacity:.75;font-weight:400}
.up-sheet h4{margin:0;font:800 21px/1.15 var(--f-disp);letter-spacing:-.03em}
.up-sheet p{margin:8px 0 16px;font-size:14px;line-height:1.45;color:var(--ink-soft)}.up-sheet p b{color:var(--ink)}
/* success */
.up-owned{margin-top:16px;display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;background:var(--white);box-shadow:0 12px 30px #2a1d4a1f,0 0 0 1px var(--hair)}
.up-owned img{width:64px;border-radius:6px;box-shadow:0 0 0 1px var(--hair)}
.up-owned b{display:block;font:700 14.5px var(--f)}.up-owned span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.up-mail{margin-top:12px;padding:11px 13px;border-radius:14px;background:var(--lilac-tint);font-size:13px;line-height:1.45;color:var(--ink-2)}
.up-hand{margin-top:22px}
.up-hand .hand{display:inline-block}
@media (prefers-reduced-motion:reduce){.up-sheet{animation:none}.up-spin{animation-duration:2.4s}}