/* The same conversation changes channel without changing its place on the page. */
.challenge-page .hero-showcase{display:flex;flex-direction:column;gap:20px;align-items:stretch;margin:24px auto 0;max-width:500px}
.challenge-page .hero-showcase .hero-action{margin:0 auto;min-width:0;width:100%;max-width:520px}
.challenge-page .hero-showcase .challenge-cta{width:100%;min-width:0;padding:16px}
.challenge-page .hero-showcase .hero-offer-window{width:100%;max-width:100%;margin:0 auto}
.challenge-page .conversation-demo{--demo-accent:#0759ca;--demo-out:#0759ca;--demo-ink:#17233c;--demo-surface:#fff;--demo-canvas:#f6f8fc;margin:0 auto;min-width:0;width:260px;max-width:100%;text-align:left}
.demo-symbols{position:absolute;overflow:hidden;pointer-events:none}
.demo-window{display:flex;flex-direction:column;height:380px;background:var(--demo-surface);color:var(--demo-ink);border:7px solid #17233c;border-radius:34px;overflow:hidden;box-shadow:0 24px 60px -25px #020b1cc7;transition:background-color .45s}
.demo-phone-cap{position:relative;height:23px;flex:none;background:var(--demo-surface)}
.demo-phone-cap::after{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:64px;height:13px;background:#17233c;border-radius:12px}
.demo-window::after{content:"";width:68px;height:4px;flex:none;margin:8px auto;background:#17233c;border-radius:4px}
.demo-window-bar{display:flex;align-items:center;justify-content:space-between;padding:2px 14px;border-bottom:1px solid #e0e6f0;font-size:11px;line-height:1.2;color:var(--demo-accent);background:var(--demo-surface);transition:color .45s,background-color .45s}
.demo-back{font-size:18px;line-height:14px}
.demo-window-tools{letter-spacing:2px;font-size:10px}
.demo-contact{display:flex;align-items:center;gap:11px;padding:8px 14px;background:var(--demo-surface);transition:background-color .45s}
.demo-contact strong{display:block;font-size:13px;line-height:1.5;font-weight:800}
.demo-contact>div>span{display:block;font-size:10px;color:#58677e;line-height:1.6}
.demo-channel-mark{position:relative;flex:0 0 34px;width:34px;height:34px;background:#edf2fb;border-radius:10px;color:var(--demo-accent);transition:background-color .45s,color .45s,border-radius .45s}
.demo-channel-mark svg{position:absolute;inset:7px;width:20px;height:20px;opacity:0;transform:scale(.65) rotate(-15deg);transition:opacity .35s,transform .55s cubic-bezier(.22,1,.36,1)}
[data-channel="messenger"] .demo-mark-messenger,[data-channel="sms"] .demo-mark-sms,[data-channel="email"] .demo-mark-email,[data-channel="instagram"] .demo-mark-instagram{opacity:1;transform:scale(1) rotate(0)}
.demo-contact-status{width:7px;height:7px;background:#238453;border-radius:50%;margin-left:auto}
.demo-subject{height:0;overflow:hidden;opacity:0;font-size:11px;font-weight:700;padding:0 17px;background:var(--demo-surface);transition:opacity .35s}
.demo-thread{list-style:none;display:flex;flex-direction:column;flex:1;min-height:0;gap:6px;padding:8px 12px;margin:0;overflow-y:auto;scrollbar-width:none;background:var(--demo-canvas);transition:background-color .45s}
.demo-message{position:relative;max-width:87%;font-size:13px;line-height:1.5;transition:opacity .28s,transform .4s cubic-bezier(.22,1,.36,1);opacity:1;transform:none}
.demo-message p{margin:0;padding:6px 9px;line-height:1.45;font-size:12px;border-radius:14px 14px 14px 4px;background:#e7edf5;color:#17233c;transition:background .45s,color .45s,border-radius .55s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.demo-customer{align-self:flex-start}
.demo-agent{align-self:flex-end}
.demo-agent p{color:#fff;background:var(--demo-out);border-radius:14px 14px 4px 14px}
.demo-sender{display:block;font-size:9px;font-weight:700;line-height:1.5;margin-bottom:3px;color:#58677e}
.demo-agent .demo-sender{text-align:right}
.demo-typing{display:flex;align-items:center;gap:3px;padding:0 14px;height:16px;background:var(--demo-canvas);opacity:0;transition:opacity .2s,background-color .45s}
.demo-typing>span{display:block;width:4px;height:4px;background:#58677e;border-radius:50%}
.demo-typing small{font-size:9px;line-height:1.4;color:#58677e;margin-left:5px}
.conversation-demo.is-agent-typing .demo-typing{justify-content:flex-end}
.demo-compose{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;font-size:10px;color:#58677e;border-top:1px solid #e0e6f0;background:var(--demo-surface);transition:background-color .45s}
.demo-compose svg{width:17px;height:17px;flex:none;color:var(--demo-accent);transition:color .45s}
.conversation-demo[data-channel="sms"]{--demo-accent:#17662e;--demo-out:#17662e;--demo-canvas:#fff;--demo-radius:22px}
[data-channel="sms"] .demo-message p{border-radius:18px 18px 18px 6px;background:#e8ebef}
[data-channel="sms"] .demo-agent p{border-radius:18px 18px 6px 18px;background:var(--demo-out);color:#fff}
[data-channel="sms"] .demo-channel-mark{background:#e7f2e9;border-radius:14px}
.conversation-demo[data-channel="email"]{--demo-accent:#9a3325;--demo-canvas:#fff;--demo-radius:8px}
[data-channel="email"] .demo-subject{height:18px;opacity:1}
[data-channel="email"] .demo-contact-status{visibility:hidden}
[data-channel="email"] .demo-thread{gap:6px;padding-top:5px}
[data-channel="email"] .demo-message{max-width:91%}
[data-channel="email"] .demo-message p{background:#f1f4f8;color:#17233c;border-radius:2px;font-size:12px;padding:6px 9px}
[data-channel="email"] .demo-agent p{background:#9a3325;color:#fff}

[data-channel="email"] .demo-channel-mark{background:#faeae7;border-radius:6px}
.conversation-demo[data-channel="instagram"]{--demo-accent:#863ca8;--demo-out:linear-gradient(105deg,#643acb,#a12c80);--demo-canvas:#faf8fd;--demo-radius:18px}
[data-channel="instagram"] .demo-channel-mark{background:#f4eaf9;border-radius:12px}
[data-channel="instagram"] .demo-message p{border-radius:16px 16px 16px 4px;background:#eae6ef}
[data-channel="instagram"] .demo-agent p{border-radius:16px 16px 4px 16px;background:var(--demo-out);color:#fff}
.demo-thread::-webkit-scrollbar{display:none}
.conversation-demo.is-enhanced .demo-message:not([data-revealed]){display:none}
.conversation-demo.is-enhanced .demo-message[data-revealed]{animation:demo-message-in .3s cubic-bezier(.22,1,.36,1)}
@keyframes demo-message-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.conversation-demo.is-typing .demo-typing{opacity:1}
.conversation-demo.is-typing .demo-typing>span{animation:demo-type .9s ease-in-out infinite}
.conversation-demo .demo-typing>span:nth-child(2){animation-delay:.15s}
.conversation-demo .demo-typing>span:nth-child(3){animation-delay:.3s}
.conversation-demo.is-paused .demo-typing>span{animation-play-state:paused}
@keyframes demo-type{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}}
@media(max-width:680px){.challenge-page .hero-showcase{gap:16px;margin-top:24px}.demo-message{max-width:91%}}
/* On shorter desktop/tablet screens, keep the conversation and enrollment action in view. */
@media(min-width:681px) and (max-height:800px){
  .challenge-page .hero-heading{padding-top:18px}
  .challenge-page .hero-heading>.label{margin-bottom:10px}
  .challenge-page .hero-heading h1{font-size:clamp(28px,3.2vw,38px);line-height:1.1}
  .challenge-page .hero-heading>p{font-size:15px;line-height:1.6;margin-top:14px}
  .challenge-page .hero-showcase{margin-top:20px;gap:16px}
  .challenge-page .hero-showcase .challenge-cta{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){.conversation-demo *{animation:none!important;transition:none!important}.conversation-demo.is-enhanced .demo-message{opacity:1;transform:none}.conversation-demo .demo-typing{opacity:0}}