*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:clip;background:var(--night);color:var(--text);font-family:var(--font-sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{position:fixed;inset:0;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
::selection{background:rgba(227,181,88,.35)}

/* ---------- background: congress poster, slow Ken Burns + tilt parallax, tint, aurora light, grain ---------- */
.scene{position:fixed;inset:-24px;overflow:hidden;background:var(--night)}
.poster-wrap{position:absolute;inset:0;display:block;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s var(--ease-out);will-change:transform}
.poster{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;transform-origin:0 50%;
  animation:kb-night 64s var(--ease-in-out) infinite,poster-in 1.8s var(--ease-out) both;will-change:transform}
/* portrait: the poster is ~4x wider than the screen. Hold on the heart, glide across, hold on the "41", glide back */
@keyframes kb-night{0%,38%{transform:translate3d(min(0px,calc(-19% + 50vw + 24px)),0,0)}50%,88%{transform:translate3d(calc(-90% + 50vw + 24px),0,0)}100%{transform:translate3d(min(0px,calc(-19% + 50vw + 24px)),0,0)}}
@keyframes poster-in{from{opacity:0}}
@media (min-aspect-ratio:4/3){.poster{width:100%;height:auto;min-height:100%;transform-origin:50% 50%;animation-name:kb-wide,poster-in;animation-duration:50s,1.8s;animation-direction:alternate,normal}
  @keyframes kb-wide{from{transform:scale(1)}to{transform:scale(1.04)}}}
.aurora{position:fixed;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen;opacity:.42;pointer-events:none}
.tint{position:fixed;inset:0;pointer-events:none;transition:opacity 1.6s var(--ease-out);
  background:linear-gradient(180deg,rgba(var(--veil),.62) 0%,rgba(var(--veil),.28) 24%,rgba(var(--veil),.58) 46%,rgba(var(--veil),.9) 68%,rgba(var(--veil),.96) 100%)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- glass: flat, translucent, blurred. No borders, no shadows ---------- */
.glass{background:var(--glass-bg);border:0;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-solid)}}

/* ---------- stage ---------- */
.stage{position:relative;z-index:2;height:100%;height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 12px) 20px calc(env(safe-area-inset-bottom) + var(--mq-h) + 10px)}
:root{--mq-h:64px}
.flip{transition:transform 1.1s var(--ease-out),opacity .6s var(--ease-out)}
.ph-layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:18px;padding:0 24px calc(var(--mq-h) + 9vh);visibility:hidden;pointer-events:none}
.ph-logo{width:190px;height:54px}
.ph-pich{width:118px;height:130px}
.ph-hero{width:100%;height:110px}
.noanim,.noanim *{transition:none!important}

.bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px}
.logo{height:30px;width:auto}
.event{font-size:12px;font-weight:600;color:var(--text);padding:6px 12px;border-radius:var(--radius-pill);white-space:nowrap;transition:opacity .6s .5s var(--ease-out)}
.intro .event{opacity:0}

.hero{flex:none;text-align:center;margin-top:18px;transform-origin:center top}
.slogan{font-size:1.32rem;font-weight:700;line-height:1.55;letter-spacing:-.2px;text-wrap:balance}
.slogan .w{display:inline-block;white-space:pre}
.hook{margin-top:4px;font-size:var(--text-sm);font-weight:500;color:var(--gold);line-height:1.8;text-wrap:pretty}

/* intro choreography */
.intro .logo{animation:logo-wipe 1.2s .3s var(--ease-out) both}
@keyframes logo-wipe{from{clip-path:inset(0 0 0 100%);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
.intro .slogan .w{animation:in-word 1s var(--ease-out) both;animation-delay:calc(1.6s + var(--i) * .14s)}
.intro .hook{animation:in-word 1s 2.7s var(--ease-out) both}
.intro .october{animation:in-fade .3s .8s both}
.intro .pich{animation:reveal 1.4s .8s var(--ease-out) both}
@keyframes in-fade{from{opacity:0}}
@keyframes in-word{from{opacity:0;translate:0 .5em;filter:blur(6px)}}
@keyframes reveal{from{clip-path:circle(0% at 50% 62%)}to{clip-path:circle(80% at 50% 62%)}}
.compact .hero .slogan,.compact .hero .hook{animation:none}

/* ---------- conversation (no container: everything floats on the background) ---------- */
.wizard{flex:none;margin-top:auto;transition:transform 1s .25s var(--ease-out),opacity .7s .25s}
.intro .wizard{transform:translateY(60px);opacity:0;pointer-events:none}
.wz-head{display:flex;align-items:center;gap:10px;height:30px;margin-bottom:10px}
.back{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:var(--text)}
.back svg{width:16px;height:16px}
.progress{flex:1;display:flex;gap:4px;list-style:none}
.progress li{flex:1;height:3px;border-radius:3px;background:var(--track);overflow:hidden;position:relative}
.progress li::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease-out)}
.progress li.done::after{transform:scaleX(1)}
.progress li.cur::after{transform:scaleX(.4)}
.count{flex:none;font-size:12px;font-weight:600;color:var(--text-dim);min-width:40px;text-align:left;font-variant-numeric:tabular-nums}

.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-height:68px;overflow:hidden;margin-bottom:6px;min-height:0}
.chip{font-size:13px;font-weight:500;color:var(--text);padding:6px 12px;border-radius:14px 14px 4px 14px;max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.new{animation:chip-in .6s var(--ease-out) both}
@keyframes chip-in{from{opacity:0;transform:translateY(10px) scale(.9)}}

.dock{display:flex;align-items:flex-start;gap:12px;margin:4px 0 14px;min-height:64px}
.dock-slot{flex:none;width:52px;height:58px;transition:width .6s var(--ease-out),height .6s var(--ease-out)}
.is-done .dock-slot{width:72px;height:80px}
.bubble{flex:1;font-size:1.16rem;font-weight:600;line-height:1.7;color:var(--text);padding-top:4px;text-wrap:pretty}
.bubble.say{animation:say .5s var(--ease-out)}
@keyframes say{from{opacity:.2;translate:-8px 0}}
.bubble .caret{display:inline-block;width:2px;height:1em;background:var(--gold);vertical-align:-3px;margin-inline-start:3px;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.compose{display:flex;align-items:flex-end;gap:14px}
.steps{position:relative;flex:1;min-width:0;height:84px}
.step{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(-30px);transition:transform .45s var(--ease-out),opacity .3s var(--ease-out),visibility 0s .45s}
.steps.rev .step{transform:translateX(30px)}
.step.on{opacity:1;visibility:visible;transform:none!important;transition:transform .6s .08s var(--ease-out),opacity .4s .1s var(--ease-out)}
.step.gone{transform:translateX(30px)}
.steps.rev .step.gone{transform:translateX(-30px)}
.step.on .q,.step.on input,.step.on .otp-wrap,.step.on .pair,.step.on .done-text{animation:rise-in .55s var(--ease-out) both}
.step.on input,.step.on .otp-wrap,.step.on .pair,.step.on .done-text{animation-delay:.09s}
@keyframes rise-in{from{opacity:0;translate:0 10px}}
.q{display:block;font-size:12px;font-weight:600;color:var(--text-faint);margin-bottom:2px;letter-spacing:.1px}
.fld{min-width:0}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}

/* frameless inline field: text sits on the page, a hairline underline grows gold on focus */
input:not([type=checkbox]),select{width:100%;height:58px;border:0;border-radius:0;outline:none;appearance:none;-webkit-appearance:none;padding:0 2px;
  font-size:1.5rem;font-weight:600;color:var(--text);caret-color:var(--gold);
  background:linear-gradient(var(--gold),var(--gold)) no-repeat 100% 100%/0% 2px,linear-gradient(var(--line),var(--line)) no-repeat 0 100%/100% 1px;
  transition:background-size .5s var(--ease-out),color .2s}
input:focus,select:focus{background-size:100% 2px,100% 1px}
input::placeholder{color:var(--text-faint);font-weight:400;font-size:1.05rem}
input:focus-visible,select:focus-visible{outline:none}
input[dir=ltr]{text-align:right;letter-spacing:.5px}
input[dir=ltr]::placeholder{letter-spacing:0}
select{font-size:1.2rem;padding-left:22px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c99a3e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 2px 50%/12px 8px,
    linear-gradient(var(--gold),var(--gold)) no-repeat 100% 100%/0% 2px,linear-gradient(var(--line),var(--line)) no-repeat 0 100%/100% 1px}
select:focus{background-size:12px 8px,100% 2px,100% 1px}
.pair input{font-size:1.2rem}
select:invalid{color:var(--text-faint)}
select option{color:#1b1a17;background:#f6f1e7}
.invalid{background-image:linear-gradient(var(--danger),var(--danger)),linear-gradient(var(--danger),var(--danger))!important;background-size:100% 2px,100% 1px!important;animation:shake .4s var(--ease-out)}
.otp-wrap{position:relative;height:58px}
.otp{position:absolute;inset:0;opacity:0;height:100%!important;font-size:16px!important;caret-color:transparent;z-index:1}
.otp-cells{direction:ltr;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;height:100%}
.otp-cells span{position:relative;display:grid;place-items:center;font-size:1.9rem;font-weight:700;color:var(--text);
  background:linear-gradient(var(--line),var(--line)) no-repeat 0 100%/100% 1px}
.otp-cells span::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease-out)}
.otp-cells span.cur::after,.otp-cells span:not(:empty)::after{transform:scaleX(1)}
.otp-cells span.cur::before{content:"";width:2px;height:26px;background:var(--gold);animation:caret .8s steps(1) infinite}
.otp-wrap.bad .otp-cells{animation:shake .4s var(--ease-out)}
@keyframes shake{25%{translate:6px}50%{translate:-5px}75%{translate:3px}}
.done-text{font-size:var(--text-sm);color:var(--text-dim);line-height:1.9;padding-top:8px}

/* send: round, flat. Dim until the answer is valid, then gold */
.btn{position:relative;flex:none;width:56px;height:56px;margin-bottom:1px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;overflow:hidden;
  background:var(--glass-bg);color:var(--text-dim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  transition:background-color .35s var(--ease-out),color .35s,transform .2s var(--ease-out),width .6s var(--ease-out),border-radius .6s var(--ease-out)}
.btn .arrow{width:24px;height:24px;transition:transform .35s var(--ease-out)}
.btn #next-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.btn.ready{background:var(--gold);color:var(--on-gold)}
.btn.ready .arrow{animation:nudge 1.6s .4s var(--ease-in-out) infinite}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateX(-4px)}}
.btn:active{transform:scale(.94)}
.btn[aria-busy=true]{pointer-events:none}
.btn[aria-busy=true] .arrow{opacity:0}
.btn[aria-busy=true]::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn .sheen{display:none}
.is-done .compose{flex-direction:column;align-items:stretch;gap:10px}
.is-done .steps{flex:none;height:56px}
.is-done .btn{width:100%;height:56px;border-radius:18px;display:flex;justify-content:center;gap:10px;font-weight:700;font-size:1.02rem}
.is-done .btn #next-label{position:static;width:auto;height:auto;clip-path:none}

.aux{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;margin-top:6px}
.err{flex:1;font-size:13px;font-weight:600;color:var(--danger);line-height:1.6}
.link{flex:none;background:none;border:0;color:var(--gold);font-size:13px;font-weight:600;cursor:pointer;padding:6px 2px}
.link[disabled]{color:var(--text-faint);font-weight:500;cursor:default}

/* ---------- brand marquee: bottom strip, real colour logos side by side ---------- */
.marquee{position:fixed;z-index:3;left:0;right:0;bottom:0;height:calc(var(--mq-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:center;overflow:hidden;direction:ltr;background:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  transition:transform 1s var(--ease-out),opacity .8s}
.marquee{animation:mq-in 1.1s 3.1s var(--ease-out) both}
@keyframes mq-in{from{transform:translateY(100%);opacity:0}}
.track{display:flex;width:max-content;animation:mq 30s linear infinite}
.run{display:flex;align-items:center;gap:52px;padding-right:52px}
.run img{display:block;height:24px;width:auto;opacity:.85;filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.45))}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* ---------- October ---------- */
.october:active .pich{transform:scale(.92,1.06)}
.pich{transition:transform .25s var(--ease-out),color .6s var(--ease-out)}
.october{position:absolute;z-index:6;top:0;left:0;width:60px;height:66px;border:0;background:none;cursor:pointer;color:var(--mascot-sleep);display:grid;place-items:center;transform-origin:center;touch-action:manipulation}
.pich{width:60px;height:auto;overflow:visible;display:block}
.p-body{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4.2s var(--ease-in-out) infinite}
.p-eyes{transition:transform .12s linear}
.eo{transform-box:fill-box;transform-origin:center;transition:transform .4s var(--ease-out),opacity .08s}
.ec{opacity:0;transition:opacity .08s}
.blink .eo{opacity:0}.blink .ec{opacity:1}
@keyframes breathe{50%{transform:scale(1.03,.98)}}
.pich.talk .p-body{animation:talk .5s var(--ease-out),breathe 4.2s .5s var(--ease-in-out) infinite}
@keyframes talk{40%{transform:scale(.96,1.05) translateY(-3%)}}
.pich.no .p-body{animation:no .45s var(--ease-out)}
@keyframes no{25%{transform:rotate(-7deg)}75%{transform:rotate(6deg)}}
.pich.hop .p-body{animation:hop .7s var(--ease-out)}
@keyframes hop{30%{transform:translateY(-14%) scale(.96,1.06)}60%{transform:translateY(0) scale(1.06,.94)}}
.compact:not(.active) .eo{transform:scaleY(.42)}
.intro .october{color:var(--gold)}
.active .october{color:var(--gold)}
.october::after{content:"";position:absolute;inset:-4px -8px;border-radius:50%;border:1.5px solid var(--gold);opacity:0}
.active .october::after{animation:ring 1.6s .3s var(--ease-out) 2}
@keyframes ring{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}

.pich.peek .p-body{animation:peek .6s var(--ease-out)}
@keyframes peek{50%{transform:rotate(-5deg) translateY(-4%)}}

:root:has(.intro) .tint{opacity:.7}

/* ---------- short screens ---------- */
@media (max-height:760px){
  :root{--mq-h:56px}
  .hero{margin-top:10px}
  .slogan{font-size:1.12rem}
  .hook{display:none}
  .intro .hook{display:block}
  .ph-pich{width:96px;height:106px}
  .ph-layer{gap:12px;padding-bottom:calc(var(--mq-h) + 6vh)}
  .wz-head{margin-bottom:6px}
  .chips{max-height:32px;margin-bottom:4px}
  .dock{margin:2px 0 8px;min-height:56px}
  .dock-slot{width:46px;height:52px}
  .bubble{font-size:1.04rem;line-height:1.65}
  .steps{height:76px}
  input:not([type=checkbox]),select,.otp-wrap{height:52px}
  .btn{width:52px;height:52px}
  .run img{height:21px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
/* wide screens: the full poster shows (with its own lettering), so the conversation column gets its own darker veil */
@media (min-aspect-ratio:4/3){
  .tint::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - 520px),rgba(var(--veil),.86) calc(50% - 280px),rgba(var(--veil),.86) calc(50% + 280px),transparent calc(50% + 520px))}
}

/* ---------- top bar end ---------- */
.bar-end{display:flex;align-items:center;gap:8px}