/* Home refinements, using the existing Lexi palette and components. */
.lexi-hero{background:radial-gradient(ellipse at 82% 26%,rgba(116,190,255,.25),transparent 32%),linear-gradient(125deg,#152761 0%,#243fbb 53%,#315ff6 100%)!important;min-height:340px!important}
.lexi-hero>.lexi-hero-text{min-width:0;padding-bottom:30px;overflow-wrap:anywhere}
.lexi-hero-title{line-height:1.12!important}
.lexi-hero-art:before{content:"";position:absolute;inset:18% 2% 6%;background:radial-gradient(ellipse,rgba(161,217,255,.24),transparent 68%);pointer-events:none}
.lexi-hero-art .lexi-live-body img{filter:drop-shadow(0 12px 16px rgba(10,16,52,.32))!important}
.lexi-streak b::before{content:"";width:22px;height:28px;right:-7px;top:-10px;background:url('assets/lexi-flame.svg') center/contain no-repeat}
.lexi-streak b{background:#fff2e5;box-shadow:inset 0 0 0 1px #ffe1c6}
.course-card.teen::after{content:"";position:absolute;right:2%;top:14%;width:43%;height:72%;background:url('assets/lexi-course-art.svg') center/contain no-repeat;pointer-events:none}
.course-card.teen .course-caption{z-index:2;pointer-events:none}
.course-card.teen .teen-num{font-size:60px;right:14px;bottom:8px;color:rgba(255,255,255,.23)}
.course-card.teen .course-caption h3,.course-card.teen .course-caption p{max-width:58%}
.bottom-nav a{transition:background-color .18s ease,color .18s ease,transform .18s ease}
.bottom-nav a svg{width:24px;height:24px;flex:none;transition:transform .18s ease}
.bottom-nav a:hover svg{transform:translateY(-2px)}
.bottom-nav a:focus-visible,.course-card:focus-visible{outline:3px solid #2c56f5;outline-offset:3px}
@media(max-width:640px){.lexi-hero{min-height:0!important;padding:22px 18px!important}.lexi-hero>.lexi-hero-text{padding-bottom:0}.course-card.teen::after{right:1%;top:10%;width:44%;height:78%}.course-card.teen .teen-num{font-size:48px}}
@media(prefers-reduced-motion:reduce){.bottom-nav a,.bottom-nav a svg,.course-card{transition:none!important}.bottom-nav a:hover svg{transform:none}}

/* Travel illustrations extend the existing Spotlight 2–4 collection. */
.course-card.teen{background-image:var(--travel-art)!important;background-size:auto 100%!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#e8efff!important}
.course-card.grade-5{--travel-art:url('assets/lexi-travel-5.webp')}
.course-card.grade-6{--travel-art:url('assets/lexi-travel-6.webp')}
.course-card.grade-7{--travel-art:url('assets/lexi-travel-7.webp')}
.course-card.grade-8{--travel-art:url('assets/lexi-travel-8.webp')}
.course-card.grade-9{--travel-art:url('assets/lexi-travel-9.webp')}
.course-card.teen::before,.course-card.teen::after,.course-card.teen .teen-num{display:none!important}
.course-card.teen .course-caption{background:linear-gradient(90deg,rgba(255,255,255,.84),rgba(255,255,255,.34) 50%,transparent 76%)!important}
.course-card.teen .course-caption h3{color:var(--w-ink)!important}
.course-card.teen .course-caption p{color:var(--w-ink2)!important;font-weight:700}
.course-card.teen .book-meter span{color:var(--w-ink2)!important}
.course-card.teen .book-meter i{background:linear-gradient(90deg,var(--w-mint) var(--p,0%),#dbe3f1 var(--p,0%))}
.course-card.teen .course-caption>span{background:var(--w-blue)!important;color:white!important}
@media(min-width:901px){.lexi-hero{align-self:start;height:390px!important;min-height:0!important}.lexi-hero>.lexi-hero-art .lexi-live{width:min(142%,420px);margin-right:-12%}}
.lexi-streak b::before{filter:drop-shadow(0 0 3px rgba(255,157,41,.65));animation:lexi-flame-glow 2.8s ease-in-out infinite}
.lexi-streak b::after{content:'✦';position:absolute;right:-13px;top:-14px;color:#f6a525;font-size:12px;line-height:1;animation:lexi-sparkle 2.8s ease-in-out infinite}
@keyframes lexi-flame-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,157,41,.45))}50%{filter:drop-shadow(0 0 6px rgba(255,157,41,.9))}}
@keyframes lexi-sparkle{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.lexi-streak b::before,.lexi-streak b::after{animation:none!important}}
body.calm .lexi-streak b::before,body.calm .lexi-streak b::after{animation:none}

/* Non-interactive placeholders until vocabulary for these grades is available. */
.course-card.grade-10{--travel-art:url('assets/lexi-travel-8.webp')}
.course-card.grade-11{--travel-art:url('assets/lexi-travel-9.webp')}
.course-coming{cursor:default}
.course-coming:hover{transform:none!important;box-shadow:var(--w-shadow)!important}
.course-coming .course-caption>span{background:#fff!important;color:var(--w-ink)!important;box-shadow:none!important}

/* Landscape catalog: same complete travel scene on desktop and phones. */
#courseCards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
#courseCards .course-card{height:auto!important;min-height:0!important;aspect-ratio:2/1!important;background-size:100% 100%!important;background-position:center!important}
#courseCards .course-card.grade-2,#courseCards .course-card.grade-3,#courseCards .course-card.grade-4{background-image:url('assets/soft-premium-worlds-mobile.webp')!important;background-size:100% 300%!important}
#courseCards .grade-2{background-position:center top!important}#courseCards .grade-3{background-position:center center!important}#courseCards .grade-4{background-position:center bottom!important}
#courseCards .course-card.teen{background-image:var(--travel-art)!important}
#courseCards .grade-10{--travel-art:url('assets/lexi-travel-10-v2.webp')}#courseCards .grade-11{--travel-art:url('assets/lexi-travel-11-v2.webp')}
#courseCards .grade-5{--travel-art:url('assets/lexi-travel-5-v2.webp')}#courseCards .grade-6{--travel-art:url('assets/lexi-travel-6-v2.webp')}#courseCards .grade-7{--travel-art:url('assets/lexi-travel-7-v2.webp')}#courseCards .grade-8{--travel-art:url('assets/lexi-travel-8-v2.webp')}#courseCards .grade-9{--travel-art:url('assets/lexi-travel-9-v2.webp')}
#courseCards .course-coming .course-caption>span{font-size:12px!important;width:auto!important;height:auto!important;padding:10px 14px!important}
#courseCards .course-coming .course-caption>span:after{content:none!important}
@media(max-width:700px){#courseCards{grid-template-columns:1fr!important}}
#courseCards .course-coming .course-caption>span{background:rgba(255,255,255,.8)!important;color:#334269!important;border:1px solid rgba(51,66,105,.18);box-shadow:none!important}
/* A quiet travel motif connects the welcome to the illustrated class cards. */
.lexi-hero{background:radial-gradient(ellipse at 82% 24%,rgba(111,193,255,.30),transparent 34%),linear-gradient(125deg,#182e75 0%,#264bc7 55%,#3770f8 100%)!important}
.lexi-hero::after{content:"";position:absolute;right:3%;bottom:0;width:52%;height:42%;opacity:.15;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160'%3E%3Cpath d='M0 150h400M20 150V98h28v52m9 0V72h35v78m10 0V47h27v103m8 0V91h32v59m14 0V65h38v85m13 0V31h25v119m13 0V83h38v67m12 0V55h28v95m9 0V96h41v54M246 31V13' fill='none' stroke='%23d9f0ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom/contain no-repeat}
.lexi-hero .eyebrow{letter-spacing:.12em}
@media(max-width:640px){.lexi-hero::after{width:55%;height:35%;right:0;opacity:.12}}
@media(min-width:901px){.lexi-hero>.lexi-hero-art .lexi-live{width:min(125%,360px);margin-right:0}}
/* Keep the welcome and the neighbouring mission panel level on wide screens. */
@media(min-width:901px){.lexi-hero{align-self:stretch;height:auto!important;min-height:340px!important}}
.lexi-hero::after{content:none!important}
.lexi-hero{background:radial-gradient(ellipse at 83% 28%,rgba(139,202,255,.23),transparent 38%),radial-gradient(ellipse at 30% 100%,rgba(102,136,255,.18),transparent 50%),linear-gradient(125deg,#182e75 0%,#264bc7 58%,#3770f8 100%)!important}
/* A little more presence for Lexi, with quiet lime glints on the blue background. */
@media(min-width:901px){
 .lexi-hero{grid-template-columns:minmax(0,1fr) minmax(245px,43%)!important}
 .lexi-hero>.lexi-hero-art .lexi-live{width:min(145%,410px);margin-right:0}
 .lexi-hero-title{font-size:clamp(30px,3vw,42px)!important;overflow-wrap:anywhere}
 .lexi-hero .hero-go{padding:16px 25px!important;min-width:220px;max-width:100%}
 .lexi-hero .hero-go span{font-size:19px}.lexi-hero .hero-go small{font-size:13px;line-height:1.3}
}
.lexi-hero::after{content:""!important;position:absolute;inset:0;width:auto;height:auto;pointer-events:none;z-index:0;background:radial-gradient(circle at 11% 17%,#dbff96 0 1.5px,transparent 2.5px),radial-gradient(circle at 41% 13%,#d5ff92 0 1.4px,transparent 2.7px),radial-gradient(circle at 74% 19%,#e8ffb8 0 1.8px,transparent 3px),radial-gradient(circle at 88% 39%,#d9ff9c 0 1.4px,transparent 2.8px),radial-gradient(circle at 36% 79%,#e3ffa6 0 1.5px,transparent 2.8px),radial-gradient(circle at 69% 67%,#dfff95 0 1.2px,transparent 2.5px)!important;opacity:.5;animation:lexi-hero-glints 4.8s ease-in-out infinite alternate}
@keyframes lexi-hero-glints{from{opacity:.22}to{opacity:.68}}
@media(max-width:640px){.lexi-hero::after{inset:0;width:auto;height:auto;right:0;opacity:.4}}
@media(prefers-reduced-motion:reduce){.lexi-hero::after{animation:none!important}}
body.calm .lexi-hero::after{animation:none}
@media(min-width:901px){.lexi-hero>.lexi-hero-art .lexi-live{width:min(135%,380px);margin-right:2%}.lexi-hero-title{font-size:clamp(29px,2.7vw,39px)!important}}
/* Lexi waves; glints are soft and respect the visitor's motion preference. */
@media(min-width:901px){.lexi-hero>.lexi-hero-art .lexi-live{width:min(145%,410px);margin-right:9%}}
@media(min-width:381px) and (max-width:640px){.lexi-hero>.lexi-hero-art{width:162px!important;margin-right:-6px!important}.lexi-hero .lexi-live{width:162px}}
@media(max-width:380px){.lexi-hero>.lexi-hero-art{width:126px!important;margin-right:-4px!important}.lexi-hero .lexi-live{width:126px}}
/* Align the blink overlays with Lexi’s updated eyes. */
.lexi-hero .lexi-lid.l{top:28%}.lexi-hero .lexi-lid.r{left:49.5%;top:21%}
.lexi-hero::after{background:radial-gradient(circle at 11% 17%,#e8ff9c 0 1.7px,rgba(213,255,99,.35) 2.5px,transparent 7px),radial-gradient(circle at 32% 12%,#ebffb0 0 1.5px,rgba(213,255,99,.28) 2.5px,transparent 7px),radial-gradient(circle at 49% 20%,#edffb4 0 1.7px,rgba(213,255,99,.3) 3px,transparent 8px),radial-gradient(circle at 74% 16%,#eaffac 0 2px,rgba(213,255,99,.4) 3px,transparent 9px),radial-gradient(circle at 91% 36%,#e8ff9c 0 1.5px,rgba(213,255,99,.35) 3px,transparent 8px),radial-gradient(circle at 12% 73%,#edffad 0 1.6px,rgba(213,255,99,.3) 3px,transparent 8px),radial-gradient(circle at 37% 82%,#e8ff9c 0 1.6px,rgba(213,255,99,.35) 3px,transparent 8px),radial-gradient(circle at 60% 73%,#e8ff9c 0 1.4px,rgba(213,255,99,.3) 3px,transparent 7px),radial-gradient(circle at 86% 75%,#ebffb0 0 1.6px,rgba(213,255,99,.3) 3px,transparent 8px)!important}
@media(min-width:901px){.lexi-hero>.lexi-hero-art .lexi-live{margin-right:28%}}
@media(min-width:901px){.lexi-hero>.lexi-hero-art .lexi-live{transform:translateX(-54px)}}
/* On phones, settle Lexi lower without changing the desktop layout. */
@media(max-width:640px){.lexi-hero>.lexi-hero-art{transform:translateY(36px)}}
/* Anchor the mobile mascot inside the card and reserve room for the copy. */
@media(max-width:640px){
 .lexi-hero>.lexi-hero-art{position:absolute!important;float:none!important;right:4px;bottom:0;margin:0!important;transform:none!important;width:clamp(118px,43%,162px)!important}
 .lexi-hero>.lexi-hero-art .lexi-live{width:100%;margin:0}
 .lexi-hero .lexi-hero-title,.lexi-hero .lexi-hero-sub{max-width:calc(100% - clamp(118px,43%,162px))}
 .lexi-hero .hero-go{max-width:calc(100% - clamp(118px,43%,162px));box-sizing:border-box}
 .lexi-hero .hero-go small{white-space:normal;overflow-wrap:anywhere}
 .lexi-hero .lexi-live-bubble{left:auto;right:0;top:-44px;bottom:auto;max-width:140px;transform-origin:100% 100%}
}
/* Slightly more lively, while remaining calm and respecting reduced motion. */
@keyframes lexi-welcome-idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1deg)}}
.lexi-hero .lexi-live-body{animation-name:lexi-welcome-idle;animation-duration:5.4s}
.lexi-hero .lexi-live-body.hop{animation-name:lx-hop;animation-duration:.7s}
.lexi-hero .lexi-live-body.wave{animation-name:lx-wave;animation-duration:1.15s}
.lexi-hero .lexi-live-body.tilt{animation-name:lx-tilt}
.lexi-hero::before{background:radial-gradient(circle at 1px 1px,rgba(238,255,181,.24) 1px,transparent 1.8px) 0 0/18px 18px;filter:drop-shadow(0 0 3px rgba(215,255,123,.35))}
@keyframes lexi-hero-glints{from{opacity:.35}to{opacity:.85}}
@media(prefers-reduced-motion:reduce){.lexi-hero .lexi-live-body{animation:none!important}}
body.calm .lexi-hero .lexi-live-body{animation:none}


/* Calm blue dot field and a clear space for Lexi's speech. */
.lexi-hero::before {
  background: radial-gradient(circle at 1px 1px, rgba(219, 235, 255, .32) 1px, transparent 1.7px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(110deg, #000 0%, rgba(0,0,0,.65) 38%, transparent 84%);
  mask-image: linear-gradient(110deg, #000 0%, rgba(0,0,0,.65) 38%, transparent 84%);
  filter: none;
}
.lexi-hero::after { content: none !important; animation: none !important; }
@media (max-width: 640px) {
  .lexi-hero { min-height: 340px !important; }
  .lexi-hero .lexi-live-bubble {
    display: block;
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(140px, 44vw);
    border-radius: 14px 14px 4px 14px;
    transform-origin: 100% 100%;
  }
}