/* ===== landing.css — uses dashboard.css tokens, layout only ===== */

/* ── Banner ──────────────────────────────────────────────── */
.alreadyBanner{
  background:var(--gold);color:var(--ink);text-align:center;
  padding:10px 16px;font-weight:900;font-size:14px;
  border-bottom:2px solid var(--line);
}
.alreadyBanner a{color:var(--forest);text-decoration:underline;margin:0 12px;font-weight:900;}
.alreadyBanner button{
  border:2px solid var(--line);background:transparent;border-radius:50%;
  width:24px;height:24px;font-size:12px;font-weight:900;cursor:pointer;vertical-align:middle;
}

/* ── Topbar nav ──────────────────────────────────────────── */
.topbar .navLink{
  border:0;border-right:1px solid var(--line);background:transparent;
  padding:14px 22px;font:900 14px Quicksand,sans-serif;
  color:var(--ink);text-decoration:none;display:inline-block;transition:.15s;
}
.topbar .navLink:last-child{border-right:0;}
.topbar .navLink.active,.topbar .navLink:hover{background:var(--forest);color:#fff;}
.topbar nav{justify-self:center;border:2px solid var(--line);border-radius:20px;overflow:hidden;background:#fbf8ef;display:flex;}
.topbar .pill{border:2px solid var(--line);background:#fbf8ef;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:900;}
.actionBtn{
  display:inline-block;border:2px solid var(--line);background:#fbf8ef;
  border-radius:999px;padding:10px 18px;font:900 14px Quicksand,sans-serif;
  cursor:pointer;color:var(--ink);text-decoration:none;transition:.15s;
}
.actionBtn:hover{background:var(--sage);}
.actionBtn.primary{background:var(--forest);color:#fff;border-color:var(--forest);}
.actionBtn.primary:hover{background:#253b27;}
.actionBtn.large{padding:13px 26px;font-size:15px;}
.actionBtn.small{padding:8px 16px;font-size:13px;}
.actionBtn.full{width:100%;text-align:center;border-radius:16px;}

/* ── Main ────────────────────────────────────────────────── */
.landingMain{display:flex;flex-direction:column;gap:0;}

/* ── Hero ────────────────────────────────────────────────── */
.heroSection{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  padding:40px 24px 32px;align-items:center;
  background:var(--bg);border-bottom:2px solid var(--line);
}
.heroPill{
  display:inline-block;border:2px solid var(--gold);border-radius:999px;
  padding:6px 16px;font-size:13px;font-weight:900;
  color:var(--forest);background:#fffdf4;margin-bottom:18px;
}
.heroTitle{font-family:Quicksand,sans-serif;font-size:clamp(26px,3.5vw,46px);line-height:1.1;font-weight:800;margin-bottom:16px;}
.heroTitle .gold{color:var(--gold);}
.heroSub{color:var(--muted);font-size:16px;margin-bottom:28px;line-height:1.6;}
.heroSub em{color:var(--forest);font-style:normal;font-weight:900;}
.heroCta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;}
.heroStats{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.heroStat strong{display:block;font:900 22px Quicksand,sans-serif;color:var(--forest);}
.heroStat span{font-size:12px;color:var(--muted);}
.heroStat.sm strong{font-size:16px;}
.statDivider{width:1px;height:36px;background:var(--line);opacity:.2;}
.heroRight{position:relative;display:flex;justify-content:center;align-items:center;min-height:260px;}
.heroCard{width:100%;max-width:340px;}
.heroAgents{display:flex;gap:10px;font-size:28px;margin:14px 0;flex-wrap:wrap;}
.heroCardFooter{display:flex;gap:16px;border-top:1px dashed #ccc5ad;padding-top:12px;margin-top:4px;}
.floatPill{
  position:absolute;border:2px solid var(--line);background:#fffdf4;
  border-radius:999px;padding:8px 14px;font-size:12px;
  font-weight:900;box-shadow:var(--shadow);white-space:nowrap;
}
.floatPill.top{top:0;left:-10px;color:var(--forest);}
.floatPill.bottom{bottom:0;right:-10px;}

/* ── Generic section ─────────────────────────────────────── */
.landingSection{padding:48px 24px;border-bottom:2px solid var(--line);background:var(--bg);}
.secHeader{text-align:center;margin-bottom:32px;}
.secHeader h2{font-size:clamp(22px,3vw,36px);margin-bottom:8px;}
.secHeader p{color:var(--muted);font-size:15px;}
.secHeader .gold{color:var(--gold);}
.featCard{text-align:center;}
.featIcon{font-size:36px;margin-bottom:12px;}
.featCard.highlight{background:linear-gradient(180deg,#fffdf4,#f7f3e2);border-color:var(--gold);}
.courseCard{position:relative;}
.courseCard .badge{display:block;margin-bottom:10px;}
.courseCard .badge.gold{border-color:var(--gold);background:#f9eccc;}
.courseIcon{font-size:32px;margin:8px 0 12px;display:block;}
.courseCard h3{font-size:16px;margin-bottom:8px;line-height:1.3;}
.courseCard small{font-size:12px;color:var(--muted);font-weight:700;}
.courseCard p{font-size:13px;color:var(--muted);margin-bottom:16px;}
.featuredCourse{background:linear-gradient(180deg,#fffdf4,#faf5e2);border-color:var(--gold);}

/* ── Vision/Mission ──────────────────────────────────────── */
.vmSection{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;
  align-items:center;padding:40px 24px;
  background:var(--forest);color:#fff;border-bottom:2px solid var(--line);
}
.vmCard{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff;text-align:center;padding:28px 20px;}
.vmCard h3{font-size:17px;line-height:1.4;font-weight:800;}
.vmCard .gold{color:var(--gold);}
.vmLabel{display:block;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:10px;}
.vmLabel.gold{color:var(--gold);opacity:1;}
.vmDivider{color:var(--gold);font-size:24px;text-align:center;opacity:.5;}

/* ── Pricing ─────────────────────────────────────────────── */
.pricingSection{background:var(--sage);}
.pricingGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto 24px;}
.pricingCard{text-align:center;padding:28px 20px;position:relative;}
.pricingCard.popular{background:linear-gradient(180deg,var(--cream),#f7f3e2);border-color:var(--gold);transform:translateY(-6px);box-shadow:0 18px 0 rgba(35,49,31,.12);}
.pricingCard.best{background:linear-gradient(180deg,#fffdf4,#f7f0d4);}
.popularBadge,.bestBadge{display:inline-block;border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:900;margin-bottom:12px;color:var(--ink);background:var(--gold);}
.bestBadge{background:var(--forest);color:#fff;}
.pricingCard h3{font-size:20px;margin-bottom:10px;}
.priceNum{font:900 36px Quicksand,sans-serif;color:var(--forest);}
.priceNum small{font-size:16px;font-weight:700;color:var(--muted);}
.priceDur{color:var(--muted);font-size:13px;margin:4px 0 16px;font-weight:700;}
.priceFeats{list-style:none;text-align:left;margin-bottom:20px;}
.priceFeats li{padding:6px 0;border-bottom:1px dashed #ccc5ad;font-size:13px;}
.priceFeats li:last-child{border-bottom:0;}
.pricingFreeNote{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 24px;}
.pricingFreeNote b{flex:1;font-size:15px;}
.pricingFreeNote p{flex:2;font-size:13px;color:var(--muted);}

/* ── Login ───────────────────────────────────────────────── */
.loginSection{padding:48px 24px;background:var(--bg);}
.loginWrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:960px;margin:0 auto;align-items:start;}
.loginInfo h2{font-size:clamp(22px,3vw,34px);margin-bottom:14px;}
.loginInfo > p{color:var(--muted);font-size:15px;margin-bottom:20px;line-height:1.6;}
.perkList{list-style:none;margin-bottom:20px;}
.perkList li{padding:9px 0;border-top:1px dashed #ccc5ad;color:var(--muted);font-size:14px;font-weight:700;}
.perkList li:last-child{border-bottom:1px dashed #ccc5ad;}
.sloganBox{margin-top:16px;font-size:14px;line-height:1.9;}
.sloganBox .gold{color:var(--forest);}
.loginForm{padding:24px;}
.loginForm h3{margin-bottom:18px;font-size:18px;}
.roleTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;background:var(--sage);border:2px solid var(--line);border-radius:16px;padding:6px;}
.roleTab{border:0;background:transparent;border-radius:12px;padding:10px;font:900 14px Nunito,sans-serif;cursor:pointer;color:var(--muted);transition:.15s;}
.roleTab.active{background:var(--forest);color:#fff;box-shadow:0 4px 0 rgba(35,49,31,.15);}
.authModeTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:-6px 0 8px;}
.authModeTab{border:2px solid rgba(0,56,115,.2);background:#f5f8ff;border-radius:12px;padding:10px 8px;font:700 13px 'Prompt',sans-serif;cursor:pointer;color:#44546a;transition:.15s;}
.authModeTab:hover{border-color:#003873;color:#003873;}
.authModeTab.active{background:#003873;border-color:#003873;color:#fff;box-shadow:0 3px 0 rgba(0,56,115,.16);}
.authModeIntro{margin:0 0 8px;padding:9px 11px;border-radius:10px;background:#eef8f0;color:#24572e;font:600 12px 'Sarabun',sans-serif;line-height:1.5;text-align:center;}
.toeicLiveSchedulePicker{margin:10px 0 12px;border:1px solid #d8c174;background:#fff8dc;border-radius:12px;padding:11px 12px;}
.toeicLiveSchedulePicker .fieldLabel{margin:0 0 6px;color:#003873;}
.toeicLiveSchedulePicker select.fieldInput{height:46px;margin:0;background:#fff;}
.toeicLiveSchedulePicker p{margin:7px 0 0;color:#735c00;font:700 12px/1.45 'Sarabun',sans-serif;text-align:center;}
.googleSignInSection{margin:10px 0 12px;}
.authDivider{display:flex;align-items:center;gap:10px;margin:4px 0 10px;color:#8a93a3;font:800 11px 'Prompt',sans-serif;}
.authDivider::before,.authDivider::after{content:"";height:1px;flex:1;background:rgba(0,56,115,.14);}
.googleSignInButton{display:flex;justify-content:center;min-height:40px;}
.googleSignInHint{margin:6px 0 0;color:#697589;text-align:center;font:600 11px 'Sarabun',sans-serif;line-height:1.45;}
.fieldLabel{display:block;font-size:13px;font-weight:900;color:var(--muted);margin:12px 0 5px;}
.fieldLabel small{font-size:11px;font-weight:700;}
.fieldInput{width:100%;border:2px solid var(--line);background:var(--cream);border-radius:14px;padding:11px 14px;font:700 15px Nunito,sans-serif;color:var(--ink);outline:none;transition:border-color .15s;}
.fieldInput:focus{border-color:var(--forest);}
.fieldInput::placeholder{color:var(--muted);opacity:.6;}
.authTextButton{display:block;margin:8px 0 0 auto;border:0;background:transparent;color:var(--forest);font:900 12px Nunito,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.authTextButton:hover{color:var(--gold);}
.demoNote{margin-top:10px;font-size:12px;color:var(--muted);text-align:center;line-height:1.5;}
.loginError{margin-top:10px;background:#fee;border:2px solid #e99;border-radius:12px;padding:10px 14px;font-size:13px;color:#a33;text-align:center;font-weight:700;}

/* ── Footer ──────────────────────────────────────────────── */
.landingFooter{border-top:2px solid var(--line);background:var(--cream);padding:24px;text-align:center;}
.footerInner{display:flex;flex-direction:column;align-items:center;gap:8px;}
.footerInner .brand{justify-content:center;}
.footerInner p{font-size:13px;color:var(--muted);font-weight:700;}

/* ================================================================
   AJ.BANK CAMPUS — earth-tone RPG conversation
   A warm, cozy study-lounge scene. The mascot walks, idles, and
   chats; clicking opens a choice menu, then a guided cutscene.
   (Keyframe + class names are referenced by landing.html JS — keep.)
   ================================================================ */
@keyframes exclaim{0%,100%{transform:translateX(-50%) translateY(0) scale(1);}50%{transform:translateX(-50%) translateY(-8px) scale(1.12);}}
@keyframes aaCursorBlink{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes objFlashIn{
  0%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.55) rotate(-3deg);}
  25%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.12) rotate(2deg);}
  55%{transform:translateX(-50%) scale(1) rotate(0);}
  82%{opacity:1;}
  100%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(1.05);}
}
@keyframes aaBarIn{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes aaBoxSlideUp{from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes aaItemSlideIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}

/* ── Section ───────────────────────────────────────────── */
.campusSection{background:var(--sage);padding:0;border-bottom:2px solid var(--line);}
.campusSection .secHeader{background:var(--sage);padding:28px 24px 20px;margin-bottom:0;border-bottom:1px dashed #c7cdb8;}
.campusSection .secHeader h2{color:var(--ink);}
.campusSection .secHeader p{color:var(--muted);}
.campusSection .secHeader .gold{color:var(--gold);}

/* ── Campus stage ──────────────────────────────────────── */
.campusWorld{
  position:relative;min-height:430px;overflow:hidden;cursor:pointer;
  background:
    radial-gradient(ellipse 60% 38% at 50% 100%, rgba(120,150,108,.40), transparent 72%),
    linear-gradient(180deg,#f6eed8 0%, #efe6cf 50%, #e6dabd 100%);
  border-top:2px solid var(--line);
}
/* soft warm sun glow */
.campusWorld::before{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:320px;height:320px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle, rgba(232,189,91,.26), transparent 65%);
}
/* wooden floor band behind the dialog bar */
.campusWorld::after{
  content:'';position:absolute;left:0;right:0;bottom:114px;height:64px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(168,118,63,0), rgba(168,118,63,.16));
  border-top:2px dashed rgba(124,84,42,.22);
}

/* ── Props ─────────────────────────────────────────────── */
.campusDeco{position:absolute;top:30px;font-size:34px;opacity:.16;pointer-events:none;user-select:none;z-index:2;}
.campusDeco.left{left:26px;transform:rotate(-8deg);}
.campusDeco.right{right:26px;transform:rotate(8deg);}
.campusSign{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;
  border:2px solid var(--line);border-radius:12px;
  background:#a8763f;color:#fff8e8;
  padding:8px 20px;font:900 11px Quicksand,sans-serif;
  box-shadow:var(--shadow);text-align:center;line-height:1.45;
  letter-spacing:.06em;pointer-events:none;
}

/* ── Character (SVG mascot) ────────────────────────────── */
.ajChar{
  position:absolute;bottom:122px;left:25%;
  transform:translateX(-50%) scaleX(1);
  cursor:pointer;text-align:center;width:170px;
  transition:left 3s linear,transform .15s;z-index:10;
}
.ajChar:hover{filter:drop-shadow(0 6px 10px rgba(49,75,52,.22));}
.charBubble{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;
  background:var(--gold);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font:900 18px Quicksand,sans-serif;color:var(--ink);
  box-shadow:var(--shadow);
  animation:exclaim 1.1s ease-in-out infinite;
  transition:opacity .3s;pointer-events:none;z-index:11;
}
.charImgWrap{display:inline-block;}
.charImg{display:block;width:150px;height:200px;margin:0 auto;filter:drop-shadow(0 10px 8px rgba(35,49,31,.18));}
.charImg svg{display:block;width:100%;height:100%;}
.charShadow{width:90px;height:14px;margin:-6px auto 0;background:radial-gradient(ellipse,rgba(49,75,52,.30) 0%,transparent 70%);border-radius:50%;}

/* ── PRESS flash ───────────────────────────────────────── */
.aaObjFlash{position:absolute;top:24%;left:50%;transform:translateX(-50%);z-index:50;pointer-events:none;display:none;}
.aaObjFlash.active{display:block;animation:objFlashIn 1s ease forwards;}
.aaObjText{
  display:block;font:900 26px Quicksand,sans-serif;color:#fff;
  background:var(--forest);border:3px solid var(--gold);
  padding:8px 26px;border-radius:10px;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--shadow);white-space:nowrap;
}

/* ── Dialog bar (cream) ────────────────────────────────── */
.aaDialogBar{
  position:absolute;bottom:0;left:0;right:0;height:114px;
  background:var(--cream);border-top:2px solid var(--line);
  display:grid;grid-template-columns:96px 1fr 92px;
  align-items:stretch;z-index:20;cursor:pointer;animation:aaBarIn .5s ease;
}
.aaDialogBar:hover{background:#fffef8;}
.aaDialogPortrait{
  display:flex;align-items:flex-end;justify-content:center;padding:6px 0 0;
  background:var(--sage);border-right:2px solid var(--line);overflow:hidden;
}
.aaPortraitImg{width:84px;height:108px;display:block;}
.aaPortraitImg svg{width:100%;height:100%;display:block;}
.aaDialogBody{display:flex;flex-direction:column;justify-content:center;padding:10px 16px;gap:6px;overflow:hidden;}
.aaDialogName{display:flex;align-items:center;gap:10px;}
.aaNameText{font:900 13px Quicksand,sans-serif;color:var(--forest);letter-spacing:.02em;}
.aaNameBadge{font:900 9px Quicksand,sans-serif;color:var(--ink);background:var(--gold);border:1.5px solid var(--line);border-radius:6px;padding:2px 7px;text-transform:uppercase;letter-spacing:.04em;}
.aaDialogLine{display:flex;align-items:center;gap:8px;}
.aaDialogText{font:700 14px Nunito,sans-serif;color:var(--ink);line-height:1.4;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aaCursor{font-size:11px;color:var(--forest);flex-shrink:0;animation:aaCursorBlink .75s ease-in-out infinite;}
.aaDialogAction{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px;border-left:2px solid var(--line);}
.aaClickBtn{border:2px solid var(--line);background:var(--forest);border-radius:10px;padding:8px 12px;font:900 10px Quicksand,sans-serif;color:#fff;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:.12s;}
.aaClickBtn:hover{background:#253b27;}
.aaMuteBtn{background:var(--cream);border:2px solid var(--line);border-radius:8px;padding:3px 8px;font-size:12px;cursor:pointer;color:var(--muted);transition:.12s;line-height:1;}
.aaMuteBtn:hover{background:var(--sage);}

/* ── Choice overlay ────────────────────────────────────── */
.choiceOverlay{position:fixed;inset:0;z-index:9000;background:rgba(35,49,31,.55);display:flex;align-items:flex-end;justify-content:center;padding:0 20px 28px;}
.choiceBox{background:var(--cream);border:2px solid var(--line);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.3);width:100%;max-width:680px;overflow:hidden;animation:aaBoxSlideUp .22s ease;}
.choiceCharStrip{display:flex;align-items:flex-end;gap:0;background:var(--sage);border-bottom:2px solid var(--line);min-height:96px;}
.choiceCharThumb{width:88px;height:96px;flex-shrink:0;border-right:2px solid var(--line);padding:5px 6px 0;display:block;}
.choiceCharThumb svg{width:100%;height:100%;display:block;}
.choiceSpeech{flex:1;padding:14px 18px;display:flex;flex-direction:column;gap:6px;}
.choiceWho{font:900 11px Quicksand,sans-serif;color:var(--forest);text-transform:uppercase;letter-spacing:.06em;display:block;}
.choiceSpeech > *:not(.choiceWho){font:700 14px Nunito,sans-serif;color:var(--ink);line-height:1.5;}
.choiceList{padding:12px 14px 14px;}
.choiceItem{
  width:100%;display:flex;align-items:center;gap:12px;
  border:2px solid var(--line);background:#fbf8ef;border-radius:14px;
  padding:13px 16px;margin-bottom:8px;
  font:800 14px Nunito,sans-serif;color:var(--ink);cursor:pointer;transition:.12s;text-align:left;
  opacity:0;animation:aaItemSlideIn .3s ease both;
}
.choiceItem:last-child{margin-bottom:0;}
.choiceItem:hover{background:var(--forest);color:#fff;transform:translateX(4px);box-shadow:var(--shadow);}
.choiceClose{background:var(--sage);color:var(--muted);}
.choiceClose:hover{background:#d9b4a0;color:#7a2e2e;border-color:var(--line);transform:none;box-shadow:none;}
.choiceIcon{font-size:19px;flex-shrink:0;}
.choiceLabel{flex:1;}
.choiceArrow{color:var(--gold);font-size:12px;transition:.1s;}
.choiceItem:hover .choiceArrow{color:#fff;}

/* ================================================================
   CUTSCENE — guided story panels (earth-tone)
   ================================================================ */
@keyframes csCharIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}
@keyframes csPanelIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes csBreath{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

.csOverlay{position:fixed;inset:0;z-index:9999;background:rgba(40,32,20,.86);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 16px 22px;gap:14px;}
.csCloseBtn{position:absolute;top:16px;right:16px;z-index:2;border:2px solid var(--line);background:var(--cream);border-radius:10px;padding:8px 16px;color:var(--ink);font:900 11px Quicksand,sans-serif;letter-spacing:.04em;cursor:pointer;transition:.12s;}
.csCloseBtn:hover{background:var(--sage);}
.csStage{width:100%;max-width:960px;display:grid;grid-template-columns:240px 1fr;gap:0;align-items:flex-end;flex:1;max-height:calc(100vh - 120px);position:relative;z-index:1;}
.csCharSide{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:2px;}
.csCharSide.csIn{animation:csCharIn .4s ease both;}
.csNpcImg{display:block;width:220px;height:300px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.38));animation:csBreath 4s ease-in-out infinite;}
.csNpcImg svg{width:100%;height:100%;display:block;}
.csNpcShadow{width:96px;height:14px;margin:-4px auto 0;background:radial-gradient(ellipse,rgba(0,0,0,.48) 0%,transparent 70%);border-radius:50%;}
.csPanel{border:2px solid var(--line);border-radius:20px;background:var(--cream);overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35);}
.csPanel.csIn{animation:csPanelIn .32s ease both;}
.csNameBar{background:var(--forest);color:#fff;padding:12px 22px;display:flex;gap:12px;align-items:center;border-bottom:2px solid var(--line);}
.csNameText{font:900 15px Quicksand,sans-serif;color:#fff;letter-spacing:.02em;}
.csBadge{font:900 10px Quicksand,sans-serif;background:var(--gold);color:var(--ink);border:1.5px solid var(--line);border-radius:6px;padding:3px 9px;text-transform:uppercase;letter-spacing:.04em;}
.csContent{padding:18px 22px 12px;min-height:96px;max-height:34vh;overflow-y:auto;}
.csText{font:700 16px Nunito,sans-serif;color:var(--ink);line-height:1.75;white-space:pre-line;}
.csNavBar{display:flex;align-items:center;gap:10px;padding:12px 18px 16px;border-top:1px solid #e0dcc8;background:#faf6ea;}
.csBtn{border:2px solid var(--line);background:#fbf8ef;border-radius:10px;padding:9px 18px;font:900 11px Quicksand,sans-serif;letter-spacing:.04em;cursor:pointer;color:var(--ink);transition:.1s;}
.csBtn.small{padding:6px 12px;font-size:10px;}
.csBtn:disabled{opacity:.35;cursor:default;}
.csBtn.primary{background:var(--forest);color:#fff;border-color:var(--forest);}
.csBtn:not(:disabled):hover{background:var(--sage);}
.csBtn.primary:not(:disabled):hover{background:#253b27;}
.csDots{flex:1;display:flex;gap:8px;justify-content:center;}
.csDot{width:9px;height:9px;border-radius:50%;background:#d8d2bd;border:1.5px solid var(--line);transition:.15s;}
.csDot.active{background:var(--gold);transform:scale(1.25);}
.csActionRow{display:flex;gap:12px;justify-content:center;align-items:center;padding-bottom:4px;position:relative;z-index:1;}
.csActionBtn{font-size:14px;padding:13px 28px;box-shadow:var(--shadow);}

/* Plans inside dialog */
.csPlansGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.csPlanCard{border:2px solid var(--line);border-radius:14px;background:#fbf8ef;padding:12px 10px;text-align:center;color:var(--ink);}
.csPlanCard.popular{background:linear-gradient(180deg,var(--cream),#f7f3e2);border-color:var(--gold);}
.csPlanCard.best{background:linear-gradient(180deg,#fffdf4,#f7f0d4);}
.csPlanBadge{display:inline-block;background:var(--gold);border:1.5px solid var(--line);border-radius:6px;padding:2px 8px;font:900 8px Quicksand,sans-serif;color:var(--ink);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase;}
.csPlanBadge.best{background:var(--forest);color:#fff;}
.csPlanCard h4{font-size:12px;margin-bottom:4px;color:var(--ink);font-family:Quicksand,sans-serif;}
.csPlanPrice{font:900 18px Quicksand,sans-serif;color:var(--forest);}
.csPlanPrice small{font-size:10px;color:var(--muted);font-weight:700;}
.csPlanDur{font-size:9px;color:var(--muted);font-weight:700;margin:2px 0 8px;}
.csPlanCard ul{list-style:none;text-align:left;font-size:10px;margin-bottom:8px;}
.csPlanCard li{padding:2px 0;color:var(--muted);}

/* Steps inside dialog */
.csStepsList{display:flex;flex-direction:column;gap:6px;}
.csStep{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:flex-start;background:#fbf8ef;border:2px solid var(--line);border-radius:12px;padding:10px 12px;}
.csStepNum{width:28px;height:28px;border-radius:50%;background:var(--forest);color:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font:900 12px Quicksand,sans-serif;flex-shrink:0;}
.csStep b{display:block;font-size:12px;margin-bottom:2px;color:var(--ink);font-family:Quicksand,sans-serif;}
.csStep p{font-size:11px;color:var(--muted);margin:0;}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:900px){
  .pricingGrid{grid-template-columns:1fr;}
  .pricingCard.popular{transform:none;}
  .csStage{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .csCharSide{max-height:160px;overflow:hidden;}
  .csNpcImg{width:130px;height:178px;}
  .csPlansGrid{grid-template-columns:1fr 1fr;}
  .csPlanCard:last-child{grid-column:1/-1;}
}
@media(max-width:760px){
  .heroSection{grid-template-columns:1fr;}
  .heroRight{display:none;}
  .vmSection{grid-template-columns:1fr;}
  .vmDivider{display:none;}
  .loginWrap{grid-template-columns:1fr;}
  .topbar{grid-template-columns:1fr;height:auto;}
  .topbar .pill{display:none;}
  .campusWorld{min-height:380px;}
  .charImg{width:120px;height:160px;}
  .ajChar{width:130px;}
  .csPlansGrid{grid-template-columns:1fr;}
  .pricingFreeNote{flex-direction:column;}
  .aaDialogBar{grid-template-columns:74px 1fr 76px;}
  .aaPortraitImg{width:64px;height:90px;}
  .aaDialogText{font-size:12px;}
}
@media(max-width:480px){
  .charImg{width:104px;height:138px;}
  .csText{font-size:14px;}
  .choiceItem{padding:11px 13px;font-size:13px;}
  .aaDialogBar{grid-template-columns:60px 1fr 66px;}
  .aaClickBtn{font-size:9px;padding:6px 8px;}
}

/* ═══════════════════════════════════════════════════════════════
   QUEST SCHOLAR — RPG Landing  (Scholar Blue · Quest Gold)
   Fonts: Prompt (headlines) · Sarabun (body/dialogue)
   ═══════════════════════════════════════════════════════════════ */
body:has(.rpgScene){overflow-x:hidden;}
body:has(.galleryLanding){margin:0;padding:0!important;background:#ffb371;}
.alreadyBanner{position:fixed;top:0;left:0;right:0;z-index:2000;}

/* === Landing hero backdrop for AJ.Bank protagonist === */
.rpgScene{
  position:relative;
  min-height:100vh;
  background: linear-gradient(180deg,#ffffff 4%, #fffdf4 36%, #f5f1e6 100%);
  color:var(--ink);
}

/* subtle speckle / paper texture */
.rpgScene::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:0.06;
  mix-blend-mode:multiply;
}

/* warm radial glow behind the protagonist to lift the character */
.rpgScene::after{
  content:"";
  position:absolute;z-index:1;pointer-events:none;
  width:760px;height:760px;
  left:62%;bottom:140px;transform:translateX(-50%);
  background:radial-gradient(circle at 50% 40%, rgba(255,245,210,0.72) 0%, rgba(255,245,210,0.30) 18%, rgba(245,241,230,0.05) 45%, transparent 70%);
  filter:blur(36px);
}

/* ensure key scene elements sit above the backdrop */
#ajChar, .ajChar, .ajQuoteBubble, .aaDialogBar, .rpgQuickChoices{position:relative;z-index:10}

/* ── v12.x.22 Trailer video — behind the character (z2 < char z10).
   pointer-events:none keeps AJ.Bank clickable and the link uncopyable. */
.rpgTrailer{
  position:absolute;z-index:2;pointer-events:none;
  left:50%;transform:translateX(-36%);
  bottom:21vh;width:min(52vw,780px);aspect-ratio:16/9;
  border-radius:26px;overflow:hidden;
  border:1px solid rgba(0,56,115,.16);
  box-shadow:0 30px 70px rgba(0,40,90,.22);
  background:#00122e;
}
.rpgTrailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;}
/* soft parchment wash so the character pops in front of the footage */
.rpgTrailer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,253,244,.06) 0%,rgba(245,241,230,.30) 100%);
}
@media(max-width:900px){
  .rpgTrailer{transform:translateX(-44%);width:min(74vw,720px);bottom:26vh;}
}
@media(max-width:760px){
  .rpgTrailer{left:12px;right:12px;width:auto;transform:none;bottom:31vh;border-radius:18px;}
}

@media(max-width:760px){
  .rpgScene::after{width:420px;height:420px;left:50%;bottom:110px}
}

/* ── Scene: Parchment gradient ───────────────────────────── */
.rpgScene{
  position:relative;width:100%;height:100vh;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 40% at 50% 36%,rgba(255,215,0,.12),transparent 64%),
    radial-gradient(ellipse 55% 30% at 80% 18%,rgba(0,56,115,.07),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,#FFFDF4 48%,#F5F1E6 100%);
  font-family:'Sarabun',sans-serif;
}
.rpgScene::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle,rgba(0,56,115,.04) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,215,0,.04) 1px,transparent 1px);
  background-size:80px 80px,45px 45px;background-position:0 0,40px 40px;
}
.rpgScene::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:28%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(0,56,115,.06),transparent 70%);
}

/* ── Top Bar: Scholar Blue ───────────────────────────────── */
.rpgTopBar{
  position:absolute;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(115,119,130,.18);
}
.rpgBrand{display:flex;align-items:center;gap:10px;}
.rpgBrand .mark{
  background:#003873;color:#fff;
  width:36px;height:36px;border-radius:8px;
  font:900 16px 'Prompt',sans-serif;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,215,0,.5);flex-shrink:0;
}
.rpgBrand strong{font:700 16px 'Prompt',sans-serif;color:#003873;display:block;line-height:1;}
.rpgBrand small{font:700 11px 'Sarabun',sans-serif;color:#735c00;display:block;line-height:1;margin-top:2px;text-transform:uppercase;letter-spacing:.08em;}
.rpgTopActions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.rpgEnterBtn{
  padding:9px 22px;background:#FFD700;color:#003873;
  border:2px solid rgba(255,215,0,.7);border-radius:999px;
  font:700 14px 'Prompt',sans-serif;cursor:pointer;
  transition:.15s;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,56,115,.25);
}
.rpgEnterBtn:hover{background:#ffe84d;transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,215,0,.45);}
.rpgTopActions .aaMuteBtn{
  background:rgba(0,56,115,.07);border:1px solid rgba(0,56,115,.18);
  border-radius:8px;padding:8px 12px;font-size:14px;cursor:pointer;color:#003873;transition:.15s;
}
.rpgTopActions .aaMuteBtn:hover{background:rgba(0,56,115,.13);}

/* ── Stitch-inspired first viewport message ───────────────── */
.rpgHeroCopy{
  position:absolute;top:88px;left:50%;z-index:12;
  width:min(76vw,920px);max-width:920px;
  text-align:center;transform:translateX(-50%);
}
.rpgHeroCopy h1{
  margin:0 auto 16px;
  font:900 clamp(40px,5.35vw,76px)/1.04 'Prompt',sans-serif;
  color:#003873;letter-spacing:0;text-wrap:balance;
  text-shadow:0 2px 14px rgba(255,255,255,.86);
}
.rpgHeroCopy p{
  margin:0 auto;color:#434750;
  font:500 clamp(15px,1.35vw,19px)/1.62 'Sarabun',sans-serif;
  max-width:760px;text-wrap:pretty;
}
.rpgHeroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;justify-content:center;}
.rpgPrimaryChoice,.rpgGhostChoice{
  border-radius:16px;padding:13px 22px;
  font:700 14px 'Prompt',sans-serif;cursor:pointer;transition:.16s;
}
.rpgPrimaryChoice{
  border:2px solid #003873;background:#003873;color:#fff;
  box-shadow:0 10px 24px rgba(0,56,115,.20);
}
.rpgPrimaryChoice:hover{background:#1e4f91;border-color:#1e4f91;transform:translateY(-1px);}
.rpgGhostChoice{
  border:2px solid rgba(0,56,115,.24);background:rgba(255,255,255,.70);color:#003873;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.rpgGhostChoice:hover{border-color:#FFD700;background:#fff7c7;transform:translateY(-1px);}
.rpgVideoCard{
  position:absolute;left:clamp(22px,6vw,74px);top:clamp(350px,48vh,430px);z-index:6;
  width:min(30vw,390px);aspect-ratio:16/9;
  border:2px solid rgba(0,56,115,.20);border-radius:22px;
  background:
    radial-gradient(circle at 28% 35%,rgba(255,215,0,.20),transparent 28%),
    linear-gradient(135deg,rgba(0,56,115,.96),rgba(30,79,145,.90));
  color:#fff;text-align:left;padding:18px 20px;
  box-shadow:0 18px 44px rgba(0,56,115,.20);
  overflow:hidden;cursor:pointer;transition:.16s;
}
.rpgVideoCard::after{
  content:'';position:absolute;inset:auto -30px -45px auto;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;
}
.rpgVideoCard:hover{transform:translateY(-2px);box-shadow:0 22px 54px rgba(0,56,115,.26);}
.rpgVideoLabel{
  display:inline-flex;margin-bottom:18px;border:1px solid rgba(255,215,0,.55);
  background:rgba(255,215,0,.18);color:#FFD700;border-radius:999px;
  padding:4px 11px;font:700 11px 'Prompt',sans-serif;
}
.rpgVideoPlay{
  position:absolute;right:20px;top:18px;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#FFD700;color:#003873;font:900 15px 'Prompt',sans-serif;
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}
.rpgVideoTitle{display:block;font:700 18px 'Prompt',sans-serif;line-height:1.25;margin-bottom:7px;max-width:76%;}
.rpgVideoMeta{display:block;font:500 13px 'Sarabun',sans-serif;line-height:1.45;color:rgba(255,255,255,.78);max-width:82%;}

/* ── AJ.Bank — PROTAGONIST large character ───────────────── */
.rpgScene .ajChar{
  position:absolute;top:clamp(268px,31vh,286px);bottom:auto;left:67%;
  width:min(35vw,420px);height:min(50vh,450px);
  min-height:0;
  cursor:pointer;text-align:center;
  transform:translateX(-50%) scaleX(1);
  transition:filter .25s;z-index:10;
}
.rpgScene .ajChar:hover{
  filter:drop-shadow(0 0 36px rgba(255,215,0,.45)) drop-shadow(0 10px 24px rgba(0,56,115,.18));
}
.rpgScene .charImgWrap{display:block;width:100%;height:100%;}
.rpgScene .charImg{width:100%;height:100%;display:block;}
.pngCharImg{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom center;}
.rpgScene .charBubble{
  display:none;
  top:-32px;left:50%;transform:translateX(-50%);
  background:#FFD700;border:2px solid rgba(0,56,115,.45);color:#003873;
  box-shadow:0 4px 12px rgba(0,56,115,.3);
  font:900 18px 'Prompt',sans-serif;
}
.rpgScene .charShadow{
  width:200px;height:16px;margin:-8px auto 0;
  background:radial-gradient(ellipse,rgba(0,56,115,.22) 0%,transparent 70%);
}

/* Quote bubble — direct child of .rpgScene, left of character, below hero copy */
.ajQuoteBubble{
  position:absolute;
  top:clamp(360px,42vh,450px);
  right:36%;            /* right edge sits just left of character at left:67% */
  width:220px;
  background:rgba(30,79,145,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,215,0,.5);
  border-radius:14px;
  padding:14px 16px 12px;
  pointer-events:none;z-index:12;
  opacity:1;
  transition:opacity .5s ease;
}
/* Speech bubble tail — points right toward character */
.ajQuoteBubble::after{
  content:'';position:absolute;
  right:-9px;top:22px;
  width:0;height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:9px solid rgba(30,79,145,.93);
}
.ajQuoteBubble.ajQuoteFade{opacity:0;}
.ajQuoteText{
  font:500 12.5px/1.55 'Sarabun',sans-serif;
  color:#fff;margin:0 0 8px;
}
.ajQuoteAttrib{
  font:600 11px/1 'Prompt',sans-serif;
  color:#FFD700;letter-spacing:.02em;
}

/* Hero aura — radial glow rising behind character feet */
.rpgScene .ajChar::before{
  content:'';position:absolute;bottom:-20px;left:50%;
  transform:translateX(-50%);
  width:180%;height:55%;
  background:radial-gradient(ellipse at center bottom,rgba(0,56,115,.10) 0%,rgba(255,215,0,.05) 45%,transparent 70%);
  pointer-events:none;z-index:-1;
  animation:heroAura 6s ease-in-out infinite;
}
@keyframes heroAura{
  0%,100%{opacity:.7;transform:translateX(-50%) scale(1);}
  50%{opacity:1;transform:translateX(-50%) scale(1.08);}
}

/* Hero tagline — RPG protagonist identifier (upper right) */
.heroTagline{
  position:absolute;right:5%;top:14%;z-index:11;
  pointer-events:none;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  animation:taglineFadeIn 1.2s ease .9s both;
}
@keyframes taglineFadeIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
.heroName{
  font:700 24px 'Prompt',sans-serif;color:#003873;line-height:1.1;
  text-shadow:0 2px 8px rgba(255,255,255,.8);
}
.heroRole{
  font:500 13px 'Sarabun',sans-serif;color:#1e4f91;
  background:rgba(255,215,0,.22);border:1.5px solid rgba(255,215,0,.55);
  border-radius:999px;padding:4px 16px;display:inline-block;
}
.heroLevel{
  font:700 11px 'Prompt',sans-serif;color:#735c00;
  background:#FFD700;border-radius:999px;padding:3px 12px;
  display:inline-block;letter-spacing:.04em;
  box-shadow:0 2px 10px rgba(255,215,0,.45);
}

/* ── Portrait thumbnail — upper body crop of full PNG ─────── */
.aaPortraitImg{
  width:80px;height:108px;overflow:hidden;flex-shrink:0;
  background:rgba(0,30,80,.35);border-right:2px solid rgba(255,215,0,.3);
}
.aaPortraitImg .pngCharImg{width:160%;height:220%;margin-left:-30%;margin-top:-2%;object-fit:cover;object-position:top center;}
.choiceCharThumb{width:64px;height:90px;overflow:hidden;flex-shrink:0;border-radius:8px;border:2px solid #FFD700;}
.choiceCharThumb .pngCharImg{width:160%;height:200%;margin-left:-30%;margin-top:-2%;object-fit:cover;object-position:top center;}
.csNpcImg .pngCharImg{width:100%;height:100%;object-fit:contain;object-position:bottom center;}

/* ── Dialog Bar: Scholar Blue glassmorphism ──────────────── */
.rpgScene .aaDialogBar{
  position:absolute;bottom:16px;left:clamp(18px,4vw,58px);right:clamp(18px,4vw,58px);
  height:auto;min-height:176px;
  background:linear-gradient(180deg,rgba(30,79,145,.97),rgba(0,44,103,.97));
  border:2px solid rgba(255,215,0,.72);
  border-radius:24px;
  grid-template-columns:104px minmax(0,1fr) minmax(280px,370px);
  gap:0;padding:0 18px;cursor:pointer;z-index:100;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 70px rgba(0,20,80,.34),0 0 0 6px rgba(255,215,0,.08),inset 0 1px 0 rgba(255,255,255,.20);
  overflow:hidden;
}
.rpgScene .aaDialogBar:hover{background:linear-gradient(180deg,rgba(30,79,145,.99),rgba(0,44,103,.99));}
.rpgScene .aaDialogPortrait{background:rgba(0,30,80,.28);border-right:1px solid rgba(255,215,0,.24);}
.rpgScene .aaDialogBody{padding:18px 20px 18px 18px;justify-content:center;}
.rpgScene .aaDialogName{margin-bottom:6px;}
.rpgScene .aaNameText{font:700 17px 'Prompt',sans-serif;color:#FFD700;}
.rpgScene .aaNameBadge{
  font:500 11px 'Sarabun',sans-serif;
  background:rgba(255,215,0,.18);color:#FFD700;
  border:1px solid rgba(255,215,0,.4);border-radius:6px;padding:2px 8px;
}
.rpgScene .aaDialogLine{
  color:#fff;font:500 16px 'Sarabun',sans-serif;
  line-height:1.6;max-height:92px;overflow:hidden;
}
.rpgScene .aaDialogText{color:#fff;}
.rpgScene .aaCursor{color:#FFD700;animation:rpgBlink .8s step-end infinite;}
@keyframes rpgBlink{50%{opacity:0;}}
.rpgScene .aaDialogAction{display:none;}
.rpgScene .aaClickBtn{
  background:#FFD700;color:#003873;
  border:2px solid rgba(255,215,0,.6);
  font:700 13px 'Prompt',sans-serif;
  border-radius:10px;padding:12px 16px;
  cursor:pointer;letter-spacing:.04em;
  transition:.15s;align-self:center;white-space:nowrap;
  box-shadow:0 3px 12px rgba(0,56,115,.3);
}
.rpgScene .aaClickBtn:hover{background:#ffe84d;transform:translateY(-1px);}

.rpgQuickChoices{
  display:flex;flex-direction:column;gap:9px;
  align-self:center;justify-self:stretch;
  padding:16px 0 16px 16px;
}
.rpgQuickChoice{
  min-height:42px;width:100%;
  display:grid;grid-template-columns:30px minmax(0,1fr) 18px;
  align-items:center;gap:10px;
  border:1.5px solid rgba(255,255,255,.26);
  border-radius:13px;
  background:rgba(255,255,255,.12);
  color:#fff;text-align:left;
  font:700 13px 'Prompt',sans-serif;
  cursor:pointer;transition:.16s;
  padding:8px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.rpgQuickChoice:hover{transform:translateX(3px);border-color:#FFD700;background:rgba(255,255,255,.20);}
.rpgQuickChoice.primary{
  background:#FFD700;color:#003873;border-color:#ffe979;
  box-shadow:0 10px 26px rgba(255,215,0,.28),inset 0 1px 0 rgba(255,255,255,.45);
}
.rpgQuickChoice.primary:hover{background:#ffe84d;}
.quickIcon{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);font-size:15px;
}
.rpgQuickChoice.primary .quickIcon{background:rgba(0,56,115,.10);}
.quickLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.quickArrow{font-size:24px;line-height:1;justify-self:end;color:currentColor;}

/* ── PRESS flash ─────────────────────────────────────────── */
.aaObjFlash{position:absolute;top:22%;left:50%;transform:translateX(-50%);z-index:50;pointer-events:none;display:none;}
.aaObjFlash.active{display:block;animation:objFlashIn 1s ease forwards;}
.aaObjText{
  display:block;font:700 24px 'Prompt',sans-serif;
  color:#FFD700;background:rgba(0,56,115,.92);
  border:2px solid #FFD700;
  padding:8px 28px;border-radius:10px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 4px 20px rgba(0,56,115,.4);white-space:nowrap;backdrop-filter:blur(4px);
}

/* ── Choice Overlay: Blue glassmorphism ──────────────────── */
.choiceOverlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,15,55,.72);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 20px 28px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.choiceBox{
  background:rgba(30,79,145,.96);
  border:2px solid rgba(255,215,0,.5);border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  width:100%;max-width:680px;overflow:hidden;
  animation:aaBoxSlideUp .22s ease;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.choiceCharStrip{
  display:flex;align-items:flex-end;gap:0;
  background:rgba(0,30,80,.5);border-bottom:2px solid rgba(255,215,0,.3);min-height:96px;
}
.choiceWho{font:700 11px 'Prompt',sans-serif;color:#FFD700;text-transform:uppercase;letter-spacing:.06em;display:block;}
.choiceSpeech > *:not(.choiceWho){font:500 15px 'Sarabun',sans-serif;color:#fff;line-height:1.5;}
.choiceList{padding:12px 14px 14px;}
.choiceItem{
  width:100%;display:flex;align-items:center;gap:12px;
  border:2px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);
  border-radius:10px;padding:13px 16px;margin-bottom:8px;
  font:500 15px 'Sarabun',sans-serif;color:#fff;
  cursor:pointer;transition:.15s;text-align:left;
  opacity:0;animation:aaItemSlideIn .3s ease both;
}
.choiceItem:last-child{margin-bottom:0;}
.choiceItem:hover{
  background:#FFD700;color:#003873;border-color:#FFD700;
  transform:translateX(4px);box-shadow:0 4px 16px rgba(255,215,0,.4);
}
.choiceClose{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.15);}
.choiceClose:hover{background:rgba(200,60,60,.25);color:#ff9a9a;border-color:rgba(200,60,60,.4);transform:none;box-shadow:none;}
.choiceIcon{font-size:19px;flex-shrink:0;}
.choiceLabel{flex:1;}
.choiceArrow{color:#FFD700;font-size:12px;transition:.1s;}
.choiceItem:hover .choiceArrow{color:#003873;}

/* ── Cutscene: Scholar Blue panels ───────────────────────── */
.csOverlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,10,40,.88);
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;padding:0 16px 22px;gap:14px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.csCloseBtn{
  position:absolute;top:16px;right:16px;z-index:2;
  border:2px solid rgba(255,215,0,.5);background:rgba(0,56,115,.7);
  border-radius:10px;padding:8px 16px;color:#FFD700;
  font:700 11px 'Prompt',sans-serif;letter-spacing:.04em;cursor:pointer;transition:.12s;
  backdrop-filter:blur(4px);
}
.csCloseBtn:hover{background:rgba(0,56,115,.92);}
.csPanel{
  border:2px solid rgba(255,215,0,.4);border-radius:20px;
  background:rgba(30,79,145,.95);overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.csNameBar{
  background:rgba(0,30,80,.6);color:#fff;
  padding:12px 22px;display:flex;gap:12px;align-items:center;
  border-bottom:2px solid rgba(255,215,0,.3);
}
.csNameText{font:700 15px 'Prompt',sans-serif;color:#FFD700;letter-spacing:.02em;}
.csBadge{
  font:700 10px 'Prompt',sans-serif;
  background:#FFD700;color:#003873;
  border:1.5px solid rgba(255,215,0,.7);
  border-radius:6px;padding:3px 9px;text-transform:uppercase;letter-spacing:.04em;
}
.csContent{padding:18px 22px 12px;min-height:96px;max-height:34vh;overflow-y:auto;}
.csText{font:500 16px 'Sarabun',sans-serif;color:#fff;line-height:1.75;white-space:pre-line;}
.csNavBar{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px 16px;border-top:1px solid rgba(255,215,0,.2);background:rgba(0,30,80,.3);
}
.csBtn{
  border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.10);
  border-radius:10px;padding:9px 18px;
  font:700 12px 'Prompt',sans-serif;letter-spacing:.04em;cursor:pointer;color:#fff;transition:.12s;
}
.csBtn.small{padding:6px 12px;font-size:10px;}
.csBtn:disabled{opacity:.35;cursor:default;}
.csBtn.primary{background:#FFD700;color:#003873;border-color:#FFD700;}
.csBtn:not(:disabled):hover{background:rgba(255,255,255,.22);}
.csBtn.primary:not(:disabled):hover{background:#ffe84d;border-color:#ffe84d;}
.csDots{flex:1;display:flex;gap:8px;justify-content:center;}
.csDot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.3);transition:.15s;}
.csDot.active{background:#FFD700;border-color:#FFD700;transform:scale(1.3);}
.csActionRow{display:flex;gap:12px;justify-content:center;align-items:center;padding-bottom:4px;position:relative;z-index:1;}
.csActionBtn{font-size:14px;padding:13px 28px;box-shadow:0 4px 16px rgba(255,215,0,.45);}

/* Plans inside cutscene */
.csPlansGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.csPlanCard{
  border:2px solid rgba(255,255,255,.2);border-radius:14px;
  background:rgba(255,255,255,.10);padding:12px 10px;text-align:center;color:#fff;
}
.csPlanCard.popular{background:rgba(255,215,0,.15);border-color:rgba(255,215,0,.55);}
.csPlanCard.best{background:rgba(255,215,0,.22);border-color:#FFD700;}
.csPlanBadge{
  display:inline-block;background:#FFD700;border:1.5px solid rgba(255,215,0,.7);
  border-radius:6px;padding:2px 8px;
  font:700 8px 'Prompt',sans-serif;color:#003873;
  margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase;
}
.csPlanBadge.best{background:#fff;color:#003873;}
.csPlanCard h4{font-size:13px;margin-bottom:4px;color:#fff;font-family:'Prompt',sans-serif;font-weight:600;}
.csPlanPrice{font:700 20px 'Prompt',sans-serif;color:#FFD700;}
.csPlanPrice small{font-size:10px;color:rgba(255,215,0,.75);font-weight:600;}
.csPlanDur{font-size:10px;color:rgba(255,255,255,.65);margin:2px 0 8px;}
.csPlanCard ul{list-style:none;text-align:left;font-size:11px;margin-bottom:8px;}
.csPlanCard li{padding:2px 0;color:rgba(255,255,255,.8);}

/* Steps inside cutscene */
.csStepsList{display:flex;flex-direction:column;gap:8px;}
.csStep{
  display:grid;grid-template-columns:32px 1fr;gap:10px;
  align-items:flex-start;
  background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.15);
  border-radius:12px;padding:10px 14px;
}
.csStepNum{
  width:30px;height:30px;border-radius:50%;
  background:#FFD700;color:#003873;
  border:2px solid rgba(255,215,0,.6);
  display:flex;align-items:center;justify-content:center;
  font:700 13px 'Prompt',sans-serif;flex-shrink:0;
}
.csStep b{display:block;font-size:13px;margin-bottom:2px;color:#FFD700;font-family:'Prompt',sans-serif;}
.csStep p{font-size:12px;color:rgba(255,255,255,.8);margin:0;font-family:'Sarabun',sans-serif;}

/* ── Login Modal: mobile signup flow ─────────────────────── */
.loginModal{
  position:fixed;inset:0;z-index:10000;
  background:radial-gradient(circle at 32% 18%,rgba(255,229,186,.42),transparent 28%),
    linear-gradient(135deg,rgba(244,241,255,.92),rgba(254,247,237,.92));
  display:flex;align-items:center;justify-content:center;padding:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.loginModalInner{
  background:linear-gradient(180deg,#f2f0ff 0%,#f7f0ff 56%,#fff7ec 100%);
  border-radius:34px;
  padding:26px 22px 22px;width:min(372px,100%);
  max-height:min(92vh,760px);overflow-y:auto;position:relative;
  border:4px solid #101018;
  box-shadow:0 28px 70px rgba(22,18,45,.24);
  animation:modalIn .25s ease;
  color:#1d1738;
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
.authPhoneStatus{display:flex;align-items:center;justify-content:space-between;margin:-7px 0 22px;color:#1d1738;font:700 12px 'Prompt',sans-serif;}
.authPhoneStatus i{display:block;width:104px;height:28px;border-radius:999px;background:#050505;}
.loginModalClose{
  position:absolute;top:48px;right:18px;
  background:rgba(255,255,255,.72);border:1px solid rgba(29,23,56,.08);
  border-radius:50%;width:30px;height:30px;
  font-size:13px;cursor:pointer;font-weight:700;color:#8a8498;transition:.15s;
}
.loginModalClose:hover{background:#fff;color:#1d1738;}
.loginBrandMark{
  width:42px;height:42px;border-radius:11px;background:#261d49;color:#ffd75a;
  display:flex;align-items:center;justify-content:center;
  font:800 15px 'Prompt',sans-serif;margin:0 0 12px;
  box-shadow:0 10px 22px rgba(38,29,73,.18);
}
.loginModalTitle{font:800 21px/1.18 'Prompt',sans-serif;color:#1d1738;margin:0 48px 4px 0;letter-spacing:0;}
.loginModalTitle .gold{color:#1d1738;}
.loginModalSub{margin:0 0 14px;color:#8f879b;font:600 11px/1.45 'Sarabun',sans-serif;}
.loginModalInner .roleTabs{
  margin:0 0 12px;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.72);
  border-radius:16px;padding:5px;gap:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.loginModalInner .roleTab{
  border-radius:12px;padding:9px 8px;font:800 12px 'Prompt',sans-serif;color:#867f95;
}
.loginModalInner .roleTab.active{background:#261d49;color:#fff;box-shadow:0 5px 12px rgba(38,29,73,.20);}
.loginModalInner .authModeTabs{gap:7px;margin:0 0 10px;}
.loginModalInner .authModeTab{
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.8);
  color:#857e93;border-radius:13px;padding:8px 7px;font:700 11px 'Prompt',sans-serif;
}
.loginModalInner .authModeTab.active{background:#fff;border-color:#fff;color:#261d49;box-shadow:0 4px 12px rgba(38,29,73,.08);}
.loginModalInner .authModeIntro{display:none;}
.loginModalInner .googleSignInSection{margin:8px 0 12px;}
.loginModalInner .authDivider{margin:10px 0;color:#b1a9bb;font:600 11px 'Sarabun',sans-serif;}
.loginModalInner .googleSignInButton{
  min-height:42px;background:#fff;border:1px solid rgba(38,29,73,.08);
  border-radius:11px;align-items:center;overflow:hidden;box-shadow:0 5px 14px rgba(38,29,73,.06);
}
.loginModalInner .googleSignInHint{display:none;}
.loginModalInner .fieldLabel{font:700 11px 'Sarabun',sans-serif;color:#8f879b;margin:10px 0 6px;}
.loginModalInner .fieldInput{
  border:1px solid rgba(38,29,73,.07);background:rgba(255,255,255,.78);
  border-radius:12px;padding:12px 14px;font:700 13px 'Prompt',sans-serif;color:#1d1738;
  min-height:44px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.loginModalInner .fieldInput::placeholder{color:#a49cab;opacity:1;}
.loginModalInner .fieldInput:focus{border-color:#ffad22;box-shadow:0 0 0 3px rgba(255,173,34,.14);}
.loginModalInner .actionBtn.primary{
  background:#2b214e;border-color:#2b214e;color:#fff;border-radius:13px;
  box-shadow:0 10px 20px rgba(43,33,78,.24);font:800 13px 'Prompt',sans-serif;
}
.loginModalInner .actionBtn.primary:hover{background:#372762;border-color:#372762;transform:translateY(-1px);}
.loginModalInner .actionBtn.full{border-radius:13px;}
.loginModalInner .actionBtn.large{padding:13px 18px;font-size:13px;}
.loginModalInner.otpMode .loginBrandMark,
.loginModalInner.otpMode .loginModalTitle,
.loginModalInner.otpMode .loginModalSub,
.loginModalInner.otpMode .roleTabs,
.loginModalInner.otpMode .authModeTabs,
.loginModalInner.otpMode .loginModalPricing,
.loginModalInner.successMode .loginBrandMark,
.loginModalInner.successMode .loginModalTitle,
.loginModalInner.successMode .loginModalSub,
.loginModalInner.successMode .roleTabs,
.loginModalInner.successMode .authModeTabs,
.loginModalInner.successMode .loginModalPricing{display:none!important;}
.loginModalInner.otpMode{padding-top:26px;}
.loginModalInner.otpMode .loginModalClose{left:18px;right:auto;top:48px;}
.loginModalInner.otpMode label[for="loginEmail"]{display:none!important;}
.loginModalInner.otpMode #loginEmail{margin-top:38px;}
.loginModalInner.otpMode .loginError{
  background:rgba(255,255,255,.72);border-color:rgba(255,159,28,.45);
  color:#8a6214;font-size:12px;padding:9px 12px;
}
.loginModalPricing{
  margin-top:10px;padding-top:0;border-top:0;
  font:500 10px 'Sarabun',sans-serif;text-align:center;color:#a39ba9;
}
.toeicLiveSchedulePicker{margin:10px 0 12px;border:0;background:transparent;border-radius:0;padding:0;}
.toeicLiveSchedulePicker .fieldLabel{margin:0 0 8px;color:#8f879b;}
.toeicLiveSchedulePicker p{margin:8px 0 0;color:#a39ba9;font:500 10px/1.4 'Sarabun',sans-serif;text-align:center;}
.scheduleChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.scheduleChoice{
  min-height:42px;border:1px solid rgba(38,29,73,.07);border-radius:12px;background:rgba(255,255,255,.74);
  color:#766f83;font:700 11px 'Prompt',sans-serif;cursor:pointer;transition:.15s;
}
.scheduleChoice.active{border-color:#ff9f1c;background:#fff8f0;color:#2b214e;box-shadow:inset 0 0 0 1px #ff9f1c;}
.otpHero{
  background:transparent;border:0;border-radius:0;padding:0;margin:4px 0 14px;
  display:flex;gap:12px;align-items:flex-start;
}
.otpHeroIcon{
  width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#ffd35f,#ffa627);
  display:flex;align-items:center;justify-content:center;color:#2b214e;font:800 18px 'Prompt',sans-serif;
  box-shadow:0 12px 24px rgba(255,173,34,.28);
}
#otpStepTitle{font:800 19px/1.25 'Prompt',sans-serif;color:#1d1738;margin:0 0 5px;}
#otpStepMessage{font:600 11px/1.45 'Sarabun',sans-serif;color:#8f879b;margin:0;}
#otpEmailDisplay{color:#1d1738;}
#otpExpiryText{font:600 10px 'Sarabun',sans-serif;color:#b28a39;margin:5px 0 0;}
.otpInput{
  font-size:22px!important;letter-spacing:10px!important;text-align:center!important;
  font-weight:800!important;padding:12px 8px!important;background:#fff!important;
}
.authBackButton{
  font-size:12px!important;background:transparent!important;color:#8f879b!important;
  border-color:transparent!important;margin-left:auto!important;
}
.signupSuccessStep{text-align:center;padding:10px 0 2px;}
.successCheck{
  width:78px;height:78px;border-radius:50%;background:#22c997;color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  font:900 42px 'Prompt',sans-serif;box-shadow:0 18px 34px rgba(34,201,151,.36);
}
.signupSuccessStep h3{font:800 22px/1.28 'Prompt',sans-serif;color:#1d1738;margin:0 0 8px;}
.signupSuccessStep p{font:600 12px/1.45 'Sarabun',sans-serif;color:#8f879b;margin:0 0 18px;}
.successCourseCard{
  display:flex;align-items:center;gap:12px;text-align:left;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:14px;margin:0 0 12px;
}
.successCourseIcon{
  width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#ffd35f,#ffa627);
  display:flex;align-items:center;justify-content:center;color:#2b214e;font:800 13px 'Prompt',sans-serif;flex-shrink:0;
}
.successCourseCard b{display:block;font:800 12px 'Prompt',sans-serif;color:#1d1738;}
.successCourseCard small{display:block;font:600 10px 'Sarabun',sans-serif;color:#8f879b;margin-top:2px;}
.successStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px;}
.successStats div{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);border-radius:13px;padding:10px 6px;}
.successStats b{display:block;font:800 16px 'Prompt',sans-serif;color:#1d1738;}
.successStats span{display:block;font:600 9px 'Sarabun',sans-serif;color:#8f879b;}
.successSecondary{background:#fff!important;color:#1d1738!important;border-color:rgba(38,29,73,.10)!important;margin-top:9px!important;}

/* ── Rotating hook texts: cream pills + drift float ──────── */
.rpgHookBg{position:absolute;inset:0;pointer-events:none;z-index:2;}
.rpgHook{
  position:absolute;
  background:rgba(255,253,244,.94);
  border:1.5px solid rgba(0,56,115,.12);
  border-radius:999px;padding:10px 20px;
  font:500 13px 'Sarabun',sans-serif;color:#003873;
  max-width:min(260px,38vw);text-align:center;line-height:1.4;
  opacity:0;transform:translateY(12px) scale(.96);
  transition:opacity .5s ease,transform .5s ease;
  box-shadow:0 4px 18px rgba(0,56,115,.10),0 1px 4px rgba(0,56,115,.06);
}
.rpgHook.rpgHookVisible{
  opacity:1;transform:translateY(0) scale(1);
  animation:hookDrift 6s ease-in-out .6s infinite;
}
@keyframes hookDrift{0%,100%{margin-top:0;}50%{margin-top:-8px;}}
.rpgHeroBadge{
  opacity:1;transform:none;
  display:flex;align-items:center;gap:8px;
  font:700 14px 'Prompt',sans-serif;color:#1c1c15;
  max-width:none;z-index:13;
  animation:hookDrift 6s ease-in-out infinite;
}
.badgeFree{top:25%;right:5%;animation-delay:.2s;}
.badgeTutor{top:42%;right:3%;animation-delay:1.4s;}
.badgeCareer{top:58%;right:7%;animation-delay:2.3s;}

/* ── Mobile RPG ──────────────────────────────────────────── */
@media(max-width:900px){
  .ajQuoteBubble{display:none;}
  .rpgHeroCopy{top:82px;width:min(82vw,760px);}
  .rpgHeroCopy h1{font-size:clamp(32px,6vw,50px);}
  .rpgHeroCopy p{font-size:15px;line-height:1.55;}
  .rpgVideoCard{top:clamp(330px,47vh,390px);width:min(34vw,330px);}
  .heroTagline{right:3%;top:12%;}
  .heroName{font-size:18px;}
  .heroRole,.heroLevel{font-size:11px;}
  .rpgScene .ajChar{left:57%;width:min(52vw,430px);height:min(64vh,520px);bottom:190px;}
  .rpgScene .aaDialogBar{
    bottom:14px;left:16px;right:16px;height:auto;min-height:164px;
    grid-template-columns:86px minmax(0,1fr) minmax(250px,320px);
    padding:0 14px;border-radius:22px;
  }
  .rpgQuickChoices{padding-left:12px;}
  .rpgQuickChoice{min-height:39px;font-size:12px;}
}
@media(max-width:760px){
  .rpgHeroCopy{
    top:78px;left:20px;right:20px;width:auto;text-align:center;transform:none;
  }
  .rpgHeroCopy h1{font-size:clamp(29px,8.5vw,42px);line-height:1.08;margin-bottom:10px;}
  .rpgHeroCopy p{max-width:520px;margin:0 auto;font-size:14px;line-height:1.5;}
  .rpgHeroActions{display:none;}
  .rpgPrimaryChoice,.rpgGhostChoice{padding:10px 15px;border-radius:14px;font-size:12px;}
  .rpgVideoCard{
    left:18px;right:auto;top:314px;width:min(46vw,184px);height:118px;max-height:none;
    aspect-ratio:auto;padding:12px 13px;border-radius:18px;
  }
  .rpgVideoLabel{margin-bottom:9px;font-size:9px;padding:3px 8px;}
  .rpgVideoPlay{width:32px;height:32px;right:12px;top:12px;}
  .rpgVideoTitle{font-size:13px;max-width:100%;}
  .rpgVideoMeta{display:none;}
  .heroTagline{display:none;}
  .ajQuoteBubble{display:none;}
  .rpgScene .ajChar{left:50%;width:min(86vw,360px);height:min(47vh,390px);bottom:246px;}
  .rpgScene .aaDialogBar{
    bottom:10px;left:10px;right:10px;height:auto;min-height:240px;
    grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto auto;
    padding:0 12px 12px;border-radius:20px;
  }
  .rpgScene .aaDialogPortrait{min-height:86px;border-right:1px solid rgba(255,215,0,.20);}
  .rpgScene .aaDialogBody{padding:14px 0 10px 12px;}
  .rpgScene .aaDialogName{gap:7px;margin-bottom:4px;flex-wrap:wrap;}
  .rpgScene .aaNameText{font-size:15px;}
  .rpgScene .aaNameBadge{font-size:10px;}
  .rpgScene .aaDialogLine{font-size:13px;line-height:1.45;max-height:50px;}
  .rpgQuickChoices{grid-column:1/-1;padding:0;gap:7px;}
  .rpgQuickChoice{min-height:39px;font-size:12px;border-radius:12px;padding:7px 10px;}
  .quickIcon{width:26px;height:26px;}
  .aaPortraitImg{width:54px;height:78px;}
  .rpgEnterBtn{padding:8px 14px;font-size:12px;}
  .rpgHeroBadge{font-size:11px;padding:8px 12px;max-width:47vw;}
  .badgeFree{top:43%;right:4%;}
  .badgeTutor{top:53%;right:6%;}
  .badgeCareer{top:63%;right:4%;}
}
@media(max-width:480px){
  .rpgHeroCopy{top:74px;left:16px;right:16px;}
  .rpgHeroCopy h1{font-size:29px;}
  .rpgHeroCopy p{font-size:12.5px;line-height:1.42;}
  .rpgVideoCard{top:300px;left:16px;width:min(45vw,174px);height:112px;}
  .rpgScene .ajChar{width:min(88vw,340px);height:min(44vh,350px);bottom:244px;}
  .rpgScene .aaDialogBar{min-height:238px;grid-template-columns:54px minmax(0,1fr);}
  .rpgScene .aaDialogLine{font-size:12.5px;max-height:48px;}
  .rpgQuickChoice{font-size:11.5px;}
  .loginModalInner{padding:20px 16px 16px;}
  .rpgEnterBtn{padding:7px 12px;font-size:11px;}
  .rpgTopBar{padding:10px 12px;}
  .rpgBrand small{display:none;}
  .rpgHeroBadge{font-size:10px;padding:7px 10px;}
}

/* ═══════════════════════════════════════════════════════════════
   Gallery landing redesign — warm app showcase
   ═══════════════════════════════════════════════════════════════ */
.galleryLanding{
  height:min(100vh,760px);
  min-height:640px;
  overflow:hidden;
  background:
    radial-gradient(circle at 9% 96%,rgba(253,238,226,.96),transparent 28%),
    radial-gradient(circle at 76% 2%,rgba(255,223,186,.55),transparent 23%),
    linear-gradient(180deg,#ffb471 0%,#ff9a53 42%,#fff4ea 100%);
  color:#221824;
  font-family:'Sarabun',sans-serif;
}
.galleryLanding::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.18),transparent 18%,transparent 82%,rgba(255,255,255,.18)),
    radial-gradient(circle at 50% 115%,rgba(24,16,24,.18),transparent 38%);
  opacity:.86;
}
.galleryLanding::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:118px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,244,234,0),#fff4ea 76%,#fff 100%);
}
.galleryLanding > .rpgHeroCopy,
.galleryLanding > .rpgVideoCard,
.galleryLanding > .rpgHookBg,
.galleryLanding > .rpgTrailer,
.galleryLanding > .ajChar,
.galleryLanding > .ajQuoteBubble,
.galleryLanding > .heroTagline,
.galleryLanding > .aaDialogBar,
.galleryLanding > .aaObjFlash{display:none!important;}
.galleryLanding .rpgTopBar{
  position:absolute;top:18px;left:28px;right:28px;z-index:30;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(37,24,32,.18);
  border-radius:22px;
  padding:10px 14px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 40px rgba(80,34,18,.14);
}
.galleryLanding .rpgBrand .mark{background:#241722;color:#ffcf5c;border:0;border-radius:12px;}
.galleryLanding .rpgBrand strong{color:#fff;font-size:15px;text-shadow:0 1px 10px rgba(80,34,18,.3);}
.galleryLanding .rpgBrand small{color:rgba(255,255,255,.78);letter-spacing:.08em;}
.galleryLanding .rpgEnterBtn{
  border:1px solid rgba(255,255,255,.55);
  background:#fff;color:#2d1721;border-radius:16px;
  box-shadow:0 10px 28px rgba(94,37,20,.22);
}
.galleryLanding .rpgTopActions .aaMuteBtn{display:none;}
.galleryHero{
  position:relative;z-index:4;
  height:100%;min-height:640px;
  display:flex;align-items:center;
  padding:92px 0 86px;
}
.galleryHeroCopy{
  position:absolute;left:clamp(26px,4vw,64px);top:104px;z-index:20;
  width:min(360px,30vw);
  color:#fff;
  text-shadow:0 2px 22px rgba(71,25,14,.28);
}
.galleryHeroCopy h1{
  margin:0 0 12px;
  font:800 clamp(34px,4.2vw,62px)/.98 'Prompt',sans-serif;
  letter-spacing:0;text-wrap:balance;
}
.galleryHeroCopy p{margin:0;color:rgba(255,255,255,.86);font:600 15px/1.58 'Sarabun',sans-serif;}
.galleryHeroActions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.galleryPrimaryCta,.gallerySecondaryCta{
  border:0;border-radius:16px;padding:13px 17px;
  font:800 13px 'Prompt',sans-serif;cursor:pointer;transition:.18s;
}
.galleryPrimaryCta{background:#241722;color:#fff;box-shadow:0 16px 30px rgba(36,23,34,.26);}
.gallerySecondaryCta{background:rgba(255,255,255,.28);color:#fff;border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(14px);}
.galleryPrimaryCta:hover,.gallerySecondaryCta:hover{transform:translateY(-2px);}
.galleryShowcase{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-46%);
  width:1460px;height:420px;
}
.galleryPanel{
  position:absolute;overflow:hidden;
  border-radius:22px;
  box-shadow:0 24px 54px rgba(62,25,18,.22);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.miniLibrary{
  left:-120px;top:58px;width:182px;height:302px;
  background:rgba(255,255,255,.22);color:#fff;padding:16px;
  border:1px solid rgba(255,255,255,.32);
}
.miniNav{display:flex;align-items:center;gap:9px;font:700 8px 'Prompt',sans-serif;color:rgba(255,255,255,.78);}
.miniNav b{margin-left:auto;background:#241722;color:#ffcf5c;border-radius:9px;padding:6px 7px;}
.miniLibrary p{font:700 12px 'Prompt',sans-serif;margin:18px 0 10px;color:#fff;}
.miniCards{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.miniCards button{
  min-height:102px;border:0;border-radius:14px;background-size:cover;background-position:center;
  color:#fff;display:flex;align-items:flex-end;padding:8px;text-align:left;
  box-shadow:inset 0 -58px 42px rgba(32,18,18,.52);cursor:pointer;
}
.miniCards button:first-child{grid-row:span 1;}
.miniCards button:nth-child(3){grid-column:1/-1;min-height:96px;}
.miniCards span{font:800 9px/1.25 'Prompt',sans-serif;}
.storyCard{
  left:88px;top:38px;width:172px;height:318px;border-radius:22px;background:#1b1515;color:#fff;
}
.storyMedia{position:absolute;inset:0;background-size:cover;background-position:center;}
.storyCopy{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;}
.storyCopy span{font:700 9px 'Prompt',sans-serif;color:rgba(255,255,255,.68);}
.storyCopy h2{font:800 17px/1.05 'Prompt',sans-serif;margin:5px 0 6px;color:#fff;}
.storyCopy p{font:500 9px/1.35 'Sarabun',sans-serif;color:rgba(255,255,255,.76);margin:0 0 10px;}
.storyCopy button{border:1px solid rgba(255,255,255,.5);background:#fff;color:#241722;border-radius:999px;padding:7px 12px;font:800 9px 'Prompt',sans-serif;cursor:pointer;}
.courseStack{
  left:278px;top:10px;width:180px;height:340px;background:rgba(255,255,255,.86);padding:22px 16px;color:#241722;
}
.courseBubble{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#e34acb;color:#fff;font:800 8px 'Prompt',sans-serif;margin-bottom:22px;}
.courseStack h2{font:500 38px/.88 Georgia,serif;letter-spacing:-.05em;margin:0 0 10px;color:#2b1f21;}
.courseStack p{font:600 12px 'Sarabun',sans-serif;margin:0 0 18px;color:#4f4445;}
.courseArrows{display:flex;gap:10px;margin-bottom:18px;}
.courseArrows button{width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:#2b1f21;font:800 12px 'Prompt',sans-serif;box-shadow:0 6px 14px rgba(36,23,34,.12);}
.courseTile{display:block;width:100%;border:0;background:#fff;border-radius:14px;padding:8px;text-align:left;cursor:pointer;box-shadow:0 8px 22px rgba(36,23,34,.10);}
.courseArt{display:block;height:78px;border-radius:9px;margin-bottom:9px;background:url('../assets/live-toeic/toeic-live-slide-03.png') center/cover;}
.courseTile b{display:block;font:700 14px Georgia,serif;color:#2b1f21;}
.courseTile small{font:600 9px 'Sarabun',sans-serif;color:#786f72;}
.analyticsCard{
  left:472px;top:-10px;width:208px;height:402px;background:#241716;color:#fff;padding:12px;
  border-radius:10px 10px 24px 24px;box-shadow:0 30px 64px rgba(36,23,22,.42);
}
.analyticsCard h2{font:700 19px/1.05 'Prompt',sans-serif;margin:0 0 14px;color:#fff;}
.metricGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.metricGrid span{display:block;border-radius:9px;padding:10px 9px;background:#d43cdc;}
.metricGrid span:nth-child(2){background:#4d3be0;}
.metricGrid small{display:block;font:600 9px 'Sarabun',sans-serif;color:rgba(255,255,255,.78);}
.metricGrid b{display:block;font:800 22px 'Prompt',sans-serif;color:#fff;}
.savingsBox{background:#d2afce;color:#2b1f21;border-radius:11px;padding:12px;margin-bottom:8px;}
.savingsBox small{display:block;font:800 10px 'Prompt',sans-serif;margin-bottom:10px;}
.savingsBox i{display:block;height:3px;width:var(--w);background:#5e3338;margin:10px 0;border-radius:999px;}
.trendBox{height:128px;border-radius:10px;background:#5a3a37;padding:12px;color:#fff;}
.trendBox span{font:700 10px 'Prompt',sans-serif;color:#fff;}
.trendLine{height:78px;margin-top:16px;background:linear-gradient(130deg,transparent 0 12%,#f5cf55 13% 15%,transparent 16% 32%,#f5cf55 33% 36%,transparent 37% 52%,#e74de9 53% 55%,transparent 56% 70%,#f5cf55 71% 74%,transparent 75%);}
.calmCard{
  left:692px;top:10px;width:180px;height:340px;background:linear-gradient(180deg,rgba(239,255,252,.9),rgba(43,21,18,.92)),url('../assets/studio-background.webp.png') center/cover;color:#9d2729;padding:18px;
}
.calmTop{display:flex;align-items:center;justify-content:space-between;color:#9d2729;font:700 8px 'Prompt',sans-serif;}
.calmTop button{border:0;background:transparent;color:#9d2729;font:800 16px 'Prompt',sans-serif;}
.calmCard h2{font:500 28px/1.02 'Prompt',sans-serif;letter-spacing:-.04em;text-align:center;margin:38px 0 8px;}
.calmCard p{text-align:center;font:700 9px 'Prompt',sans-serif;color:rgba(157,39,41,.35);margin:0;}
.calmOrbit{position:absolute;left:42px;right:42px;top:144px;height:118px;border-radius:50%;}
.calmOrbit span{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(255,255,255,.9);}
.calmOrbit span:nth-child(1){left:50%;top:0}.calmOrbit span:nth-child(2){right:4px;top:42px}.calmOrbit span:nth-child(3){left:12px;top:60px}.calmOrbit span:nth-child(4){right:30px;bottom:5px}.calmOrbit span:nth-child(5){left:44px;bottom:18px}
.calmCard > button{position:absolute;left:18px;right:18px;bottom:18px;border:1px solid rgba(255,255,255,.34);background:rgba(35,23,30,.58);color:#fff;border-radius:999px;padding:10px;font:800 11px 'Prompt',sans-serif;cursor:pointer;}
.eveningCard{
  left:888px;top:38px;width:158px;height:300px;background:linear-gradient(180deg,rgba(37,65,86,.2),rgba(37,22,27,.8)),url('../assets/live-toeic/toeic-live-banner-1200x628.png') center/cover;color:#fff;padding:18px;border-radius:20px;
}
.avatarDot{display:block;width:22px;height:22px;border-radius:50%;background:url('../assets/agents/coach-aj.webp.png') center/cover;margin-bottom:18px;border:2px solid rgba(255,255,255,.7);}
.eveningCard h2{font:500 21px/1.08 'Prompt',sans-serif;margin:0 0 18px;}
.eveningCard p{font:600 9px 'Sarabun',sans-serif;color:rgba(255,255,255,.72);margin:0 0 10px;}
.tagCloud{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.tagCloud span{border-radius:999px;background:rgba(255,255,255,.22);padding:5px 8px;font:700 8px 'Prompt',sans-serif;color:#fff;}
.eveningCard button{position:absolute;left:18px;right:18px;bottom:18px;border:0;border-radius:13px;background:#17172c;color:#fff;padding:10px;font:800 10px 'Prompt',sans-serif;cursor:pointer;}
.scoreCard{
  left:1058px;top:58px;width:160px;height:292px;background:#211917;color:#fff;padding:14px;border-radius:7px 22px 7px 7px;
}
.scoreTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.scoreTop span{font:700 13px 'Prompt',sans-serif}.scoreTop b{background:#fff;color:#241722;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font:800 8px 'Prompt',sans-serif;}
.scoreRing{width:94px;height:94px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#8fdfbf 0 31%,#f0d45a 31% 62%,#e84a5f 62% 78%,#7658dc 78% 100%);}
.scoreRing span{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#211917;color:#fff;font:800 15px 'Prompt',sans-serif;}
.scoreCard p{font:700 10px 'Prompt',sans-serif;color:rgba(255,255,255,.72);margin:0 0 10px;}
.dotRows{height:78px;border-radius:10px;background-image:radial-gradient(circle,#f2e2c7 5px,transparent 6px);background-size:18px 18px;background-position:0 0;}
@media(max-width:1100px){
  .galleryHeroCopy{top:92px;width:min(330px,42vw);}
  .galleryShowcase{transform:translate(-42%,-43%) scale(.86);transform-origin:center;}
}
@media(max-width:760px){
  .galleryLanding{height:auto;min-height:820px;overflow:hidden;}
  .galleryLanding .rpgTopBar{left:14px;right:14px;top:12px;border-radius:18px;}
  .galleryLanding .rpgBrand small{display:block;}
  .galleryLanding .rpgEnterBtn{font-size:11px;padding:8px 12px;}
  .galleryHero{min-height:820px;padding:90px 0 44px;display:block;}
  .galleryHeroCopy{position:relative;left:auto;top:auto;width:auto;margin:0 18px 18px;text-align:left;}
  .galleryHeroCopy h1{font-size:36px;max-width:330px;}
  .galleryHeroCopy p{font-size:14px;max-width:330px;}
  .galleryShowcase{position:relative;left:auto;top:auto;transform:none;width:100%;height:560px;margin-top:10px;overflow:visible;}
  .miniLibrary{left:-34px;top:38px;transform:scale(.76);transform-origin:left top;}
  .storyCard{left:108px;top:24px;transform:scale(.82);transform-origin:left top;}
  .courseStack{left:238px;top:6px;transform:scale(.76);transform-origin:left top;}
  .analyticsCard{left:74px;top:300px;transform:scale(.72);transform-origin:left top;}
  .calmCard{left:226px;top:274px;transform:scale(.74);transform-origin:left top;}
  .eveningCard,.scoreCard{display:none;}
}

/* Single-theme landing override: warm media/story app */
.galleryLanding{
  height:min(100vh,700px);
  min-height:560px;
  background:
    radial-gradient(circle at 72% 100%,rgba(255,226,206,.82),transparent 32%),
    linear-gradient(180deg,#ffb371 0%,#ff9957 54%,#ffd3c0 100%);
}
.galleryLanding::before{
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.16),transparent 20%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 44%);
  opacity:1;
}
.galleryLanding::after{height:76px;background:linear-gradient(180deg,rgba(255,211,192,0),rgba(255,240,229,.88));}
.galleryLanding .rpgTopBar{display:none!important;}
.galleryHero{
  min-height:inherit;
  height:100%;
  padding:0;
  display:grid;
  place-items:center;
}
.gallerySrTitle{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.streamShowcase{
  width:760px;
  height:520px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.streamLibrary,
.streamFeature{
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 28px 68px rgba(93,38,22,.24);
}
.streamLibrary{
  left:32px;
  top:76px;
  width:258px;
  height:394px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.31),rgba(255,255,255,.18));
  color:#fff;
}
.streamMiniNav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
}
.streamMiniNav button{
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.76);
  padding:6px 8px;
  font:700 9px 'Prompt',sans-serif;
  cursor:pointer;
}
.streamMiniNav .is-active{background:rgba(255,255,255,.18);color:#fff;}
.streamAvatar{
  margin-left:auto;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0!important;
  border-radius:10px!important;
  background:#241722!important;
  color:#ffcf5c!important;
  font:900 10px 'Prompt',sans-serif!important;
  box-shadow:0 8px 18px rgba(36,23,34,.18);
}
.streamPanelTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.streamPanelTitle p{
  margin:0;
  color:#fff;
  font:600 14px 'Prompt',sans-serif;
  text-shadow:0 1px 10px rgba(36,23,34,.16);
}
.streamPanelTitle button{
  border:0;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font:900 13px 'Prompt',sans-serif;
  cursor:pointer;
}
.streamCards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.streamTile{
  position:relative;
  min-height:122px;
  border:0;
  border-radius:16px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  color:#fff;
  text-align:left;
  padding:10px;
  cursor:pointer;
  box-shadow:inset 0 -64px 48px rgba(35,20,18,.58),0 12px 24px rgba(80,35,21,.16);
}
.streamTileLarge{min-height:138px;}
.streamTileWide{grid-column:1/-1;min-height:118px;}
.streamTile span{
  position:absolute;
  left:10px;
  top:10px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  padding:4px 7px;
  font:800 8px 'Prompt',sans-serif;
}
.streamTile b{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  font:800 10px/1.2 'Prompt',sans-serif;
}
.streamFeature{
  left:330px;
  top:24px;
  width:346px;
  height:472px;
  border-radius:26px;
  background:#211a18;
  color:#fff;
}
.streamFeatureMedia{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}
.streamFeature::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(36,20,22,.18) 0%,rgba(36,20,22,.08) 38%,rgba(22,14,16,.84) 100%),
    radial-gradient(circle at 46% 10%,rgba(255,205,181,.20),transparent 38%);
  pointer-events:none;
}
.streamFeatureTop,
.streamFeatureCopy{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
}
.streamFeatureTop{
  top:16px;
  display:flex;
  align-items:center;
  gap:14px;
  color:rgba(255,255,255,.72);
  font:700 9px 'Prompt',sans-serif;
}
.streamFeatureTop button:first-child{
  width:26px;
  height:26px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font:700 20px/1 'Prompt',sans-serif;
  cursor:pointer;
}
.streamFeatureTop .streamAvatar{margin-left:auto;width:24px;height:24px;border-radius:50%!important;font-size:8px!important;}
.streamFeatureCopy{bottom:22px;}
.streamFeatureCopy > span{
  display:block;
  margin-bottom:4px;
  color:rgba(255,255,255,.70);
  font:700 10px 'Prompt',sans-serif;
}
.streamFeatureCopy h2{
  margin:0 0 8px;
  color:#fff;
  font:500 32px/.98 'Prompt',sans-serif;
  letter-spacing:0;
}
.streamFeatureCopy p{
  max-width:255px;
  margin:0 0 14px;
  color:rgba(255,255,255,.78);
  font:500 11px/1.45 'Sarabun',sans-serif;
}
.streamMeta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin:0 0 14px;
}
.streamMeta small{
  color:rgba(255,255,255,.76);
  font:700 7.5px 'Prompt',sans-serif;
  text-align:center;
}
.streamActions{
  display:flex;
  gap:10px;
}
.streamActions button{
  border:1px solid rgba(255,255,255,.46);
  border-radius:999px;
  padding:9px 13px;
  font:800 9px 'Prompt',sans-serif;
  cursor:pointer;
}
.streamActions button:first-child{background:#fff;color:#241722;}
.streamActions button:last-child{background:rgba(255,255,255,.08);color:#fff;}
@media(max-width:900px){
  .galleryLanding{min-height:620px;height:min(100vh,720px);}
  .streamShowcase{width:640px;height:520px;}
  .streamLibrary{left:0;top:92px;transform:scale(.9);transform-origin:left top;}
  .streamFeature{left:258px;top:28px;transform:scale(.94);transform-origin:left top;}
}
@media(max-width:700px){
  .galleryLanding{min-height:640px;height:100vh;}
  .streamShowcase{position:absolute;left:50%;top:44%;width:390px;height:620px;transform:translate(-50%,-50%);}
  .streamLibrary{left:18px;top:42px;width:218px;height:330px;transform:none;}
  .streamFeature{left:98px;top:262px;width:238px;height:338px;transform:none;}
  .streamMiniNav{gap:5px;margin-bottom:15px;}
  .streamMiniNav button{font-size:8px;padding:5px 6px;}
  .streamAvatar{width:24px;height:24px;border-radius:9px!important;font-size:8px!important;}
  .streamPanelTitle p{font-size:12px;}
  .streamCards{gap:9px;}
  .streamTile{min-height:94px;border-radius:13px;}
  .streamTileLarge{min-height:110px;}
  .streamTileWide{min-height:92px;}
  .streamFeatureCopy h2{font-size:25px;}
  .streamFeatureCopy p{font-size:9.5px;max-width:196px;}
  .streamMeta{gap:4px;}
  .streamActions button{padding:8px 10px;font-size:8px;}
}
@media(max-width:700px) and (max-height:520px){
  .galleryLanding{height:100vh;min-height:320px;}
  .galleryLanding::after{height:34px;}
  .streamShowcase{position:absolute;left:50%;top:50%;width:326px;height:323px;}
  .streamLibrary{
    left:16px;
    top:28px;
    width:132px;
    height:252px;
    padding:9px;
    border-radius:14px;
  }
  .streamFeature{
    left:154px;
    top:5px;
    width:153px;
    height:292px;
    border-radius:14px;
  }
  .streamMiniNav{gap:3px;margin-bottom:10px;}
  .streamMiniNav button{font-size:5px;padding:3px 4px;}
  .streamAvatar{width:16px;height:16px;border-radius:5px!important;font-size:5px!important;}
  .streamPanelTitle{margin-bottom:6px;}
  .streamPanelTitle p{font-size:7px;}
  .streamPanelTitle button{width:15px;height:15px;font-size:8px;}
  .streamCards{gap:6px;}
  .streamTile{min-height:58px;border-radius:7px;padding:6px;box-shadow:inset 0 -36px 28px rgba(35,20,18,.58),0 8px 14px rgba(80,35,21,.14);}
  .streamTileLarge{min-height:72px;}
  .streamTileWide{min-height:58px;}
  .streamTile span{left:6px;top:6px;font-size:4.5px;padding:2px 4px;}
  .streamTile b{left:6px;right:6px;bottom:6px;font-size:5.8px;}
  .streamFeatureTop{left:10px;right:10px;top:10px;gap:8px;font-size:5px;}
  .streamFeatureTop button:first-child{width:16px;height:16px;font-size:12px;}
  .streamFeatureCopy{left:12px;right:12px;bottom:13px;}
  .streamFeatureCopy > span{font-size:5.5px;margin-bottom:2px;}
  .streamFeatureCopy h2{font-size:15px;margin-bottom:5px;}
  .streamFeatureCopy p{font-size:5.5px;line-height:1.35;max-width:112px;margin-bottom:8px;}
  .streamMeta{gap:3px;margin-bottom:8px;}
  .streamMeta small{font-size:4.5px;}
  .streamActions{gap:5px;}
  .streamActions button{font-size:5px;padding:5px 6px;}
}

/* Exact reference hero: use the supplied screenshot as the visible first screen. */
.galleryLanding.referenceOnly,
.galleryLanding{
  height:100vh;
  min-height:323px;
  overflow:hidden;
  background:#ffae70;
}
.galleryLanding::before,
.galleryLanding::after{display:none!important;}
.referenceHeroFrame{
  position:relative;
  width:min(100vw,326px);
  aspect-ratio:326/323;
  overflow:hidden;
}
.referenceHeroFrame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.referenceHotspot{
  position:absolute;
  z-index:3;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  border-radius:999px;
}
.referenceHotspot:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:2px;
}
.referenceHotspotHome{left:7.5%;top:14.1%;width:9.5%;height:5.2%;}
.referenceHotspotShows{left:17.3%;top:14.1%;width:10%;height:5.2%;}
.referenceHotspotMovies{left:28.3%;top:14.1%;width:11%;height:5.2%;}
.referenceHotspotProfileLeft{left:38%;top:13.5%;width:7%;height:7%;}
.referenceHotspotProfileRight{left:88.6%;top:8.5%;width:7%;height:7%;}
.referenceHotspotBook{left:52.1%;top:89%;width:14.2%;height:5.5%;}
.referenceHotspotInquire{left:68.8%;top:89%;width:20%;height:5.5%;}
@media(max-width:360px){
  .referenceHeroFrame{width:100vw;}
}

/* v13 Product system pass: public landing as a single studio-card experience. */
body:has(.experienceLanding){margin:0;padding:0!important;background:#ffad70;}
body:has(.experienceLanding) .alreadyBanner{
  position:fixed;
  top:14px;
  right:14px;
  left:auto;
  z-index:120;
  width:auto;
  max-width:min(420px,calc(100vw - 28px));
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(35,23,34,.28);
  color:#fff;
  box-shadow:0 18px 40px rgba(74,30,18,.18);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  font:700 12px 'Sarabun',sans-serif;
}
body:has(.experienceLanding) .alreadyBanner a{color:#fff;text-decoration:none;margin:0 8px;font-weight:800;}
body:has(.experienceLanding) .alreadyBanner button{
  width:22px;height:22px;border:1px solid rgba(255,255,255,.36);
  background:rgba(255,255,255,.14);color:#fff;border-radius:50%;
}
.experienceLanding{
  height:min(100vh,720px);
  min-height:620px;
  overflow:hidden;
  background:
    radial-gradient(circle at 52% 115%,rgba(255,238,223,.96),transparent 34%),
    linear-gradient(180deg,#ffb677 0%,#ff9955 48%,#ffd7c4 100%);
  color:#fff;
}
.experienceLanding::before{
  display:block!important;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.10),transparent 16%,transparent 84%,rgba(255,255,255,.12));
  opacity:1;
}
.experienceLanding::after{display:none!important;}
.experienceLanding .rpgTopBar{display:none!important;}
.experienceHero{
  position:relative;
  z-index:4;
  height:100%;
  min-height:inherit;
}
.experienceHero .referenceHeroFrame{display:none!important;}
.experienceRail{
  position:absolute;
  left:50%;
  top:50%;
  width:1460px;
  height:460px;
  transform:translate(-50%,-50%);
}
.xpPanel{
  position:absolute;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 26px 64px rgba(76,31,19,.24);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.xpPanel button{font-family:'Prompt','Sarabun',sans-serif;cursor:pointer;}
.xpContinue{
  left:0;
  top:52px;
  width:178px;
  height:326px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.16));
}
.xpMiniNav{display:flex;align-items:center;gap:8px;margin-bottom:18px;}
.xpMiniNav button{
  border:0;background:transparent;color:rgba(255,255,255,.75);
  font:700 7px 'Prompt',sans-serif;padding:5px 6px;border-radius:999px;
}
.xpMiniNav .active{background:rgba(255,255,255,.18);color:#fff;}
.xpAvatar{
  margin-left:auto!important;
  width:22px!important;height:22px!important;padding:0!important;
  border:0!important;border-radius:9px!important;
  background:#241722!important;color:#ffcf5c!important;
  display:grid!important;place-items:center!important;
  font:900 8px 'Prompt',sans-serif!important;
}
.xpPanelHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.xpPanelHead p{font:700 12px 'Prompt',sans-serif;margin:0;color:#fff;}
.xpPanelHead button{width:20px;height:20px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:10px;}
.xpWatchGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.xpThumb{
  position:relative;min-height:88px;border:0;border-radius:13px;overflow:hidden;
  background-size:cover;background-position:center;color:#fff;text-align:left;padding:8px;
  box-shadow:inset 0 -58px 36px rgba(34,18,16,.58);
}
.xpThumb.large{min-height:104px;}
.xpThumb.wide{grid-column:1/-1;min-height:94px;}
.xpThumb small{position:absolute;left:8px;top:8px;border-radius:999px;background:rgba(255,255,255,.24);padding:3px 6px;font:800 6px 'Prompt',sans-serif;}
.xpThumb b{position:absolute;left:8px;right:8px;bottom:8px;font:800 8px/1.18 'Prompt',sans-serif;}
.xpStory{
  left:205px;top:26px;width:182px;height:370px;border-radius:22px;background:#1c1818;color:#fff;
}
.xpStoryMedia{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);}
.xpStory::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,18,22,.06),rgba(20,16,16,.12) 42%,rgba(15,12,12,.84));}
.xpStoryTop,.xpStoryCopy{position:absolute;left:14px;right:14px;z-index:2;}
.xpStoryTop{top:13px;display:flex;align-items:center;gap:9px;font:700 6.5px 'Prompt',sans-serif;color:rgba(255,255,255,.76);}
.xpStoryTop > button:first-child{width:20px;height:20px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font:700 14px 'Prompt',sans-serif;}
.xpStoryCopy{bottom:14px;}
.xpStoryCopy > span{display:block;font:700 7px 'Prompt',sans-serif;color:rgba(255,255,255,.70);margin-bottom:4px;}
.xpStoryCopy h2{font:600 19px/1.03 'Prompt',sans-serif;margin:0 0 6px;color:#fff;letter-spacing:0;}
.xpStoryCopy p{font:500 8px/1.4 'Sarabun',sans-serif;color:rgba(255,255,255,.76);margin:0 0 10px;max-width:150px;}
.xpStoryMeta{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:10px;}
.xpStoryMeta small{font:700 5.5px 'Prompt',sans-serif;color:rgba(255,255,255,.72);text-align:center;}
.xpStoryActions{display:flex;gap:8px;}
.xpStoryActions button{border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:7px 10px;font:800 6.5px 'Prompt',sans-serif;}
.xpStoryActions button:first-child{background:#fff;color:#221824;}
.xpStoryActions button:last-child{background:rgba(255,255,255,.08);color:#fff;}
.xpLearning{
  left:410px;top:0;width:210px;height:400px;border-radius:12px 12px 22px 22px;
  padding:20px 16px;background:rgba(255,255,255,.88);color:#281f21;
}
.xpDot{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e34acb;color:#fff;font:800 8px 'Prompt',sans-serif;margin-bottom:28px;}
.xpLearning h2{font:500 38px/.88 Georgia,serif;letter-spacing:-.05em;margin:0 0 11px;color:#2b2021;}
.xpLearning p{font:600 12px 'Sarabun',sans-serif;margin:0 0 20px;color:#4d4445;}
.xpRoundBtns{display:flex;gap:10px;margin-bottom:18px;}
.xpRoundBtns button{width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:#2b2021;box-shadow:0 6px 14px rgba(36,23,34,.12);}
.xpCourseTile{display:block;width:100%;border:0;background:#fff;border-radius:14px;padding:8px;text-align:left;box-shadow:0 10px 24px rgba(36,23,34,.10);}
.xpCourseTile span{display:block;height:78px;border-radius:9px;margin-bottom:8px;background:url('../assets/live-toeic/toeic-live-slide-03.png') center/cover;}
.xpCourseTile b{display:block;font:700 13px Georgia,serif;color:#2b2021;}
.xpCourseTile small{font:600 8px 'Sarabun',sans-serif;color:#786f72;}
.xpAnalytics{
  left:645px;top:-28px;width:230px;height:460px;padding:13px;border-radius:10px 10px 24px 24px;
  background:#241716;color:#fff;box-shadow:0 32px 72px rgba(36,23,22,.42);
}
.xpAnalytics h2{font:700 20px/1.05 'Prompt',sans-serif;margin:0 0 14px;}
.xpMetricGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.xpMetricGrid span{display:block;border-radius:9px;padding:10px 9px;background:#d43cdc;}
.xpMetricGrid span:nth-child(2){background:#4d3be0;}
.xpMetricGrid small{display:block;font:600 9px 'Sarabun',sans-serif;color:rgba(255,255,255,.78);}
.xpMetricGrid b{display:block;font:800 24px 'Prompt',sans-serif;}
.xpBars{background:#d2afce;color:#2b1f21;border-radius:12px;padding:12px;margin-bottom:8px;}
.xpBars b{display:block;font:800 10px 'Prompt',sans-serif;margin-bottom:10px;}
.xpBars i{display:block;height:3px;width:var(--w);background:#5e3338;margin:10px 0;border-radius:999px;}
.xpTrend{height:148px;border-radius:10px;background:#5a3a37;padding:12px;}
.xpTrend span{font:700 10px 'Prompt',sans-serif;}
.xpTrend em{display:block;height:88px;margin-top:16px;background:linear-gradient(130deg,transparent 0 12%,#f5cf55 13% 15%,transparent 16% 32%,#f5cf55 33% 36%,transparent 37% 52%,#e74de9 53% 55%,transparent 56% 70%,#f5cf55 71% 74%,transparent 75%);}
.xpCalm{
  left:902px;top:18px;width:210px;height:370px;padding:20px;border-radius:18px;
  background:linear-gradient(180deg,rgba(239,255,252,.94),rgba(43,21,18,.88)),url('../assets/studio-background.webp.png') center/cover;color:#a7282d;
}
.xpCalmTop{display:flex;justify-content:space-between;font:700 8px 'Prompt',sans-serif;color:#a7282d;}
.xpCalmTop button{border:0;background:transparent;color:#a7282d;font:800 16px 'Prompt',sans-serif;}
.xpCalm h2{font:500 30px/1.02 'Prompt',sans-serif;text-align:center;margin:38px 0 8px;}
.xpCalm p{text-align:center;font:700 9px 'Prompt',sans-serif;color:rgba(157,39,41,.35);}
.xpOrbit{position:absolute;left:50px;right:50px;top:150px;height:120px;border-radius:50%;}
.xpOrbit i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(255,255,255,.9);}
.xpOrbit i:nth-child(1){left:50%;top:0}.xpOrbit i:nth-child(2){right:4px;top:42px}.xpOrbit i:nth-child(3){left:12px;top:60px}.xpOrbit i:nth-child(4){right:30px;bottom:5px}.xpOrbit i:nth-child(5){left:44px;bottom:18px}
.xpCalm > button{position:absolute;left:18px;right:18px;bottom:18px;border:1px solid rgba(255,255,255,.34);background:rgba(35,23,30,.58);color:#fff;border-radius:999px;padding:10px;font:800 10px 'Prompt',sans-serif;}
.xpEvening{
  left:1138px;top:48px;width:170px;height:310px;padding:18px;border-radius:20px;
  background:linear-gradient(180deg,rgba(37,65,86,.18),rgba(37,22,27,.82)),url('../assets/live-toeic/toeic-live-banner-1200x628.png') center/cover;color:#fff;
}
.xpCoach{display:block;width:22px;height:22px;border-radius:50%;background:url('../assets/agents/coach-aj.webp.png') center/cover;margin-bottom:18px;border:2px solid rgba(255,255,255,.7);}
.xpEvening h2{font:500 22px/1.08 'Prompt',sans-serif;margin:0 0 20px;}
.xpEvening p{font:600 9px 'Sarabun',sans-serif;color:rgba(255,255,255,.72);margin:0 0 10px;}
.xpTags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.xpTags span{border-radius:999px;background:rgba(255,255,255,.22);padding:5px 8px;font:700 8px 'Prompt',sans-serif;}
.xpEvening button{position:absolute;left:18px;right:18px;bottom:18px;border:0;border-radius:13px;background:#17172c;color:#fff;padding:10px;font:800 10px 'Prompt',sans-serif;}
.xpScore{
  left:1330px;top:58px;width:168px;height:292px;padding:14px;border-radius:7px 22px 7px 7px;background:#211917;color:#fff;
}
.xpScoreTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.xpScoreTop span{font:700 13px 'Prompt',sans-serif}.xpScoreTop b{background:#fff;color:#241722;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font:800 8px 'Prompt',sans-serif;}
.xpRing{width:94px;height:94px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#8fdfbf 0 31%,#f0d45a 31% 62%,#e84a5f 62% 78%,#7658dc 78% 100%);}
.xpRing span{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#211917;color:#fff;font:800 15px 'Prompt',sans-serif;}
.xpScore p{font:700 10px 'Prompt',sans-serif;color:rgba(255,255,255,.72);margin:0 0 10px;}
.xpDots{height:78px;border-radius:10px;background-image:radial-gradient(circle,#f2e2c7 5px,transparent 6px);background-size:18px 18px;}
@media(max-width:900px){
  .experienceLanding{height:100vh;min-height:720px;}
  .experienceRail{width:390px;height:680px;top:48%;transform:translate(-50%,-50%);}
  .xpContinue{left:20px;top:42px;width:222px;height:340px;}
  .xpStory{left:98px;top:302px;width:242px;height:350px;}
  .xpLearning{left:214px;top:38px;transform:scale(.66);transform-origin:left top;}
  .xpAnalytics{left:18px;top:398px;transform:scale(.58);transform-origin:left top;}
  .xpCalm,.xpEvening,.xpScore{display:none;}
}
@media(max-width:520px){
  .experienceRail{top:49%;}
  .xpLearning{display:none;}
  .xpContinue{left:18px;top:34px;width:218px;height:330px;}
  .xpStory{left:96px;top:286px;width:240px;height:344px;}
  .xpAnalytics{left:18px;top:404px;}
}

/* v13 correction: one visual direction only, based on the studio story card. */
.experienceLanding{
  height:100vh;
  min-height:560px;
  background:
    radial-gradient(circle at 50% 100%,rgba(255,238,225,.92),transparent 34%),
    linear-gradient(180deg,#ffb274 0%,#ff9754 52%,#ffd6c1 100%);
}
.experienceRail{
  width:min(82vw,260px);
  height:min(84vh,490px);
  left:50%;
  top:18px;
  transform:translateX(-50%);
}
.experienceRail .xpPanel:not(.xpStory){display:none!important;}
.xpStory{
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:26px!important;
  border:0;
  box-shadow:0 28px 64px rgba(77,31,17,.30);
}
.xpStoryMedia{
  background-position:center!important;
  transform:scale(1.02);
}
.xpStory::after{
  background:
    linear-gradient(180deg,rgba(24,18,20,.02) 0%,rgba(24,18,20,.04) 42%,rgba(18,13,12,.88) 100%),
    radial-gradient(circle at 42% 8%,rgba(255,210,188,.10),transparent 34%);
}
.xpStoryTop{left:16px;right:16px;top:15px;gap:12px;font-size:8px;}
.xpStoryTop > button:first-child{width:25px;height:25px;font-size:18px;background:rgba(255,255,255,.18);}
.xpStoryTop .xpAvatar{width:25px!important;height:25px!important;border-radius:10px!important;font-size:8px!important;}
.xpStoryCopy{left:18px;right:18px;bottom:18px;}
.xpStoryCopy > span{
  font-size:9px;
  color:rgba(255,255,255,.76);
  margin-bottom:6px;
}
.xpStoryCopy h2{
  max-width:210px;
  font:800 clamp(27px,9vw,38px)/.94 'Prompt','Sarabun',sans-serif;
  color:#fff;
  margin:0 0 8px;
  text-shadow:0 3px 18px rgba(0,0,0,.22);
}
.xpStoryCopy p{
  max-width:218px;
  font:600 10px/1.45 'Sarabun',sans-serif;
  color:rgba(255,255,255,.82);
  margin-bottom:14px;
}
.xpStoryMeta{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;}
.xpStoryMeta small{font-size:6.5px;color:rgba(255,255,255,.78);}
.xpStoryActions{gap:10px;}
.xpStoryActions button{
  padding:9px 13px;
  font:800 8px 'Prompt','Sarabun',sans-serif;
}
.xpStoryActions button:first-child{background:#fff;color:#241722;}
.xpStoryActions button:last-child{background:rgba(255,255,255,.10);color:#fff;}
@media(min-width:900px){
  .experienceRail{width:280px;height:530px;top:22px;}
}
@media(max-width:420px){
  .experienceRail{width:min(88vw,260px);height:min(82vh,490px);top:16px;}
}

/* ═══════════════════════════════════════════════════════════════
   Landing promo / store section — Netflix-style rails (below the hero)
   Quest Scholar palette · scroll down from the full-screen RPG scene
   ═══════════════════════════════════════════════════════════════ */
.landingPromos{
  position:relative;z-index:1;
  background:linear-gradient(180deg,#f5f1e6 0%,#ffffff 30%);
  padding:52px 0 84px;font-family:'Sarabun',sans-serif;
}
.lpInner{max-width:1200px;margin:0 auto;padding:0 24px;}
.lpIntro{text-align:center;margin-bottom:30px;}
.lpIntro h2{font:700 30px 'Prompt',sans-serif;color:#003873;margin:0 0 8px;letter-spacing:-.01em;}
.lpIntro p{font:400 15px 'Sarabun',sans-serif;color:#5a6b6e;margin:0;}
/* Partner brands strip (sister companies) */
.lpPartners{text-align:center;margin:0 0 14px;}
.lpPartnersLabel{display:block;font:700 11px 'Prompt',sans-serif;letter-spacing:.14em;color:#8a93a6;margin-bottom:12px;}
.lpPartnerRow{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.lpPartnerCard{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:#fff;border:1px solid rgba(0,56,115,.12);border-radius:16px;
  padding:12px 20px 12px 14px;box-shadow:0 6px 16px rgba(0,40,90,.08);
}
.lpPartnerMark{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font:800 16px 'Prompt',sans-serif;letter-spacing:.02em;flex:0 0 auto;
}
.lpPartnerMark.xp{background:#003873;color:#FFD700;box-shadow:inset 0 0 0 2px rgba(255,215,0,.55);}
.lpPartnerMark.ek{background:#FFD700;color:#003873;box-shadow:inset 0 0 0 2px rgba(0,56,115,.30);}
.lpPartnerInfo b{display:block;font:700 14.5px 'Prompt',sans-serif;color:#13233f;}
.lpPartnerInfo small{display:block;font:500 11.5px 'Sarabun',sans-serif;color:#5a6b82;margin-top:1px;}

/* Unique selling points (v12.x.23) */
.lpUsp{margin-top:34px;}
.lpUspGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px;}
.lpUspCard{
  background:#fff;border:1px solid rgba(0,56,115,.12);border-radius:18px;
  padding:20px 18px;box-shadow:0 6px 16px rgba(0,40,90,.07);
  transition:transform .16s ease,box-shadow .16s ease;
}
.lpUspCard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,40,90,.14);}
.lpUspIc{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(0,56,115,.07);font-size:23px;margin-bottom:11px;}
.lpUspCard b{display:block;font:700 15.5px 'Prompt',sans-serif;color:#13233f;margin-bottom:6px;}
.lpUspCard p{margin:0;font:400 12.5px/1.55 'Sarabun',sans-serif;color:#5a6b82;}

/* About AJ.Bank — professional & education background (v12.x.23) */
.lpAbout{
  display:grid;grid-template-columns:300px 1fr;gap:0;align-items:stretch;
  margin-top:34px;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,#003873 0%,#00264f 100%);
  box-shadow:0 16px 40px rgba(0,40,90,.22);
}
.lpAboutArt{
  display:grid;place-items:end center;
  background:radial-gradient(circle at 50% 68%,rgba(255,215,0,.22),transparent 62%);
  padding:26px 10px 0;
}
.lpAboutArt img{width:min(240px,86%);display:block;filter:drop-shadow(0 14px 24px rgba(0,0,0,.35));}
.lpAboutInfo{padding:30px 34px 28px;color:#fff;}
.lpAboutTag{display:inline-block;background:rgba(255,215,0,.16);color:#FFD700;font:700 11px 'Prompt',sans-serif;letter-spacing:.1em;padding:5px 14px;border-radius:9999px;margin-bottom:12px;}
.lpAboutInfo h3{margin:0 0 8px;font:700 24px 'Prompt',sans-serif;color:#fff;}
.lpAboutLead{margin:0 0 18px;font:400 14px/1.65 'Sarabun',sans-serif;color:rgba(255,255,255,.86);}
.lpAboutCols{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.lpAboutCols h4{margin:0 0 8px;font:700 14.5px 'Prompt',sans-serif;color:#FFD700;}
.lpAboutCols ul{margin:0;padding:0;list-style:none;}
.lpAboutCols li{
  position:relative;padding:0 0 7px 16px;
  font:400 13px/1.5 'Sarabun',sans-serif;color:rgba(255,255,255,.88);
}
.lpAboutCols li::before{content:"✦";position:absolute;left:0;top:0;color:rgba(255,215,0,.75);font-size:10px;}
.lpAboutCta{
  margin-top:18px;background:#FFD700;color:#003873;border:0;border-radius:9999px;
  padding:11px 26px;font:700 14px 'Prompt',sans-serif;cursor:pointer;
  box-shadow:0 8px 20px rgba(255,215,0,.35);transition:.15s;
}
.lpAboutCta:hover{filter:brightness(1.06);transform:translateY(-1px);}

@media(max-width:900px){
  .lpUspGrid{grid-template-columns:1fr 1fr;}
}
@media(max-width:680px){
  .lpUspGrid{grid-template-columns:1fr;}
  .lpAbout{grid-template-columns:1fr;}
  .lpAboutArt{padding-top:22px;}
  .lpAboutArt img{width:min(190px,60%);}
  .lpAboutInfo{padding:24px 20px 24px;}
  .lpAboutCols{grid-template-columns:1fr;}
}

.lpRow{margin-top:24px;}
.lpRowHead{margin-bottom:11px;}
.lpRowHead b{font:700 18px 'Prompt',sans-serif;color:#1c1c15;}
.lpRail{position:relative;}
.lpTrack{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:6px 2px 16px;scrollbar-width:thin;}
.lpTrack::-webkit-scrollbar{height:8px;}
.lpTrack::-webkit-scrollbar-thumb{background:#cdd9ec;border-radius:9999px;}
.lpArrow{
  position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,56,115,.15);
  background:rgba(255,255,255,.96);box-shadow:0 4px 14px rgba(0,40,90,.18);
  font:700 21px 'Prompt',sans-serif;color:#003873;cursor:pointer;display:grid;place-items:center;transition:.15s;
}
.lpArrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
.lpArrow.left{left:-12px;} .lpArrow.right{right:-12px;}

.lpPoster{
  position:relative;flex:0 0 auto;width:232px;height:140px;
  border:0;border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;
  background:#003873 center/cover no-repeat;
  box-shadow:0 8px 20px rgba(0,40,90,.16);transition:transform .18s ease,box-shadow .18s ease;
}
.lpPoster:hover{transform:scale(1.045);box-shadow:0 16px 36px rgba(0,40,90,.32);z-index:2;}
.lpPosterGrad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,18,46,.05) 22%,rgba(0,18,46,.92));}
.lpPosterTitle{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;color:#fff;font:700 14px/1.2 'Prompt',sans-serif;}
.lpPosterTitle small{display:block;font:500 10.5px 'Sarabun',sans-serif;color:#ffe07a;margin-top:3px;letter-spacing:.03em;}
.lpPosterBadge{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font:800 10.5px 'Prompt',sans-serif;padding:3px 10px;border-radius:9999px;}
.lpPosterBadge.gold{background:#FFD700;color:#003873;}
.lpPosterPrice{position:absolute;top:10px;left:10px;z-index:2;background:#FFD700;color:#003873;font:800 12px 'Prompt',sans-serif;padding:3px 10px;border-radius:9999px;}
.lpEbook{display:grid;place-items:center;}
.lpEbookIcon{font-size:48px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));z-index:1;}

.lpBanner{
  position:relative;flex:0 0 auto;width:344px;height:152px;
  border:0;border-radius:18px;overflow:hidden;cursor:pointer;text-align:left;color:#fff;
  padding:20px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 8px 20px rgba(0,40,90,.18);transition:transform .18s ease,box-shadow .18s ease;
}
.lpBanner:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,40,90,.34);}
.lpBannerTag{align-self:flex-start;font:700 11px 'Prompt',sans-serif;letter-spacing:.04em;background:rgba(255,255,255,.22);padding:3px 12px;border-radius:9999px;}
.lpBannerTitle{font:700 19px 'Prompt',sans-serif;margin-top:5px;}
.lpBannerSub{font:400 13px/1.4 'Sarabun',sans-serif;color:rgba(255,255,255,.86);flex:1;}
.lpBannerCta{font:700 14px 'Prompt',sans-serif;color:#FFD700;}

@media(max-width:680px){
  .landingPromos{padding:38px 0 64px;}
  .lpIntro h2{font-size:23px;}
  .lpPoster{width:178px;height:108px;}
  .lpBanner{width:280px;height:142px;}
  .lpArrow{display:none;}
}

/* Student landing stays student-only; admin entry is on admin.html. */
#tabAdmin{display:none!important;}

/* ═══════════════════════════════════════════════════════════════
   v12.x.20 — Mobile landing UX pass (phones ≤760px)
   The lesson-preview card and the floating badges overlapped the
   character on small screens; badges become a static pill row under
   the headline and the preview card is hidden on phones.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* Phone browsers: 100vh includes the URL bar — svh keeps the
     bottom dialog bar fully visible. */
  .rpgScene{height:100vh;height:100svh;}
  .rpgVideoCard{display:none;}
  .rpgHookBg{
    inset:auto;left:12px;right:12px;top:208px;
    display:flex;justify-content:center;align-items:flex-start;
    gap:6px;flex-wrap:wrap;
  }
  .rpgHookBg .rpgHeroBadge{
    position:static;animation:none;
    font-size:10.5px;padding:6px 10px;gap:6px;max-width:none;
    box-shadow:0 3px 10px rgba(0,56,115,.10);
  }
  .rpgScene .ajChar{left:50%;width:min(74vw,330px);height:min(40vh,345px);bottom:252px;}
  /* Comfortable touch targets */
  .rpgQuickChoice{min-height:44px;}
  .aaClickBtn{min-height:34px;}
}
@media(max-width:480px){
  .rpgHookBg{top:200px;}
  .rpgHookBg .rpgHeroBadge{font-size:10px;padding:6px 9px;}
  .rpgScene .ajChar{width:min(78vw,315px);height:min(38vh,330px);bottom:254px;}
}

/* ═══════════════════════════════════════════════════════════════
   v12.x.21 — Content protection (deterrent layer)
   ═══════════════════════════════════════════════════════════════ */
html.ajNoSelect, html.ajNoSelect body{-webkit-user-select:none;-moz-user-select:none;user-select:none;}
html.ajNoSelect input, html.ajNoSelect textarea, html.ajNoSelect select,
html.ajNoSelect [contenteditable]{-webkit-user-select:text;user-select:text;}
.ajProtToast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  z-index:99999;background:rgba(12,28,52,.94);color:#fff;
  font:600 13px 'Prompt',sans-serif;padding:10px 20px;border-radius:9999px;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.ajProtToast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* Print-to-PDF blocked only while protection is active */
@media print{ html.ajNoSelect body{display:none!important;} }

/* ═══════════════════════════════════════════════════════════════
   v12.x.23 — Trailer is the hero showcase; AJ.Bank moved BELOW it
   (he was covering the video). The walk JS only animates `left`
   (56–68%), so he now strolls along the strip under the video.
   ═══════════════════════════════════════════════════════════════ */
.rpgTrailer{
  top:clamp(204px,23vh,240px);bottom:auto;
  left:50%;transform:translateX(-50%);
  width:min(42vw,600px);
}
/* Desktop: two-column hero — copy left, trailer right, character below.
   (Stacking all three vertically can't fit in one viewport.) */
@media(min-width:901px){
  .rpgHeroCopy{
    left:6%;right:auto;top:104px;transform:none;text-align:left;
    width:min(44vw,600px);
  }
  .rpgHeroCopy h1{margin-left:0;font-size:clamp(36px,4vw,58px);}
  .rpgHeroCopy p{margin-left:0;}
  .rpgHookBg{
    inset:auto;left:6%;top:clamp(380px,47vh,430px);
    display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;
    max-width:44vw;
  }
  .rpgHookBg .rpgHeroBadge{position:static;animation:none;font-size:12px;padding:8px 13px;}
  .rpgTrailer{left:auto;right:5%;top:108px;transform:none;width:min(44vw,610px);}
  .heroTagline{display:none;}
}
/* The old lesson-preview card is redundant next to the real trailer */
.rpgVideoCard{display:none!important;}
/* Character: smaller, anchored to the strip between video and dialog bar.
   NOTE: must use `.rpgScene #ajChar` — a plain `#ajChar{position:relative}`
   z-index rule earlier in this file outranks class selectors, which made
   bottom/top behave as relative offsets instead of anchoring. */
.rpgScene #ajChar{
  position:absolute;
  top:auto;bottom:152px;
  width:min(13vw,190px);height:min(21vh,195px);
}
.rpgScene .charShadow{width:120px;}
/* Quote bubble: left side, clear of the centered video */
.ajQuoteBubble{top:auto;bottom:175px;right:auto;left:8%;}

@media(max-width:900px){
  .rpgTrailer{top:clamp(216px,26vh,260px);left:50%;transform:translateX(-50%);width:min(64vw,560px);}
  .rpgScene #ajChar{left:62%;width:min(20vw,170px);height:min(19vh,175px);bottom:180px;}
}
@media(max-width:760px){
  .rpgTrailer{top:clamp(250px,31vh,300px);left:12px;right:12px;width:auto;transform:none;bottom:auto;}
  .rpgScene #ajChar{left:50%;width:min(31vw,132px);height:min(15vh,132px);bottom:256px;}
}
@media(max-width:480px){
  .rpgTrailer{top:clamp(240px,30vh,290px);}
  .rpgScene #ajChar{width:min(30vw,118px);height:min(14vh,122px);bottom:258px;}
}

/* Featured AJ.Bank Live between the first screen and public catalog */
.landingLive{background:#061a37;padding:28px 22px;color:#fff}.landingLive[hidden]{display:none}.landingLiveInner{width:min(1160px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr) minmax(180px,auto);gap:28px;align-items:center}.landingLiveMedia{min-height:178px;border-radius:18px;background:linear-gradient(135deg,#0d4284,#061a37);background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.24)}.landingLiveMedia:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(3,12,28,.76))}.landingLiveBadge{position:absolute;z-index:1;left:15px;bottom:14px;border-radius:999px;background:#e93127;color:#fff;padding:6px 11px;font:800 11px 'Prompt';letter-spacing:.08em}.landingLiveKicker{color:#ffd600;font:800 11px 'Prompt';letter-spacing:.1em}.landingLiveCopy h2{font:800 clamp(23px,3vw,36px)/1.18 'Prompt';margin:8px 0}.landingLiveCopy p{font:500 14px/1.6 'Sarabun';color:#cbd9ef;margin:0 0 8px}.landingLiveCopy small{font-weight:700;color:#fff}.landingLiveBrands{margin-top:10px;color:#9fb5d6;font:800 11px 'Prompt';letter-spacing:.04em}.landingLiveActions{display:flex;flex-direction:column;gap:10px;align-items:stretch}.landingLiveCta,.landingLiveAsset{border:0;border-radius:12px;background:#ffd600;color:#002c60;padding:13px 18px;font:800 13px 'Prompt';white-space:nowrap;text-align:center;text-decoration:none}.landingLiveAsset{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.24)}.landingLiveCta:hover{background:#ffe24d}.landingLiveAsset:hover{background:rgba(255,255,255,.18)}
@media(max-width:820px){.landingLiveInner{grid-template-columns:1fr}.landingLiveMedia{min-height:210px}.landingLiveCta,.landingLiveAsset{width:100%;white-space:normal}}

/* Gazeo-inspired abstract app redesign for the public landing. */
body:has(.experienceLanding){
  background:#f3efff;
  color:#090b34;
}
.experienceLanding{
  min-height:720px;
  height:min(100svh,860px);
  isolation:isolate;
  background:
    linear-gradient(154deg,transparent 0 62%,rgba(125,92,255,.18) 62% 76%,transparent 76%),
    linear-gradient(22deg,transparent 0 69%,rgba(115,246,216,.16) 69% 82%,transparent 82%),
    radial-gradient(ellipse 80% 36% at 34% 104%,rgba(109,74,255,.22),transparent 70%),
    linear-gradient(135deg,#fbf9ff 0%,#f1edff 48%,#ece6ff 100%);
  color:#090b34;
}
.experienceLanding::before{
  background:
    linear-gradient(132deg,transparent 0 8%,rgba(108,82,255,.18) 8% 13%,transparent 13%),
    linear-gradient(162deg,transparent 0 74%,rgba(255,121,170,.14) 74% 82%,transparent 82%);
  opacity:1;
}
.experienceHero{
  display:grid;
  grid-template-columns:minmax(320px,.86fr) minmax(520px,1.14fr);
  align-items:center;
  gap:clamp(30px,5vw,78px);
  width:min(1380px,calc(100vw - 64px));
  margin:0 auto;
  padding:clamp(46px,7vh,72px) 0 46px;
}
.gallerySrTitle{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.gazeHeroCopy{
  position:relative;
  z-index:5;
  max-width:520px;
}
.gazeBrand{
  margin-bottom:34px;
  color:#4f24e8;
  font:800 clamp(32px,3.2vw,48px)/1 'Prompt','Sarabun',sans-serif;
}
.gazeHeroCopy h2{
  margin:0 0 20px;
  color:#080936;
  font:800 clamp(52px,6vw,86px)/.95 'Prompt','Sarabun',sans-serif;
  letter-spacing:0;
}
.gazeHeroCopy p{
  max-width:410px;
  margin:0 0 30px;
  color:#343760;
  font:600 17px/1.72 'Sarabun',sans-serif;
}
.gazeHeroActions{
  display:grid;
  width:min(360px,100%);
  gap:13px;
}
.gazeHeroActions button{
  min-height:64px;
  border-radius:16px;
  border:1px solid rgba(84,45,239,.32);
  font:800 16px 'Prompt','Sarabun',sans-serif;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.gazeHeroActions button:hover{transform:translateY(-2px);}
.gazePrimary{
  background:linear-gradient(135deg,#4a18ee,#783cff);
  color:#fff;
  box-shadow:0 18px 36px rgba(82,35,238,.22);
}
.gazeSecondary{
  background:rgba(255,255,255,.76);
  color:#4b26e8;
  box-shadow:0 10px 26px rgba(41,28,105,.08);
}
.gazeGoogle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(255,255,255,.92);
  color:#11133f;
  box-shadow:0 12px 30px rgba(41,28,105,.10);
}
.gazeGoogle span{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  color:#fff;
  background:conic-gradient(from -40deg,#4285f4,#34a853,#fbbc05,#ea4335,#4285f4);
  font:900 15px Arial,sans-serif;
}
.experienceRail{
  position:relative;
  left:auto;
  top:auto;
  width:min(700px,100%);
  height:640px;
  transform:none;
  justify-self:end;
}
.experienceRail .xpPanel{display:none!important;}
.gazePhone{
  position:absolute;
  z-index:4;
  right:42px;
  top:0;
  width:min(515px,86vw);
  min-height:600px;
  padding:34px 32px 24px;
  border-radius:40px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.84));
  box-shadow:0 36px 90px rgba(61,44,144,.20),18px 20px 0 rgba(118,100,199,.10);
  transform:rotate(5deg);
  border:1px solid rgba(255,255,255,.86);
}
.gazePhoneTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}
.gazePhoneTop strong{
  color:#5424ec;
  font:800 26px/1 'Prompt',sans-serif;
  font-style:italic;
}
.gazePhoneTop div{display:flex;gap:13px;}
.gazePhoneTop button{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 12px 24px rgba(44,30,116,.13);
  cursor:pointer;
}
.gazeLesson{
  position:relative;
  min-height:210px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  overflow:hidden;
  border-radius:28px;
  padding:30px 32px;
  color:#fff;
  background:
    radial-gradient(circle at 78% 50%,rgba(255,255,255,.52) 0 12%,transparent 13%),
    linear-gradient(135deg,#4d22ea 0 30%,#5dbaff 30% 52%,#ff79a8 52% 72%,#ff5d63 72% 100%);
}
.gazeLesson::before,
.gazeCourse span::before{
  content:"";
  position:absolute;
  inset:-18% -14%;
  background:
    linear-gradient(145deg,transparent 0 22%,rgba(255,255,255,.22) 22% 34%,transparent 34% 58%,rgba(255,255,255,.18) 58% 66%,transparent 66%),
    radial-gradient(ellipse 60% 40% at 24% 80%,rgba(11,20,112,.24),transparent 64%);
  transform:rotate(-8deg);
}
.gazeLesson > div,
.gazeLesson b{position:relative;z-index:1;}
.gazeLesson span{
  display:block;
  margin-bottom:11px;
  font:700 13px 'Prompt','Sarabun',sans-serif;
  opacity:.82;
}
.gazeLesson h3{
  max-width:275px;
  margin:0 0 24px;
  font:800 25px/1.12 'Prompt','Sarabun',sans-serif;
}
.gazeLesson button{
  border:0;
  border-radius:999px;
  background:#fff;
  color:#5125ee;
  padding:12px 18px;
  font:800 13px 'Prompt',sans-serif;
  cursor:pointer;
}
.gazeLesson b{
  align-self:center;
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border-radius:50%;
  background:rgba(14,12,58,.22);
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.78);
  font:800 20px 'Prompt',sans-serif;
}
.gazeCourseHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:24px 0 16px;
}
.gazeCourseHead strong{font:800 20px 'Prompt','Sarabun',sans-serif;color:#0d0e3a;}
.gazeCourseHead button{
  border:0;
  background:transparent;
  color:#5125ee;
  font:800 13px 'Prompt',sans-serif;
  cursor:pointer;
}
.gazeCourses{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.gazeCourse{
  min-width:0;
  border:0;
  border-radius:18px;
  padding:10px 10px 13px;
  background:#fff;
  text-align:left;
  box-shadow:0 12px 28px rgba(42,31,107,.09);
  cursor:pointer;
}
.gazeCourse span{
  position:relative;
  display:block;
  height:116px;
  overflow:hidden;
  border-radius:14px;
  margin-bottom:13px;
}
.gazeCourse.purple span{background:linear-gradient(135deg,#4b24e7,#8d5cff 52%,#d0bdff);}
.gazeCourse.coral span{background:linear-gradient(135deg,#ff5d68,#ff8d86 52%,#ffd7b1);}
.gazeCourse.mint span{background:linear-gradient(135deg,#31bca8,#95ebca 58%,#e4ffc7);}
.gazeCourse b{
  display:block;
  min-height:42px;
  color:#11133f;
  font:800 15px/1.16 'Prompt','Sarabun',sans-serif;
}
.gazeCourse small{
  display:block;
  margin-top:8px;
  color:#6a6d92;
  font:700 11px 'Prompt','Sarabun',sans-serif;
}
.gazeBottomNav{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-top:20px;
  padding:15px 16px 13px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 12px 30px rgba(42,31,107,.08);
}
.gazeBottomNav span{
  color:#62668d;
  text-align:center;
  font:800 10px 'Prompt',sans-serif;
}
.gazeBottomNav span:first-child{color:#5125ee;}
.gazeFeatureStrip{
  display:none;
  position:absolute;
  left:0;
  right:auto;
  bottom:18px;
  width:640px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.gazeFeatureStrip div{
  display:grid;
  gap:4px;
  min-height:70px;
  padding:14px 13px 14px 48px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 30px rgba(42,31,107,.08);
  position:relative;
}
.gazeFeatureStrip div::before{
  content:"";
  position:absolute;
  left:18px;
  top:16px;
  width:22px;
  height:22px;
  border-radius:10px;
  background:linear-gradient(135deg,#642bff,#8b5cff);
}
.gazeFeatureStrip div:nth-child(2)::before{background:linear-gradient(135deg,#ff6b73,#ffc07b);}
.gazeFeatureStrip div:nth-child(3)::before{background:linear-gradient(135deg,#24bda8,#77e6d5);}
.gazeFeatureStrip b{font:800 11px 'Prompt','Sarabun',sans-serif;color:#171846;}
.gazeFeatureStrip small{font:600 10.5px/1.34 'Sarabun',sans-serif;color:#55597c;}
.gazeFeatureStrip{display:none!important;}
.galleryLanding > .rpgHeroCopy,
.galleryLanding > .rpgVideoCard,
.galleryLanding > .rpgHookBg,
.galleryLanding > .rpgTrailer,
.galleryLanding > .ajChar,
.galleryLanding > .ajQuoteBubble,
.galleryLanding > .heroTagline,
.galleryLanding > .aaDialogBar,
.galleryLanding > .aaObjFlash{
  display:none!important;
}
.landingPromos{
  background:linear-gradient(180deg,#ffffff 0%,#f7f4ff 46%,#ffffff 100%);
}
.loginModal{
  background:rgba(24,18,64,.42)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.loginModalInner{
  border:1px solid rgba(255,255,255,.82)!important;
  background:
    linear-gradient(154deg,transparent 0 62%,rgba(125,92,255,.12) 62% 76%,transparent 76%),
    linear-gradient(180deg,#fff,#f7f4ff)!important;
  color:#10113e!important;
  box-shadow:0 34px 90px rgba(42,31,107,.24)!important;
}
.loginBrandMark{
  background:linear-gradient(135deg,#4a18ee,#783cff)!important;
  color:#fff!important;
  box-shadow:0 16px 34px rgba(82,35,238,.22)!important;
}
.loginModalInner .authModeTab.active,
.loginModalInner .actionBtn.primary{
  background:linear-gradient(135deg,#4a18ee,#783cff)!important;
  border-color:transparent!important;
  color:#fff!important;
}
.loginModalInner .fieldInput{
  border-color:rgba(84,45,239,.18)!important;
  background:rgba(255,255,255,.86)!important;
}
.loginModalInner .googleSignInButton{
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 28px rgba(42,31,107,.09);
}
@media(max-width:1040px){
  .experienceHero{
    grid-template-columns:1fr;
    align-content:start;
    gap:26px;
    min-height:100%;
    padding-top:36px;
  }
  .gazeHeroCopy{
    max-width:720px;
    text-align:center;
    justify-self:center;
  }
  .gazeHeroCopy p{margin-left:auto;margin-right:auto;}
  .gazeHeroActions{margin:0 auto;}
  .experienceRail{justify-self:center;height:560px;}
  .gazePhone{right:50%;transform:translateX(50%) rotate(4deg) scale(.86);transform-origin:top center;}
  .gazeFeatureStrip{display:none;}
}
@media(max-width:620px){
  .experienceLanding{min-height:760px;height:auto;}
  .experienceHero{width:min(100% - 28px,420px);padding-top:24px;}
  .gazeBrand{margin-bottom:18px;font-size:30px;}
  .gazeHeroCopy h2{font-size:42px;}
  .gazeHeroCopy p{font-size:14px;line-height:1.56;margin-bottom:20px;}
  .gazeHeroActions{grid-template-columns:1fr 1fr;width:100%;}
  .gazeHeroActions button{min-height:48px;border-radius:14px;font-size:13px;}
  .gazeGoogle{grid-column:1/-1;}
  .experienceRail{height:430px;}
  .gazePhone{
    width:360px;
    min-height:500px;
    padding:24px 21px 18px;
    border-radius:32px;
    transform:translateX(50%) rotate(3deg) scale(.72);
  }
  .gazePhoneTop button{width:44px;height:44px;}
  .gazeLesson{min-height:178px;padding:24px;}
  .gazeLesson h3{font-size:24px;}
  .gazeLesson b{width:66px;height:66px;font-size:16px;box-shadow:inset 0 0 0 8px rgba(255,255,255,.78);}
  .gazeCourses{gap:10px;}
  .gazeCourse{padding:8px;}
  .gazeCourse span{height:90px;}
  .gazeCourse b{font-size:12px;min-height:34px;}
  .gazeBottomNav{border-radius:22px;padding:12px 10px;}
  .gazeBottomNav span{font-size:8px;}
}

/* Full-page Gazeo pass: replace the older catalog/store design below the hero. */
body:has(.experienceLanding) .landingLive{
  background:
    linear-gradient(135deg,rgba(81,37,238,.96),rgba(255,105,143,.90)),
    radial-gradient(circle at 84% 12%,rgba(255,255,255,.42),transparent 34%);
  color:#fff;
  padding:22px clamp(18px,4vw,54px);
}
body:has(.experienceLanding) .landingLiveInner{
  width:min(1180px,100%);
  grid-template-columns:minmax(190px,300px) minmax(0,1fr) minmax(190px,auto);
  gap:24px;
}
body:has(.experienceLanding) .landingLiveMedia{
  min-height:156px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(76,32,232,.60),rgba(71,198,238,.58),rgba(255,105,143,.66)),
    var(--live-bg, linear-gradient(135deg,#6f42ff,#ff6e8d)) !important;
  box-shadow:0 24px 54px rgba(75,40,158,.24);
}
body:has(.experienceLanding) .landingLiveMedia:after{
  background:linear-gradient(180deg,rgba(9,11,52,0),rgba(9,11,52,.42));
}
body:has(.experienceLanding) .landingLiveBadge,
body:has(.experienceLanding) .landingLiveKicker{
  background:rgba(255,255,255,.22);
  color:#fff;
  border:1px solid rgba(255,255,255,.34);
}
body:has(.experienceLanding) .landingLiveCopy h2{color:#fff;}
body:has(.experienceLanding) .landingLiveCopy p{color:rgba(255,255,255,.84);}
body:has(.experienceLanding) .landingLiveBrands{color:rgba(255,255,255,.68);}
body:has(.experienceLanding) .landingLiveCta,
body:has(.experienceLanding) .landingLiveAsset{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.46);
  background:#fff;
  color:#5125ee;
  box-shadow:0 14px 32px rgba(20,12,76,.18);
}
body:has(.experienceLanding) .landingLiveAsset{
  background:rgba(255,255,255,.15);
  color:#fff;
}
body:has(.experienceLanding) .landingPromos{
  padding:70px 0 96px;
  background:
    linear-gradient(152deg,transparent 0 16%,rgba(112,86,255,.10) 16% 24%,transparent 24%),
    linear-gradient(28deg,transparent 0 70%,rgba(118,236,220,.14) 70% 81%,transparent 81%),
    radial-gradient(ellipse 66% 22% at 24% 0%,rgba(126,90,255,.16),transparent 70%),
    linear-gradient(180deg,#ffffff 0%,#f8f5ff 48%,#ffffff 100%) !important;
}
body:has(.experienceLanding) .lpInner{
  max-width:1180px;
  padding:0 clamp(18px,4vw,34px);
}
body:has(.experienceLanding) .lpIntro{
  margin:0 auto 32px;
  max-width:690px;
}
body:has(.experienceLanding) .lpIntro h2{
  color:#090b34;
  font:800 clamp(32px,4.2vw,54px)/1.02 'Prompt','Sarabun',sans-serif;
  letter-spacing:0;
}
body:has(.experienceLanding) .lpIntro p{
  color:#585b86;
  font:600 15px/1.7 'Sarabun',sans-serif;
}
body:has(.experienceLanding) .lpPartners{
  margin:0 auto 34px;
}
body:has(.experienceLanding) .lpPartnersLabel{
  color:#6f5ce6;
  letter-spacing:.12em;
}
body:has(.experienceLanding) .lpPartnerCard{
  border:1px solid rgba(104,75,238,.18);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 16px 34px rgba(64,43,137,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
body:has(.experienceLanding) .lpPartnerMark.xp,
body:has(.experienceLanding) .lpPartnerMark.ek{
  background:linear-gradient(135deg,#4a18ee,#7d4cff);
  color:#fff;
  box-shadow:none;
}
body:has(.experienceLanding) .lpPartnerInfo b{color:#11133f;}
body:has(.experienceLanding) .lpPartnerInfo small{color:#696d92;}
body:has(.experienceLanding) .lpUsp{
  margin-top:30px;
}
body:has(.experienceLanding) .lpRowHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 16px;
}
body:has(.experienceLanding) .lpRowHead b{
  color:#11133f;
  font:800 20px/1.2 'Prompt','Sarabun',sans-serif;
}
body:has(.experienceLanding) .lpUspGrid{
  gap:18px;
  margin-top:16px;
}
body:has(.experienceLanding) .lpUspCard{
  border:1px solid rgba(104,75,238,.16);
  border-radius:24px;
  padding:22px 20px;
  background:rgba(255,255,255,.82);
  box-shadow:0 20px 44px rgba(64,43,137,.10);
  overflow:hidden;
}
body:has(.experienceLanding) .lpUspCard:nth-child(1){background:linear-gradient(180deg,#fff,#f3eeff);}
body:has(.experienceLanding) .lpUspCard:nth-child(2){background:linear-gradient(180deg,#fff,#fff0f4);}
body:has(.experienceLanding) .lpUspCard:nth-child(3){background:linear-gradient(180deg,#fff,#ecfbff);}
body:has(.experienceLanding) .lpUspCard:nth-child(4){background:linear-gradient(180deg,#fff,#f2fff8);}
body:has(.experienceLanding) .lpUspIc{
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(135deg,#642bff,#8b5cff);
  color:#fff;
  box-shadow:0 12px 24px rgba(82,35,238,.18);
}
body:has(.experienceLanding) .lpUspCard:nth-child(2) .lpUspIc{background:linear-gradient(135deg,#ff5d68,#ff9f8a);}
body:has(.experienceLanding) .lpUspCard:nth-child(3) .lpUspIc{background:linear-gradient(135deg,#45bdf2,#5f6fff);}
body:has(.experienceLanding) .lpUspCard:nth-child(4) .lpUspIc{background:linear-gradient(135deg,#24bda8,#75e6c8);}
body:has(.experienceLanding) .lpUspCard b{color:#11133f;font-weight:800;}
body:has(.experienceLanding) .lpUspCard p{color:#62668d;font-weight:600;}
body:has(.experienceLanding) .lpAbout{
  grid-template-columns:minmax(220px,300px) 1fr;
  border:1px solid rgba(104,75,238,.16);
  border-radius:34px;
  background:
    linear-gradient(140deg,rgba(255,255,255,.96),rgba(247,244,255,.90)),
    radial-gradient(circle at 12% 14%,rgba(100,43,255,.18),transparent 30%) !important;
  box-shadow:0 28px 70px rgba(64,43,137,.14);
  color:#11133f;
}
body:has(.experienceLanding) .lpAboutArt{
  background:
    radial-gradient(circle at 50% 58%,rgba(255,105,143,.22),transparent 45%),
    linear-gradient(135deg,rgba(100,43,255,.10),rgba(117,230,200,.12));
  align-items:end;
}
body:has(.experienceLanding) .lpAboutArt img{
  width:min(210px,78%);
  filter:drop-shadow(0 20px 30px rgba(70,49,146,.20));
}
body:has(.experienceLanding) .lpAboutInfo{
  color:#11133f;
  padding:34px clamp(24px,4vw,44px);
}
body:has(.experienceLanding) .lpAboutTag{
  background:rgba(100,43,255,.10);
  color:#5125ee;
  border:1px solid rgba(100,43,255,.16);
}
body:has(.experienceLanding) .lpAboutInfo h3{
  color:#11133f;
  font:800 clamp(24px,3vw,34px)/1.16 'Prompt','Sarabun',sans-serif;
}
body:has(.experienceLanding) .lpAboutLead{color:#55597c;font-weight:600;}
body:has(.experienceLanding) .lpAboutCols h4{color:#5125ee;}
body:has(.experienceLanding) .lpAboutCols li{color:#55597c;font-weight:600;}
body:has(.experienceLanding) .lpAboutCols li::before{color:#ff6b91;}
body:has(.experienceLanding) .lpAboutCta{
  background:linear-gradient(135deg,#4a18ee,#783cff);
  color:#fff;
  border-radius:16px;
  box-shadow:0 18px 34px rgba(82,35,238,.20);
}
body:has(.experienceLanding) .lpRow{
  margin-top:34px;
}
body:has(.experienceLanding) .lpTrack{
  gap:18px;
  padding:8px 2px 20px;
  scrollbar-color:#8b5cff rgba(139,92,255,.14);
}
body:has(.experienceLanding) .lpTrack::-webkit-scrollbar{height:8px;}
body:has(.experienceLanding) .lpTrack::-webkit-scrollbar-track{
  background:rgba(139,92,255,.10);
  border-radius:999px;
}
body:has(.experienceLanding) .lpTrack::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#642bff,#ff6b91);
  border-radius:999px;
}
body:has(.experienceLanding) .lpArrow{
  width:42px;
  height:42px;
  border:1px solid rgba(104,75,238,.18);
  background:#fff;
  color:#5125ee;
  box-shadow:0 14px 30px rgba(64,43,137,.14);
}
body:has(.experienceLanding) .lpPoster{
  width:214px;
  height:236px;
  border:1px solid rgba(104,75,238,.14);
  border-radius:28px;
  background:linear-gradient(145deg,#5d2cff,#8e66ff 48%,#d6c8ff) !important;
  box-shadow:0 22px 50px rgba(64,43,137,.14);
  overflow:hidden;
}
body:has(.experienceLanding) .lpPoster:nth-child(2){background:linear-gradient(145deg,#ff5d68,#ff9f8a 54%,#ffd7b1) !important;}
body:has(.experienceLanding) .lpPoster:nth-child(3){background:linear-gradient(145deg,#45bdf2,#5f6fff 52%,#dbc9ff) !important;}
body:has(.experienceLanding) .lpPoster:nth-child(4){background:linear-gradient(145deg,#24bda8,#75e6c8 58%,#e2ffd6) !important;}
body:has(.experienceLanding) .lpPoster:nth-child(5){background:linear-gradient(145deg,#7648ff,#ff75ae 54%,#ffd2d8) !important;}
body:has(.experienceLanding) .lpPoster:nth-child(6){background:linear-gradient(145deg,#1fc7d4,#9c6bff 54%,#f4d4ff) !important;}
body:has(.experienceLanding) .lpPoster::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:14px;
  height:118px;
  border-radius:22px;
  background:
    linear-gradient(145deg,transparent 0 26%,rgba(255,255,255,.26) 26% 38%,transparent 38% 60%,rgba(255,255,255,.18) 60% 70%,transparent 70%),
    radial-gradient(ellipse 62% 44% at 20% 85%,rgba(10,15,94,.24),transparent 65%);
  transform:rotate(-2deg);
}
body:has(.experienceLanding) .lpPosterGrad{
  background:linear-gradient(180deg,rgba(255,255,255,0) 0 55%,rgba(255,255,255,.96) 56% 100%);
}
body:has(.experienceLanding) .lpPosterTitle{
  left:18px;
  right:18px;
  bottom:18px;
  color:#11133f;
  font:800 15px/1.16 'Prompt','Sarabun',sans-serif;
}
body:has(.experienceLanding) .lpPosterTitle small{
  color:#696d92;
  font:800 10px/1.2 'Prompt','Sarabun',sans-serif;
}
body:has(.experienceLanding) .lpPosterBadge,
body:has(.experienceLanding) .lpPosterBadge.gold,
body:has(.experienceLanding) .lpPosterPrice{
  top:18px;
  z-index:3;
  background:rgba(255,255,255,.82);
  color:#5125ee;
  border:1px solid rgba(255,255,255,.76);
  box-shadow:0 10px 20px rgba(33,24,96,.12);
}
body:has(.experienceLanding) .lpEbookIcon{
  position:absolute;
  z-index:2;
  top:42px;
  left:50%;
  transform:translateX(-50%);
  font-size:48px;
  filter:drop-shadow(0 12px 18px rgba(30,20,90,.16));
}
body:has(.experienceLanding) .lpBanner{
  width:330px;
  height:190px;
  border:1px solid rgba(255,255,255,.66);
  border-radius:28px;
  background:
    linear-gradient(135deg,#4a18ee,#7e4dff 48%,#ff6b91) !important;
  box-shadow:0 24px 54px rgba(64,43,137,.16);
}
body:has(.experienceLanding) .lpBanner:nth-child(2){background:linear-gradient(135deg,#24bda8,#45bdf2 54%,#8b5cff) !important;}
body:has(.experienceLanding) .lpBanner:nth-child(3){background:linear-gradient(135deg,#ff5d68,#ff9f8a 54%,#7d4cff) !important;}
body:has(.experienceLanding) .lpBanner:nth-child(4){background:linear-gradient(135deg,#11133f,#5125ee 54%,#45bdf2) !important;}
body:has(.experienceLanding) .lpBanner::after{
  content:"";
  position:absolute;
  inset:auto -32px -56px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
body:has(.experienceLanding) .lpBannerTag{
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.34);
}
body:has(.experienceLanding) .lpBannerTitle{font-weight:800;}
body:has(.experienceLanding) .lpBannerSub{color:rgba(255,255,255,.86);font-weight:600;}
body:has(.experienceLanding) .lpBannerCta{color:#fff;}
@media(max-width:900px){
  body:has(.experienceLanding) .landingLiveInner{grid-template-columns:1fr;}
  body:has(.experienceLanding) .lpUspGrid{grid-template-columns:1fr 1fr;}
  body:has(.experienceLanding) .lpAbout{grid-template-columns:1fr;}
}
@media(max-width:680px){
  body:has(.experienceLanding) .landingPromos{padding:46px 0 72px;}
  body:has(.experienceLanding) .lpIntro h2{font-size:30px;}
  body:has(.experienceLanding) .lpUspGrid{grid-template-columns:1fr;}
  body:has(.experienceLanding) .lpPoster{width:178px;height:218px;}
  body:has(.experienceLanding) .lpBanner{width:280px;height:174px;}
}