/* XplainMaths layout refinement: bright brand identity without a dark banner block. */
/* The supplied neon banner is intentionally kept for sharing/marketing imagery,
   while the page features the brand's colour energy as a slim integrated motif. */
.hero-strip{position:relative;padding-top:27px!important;margin-top:8px;align-items:center}
.hero-strip::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:100px;background:linear-gradient(90deg,#14d6f0 0%,#3070f7 25%,#7d51ed 52%,#ec4dab 78%,#ffad34 100%);box-shadow:0 5px 18px #8059ee35}
.hero-strip span{position:relative;z-index:1}
/* Decorative labels should never obscure a mock-up's real text. */
.hero-preview{isolation:isolate}
.float-pill-top{top:-26px!important;right:17px!important;transform:rotate(3deg)!important}
.float-pill-bottom{bottom:-15px!important;left:-17px!important;transform:rotate(-3deg)!important}
.dashboard-head{min-width:0;gap:10px}
.dashboard-head>span:first-child{min-width:0;flex:1;overflow-wrap:anywhere}
.dashboard-demo{flex:0 0 auto;white-space:nowrap}
.dashboard-preview{isolation:isolate}
.dashboard-content{overflow-wrap:anywhere}
/* Prevent micro-type and messaging content from squeezing into other labels. */
.device-nav{min-width:0;gap:10px}
.device-brand{min-width:0;white-space:nowrap}
.device-chip{white-space:nowrap;flex-shrink:0}
.chat-body{overflow-wrap:anywhere}
.chat-message .chat-body{min-width:0}
.game-topline{min-width:0}
.game-top-brand{min-width:0}
.game-top-brand>span:last-child{min-width:0}
.game-top-brand strong,.game-top-brand small{overflow-wrap:anywhere}
@media(max-width:760px){
 .hero-strip{margin-top:13px;gap:10px;flex-wrap:wrap;padding-top:22px!important}
 .hero-strip span{line-height:1.5}
 .hero-preview{padding:17px 0 7px!important;overflow:visible}
 /* Mobile preview is clean: no floating stickers over app interface. */
 .float-pill-top{display:none!important}
 .float-pill-bottom{position:relative!important;inset:auto!important;transform:none!important;margin:11px auto 0!important;width:max-content;max-width:100%;padding:9px 14px!important;font-size:11px!important;text-align:center}
 .dashboard-preview{transform:none!important;max-width:100%}
 .dashboard-head{gap:8px;padding:12px 13px!important;flex-wrap:wrap}
 .dashboard-demo{font-size:8px!important;letter-spacing:.05em!important;padding:5px 7px!important}
 .dashboard-content{padding:17px!important}
 .mini-tutor-bubble p{overflow-wrap:anywhere}
 .story-beat h2{overflow-wrap:break-word}
 .aura-spark{opacity:.12!important}
 .story-device{transform:translateY(var(--device-shift,0px)) scale(var(--device-scale,1))!important}
 .device-chip{font-size:8px;letter-spacing:0!important}
 .game-learning-panel{justify-content:flex-start!important}
}
@media(max-width:400px){
 .hero-strip{font-size:8px!important;letter-spacing:.055em!important}
 .logo{gap:6px!important}
 .header-inner{gap:6px!important}
 .header-mobile-join{padding:8px!important;font-size:11px!important}
 .mobile-menu-button{padding:6px!important}
 .dashboard-head{font-size:12px!important}
 .dashboard-demo{font-size:7px!important}
 .story-headlines{max-width:100%}
 .story-beat h2{font-size:clamp(27px,9.2vw,36px)!important}
 .story-device{width:100%!important;max-width:100%!important}
 .chat-message .chat-body{font-size:10px!important}
 .game-top-brand strong{font-size:9px!important}
 .game-top-brand small{font-size:9px!important}
}
/* Future-proof tiny screens; never allow the decorative chrome to expand page width. */
@media(max-width:350px){
 .hero h1{font-size:clamp(42px,13vw,54px)!important}
 .hero-proof{font-size:11px!important}
 .float-pill-bottom{font-size:10px!important}
 .game-logo-official{flex:0 0 38px!important;width:38px!important;height:38px!important}
 .game-logo-mark{display:none!important}
 .story-overline{letter-spacing:.08em!important}
}

/* Prevent the old and new tutor headlines from cross-fading over one another.
   The prior chapter disappears immediately, then the new one enters cleanly. */
.story-beat{transition:none!important;opacity:0;visibility:hidden;transform:translateY(10px) scale(1)!important}
.story-beat.is-active{opacity:1;visibility:visible;transform:translateY(0) scale(1)!important;animation:xm-story-chapter-enter .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes xm-story-chapter-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* No blur across teaching content: students should always be able to read the maths. */
.chat-message{filter:none!important;transition:opacity .35s ease,transform .4s ease,max-height .4s ease!important}
@media(max-width:350px){.header-mobile-join::before{content:none!important}}
@media(prefers-reduced-motion:reduce){.story-beat.is-active{animation:none!important}}
@media(max-width:400px){.game-round{white-space:nowrap!important;font-size:10px!important;padding:7px!important}}