/* reece-ai.com — shared stylesheet for index.html + admin.html
v4 "Dusk Oasis, lit": same bones as v3, palette brought forward.
Gold + coral arrive as real gradients (buttons, seals, hero), the indigo
base gains depth (layered aurora, glow, a live palm frond), pink stays
the voice accent. Premium, never neon. See DESIGN.md.
oasis-polish: gold warmed toward coral one notch, eyebrows take the
coral→gold ramp, one card system (r-l / r-m), hero seal sits clear of
the wordmark at every width, number badges share one language.
oasis-vibe: their pink→peach ramp (--grad-oasis) becomes the signature —
primary buttons, active tab, eyebrows, the section seal, the brief's
progress line, the record ring, selected chips, the Received seal; gold
keeps the stamps (the copy calls them gold), the aurora warms a breath
toward pink. One family, never all at once. */
:root{
--bg0:#0F0C1B; --bg1:#181426; --bg2:#221B36;
--violet:#220043;
--ink:#F5EFE6; --dim:#B4A8C9; --faint:#8377A0;
--gold:#FABD76; --gold-bright:#FFD3A0; --gold-fill:#E9B876;
--gold-deep:#E8A45F; --gold-ink:#241708;
--coral:#F69B72; --coral-deep:#E97F52;
--pink:#FF4B7D; --mint:#7FD6A4;
--grad-gold:linear-gradient(135deg,#FFDCA8 0%,#FABD76 48%,#F0A56B 100%);
--grad-sun:linear-gradient(115deg,#FFDCA8 0%,#FABD76 40%,#F69B72 100%);
/* their pink→peach, their CTA ramp — the signature, used with discipline */
--grad-oasis:linear-gradient(115deg,#FF4B7D 0%,#FA8C7A 52%,#FABD76 100%);
--oasis-ink:#2B0F16; /* dark plum that sits on the pink ramp */
--glow-oasis:0 10px 32px -8px rgba(255,75,125,.4);
--line-rose:rgba(255,169,143,.3);
--glow-gold:0 10px 32px -8px rgba(250,189,118,.42);
--glow-soft:0 18px 60px -24px rgba(0,0,0,.65);
--line:rgba(250,189,118,.15); --line-strong:rgba(250,189,118,.34);
--card:rgba(255,255,255,.035);
--cardline:rgba(255,255,255,.08);
/* future full-bleed hero stage — ships off; see the .stage-bg rule */
--hero-image:none;
--display:"Fraunces",Georgia,serif;
--ui:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
--maxw:1040px; --qmax:640px;
--r-s:10px; --r-m:16px; --r-l:22px; --r-pill:999px;
--ease:cubic-bezier(.22,.9,.3,1);
--press:cubic-bezier(.2,1.4,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background-color:var(--bg0);
/* the aurora: violet depth from three corners, a warm floor — with a
breath of their pink bleeding in from the neon-palm corner */
background-image:
radial-gradient(1000px 720px at 84% -16%, rgba(255,75,125,.07), transparent 58%),
radial-gradient(1200px 800px at 88% -14%, rgba(34,0,67,.66), transparent 62%),
radial-gradient(900px 700px at -14% 10%, rgba(58,16,92,.5), transparent 58%),
radial-gradient(1100px 900px at 52% 120%, rgba(21,16,36,.95), transparent 64%);
color:var(--ink);font-family:var(--ui);
font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); /* tab bar clearance (phone) */
}
body.admin{padding-bottom:0}
::selection{background:rgba(255,75,125,.3)}
button{font-family:var(--ui)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line);
transition:color .15s var(--ease),border-color .15s var(--ease)}
a:hover{border-bottom-color:var(--gold)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
body.admin .wrap{max-width:780px}
/* ---------- header + tabs (bottom bar on phone, pill nav on desktop) */
.top{padding:20px 0 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.mark{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
font-size:1.25rem;letter-spacing:.02em;color:var(--ink);border:0}
.mark svg{width:13px;height:22px;color:var(--gold)}
.mark b{font-weight:600}
.mark span{color:var(--gold)}
.priv{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;
display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
background:rgba(15,12,27,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-top:1px solid rgba(255,255,255,.06);
padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;
padding:9px 4px;background:none;border:0;border-radius:12px;cursor:pointer;
color:var(--faint);font-weight:600;font-size:.7rem;letter-spacing:.08em;
text-transform:uppercase;transition:color .18s var(--ease),background-color .18s var(--ease)}
.tab svg{width:21px;height:21px}
/* the Brief tab carries their palm: it swaps in for the chat icon only in
the active state (aria-selected is toggled by site.js — CSS does the rest) */
.tab .tab-palm{display:none;width:18px;height:21px}
.tab[aria-selected=true] .tab-ico{display:none}
.tab[aria-selected=true] .tab-palm{display:block}
.tab:hover{color:var(--dim)}
.tab[aria-selected=true]{color:#FFA3BB;animation:tabpop .2s var(--press)}
.tab[aria-selected=true]::after{content:"";width:16px;height:2px;border-radius:2px;
background:var(--grad-oasis);margin-top:2px;animation:barin .22s var(--ease)}
@keyframes tabpop{from{transform:scale(.94)}to{transform:scale(1)}}
@keyframes barin{from{width:0;opacity:0}to{width:16px;opacity:1}}
/* ---------- eyebrow / headings / shared text */
/* the eyebrow carries their ramp — pink into peach; solid fallback stays
a readable warm rose where clip-text is missing */
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
color:#F0708F;margin:0 0 14px;
background:var(--grad-oasis);-webkit-background-clip:text;background-clip:text}
@supports (-webkit-background-clip:text) or (background-clip:text){
.eyebrow,.mlabel,.rvsec h4{color:transparent}
}
.h1{font-family:var(--display);font-weight:380;letter-spacing:-.01em;line-height:1.08;
font-size:clamp(2.2rem,7.5vw,3.4rem);margin:0 0 14px}
.h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.12;
font-size:clamp(1.7rem,4.6vw,2.35rem);margin:0 0 10px}
.h1 em,.h2 em,.q-title em,.rv-title em{font-style:italic;color:var(--gold)}
@supports (-webkit-background-clip:text) or (background-clip:text){
.h1 em,.h2 em,.rv-title em{
background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.lede{font-size:1.08rem;color:var(--dim);max-width:54ch;margin:0 0 26px}
.hint{font-size:.82rem;color:var(--faint)}
.hint b,.lede b{color:var(--dim);font-weight:600}
/* ---------- buttons */
/* the primary CTA is their pill: the pink→peach ramp, plum ink, pink glow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-weight:600;font-size:.98rem;letter-spacing:.01em;padding:15px 28px;
border-radius:var(--r-pill);border:1px solid rgba(255,214,196,.55);
background:var(--grad-oasis);color:var(--oasis-ink);cursor:pointer;
box-shadow:var(--glow-oasis);
transition:transform .16s var(--press),box-shadow .18s var(--ease),filter .16s var(--ease),
border-color .16s var(--ease),background-color .16s var(--ease)}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px);
box-shadow:0 16px 44px -10px rgba(255,75,125,.5)}
.btn:active{transform:scale(.97)}
.btn.big{padding:17px 32px;font-size:1.04rem}
.btn.ghost{background:transparent;border:1px solid rgba(250,189,118,.5);
color:var(--gold-bright);box-shadow:none}
.btn.ghost:hover{background:rgba(250,189,118,.09);border-color:var(--gold);
filter:none;transform:translateY(-2px)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--faint);
font-weight:500;padding:12px 14px;box-shadow:none}
.btn.quiet:hover{color:var(--ink);filter:none;transform:none}
.btn.pink{background:var(--grad-oasis);border-color:transparent;
color:var(--oasis-ink);box-shadow:none}
.btn.pink:hover{filter:brightness(1.06)}
.btn.sm{padding:9px 16px;font-size:.85rem}
.btn.wide{width:100%;max-width:420px;margin:0 auto}
.btn svg{flex-shrink:0}
.btn[disabled]{background:var(--card);border:1.5px dashed var(--line-strong);
color:var(--dim);box-shadow:none;cursor:default;filter:none;transform:none}
.btn[disabled]:hover{filter:none;transform:none}
/* ---------- avatar with initials fallback */
.avatar{position:relative;display:grid;place-items:center;flex-shrink:0;
width:52px;height:52px;border-radius:50%;overflow:hidden;
background:radial-gradient(circle at 32% 28%, var(--bg2), var(--bg1));
border:1px solid var(--line-strong);
font-family:var(--display);font-weight:600;font-size:1rem;color:var(--gold)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 30%;border-radius:inherit}
.avatar.sm{width:44px;height:44px;font-size:.86rem}
.avatar.lg{width:72px;height:72px;font-size:1.3rem}
.avatar .av-mark{width:64%;height:64%}
/* ---------- note (left-rule, no box) */
.note{max-width:400px;text-align:left;border-left:2px solid var(--gold-deep);
padding:2px 0 2px 16px;color:var(--dim);font-size:.92rem}
.note b{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-deep);font-weight:600;margin-bottom:6px}
/* ---------- panels + screens + scroll reveal */
.panel{display:none}
.panel.on{display:block;animation:rise .26s var(--ease)}
.scr{display:none}
.scr.on{display:block;animation:rise .22s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.willreveal .reveal{opacity:0;transform:translateY(14px)}
body.willreveal .reveal.in{opacity:1;transform:none;
transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* cards inside a revealed section land in a quick stagger — animations, not
transitions, so their hover lifts keep working once they've settled */
body.willreveal .reveal .bcard,body.willreveal .reveal .wcard,
body.willreveal .reveal .hstep{opacity:0}
body.willreveal .reveal.in .bcard,body.willreveal .reveal.in .wcard,
body.willreveal .reveal.in .hstep{opacity:1;animation:rise .32s var(--ease) backwards}
body.willreveal .reveal.in .bcard:nth-child(2),
body.willreveal .reveal.in .wcard:nth-child(2),
body.willreveal .reveal.in .hstep:nth-child(2){animation-delay:.06s}
body.willreveal .reveal.in .bcard:nth-child(3),
body.willreveal .reveal.in .wcard:nth-child(3),
body.willreveal .reveal.in .hstep:nth-child(3){animation-delay:.12s}
body.willreveal .reveal.in .bcard:nth-child(4){animation-delay:.18s}
/* ---------- answered question: files itself into the stamp card ---------- */
/* the fixed-position snapshot that flies up to the scaffold (position and
size are set inline by site.js at capture time; WAAPI drives the flight) */
.qs-fly{position:fixed;z-index:60;pointer-events:none;text-align:left;
padding:34px 18px 28px;border-radius:var(--r-l);
background:linear-gradient(180deg,var(--bg1),var(--bg0));
box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05)}
/* the next question rises as the answered one departs */
.qsin{animation:rise .22s var(--ease) .06s backwards}
/* ---------- completed section: its seal zips into the vault ----------
plate built by site.js (numeral + title); position is set inline, WAAPI
flies it into the section's stamp slot in the scaffold */
.zip-seal{position:fixed;z-index:61;pointer-events:none;
display:flex;align-items:center;gap:12px;white-space:nowrap;
padding:11px 20px;border-radius:var(--r-pill);
background:var(--grad-oasis);color:var(--oasis-ink);
box-shadow:var(--glow-oasis),0 0 0 1px rgba(43,15,22,.3)}
.zip-seal .znum{font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1}
.zip-seal .zt{display:flex;flex-direction:column;line-height:1.3;text-align:left}
.zip-seal .zlab{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.zip-seal .ztitle{font-family:var(--display);font-style:italic;font-size:.95rem}
/* ---------- scaffold: section name, stamp card, tally, saved, offline */
.scaffold{position:sticky;top:0;z-index:40;
background:rgba(15,12,27,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.05);
margin:0 -20px;padding:0 20px}
.scaf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 0 0}
.scaf-sec{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scaf-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.qcount{font-size:.78rem;color:var(--faint);font-variant-numeric:tabular-nums}
.saved{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;
color:var(--mint);opacity:0;transform:translateY(2px);
transition:opacity .2s var(--ease),transform .2s var(--press)}
.saved.show{opacity:1;transform:none}
.saved.local{color:var(--coral)}
.saved.local::after{content:" on this phone"}
.stampcard{display:flex;align-items:center;gap:8px;padding:10px 0 8px}
.stamps{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;
scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:3px 0}
.stamps::-webkit-scrollbar{display:none}
.stamps{mask-image:linear-gradient(90deg,#000 88%,transparent);
-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
/* nine sections no longer fit a phone row at 36px — shrink, and let the
strip scroll rather than the whole page */
@media (max-width:430px){.stamp{width:31px;height:31px;font-size:.7rem}.stamps{gap:6px}}
.stamp{width:36px;height:36px;border-radius:50%;flex-shrink:0;
display:grid;place-items:center;font-family:var(--display);font-size:.8rem;
color:var(--faint);border:1.5px dashed rgba(250,189,118,.3);background:transparent;
transition:color .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease)}
.stamp.off{display:none}
.stamp.done{border:1.5px solid var(--gold-deep);color:var(--gold-ink);
background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-fill) 70%);
box-shadow:inset 0 0 0 2px rgba(15,12,27,.38),0 5px 16px -5px rgba(250,189,118,.5)}
.stamp.now{border-style:solid;border-color:var(--gold);color:var(--gold);
animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.stamp.stampin{animation:stampin .5s var(--press) both}
.stamp.stampin:nth-child(2){animation-delay:.07s}
.stamp.stampin:nth-child(3){animation-delay:.14s}
.stamp.stampin:nth-child(4){animation-delay:.21s}
.stamp.stampin:nth-child(5){animation-delay:.28s}
@keyframes stampin{from{transform:scale(1.7) rotate(-10deg);opacity:0}
to{transform:scale(1) rotate(0deg);opacity:1}}
.tally{margin-left:auto;font-size:.78rem;color:var(--faint);
font-variant-numeric:tabular-nums;white-space:nowrap}
.tally b{color:var(--dim);font-weight:600}
.pbar{height:3px;border-radius:3px;margin:0 0 10px;
background:rgba(255,255,255,.08);overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:3px;
background:var(--grad-oasis);transition:width .25s var(--ease)}
.offbar{display:none;align-items:center;gap:9px;margin:0 0 10px;
padding:8px 12px;border-radius:var(--r-s);
background:rgba(246,155,114,.1);border:1px solid rgba(246,155,114,.3);
color:var(--coral);font-size:.82rem}
body.offline .offbar{display:flex}
/* ---------- welcome screen */
.welcome{position:relative;text-align:center;max-width:480px;
margin:0 auto;padding:48px 0 36px}
.welcome .h1{font-size:clamp(2.4rem,8.5vw,3.4rem);margin-bottom:8px}
.welcome .lede{margin:0 auto 22px}
.facts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.fact{padding:6px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
font-size:.78rem;color:var(--dim);background:var(--card)}
.fact b{color:var(--gold);font-weight:600}
.welcome .note{margin:0 auto 26px}
.sender{display:flex;align-items:center;gap:14px;max-width:400px;
margin:0 auto 26px;text-align:left}
.sender b{display:block;font-size:.95rem}
.sender span{font-size:.8rem;color:var(--faint)}
/* the resume card sits on their pink→peach wash — a warm welcome back */
.resume{display:none;max-width:400px;margin:0 auto 20px;text-align:left;
background:linear-gradient(150deg,rgba(255,75,125,.08),rgba(250,189,118,.06));
border:1px solid var(--line-rose);
border-radius:var(--r-m);padding:16px 18px}
.resume.show{display:block;animation:rise .22s var(--ease)}
.resume p{margin:0 0 12px;font-size:.94rem}
.resume em{font-family:var(--display);font-style:italic;color:var(--gold)}
.resume-btns{display:flex;gap:10px;flex-wrap:wrap}
.resume-btns .btn{padding:11px 18px;font-size:.88rem}
.start-hint{margin:16px 0 0}
/* their wordmark beside Reece's name in the sender card */
.sender .wm-s{flex-shrink:0;width:auto;height:15px;margin-left:auto;
align-self:center;opacity:.7}
/* ---------- question screen */
.qs{padding:34px 0 28px;max-width:600px;margin:0 auto}
/* the section intro opens on their wash — pink into peach, then quiet */
.secintro{margin:0 0 24px;padding:18px 20px;border:1px solid var(--line-rose);
border-radius:var(--r-m);
background:linear-gradient(160deg,rgba(255,75,125,.08),rgba(250,189,118,.06) 46%,rgba(255,255,255,.02) 66%)}
.secintro .eyebrow{margin:0 0 8px}
.secintro h3{font-family:var(--display);font-weight:420;font-size:1.45rem;
letter-spacing:-.01em;margin:0 0 6px}
.secintro p{margin:0;color:var(--dim);font-size:.92rem}
.seccount{display:inline-block;margin-top:10px;font-size:.68rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.qmeta{display:flex;justify-content:space-between;align-items:baseline;
gap:12px;margin:0 0 14px}
.q-title{font-family:var(--display);font-weight:380;
font-size:clamp(1.6rem,5.8vw,2.2rem);line-height:1.16;letter-spacing:-.01em;
margin:0 0 8px}
.opt-tag{font-family:var(--ui);font-weight:600;font-size:.66rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
vertical-align:middle;margin-left:6px}
.sug-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--faint);font-weight:600;margin:0 0 10px}
.field{width:100%;background:rgba(0,0,0,.26);color:var(--ink);
border:1px solid var(--line);border-radius:var(--r-m);padding:16px 16px;
font-family:var(--ui);font-size:1.02rem;font-weight:400;outline:none;
transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(250,189,118,.16)}
textarea.field{min-height:110px;resize:vertical;line-height:1.55}
textarea.field.own{min-height:74px;margin:0}
.chips{display:flex;flex-direction:column;gap:10px}
.chip{display:flex;align-items:center;min-height:56px;width:100%;
padding:14px 18px;border-radius:var(--r-m);text-align:left;cursor:pointer;
border:1px solid rgba(250,189,118,.22);background:var(--card);
color:var(--ink);font-size:1rem;font-weight:400;
transition:background .15s var(--ease),border-color .15s var(--ease),
transform .14s var(--press),box-shadow .16s var(--ease)}
.chip:active{transform:scale(.985)}
.chip:hover{border-color:var(--gold);transform:translateY(-2px)}
.chip[aria-pressed=true]{background:var(--grad-oasis);border-color:transparent;
color:var(--oasis-ink);font-weight:600;
box-shadow:0 8px 22px -8px rgba(255,75,125,.5);
animation:chipsel .18s var(--press)}
@keyframes chipsel{from{transform:scale(.95)}to{transform:scale(1)}}
.chip[aria-pressed=true]::after{content:"✓";margin-left:auto;font-weight:700}
.orline{display:flex;align-items:center;gap:12px;margin:20px 0 12px;
color:var(--faint);font-size:.8rem;font-style:italic}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
.actions{display:flex;align-items:center;gap:10px;margin-top:30px}
.actions .spacer{flex:1}
/* ---------- voice strip (one component, five states) */
.vstrip{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-m);
background:var(--card);padding:14px 16px;transition:border-color .2s}
.vstrip[data-vstate=fail]{border-color:rgba(255,75,125,.45)}
.vstate{display:none}
.vstrip[data-vstate=idle] .v-idle{display:flex}
.vstrip[data-vstate=rec] .v-rec{display:flex}
.vstrip[data-vstate=up] .v-up{display:flex}
.vstrip[data-vstate=fail] .v-fail{display:block}
.vstrip[data-vstate=done] .v-done{display:block}
.v-idle{align-items:center;gap:14px;text-align:left}
/* the record button wears their ramp as a ring (gradient border, warm core) */
.mic-s{width:44px;height:44px;border-radius:50%;flex-shrink:0;cursor:pointer;
border:1.5px solid transparent;
background:linear-gradient(rgba(255,75,125,.09),rgba(255,75,125,.09)) padding-box,
var(--grad-oasis) border-box;
color:var(--pink);display:grid;place-items:center;
transition:background .15s var(--ease),transform .14s var(--press)}
.mic-s:hover{background:linear-gradient(rgba(255,75,125,.18),rgba(255,75,125,.18)) padding-box,
var(--grad-oasis) border-box;transform:scale(1.07)}
.mic-s svg{width:18px;height:18px}
.v-idle p{margin:0;font-size:.88rem;color:var(--dim)}
.v-idle p b{display:block;color:var(--ink);font-weight:600}
.v-rec{flex-wrap:wrap;align-items:center;justify-content:center;gap:16px}
.stopbtn{width:56px;height:56px;border-radius:18px;border:0;flex-shrink:0;
background:var(--pink);color:#fff;cursor:pointer;display:grid;place-items:center;
animation:halo 1.6s ease-out infinite}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(255,75,125,.4)}
70%{box-shadow:0 0 0 14px rgba(255,75,125,0)}100%{box-shadow:0 0 0 0 rgba(255,75,125,0)}}
.stopbtn i{width:18px;height:18px;border-radius:5px;background:#fff;display:block}
.timer{font-family:var(--display);font-size:1.6rem;font-weight:400;
font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:center;gap:3px;height:30px}
.bars i{width:3.5px;border-radius:3px;background:var(--pink);height:6px;
animation:lvl .8s ease-in-out infinite alternate}
.bars i:nth-child(1){animation-delay:0s}.bars i:nth-child(2){animation-delay:.09s}
.bars i:nth-child(3){animation-delay:.18s}.bars i:nth-child(4){animation-delay:.27s}
.bars i:nth-child(5){animation-delay:.36s}.bars i:nth-child(6){animation-delay:.14s}
@keyframes lvl{from{height:5px}to{height:26px}}
.reclab{width:100%;text-align:center;font-size:.82rem;color:var(--pink);
margin:2px 0 0}
.v-up{align-items:center;gap:12px;font-size:.86rem;color:var(--dim)}
.upbar{flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.09);
overflow:hidden}
.upbar i{display:block;height:100%;width:30%;background:var(--gold);
animation:creep 1.2s var(--ease) infinite alternate}
@keyframes creep{from{width:22%}to{width:78%}}
.v-fail{font-size:.86rem;color:var(--dim)}
.v-fail b{display:block;color:var(--pink);margin-bottom:3px}
.v-fail .fbtns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.v-done{text-align:left}
.player{display:flex;align-items:center;gap:13px}
.playbtn{width:44px;height:44px;border-radius:50%;flex-shrink:0;cursor:pointer;
border:1px solid var(--gold);background:var(--grad-gold);color:var(--gold-ink);
display:grid;place-items:center;
transition:filter .15s var(--ease),transform .14s var(--press)}
.playbtn:hover{filter:brightness(1.06);transform:scale(1.05)}
.playbtn svg{width:16px;height:16px}
.playbtn .i-pause{display:none}
.playbtn.playing .i-play{display:none}
.playbtn.playing .i-pause{display:block}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:36px;cursor:pointer}
.wave i{flex:1;min-width:2px;border-radius:2px;background:rgba(255,255,255,.14);
transition:background .15s}
.wave i.p{background:var(--gold)}
.vtime{font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums;
flex-shrink:0}
.v-done.noplay .player{display:none}
.v-done.noplay .vattachedline{display:block}
.vattachedline{display:none;font-size:.92rem;color:var(--ink)}
.vactions{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.vlink{background:none;border:0;color:var(--faint);font-size:.8rem;cursor:pointer;
text-decoration:underline;padding:4px 2px;transition:color .15s var(--ease)}
.vlink:hover{color:var(--ink)}
.vbadge{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
font-size:.78rem;color:var(--mint)}
.vbadge svg{width:12px;height:12px}
/* ---------- review screen */
.review{padding:38px 0 28px;max-width:660px;margin:0 auto}
.rv-title{font-family:var(--display);font-weight:380;letter-spacing:-.01em;
font-size:clamp(1.7rem,5.8vw,2.3rem);margin:0 0 8px}
.review .sub{color:var(--dim);margin:0 0 26px;font-size:.95rem}
.review .sub b{color:var(--gold-deep);font-weight:600}
.rvsum{margin:0 0 26px;padding:16px 18px;border-radius:var(--r-m);
border:1px solid rgba(250,189,118,.42);
background:linear-gradient(150deg,rgba(250,189,118,.12),rgba(250,189,118,.03))}
.rvsum b{display:block;color:var(--gold-bright);font-weight:600;margin-bottom:3px}
.rvsum span{font-size:.86rem;color:var(--dim)}
.rvsec{margin:0 0 24px}
.rvsec h4{margin:0 0 6px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
color:#F0708F;font-weight:600;padding-bottom:8px;
border-bottom:1px solid var(--line);
background:var(--grad-oasis);-webkit-background-clip:text;background-clip:text}
.rv{display:flex;align-items:flex-start;gap:12px;padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.05)}
.rvsec .rv:last-child{border-bottom:0}
.rv-q{flex:1;min-width:0}
.rv-q em{display:block;font-style:normal;font-size:.78rem;color:var(--faint);
margin-bottom:3px}
.rv-q b{font-weight:400;font-size:.95rem;word-wrap:break-word}
.rv.blank .rv-q b{color:var(--faint);font-style:italic;font-weight:300}
.rv-voice{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
padding:5px 12px 5px 9px;border-radius:var(--r-pill);font-size:.78rem;
color:var(--gold);border:1px solid var(--line-strong)}
.rv-voice svg{width:12px;height:12px}
.skipnote{color:var(--faint);font-style:italic;font-weight:300}
.needpill{display:inline-flex;align-items:center;gap:8px;margin-top:2px;
padding:7px 14px;border-radius:var(--r-pill);cursor:pointer;
border:1px solid rgba(250,189,118,.5);
background:rgba(250,189,118,.1);color:var(--gold-bright);
font-family:var(--ui);font-size:.78rem;font-weight:600;
transition:background .15s var(--ease),transform .14s var(--press)}
.needpill:hover{background:rgba(250,189,118,.2);transform:translateY(-2px)}
.needpill svg{width:12px;height:12px}
.edit{flex-shrink:0;background:none;border:0;color:var(--gold-deep);cursor:pointer;
font-size:.8rem;padding:4px 2px;transition:color .15s var(--ease)}
.edit:hover{color:var(--gold)}
.sendfail{display:none;margin:18px 0 0;padding:14px 16px;border-radius:var(--r-m);
border:1px solid rgba(255,75,125,.5);background:rgba(255,75,125,.07);
font-size:.9rem;color:var(--ink)}
.sendfail.show{display:block}
.sendfail b{color:var(--pink);display:block;margin-bottom:4px;font-weight:600}
.sendwrap{margin-top:26px;text-align:center}
.sendwrap .btn.togo{font-variant-numeric:tabular-nums;padding:15px 34px}
.sendnote{margin:12px 0 0}
/* ---------- thank-you screen */
.thanks{position:relative;text-align:center;max-width:460px;margin:0 auto;padding:52px 0 30px}
/* the Received seal takes their ramp: pink→peach ring, rose lettering,
the same double inset so it still reads as a rubber stamp */
.seal{width:118px;height:118px;border-radius:50%;margin:0 auto 26px;
display:grid;place-items:center;text-align:center;
border:2.5px solid transparent;color:#FFB3C6;
background:radial-gradient(circle at 34% 30%, rgba(255,75,125,.16), transparent 72%) padding-box,
var(--grad-oasis) border-box;
box-shadow:inset 0 0 0 4px rgba(15,12,27,.55), inset 0 0 0 5.5px #E8557F,
0 10px 34px -8px rgba(255,75,125,.38);
font-size:.58rem;letter-spacing:.26em;font-weight:700;text-transform:uppercase;
line-height:1.7;transform:rotate(-8deg);
animation:sealin .5s var(--press) both .1s}
@keyframes sealin{from{transform:rotate(-8deg) scale(1.9);opacity:0}
to{transform:rotate(-8deg) scale(1);opacity:1}}
.thanks .h1{font-size:clamp(1.9rem,6.4vw,2.6rem);margin-bottom:6px}
.thanks .sub{color:var(--dim);margin:0 0 34px}
/* the thanks checklist (.tsteps) and the preview run-down (ol.steps) were
both ".steps" once and leaned on each other's rules — now two names, one
badge language: the gold gradient coin either side of the send */
.tsteps{max-width:400px;margin:0 auto 30px;text-align:left;counter-reset:st;
display:grid;gap:0}
.tstep{position:relative;padding:0 0 20px 45px;counter-increment:st}
.tstep:last-child{padding-bottom:0}
.tstep::before{content:counter(st);position:absolute;left:0;top:0;
width:31px;height:31px;border-radius:50%;display:grid;place-items:center;
font-family:var(--display);font-size:.92rem;
color:#2a1a08;background:linear-gradient(135deg,var(--gold),var(--coral));
box-shadow:0 0 16px rgba(250,189,118,.3)}
.tstep b{display:block;font-weight:600;font-size:.94rem;margin-bottom:2px}
.tstep span{font-size:.86rem;color:var(--dim)}
.lastnote{max-width:400px;margin:0 auto 26px;text-align:left;
border-top:1px solid var(--line);padding-top:18px}
.lastnote h4{margin:0 0 10px;font-size:.72rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.thanks .foot{margin-top:34px;font-size:.82rem;color:var(--faint)}
/* their wordmark as the quiet sign-off, just above the closing line */
.wm-sign{display:block;width:118px;height:auto;margin:0 auto 14px;opacity:.5}
/* ---------- the palm, everywhere it can quietly be ----------
one watermark rule: the #oasismark symbol, near-invisible, behind the
words — home section heads, the welcome heading, the thanks seal.
(The question and review screens are built by site.js, so they keep
their palm presence through the seal, the chips and the ramp instead.) */
.palmwm{position:absolute;z-index:-1;pointer-events:none;color:var(--gold);
opacity:.055;transform:rotate(9deg)}
/* overhangs stay inside the 20px wrap padding — a wider bleed would open a
horizontal scrollbar on small phones */
.hsec-head{position:relative}
.hsec-head .palmwm{top:-38px;right:0;width:118px;height:auto}
.welcome .palmwm{top:-6px;right:0;width:168px;height:auto;opacity:.06}
.thanks .palmwm{top:-16px;right:0;width:140px;height:auto;opacity:.05}
/* ---------- home tab */
.home{position:relative;padding:40px 0 30px;text-align:center}
/* the hero's warm corner of the aurora — a notch warmer, a breath of pink */
.home::before{content:"";position:absolute;left:50%;top:-70px;bottom:auto;
width:120vw;max-width:1200px;height:560px;transform:translateX(-50%);
pointer-events:none;z-index:-1;
background:
radial-gradient(46% 55% at 74% 8%, rgba(246,155,114,.2), transparent 70%),
radial-gradient(42% 52% at 20% 2%, rgba(250,189,118,.13), transparent 70%),
radial-gradient(30% 36% at 84% -6%, rgba(255,75,125,.1), transparent 72%)}
.home{overflow:hidden}
.home .frond{position:absolute;top:-6px;right:-46px;width:200px;
color:var(--gold);opacity:.32;pointer-events:none;
filter:drop-shadow(0 0 26px rgba(250,189,118,.3));
transform-origin:50% 96%;
animation:frondin .45s var(--ease) backwards,sway 8s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.4deg)}}
@keyframes frondin{from{opacity:0}}
.hero{position:relative}
/* ---------- the full-bleed stage hook (ships OFF) ----------
Drop a neon-palm photo behind the hero one day, without touching markup
again: set --hero-image (on :root or anywhere up-tree) to a url() and
.stage-bg lights up — the image under a readability veil, the aurora and
copy still above it. With the shipped `none` the element is display:none,
so nothing paints at all. The display line below is the switch: `none`
is a valid display value (hidden), while url(...) is not — an invalid
computed value falls back to the property's initial state, and an
absolutely-positioned box blockifies to visible. Do not "simplify" it. */
.stage-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
display:var(--hero-image,none);
background:var(--hero-image) center/cover no-repeat}
.stage-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(15,12,27,.68) 0%,rgba(15,12,27,.32) 55%,rgba(15,12,27,.06) 100%),
linear-gradient(0deg,rgba(15,12,27,.5),transparent 48%)}
/* hero entrance: the copy staggers up in one decisive beat and the photo
lands with a press — under half a second, start to seal */
@keyframes heroline{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:heroline .34s var(--ease) backwards}
.hero-copy>*:nth-child(2){animation-delay:.06s}
.hero-copy>*:nth-child(3){animation-delay:.12s}
.hero-copy>*:nth-child(4){animation-delay:.18s}
.hero-copy>*:nth-child(5){animation-delay:.24s}
/* the photo box shrink-wraps the wordmark so the seal's offsets are measured
against the logo itself, not the column */
.hero-photo{position:relative;width:fit-content;max-width:100%;margin:6px auto 24px;
animation:heroline .42s var(--press) .2s backwards}
/* the client's wordmark where the portrait was, on a warm halo */
.hero-logo{display:block;width:min(320px,74vw);height:auto;margin:0 auto;
filter:drop-shadow(0 12px 32px rgba(0,0,0,.5)),
drop-shadow(0 6px 26px rgba(255,120,140,.16))}
/* the seal stamps the corner WITHOUT touching the letters: the wordmark's
ink stops at 72% of the logo's height, so the seal rides low — its top
edge sits below the baseline by (logo width × .064 − 12px), ≥3px clear
from 320px phones to the wide desktop column */
.hero-seal{position:absolute;right:-12px;bottom:-40px;width:52px;height:52px;
border-radius:50%;display:grid;place-items:center;cursor:default;
background:var(--grad-gold);color:var(--gold-ink);
box-shadow:0 8px 22px -6px rgba(250,189,118,.55),inset 0 0 0 2px rgba(36,23,8,.25);
transform:rotate(-10deg);animation:stampin .45s var(--press) both .5s}
.hero-seal svg{width:15px;height:25px}
.hero .lede{margin:0 auto 26px}
.cta-row{display:flex;align-items:center;justify-content:center;gap:12px;
flex-wrap:wrap;margin:0 0 14px}
.cta-row .btn{padding:14px 24px}
.minring{position:relative;width:58px;height:58px;flex-shrink:0;margin-left:6px}
.minring svg{position:absolute;inset:0;width:100%;height:100%}
/* the minutes ring draws itself in once, just after the CTAs land */
.minring svg circle:nth-child(2){animation:ringdraw .5s var(--ease) .3s backwards}
@keyframes ringdraw{from{stroke-dashoffset:118}}
.minring b{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;line-height:1;
font-family:var(--display);font-weight:500;font-size:1.16rem;color:var(--gold-bright)}
.minring b small{font-family:var(--ui);font-size:.52rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--faint);margin-top:3px}
.cta .hint{margin:0 auto;max-width:44ch}
.hsec{margin:52px 0 0;text-align:left}
.hsec-head{margin:0 0 20px}
.hsec-head .eyebrow{margin-bottom:10px}
.hsec-head p{color:var(--dim);margin:0;max-width:64ch;font-size:.98rem}
.benefits{display:grid;gap:14px}
.bcard{background:linear-gradient(180deg,rgba(255,240,230,.05),rgba(255,255,255,.02));
border:1px solid var(--cardline);border-radius:var(--r-l);padding:22px;
box-shadow:0 16px 36px -26px rgba(0,0,0,.6);
transition:transform .18s var(--press),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.bcard:hover{transform:translateY(-3px);border-color:var(--line-rose);
box-shadow:0 16px 40px -20px rgba(0,0,0,.6)}
.bic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
background:rgba(250,189,118,.12);border:1px solid rgba(250,189,118,.22);
color:var(--gold);margin-bottom:14px}
.bic svg{width:20px;height:20px}
.bcard b{display:block;font-weight:600;font-size:1.02rem;margin-bottom:4px}
.bcard span{font-size:.92rem;color:var(--dim)}
.wcards{display:grid;gap:14px}
.wcard{position:relative;background:linear-gradient(180deg,rgba(255,240,230,.05),rgba(255,255,255,.02));
border:1px solid var(--cardline);border-radius:var(--r-l);padding:24px;
display:flex;flex-direction:column;gap:10px;
box-shadow:0 16px 38px -26px rgba(0,0,0,.62);
transition:transform .18s var(--press),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.wcard:hover{transform:translateY(-3px);border-color:var(--line-rose);
box-shadow:0 20px 50px -22px rgba(0,0,0,.7)}
.wtag{position:absolute;top:18px;right:18px;font-size:.6rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-deep);font-weight:600;
padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill)}
.wcard h3{padding-right:112px;font-family:var(--display);font-weight:420;font-size:1.35rem;
letter-spacing:-.01em;margin:0}
.wcard p{margin:0;color:var(--dim);font-size:.92rem}
.wcard .wgraphic{margin-top:auto;padding-top:14px}
.mini-dots{display:flex;gap:5px;flex-wrap:wrap}
.mdot{width:13px;height:13px;border-radius:50%;border:1.5px dashed rgba(250,189,118,.35)}
.mdot.full{border:0;background:var(--grad-gold);
box-shadow:inset 0 0 0 1.5px rgba(36,23,8,.3)}
.mdot.ms{position:relative}
/* the shopfront mock, in full: a miniature of the shop's future homepage —
dark browser chrome carrying the URL hint, their logo mark on a green
nav bar, a neon-palm hero in their own words, three category tiles with
price-like dashes (never numbers), and the stamp strip that ties the
site to the loyalty programme. Every measure is an em off one base
font-size on .mini-site, and that base rides the card's width through a
container query (flat 10px where they're unsupported) — the mock scales
with the card and nothing inside it can overflow. */
.mini-site{border:1px solid rgba(255,255,255,.1);border-radius:1.3em;overflow:hidden;
background:#0B0914;line-height:1.25;font-size:10px;
box-shadow:0 16px 36px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04)}
.mini-site .msite-chrome{display:flex;align-items:center;gap:.8em;
padding:.48em .95em;background:#161226;
border-bottom:1px solid rgba(255,255,255,.05)}
.mini-site .msite-dots{display:flex;gap:.38em;flex-shrink:0}
.mini-site .msite-dots i{width:.52em;height:.52em;border-radius:50%;
background:rgba(255,255,255,.16)}
.mini-site .msite-url{flex:1;display:flex;align-items:center;justify-content:center;
gap:.55em;min-width:0;height:1.6em;padding:0 .9em;border-radius:99px;
background:rgba(255,255,255,.055);font-size:.78em;letter-spacing:.045em;
color:rgba(255,255,255,.48);white-space:nowrap}
.mini-site .msite-lock{position:relative;flex-shrink:0;width:.78em;height:.6em;
border-radius:.15em;background:rgba(127,214,164,.72)}
.mini-site .msite-lock::before{content:"";position:absolute;left:50%;top:-.32em;
transform:translateX(-50%);width:.46em;height:.42em;
border:.13em solid rgba(127,214,164,.72);border-bottom:0;
border-radius:.3em .3em 0 0}
.mini-site .msite-nav{display:flex;align-items:center;justify-content:space-between;
gap:1em;padding:.5em 1em;
background:linear-gradient(180deg,#123B28,#0D2C1F);
border-bottom:1px solid rgba(250,189,118,.12)}
.mini-site .msite-lockup{display:flex;align-items:center;gap:.55em;min-width:0}
.mini-site .msite-mark{width:1.6em;height:1.9em;flex-shrink:0}
.mini-site .msite-name{font-family:var(--display);font-weight:500;font-size:1em;
color:#F3EDE4;letter-spacing:.015em;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.mini-site .msite-burger{display:flex;flex-direction:column;gap:.26em;
flex-shrink:0;padding:.15em 0}
.mini-site .msite-burger i{width:1.1em;height:.13em;border-radius:1em;
background:rgba(243,237,228,.72)}
.mini-site .msite-hero{position:relative;overflow:hidden;padding:1.05em 1.1em 1em;
background:
radial-gradient(85% 130% at 88% -12%, rgba(250,189,118,.3), transparent 62%),
radial-gradient(75% 110% at 4% 112%, rgba(255,75,125,.15), transparent 64%),
linear-gradient(160deg,#13432C 0%,#0C2B1E 58%,#0E3223 100%)}
.mini-site .msite-palm{position:absolute;top:-.9em;right:-1.1em;
width:6.6em;height:7.85em;opacity:.2;pointer-events:none;
filter:drop-shadow(0 0 .9em rgba(250,189,118,.5))}
.mini-site .msite-h{position:relative;display:block;margin:0 0 .55em;
font-family:var(--display);font-weight:450;font-size:1.4em;line-height:1.14;
letter-spacing:.005em;color:#F6F1E7}
.mini-site .msite-h em{font-style:italic;color:var(--gold)}
.mini-site .msite-cta{position:relative;display:inline-flex;align-items:center;
padding:.46em 1.1em;border-radius:99px;font-size:.88em;font-weight:600;
letter-spacing:.01em;color:var(--oasis-ink);white-space:nowrap;
background:var(--grad-oasis);
box-shadow:0 .4em 1em -.35em rgba(255,75,125,.65)}
.mini-site .msite-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;
padding:.75em 1em .85em}
.mini-site .msite-prod{display:flex;flex-direction:column;gap:.3em;min-width:0;
padding:.5em .55em .55em;border-radius:.9em;
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
transition:transform .18s var(--press),border-color .18s var(--ease)}
.mini-site .msite-prod:hover{transform:translateY(-.18em);
border-color:rgba(250,189,118,.35)}
.mini-site .msite-img{position:relative;display:block;height:2.4em;
border-radius:.65em;overflow:hidden;
background:linear-gradient(150deg,rgba(250,189,118,.28),rgba(246,155,114,.07) 72%)}
.mini-site .msite-img::after{content:"";position:absolute;left:50%;top:50%;
width:2em;height:2em;border-radius:50%;transform:translate(-50%,-50%);
background:radial-gradient(circle at 36% 30%, rgba(255,220,166,.42), transparent 70%)}
.mini-site .msite-prod:nth-child(2) .msite-img{
background:linear-gradient(150deg,rgba(127,214,164,.24),rgba(127,214,164,.05) 72%)}
.mini-site .msite-prod:nth-child(2) .msite-img::after{
background:radial-gradient(circle at 36% 30%, rgba(127,214,164,.4), transparent 70%)}
.mini-site .msite-prod:nth-child(3) .msite-img{
background:linear-gradient(150deg,rgba(255,75,125,.24),rgba(255,75,125,.05) 72%)}
.mini-site .msite-prod:nth-child(3) .msite-img::after{
background:radial-gradient(circle at 36% 30%, rgba(255,75,125,.38), transparent 70%)}
.mini-site .msite-pt{display:block;font-size:.88em;font-weight:600;color:#F3EDE4;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-site .msite-pp{display:block;font-size:.72em;letter-spacing:.08em;
color:rgba(243,237,228,.42)}
.mini-site .msite-club{display:flex;align-items:center;gap:.75em;
padding:.58em 1em;border-top:1px solid rgba(250,189,118,.14);
background:linear-gradient(90deg,rgba(250,189,118,.09),rgba(255,75,125,.05))}
.mini-site .msite-stamps{display:flex;gap:.4em;flex-shrink:0}
.mini-site .msite-stamps i{width:.75em;height:.75em;border-radius:50%;
border:1px solid rgba(250,189,118,.5)}
.mini-site .msite-stamps i.on{border-color:transparent;background:var(--grad-gold);
box-shadow:inset 0 0 0 1px rgba(36,23,8,.35)}
.mini-site .msite-club b{min-width:0;font-weight:500;font-size:.82em;
color:rgba(243,237,228,.85);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
@supports (container-type:inline-size){
.wcard .wgraphic{container-type:inline-size}
.mini-site{font-size:3.85cqw}
}
.mini-next{display:flex;gap:7px;align-items:flex-end}
.mini-next i{border-radius:50%;border:1.5px dashed rgba(250,189,118,.35);display:block}
.mini-next i:nth-child(1){width:10px;height:10px}
.mini-next i:nth-child(2){width:14px;height:14px;border-style:solid;
border-color:rgba(246,155,114,.55)}
.mini-next i:nth-child(3){width:19px;height:19px;background:var(--grad-gold);border:0;
box-shadow:0 4px 12px -2px rgba(250,189,118,.5)}
/* the three "How I work" tiles: one card skin at every width, so the tiles
read equal — mobile keeps the number beside the copy, desktop stacks it */
.how{display:grid;gap:14px}
.hstep{display:flex;gap:16px;align-items:flex-start;padding:18px;
border:1px solid var(--cardline);border-radius:var(--r-l);
background:linear-gradient(180deg,rgba(255,240,230,.045),rgba(255,255,255,.015));
box-shadow:0 16px 36px -26px rgba(0,0,0,.6)}
.hstep>div{flex:1;min-width:0}
.hnum{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;
place-items:center;font-family:var(--display);font-size:.95rem;color:var(--gold);
border:1px solid var(--line-strong);
background:radial-gradient(circle at 34% 30%, rgba(250,189,118,.14), transparent 70%)}
.hstep b{display:block;font-weight:600;font-size:1.02rem;margin-bottom:3px}
.hstep span{font-size:.92rem;color:var(--dim)}
.contact{position:relative;overflow:hidden;margin:52px 0 0;display:flex;gap:18px;
align-items:center;flex-wrap:wrap;justify-content:space-between;
border:1px solid var(--line-strong);border-radius:var(--r-l);padding:22px 24px;
background:radial-gradient(120% 160% at 12% 0%, rgba(255,75,125,.09), rgba(250,189,118,.07) 42%, rgba(255,255,255,.02) 68%)}
/* the palm, resting in the corner of the card — printed in, not floating on
(.contact-scoped so the hero-frond rules, including the desktop override,
can never reach it) */
.contact .frond.f-quiet{position:absolute;top:auto;left:auto;right:14px;bottom:-34px;
width:130px;height:auto;color:var(--gold);opacity:.1;pointer-events:none;
transform:rotate(9deg);animation:none;filter:none}
/* the card's own content is positioned too, so it paints above the frond */
.contact .c-left,.contact .btn{position:relative}
.contact .c-left{display:flex;gap:16px;align-items:center}
.contact .c-left b{display:block;font-size:1.02rem}
.contact .c-left span{font-size:.84rem;color:var(--dim)}
.contact .btn{padding:13px 22px;font-size:.9rem}
/* ---------- preview tab */
.preview{padding:44px 0 30px;text-align:center;position:relative}
.preview .lede{margin:0 auto 36px}
.duo{display:grid;gap:44px;margin-bottom:8px}
.mlabel{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
color:#F0708F;font-weight:600;margin:0 0 16px;
background:var(--grad-oasis);-webkit-background-clip:text;background-clip:text}
.frame{width:280px;margin:0 auto;border-radius:40px;padding:10px;
border:1px solid var(--line-strong);background:var(--bg1);
box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 1px rgba(250,189,118,.06)}
.screen{position:relative;border-radius:31px;background:#0B0914;
padding:32px 16px 20px}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);
width:74px;height:15px;border-radius:var(--r-pill);background:#060509;
border:1px solid rgba(255,255,255,.05)}
.cc-brand{display:flex;align-items:center;justify-content:center;gap:8px;
font-size:.6rem;letter-spacing:.32em;font-weight:600;color:var(--gold-deep)}
.cc-brand svg{width:12px;height:20px;color:var(--gold);opacity:.9}
.cc-title{font-family:var(--display);font-weight:400;font-size:1.3rem;
margin:10px 0 2px}
.cc-sub{font-size:.72rem;color:var(--faint);margin:0 0 16px}
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 6px;
justify-items:center;margin-bottom:6px}
.slot{display:flex;flex-direction:column;align-items:center;gap:5px}
.cstamp{width:38px;height:38px;border-radius:50%;
display:grid;place-items:center;border:1.5px dashed rgba(250,189,118,.3)}
.cstamp.full{border:1.5px solid var(--gold-deep);
background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-fill) 70%);
color:var(--gold-ink);
box-shadow:inset 0 0 0 2px rgba(11,9,20,.4),0 5px 14px -5px rgba(250,189,118,.45);
animation:stampin .45s var(--press) both}
.slot:nth-child(2) .cstamp.full{animation-delay:.08s}
.slot:nth-child(3) .cstamp.full{animation-delay:.16s}
.cstamp svg{width:14px;height:14px}
.slot small{font-size:.56rem;letter-spacing:.06em;color:var(--faint)}
.slot.milestone small{color:var(--gold-deep);font-weight:600}
.slot.next .cstamp{border-color:rgba(246,155,114,.65);
animation:breathe 2.4s ease-in-out infinite}
.cstatus{font-size:.8rem;color:var(--dim);margin:12px 0 0}
.cchip{display:flex;align-items:center;gap:6px;width:max-content;
margin:12px auto 0;padding:6px 13px;border-radius:var(--r-pill);
border:1px solid var(--line-strong);color:var(--gold);
background:rgba(250,189,118,.07);font-size:.72rem;font-weight:600}
.cchip svg{width:11px;height:11px}
.cap{margin:16px auto 0;max-width:36ch;font-size:.84rem;color:var(--dim)}
.till{max-width:280px;margin:0 auto;background:#0B0914;
border:1px solid var(--line);border-radius:28px;padding:22px 18px 18px}
.till-label{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
color:var(--faint);font-weight:600;margin:0 0 12px;text-align:center}
.till-field{display:flex;align-items:center;gap:2px;
background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;
padding:14px 15px;font-size:1.02rem;font-variant-numeric:tabular-nums}
.caret{width:2px;height:18px;background:var(--gold);
animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.till .btn{width:100%;margin-top:12px;padding:13px 20px}
.till-ok{display:flex;align-items:center;gap:8px;margin-top:14px;
padding-top:12px;border-top:1px dashed rgba(255,255,255,.08);
color:var(--mint);font-size:.8rem}
.till-ok svg{width:13px;height:13px;flex-shrink:0}
.till-cap{display:block;margin-top:3px;color:var(--faint);font-size:.72rem}
.democard{max-width:640px;margin:44px auto 0;text-align:left;
border:1px solid var(--line-strong);border-radius:var(--r-l);padding:24px;
display:flex;gap:20px;align-items:center;flex-wrap:wrap;
justify-content:space-between;
background:radial-gradient(120% 170% at 85% 0%, rgba(246,155,114,.12), rgba(255,255,255,.02) 55%);
box-shadow:var(--glow-soft)}
.democard .dc-main{flex:1;min-width:230px}
.democard .dc-main .mlabel{margin-bottom:10px}
.democard h3{font-family:var(--display);font-weight:420;font-size:1.45rem;
letter-spacing:-.01em;margin:0 0 6px}
.democard p{margin:0;color:var(--dim);font-size:.92rem}
.democard .btn{padding:14px 24px}
.sampler{max-width:560px;margin:44px auto 0}
.minisite{border:1px solid var(--line-strong);border-radius:var(--r-m);overflow:hidden;
background:#0B0914;box-shadow:var(--glow-soft);position:relative;text-align:left}
.minisite .sampletag{position:absolute;top:12px;right:12px;z-index:2;
font-size:.58rem;letter-spacing:.22em;font-weight:700;text-transform:uppercase;
color:var(--gold-ink);background:var(--grad-gold);padding:4px 10px;
border-radius:var(--r-pill);transform:rotate(6deg)}
.minisite .ms-bar{display:flex;gap:5px;padding:11px 14px;
border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.minisite .ms-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.ms-hero{padding:30px 20px 24px;text-align:center;
background:linear-gradient(155deg,#16492F 0%,#0B241B 58%,#0E2F23 100%)}
.ms-hero .ms-frond{width:17px;height:29px;color:var(--gold);margin:0 auto 8px;display:block}
.ms-hero h5{font-family:var(--display);font-weight:450;font-size:1.25rem;
color:#F3EDE4;margin:0 0 5px;letter-spacing:.01em}
.ms-hero p{font-size:.72rem;color:rgba(243,237,228,.65);margin:0 0 14px}
.ms-hero .ms-btn{display:inline-block;padding:7px 18px;border-radius:var(--r-pill);
background:linear-gradient(115deg,#FABD76,#F69B72);color:#241708;
font-size:.72rem;font-weight:600}
.ms-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:16px 16px 6px}
.ms-prod{border-radius:11px;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.07);padding:11px 10px}
.ms-prod i{display:block;height:34px;border-radius:7px;margin-bottom:8px;
background:linear-gradient(150deg,rgba(250,189,118,.28),rgba(246,155,114,.12))}
.ms-prod b{display:block;font-size:.68rem;font-weight:600;color:#F3EDE4}
.ms-prod span{font-size:.62rem;color:rgba(243,237,228,.55)}
.ms-stores{display:flex;gap:7px;flex-wrap:wrap;padding:12px 16px 18px}
.ms-store{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
border-radius:var(--r-pill);border:1px solid rgba(250,189,118,.3);
color:#F3EDE4;font-size:.66rem}
.ms-store::before{content:"";width:5px;height:5px;border-radius:50%;
background:#C4453F}
.sampler .cap{max-width:none}
.pclose{margin:44px auto 0;max-width:46ch}
.pclose p{margin:0 0 20px;font-size:.96rem;color:var(--dim)}
.pclose p b{color:var(--ink);font-weight:600}
/* ---------- footer */
.foot{padding:44px 0 30px;color:var(--faint);font-size:.82rem;
text-align:center}
/* ---------- admin */
.adm{padding-top:38px}
.adm h1{font-family:var(--display);font-weight:380;
font-size:clamp(1.7rem,5.6vw,2.3rem);letter-spacing:-.01em;margin:0 0 4px}
.page-sub{color:var(--dim);font-size:.94rem;margin:0 0 26px}
.gate{max-width:400px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-l);padding:26px 24px}
.gate h2{font-family:var(--display);font-weight:400;font-size:1.35rem;
margin:0 0 4px}
.gate p{color:var(--dim);font-size:.9rem;margin:0 0 18px}
.gate .btn{width:100%;margin-top:14px}
.gerr{display:none;margin:12px 0 0;padding:10px 13px;border-radius:var(--r-s);
background:rgba(255,75,125,.08);border:1px solid rgba(255,75,125,.45);
color:#FF8FAF;font-size:.86rem}
.gerr.show{display:block}
.subcard{display:flex;gap:16px;align-items:center;width:100%;text-align:left;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
border:1px solid var(--cardline);border-radius:18px;
padding:17px 18px;margin-bottom:12px;cursor:pointer;
transition:border-color .18s var(--ease),transform .18s var(--press);font-family:var(--ui)}
.subcard:hover{border-color:rgba(250,189,118,.4);transform:translateY(-3px)}
.submain{flex:1;min-width:0}
.submain b{display:block;font-size:1rem;font-weight:600}
.submain span{font-size:.78rem;color:var(--faint)}
.pctbox{flex-shrink:0;text-align:right}
.pct{font-family:var(--display);font-size:1.45rem;color:var(--gold);
line-height:1;display:block}
.pct small{font-size:.7rem;color:var(--faint);font-family:var(--ui)}
.minibar{width:84px;height:4px;border-radius:4px;background:rgba(255,255,255,.09);
margin-top:7px;overflow:hidden}
.minibar i{display:block;height:100%;background:var(--grad-sun)}
.empty{border:1.5px dashed var(--line);border-radius:var(--r-l);
text-align:center;padding:54px 24px;color:var(--faint)}
.empty svg{width:44px;height:70px;margin:0 auto 14px;display:block;
color:var(--gold);opacity:.45}
.empty h3{font-family:var(--display);font-style:italic;font-weight:400;
font-size:1.3rem;color:var(--dim);margin:0 0 6px;letter-spacing:0;
text-transform:none}
.empty p{margin:0;font-size:.9rem}
.backlink{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
color:var(--gold-deep);font-size:.86rem;cursor:pointer;padding:6px 0;
margin:24px 0 4px}
.backlink:hover{color:var(--gold)}
.meta{font-size:.78rem;color:var(--faint);margin:0 0 22px}
.meta b{color:var(--dim);font-weight:500}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.sec{margin-bottom:26px}
.sec > h3{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold-deep);margin:0 0 6px;font-weight:600;
padding-bottom:8px;border-bottom:1px solid var(--line)}
.row{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.sec .row:last-child{border-bottom:0}
.qt{color:var(--faint);font-size:.8rem;margin:0 0 3px}
.an{font-size:.98rem;margin:0}
.an.blank{color:var(--faint);font-style:italic;font-weight:300}
.vrow{display:flex;align-items:center;gap:12px;margin-top:9px;
background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:12px;
padding:10px 12px}
.rawjson{display:none;margin:0 0 26px;padding:16px;border-radius:var(--r-m);
background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--dim);
font-size:.74rem;line-height:1.5;overflow:auto;white-space:pre-wrap}
.rawjson.show{display:block}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(16px);
background:var(--bg1);border:1px solid var(--line-strong);color:var(--ink);
border-radius:var(--r-pill);padding:11px 20px;font-size:.88rem;opacity:0;
pointer-events:none;transition:opacity .2s var(--ease),transform .24s var(--press);z-index:80}
.toast.show{opacity:1;transform:translateX(-50%)}
/* ---------- desktop: a real top nav, a wide stage, no stretched phone */
@media (min-width:760px){
body{padding-bottom:0}
.tabs{position:static;display:flex;gap:4px;background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);border-radius:var(--r-pill);
backdrop-filter:none;-webkit-backdrop-filter:none;padding:4px;
box-shadow:none}
.tab{flex-direction:row;gap:0;padding:8px 20px;font-size:.8rem;
letter-spacing:.06em;border-radius:var(--r-pill);color:var(--dim)}
.tab:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.tab svg,.tab[aria-selected=true] .tab-palm{display:none}
.tab[aria-selected=true]{background:var(--grad-oasis);color:var(--oasis-ink);
box-shadow:0 6px 18px -6px rgba(255,75,125,.55)}
.tab[aria-selected=true]::after{display:none}
.wrap{padding:0 28px}
.scaffold{margin:0 auto;max-width:var(--qmax);top:12px;border-radius:18px;
border:1px solid rgba(255,255,255,.09);padding:0 20px;
background:rgba(19,15,32,.85);box-shadow:var(--glow-soft)}
.stamp{width:40px;height:40px;font-size:.86rem}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* home: hero as a two-column stage */
.home{padding:56px 0 30px;text-align:left}
.home .frond{width:360px;right:-28px;top:-18px;opacity:.38}
.home::before{left:auto;right:-80px;top:-90px;width:900px;height:620px;
transform:none}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;
align-items:center;max-width:980px;margin:0 auto}
.hero-photo{justify-self:center;margin:0}
.hero-logo{width:300px;max-width:100%}
.hero-seal{width:60px;height:60px;right:-14px;bottom:-48px}
.hero-seal svg{width:18px;height:30px}
.hero .lede{margin:0 0 28px}
.cta-row{justify-content:flex-start;margin:0 0 16px}
.cta-row .btn{padding:16px 30px}
.cta .hint{margin:0}
.hsec{margin:72px 0 0}
.benefits{grid-template-columns:1fr 1fr;gap:16px}
.wcards{grid-template-columns:repeat(3,1fr);gap:16px}
.how{grid-template-columns:repeat(3,1fr);gap:16px}
.hstep{flex-direction:column;gap:12px;padding:24px 22px;
transition:transform .18s var(--press),border-color .18s var(--ease)}
.hstep:hover{transform:translateY(-3px);border-color:var(--line-rose)}
.duo{grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.preview .lede{margin:0 auto 44px}
}
@media (max-width:759px){
.contact{flex-direction:column;text-align:center;align-items:center}
.contact .c-left{flex-direction:column;text-align:center}
}
/* three work cards only once they can breathe — at 760–959px the h3 was
squeezed to a column beside the tag; two up until there's room for three */
@media (min-width:760px) and (max-width:959px){
.wcards{grid-template-columns:1fr 1fr}
.wcard h3{padding-right:96px}
}
/* ---------- reduced motion: everything holds still */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}
/* ---- preview: run-down replaces the external demo link ---- */
.rundown{max-width:760px;margin:44px auto 0;text-align:left;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
border:1px solid var(--cardline);border-radius:var(--r-l);padding:26px 24px}
.rundown h3{font-family:var(--display);font-weight:420;font-size:1.45rem;margin:0 0 18px}
.steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:14px}
.steps li{counter-increment:st;position:relative;padding-left:45px}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:31px;height:31px;
border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:.92rem;
color:#2a1a08;background:linear-gradient(135deg,var(--gold),var(--coral));
box-shadow:0 0 16px rgba(250,189,118,.3)}
.steps b{display:block;font-weight:600;margin-bottom:2px}
.steps span{color:var(--dim);font-size:.94rem;line-height:1.5}
.snaps{display:grid;gap:14px;margin-top:24px;grid-template-columns:minmax(0,300px);justify-content:center}
.snaps figure{margin:0}
.snaps img{display:block;width:100%;border-radius:14px;border:1px solid var(--line);
background:rgba(0,0,0,.3)}
.snaps figcaption{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--gold-deep);margin-top:8px;text-align:center}
.snapnote{color:var(--dim);font-size:.88rem;margin:16px 0 0;text-align:center}
@media (max-width:560px){.snaps{grid-template-columns:1fr}}
/* ---------- welcome: the name field (hidden once the link or a past visit gave one) */
.namebox{max-width:400px;margin:0 auto 16px;text-align:left}
.namebox label{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--gold);font-weight:600;margin:0 0 8px}
.namebox.hide,#startbtn.hide{display:none}
#startbtn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none}
/* the tiny wordmark beside Reece's name has no room on a phone */
@media (max-width:480px){.wm-s{display:none}}