/* The live homepage: two calls happening at once, ending in an introduction. */
.live{padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,90px)!important;overflow:hidden}
.live .top{text-align:center;max-width:820px;margin:0 auto}
.live h1{font-size:clamp(2.4rem,5.4vw,4.6rem)}
.live .lede{margin:18px auto 0;text-align:center}
.live .btns{justify-content:center}
.stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,3vw,40px);max-width:1040px;margin:clamp(34px,5vw,58px) auto 0;padding:0 16px}
.bridge{display:grid;justify-items:center;gap:10px;color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;width:120px}
.bridge .line{width:2px;height:110px;background:linear-gradient(var(--yanis),var(--arianna));opacity:.25;border-radius:2px;transition:opacity .4s}
.bridge.on .line{opacity:1}
.bridge .dot{width:12px;height:12px;border-radius:50%;background:var(--line);transition:background .4s,transform .4s}
.bridge.on .dot{background:#4caf82;transform:scale(1.25)}

/* A phone running the FaceMeet call screen. */
.phone{justify-self:center;width:min(300px,100%);aspect-ratio:9/18.6;border-radius:44px;background:#0b0c0f;padding:12px;box-shadow:0 0 0 2px #23262c,0 40px 80px -30px rgba(17,22,41,.55);position:relative}
.screen{height:100%;border-radius:34px;background:radial-gradient(120% 60% at 50% 0%,#1b1e25 0%,#0e0f12 60%);overflow:hidden;display:flex;flex-direction:column;color:#e9ebef;font-family:'DM Sans',sans-serif;position:relative}
.notch{width:96px;height:24px;border-radius:14px;background:#000;margin:8px auto 0;flex:none}
.callhead{display:flex;flex-direction:column;align-items:center;padding:14px 16px 6px;flex:none}
.callhead .face{--s:86px;background:#0e0f12}
.callhead .name{margin-top:10px;font-family:'DM Sans',sans-serif;font-weight:800;font-size:1.05rem;color:#fff}
.callhead .state{font-size:.72rem;color:#9aa1ad;display:flex;gap:6px;align-items:center;margin-top:3px}
.callhead .state i{width:7px;height:7px;border-radius:50%;background:#4caf82;display:block;animation:pulse 1.6s infinite}
.wave{display:flex;gap:3px;height:22px;align-items:center;justify-content:center;margin-top:8px}
.wave b{width:3px;border-radius:2px;background:var(--c,#5b8df0);height:4px;transition:height .12s}
.phone.yanis{--c:#5b8df0} .phone.arianna{--c:#ff7a62}
.phone.speaking .wave b{animation:bar .9s infinite ease-in-out}
.phone.speaking .wave b:nth-child(2n){animation-delay:.15s}.phone.speaking .wave b:nth-child(3n){animation-delay:.3s}.phone.speaking .wave b:nth-child(4n){animation-delay:.45s}
.feed{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:8px 12px 14px;mask-image:linear-gradient(transparent,#000 22%)}
.bubble{max-width:88%;padding:9px 11px;border-radius:14px;font-size:.74rem;line-height:1.42;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.bubble.show{opacity:1;transform:none}
.bubble.agent{background:rgba(255,255,255,.07);align-self:flex-start;border-top-left-radius:4px}
.bubble.person{background:var(--c);color:#fff;align-self:flex-end;border-top-right-radius:4px}
.bubble small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.card{background:#16181d;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px;font-size:.74rem;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .45s,transform .45s}
.card.show{opacity:1;transform:none}
.card .row{display:flex;gap:10px;align-items:center}
.card .letter{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:800}
.card b{font-family:'DM Sans',sans-serif;color:#fff;font-size:.82rem}
.card .meta{color:#9aa1ad;font-size:.68rem;margin-top:1px}
.card .fit-tag{margin-top:8px;font-weight:800;font-size:.68rem;letter-spacing:.04em}
.card .acts{display:flex;gap:6px;margin-top:9px}
.card .acts span{flex:1;text-align:center;padding:7px;border-radius:10px;font-weight:700;font-size:.72rem;background:rgba(255,255,255,.07)}
.card .acts span.yes{background:#4caf82;color:#fff;transition:transform .2s}
.card .acts span.yes.tap{transform:scale(.93)}
.card.done{border-color:#4caf82}
.foot{display:flex;justify-content:center;gap:18px;padding:0 0 14px;flex:none}
.foot span{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:.9rem}
.foot span.end{background:#e5484d}
.caption-note{text-align:center;color:var(--muted);font-size:.78rem;margin-top:18px}
.replay{background:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-size:.8rem;color:var(--ink-soft);cursor:pointer;margin-left:8px}

/* Three beats under the stage: one line each. */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.beat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px}
.beat .k{font-family:'DM Sans',sans-serif;font-weight:800;font-size:1.5rem;color:var(--ink)}
.beat p{margin:8px 0 0;font-size:1rem}
.beat .k em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--arianna)}

@keyframes bar{0%,100%{height:4px}50%{height:20px}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:820px){
 .stage{grid-template-columns:1fr;gap:10px}
 .bridge{width:auto;grid-auto-flow:column;align-items:center}
 .bridge .line{width:90px;height:2px;background:linear-gradient(90deg,var(--yanis),var(--arianna))}
 .phone{width:min(290px,86vw)}
 .beats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.phone.speaking .wave b,.callhead .state i{animation:none}.bubble,.card{transition:none}}