/* ============================================================
   catchwhen — SaaS ad v2 ("punchy cut")
   Beat-based: hook → chat takeover → big type statements → end.
   Base 640x640. Beats swap behind a diagonal coral wipe.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --coral: #FD6969;
  --coral-d: #F24B4B;
  --coral-soft: #FFE6E2;
  --cream: #FBF7F4;
  --ink: #1B1A18;
  --muted: #ADA79F;
  --hair: #ECE6DF;
  --tone: #EFEAE4;
  --tone-2: #E5DBD1;
  --ease-premium: cubic-bezier(.18,.84,.22,1);
  --ease-settle: cubic-bezier(.2,.9,.24,1);
}

.adv {
  position: relative;
  width: 640px;
  height: 640px;
  overflow: hidden;
  background: #12100F;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.adv * { box-sizing: border-box; }

/* ---------- story progress segments ---------- */
.adv-prog {
  position: absolute; top: 16px; left: 18px; right: 18px;
  z-index: 80;
  display: flex; gap: 6px;
}
.adv-prog .seg { flex: 1 1 0; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.adv-prog .seg .fill { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.adv-prog .seg.full .fill { width: 100%; }
.adv.on-dark .adv-prog .seg { background: rgba(255,255,255,.3); }
.adv.on-dark .adv-prog .seg .fill { background: #fff; }

/* ---------- beats ---------- */
.beat {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
}
.beat.active { display: flex; }

/* diagonal coral wipe (two layers for depth) */
.wipe {
  position: absolute; top: -12%; left: -12%;
  width: 124%; height: 124%;
  z-index: 90;
  transform: translateX(-135%) skewX(-9deg);
  will-change: transform;
  pointer-events: none;
}
.wipe.b { background: var(--coral); z-index: 91; }

/* =====================================================================
   BEAT · OPEN  (rough site → zoom-in + click → chat unfolds)
   ===================================================================== */
.b-open {
  background: #12100F;
  overflow: hidden;
}
.b-open::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 84% 78%, rgba(253,105,105,.3), transparent 34%),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(145deg, #161311 0%, #0F0E0D 100%);
}

/* zoomable layer — dives in toward the widget in the bottom-right corner */
.site-stage { position: absolute; inset: 0; transform-origin: 84% 84%; transform: scale(1); }
.b-open.zoom .site-stage { animation: pushin .7s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes pushin {
  from { transform: scale(1); }
  to   { transform: scale(1.4); }
}

/* website floats as a bright card on the dark stage (matches the feature beats) */
.site-win {
  position: absolute; inset: 42px;
  background: #FBFCFD; border: none; border-radius: 24px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 38px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1);
}
.site-bar { height: 48px; flex: 0 0 auto; background: #EAEEF3; border-bottom: 1px solid #DCE2EA; display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.site-bar .dots { display: flex; gap: 8px; }
.site-bar .dots i { width: 12px; height: 12px; border-radius: 50%; }
.site-bar .dots i:nth-child(1) { background: #FF5F57; }
.site-bar .dots i:nth-child(2) { background: #FEBC2E; }
.site-bar .dots i:nth-child(3) { background: #28C840; }
.site-bar .url { margin: 0 auto; min-width: 300px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid #DCE2EA; display: flex; align-items: center; justify-content: center; gap: 7px; color: #AEB6C2; font-size: 13.5px; font-weight: 600; }
.site-bar .url svg { width: 12px; height: 12px; }

/* rough abstract site — plain blocks, faint so it reads "a website" without competing */
.site-body { flex: 1 1 auto; padding: 44px 48px; display: flex; flex-direction: column; gap: 36px; }
.site-nav { display: flex; align-items: center; justify-content: space-between; }
.site-logo { width: 46px; height: 46px; border-radius: 8px; background: #DEE3EB; }
.site-nav .lk { display: flex; gap: 16px; }
.site-nav .lk b { display: block; width: 54px; height: 13px; border-radius: 3px; background: #E9EDF3; }
.site-nav .pill { width: 96px; height: 38px; border-radius: 8px; background: #CFD8E4; }
.site-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.site-cols { display: flex; flex-direction: column; gap: 17px; }
.site-cols .h { height: 38px; border-radius: 5px; background: #DEE3EB; }
.site-cols .h.w1 { width: 96%; } .site-cols .h.w2 { width: 60%; }
.site-cols .l { height: 13px; border-radius: 3px; background: #E9EDF3; }
.site-cols .l.s { width: 54%; }
.site-cols .btn { margin-top: 14px; width: 158px; height: 48px; border-radius: 8px; background: #CFD8E4; }
.site-hero .pic { aspect-ratio: 1/1; border-radius: 10px; background: linear-gradient(135deg, #EFF3F8, #E1E8F1); }
.site-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: auto; }
.site-cards .c { height: 96px; border-radius: 10px; background: linear-gradient(135deg, #F0F4F8, #E4EBF2); }

/* widget launcher (bigger, icon fills it) */
.open-launch {
  position: absolute; right: 72px; bottom: 72px; z-index: 30;
  width: 74px; height: 74px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 18px 38px -8px rgba(253,105,105,.55);
  overflow: hidden;
}
.open-launch img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* attention speech bubble above launcher — this is what gets clicked */
.open-bubble {
  position: absolute; right: 72px; bottom: 164px; z-index: 29;
  background: #fff; border: 1px solid #E4E8EE;
  border-radius: 20px; border-bottom-right-radius: 7px;
  padding: 15px 20px; font-size: 18px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 22px 44px -14px rgba(40,45,70,.30);
  transform-origin: bottom right;
  opacity: 0; transform: translateY(12px) scale(.8);
}
.open-bubble::after { content: ""; position: absolute; right: 26px; bottom: -7px; width: 15px; height: 15px; background: #fff; border-right: 1px solid #E4E8EE; border-bottom: 1px solid #E4E8EE; transform: rotate(45deg); border-bottom-right-radius: 4px; }
.b-open.bubble .open-bubble { animation: bub-in .5s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes bub-in { to { opacity: 1; transform: none; } }
/* click feel — subtle tone-down + inner shadow, no ring */
.b-open.press .open-bubble { animation: bub-press .28s cubic-bezier(.4,0,.3,1) forwards; }
@keyframes bub-press {
  to {
    transform: translateY(1px) scale(.985);
    background: #F0EDE9;
    box-shadow: 0 16px 32px -16px rgba(40,45,70,.26), inset 0 2px 7px rgba(40,40,55,.14);
  }
}

/* arrowhead cursor, glides to the bubble AFTER the zoom (target set via JS) */
.open-cursor {
  position: absolute; z-index: 32; width: 50px; height: 50px;
  left: 0; top: 0; opacity: 0;
  --cursor-x: 300px;
  --cursor-y: 360px;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0);
  transition: transform .58s cubic-bezier(.22,.72,.18,1), opacity .2s ease;
  will-change: transform, opacity;
  pointer-events: none;
}
.open-cursor svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(30,30,50,.3)); transform: translate(10px, 12px) scale(.96); transform-origin: 22% 18%; transition: transform .22s cubic-bezier(.2,.9,.25,1); will-change: transform; }

/* chat surface unfolds out of the launcher corner to full screen */
.chat-surface {
  position: absolute; inset: 42px 42px -34px; z-index: 40;
  background: #FAFAFA;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 34px 90px -34px rgba(0,0,0,.86), 0 0 0 1px rgba(253,105,105,.1);
  transform-origin: 90% 90%;
  opacity: 0; transform: scale(0); border-radius: 50%;
}
.b-open.open-chat .chat-surface { animation: surf .72s cubic-bezier(.22,.9,.24,1) forwards; }
/* the mock site fades into the dark stage once the chat takes over */
.b-open.open-chat .site-win,
.b-open.open-chat .open-launch,
.b-open.open-chat .open-bubble { animation: site-dim .6s ease .08s forwards; }
@keyframes site-dim { to { opacity: 0; } }
@keyframes surf {
  0%   { opacity: 0; transform: scale(0); border-radius: 50%; }
  12%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); border-radius: 26px; }
}

/* =====================================================================
   CHAT WINDOW — header + message area + white input bar at the bottom.
   Visitor types their first message; on send it sticks into the thread.
   ===================================================================== */
.chat-win { flex: 1 1 auto; position: relative; display: flex; flex-direction: column; min-height: 0; }

/* minimal header (no AI label / status) */
.cw-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 30px 34px 22px;
  border-bottom: 1px solid #ECE6DF;
}
.cw-top .av { width: 50px; height: 50px; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 22px -12px rgba(253,105,105,.5); }
.cw-top .av img { width: 100%; height: 100%; }
.cw-top .nm { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

/* message area — messages stack from the TOP */
.cw-body {
  flex: 1 1 auto; min-height: 0;
  padding: 28px 34px;
  display: flex; flex-direction: column; gap: 14px; justify-content: flex-start;
}

/* sent visitor message — rises from the centered input and pastes at the top */
.umsg {
  align-self: flex-end; max-width: 78%;
  background: #EFF0F2; color: #2B2A28;
  font-size: 25px; font-weight: 600; line-height: 1.32; letter-spacing: -.01em;
  padding: 18px 24px; border-radius: 22px; border-bottom-right-radius: 7px;
  box-shadow: 0 8px 20px -16px rgba(35,38,45,.28);
  transform-origin: top right;
  opacity: 0; transform: translateY(180px) scale(.72);
}
.umsg.stick { animation: paste-top .56s cubic-bezier(.2,1.05,.3,1) forwards; }
@keyframes paste-top {
  0%   { opacity: 0; transform: translateY(180px) scale(.72); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}

/* white input bar — floats in the CENTER of the chat window (clean neutral border) */
.cw-input {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  width: 88%;
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border: 1.5px solid #E4DED7;
  border-radius: 24px;
  padding: 16px 16px 16px 28px;
  box-shadow: 0 14px 34px -24px rgba(40,40,45,.3);
  opacity: 0; transform: translate(-50%, -50%) translateX(90px) scale(.96);
}
.b-open.compose-in .cw-input { animation: comp-in .44s cubic-bezier(.2,.9,.24,1) forwards; }
@keyframes comp-in {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* on send, the input disappears at the same time the message flies up */
.b-open.compose-sent .cw-input { animation: comp-out .4s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes comp-out {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
}

.cw-input .field {
  flex: 1 1 auto; min-width: 0;
  font-size: 27px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); white-space: nowrap; overflow: hidden;
  display: flex; align-items: center;
}
.cw-input .field .ph { color: #B6AEA4; font-weight: 600; }   /* placeholder */
.cw-input .field .typed { color: var(--ink); }
.cw-input .field .cur {
  display: inline-block; width: 3px; height: 32px;
  background: var(--coral); border-radius: 2px; margin-left: 3px;
  opacity: 0;
}
.b-open.compose-active .cw-input .field .cur { animation: cur-blink 1s steps(1) infinite; }
@keyframes cur-blink { 50% { opacity: 0; } }
.b-open.compose-active .cw-input .field .ph { display: none; }

/* send button — squircle, up-arrow; disabled until typing starts */
.cw-input .send {
  flex: 0 0 auto;
  width: 58px; height: 58px; border-radius: 19px;
  background: #F3ECE6; color: #F4B6B0;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, color .3s ease, transform .12s cubic-bezier(.3,1.4,.5,1);
}
.cw-input .send svg { width: 28px; height: 28px; }
.b-open.compose-active .cw-input .send { background: var(--coral); color: #fff; }
.b-open.send-press .cw-input .send { transform: scale(.84); }

/* in-chat cursor that clicks the send button */
.chat-cursor {
  position: absolute; z-index: 50; width: 50px; height: 50px;
  left: 0; top: 0; opacity: 0;
  --cursor-x: 546px;
  --cursor-y: 372px;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0);
  transition: transform .54s cubic-bezier(.22,.72,.18,1), opacity .2s ease;
  will-change: transform, opacity;
  pointer-events: none;
}
.chat-cursor svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(30,30,50,.3)); transform: translate(10px, 12px) scale(.96); transform-origin: 22% 18%; transition: transform .22s cubic-bezier(.2,.9,.25,1); will-change: transform; }
.open-cursor.is-visible,
.chat-cursor.is-visible { opacity: 1; }
.open-cursor.is-visible svg,
.chat-cursor.is-visible svg { transform: translate(0,0) scale(1); }
.open-cursor.is-clicking svg,
.chat-cursor.is-clicking svg { transform: translate(0,0) scale(.86); }

@keyframes word-in { to { opacity: 1; transform: none; } }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes tw { 0%{opacity:0; transform:scale(.2);} 22%{opacity:.85; transform:scale(1);} 60%{opacity:.4; transform:scale(.85);} 100%{opacity:0; transform:scale(1.3);} }

/* =====================================================================
   AI ANSWER — ChatGPT style: no bubble, text streamed onto the surface
   ===================================================================== */
/* "thinking" dots before the answer streams */
.athink { align-self: flex-start; display: inline-flex; gap: 8px; padding: 14px 2px; }
.athink i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); animation: cbob 1s ease-in-out infinite; }
.athink i:nth-child(2){ animation-delay:.15s; } .athink i:nth-child(3){ animation-delay:.3s; }
@keyframes cbob { 0%,60%,100%{ transform: translateY(0); opacity:.4; } 30%{ transform: translateY(-6px); opacity:1; } }

.amsg {
  align-self: stretch;
  margin-top: 6px; padding: 2px 2px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.01em;
}
.amsg .lead {
  display: block;
  font-size: 30px; font-weight: 700; line-height: 1.2;
  color: var(--muted); margin-bottom: 10px;
}
.amsg .punch {
  display: block;
  font-size: 42px; font-weight: 800; line-height: 1.1;
  color: var(--ink);
}
.amsg .punch .hot { color: var(--coral); }
.amsg .w { display: inline-block; opacity: 0; transform: translateY(12px); }
.amsg .w.on { animation: word-in .34s cubic-bezier(.2,.9,.25,1) forwards; }

/* inline CTA that appears BELOW the AI answer; the cursor clicks it */
.acta {
  align-self: flex-start; margin-top: 26px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 23px; font-weight: 700; letter-spacing: -.01em;
  color: #fff; background: var(--coral); border: none; border-radius: 16px;
  padding: 17px 28px; display: inline-flex; align-items: center; gap: 11px;
  box-shadow: 0 10px 24px -16px rgba(253,105,105,.4);
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: transform .13s cubic-bezier(.3,1.4,.5,1);
}
.acta.in { animation: acta-in .5s cubic-bezier(.2,1.25,.4,1) forwards; }
@keyframes acta-in { to { opacity: 1; transform: none; } }
.acta svg { width: 21px; height: 21px; }
.acta.press { transform: scale(.93); }

/* =====================================================================
   BEAT · PROACTIVE GREETING — the site wakes up before the visitor asks
   ===================================================================== */
.b-proactive {
  background: #12100F;
  overflow: hidden;
  color: #fff;
}
.b-proactive::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 84% 78%, rgba(253,105,105,.34), transparent 34%),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(145deg, #161311 0%, #0F0E0D 100%);
}
.pg-site {
  position: absolute; inset: 44px;
  border-radius: 26px;
  overflow: hidden;
  background: #F7F8FA;
  opacity: .28;
  transform: scale(.94);
  filter: saturate(.45) blur(.1px);
  box-shadow: 0 38px 100px -48px rgba(0,0,0,.8);
}
.beat.active.live .pg-site { animation: pg-site-breathe 2s ease forwards; }
@keyframes pg-site-breathe {
  0% { opacity: .14; transform: scale(.91); filter: saturate(.25) blur(1.5px); }
  24% { opacity: .34; transform: scale(.94); filter: saturate(.5) blur(.2px); }
  100% { opacity: .2; transform: scale(.925); filter: saturate(.25) blur(1px); }
}
.pg-browserbar {
  height: 45px; display: flex; align-items: center; gap: 13px;
  background: #E9EEF2; border-bottom: 1px solid #DDE4EA; padding: 0 16px;
}
.pg-browserbar .dots { display: flex; gap: 7px; }
.pg-browserbar .dots i { width: 11px; height: 11px; border-radius: 50%; background: #CBD5DE; }
.pg-browserbar .url {
  margin: 0 auto; min-width: 285px; height: 27px; border-radius: 8px;
  background: #fff; border: 1px solid #DDE4EA;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #A5AFB8; font-size: 13px; font-weight: 700;
}
.pg-browserbar .url svg { width: 12px; height: 12px; }
.pg-page { position: relative; height: calc(100% - 45px); padding: 50px; }
.pg-line { height: 32px; border-radius: 7px; background: #D7E0E8; }
.pg-line.one { width: 285px; }
.pg-line.two { width: 190px; margin-top: 16px; opacity: .68; }
.pg-panel {
  position: absolute; right: 50px; top: 56px;
  width: 220px; height: 215px; border-radius: 20px;
  background: linear-gradient(135deg, #E8EEF5, #D7E2EA);
}
.pg-card {
  position: absolute; bottom: 54px; height: 80px; border-radius: 16px;
  background: #EDF2F6;
}
.pg-card.a { left: 50px; width: 210px; }
.pg-card.b { left: 285px; width: 210px; }
.pg-glow {
  position: absolute; right: 24px; bottom: 22px;
  width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253,105,105,.7) 0%, rgba(253,105,105,.26) 30%, transparent 68%);
  opacity: 0; transform: scale(.45);
  filter: blur(3px);
}
.beat.active.live .pg-glow { animation: pg-glow-in 1.6s cubic-bezier(.2,.9,.2,1) .18s forwards; }
@keyframes pg-glow-in {
  0% { opacity: 0; transform: scale(.35); }
  28% { opacity: .86; transform: scale(.82); }
  100% { opacity: .54; transform: scale(1); }
}
.pg-radar {
  position: absolute; right: 62px; bottom: 62px;
  width: 116px; height: 116px; pointer-events: none;
}
.pg-radar i {
  position: absolute; inset: 0;
  border: 2px solid rgba(253,105,105,.72);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.18);
}
.beat.active.live .pg-radar i { animation: pg-ring 1.45s cubic-bezier(.16,.8,.18,1) .34s forwards; }
.beat.active.live .pg-radar i:nth-child(2) { animation-delay: .5s; }
.beat.active.live .pg-radar i:nth-child(3) { animation-delay: .66s; }
@keyframes pg-ring {
  0% { opacity: 0; transform: scale(.18); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.95); }
}
.pg-widget {
  position: absolute; right: 82px; bottom: 82px;
  width: 76px; height: 76px; border-radius: 50%;
  overflow: hidden;
  background: var(--coral);
  box-shadow: 0 25px 55px -12px rgba(253,105,105,.78);
  opacity: 0;
  transform: translateY(18px) scale(.74);
}
.beat.active.live .pg-widget { animation: pg-widget-pop .72s cubic-bezier(.2,1.45,.3,1) .42s forwards; }
.pg-widget img { width: 100%; height: 100%; display: block; }
@keyframes pg-widget-pop {
  0% { opacity: 0; transform: translateY(18px) scale(.74); }
  64% { opacity: 1; transform: translateY(-6px) scale(1.08); }
  100% { opacity: 1; transform: none; }
}
.pg-cursor {
  position: absolute; z-index: 34; width: 50px; height: 50px;
  left: 0; top: 0; opacity: 0;
  --cursor-x: 520px;
  --cursor-y: 574px;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0);
  transition: transform .54s cubic-bezier(.22,.72,.18,1), opacity .2s ease;
  will-change: transform, opacity;
  pointer-events: none;
}
.pg-cursor svg {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 4px 6px rgba(30,30,50,.3));
  transform: translate(10px, 12px) scale(.96);
  transform-origin: 22% 18%;
  transition: transform .22s cubic-bezier(.2,.9,.25,1);
  will-change: transform;
}
.pg-cursor.is-visible { opacity: 1; }
.pg-cursor.is-visible svg { transform: translate(0,0) scale(1); }
.pg-cursor.is-clicking svg { transform: translate(0,0) scale(.86); }
.beat.active.live.b-proactive.launching .pg-widget {
  animation: pg-widget-click .34s cubic-bezier(.2,1.2,.3,1) forwards;
}
@keyframes pg-widget-click {
  0% { opacity: 1; transform: none; }
  45% { opacity: 1; transform: scale(.86); }
  100% { opacity: 1; transform: scale(1.08); box-shadow: 0 28px 72px -10px rgba(253,105,105,.92); }
}
.beat.active.live.b-proactive.launching .pg-bubble {
  animation: pg-bubble-fold .34s cubic-bezier(.4,0,.25,1) forwards;
}
@keyframes pg-bubble-fold {
  to { opacity: 0; transform: translate(28px, 28px) scale(.82); }
}
.beat.active.live.b-proactive.launching .pg-label {
  animation: pg-label-out .28s ease forwards;
}
@keyframes pg-label-out {
  to { opacity: 0; transform: translate(-50%, -8px); }
}
.pg-bubble {
  position: absolute; right: 140px; bottom: 158px;
  max-width: 318px;
  padding: 17px 20px;
  background: rgba(255,255,255,.96);
  color: var(--ink);
  border-radius: 23px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 28px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.45);
  opacity: 0;
  transform: translate(42px, 42px) scale(.82) rotate(-2deg);
  transform-origin: bottom right;
}
.pg-bubble::after {
  content: "";
  position: absolute; right: 17px; bottom: -8px;
  width: 16px; height: 16px;
  background: rgba(255,255,255,.96);
  border-right: 1px solid rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(255,255,255,.45);
  transform: rotate(45deg);
  border-bottom-right-radius: 4px;
}
.beat.active.live .pg-bubble { animation: pg-bubble-fly .64s cubic-bezier(.18,1.16,.28,1) .96s forwards; }
@keyframes pg-bubble-fly {
  to { opacity: 1; transform: none; }
}
.pg-bubble-text {
  display: block;
  font-size: 23.5px;
  line-height: 1.17;
  font-weight: 800;
  letter-spacing: -.02em;
}
.pg-sparks i {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  opacity: 0;
  box-shadow: 0 0 18px rgba(255,255,255,.75);
}
.pg-sparks i:nth-child(1) { right: 265px; bottom: 278px; }
.pg-sparks i:nth-child(2) { right: 196px; bottom: 307px; width: 6px; height: 6px; }
.pg-sparks i:nth-child(3) { right: 106px; bottom: 254px; width: 5px; height: 5px; }
.pg-sparks i:nth-child(4) { right: 326px; bottom: 190px; width: 5px; height: 5px; }
.beat.active.live .pg-sparks i { animation: pg-spark .78s ease forwards; }
.beat.active.live .pg-sparks i:nth-child(1) { animation-delay: 1.08s; }
.beat.active.live .pg-sparks i:nth-child(2) { animation-delay: 1.18s; }
.beat.active.live .pg-sparks i:nth-child(3) { animation-delay: 1.3s; }
.beat.active.live .pg-sparks i:nth-child(4) { animation-delay: 1.39s; }
@keyframes pg-spark {
  0% { opacity: 0; transform: translateY(8px) scale(.3); }
  42% { opacity: .95; transform: translateY(0) scale(1); }
  100% { opacity: .28; transform: translateY(-6px) scale(.72); }
}
.pg-label {
  position: absolute; top: 136px; left: 50%;
  display: flex; flex-direction: column; gap: 7px;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 18px);
}
.beat.active.live .pg-label { animation: feature-label-in .58s var(--ease-premium) 1.5s forwards; }
.pg-label b {
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.pg-label span {
  color: rgba(255,255,255,.68);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* =====================================================================
   FEATURE · Suggested questions — inside the chat
   ===================================================================== */
.b-suggested {
  background: #12100F;
  overflow: hidden;
  color: #fff;
}
.b-suggested::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 78%, rgba(253,105,105,.24), transparent 34%),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.07), transparent 28%),
    linear-gradient(145deg, #161311 0%, #0F0E0D 100%);
}
.b-suggested::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 82%, transparent 100%);
  opacity: .34;
  transform: perspective(520px) rotateX(56deg) translateY(110px) scale(1.15);
  transform-origin: center bottom;
}
.sq-depth {
  display: none;
  position: absolute; inset: 0;
  pointer-events: none;
}
.sq-depth i {
  position: absolute;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0;
}
.sq-depth i:nth-child(1) { left: 86px; top: 188px; width: 468px; height: 322px; border-radius: 34px; transform: rotate(-4deg) scale(.92); }
.sq-depth i:nth-child(2) { left: 132px; top: 226px; width: 376px; height: 230px; border-radius: 28px; transform: rotate(5deg) scale(.9); }
.sq-depth i:nth-child(3) { left: 56px; top: 454px; width: 528px; height: 80px; border-radius: 999px; transform: rotate(-3deg) scale(.9); }
.beat.active.live .sq-depth i { animation: sq-depth-in .8s cubic-bezier(.2,.9,.25,1) forwards; }
.beat.active.live .sq-depth i:nth-child(2) { animation-delay: .08s; }
.beat.active.live .sq-depth i:nth-child(3) { animation-delay: .16s; }
@keyframes sq-depth-in {
  to { opacity: 1; transform: rotate(var(--unused, 0deg)) scale(1); }
}
.sq-aurora {
  position: absolute; left: 74px; right: 74px; top: 188px; height: 322px;
  background:
    linear-gradient(105deg, transparent 0%, rgba(253,105,105,.2) 28%, rgba(255,255,255,.16) 48%, transparent 68%),
    linear-gradient(20deg, rgba(253,105,105,.18), transparent 58%);
  border-radius: 38px;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(22px) scale(.9);
}
.beat.active.live .sq-aurora { animation: sq-aurora-in 1.25s ease .18s forwards; }
@keyframes sq-aurora-in {
  0% { opacity: 0; transform: translateY(22px) scale(.9); }
  48% { opacity: .78; }
  100% { opacity: .38; transform: none; }
}
.sq-label {
  position: absolute; top: 76px; left: 50%; z-index: 4;
  width: 540px;
  height: 78px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 18px);
}
.beat.active.live .sq-label { animation: feature-label-in .58s var(--ease-premium) .18s forwards; }
@keyframes feature-label-in {
  0% { opacity: 0; transform: translate(-50%, 18px) scaleX(.985); filter: blur(8px); }
  58% { opacity: 1; filter: blur(1.5px); }
  100% { opacity: 1; transform: translate(-50%, 0) scaleX(1); filter: blur(0); }
}
.sq-title,
.sq-sub {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity .32s ease, transform .32s var(--ease-settle), filter .32s ease;
}
.sq-title {
  top: 0;
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.sq-sub {
  top: 47px;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.sq-title-navigation,
.sq-sub-navigation {
  opacity: 0;
  transform: translate(-50%, 10px);
  filter: blur(4px);
}
.b-suggested.navigating .sq-title-suggested,
.b-suggested.navigating .sq-sub-suggested {
  opacity: 0;
  transform: translate(-50%, -10px);
  filter: blur(4px);
  transition-delay: .88s;
}
.b-suggested.navigating .sq-title-navigation,
.b-suggested.navigating .sq-sub-navigation {
  opacity: 1;
  transform: translate(-50%, 0);
  filter: blur(0);
  transition-delay: 1.04s;
}
.sq-chat {
  position: absolute; left: 88px; top: 188px; z-index: 3;
  width: 464px; height: 520px;
  overflow: hidden;
  color: var(--ink);
  background: #FAFAFA;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 30px;
  box-shadow: 0 34px 90px -34px rgba(0,0,0,.86), 0 0 0 1px rgba(253,105,105,.1);
  opacity: 0;
  transform-origin: 92% 90%;
  transform: scale(.08);
}
.beat.active.live .sq-chat { animation: sq-chat-in .72s var(--ease-premium) .04s forwards; }
@keyframes sq-chat-in {
  0% { opacity: 0; transform: scale(.08); border-radius: 50%; }
  12% { opacity: 1; }
  72% { opacity: 1; transform: translateY(-3px) scale(1.008); border-radius: 32px; }
  100% { opacity: 1; transform: none; border-radius: 30px; }
}
.sq-top {
  height: 72px;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #ECE6DF;
}
.sq-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden;
  background: var(--coral);
  box-shadow: 0 12px 28px -14px rgba(253,105,105,.9);
}
.sq-avatar img { width: 100%; height: 100%; display: block; }
.sq-agent { display: flex; align-items: center; }
.sq-agent b { font-size: 17px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.sq-thread {
  position: relative;
  height: calc(100% - 72px);
  padding: 24px 24px 36px;
  overflow: hidden;
}
.sq-agent-msg {
  width: max-content; max-width: 334px;
  padding: 0 2px;
  color: var(--ink);
  background: transparent;
  border-radius: 0;
  font-size: 23px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.035em;
  box-shadow: none;
  opacity: 0;
  transform: translateY(14px) scale(.96);
}
.beat.active.live .sq-agent-msg { animation: sq-message-in .46s cubic-bezier(.2,1,.3,1) .72s forwards; }
@keyframes sq-message-in { to { opacity: 1; transform: none; } }
.sq-options {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
  margin-right: -8px;
  margin-top: 18px;
}
.sq-options-title {
  align-self: flex-end;
  margin: 0 4px 1px 0;
  color: rgba(27,26,24,.48);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
}
.sq-option {
  position: relative;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: flex-start;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #E8E2DD;
  border-radius: 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 18px 38px -28px rgba(0,0,0,.72);
  opacity: 0;
  transform: translateY(20px) scale(.97);
  text-align: left;
}
.sq-option::before {
  content: "";
  position: absolute; inset: 1px;
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(255,255,255,.72), transparent 46%, rgba(253,105,105,.055));
  pointer-events: none;
}
.sq-option span {
  position: relative;
  font-size: 17.5px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.sq-option.one,
.sq-option.two,
.sq-option.three { width: 286px; --d: 1.08s; }
.sq-option.two { --d: 1.24s; }
.sq-option.three { --d: 1.4s; }
.beat.active.live .sq-options-title { animation: sq-option-in .42s var(--ease-settle) .92s forwards; }
.beat.active.live .sq-option { animation: sq-option-in .54s var(--ease-premium) var(--d) forwards; }
.beat.active.live .sq-option.one { animation: sq-option-in .54s var(--ease-premium) var(--d) forwards, sq-option-pulse .86s ease 1.82s forwards; }
.beat.active.live.b-suggested.selecting .sq-option.one { animation: sq-option-select .34s cubic-bezier(.2,1,.28,1) forwards; }
.beat.active.live.b-suggested.selecting .sq-options-title,
.beat.active.live.b-suggested.selecting .sq-option.two,
.beat.active.live.b-suggested.selecting .sq-option.three { animation: sq-unselected-out .22s ease forwards; }
@keyframes sq-option-in { to { opacity: 1; transform: none; } }
@keyframes sq-option-pulse {
  0%, 100% { box-shadow: 0 18px 38px -28px rgba(0,0,0,.72), 0 0 0 0 rgba(253,105,105,0); }
  48% { box-shadow: 0 18px 38px -28px rgba(0,0,0,.72), 0 0 0 7px rgba(253,105,105,.24); }
}
@keyframes sq-option-select {
  0% { opacity: 1; transform: none; background: #fff; }
  45% { opacity: 1; transform: translateY(1px) scale(.985); background: #FFF1EF; }
  100% { opacity: 1; transform: translateY(-2px) scale(1.004); background: #FFF6F4; box-shadow: 0 18px 38px -28px rgba(0,0,0,.72), 0 0 0 7px rgba(253,105,105,.2); }
}
@keyframes sq-unselected-out {
  to { opacity: 0; transform: translateY(14px) scale(.96); }
}
.b-suggested.navigating .sq-agent-msg {
  animation: sq-message-scroll-away .46s cubic-bezier(.42,0,.2,1) .64s both !important;
}
.b-suggested.navigating .sq-options-title,
.b-suggested.navigating .sq-option.two,
.b-suggested.navigating .sq-option.three {
  opacity: 0 !important;
  transform: translateY(14px) scale(.96) !important;
  animation: none !important;
}
.b-suggested.navigating .sq-option.one {
  z-index: 3;
  animation: sq-option-to-user .44s cubic-bezier(.2,.9,.25,1) forwards !important;
}
@keyframes sq-option-to-user {
  0% { opacity: 1; transform: translate(0, -3px) scale(1.01); background: #FFF6F4; }
  48% { opacity: 1; transform: translate(0, -3px) scale(.94); background: #F0F1F2; box-shadow: 0 8px 18px -16px rgba(0,0,0,.5); }
  100% { opacity: 0; transform: translate(0, -3px) scale(.94); background: #F0F1F2; box-shadow: 0 8px 18px -16px rgba(0,0,0,.5); }
}
@keyframes sq-message-scroll-away {
  0% { opacity: 1; transform: none; }
  62% { opacity: 0; transform: translateY(-58px); }
  100% { opacity: 0; transform: translateY(-78px); }
}
.sq-nav-flow {
  position: absolute;
  left: 24px; right: 16px; top: 22px;
  opacity: 0;
  pointer-events: none;
}
.b-suggested.navigating .sq-nav-flow { opacity: 1; transition: opacity .01s linear .32s; }
.sq-nav-user {
  margin-left: auto;
  width: max-content;
  max-width: 286px;
  padding: 13px 16px;
  border-radius: 17px 17px 6px 17px;
  color: var(--ink);
  background: #F0F1F2;
  font-size: 17px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(18px) scale(.96);
}
.b-suggested.navigating .sq-nav-user { animation: nav-user-paste-scroll .78s cubic-bezier(.2,1,.3,1) .34s forwards; }
@keyframes nav-user-paste-scroll {
  0% { opacity: 0; transform: translateY(96px) scale(.96); }
  18% { opacity: 1; transform: translateY(96px) scale(.96); }
  46% { opacity: 1; transform: translateY(96px) scale(1); }
  100% { opacity: 1; transform: none; }
}
.sq-nav-answer {
  width: max-content;
  max-width: 326px;
  margin-top: 20px;
  padding: 0 2px;
  color: var(--ink);
  background: transparent;
  border-radius: 0;
  font-size: 23px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.035em;
  box-shadow: none;
  opacity: 0;
  transform: translateY(16px) scale(.96);
}
.b-suggested.navigating .sq-nav-answer { animation: nav-message-in .42s var(--ease-settle) 1.28s forwards; }
.sq-nav-cta {
  position: relative;
  z-index: 2;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 326px;
  margin-top: 14px;
  padding: 16px 17px 16px 18px;
  border: none;
  border-radius: 18px;
  color: #fff;
  background: var(--coral);
  box-shadow: 0 22px 44px -22px rgba(253,105,105,.88);
  opacity: 0;
  transform: translateY(18px) scale(.96);
}
.b-suggested.navigating .sq-nav-cta { animation: nav-cta-in .5s var(--ease-premium) 1.68s forwards, nav-cta-pulse .9s ease 2.7s forwards; }
.sq-nav-cta span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sq-nav-cta b {
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.025em;
}
.sq-nav-cta i {
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.01em;
}
.sq-nav-cta svg { flex: 0 0 auto; width: 23px; height: 23px; }
.sq-compose {
  position: absolute; left: 24px; right: 24px; bottom: 22px;
  height: 43px;
  border-radius: 999px;
  background: rgba(27,26,24,.06);
  border: 1px solid rgba(27,26,24,.08);
  display: none;
  opacity: 0;
  transform: translateY(10px);
}
.sq-compose i {
  position: absolute; left: 21px; top: 11px;
  width: 2px; height: 20px; border-radius: 2px;
  background: rgba(27,26,24,.42);
}
.beat.active.live .sq-compose { animation: sq-compose-in .38s ease .88s forwards; }
.beat.active.live .sq-compose i { animation: sq-caret 1s steps(2,end) 1.22s infinite; }
@keyframes sq-compose-in { to { opacity: 1; transform: none; } }
@keyframes sq-caret { 50% { opacity: 0; } }

/* =====================================================================
   FEATURE · Page navigation — answer + route visitors to the right page
   ===================================================================== */
.b-navigation {
  background: #12100F;
  overflow: hidden;
  color: #fff;
}
.b-navigation::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 78%, rgba(253,105,105,.25), transparent 34%),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.07), transparent 28%),
    linear-gradient(145deg, #161311 0%, #0F0E0D 100%);
}
.b-navigation::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 82%, transparent 100%);
  opacity: .28;
  transform: perspective(520px) rotateX(56deg) translateY(110px) scale(1.15);
  transform-origin: center bottom;
}
.nav-aurora {
  position: absolute; left: 74px; right: 74px; top: 188px; height: 322px;
  background:
    linear-gradient(105deg, transparent 0%, rgba(253,105,105,.18) 28%, rgba(255,255,255,.14) 48%, transparent 68%),
    linear-gradient(20deg, rgba(253,105,105,.16), transparent 58%);
  border-radius: 38px;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(22px) scale(.9);
}
.beat.active.live .nav-aurora { animation: sq-aurora-in 1.25s ease .12s forwards; }
.nav-label {
  position: absolute; top: 76px; left: 50%; z-index: 4;
  display: flex; flex-direction: column; gap: 7px;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 18px);
}
.beat.active.live .nav-label { animation: feature-label-in .58s var(--ease-premium) .14s forwards; }
.nav-label b {
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.nav-label span {
  color: rgba(255,255,255,.68);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.nav-chat {
  position: absolute; left: 88px; top: 188px; z-index: 3;
  width: 464px; height: 520px;
  overflow: hidden;
  color: var(--ink);
  background: #FAFAFA;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 30px;
  box-shadow: 0 34px 90px -34px rgba(0,0,0,.86), 0 0 0 1px rgba(253,105,105,.1);
  opacity: 0;
  transform: translateY(12px);
}
.beat.active.live .nav-chat { animation: nav-chat-in .45s ease forwards; }
@keyframes nav-chat-in { to { opacity: 1; transform: none; } }
.nav-top {
  height: 72px;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #ECE6DF;
}
.nav-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden;
  background: var(--coral);
  box-shadow: 0 12px 28px -14px rgba(253,105,105,.9);
}
.nav-avatar img { width: 100%; height: 100%; display: block; }
.nav-agent { display: flex; align-items: center; }
.nav-agent b { font-size: 17px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.nav-thread {
  position: relative;
  height: calc(100% - 72px);
  padding: 22px 24px 36px;
}
.nav-user-msg {
  position: relative;
  margin-left: auto;
  width: max-content;
  max-width: 312px;
  padding: 13px 16px;
  border-radius: 17px 17px 6px 17px;
  color: var(--ink);
  background: #F0F1F2;
  font-size: 17px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(18px) scale(.96);
}
.beat.active.live .nav-user-msg { animation: nav-message-in .42s var(--ease-settle) .18s forwards; }
.nav-agent-msg {
  width: max-content;
  max-width: 322px;
  margin-top: 16px;
  padding: 15px 17px;
  color: #fff;
  background: var(--ink);
  border-radius: 18px 18px 18px 6px;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: 0 18px 38px -24px rgba(0,0,0,.9);
  opacity: 0;
  transform: translateY(16px) scale(.96);
}
.beat.active.live .nav-agent-msg { animation: nav-message-in .44s var(--ease-settle) .68s forwards; }
@keyframes nav-message-in { to { opacity: 1; transform: none; } }
.nav-cta {
  position: relative;
  z-index: 2;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 326px;
  margin-top: 14px;
  padding: 16px 17px 16px 18px;
  border: none;
  border-radius: 18px;
  color: #fff;
  background: var(--coral);
  box-shadow: 0 22px 44px -22px rgba(253,105,105,.88);
  opacity: 0;
  transform: translateY(18px) scale(.96);
}
.beat.active.live .nav-cta { animation: nav-cta-in .52s var(--ease-premium) 1.12s forwards, nav-cta-pulse .9s ease 2.2s forwards; }
.nav-cta span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.nav-cta b {
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.025em;
}
.nav-cta i {
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.01em;
}
.nav-cta svg { flex: 0 0 auto; width: 23px; height: 23px; }
@keyframes nav-cta-in { to { opacity: 1; transform: none; } }
@keyframes nav-cta-pulse {
  0%, 100% { box-shadow: 0 22px 44px -22px rgba(253,105,105,.88), 0 0 0 0 rgba(253,105,105,0); }
  48% { box-shadow: 0 22px 44px -22px rgba(253,105,105,.88), 0 0 0 8px rgba(253,105,105,.22); }
}
.nav-page-card {
  position: absolute; right: 22px; bottom: -36px;
  width: 222px; height: 132px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #E8E2DD;
  box-shadow: 0 24px 54px -34px rgba(0,0,0,.7);
  padding: 18px;
  opacity: 0;
  transform: translate(26px, 26px) scale(.92);
}
.beat.active.live .nav-page-card { animation: nav-page-in .58s var(--ease-premium) 1.6s forwards; }
@keyframes nav-page-in { to { opacity: 1; transform: none; } }
.nav-page-card em {
  display: block;
  color: rgba(27,26,24,.42);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.01em;
}
.nav-page-card strong {
  display: block;
  margin-top: 12px;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
}
.nav-page-card i {
  display: block;
  height: 10px;
  margin-top: 12px;
  border-radius: 999px;
  background: #EEE9E4;
}
.nav-page-card i:last-child { width: 68%; margin-top: 8px; }

/* =====================================================================
   BEAT · CTA — CatchWhen payoff
   ===================================================================== */
.b-cta {
  background:
    radial-gradient(circle at 50% 82%, rgba(253,105,105,.14), transparent 38%),
    radial-gradient(circle at 80% 16%, rgba(253,105,105,.07), transparent 26%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  align-items: center; justify-content: center; text-align: center; padding: 72px 64px 64px;
  overflow: hidden;
}
.b-cta::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-78%) skewX(-8deg);
  background: linear-gradient(106deg,
    transparent 0%,
    transparent 39%,
    rgba(253,105,105,.08) 45%,
    rgba(253,105,105,.28) 49%,
    rgba(255,255,255,.62) 52%,
    rgba(253,105,105,.12) 57%,
    transparent 65%,
    transparent 100%
  );
  filter: blur(.2px);
  will-change: transform, opacity;
}
.b-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(253,105,105,.10), transparent 36%, rgba(253,105,105,.06));
  will-change: opacity;
}
.beat.active.live.b-cta::before { animation: cta-sweep .92s cubic-bezier(.22,.72,.18,1) .02s forwards; }
.beat.active.live.b-cta::after { animation: cta-glow-wash 1.18s ease-out forwards; }
@keyframes cta-sweep {
  0% { opacity: 0; transform: translateX(-78%) skewX(-8deg); }
  18% { opacity: 1; }
  74% { opacity: .72; }
  100% { opacity: 0; transform: translateX(78%) skewX(-8deg); }
}
@keyframes cta-glow-wash {
  0% { opacity: 0; }
  34% { opacity: 1; }
  100% { opacity: .3; }
}
.cta-rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta-ring { position: absolute; border: 2.5px solid rgba(253,105,105,.22); border-radius: 50%; opacity: 0; }
.beat.active.live .cta-ring { animation: tw 2.6s ease-in-out infinite; animation-delay: var(--d,0s); }
.cta-logo {
  width: 76px; height: 76px; border-radius: 20px; overflow: hidden;
  background: #fff; padding: 10px; margin-bottom: 34px;
  box-shadow: 0 22px 46px -22px rgba(253,105,105,.72), 0 0 0 1px rgba(232,226,221,.8);
  opacity: 0; transform: translateY(18px) scale(.8);
}
.beat.active.live .cta-logo { animation: pop .6s cubic-bezier(.2,1.2,.3,1) forwards; }
.cta-logo img { width: 100%; height: 100%; }
.cta-h {
  position: relative;
  z-index: 2;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 50px; line-height: 1.17; font-weight: 700; letter-spacing: -.035em;
  color: #111827; margin: 0 0 42px;
}
.cta-h .ln {
  display: block;
  opacity: 0;
  transform: translateY(22px) scaleX(.985);
  filter: blur(8px);
}
.beat.active.live .cta-h .ln { animation: cta-line-in .64s var(--ease-premium) forwards; }
.beat.active.live .cta-h .ln:nth-child(1){ animation-delay:.15s; }
.beat.active.live .cta-h .ln:nth-child(2){ animation-delay:.28s; }
.beat.active.live .cta-h .ln:nth-child(3){ animation-delay:.41s; }
@keyframes cta-line-in {
  0% { opacity: 0; transform: translateY(22px) scaleX(.985); filter: blur(8px); }
  58% { opacity: 1; transform: translateY(-1px) scaleX(1); filter: blur(1.4px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.cta-h .brand-word {
  display: inline-block;
  padding-right: .06em;
  color: #111827;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.025em;
}
.cta-h .brand-word span:last-child {
  display: inline-block;
  padding-right: .06em;
  color: transparent;
  background: linear-gradient(90deg, #FD6969 0%, #C44A33 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.cta-btn {
  position: relative;
  z-index: 2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: -.01em;
  color: #fff; background: var(--coral); border: none; border-radius: 999px;
  padding: 20px 38px; display: inline-flex; align-items: center; gap: 12px;
  box-shadow: 0 24px 48px -22px rgba(253,105,105,.9);
  opacity: 0; transform: translateY(16px) scale(.94);
}
.beat.active.live .cta-btn { animation: cta-button-in .58s var(--ease-premium) .55s forwards; }
.cta-btn svg { width: 22px; height: 22px; }
.beat.active.live .cta-btn svg { animation: arr-nudge 1.5s ease-in-out 1.3s infinite; }
@keyframes cta-button-in {
  0% { opacity: 0; transform: translateY(16px) scale(.96); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.002); }
  100% { opacity: 1; transform: none; }
}
@keyframes arr-nudge { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(6px);} }

/* =====================================================================
   PAUSED — freeze loops AND show the active scene fully settled,
   so the design can be inspected frame-by-frame.
   ===================================================================== */
.adv.paused * { animation-play-state: paused !important; }
.adv.paused .cta-h .ln,
.adv.paused .cta-logo,
.adv.paused .cta-btn,
.adv.paused .sq-label,
.adv.paused .sq-chat,
.adv.paused .sq-agent-msg,
.adv.paused .sq-option,
.adv.paused .sq-compose,
.adv.paused .sq-nav-flow,
.adv.paused .sq-nav-user,
.adv.paused .sq-nav-answer,
.adv.paused .sq-nav-cta,
.adv.paused .nav-label,
.adv.paused .nav-chat,
.adv.paused .nav-user-msg,
.adv.paused .nav-agent-msg,
.adv.paused .nav-cta,
.adv.paused .nav-page-card,
.adv.paused .b-open .acta,
.adv.paused .amsg .w {
  opacity: 1 !important; transform: none !important; animation: none !important;
}
.adv.paused .cta-h .ln { filter: none !important; }
.adv.paused .cta-ring { animation: none !important; opacity: .5 !important; transform: scale(1) !important; }
.adv.paused .b-cta::before { animation: none !important; opacity: 0 !important; }
.adv.paused .b-cta::after { animation: none !important; opacity: .3 !important; }
.adv.paused .b-open.bubble .open-bubble { opacity: 1 !important; transform: none !important; animation: none !important; }
.adv.paused .b-open.open-chat .chat-surface { opacity: 1 !important; transform: scale(1) !important; border-radius: 26px !important; animation: none !important; }
.adv.paused .b-open.compose-in:not(.compose-sent) .cw-input { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; animation: none !important; }
.adv.paused .b-open.compose-sent .cw-input { opacity: 0 !important; }
.adv.paused .b-open.compose-active .cw-input .field .cur { animation: none !important; opacity: 1 !important; }
.adv.paused .umsg.stick { animation: none !important; opacity: 1 !important; transform: none !important; }