/* A · Charm — a rounded sky stage on a white canvas (night sky in dark mode). */
body.page--a{background:var(--canvas);transition:background-color .5s,color .5s}
.page--a .frame{padding:calc(var(--gutter) + (100svh - var(--gutter)*2)*.025) calc(var(--gutter) + (100vw - var(--gutter)*2)*.025)}
.sky-bg,.sky-wash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sky-bg{z-index:-2;object-fit:cover;object-position:center}
.sky-wash{z-index:-1}
.sky-wash::before,.sky-wash::after{content:"";position:absolute;inset:0;transition:opacity .9s var(--ease)}
.sky-wash::before{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.27))}
/* dark mode: the Higgsfield night clip (the same clouds, re-lit) crossfades in over the day sky;
   a faint scrim behind the copy keeps the grey text readable over moonlit clouds */
.sky-wash::after{opacity:0;background:radial-gradient(60% 42% at 50% 66%,rgba(7,9,22,.42),transparent)}
.sky-bg--night{opacity:0;transition:opacity .9s var(--ease)}
:root[data-theme=dark] .sky-bg--night,:root[data-theme=dark] .sky-wash::after{opacity:1}
:root[data-theme=dark] .sky-wash::before{opacity:0}
:root[data-theme=dark] .hero--a{background-color:#0A1226;background-image:url("shared/img/sky-night-poster.webp")}

/* nav: theme toggle in its own circle, left of "Explore Buddy Brewer" */
.nav__theme{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--hover);color:var(--ink);cursor:pointer;transition:background .2s}
.nav__theme svg{position:absolute;width:19px;height:19px;transition:transform .5s var(--ease),opacity .3s}
.nav__sun,:root[data-theme=dark] .nav__moon{opacity:0;transform:rotate(-90deg) scale(.4)}
:root[data-theme=dark] .nav__sun{opacity:1;transform:none}
.nav__theme:hover svg{transform:rotate(-14deg)}
.nav,.nav__brand,.nav__theme,.nav__link{transition:background-color .5s,color .5s,box-shadow .5s}
.page--a .nav__link{white-space:nowrap}
/* phones: logo, toggle and link share one pill */
@media (max-width:899px){
  .page--a .nav{gap:8px;padding:6px 6px 6px 14px}
  .page--a .nav__right{gap:4px}
  .page--a .nav__logo{height:30px}
  .page--a .nav__link{padding:10px 12px}
}
@media (max-width:419px){
  .page--a .nav__logo{height:28px}
  .page--a .nav__theme{width:36px;height:36px}
  .page--a .nav__link{padding:9px 10px;font-size:13px}
  .page--a .nav__link svg{display:none}
}
@media (max-width:349px){   /* "Explore" only; the full name stays for screen readers */
  .page--a .nav__more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:900px){
  .page--a .nav__right{gap:10px;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .page--a .nav__theme,.page--a .nav__link{height:60px;background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--glass-edge) inset,0 8px 30px var(--glass-shadow)}
  .page--a .nav__theme{width:60px}
  .page--a .nav__theme svg{width:21px;height:21px}
  .page--a .nav__link{padding:0 24px;font-size:15px}
  .page--a .nav__theme:hover,.page--a .nav__link:hover{background:var(--surface)}
}
.hero--a{
  min-height:calc((100svh - var(--gutter)*2)*.95);
  background:#dfeffb url("shared/img/sky-loop-poster.webp") center/cover;
}
.charm{position:relative;z-index:1;width:min(76vw,38svh,430px);margin-top:clamp(18px,4svh,32px);transform-origin:50% 0;animation:sway 7s ease-in-out infinite}
.charm{--charm-shadow:rgba(7,16,29,.18)}
:root[data-theme=dark] .charm{--charm-shadow:rgba(0,0,0,.45)}
.charm__img{width:100%;height:auto;filter:drop-shadow(0 26px 22px var(--charm-shadow));transition:opacity .5s}
/* Real-time 3D charm (shared/charm3d.js) replaces the poster once its first frame is drawn. */
.charm__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .5s;filter:drop-shadow(0 26px 22px var(--charm-shadow))}
.charm.is-3d{animation:none}
.charm.is-3d .charm__canvas{opacity:1}
.charm.is-3d .charm__img{opacity:0}
/* still lit by the night rig in dark mode (lazy, so light mode never fetches it) */
.charm__img--night{position:absolute;inset:0;display:none}
:root[data-theme=dark] .charm__img--night{display:block}
:root[data-theme=dark] .charm__img:not(.charm__img--night){visibility:hidden}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.5svh,14px);width:100%;padding:0 18px clamp(12px,2svh,18px);margin-top:-4px}
.hero--a .h1{font-size:clamp(49px,min(16.35vw,7.52svh),98px)}
.charm{transition:width .6s var(--out),margin .6s var(--out)}
.copy .h1{margin-top:4px}
.copy .sub{margin-bottom:6px;max-width:24em}
@media (min-width:720px){
  .charm{width:min(clamp(380px,32vw,540px),46svh);margin-top:0}
  .hero--a .h1{font-size:clamp(72px,min(8.4vw,13svh),132px)}
  .copy{gap:clamp(12px,2svh,18px);padding-bottom:clamp(18px,3svh,30px)}
  .copy .sub{max-width:30em}
}
@media (min-width:900px){.charm{margin-top:-8px}}

/* Keep the composition intact on short portrait screens while it scales down. */
@media (max-width:719px) and (max-height:700px){
  .hero--a .charm{width:min(68vw,34svh);margin-top:3svh}
  .hero--a .copy{gap:8px;padding-bottom:10px}
  .hero--a .h1{font-size:clamp(46px,min(15vw,8svh),58px)}
  .hero--a .copy .sub{font-size:14px;line-height:1.35}
}

@media (max-width:719px) and (max-height:600px){
  .hero--a .charm{width:min(62vw,29svh);margin-top:2svh}
  .hero--a .copy{gap:6px;padding-bottom:8px}
  .hero--a .h1{font-size:clamp(40px,min(14vw,7.4svh),50px)}
  .hero--a .copy .sub{font-size:13px;line-height:1.25}
}

/* In landscape, use the available width instead of stacking below the charm. */
@media (min-width:560px) and (max-height:620px) and (orientation:landscape){
  .hero--a{flex-direction:row;justify-content:flex-end}
  .hero--a .charm{position:absolute;left:4%;top:50%;width:min(28vw,48svh);margin:0;transform:translateY(-50%);animation:none}
  .hero--a .copy{width:68%;padding:68px 28px 14px;gap:10px}
  .hero--a .h1{font-size:clamp(40px,min(5vw,12svh),68px)}
  .hero--a .h1 .br{display:inline}
  .hero--a .copy .sub{font-size:15px;line-height:1.35}
}

@media (min-width:560px) and (max-height:420px) and (orientation:landscape){
  .hero--a .copy{padding:76px 20px 10px;gap:7px}
  .hero--a .h1{font-size:clamp(32px,5vw,42px)}
  .hero--a .copy .sub{font-size:13px;line-height:1.35;margin-bottom:2px}
}

/* ==========================================================================
   Waitlist flow: start → email → invite → survey → complete (all simulated).
   Nightly Buddy purple is the accent; ink buttons turn purple on hover.
   ========================================================================== */
:root{
  --accent:#612BB2; --on-accent:#fff; --accent-soft:#F2ECFB; --accent-glow:rgba(97,43,178,.45);
  --card:rgba(255,255,255,.84);
  --card-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 32px 80px -24px rgba(16,34,74,.4),0 12px 28px -14px rgba(16,34,74,.22);
  --opt:#fff; --opt-line:rgba(7,16,29,.11); --opt-line-strong:rgba(7,16,29,.28); --tile:rgba(7,16,29,.05);
  --btn-shadow:0 10px 24px -12px rgba(7,16,29,.55);
  --night:#1C1438;
  --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.22,1,.36,1);
}
:root[data-theme=dark]{
  --accent:#A98BF0; --on-accent:#150B2A; --accent-soft:rgba(169,139,240,.15); --accent-glow:rgba(169,139,240,.35);
  --card:rgba(18,20,25,.8);
  --card-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 32px 80px -24px rgba(0,0,0,.75);
  --opt:rgba(255,255,255,.035); --opt-line:rgba(255,255,255,.11); --opt-line-strong:rgba(255,255,255,.26); --tile:rgba(255,255,255,.07);
  --btn-shadow:0 10px 24px -12px rgba(0,0,0,.8);
  --night:#271C4F;
}
.page--a [hidden]{display:none!important}
.page--a :focus-visible{outline-color:var(--accent)}
.hero--a kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--tile);box-shadow:inset 0 -1px 0 var(--opt-line);color:var(--muted);font:600 11px/1 var(--body)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);box-shadow:var(--btn-shadow);font:600 16px/1 var(--body);letter-spacing:-.006em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s var(--out),color .25s var(--out),box-shadow .25s var(--out),transform .2s var(--out)}
.btn svg{flex:none;width:16px;height:16px;margin-right:-4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--spring)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent);color:var(--on-accent);box-shadow:0 14px 30px -12px var(--accent-glow)}
  .btn:hover svg:not(.glyph-can){transform:translateX(3px)}
}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 14px/1 var(--body);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s}
.btn-ghost:hover{background:var(--hover);color:var(--ink)}
.btn-ghost svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- layout per state ---------- */
.flow-actions{display:flex;flex-direction:column;align-items:center;width:min(300px,100%);margin:4px auto 0;transition:width .45s var(--out)}
.hero--a[data-flow-state=email] .flow-actions{width:min(520px,100%)}
.hero--a[data-flow-state=invite] .flow-actions{width:min(400px,100%)}
.hero--a[data-flow-state=complete] .flow-actions{width:min(520px,100%)}
.flow-start,.flow-complete,.invite{outline:0}
.hero--a .h1.is-new{animation:h1-in .7s var(--out)}
.hero--a .sub.is-new{animation:fade-up .6s .08s var(--out) backwards}
.hero--a .sub b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.hero--a[data-flow-state=invite] .charm{width:min(300px,30svh)}
.hero--a[data-flow-state=invite] .h1{font-size:clamp(64px,min(6.4vw,10svh),100px)}

/* ---------- start button: a can glyph whose tab lifts and fizzes on hover ---------- */
.btn--start{width:100%;padding-left:22px}
.btn .glyph-can{width:26px;height:26px;margin:-2px -2px 0 -8px;overflow:visible;stroke-width:1.6}
.glyph-can .g-band{fill:currentColor;stroke:none}
.glyph-can .g-tab{transform-box:view-box;transform-origin:13.8px 6.4px;transition:transform .45s var(--spring)}
.glyph-can .g-bub{fill:currentColor;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
@media (hover:hover) and (pointer:fine){
  .btn--start:hover .g-tab{transform:rotate(-42deg)}
  .btn--start:hover .g-bub{animation:g-fizz 1.1s ease-out var(--d) infinite}
}

/* ---------- email ---------- */
.hero--a{overflow:clip}  /* same rounded clip as hidden, but lets the phone survey footer stick */
.hero--a .wl{display:flex;flex-direction:column;align-items:center}
.hero--a .wl__field{width:100%;gap:6px;padding:6px;border-radius:28px;animation:field-in .45s var(--out)}
.hero--a .wl__field:focus-within{box-shadow:0 0 0 2px var(--accent),0 0 0 6px var(--accent-soft),0 14px 40px var(--glass-shadow)}
.hero--a .wl--error .wl__field,.hero--a .wl--error .wl__field:focus-within{box-shadow:0 0 0 2px var(--error),0 14px 40px var(--glass-shadow)}
.hero--a .wl--shake .wl__field{animation:shake .42s var(--out)}
.hero--a .wl input[type=email]{height:52px;padding:0 18px;font-size:17px}
.hero--a .wl__field .btn{height:52px;border-radius:22px;box-shadow:none}
@media (min-width:600px){
  .hero--a .wl__field{border-radius:999px}
  .hero--a .wl input[type=email]{padding-left:22px}
  .hero--a .wl__field .btn{min-width:178px;border-radius:999px}
}
.hero--a .wl__msg{margin:12px 0 0;min-height:0;font-size:14px;line-height:1.35}
.hero--a .wl__msg:empty{display:none}
.hero--a .wl__msg:not(:empty){display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--surface);box-shadow:0 8px 22px -10px rgba(7,16,29,.35);text-align:left;animation:fade-up .3s var(--out)}
.hero--a .wl__msg:not(:empty)::before{content:"!";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--error);color:var(--surface);font:700 12px/1 var(--body)}

/* ---------- invite card (after joining) ---------- */
.invite{position:relative;width:100%;margin-top:8px}
.invite__card{position:relative;z-index:1;padding:8px;border-radius:26px;background:var(--surface);box-shadow:0 0 0 1px var(--opt-line),0 30px 70px -28px rgba(16,34,74,.5);text-align:left;animation:card-in .55s .1s var(--out) backwards}
.invite__top{position:relative;display:flex;align-items:center;gap:8px;padding:8px 6px 4px 18px;overflow:hidden;border-radius:18px;background:var(--night);color:#fff}
.invite__intro{flex:1;min-width:0}
.invite h2{margin:0;color:#fff;font:600 21px/1.22 var(--body);letter-spacing:-.02em;text-wrap:balance}
.invite__intro p{margin:6px 0 0;color:rgba(255,255,255,.66);font-size:14px;line-height:1.4}
.invite__list{display:grid;gap:11px;margin:0;padding:16px 14px 18px;list-style:none}
.invite__list li{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:14.5px;line-height:1.35}
.invite__list svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.invite__actions{display:grid;gap:2px}
.invite__actions .btn{width:100%}
/* Nightly can stage: nightcan3d.js turns and reshapes one container through the pack formats.
   The SVG can is the poster until the first 3D frame, and the fallback without WebGL2. */
.nightcan{position:relative;flex:none;width:116px;height:148px}
.nightcan__poster,.nightcan__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;transition:opacity .45s var(--out)}
.nightcan__canvas{opacity:0}
.nightcan.is-3d .nightcan__canvas{opacity:1}
.nightcan.is-3d .nightcan__poster{opacity:0}
.invite__moon{position:absolute;top:12px;right:14px;width:18px;height:18px}

/* ---------- complete ---------- */
.flow-complete{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:6px;animation:fade-up .5s .1s var(--out) backwards}
.btn-ghost--glass{height:56px;padding:0 24px;background:var(--glass);color:var(--ink);font-size:15px;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--glass-edge) inset,0 8px 30px var(--glass-shadow)}
.btn-ghost--glass:hover{background:var(--surface)}

/* ---------- survey card ---------- */
.hero--a[data-flow-state=survey] .charm{position:absolute;top:-8px;left:50%;width:min(228px,26svh);margin:0;transform:translateX(-50%);animation:none}
.survey{position:relative;z-index:5;display:flex;flex-direction:column;width:min(600px,calc(100% - 32px));margin:clamp(130px,20svh,180px) auto 24px;padding:18px 24px 20px;border-radius:28px;background:var(--card);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);box-shadow:var(--card-shadow);animation:card-in .5s var(--out)}
.survey.is-resizing{overflow:hidden;transition:height .36s var(--out)}
.survey__head{display:flex;align-items:center;gap:12px;min-height:36px}
.survey__count{color:var(--muted);font:500 14px/1 var(--body);font-variant-numeric:tabular-nums}
.survey__count b{color:var(--ink);font-weight:600}
.survey__close{display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0 -8px 0 auto;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;transition:background-color .2s,color .2s}
.survey__close:hover{background:var(--hover);color:var(--ink)}
.survey__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.survey__progress{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:12px 0 20px}
.survey__progress i{position:relative;height:4px;overflow:hidden;border-radius:2px;background:var(--opt-line)}
.survey__progress i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--out)}
.survey__progress i.is-done::after{transform:none}
.survey__body{min-width:0;margin:0;padding:0;border:0}
.survey__body.is-fwd{animation:q-fwd .45s var(--out)}
.survey__body.is-back{animation:q-back .45s var(--out)}
.survey__body legend{width:100%;padding:0;color:var(--ink);font:600 26px/1.18 var(--body);letter-spacing:-.022em;text-wrap:balance}
.survey__body legend:focus{outline:0}
#survey-description{max-width:52ch;margin:8px 0 18px;color:var(--muted);font-size:15px;line-height:1.5;text-wrap:pretty}
.survey__response--choices{display:grid;gap:7px}

/* answer rows: icon tile, label, key hint (desktop) or radio (touch) */
.choice{position:relative;display:flex;align-items:center;gap:14px;min-height:54px;padding:7px 14px 7px 8px;border-radius:16px;background:var(--opt);box-shadow:inset 0 0 0 1px var(--opt-line);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:box-shadow .2s,background-color .2s,transform .16s var(--out);animation:fade-up .4s var(--out) backwards;animation-delay:calc(var(--i)*40ms + 90ms)}
.choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choice:active{transform:scale(.985)}
.choice__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--tile);color:var(--ink);transition:background-color .25s,color .25s,transform .45s var(--spring)}
.choice__icon svg{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.choice__icon :is(.i-eye,.i-buddy,.i-float,.i-wave,.i-search,.i-shape){transform-box:fill-box;transform-origin:center;transition:transform .35s var(--spring)}
.choice__icon .i-draw{stroke-dasharray:1}
.choice__icon .i-wave{transform-origin:left center}
.choice__label{flex:1;color:var(--ink);font:500 16px/1.3 var(--body)}
.choice__mark{display:grid;place-items:center;flex:none;width:24px;height:24px}
.choice__key{display:none!important}
.choice__radio{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--opt-line-strong);transition:background-color .2s,box-shadow .2s}
.choice__radio svg{width:14px;height:14px;fill:none;stroke:var(--on-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s .06s var(--out)}
.choice:has(input:checked){background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.choice:has(input:checked) .choice__icon{background:var(--accent);color:var(--on-accent);transform:rotate(-6deg)}
.choice:has(input:checked) .choice__radio{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.choice:has(input:checked) .choice__radio svg{stroke-dashoffset:0}
.choice:has(input:checked) .i-draw{animation:draw .55s var(--out)}
.choice:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .choice:hover{box-shadow:inset 0 0 0 1px var(--opt-line-strong)}
  .choice:hover:not(:has(input:checked)) .choice__icon{transform:rotate(-4deg) scale(1.06)}
  .choice__key{display:inline-grid!important}
  .choice__radio{display:none}
  .choice:has(input:checked) .choice__key{display:none!important}
  .choice:has(input:checked) .choice__radio{display:grid}
  /* Hover brings each answer's little drawing to life. */
  .choice:hover .i-draw{animation:draw .6s var(--out)}
  .choice:hover .i-eye{animation:blink .45s .1s var(--out)}
  .choice:hover .i-buddy{transform:translate(1.5px,-1px) rotate(8deg)}
  .choice:hover .i-float{transform:translateY(-2.5px) scale(1.15);fill:currentColor}
  .choice:hover .i-wave{animation:wave .9s ease-in-out}
  .choice:hover .i-search{animation:orbit .8s var(--out)}
  .choice:hover .i-shape{animation:hop .5s var(--out)}
  .choice:hover .i-shape:nth-child(2){animation-delay:.07s}
  .choice:hover .i-shape:nth-child(3){animation-delay:.14s}
}

/* "Something else" opens a short field under it */
.choice-other{display:grid;grid-template-rows:0fr;margin-top:-7px;opacity:0;transition:grid-template-rows .32s var(--out),margin-top .32s var(--out),opacity .2s}
.choice-other.is-open{grid-template-rows:1fr;margin-top:0;opacity:1}
.choice-other__inner{min-height:0;overflow:hidden}
.choice-other__field{display:block;width:100%;height:50px;margin:0;padding:0 16px;border:0;border-radius:14px;background:var(--opt);box-shadow:inset 0 0 0 1px var(--opt-line);color:var(--ink);font:400 16px/1.4 var(--body);outline:0;transition:box-shadow .2s}
.choice-other__field::placeholder{color:var(--placeholder)}
.choice-other__field:focus{box-shadow:inset 0 0 0 2px var(--accent)}

/* open answers */
.answer{position:relative}
.answer textarea{display:block;width:100%;min-height:132px;max-height:280px;padding:16px 18px 30px;border:0;border-radius:16px;background:var(--opt);box-shadow:inset 0 0 0 1px var(--opt-line);color:var(--ink);font:400 16px/1.5 var(--body);resize:none;outline:0;animation:fade-up .4s .09s var(--out) backwards;transition:box-shadow .2s}
.answer textarea::placeholder{color:var(--placeholder)}
.answer textarea:focus{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-soft)}
.answer__count{position:absolute;right:14px;top:calc(100% - 26px);color:var(--muted);font:500 12px/1 var(--body);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s;pointer-events:none}
.answer.is-near .answer__count{opacity:1}
.answer__hint{display:none;margin-top:10px;color:var(--muted);font-size:12.5px}
.answer__hint kbd{height:20px;min-width:20px;font-size:10.5px}
@media (hover:hover) and (pointer:fine){.answer__hint{display:block}}
.answer:has(.answer__hint) .answer__count{top:auto;bottom:calc(10px + 1.5em + 10px)}

.survey__foot{position:relative;display:flex;align-items:center;gap:12px;margin-top:20px}
.survey__back{margin-left:-10px;padding:0 14px 0 10px}
.survey__hint{display:none;margin-left:auto;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.survey__next{min-width:136px;height:52px;margin-left:auto}
.survey__next.is-last svg{display:none}
@media (hover:hover) and (pointer:fine){
  .survey__hint{display:inline-flex}
  .survey__next{margin-left:0}
}

/* ---------- dark ---------- */
:root[data-theme=dark] .invite__card{box-shadow:0 0 0 1px var(--opt-line),0 30px 70px -28px rgba(0,0,0,.8)}
:root[data-theme=dark] .hero--a .wl__msg:not(:empty){box-shadow:0 0 0 1px var(--opt-line)}

/* ---------- short laptop screens ---------- */
@media (min-width:720px) and (max-height:780px){
  .hero--a[data-flow-state=invite] .charm{width:min(220px,26svh)}
  .hero--a[data-flow-state=invite] .h1{font-size:clamp(56px,10svh,76px)}
  .hero--a[data-flow-state=survey] .charm{display:none}
  .survey{margin-top:88px}
  .survey__progress{margin-bottom:16px}
  .survey__body legend{font-size:24px}
  .choice{min-height:50px}
}

/* ---------- phones ---------- */
@media (max-width:719px){
  .hero--a[data-flow-state=invite] .charm{width:min(36vw,17svh)}
  .hero--a[data-flow-state=invite] .h1{font-size:clamp(44px,min(12.5vw,6.6svh),56px)}
  .invite{margin-top:14px}
  .invite h2{font-size:19px}
  .nightcan{width:96px;height:124px}
  .invite__list{gap:9px;padding:14px 12px 16px}
  .invite__list li{font-size:14px}
  /* The survey is a sheet: the charm stays visible above it, and on short screens
     the footer sticks to the bottom so Next is always under the thumb. */
  .hero--a[data-flow-state=survey]{padding-top:clamp(150px,26svh,230px)}
  .hero--a[data-flow-state=survey] .charm{width:min(56vw,28svh)}
  .survey{width:calc(100% - 16px);margin:auto 8px 8px;padding:14px 16px 16px;border-radius:24px;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  .survey__progress{margin:10px 0 18px}
  .survey__body legend{font-size:22px}
  #survey-description{margin:6px 0 16px;font-size:14px}
  .choice{min-height:52px}
  .choice__icon{width:36px;height:36px;border-radius:11px}
  .choice__label{font-size:15.5px}
  .answer textarea{min-height:116px}
  .survey__foot{position:sticky;bottom:0;z-index:2;margin:12px -16px -16px;padding:4px 16px 16px;border-radius:0 0 24px 24px;background:var(--surface)}
  .survey__foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
}
@media (max-width:719px) and (max-height:700px){
  .hero--a .wl input[type=email],.hero--a .wl__field .btn,.hero--a .btn--start{height:48px}
  .hero--a[data-flow-state=invite] .charm{width:min(30vw,15svh)}
  .invite__top{padding:6px 4px 2px 16px}
  .nightcan{width:84px;height:106px}
  .invite__list{gap:7px;padding:12px 12px 12px}
  .invite__actions .btn{height:50px}
  .hero--a[data-flow-state=survey]{padding-top:76px}
  .hero--a[data-flow-state=survey] .charm{display:none}
  .survey__body legend{font-size:20px}
  #survey-description{font-size:13.5px}
  .choice{min-height:48px}
  .choice__icon{width:32px;height:32px}
  .survey__next{height:48px}
}
@media (max-width:719px) and (max-height:600px){
  .hero--a .wl input[type=email],.hero--a .wl__field .btn,.hero--a .btn--start{height:44px}
}
@media (min-width:560px) and (max-height:620px) and (orientation:landscape){
  .hero--a .wl__field{flex-direction:row}
  .hero--a .wl input[type=email],.hero--a .wl__field .btn{height:44px;font-size:16px}
  .hero--a[data-flow-state=invite] .charm{width:min(28vw,48svh)}
  .hero--a[data-flow-state=invite] .h1{font-size:clamp(36px,5vw,52px)}
  .invite{margin-top:18px}
  .hero--a[data-flow-state=survey]{padding-top:0}
  .hero--a[data-flow-state=survey] .charm{display:none}
  .survey{width:min(600px,calc(100% - 24px));margin:76px auto 12px;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  .survey__foot{position:sticky;bottom:0;z-index:2;margin:12px -24px -20px;padding:4px 24px 16px;border-radius:0 0 28px 28px;background:var(--surface)}
  .survey__foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
}

/* ---------- motion ---------- */
@keyframes h1-in{from{opacity:0;transform:translateY(18px) scale(.98);filter:blur(8px)}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}}
@keyframes field-in{from{opacity:0;transform:scale(.96)}}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes q-fwd{from{opacity:0;transform:translateX(22px)}}
@keyframes q-back{from{opacity:0;transform:translateX(-22px)}}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes g-fizz{0%{opacity:0;transform:translate(0,1px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),-7px) scale(1)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes blink{40%{transform:scaleY(.15)}}
@keyframes wave{25%{transform:skewY(-8deg) scaleX(.94)}60%{transform:skewY(5deg)}}
@keyframes orbit{25%{transform:translate(1.5px,-1.5px)}50%{transform:translate(0,-2.5px)}75%{transform:translate(-1.5px,-1px)}}
@keyframes hop{40%{transform:translateY(-3.5px)}}
@media (prefers-reduced-motion:reduce){
  .choice:active,.btn:active{transform:none}
}