/* ฟอนต์: High Cruiser = ตัวอักษรอังกฤษ (A–Z) · Canva Sans = ตัวเลข/เครื่องหมาย (ไม่มีอักษรไทย) · Prompt = หัวข้อ h1–h3 และอักษรไทย */
@font-face{font-family:'High Cruiser';src:url(assets/fonts/HighCruiser.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0041-005A,U+0061-007A}
@font-face{font-family:'Canva Sans';src:url(assets/fonts/CanvaSans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Canva Sans';src:url(assets/fonts/CanvaSans-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
/* NILE — IELTS #MyBand landing page
   ทุกสไตล์อยู่ใต้ .nile-lp เพื่อไม่ชนกับธีม Flatsome
   ระบบพิกัด: ดีไซน์ Canva 1920×1080 → --u (1 หน่วย = 1px ที่ความกว้าง 1920); ทุกชิ้นใช้ --x --y --w --h --r ค่าเดียวกับ Canva */
.nile-lp{font-family:'High Cruiser','Canva Sans','Prompt','Noto Sans Thai',system-ui,sans-serif;font-synthesis:none;color:#202020;background:#fff;line-height:1.4;font-size:16px}

.nile-lp *,.nile-lp *::before,.nile-lp *::after{box-sizing:border-box}
.nile-lp img{display:block}
.nile-lp .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nile-lp .contents,.nile-lp .cta-actions,.nile-lp .mock-bottom-art{display:contents}
.nile-lp .slide{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg);container-type:inline-size}
.nile-lp .stage{position:absolute;inset:0;--u:calc(100cqw / 1920)}
.nile-lp .el{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w, 0) * var(--u));height:calc(var(--h, 0) * var(--u));rotate:calc(var(--r, 0) * 1deg);margin:0}
.nile-lp img.el{max-width:none;user-select:none;-webkit-user-drag:none}
.nile-lp img.el.missing{visibility:hidden}
.dev .nile-lp img.el.missing{visibility:visible;outline:calc(2 * var(--u)) dashed #ff2d95;background:rgba(255,45,149,.08);color:transparent}
.nile-lp .t{width:calc(var(--w) * var(--u));height:auto;font-size:calc(var(--fs) * var(--u));line-height:calc(var(--lh) * var(--u));letter-spacing:0}
.nile-lp .t.disp,.nile-lp .disp{font-family:'High Cruiser','Canva Sans','Prompt',sans-serif;font-weight:700;letter-spacing:-.07em}
.nile-lp .booster-badge .disp{transform-origin:50% 50%}
.nile-lp .t p{margin:0}
.nile-lp .el.t{list-style:none;padding:0}
.nile-lp span.el.t,.nile-lp li.el.t{display:block}
.nile-lp .booster-badge span{display:block;font-size:calc(var(--fs) * var(--u));line-height:1.2;white-space:nowrap}
.nile-lp .tint{background:var(--c);opacity:var(--o,1);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.nile-lp .grid{position:absolute;inset:0;background:var(--c);opacity:var(--o);-webkit-mask:url(assets/img/bg-grid.png) center/cover no-repeat;mask:url(assets/img/bg-grid.png) center/cover no-repeat;pointer-events:none}
.nile-lp .pill{background:var(--c);border-radius:calc(32 * var(--u))}
.nile-lp .booster-badge{background:#040404;border-radius:calc(56 * var(--u));box-shadow:calc(14 * var(--u)) calc(14 * var(--u)) 0 #ffb5a8;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:0}
.nile-lp .li-pill{margin:0}
.nile-lp .card{background:#fff;border-radius:calc(6 * var(--u));overflow:hidden;box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.08)}
.nile-lp .card::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(56 * var(--u));background:#ececec;border-bottom:calc(2 * var(--u)) solid #dcdcdc}
.nile-lp .card::after{content:"";position:absolute;left:calc(24 * var(--u));top:calc(18 * var(--u));width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;background:#ff5f56;box-shadow:calc(32 * var(--u)) 0 #ffbd2e,calc(64 * var(--u)) 0 #27c93f}
.nile-lp .btn{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#fff;font-weight:700;font-size:calc(var(--fs) * var(--u));line-height:calc(var(--lh) * var(--u));border-radius:calc(70 * var(--u));transition:transform .15s,filter .15s}
.nile-lp .btn:hover{transform:scale(1.02);filter:brightness(1.06)}
.nile-lp .btn:focus-visible{outline:calc(4 * var(--u)) solid #fff;outline-offset:calc(4 * var(--u))}
.nile-lp .btn-red{background:linear-gradient(#f0343c 0%,#d3141c 45%,#a90a11 100%);box-shadow:inset 0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(255,255,255,.45),inset 0 calc(-5 * var(--u)) calc(6 * var(--u)) rgba(80,0,0,.35),0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.25)}
.nile-lp .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none}
.nile-lp .photo-ph{background:#dfe4ec}
.nile-lp .btn-flat{background:none;box-shadow:none;border-radius:0}
.nile-lp .btn-navy{background:linear-gradient(#2b4f8c 0%,#17325f 55%,#0f2346 100%);box-shadow:inset 0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(255,255,255,.3),0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.25)}
.nile-lp .h1-th,.nile-lp .contents>.t{margin:0}
.nile-lp .mock-line{letter-spacing:0}
.nile-lp .yt{position:absolute;inset:0;background:#161616}
.nile-lp .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nile-lp .yt-play{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));padding:0;border:0;background:none;cursor:pointer}
.nile-lp .yt-play[aria-disabled=true]{cursor:default}
.nile-lp .yt-play:not([aria-disabled=true]):hover{filter:brightness(1.1)}
.nile-lp .checks li{margin:0}
.nile-lp .band-tag{width:auto;height:auto;display:block;white-space:nowrap;background:#ffb800;color:#202020;font-weight:700;font-size:calc(34 * var(--u));line-height:calc(48 * var(--u));padding:0 calc(22 * var(--u));clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}
.nile-lp figcaption.el{margin:0}
.nile-lp .faq-card{background:#fafafa;border-radius:calc(24 * var(--u));box-shadow:0 0 calc(30 * var(--u)) rgba(0,0,0,.06);padding:calc(56 * var(--u)) calc(64 * var(--u)) 0}
.nile-lp .faq-title{margin:0 0 calc(50 * var(--u));text-align:center;font-size:calc(70 * var(--u));line-height:calc(84 * var(--u));font-weight:700;color:#202020}
.nile-lp .faq-item{border-top:calc(2 * var(--u)) solid #e3e3e3}
.nile-lp .faq-item:last-child{border-bottom:calc(2 * var(--u)) solid #e3e3e3}
.nile-lp .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:calc(28 * var(--u));min-height:calc(96 * var(--u));font-size:calc(44 * var(--u));color:#202020}
.nile-lp .faq-item summary::-webkit-details-marker{display:none}
.nile-lp .faq-item summary::before{content:"";flex:none;width:calc(18 * var(--u));height:calc(18 * var(--u));border-right:calc(4 * var(--u)) solid #202020;border-bottom:calc(4 * var(--u)) solid #202020;transform:rotate(45deg) translateY(-15%);transition:transform .2s}
.nile-lp .faq-item[open] summary::before{transform:rotate(-135deg)}
.nile-lp .faq-item[open] summary{font-weight:700}
.nile-lp .faq-a{padding:0 0 calc(24 * var(--u)) calc(46 * var(--u));font-size:calc(36 * var(--u));line-height:calc(54 * var(--u));color:#444}
.nile-lp .faq-a:empty{display:none}
.nile-lp .contact{display:flex;flex-direction:column;align-items:center;gap:calc(30 * var(--u));padding-top:calc(46 * var(--u))}
.nile-lp .pill-red,.nile-lp .pill-navy{display:inline-flex;align-items:center;gap:.4em;color:#fff;text-decoration:none;font-weight:700;font-size:calc(30 * var(--u));line-height:calc(51 * var(--u));padding:0 calc(28 * var(--u));border-radius:calc(10 * var(--u))}
.nile-lp .pill-red{background:#ec4a5c}
.nile-lp .pill-navy{background:#0e2a6b}
.nile-lp .socials{list-style:none;margin:0;padding:0;display:flex;gap:calc(8 * var(--u))}
.nile-lp .socials a{display:grid;place-items:center;width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:50%;color:#fff;text-decoration:none;font-weight:700;font-size:calc(26 * var(--u))}
.nile-lp .s-fb{background:#3b5fc0}
.nile-lp .s-tt{background:#111}
.nile-lp .s-ig{background:#222}
.nile-lp .s-ln{background:#2fc44d}
.nile-lp .s-yt{background:#e0232c}
.nile-lp .yt-play{min-height:0;line-height:1;text-transform:none;letter-spacing:0;margin:0;box-shadow:none}
.nile-lp a.btn,.nile-lp a.btn:hover,.nile-lp a.btn:focus,.nile-lp .pill-red:hover,.nile-lp .pill-navy:hover,.nile-lp .socials a:hover{color:#fff}
.nile-lp a.btn,.nile-lp .pill-red,.nile-lp .pill-navy,.nile-lp .socials a{text-decoration:none;letter-spacing:0;text-transform:none}
.nile-lp h1,.nile-lp h2,.nile-lp h3{font-family:'Prompt','Noto Sans Thai',system-ui,sans-serif;text-transform:none;letter-spacing:0;margin:0}
@media (prefers-reduced-motion:reduce){.nile-lp .btn,.nile-lp .faq-item summary::before{transition:none}}
.nile-lp .f-th,.nile-lp .f-th *{font-family:'Prompt','Noto Sans Thai',system-ui,sans-serif}
/* ปุ่มลูกศรของ carousel หน้า Success Story: ซ่อนไว้เป็นค่าเริ่มต้น (เดสก์ท็อปไม่ใช้), เปิดเฉพาะในสื่อมือถือด้านล่าง */
.nile-lp .story-nav{display:none}
/* บรรทัดตัดคำเฉพาะมือถือ: ซ่อนบนเดสก์ท็อป (ข้อความยังอยู่บรรทัดเดียวตามดีไซน์เดิม) เปิดเฉพาะในสื่อมือถือด้านล่าง */
.nile-lp br.m-br{display:none}

/* ═════ เอฟเฟกต์เคลื่อนไหว (ปิดอัตโนมัติถ้าผู้ใช้ตั้งค่า "ลดการเคลื่อนไหว") ═════
   .fx-on จะถูกเติมโดยสคริปต์ → ถ้า JS ไม่ทำงาน เนื้อหาทั้งหมดยังแสดงปกติ
   .in จะถูกเติมที่ section เมื่อเลื่อนมาเห็น */
.nile-lp .fx>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;margin:0}
.nile-lp .fx .shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.1) 55%,transparent 62%) no-repeat;background-size:250% 100%;background-position:100% 0}

/* light reflection: วนซ้ำ / ตอน hover */
.nile-lp.fx-on .shine-loop .shine{animation:nl-shine 3.6s ease-in-out var(--sd,0s) infinite}
.nile-lp .shine-hover:hover .shine,.nile-lp .btn-grp:hover .shine-hover .shine{animation:nl-shine-once .9s ease-out}
@keyframes nl-shine{0%{background-position:100% 0}45%,100%{background-position:0% 0}}
@keyframes nl-shine-once{from{background-position:100% 0}to{background-position:0% 0}}

/* หน้า 1: ค่อยๆ ขยายจนเป็นขนาดปกติ */
.nile-lp.fx-on .fx-grow{opacity:0;scale:.35}
.nile-lp.fx-on .in .fx-grow{animation:nl-grow 1.1s cubic-bezier(.18,.9,.25,1.15) var(--d,0s) both}
@keyframes nl-grow{0%{opacity:0;scale:.35}60%{opacity:1}100%{opacity:1;scale:1}}

/* ลอยขึ้นลง (หน้า 3, ดาวหน้า 6–8) */
.nile-lp.fx-on .fx-float{animation:nl-float var(--fdur,4.5s) ease-in-out var(--fd,0s) infinite alternate}
@keyframes nl-float{from{translate:0 0}to{translate:0 calc(var(--fa,14) * -1 * var(--u))}}

/* สติกเกอร์ OK / YES (หน้า 6): ลอย + ขยายเล็กน้อยเสมอ เพื่อปิดสติกเกอร์เดิมที่ติดอยู่ในรูป */
/* ลอยพร้อมกับรูปคน (nl-float จังหวะเดียวกัน) + ส่ายเล็กน้อยของตัวเอง */
.nile-lp.fx-on .fx-sticker{animation:nl-float var(--fdur,4.5s) ease-in-out var(--fd,0s) infinite alternate,nl-sticker 3.2s ease-in-out var(--sd2,0s) infinite alternate}
@keyframes nl-sticker{from{transform:translateY(0);scale:1.08;rotate:-1.5deg}to{transform:translateY(calc(-6 * var(--u)));scale:1.12;rotate:1.5deg}}

/* หน้า 4: โลโก้กระพริบวูบวาบ */
.nile-lp.fx-on .fx-flicker{animation:nl-flicker 2.8s linear infinite}
@keyframes nl-flicker{0%,17%,23%,26%,52%,58%,100%{filter:brightness(1) drop-shadow(0 0 calc(14 * var(--u)) rgba(255,40,40,.45))}19%,25%,55%{filter:brightness(1.35) drop-shadow(0 0 calc(34 * var(--u)) rgba(255,60,60,.95))}21%{filter:brightness(.9) drop-shadow(0 0 0 rgba(255,60,60,0))}}

/* ปุ่ม (รูปปุ่ม + ข้อความ) ขยับพร้อมกันรอบจุดกึ่งกลางปุ่ม */
.nile-lp .btn-grp>.el{transform-origin:calc((var(--ox) - var(--x)) * var(--u)) calc((var(--oy) - var(--y)) * var(--u))}
.nile-lp .btn-grp .btn:hover{transform:none;filter:none}
.nile-lp .btn-grp>.btn-img{pointer-events:none}
/* หน้า 4: ปุ่มกระพริบ + แสงไฟเหลือบ */
.nile-lp.fx-on .fx-pulse>.el{animation:nl-pulse 1.6s ease-in-out var(--pd,0s) infinite}
.nile-lp.fx-on .fx-pulse>.btn-img{animation:nl-pulse 1.6s ease-in-out var(--pd,0s) infinite,nl-glow 1.6s ease-in-out var(--pd,0s) infinite}
@keyframes nl-pulse{0%,100%{scale:1}50%{scale:1.06}}
@keyframes nl-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,50,50,0))}50%{filter:brightness(1.12) drop-shadow(0 0 calc(28 * var(--u)) var(--gc,rgba(255,60,60,.85)))}}
/* หน้า 6–8: hover แล้วเด้งขึ้น + แสงเหลือบ */
.nile-lp .hv-hop>.el{transition:translate .35s cubic-bezier(.3,1.6,.5,1)}
.nile-lp .hv-hop:hover>.el{translate:0 calc(-16 * var(--u))}

/* หน้า 5: hover ป้ายคอร์สแล้วเด้ง + แสงเหลือบ */
.nile-lp .hv-bounce{cursor:pointer}
.nile-lp .hv-bounce:hover{animation:nl-bounce .75s cubic-bezier(.3,1.5,.5,1)}
@keyframes nl-bounce{0%{scale:1;translate:0 0}30%{scale:1.12 .9;translate:0 calc(-18 * var(--u))}55%{scale:.96 1.06;translate:0 0}75%{scale:1.04 .98}100%{scale:1;translate:0 0}}
/* หน้า 6–8: hover ป้ายคอร์สแล้วขยาย + แสงเหลือบ */
.nile-lp .hv-grow{transition:scale .35s cubic-bezier(.3,1.5,.5,1)}
.nile-lp .hv-grow:hover{scale:1.08}

/* ตัวอักษร: พิมพ์ทีละตัว (หน้า 1) / ค่อยๆ ปรากฏ (หน้า 3, 5) */
.nile-lp.fx-on [data-fx-chars] .ch{opacity:0}
.nile-lp.fx-on .in .fx-type .ch{animation:nl-type .12s linear calc(var(--d,0s) + var(--i) * 75ms) forwards}
.nile-lp.fx-on .in .fx-reveal .ch{animation:nl-reveal .6s ease-out calc(var(--d,0s) + var(--i) * 45ms) forwards}
@keyframes nl-type{to{opacity:1}}
@keyframes nl-reveal{from{opacity:0;filter:blur(calc(6 * var(--u)))}to{opacity:1;filter:blur(0)}}

/* หน้า 4: ข้อความ fade */
.nile-lp.fx-on .fx-fade{opacity:0;translate:0 calc(30 * var(--u))}
.nile-lp.fx-on .in .fx-fade{animation:nl-fade 1s ease-out var(--d,0s) forwards}
@keyframes nl-fade{to{opacity:1;translate:0 0}}

/* หน้า 9: รูปโผล่ทีละรูป */
.nile-lp.fx-on .fx-pop{opacity:0;scale:.4}
.nile-lp.fx-on .in .fx-pop{animation:nl-pop .7s cubic-bezier(.2,1.5,.4,1) var(--d,0s) both}
@keyframes nl-pop{0%{opacity:0;scale:.4}100%{opacity:1;scale:1}}
/* หน้า 9: หัวข้อเลื่อนเข้าจากซ้าย / ขวา */
.nile-lp.fx-on .fx-from-left{opacity:0;translate:calc(-420 * var(--u)) 0}
.nile-lp.fx-on .fx-from-right{opacity:0;translate:calc(420 * var(--u)) 0}
.nile-lp.fx-on .in .fx-from-left,.nile-lp.fx-on .in .fx-from-right{animation:nl-slide 1s cubic-bezier(.2,.9,.25,1.05) var(--d,0s) both}
@keyframes nl-slide{to{opacity:1;translate:0 0}}

/* หน้า 1, 3, 5: ข้อความแบบ Apple — แถบแสงสีไล่ผ่านตัวอักษรแล้วจบที่สีจริง
   (ไล่ gradient ที่ตัดตามรูปตัวอักษรด้วย background-clip:text) */
.nile-lp.fx-on .fx-gt{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;box-sizing:content-box;padding:.22em .6em;translate:-.6em calc(-.22em + 14px);opacity:0}
.nile-lp.fx-on .in .fx-gt{animation:nl-white-reveal .7s ease-out var(--d,0s) forwards}
@keyframes nl-white-reveal{from{opacity:0;filter:blur(5px);translate:-.6em calc(-.22em + 14px)}to{opacity:1;filter:blur(0);translate:-.6em -.22em}}
.nile-lp .fx-gt{color:#fff!important;-webkit-text-fill-color:#fff!important}
.nile-lp #s05-choose-band .fx-gt{background:none!important;border-radius:0;color:#000!important;-webkit-text-fill-color:#000!important}
.nile-lp #s01-hero .fx-gt{color:#202020!important;-webkit-text-fill-color:#202020!important}

@media (prefers-reduced-motion:reduce){.nile-lp *,.nile-lp *::before,.nile-lp *::after{animation:none!important;transition:none!important}}

/* Mobile uses one width-based canvas, never viewport height. Desktop keeps Canva coordinates.
   Text-heavy slides use normal flow; bottom art belongs to one bottom-anchored group. */
@media (max-width:767px),(max-width:1024px) and (orientation:portrait){
.nile-lp .slide{aspect-ratio:360/800;--mobile-unit:calc(100cqw / 360)}
.nile-lp .stage{--U:calc(100cqw / 1080);--u:calc(var(--U) * .5625);position:absolute;inset:0;height:100%;padding:calc(var(--mTop,0) * var(--U)) 0 calc(var(--mBot,0) * var(--U));box-sizing:border-box}
.nile-lp .el,.nile-lp .yt-play{--u:calc(var(--U) * var(--ms,.5625));left:calc(var(--mx,0) * var(--U));top:calc(var(--my,0) * var(--U))}
.nile-lp [data-m~=bot]{top:calc(100% - (var(--mBot) - var(--my)) * var(--U))}
.nile-lp .el[data-m~=flow]{position:relative;left:auto;top:auto;width:auto;height:auto;rotate:none;white-space:normal!important;text-align:center!important;margin:calc(28 * var(--U)) calc(48 * var(--U)) 0}
.nile-lp [data-m~=hide]{display:none}
.nile-lp [data-m~=nobr] br{display:none}
.nile-lp [data-m~=nobr] br.m-br,.nile-lp br.m-br{display:initial}
.nile-lp [data-m~=ctr]{text-align:center!important}
.nile-lp .checks[data-m~=flow]{text-align:left!important}
.nile-lp .fx-gt[data-m~=flow]{box-sizing:border-box;padding:0;translate:0!important}
.nile-lp.fx-on .in .fx-gt[data-m~=flow]{animation:nl-center-white-reveal .7s ease-out var(--d,0s) forwards}
@keyframes nl-center-white-reveal{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
/* Hero / why 30 hours: all coordinates scale together. */
.nile-lp #s01-hero h1 .fx-gt{position:absolute;left:0;top:calc(275 * var(--mobile-unit));width:100%;margin:0;text-align:center!important}
.nile-lp #s03-why-30-hours .fx-float{animation:none}
.nile-lp #s03-why-30-hours h2 .fx-gt{position:absolute;left:0;width:100%;margin:0;text-align:center!important}
.nile-lp #s03-why-30-hours h2 .fx-gt:nth-child(1){top:calc(160 * var(--mobile-unit))}
.nile-lp #s03-why-30-hours h2 .fx-gt:nth-child(2){top:calc(330 * var(--mobile-unit))}
/* Real button boxes keep artwork, label, hit area and animation centered together. */
.nile-lp .mobile-button{display:block;position:relative;flex:none;aspect-ratio:812/182}
.nile-lp .mobile-button>.el{position:absolute;left:0;top:0;width:100%;height:100%;rotate:none;transform-origin:center;scale:1}
.nile-lp .mobile-button>a.btn{font-family:'Prompt',sans-serif;font-size:calc(32 * var(--mobile-unit));line-height:1.2;white-space:nowrap}
.nile-lp .mobile-button>a:focus-visible{outline:3px solid #1c53a3;outline-offset:3px}
/* Intro: text and CTA flow in order; no button can cover the paragraph. */
.nile-lp #s04-course-intro,.nile-lp #s13-cta{aspect-ratio:auto;min-height:calc(800 * var(--mobile-unit))}
.nile-lp #s04-course-intro>.stage,.nile-lp #s13-cta>.stage{position:relative;inset:auto;min-height:calc(800 * var(--mobile-unit));height:auto;padding:calc(48 * var(--mobile-unit)) calc(16 * var(--mobile-unit));display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:calc(24 * var(--mobile-unit))}
.nile-lp #s04-course-intro>.stage>.fx-flicker,.nile-lp #s13-cta>.stage>.fx-flicker{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:853/546;flex:none}
.nile-lp #s04-course-intro>.stage>h2,.nile-lp #s13-cta>.stage>h2{position:relative;left:auto;top:auto;width:100%;margin:0;font-size:calc(26 * var(--mobile-unit));line-height:1.25;flex:none}
.nile-lp #s04-course-intro .f-th[data-m~=flow]{width:100%;margin:0;font-size:calc(14 * var(--mobile-unit));line-height:1.45;flex:none}
.nile-lp #s04-course-intro .sub{display:block;margin-top:calc(18 * var(--mobile-unit));font-size:calc(12 * var(--mobile-unit));line-height:1.5}
.nile-lp #s04-course-intro .mobile-button{width:100%;margin-top:calc(25 * var(--mobile-unit))}
/* All three course cards have the same badge width, including their portrait spacing. */
.nile-lp #s05-choose-band>.stage{padding-top:calc(24 * var(--mobile-unit))}
.nile-lp #s05-choose-band h2{margin:0 calc(16 * var(--mobile-unit));font-size:calc(27 * var(--mobile-unit));line-height:1.3}
.nile-lp #s05-choose-band h3>.el{left:24%;width:52%;height:auto;aspect-ratio:585/227.42;animation:none}
.nile-lp #s05-choose-band h3:nth-of-type(1)>.el{top:calc(245 * var(--mobile-unit))}
.nile-lp #s05-choose-band h3:nth-of-type(2)>.el{top:calc(485 * var(--mobile-unit))}
.nile-lp #s05-choose-band h3:nth-of-type(3)>.el{top:calc(714 * var(--mobile-unit))}
.nile-lp #s05-choose-band .el:has(>img[src$="p05-kv-1.webp"]){--ms:.76!important;--mx:185!important;--my:200!important}
.nile-lp #s05-choose-band .el:has(>img[src$="p05-kv-2.webp"]){--ms:.62!important;--mx:190!important;--my:900!important}
.nile-lp #s05-choose-band .el:has(>img[src$="p05-kv-3.webp"]){--ms:1.05!important;--mx:230!important;--my:1610!important}
/* The six separate stickers are desktop-only. Their originals are already in the portraits. */
.nile-lp .course-slide .fx-sticker{display:none}
.nile-lp .course-slide .btn-grp{display:block;position:absolute;left:50%;top:auto;bottom:calc(12 * var(--mobile-unit));translate:-50% 0;width:min(calc(var(--enroll-width) * var(--mobile-unit)),100%);height:auto;aspect-ratio:728/254;z-index:10}
.nile-lp #s06-focus-band{--enroll-width:390;--enroll-font:52.76}
.nile-lp #s07-booster-band{--enroll-width:442;--enroll-font:59.8}
.nile-lp #s08-extensive-band{--enroll-width:416;--enroll-font:56.28}
.nile-lp .course-slide .btn-grp>.el{position:absolute;left:4%;top:0;width:100%;height:100%;scale:1;transform-origin:center;rotate:none}
.nile-lp .course-slide .btn-grp>a.btn{top:2.8%;height:73.5%;width:92%;font-family:'Prompt',sans-serif;font-size:calc(var(--enroll-font) * var(--mobile-unit));line-height:1;letter-spacing:-.05em;white-space:nowrap}
.nile-lp .course-slide .btn-grp:hover>.el{translate:0 calc(-4 * var(--mobile-unit))}
.nile-lp .course-slide .course-portrait{left:calc(50% - var(--head-center) * var(--mobile-unit));top:calc(395 * var(--mobile-unit));bottom:auto;width:calc(var(--portrait-width) * var(--mobile-unit));height:auto;aspect-ratio:var(--w)/var(--h);animation:none;z-index:3}
.nile-lp #s06-focus-band .course-portrait{--portrait-width:450;--head-center:248}
.nile-lp #s07-booster-band .course-portrait{--portrait-width:330;--head-center:147}
.nile-lp #s08-extensive-band .course-portrait{--portrait-width:302;--head-center:121}
.nile-lp .course-slide .course-decoration{top:calc(430 * var(--mobile-unit));bottom:auto;animation:none}
.nile-lp .course-slide .course-decoration.chrome-star{top:calc(415 * var(--mobile-unit));width:calc(155 * var(--mobile-unit));height:calc(155 * var(--mobile-unit))}
.nile-lp #s06-focus-band .course-decoration{left:5%}
.nile-lp #s06-focus-band .chrome-star{left:64%}
.nile-lp #s07-booster-band .course-decoration{left:7%}
.nile-lp #s07-booster-band .chrome-star{left:-4%}
.nile-lp #s08-extensive-band .course-decoration{left:-10%}
.nile-lp #s08-extensive-band .chrome-star{left:65%}
/* Skills: labels attach to the correct parent boxes; red halftones stay at section edges. */
.nile-lp #s09-four-skills>.stage{padding:0}
.nile-lp #s09-four-skills>.stage>img.el{display:none}
.nile-lp #s09-four-skills .fx-from-left{left:0;top:calc(100 * var(--mobile-unit));width:100%;font-size:calc(44 * var(--mobile-unit));line-height:1;text-align:center!important}
.nile-lp #s09-four-skills .el:has(>img[src$="p09-reading.webp"]){left:calc(107 * var(--mobile-unit));top:calc(195 * var(--mobile-unit));width:calc(150 * var(--mobile-unit));height:calc(109 * var(--mobile-unit))}
.nile-lp #s09-four-skills .el:has(>img[src$="p09-listening.webp"]){left:calc(126 * var(--mobile-unit));top:calc(297 * var(--mobile-unit));width:calc(108 * var(--mobile-unit));height:calc(143 * var(--mobile-unit))}
.nile-lp #s09-four-skills .el:has(>img[src$="p09-speaking.webp"]){left:calc(103 * var(--mobile-unit));top:calc(431 * var(--mobile-unit));width:calc(154 * var(--mobile-unit));height:calc(65 * var(--mobile-unit))}
.nile-lp #s09-four-skills .el:has(>img[src$="p09-writing.webp"]){left:calc(83 * var(--mobile-unit));top:calc(476 * var(--mobile-unit));width:calc(194 * var(--mobile-unit));height:calc(154 * var(--mobile-unit))}
.nile-lp #s09-four-skills span.fx-from-right{position:absolute;left:0;top:calc(622 * var(--mobile-unit));width:100%;margin:0;font-size:calc(26 * var(--mobile-unit));line-height:1;text-align:center!important}
.nile-lp #s09-four-skills .disp.fx-from-right{position:absolute;left:0;top:calc(650 * var(--mobile-unit));width:100%;margin:0;font-size:calc(50 * var(--mobile-unit));line-height:.82;text-align:center!important}
.nile-lp #s09-four-skills .skills li{font-size:calc(20 * var(--mobile-unit));line-height:1.2;width:calc(110 * var(--mobile-unit))}
.nile-lp #s09-four-skills .skills li:nth-child(1){left:calc(48 * var(--mobile-unit));top:calc(240 * var(--mobile-unit))}
.nile-lp #s09-four-skills .skills li:nth-child(2){left:calc(218 * var(--mobile-unit));top:calc(352 * var(--mobile-unit))}
.nile-lp #s09-four-skills .skills li:nth-child(3){left:calc(40 * var(--mobile-unit));top:calc(445 * var(--mobile-unit))}
.nile-lp #s09-four-skills .skills li:nth-child(4){left:calc(237 * var(--mobile-unit));top:calc(602 * var(--mobile-unit))}
.nile-lp #s09-four-skills::before,.nile-lp #s09-four-skills::after,.nile-lp #s12-success-story .story-bottom-art::before{content:"";position:absolute;left:0;width:100%;height:calc(90 * var(--mobile-unit));pointer-events:none;background:radial-gradient(circle,#f5243b 0 calc(2.8 * var(--mobile-unit)),transparent calc(3.2 * var(--mobile-unit))) center/calc(10 * var(--mobile-unit)) calc(10 * var(--mobile-unit)) repeat;mask-image:radial-gradient(ellipse 70% 100% at 50% 0,#000 0 60%,transparent 100%)}
.nile-lp #s09-four-skills::before{top:0;z-index:1}
.nile-lp #s09-four-skills::after{bottom:0;height:calc(60 * var(--mobile-unit));transform:rotate(180deg);z-index:1}
/* Move the whole book collage together and pin it to the section, not the viewport. */
.nile-lp #s10-mock-test .mock-bottom-art{display:block;position:absolute;left:0;bottom:calc(-15 * var(--mobile-unit));width:100%;height:calc(330 * var(--mobile-unit));--mBot:795}
.nile-lp #s10-mock-test .mock-bottom-art>.el{animation:none;translate:none}
.nile-lp #s10-mock-test .el:has(>img[src$="p10-book.webp"]){left:5%;top:auto;bottom:0;width:90%;height:auto;aspect-ratio:1315/1209}
.nile-lp #s10-mock-test .el:has(>img[src$="p10-star.webp"]):nth-of-type(4){left:12%;top:calc(75 * var(--mobile-unit))}
.nile-lp #s10-mock-test .el:has(>img[src$="p10-star.webp"]):nth-of-type(5){left:75%;top:calc(220 * var(--mobile-unit))}
/* Teacher: one flowing heading/checklist stack, separate portrait beneath it. */
.nile-lp #s11-teacher>.stage{padding:calc(24 * var(--mobile-unit)) calc(26 * var(--mobile-unit)) 0}
.nile-lp #s11-teacher h2.contents{display:flex;position:relative;flex-direction:column;gap:calc(10 * var(--mobile-unit))}
.nile-lp #s11-teacher h2.contents>span{position:relative;left:auto;top:auto;width:100%;text-align:center!important;line-height:1.15;white-space:normal!important;font-size:calc(27 * var(--mobile-unit))}
.nile-lp #s11-teacher h2.contents>span:nth-child(1){font-family:'Prompt',sans-serif;letter-spacing:0}
.nile-lp #s11-teacher h2.contents>span:nth-child(2){font-size:calc(38 * var(--mobile-unit))}
.nile-lp #s11-teacher .checks[data-m~=flow]{margin:calc(24 * var(--mobile-unit)) 0 0;font-size:calc(12 * var(--mobile-unit));line-height:1.55}
.nile-lp #s11-teacher .checks li{padding-left:1.3em;text-indent:-1.3em}
.nile-lp #s11-teacher> .stage>img.el{left:7%;top:auto;width:86%;height:auto;bottom:0}
/* Success Story: responsive carousel, with all decorative elements in one bottom group. */
.nile-lp #s12-success-story>.stage{padding:0}
.nile-lp #s12-success-story>.stage>.fx-float{display:none}
.nile-lp #s12-success-story>.stage>h2{position:absolute;left:8%;top:calc(64 * var(--mobile-unit));width:84%;margin:0;font-size:calc(36 * var(--mobile-unit));line-height:1.08;z-index:3}
.nile-lp #s12-success-story .stories-wrap{position:absolute;left:0;top:calc(174 * var(--mobile-unit));width:100%;z-index:4}
.nile-lp #s12-success-story .stories{display:flex;justify-content:flex-start;gap:calc(80 * var(--mobile-unit));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:calc(6 * var(--mobile-unit)) 12% calc(10 * var(--mobile-unit))}
.nile-lp #s12-success-story .stories::-webkit-scrollbar{display:none}
.nile-lp #s12-success-story .stories figure{display:block;position:relative;flex:0 0 calc(274 * var(--mobile-unit));width:calc(274 * var(--mobile-unit));aspect-ratio:681/852;margin:0;scroll-snap-align:center}
.nile-lp #s12-success-story [data-m~=story]{position:absolute;left:auto;top:auto;width:auto;height:auto;rotate:none}
.nile-lp #s12-success-story .stories figure>img:first-child{inset:0;width:100%;height:100%;object-fit:contain}
.nile-lp #s12-success-story .photo-ph{inset:9% 6% 21%}
.nile-lp #s12-success-story .stories figure>img:nth-of-type(2){left:6%;top:9%;width:88%;height:70%;object-fit:cover}
.nile-lp #s12-success-story .band-tag{right:6%;top:61%;font-size:calc(20 * var(--mobile-unit));line-height:1.4;padding:0 calc(12 * var(--mobile-unit))}
.nile-lp #s12-success-story .stories figure figcaption{left:0;bottom:5%;width:100%;text-align:center!important;font-size:calc(27 * var(--mobile-unit));line-height:1.2}
.nile-lp #s12-success-story .story-nav{display:grid;place-items:center;position:absolute;top:47%;translate:0 -50%;width:calc(44 * var(--mobile-unit));height:calc(64 * var(--mobile-unit));border:0;border-radius:0;padding:0;background:none;box-shadow:none;font-size:0;z-index:6;cursor:pointer}
.nile-lp #s12-success-story .story-nav::before{content:"";width:calc(28 * var(--mobile-unit));height:calc(28 * var(--mobile-unit));border-left:calc(5 * var(--mobile-unit)) solid white;border-bottom:calc(5 * var(--mobile-unit)) solid white;transform:rotate(45deg)}
.nile-lp #s12-success-story .story-nav.prev{left:0}
.nile-lp #s12-success-story .story-nav.next{right:0}
.nile-lp #s12-success-story .story-nav.next::before{transform:rotate(225deg)}
.nile-lp #s12-success-story .story-nav:disabled{opacity:.3;cursor:default}
.nile-lp #s12-success-story .story-bottom-art{position:absolute;left:0;bottom:calc(-23 * var(--mobile-unit));width:100%;height:calc(250 * var(--mobile-unit));z-index:5;pointer-events:none}
.nile-lp #s12-success-story .story-bottom-art::before{bottom:0;height:100%;mask-image:radial-gradient(ellipse 70% 90% at 50% 100%,#000 0 65%,transparent 100%)}
.nile-lp #s12-success-story .story-bottom-art>.el{top:auto;bottom:0;height:auto;rotate:none;animation:none;translate:none;scale:1}
.nile-lp #s12-success-story .story-bottom-art>.el>img{position:static;inset:auto;width:100%;height:auto}
.nile-lp #s12-success-story .story-medal{left:calc(22 * var(--mobile-unit));width:calc(135 * var(--mobile-unit));z-index:1}
.nile-lp #s12-success-story .story-star-bottom{left:calc(83 * var(--mobile-unit));width:calc(190 * var(--mobile-unit));z-index:3}
.nile-lp #s12-success-story .story-trophy{left:calc(188 * var(--mobile-unit));width:calc(162 * var(--mobile-unit));z-index:2}
/* Final CTA: spread real flow boxes instead of conflicting absolute pixel offsets. */
.nile-lp #s13-cta>.stage{padding:calc(50 * var(--mobile-unit)) calc(18 * var(--mobile-unit));gap:calc(16 * var(--mobile-unit))}
.nile-lp #s13-cta>.stage>.fx-flicker{width:108%}
.nile-lp #s13-cta>.stage>h2{font-size:calc(36 * var(--mobile-unit));line-height:1.3}
.nile-lp #s13-cta .cta-actions{display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--mobile-unit));width:100%;flex:none}
.nile-lp #s13-cta .mobile-button>a.btn{font-size:calc(38 * var(--mobile-unit))}
.nile-lp #s13-cta .mobile-button{width:100%}
.nile-lp #s13-cta .callback-button{width:86%;aspect-ratio:663/148}
.nile-lp #s13-cta .callback-button>a.btn{font-size:calc(19 * var(--mobile-unit));line-height:1.15}
.nile-lp #s13-cta .cta-actions>p{position:relative;left:auto;top:auto;width:100%;margin:0;font-size:calc(18 * var(--mobile-unit));line-height:1.2}
/* FAQ grows only as much as its content; accessible controls stay readable. */
.nile-lp #s14-faq-contact{aspect-ratio:auto}
.nile-lp #s14-faq-contact>.stage{position:relative;inset:auto;height:auto;padding:0;display:flex;flex-direction:column}
.nile-lp #s14-faq-contact .faq-card[data-m~=flow]{margin:0 calc(16 * var(--mobile-unit));padding:calc(20 * var(--mobile-unit))}
.nile-lp #s14-faq-contact .faq-title{font-size:calc(24 * var(--mobile-unit));line-height:1.3;margin-bottom:calc(20 * var(--mobile-unit))}
.nile-lp #s14-faq-contact .faq-item summary{min-height:44px;font-size:clamp(16px,calc(18 * var(--mobile-unit)),24px);line-height:1.4}
.nile-lp #s14-faq-contact .faq-a{font-size:16px;line-height:1.5}
.nile-lp #s14-faq-contact .contact[data-m~=flow]{margin:0;padding:calc(24 * var(--mobile-unit)) 0;gap:12px}
.nile-lp #s14-faq-contact .pill-red,.nile-lp #s14-faq-contact .pill-navy{font-size:clamp(16px,calc(20 * var(--mobile-unit)),26px);line-height:1.5;padding:4px 12px}
.nile-lp #s14-faq-contact .socials a{width:44px;height:44px;font-size:22px}
}