/* EMS Boost homepage v2 — conversion pass (UI/UX review, Oct 2026)
   One clear demo button, login opens as a sheet, much shorter phone page, sticky demo bar.
   Loaded after home-modern.css and ui3d.css. */

/* ---------- hero: one primary action ---------- */
.hx #mCtaPlans, .hx .mcta [data-scroll="mInside"]{ display:none !important; }
.hx .mcta #mCtaStudent.learn{
  background:none !important; border:0 !important; box-shadow:none !important; width:auto !important;
  min-height:0 !important; height:auto !important; padding:8px 4px !important;
  color:#c9d6ff !important; font-weight:600 !important; font-size:15px !important;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(201,214,255,.45);
}
.hx .mcta #mCtaStudent.learn:hover{ color:#fff !important; }
.hx-hi{ margin:10px 0 2px; color:#ffe39a; font-size:clamp(16px,1.6vw,19px); font-weight:600; line-height:1.5; }
.hx-wa{ color:#c9d6ff; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.hx-wa:hover{ color:#fff; }

/* nav: gold is reserved for the demo button */
#navStudentLogin{ background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.55) !important; box-shadow:none !important; }
#navStudentLogin:hover{ border-color:#fff !important; background:rgba(255,255,255,.08) !important; }

/* ---------- login opens as a sheet, not a homepage section ---------- */
#homeView #mLogin{ display:none !important; }
#homeView #mLogin.sheet-open{
  display:block !important; position:fixed; inset:0; z-index:1200; overflow-y:auto; overscroll-behavior:contain;
  margin:0; max-width:none; padding:64px 20px 40px; animation:mlIn .22s ease;
}
@keyframes mlIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.ml-close{
  position:fixed; top:14px; right:14px; z-index:1210; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff; font-size:26px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.ml-close:hover{ background:rgba(255,255,255,.2); }
.ml-close:focus-visible{ outline:3px solid #ffc928; outline-offset:2px; }
/* lock the page behind the login sheet ONLY while the homepage and the sheet are actually showing */
body.ml-lock:has(#homeView:not(.hidden) #mLogin.sheet-open){ overflow:hidden; }

/* ---------- phone: sticky demo bar ---------- */
#mStick{ display:none; }
@media(max-width:760px){
  #mStick{
    position:fixed; left:0; right:0; bottom:0; z-index:950; gap:10px; align-items:center;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(10,18,48,.94);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.12);
    transform:translateY(110%); transition:transform .25s ease;
  }
  body.stick-on #mStick{ display:flex; transform:none; }
  #mStick .ms-demo{
    flex:1; min-height:52px; border:0; border-radius:14px; cursor:pointer;
    background:linear-gradient(180deg,#ffd24a,#ffb31a); color:#1b1500; font:800 16px/1.15 inherit; padding:8px 12px;
  }
  #mStick .ms-demo small{ display:block; font-weight:600; font-size:12px; opacity:.8; }
  #mStick .ms-wa{
    flex:0 0 52px; height:52px; border-radius:14px; display:grid; place-items:center;
    background:#25d366; color:#fff; text-decoration:none;
  }
  #mStick .ms-wa svg{ width:28px; height:28px; }
  body.stick-on #emsbot, body.stick-on #supportFab{ bottom:84px !important; }
  body.stick-on .msite-footer{ padding-bottom:96px; }
}
@media(prefers-reduced-motion:reduce){ #mStick{ transition:none; } #homeView #mLogin.sheet-open{ animation:none; } }

/* chat bubble: icon only on phones so it never covers the page */
@media(max-width:600px){
  #emsbot .eb-fab{ padding:6px !important; gap:0 !important; }
  #emsbot .eb-fab > span:not(.av){ display:none !important; }
}

/* ---------- phone: a much shorter homepage ---------- */
.swipe-hint{ display:none; }
@media(max-width:760px){
  /* steps: one compact row */
  .hm-how{ padding-top:36px !important; padding-bottom:30px !important; }
  .hm-how > p{ margin-bottom:16px !important; }
  .hm-steps{ grid-template-columns:repeat(3,1fr) !important; gap:8px !important; }
  .hm-step{ padding:14px 8px 12px !important; text-align:center; border-radius:18px !important; }
  .hm-step p{ display:none !important; }
  .hm-step h3{ font-size:14px !important; line-height:1.25 !important; margin:6px 0 0 !important; }
  .hm-step .i3-step{ width:46px !important; height:46px !important; position:static !important; display:block; margin:0 auto 2px !important; }
  .hm-step .n{ display:none !important; }

  /* swipe rows */
  .hm-way-grid, .jrw-row, .ie-plans, .otw-cards{
    display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px !important;
    margin-left:-20px !important; margin-right:-20px !important; padding:6px 20px 14px !important;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .hm-way-grid::-webkit-scrollbar, .jrw-row::-webkit-scrollbar, .ie-plans::-webkit-scrollbar, .otw-cards::-webkit-scrollbar{ display:none; }
  .hm-way-grid > *, .ie-plans > *, .otw-cards > *{ flex:0 0 84% !important; scroll-snap-align:center; max-width:none !important; }
  .jrw-row > *{ flex:0 0 62% !important; scroll-snap-align:start; }
  .jrw-row:before, .jrw-row:after{ display:none !important; }
  .ie-plan.best{ transform:none !important; }
  .swipe-hint{ display:block; text-align:center; font-size:13px; color:inherit; opacity:.7; margin:2px 0 0; }
  .hm-way{ padding-top:30px !important; padding-bottom:26px !important; }
  .hm-way-c{ min-height:0 !important; }

  /* features: smaller pictures, fewer of them */
  #mInside{ padding-top:36px !important; }
  #mInside .feat{ padding:16px !important; margin-bottom:14px !important; gap:12px !important; }
  #mInside .feat-art{ max-height:210px; overflow:hidden; border-radius:18px; }
  #mInside .feat-art > img:not(.i3-sat){ max-height:210px; width:auto !important; margin:0 auto; display:block; object-fit:contain; }
  #mInside .feat-art .i3-scene{ transform:scale(.72); transform-origin:center top; height:210px; }
  #mInside .in-wrap:last-child .feat .feat-art{ display:none; }
  #mInside .feat-txt ul{ margin-top:8px !important; }
  #mInside .feat-txt h3{ font-size:20px !important; }

  /* founder: short, with read more */
  #mAbout{ padding-top:36px !important; padding-bottom:30px !important; }
  #mAbout .about-grid{ gap:14px !important; }
  #founderBio.clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .fb-more{ background:none; border:0; padding:4px 0; color:#2f5bff; font:600 14px inherit; cursor:pointer; text-decoration:underline; }
  #mAbout .hm-chips{ display:none; }
  #mAbout.bio-open .hm-chips{ display:flex; }
  #mAbout .hm-why{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  #mAbout .hm-why > div{ padding:12px !important; }
  #mAbout .hm-why span{ font-size:12.5px !important; }

  /* IELTS + 1-to-1 */
  #mIelts{ padding-top:40px !important; padding-bottom:34px !important; }
  #mOto{ padding-top:36px !important; padding-bottom:36px !important; }
  .otw-steps{ grid-template-columns:1fr !important; gap:8px !important; margin-top:16px !important; }

  /* teaching: a slim band, not a section */
  #mTeach{ padding:18px 0 20px !important; }
  #mTeach .gx-teach{ padding:18px !important; }
  #mTeach .i3-teach, #mTeach .hm-tchips{ display:none !important; }
  #mTeach h2{ font-size:19px !important; margin:0 0 4px !important; }
  #mTeach p{ font-size:14px !important; margin:0 0 10px !important; }
}

/* ---------- free-demo popup ---------- */
.dm-tel{ display:flex; align-items:stretch; border:1.5px solid var(--line,#d9e0ef); border-radius:10px; background:var(--bg,#fff); overflow:hidden; }
.dm-tel span{ display:grid; place-items:center; padding:0 10px 0 12px; font-weight:700; color:#33415c; background:#f1f4fb; border-right:1px solid var(--line,#d9e0ef); font-size:15px; }
.v2-f .dm-tel input{ border:0 !important; border-radius:0 !important; font-size:16px !important; letter-spacing:.02em; }
.dm-alt{ margin:14px 0 0; text-align:center; }
.dm-alt button{ background:none; border:0; padding:6px; color:#1d4ed8; font:600 14px/1.4 inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.v2m .v2-f input{ font-size:16px; }  /* stops iPhone zoom on focus */

/* ---------- round 1b: tighter phone hero, founder, 1-to-1 ---------- */
.hx-help{ margin:8px 0 0; font-size:14px; }
@media(max-width:760px){
  .hx-stats{ grid-template-columns:repeat(4,1fr) !important; gap:6px !important; margin-top:18px !important; }
  .hx-stats li{ padding:9px 6px !important; text-align:center; font-size:11.5px !important; border-radius:12px !important; }
  .hx-stats b{ font-size:19px !important; }
  #mHeroTagline{ font-size:15px; margin-top:12px; }
  .hx-stage{ min-height:0 !important; height:350px; overflow:visible; }
  .hx-stage > *{ transform:scale(.78); transform-origin:top center; }
  .hx-stage .hx-chip, .hx-stage .hx-3d{ display:none; }
  .founder-card{ display:flex !important; align-items:center; gap:14px; text-align:left; padding:14px 16px !important; border-radius:20px !important; }
  .founder-card .favatar{ width:64px !important; height:64px !important; font-size:22px !important; margin:0 !important; flex:0 0 64px; }
  .founder-card .fname{ font-size:17px; }
  #mOto .otw-step{ padding:12px 14px !important; }
  #mOto .otw-demo{ padding:16px !important; }
  #mOto .otw-demo h3{ font-size:18px !important; }
  #mOto .otw-demo .otw-btn{ width:100% !important; min-width:0 !important; }
  #mIelts .ie-feats, #mIelts [class*="ie-skill"]{ gap:8px !important; }
}
@media(max-width:760px){
  #mInside > .in-wrap:first-child > .feat:nth-of-type(3) .feat-art{ display:none; }
  #mInside .feat-art{ max-height:170px; }
  #mInside .feat-art > img:not(.i3-sat){ max-height:170px; }
  #mOto .otw-steps{ display:none !important; }
}
.v2m .v2-f label{ text-transform:none !important; letter-spacing:0 !important; font-size:14px !important; font-weight:700; }
@media(max-width:760px){
  #homeView #mLogin.sheet-open{ padding:58px 16px 32px; }
  #mLogin.sheet-open .la-art{ display:none !important; }
  #mLogin.sheet-open .la-pill{ display:none; }
  #mLogin.sheet-open .la-head h2{ font-size:28px !important; }
  #mLogin.sheet-open .la-head .mlede{ font-size:14.5px; margin-bottom:6px; }

}
body.ml-lock:has(#homeView:not(.hidden) #mLogin.sheet-open) #emsbot{ display:none; }

/* round 2: student-only login sheet, gold demo submit, leaner phone hero */
#mLogin.stu-only #roleTabs{ display:none !important; }
.ml-staff{ display:none; text-align:center; margin:14px 0 0; grid-column:1 / -1; order:99; grid-row:auto; }
#mLogin.sheet-open.stu-only .ml-staff{ display:block; }
.ml-staff button{ background:none; border:0; color:#c9d6ff; font:600 14px/1.4 inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px; }
.v2m #dmSend{ background:linear-gradient(180deg,#ffd24a,#ffb31a) !important; color:#1b1500 !important; border:0 !important; box-shadow:0 8px 20px rgba(255,179,26,.35) !important; font-weight:800; min-height:50px; font-size:16px; }
@media(max-width:760px){
  #mHeroTagline{ display:none; }
  .hx-stage{ height:300px !important; }
  .hx-stage > *{ transform:scale(.66) !important; }
}
#mLogin.sheet-open .login-split{ grid-template-areas:"head card" "art card" "art staff" !important; }
#mLogin .ml-staff{ grid-area:staff; }
@media(max-width:860px){ #mLogin.sheet-open .login-split{ grid-template-areas:"head" "card" "staff" !important; } }

/* demo class prices on the 'learn your way' cards */
.hm-price{ margin:14px 0 0; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:15px; }
.hm-price b{ background:#fff4cc; color:#6b4a00; border-radius:99px; padding:4px 12px; font-size:14px; }
.hm-way-c.big .hm-price b{ background:rgba(255,211,107,.18); color:#ffd36b; }
.hm-price a{ color:#1d4ed8; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.hm-way-c.big .hm-price a{ color:#c9d6ff; }

/* ---------- goal picker + first-day plan ---------- */
.gp-list{ display:grid; gap:10px; margin:6px 0 4px; }
.gp-card{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; cursor:pointer; background:#f7f9ff; border:1.5px solid #dbe5f7; border-radius:16px; padding:12px 14px; color:#0b1b4a; transition:border-color .15s, background .15s; }
.gp-card:hover{ border-color:#9fb6ff; background:#fff; }
.gp-card:focus-visible{ outline:3px solid #ffc928; outline-offset:2px; }
.gp-card img{ width:46px; height:46px; flex:0 0 46px; }
.gp-card span{ flex:1; min-width:0; } .gp-card b{ display:block; font-size:16px; } .gp-card small{ display:block; font-size:13px; color:#5b6b85; line-height:1.4; margin-top:2px; }
.gp-card i{ font-style:normal; font-size:22px; color:#9fb6ff; }
.gp-card.slim{ padding:12px 14px; } .gp-card:disabled{ opacity:.6; }
.go-steps{ display:flex; gap:6px; margin:0 0 12px; } .go-steps i{ flex:1; height:5px; border-radius:5px; background:#e1e8f5; } .go-steps i.on{ background:linear-gradient(90deg,#2f5bff,#5b3df5); }
.go-plan{ display:flex; gap:12px; align-items:center; background:#f3f6ff; border:1.5px solid #dbe5f7; border-radius:16px; padding:14px; margin:4px 0 14px; }
.go-plan img{ width:52px; height:52px; } .go-plan b{ display:block; font-size:16px; color:#0b1b4a; } .go-plan span{ font-size:13.5px; color:#33415c; }
.v2m #goStart{ background:linear-gradient(180deg,#ffd24a,#ffb31a) !important; color:#1b1500 !important; border:0 !important; font-weight:800; min-height:50px; font-size:16px; }
.v2m select{ font-size:16px; }
.lq-inst{ color:#7c3aed; }
/* round 4: AI consent on the "first interview is ready" card */
.go-ai{ display:flex; gap:10px; align-items:flex-start; margin:0 0 12px; padding:12px; border-radius:14px; background:#fff; border:1.5px solid #dbe5f7; font-size:14px; line-height:1.45; color:#33415c; text-transform:none; letter-spacing:0; font-weight:500; cursor:pointer; }
.go-ai input{ width:20px; height:20px; flex:none; margin:1px 0 0; accent-color:#2f5bff; }
.go-ai a{ font-weight:700; color:#1d4ed8; white-space:nowrap; }
.go-ai-more{ margin:-4px 0 12px; font-size:13px; line-height:1.5; color:#46557a; }
.go-ai-more[hidden]{ display:none; }
#goStart:disabled{ opacity:.5; cursor:not-allowed; filter:grayscale(.3); box-shadow:none; }