:root{
  --bg:#FCFAF5;
  --surface:#FFFFFF;
  --surface-soft:#F3F7F4;
  --ink:#18211F;
  --ink-soft:#68716E;
  --teal:#0F766E;
  --teal-d:#0A5C56;
  --amber:#E9A23B;
  --line:#E4E7E2;
  --line-strong:#D5DAD4;
  --shadow-sm:0 1px 2px rgba(24,33,31,.04),0 8px 24px rgba(24,33,31,.05);
  --shadow:0 20px 50px rgba(24,33,31,.09);
  --round:18px;
  --wrap:1080px;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.wrap{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;color:var(--ink);font-weight:750;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
p{margin:0}
section{position:relative;padding:88px 0}
.cream{background:#F2F5F1;border-block:1px solid var(--line)}

/* navigation */
.nav{position:sticky;top:0;z-index:40;background:rgba(252,250,245,.9);border-bottom:1px solid rgba(213,218,212,.8);backdrop-filter:blur(16px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-size:1.03rem;font-weight:760;letter-spacing:-.02em}
.logo-img{width:42px;height:42px;border:1px solid var(--line);border-radius:11px;object-fit:cover}
.logo{display:grid;width:42px;height:42px;place-items:center;border-radius:11px;background:var(--teal);color:#fff}
.nav-right{display:flex;align-items:center;gap:10px}
.login-link{padding:9px 4px;color:var(--ink-soft);font-size:.82rem;font-weight:700;text-decoration:underline;text-decoration-color:#BFCBC4;text-underline-offset:4px}
.login-link:hover{color:var(--teal)}
.nav .cta{padding:10px 16px;border-radius:9px;background:var(--ink);color:#fff;font-size:.88rem;font-weight:700;transition:background .15s,transform .15s}
.nav .cta:hover{background:var(--teal);transform:translateY(-1px)}
.langbtn{display:inline-flex;align-items:center;gap:5px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:9px;background:transparent;color:var(--ink-soft);font-size:.8rem;font-weight:700;cursor:pointer}
.langbtn:hover{background:var(--surface)}

/* hero */
.hero{overflow:hidden;padding:90px 0 78px;background:radial-gradient(circle at 85% 10%,rgba(233,162,59,.16),transparent 34%),radial-gradient(circle at 5% 80%,rgba(15,118,110,.08),transparent 28%),linear-gradient(180deg,#FCFAF5,#F8F7F2)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);gap:72px;align-items:center}
.hero-copy{position:relative;z-index:2}
.pandi-welcome{display:flex;align-items:center;gap:12px;max-width:480px;margin:0 0 20px;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.pandi-welcome-art{position:relative;display:grid;width:84px;height:84px;flex:none;place-items:center;border:1px solid #A9DBCE;border-radius:22px;background:radial-gradient(circle at 52% 34%,#fff 0 20%,#D9F6ED 65%,#BCEADD);box-shadow:0 10px 24px rgba(15,118,110,.12);overflow:hidden}
.pandi-welcome-art img{position:relative;z-index:2;width:78px;height:78px;object-fit:contain;transform:translateY(4px);filter:drop-shadow(0 6px 5px rgba(22,70,62,.18))}
.pandi-orbit{position:absolute;width:68px;height:68px;border:1px dashed rgba(15,118,110,.3);border-radius:50%;animation:pandiOrbit 9s linear infinite}
@keyframes pandiOrbit{to{transform:rotate(360deg)}}
.pandi-welcome-bubble{position:relative;display:flex;min-height:72px;flex:1;flex-direction:column;justify-content:center;padding:11px 14px 10px;border:1px solid #D2E2DC;border-radius:15px;background:rgba(255,255,255,.88);box-shadow:0 9px 22px rgba(28,62,56,.07)}
.pandi-welcome-bubble::before{content:"";position:absolute;left:-7px;top:28px;width:12px;height:12px;border-left:1px solid #D2E2DC;border-bottom:1px solid #D2E2DC;background:#fff;transform:rotate(45deg)}
.pandi-welcome-bubble b{color:var(--teal);font-size:.56rem;letter-spacing:.14em}.pandi-welcome-bubble>span{margin-top:2px;color:#344743;font-size:.78rem;font-weight:680;line-height:1.35}.pandi-welcome-bubble small{margin-top:4px;color:#82908C;font-size:.57rem;font-weight:650}
.math-float{position:absolute;z-index:0;color:rgba(15,118,110,.09);font-weight:800;line-height:1;pointer-events:none;user-select:none}
.mf-one{top:9%;right:4%;font-size:8rem;transform:rotate(12deg)}
.mf-two{right:43%;bottom:4%;font-size:5.5rem;transform:rotate(-9deg)}
.mf-three{top:20%;left:2%;font-size:4rem;transform:rotate(-12deg)}
.kicker,.section-label{display:inline-block;color:var(--teal);font-size:.73rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.kicker{padding:7px 10px;border:1px solid #BCD8D3;border-radius:7px;background:#F0F8F5}
.hero h1{max-width:700px;margin-top:20px;font-size:clamp(2.8rem,5.8vw,4.7rem);font-weight:760;letter-spacing:-.055em}
.hero h1 em{color:var(--teal);font-style:normal}
.hero .sub{max-width:570px;margin-top:24px;color:var(--ink-soft);font-size:1.1rem;line-height:1.7}
.hero .sub b{color:var(--ink);font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trustrow{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:25px;color:var(--ink-soft);font-size:.83rem;font-weight:600}
.microproof{display:flex;align-items:center;gap:8px;margin-top:15px;color:var(--ink-soft);font-size:.83rem}
.proof-dot{width:7px;height:7px;border-radius:50%;background:#4F9C71;box-shadow:0 0 0 4px #E5F2E9}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 21px;border:1px solid transparent;border-radius:10px;font-family:inherit;font-size:.95rem;font-weight:720;line-height:1.2;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,.langbtn:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(15,118,110,.2);outline-offset:2px}
.btn-primary,.btn-pay{background:var(--teal);color:#fff;box-shadow:0 8px 18px rgba(15,118,110,.16)}
.btn-primary:hover,.btn-pay:hover{background:var(--teal-d)}
.btn-outline{border-color:var(--line-strong);background:transparent;color:var(--ink)}
.btn-outline:hover{border-color:#9EA7A2;background:var(--surface)}
.btn-accent{background:var(--amber);color:#2D2417}

/* interactive product demo */
.demo-card{position:relative;width:100%;padding:25px;border:1px solid #C9D7D1;border-radius:22px;background:linear-gradient(180deg,#fff,#FCFDFB);box-shadow:0 30px 80px rgba(24,33,31,.14),0 0 0 10px rgba(255,255,255,.38);overflow:hidden}
.demo-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--teal)}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px 0 23px}
.demo-live{padding:5px 8px;border-radius:6px;background:#EAF5F2;color:var(--teal-d);font-size:.64rem;font-weight:800;letter-spacing:.09em}
.demo-topic{color:var(--ink-soft);font-size:.8rem;font-weight:650}
.demo-coach{display:flex;align-items:center;gap:10px;margin:-6px 0 14px;padding:7px 11px 7px 7px;border:1px solid #D5E7E1;border-radius:15px;background:linear-gradient(115deg,#E5F7F1,#F7FCFA)}
.demo-coach-art{display:grid;width:66px;height:59px;flex:none;place-items:end center;overflow:hidden;border-radius:11px;background:radial-gradient(circle at 50% 70%,rgba(73,195,162,.2),transparent 65%)}
.demo-coach-art img{width:65px;height:65px;object-fit:contain;transform:translateY(7px);filter:drop-shadow(0 4px 4px rgba(18,67,59,.16))}
.demo-coach-talk{position:relative;color:#27544D;font-size:.72rem;font-weight:720;line-height:1.4}
.pandi-pop{animation:pandiPop .5s cubic-bezier(.22,1.5,.45,1)}
@keyframes pandiPop{45%{transform:translateY(-5px) rotate(4deg) scale(1.08)}}
.demo-hud{display:flex;align-items:center;justify-content:center;gap:7px;margin:-9px 0 19px}
.demo-hud span{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#F7F8F5;color:var(--ink-soft);font-size:.69rem;font-weight:650}
.demo-hud b{color:var(--ink)}
.demo-hud .demo-hearts{color:#C64B55;letter-spacing:1px}
.demo-try{margin-bottom:8px;color:var(--ink-soft);font-size:.84rem;text-align:center}
.demo-q{display:grid;min-height:90px;place-items:center;margin:4px 0 16px;color:var(--ink);font-size:clamp(2rem,6vw,2.8rem);font-weight:760;text-align:center;word-break:break-word}
.demo-answer{display:flex;gap:9px}
.demo-answer input{min-width:0;flex:1;padding:13px;border:1px solid var(--line-strong);border-radius:9px;background:#FAFAF8;color:var(--ink);font-size:1.05rem;font-weight:650;text-align:center}
.demo-answer input:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(15,118,110,.1)}
.demo-answer .btn{flex:none;padding:13px 18px}
.demo-fb{min-height:25px;margin-top:11px;font-size:.95rem;font-weight:700;text-align:center}
.demo-fb.ok{color:var(--teal)}
.demo-fb.no{color:#B8433A}
.demo-progress{margin-top:3px;color:var(--amber);font-size:1rem;letter-spacing:5px;text-align:center}
.demo-upsell{margin-top:17px;padding:18px;border-radius:12px;background:#F6F2E8;text-align:center}
.demo-upsell p{margin:6px 0 13px;color:var(--ink-soft);font-size:.86rem}
.demo-upsell .btn{width:100%}

/* Pandi character world */
.pandi-world{overflow:hidden;padding:56px 0;background:linear-gradient(125deg,#083F3B,#0E746A 58%,#149A83);color:#fff}
.pandi-world::before,.pandi-world::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:50%}.pandi-world::before{width:410px;height:410px;left:-250px;top:-245px}.pandi-world::after{width:300px;height:300px;right:-140px;bottom:-210px;border-width:35px}
.pandi-world-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr);gap:42px;align-items:center}
.pandi-world-lead{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:25px}.pandi-world-art{position:relative;display:grid;height:190px;place-items:center}.pandi-world-art .pandi-rays{position:absolute;width:165px;height:165px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.12) 0 8deg,transparent 8deg 22deg);animation:pandiOrbit 20s linear infinite}.pandi-world-art img{position:relative;z-index:2;width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 13px 9px rgba(0,0,0,.26))}
.pandi-world-copy .section-label{color:#91E9D2}.pandi-world-copy h2{margin-top:9px;color:#fff;font-size:clamp(1.7rem,3vw,2.55rem)}.pandi-world-copy p{margin-top:13px;color:#D0ECE7;font-size:.9rem;line-height:1.65}
.animal-parade{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;perspective:800px}.animal-token{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;padding:8px 5px 7px;overflow:hidden;border:1px solid rgba(255,255,255,.24);border-radius:15px;background:rgba(255,255,255,.1);box-shadow:inset 0 1px rgba(255,255,255,.18),0 12px 24px rgba(0,0,0,.12);backdrop-filter:blur(8px);transition:transform .2s,background .2s}.animal-token:nth-child(odd){transform:translateY(-8px) rotateY(3deg)}.animal-token:nth-child(even){transform:translateY(8px) rotateY(-3deg)}.animal-token:hover{z-index:2;transform:translateY(-9px) scale(1.08);background:rgba(255,255,255,.18)}.animal-token img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 7px 5px rgba(0,0,0,.25))}.animal-token span{margin-top:-3px;color:#E6F9F4;font-size:.55rem;font-weight:800}.animal-mystery img{filter:brightness(.35) saturate(.4) opacity(.72) drop-shadow(0 7px 5px rgba(0,0,0,.25))}.animal-mystery::after{content:"?";position:absolute;top:26px;left:50%;transform:translateX(-50%);color:#fff;font-size:1.65rem;font-weight:850;text-shadow:0 2px 5px #063E39}

/* proof strip */
.proofband{padding:0;background:var(--ink);color:#fff}
.proofgrid{display:grid;grid-template-columns:repeat(5,1fr);padding-block:23px}
.proofgrid div{padding:2px 19px;border-right:1px solid rgba(255,255,255,.14);text-align:center}
.proofgrid div:last-child{border-right:0}
.proofgrid b{display:block;color:#F1C46B;font-size:1.22rem;line-height:1.1;letter-spacing:-.03em}
.proofgrid span{display:block;margin-top:5px;color:#C9D2CF;font-size:.67rem;font-weight:650;line-height:1.25}

/* section hierarchy */
.sec-head{max-width:660px;margin:0 auto 42px;text-align:center}
.sec-head .section-label{margin-bottom:14px}
.sec-head h2{font-size:clamp(2rem,4vw,3.05rem);letter-spacing:-.045em}
.sec-head p{margin-top:16px;color:var(--ink-soft);font-size:1rem;line-height:1.7}
.note-center{max-width:640px;margin:25px auto 0;color:var(--ink-soft);font-size:.89rem;text-align:center}

/* Pandi guides every landing section */
.section-with-pandi>.wrap{isolation:isolate}
.section-pandi{position:absolute;z-index:4;top:-62px;display:flex;width:150px;flex-direction:column;align-items:center;pointer-events:none;filter:drop-shadow(0 9px 10px rgba(21,66,58,.12))}
.section-pandi img{position:relative;z-index:2;width:98px;height:98px;object-fit:contain;animation:pandiGuideFloat 4.2s ease-in-out infinite}
.section-pandi span{position:relative;z-index:3;max-width:145px;margin-top:-9px;padding:5px 9px;border:1px solid #CFE2DB;border-radius:99px;background:rgba(255,255,255,.94);color:#23645A;font-size:.57rem;font-weight:780;line-height:1.25;text-align:center;white-space:normal;box-shadow:0 5px 13px rgba(25,67,60,.08);backdrop-filter:blur(7px)}
.pandi-guide-right{right:-104px}.pandi-guide-left{left:-104px}.section-pandi:nth-child(even) img{animation-delay:-1.6s}
.pandi-guide-dark span{border-color:rgba(255,255,255,.35);background:rgba(4,52,48,.82);color:#D6F6EE}.pandi-guide-dark img{filter:drop-shadow(0 9px 7px rgba(0,0,0,.24))}
.price-pandi{top:-55px}.price-pandi img{width:108px;height:108px}
@keyframes pandiGuideFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(2deg)}}
.proof-pandi{position:absolute;z-index:3;right:max(10px,calc(50% - 610px));top:-49px;width:68px;height:68px;overflow:hidden;pointer-events:none}.proof-pandi img{width:68px;height:68px;object-fit:contain;transform:translateY(8px);filter:drop-shadow(0 5px 4px rgba(0,0,0,.28))}

/* benefit cards */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-card{padding:29px;border:1px solid var(--line);border-radius:var(--round);background:var(--surface)}
.why-emoji{display:grid;width:39px;height:39px;place-items:center;margin-bottom:23px;border-radius:9px;background:#EAF5F2;color:var(--teal);font-size:.71rem;font-weight:800;letter-spacing:.05em}
.why-card h3{font-size:1.16rem;letter-spacing:-.025em}
.why-card p{margin-top:10px;color:var(--ink-soft);font-size:.91rem;line-height:1.65}

/* product experience */
.experience{overflow:hidden;background:#0B4D48;color:#fff}
.experience::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-210px;border-radius:50%;background:rgba(233,162,59,.13)}
.experience-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);gap:80px;align-items:center}
.experience .section-label{color:#A8D9D1}
.experience h2{margin-top:14px;color:#fff;font-size:clamp(2.25rem,4.6vw,3.7rem)}
.experience-copy>p{max-width:520px;margin-top:20px;color:#CCE1DD;font-size:.98rem;line-height:1.7}
.experience-list{display:grid;gap:12px;margin:27px 0 0;padding:0;list-style:none}
.experience-list li{display:flex;align-items:center;gap:11px;color:#EAF4F2;font-size:.88rem}
.experience-list li span{display:grid;width:24px;height:24px;flex:none;place-items:center;border-radius:50%;background:#F1C46B;color:#4B370C;font-size:.69rem;font-weight:900}
.app-preview{position:relative;min-height:520px;padding:32px 52px 50px 0}
.preview-shell{width:min(100%,430px);margin-left:auto;padding:18px;border:1px solid rgba(255,255,255,.5);border-radius:24px;background:#FCFAF5;color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.25);transform:rotate(1.5deg)}
.preview-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:.72rem;font-weight:750}
.preview-nav span{display:flex;align-items:center;gap:7px}.preview-nav img{width:27px;height:27px;border-radius:7px}
.preview-label{margin:18px 0 9px;color:var(--teal);font-size:.59rem;font-weight:850;letter-spacing:.12em}
.preview-pandi{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 9px 5px 5px;border:1px solid #CEE4DD;border-radius:11px;background:#E9F7F2}.preview-pandi img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(15,90,77,.14))}.preview-pandi>span{display:flex;flex-direction:column}.preview-pandi b{color:#155F55;font-size:.7rem}.preview-pandi small{margin-top:2px;color:#65807A;font-size:.53rem}
.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.preview-stats span{padding:9px 4px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink-soft);font-size:.57rem;font-weight:650;text-align:center}
.preview-stats b{display:block;color:var(--ink);font-size:1rem;line-height:1.15}
.preview-mission{display:flex;align-items:center;gap:10px;margin-top:11px;padding:12px;border-radius:11px;background:var(--teal);color:#fff}
.preview-mission>span:first-child{font-size:1.35rem}.preview-mission>span:nth-child(2){display:flex;flex:1;flex-direction:column}.preview-mission b{font-size:.75rem}.preview-mission small{color:#CDE7E2;font-size:.56rem}.preview-mission i{padding:5px 7px;border-radius:6px;background:#F1C46B;color:#4B370C;font-size:.58rem;font-style:normal;font-weight:800}
.preview-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:11px}
.preview-topics span{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:9px;background:#fff;font-size:.7rem;font-weight:750}.preview-topics b{font-size:1rem;color:var(--teal)}
.parent-preview{position:absolute;right:0;bottom:5px;width:310px;padding:17px;border:1px solid #E4C981;border-radius:15px;background:#FFF8E5;color:var(--ink);box-shadow:0 24px 55px rgba(0,0,0,.23);transform:rotate(-2deg)}
.parent-preview>div{display:flex;flex-direction:column}.parent-preview>div span{color:#8A6413;font-size:.52rem;font-weight:850;letter-spacing:.1em}.parent-preview>div b{margin-top:4px;font-size:.82rem}.parent-preview>strong{position:absolute;top:15px;right:17px;color:var(--teal);font-size:1.25rem;line-height:1}.parent-preview>strong small{display:block;margin-top:4px;color:var(--ink-soft);font-size:.48rem;font-weight:650}
.parent-preview p{display:grid;grid-template-columns:48px 1fr 28px;gap:7px;align-items:center;margin-top:13px;font-size:.54rem;font-weight:700}.parent-preview p i{height:6px;overflow:hidden;border-radius:99px;background:#E4E7E2}.parent-preview p i b{display:block;height:100%;border-radius:99px;background:var(--teal)}.parent-preview p em{font-style:normal;text-align:right}

/* curriculum */
.topicchips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:850px;margin:0 auto}
.tchip{padding:16px 17px;border:1px solid var(--line);border-left:3px solid var(--c,var(--teal));border-radius:9px;background:var(--surface);color:var(--ink);font-size:.87rem;font-weight:680}

/* resource library */
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:850px;margin:0 auto}
.lib-card{display:grid;grid-template-columns:auto 1fr;gap:0 15px;align-items:center;padding:19px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:left}
.lib-n{grid-row:1 / 3;color:var(--teal);font-size:1.42rem;font-weight:770;letter-spacing:-.04em}
.lib-card b{font-size:.88rem;letter-spacing:-.015em}
.lib-card span:last-child{color:var(--ink-soft);font-size:.75rem}

/* three steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:900px;margin:0 auto}
.step{position:relative;padding-top:25px;border-top:1px solid var(--line-strong)}
.step-n{position:absolute;top:-16px;left:0;display:grid;width:32px;height:32px;place-items:center;border:1px solid #BCD8D3;border-radius:50%;background:#F2F5F1;color:var(--teal);font-size:.78rem;font-weight:800}
.step h3{margin-top:13px;font-size:1.08rem}
.step p{margin-top:9px;color:var(--ink-soft);font-size:.88rem;line-height:1.65}

/* comparison retained for supporting pages */
.compare{max-width:620px;margin:0 auto 28px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:.95fr 1fr 1fr;border-top:1px solid var(--line)}
.cmp-row:first-child{border-top:0}
.cmp-row>*{min-width:0;padding:12px 10px;font-size:.8rem;word-wrap:break-word}
.cmp-row span{color:var(--ink-soft)}
.cmp-row b{text-align:center}
.cmp-head{background:#F6F6F2}
.cmp-row .us{background:#F0F7F4;color:var(--teal-d)}

/* testimonials */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tst{display:flex;min-height:275px;flex-direction:column;padding:26px;border:1px solid var(--line);border-radius:var(--round);background:var(--surface)}
.tst .stars{margin-bottom:16px;color:#D48B22;font-size:.87rem;letter-spacing:3px}
.tst p{color:#3D4744;font-size:.92rem;line-height:1.7}
.tst .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:22px}
.pfp{display:grid;width:38px;height:38px;flex:none;place-items:center;border-radius:50%;color:#fff;font-size:.72rem;font-weight:750}
.tst .who b{display:block;font-size:.83rem;line-height:1.2}
.who-loc{display:block;margin-top:4px;color:var(--ink-soft);font-size:.7rem;line-height:1.3}
.tst-note{margin-top:17px;color:var(--ink-soft);font-size:.73rem;text-align:center}

/* pricing */
.price-wrap{max-width:760px}
.price-wrap>.sec-head{margin-bottom:27px}.price-heading .section-label{margin-bottom:12px}.price-heading h2{max-width:680px;margin:0 auto}
.price-compare{display:flex;align-items:center;justify-content:center;gap:12px;margin:23px auto 0}.price-compare>span{display:flex;min-width:145px;flex-direction:column;padding:9px 14px;border:1px solid #A8DACE;border-radius:13px;background:#E8F7F2;color:#0B6158;box-shadow:0 7px 17px rgba(15,118,110,.07)}.price-compare b{font-size:1.05rem;line-height:1.1}.price-compare small{margin-top:3px;font-size:.61rem;font-weight:700}.price-compare i{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#18302C;color:#fff;font-size:.54rem;font-style:normal;font-weight:850}.price-compare .tuition{border-color:#E6CEC8;background:#FFF2EE;color:#9A3C2F}
.price{position:relative;padding:0 36px 30px;overflow:hidden;border:1px solid #AFCBC3;border-radius:28px;background:linear-gradient(180deg,#fff,#FBFDFC);box-shadow:0 28px 70px -30px rgba(16,63,56,.42),0 1px 2px rgba(17,53,47,.04)}
.price::before{content:"";position:absolute;z-index:0;inset:0 0 auto;height:205px;background:radial-gradient(circle at 18% 20%,rgba(249,204,98,.3),transparent 30%),linear-gradient(125deg,#073F3B,#0E756A 64%,#18A187)}
.offer-head{position:relative;z-index:1;display:grid;grid-template-columns:190px 1fr;align-items:center;gap:14px;min-height:205px;color:#fff;text-align:left}
.offer-visual{position:relative;display:grid;height:190px;place-items:center;overflow:visible}.offer-halo{position:absolute;width:145px;height:145px;border:1px solid rgba(255,255,255,.26);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);box-shadow:0 0 0 18px rgba(255,255,255,.04)}.price-pandi-main{position:relative;z-index:2;width:165px;height:165px;object-fit:contain;transform:translateY(8px);filter:drop-shadow(0 12px 8px rgba(0,0,0,.28))}.offer-pet{position:absolute;z-index:3;width:49px;height:49px;object-fit:contain;filter:drop-shadow(0 5px 4px rgba(0,0,0,.25))}.pet-cat{left:5px;bottom:10px;transform:rotate(-7deg)}.pet-turtle{right:3px;bottom:17px;transform:rotate(6deg)}
.ribbon{display:inline-block;padding:5px 8px;border:1px solid rgba(255,255,255,.32);border-radius:7px;background:rgba(255,255,255,.13);color:#C7F7EA;font-size:.6rem;font-weight:850;letter-spacing:.1em;backdrop-filter:blur(6px)}
.offer-copy h3{margin-top:10px;color:#fff;font-size:1.45rem}.offer-copy p{margin-top:6px;color:#D3EDE8;font-size:.78rem;line-height:1.5}.access-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}.access-pills span{padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.12);color:#E7F7F4;font-size:.54rem;font-weight:730}
.deal-block{position:relative;z-index:2;margin:18px 0 0;padding:22px 18px 18px;border:1px solid #DBE8E3;border-radius:19px;background:linear-gradient(145deg,#F6FCFA,#EFF8F5);text-align:center}.deal-label{display:inline-block;color:#4D736B;font-size:.56rem;font-weight:850;letter-spacing:.13em}.price-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}.amt{color:var(--teal);font-size:4.8rem;font-weight:800;line-height:.86;letter-spacing:-.07em}.amt small{font-size:1.08rem;vertical-align:super;letter-spacing:0}.was{display:flex;max-width:210px;flex-direction:column;color:var(--ink-soft);font-size:.76rem;line-height:1.4;text-align:left}.was strong{color:#183B35;font-size:1rem}.was span{margin-top:4px}.year-value{margin:16px 0 0;padding-top:13px;border-top:1px solid #D5E7E1;color:#5E736E;font-size:.66rem;font-weight:680}
.offer-highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.offer-highlights span{display:flex;min-width:0;min-height:66px;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border:1px solid #DCE7E3;border-radius:13px;background:#fff;text-align:center}.offer-highlights b{color:#0A6B60;font-size:1.08rem;line-height:1}.offer-highlights small{margin-top:5px;color:#6C7B77;font-size:.51rem;font-weight:700;line-height:1.2}
.purchase-box{margin-top:16px;padding:17px;border:1px solid #E2D19E;border-radius:19px;background:linear-gradient(150deg,#FFFCF4,#FFF8E7);box-shadow:0 13px 28px -24px rgba(99,67,8,.5)}.purchase-title{display:flex;align-items:center;gap:9px;text-align:left}.purchase-title>span{display:grid;width:34px;height:34px;flex:none;place-items:center;border-radius:10px;background:#FFF0BC;color:#815D08;font-size:.9rem}.purchase-title>div{display:flex;flex-direction:column}.purchase-title b{font-size:.8rem}.purchase-title small{margin-top:2px;color:#7B766A;font-size:.64rem}.paystack{display:flex;flex-direction:column;gap:9px;margin-top:13px}.paystack label{color:#514C42;font-size:.61rem;font-weight:750;text-align:left}.paystack input{width:100%;padding:14px 16px;border:1px solid #D9D4C7;border-radius:11px;background:#fff;color:var(--ink);font-weight:650;text-align:left}
.paystack input::placeholder{color:#8B928F}
.paystack input:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(15,118,110,.1)}
.btn-big{width:100%;padding:13px 14px 13px 17px;font-size:1rem}.purchase-box .btn-pay{display:flex;justify-content:space-between;border:0;border-bottom:4px solid #9A6511;border-radius:13px;background:linear-gradient(180deg,#F4C657,#E6A92E);color:#352507;box-shadow:0 11px 24px rgba(194,133,19,.26)}.purchase-box .btn-pay:hover{background:linear-gradient(180deg,#F7D06C,#E8B23B)}.purchase-box .btn-pay>span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}.purchase-box .btn-pay b{font-size:.91rem}.purchase-box .btn-pay small{font-size:.52rem;font-weight:650;opacity:.76}.purchase-box .btn-pay i{display:grid;width:31px;height:31px;flex:none;place-items:center;border-radius:9px;background:rgba(255,255,255,.35);font-style:normal}.instant-access{display:flex;align-items:center;gap:8px;margin-top:11px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.66);text-align:left}.instant-access>span:first-child{font-size:1rem}.instant-access>span:last-child{display:flex;flex-direction:column}.instant-access b{color:#3F554F;font-size:.62rem}.instant-access small{margin-top:2px;color:#7A807C;font-size:.54rem}
.paybox-msg{margin-top:10px;padding:10px 12px;border-radius:8px;background:#FBE9E6;color:#9F352D;font-size:.82rem;font-weight:650;text-align:center}
.payment-trust{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:13px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#FAFAF8}
.secure-top{display:flex;align-items:center;gap:8px}
.secure-icon{display:grid;width:23px;height:23px;place-items:center;border-radius:50%;background:var(--teal);color:#fff;font-size:.72rem;font-weight:800}
.secure-copy{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.secure-copy b{font-size:.75rem}
.secure-copy small{margin-top:3px;color:var(--ink-soft);font-size:.65rem}
.secure-logos{display:flex;align-items:center;gap:12px}
.toyyibpay-logo{width:auto;height:17px}
.payment-methods{display:flex;align-items:center;gap:9px}
.payment-methods .pm-logo{width:auto;height:19px}
.help-row{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:13px;color:var(--ink-soft);font-size:.7rem}
.help-row a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;margin:20px 0 0;padding:18px 4px 0;border-top:1px solid var(--line);list-style:none;text-align:left}.feats li{color:#48514E;font-size:.72rem;font-weight:630}
.pandi-promise{display:flex;align-items:center;justify-content:center;gap:9px;margin:18px -4px -5px;padding:9px 13px;border-radius:14px;background:#ECF7F3;text-align:left}.pandi-promise img{width:51px;height:51px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(16,83,72,.13))}.pandi-promise p{display:flex;flex-direction:column}.pandi-promise b{color:#175C53;font-size:.67rem}.pandi-promise span{margin-top:2px;color:#71807B;font-size:.56rem}

/* FAQ */
.faq-wrap{max-width:760px}
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 2px;list-style:none;font-size:.94rem;font-weight:690;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq .a{padding:0 30px 20px 2px;color:var(--ink-soft);font-size:.89rem;line-height:1.7}
.chev{width:8px;height:8px;flex:none;border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);transform:rotate(45deg);transition:transform .15s}
.faq details[open] .chev{transform:rotate(225deg)}

/* compatibility: affiliate and payment-return pages */
.aff-teaser{display:flex;align-items:center;justify-content:space-between;gap:25px;max-width:860px;margin:0 auto;padding:30px;border-radius:18px;background:var(--teal-d);color:#fff}
.aff-teaser h3{color:#fff;font-size:1.35rem}
.aff-teaser p{max-width:580px;margin-top:8px;color:#D4E9E6;font-size:.9rem}
.payreturn{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:22px;background:rgba(24,33,31,.66);backdrop-filter:blur(5px)}
.payreturn-card{width:100%;max-width:420px;padding:34px 28px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);text-align:center}
.pr-emoji{font-size:2.7rem}
.payreturn-card h2{margin:12px 0 8px;font-size:1.5rem}
.payreturn-card p{margin-bottom:18px;color:var(--ink-soft);font-size:.9rem}
.payreturn-card .btn{width:100%}
.pr-small{margin:14px 0 0!important;font-size:.78rem!important}
.pr-small a{color:var(--teal);font-weight:700;text-decoration:underline}

/* mobile purchase bar and footer */
.sticky{position:fixed;right:0;bottom:0;left:0;z-index:50;display:none;padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:rgba(252,250,245,.96);backdrop-filter:blur(12px);transition:opacity .22s,transform .22s}
.sticky.is-context-hidden{opacity:0;transform:translateY(110%);pointer-events:none}
.sticky .btn{width:100%;flex-direction:column;gap:1px;padding:12px 18px}
.sticky .btn small{font-size:.64rem;font-weight:500;opacity:.8}
footer{padding:32px 0 40px;color:var(--ink-soft);font-size:.8rem;text-align:center}
footer .wrap{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.footer-links{display:flex;gap:13px}.footer-links a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-copy{max-width:720px}
  .demo-card{max-width:620px;margin:0 auto}
  .experience-grid{grid-template-columns:1fr;gap:42px}
  .experience-copy{max-width:700px}
  .app-preview{width:min(100%,620px);margin:0 auto}
  .why-grid,.tst-grid{grid-template-columns:1fr}
  .tst{min-height:0}
  .topicchips{grid-template-columns:repeat(2,1fr)}
  .pandi-world-grid{grid-template-columns:1fr;gap:28px}.animal-parade{max-width:560px;margin:0 auto}
  .section-pandi{top:-48px;width:96px}.section-pandi img{width:78px;height:78px}.section-pandi span{max-width:100px;font-size:.49rem}.pandi-guide-right{right:0}.pandi-guide-left{left:0}
}

@media(max-width:640px){
  .wrap{padding:0 18px}
  section{padding:64px 0}
  .nav .wrap{height:62px}
  .logo-img,.logo{width:38px;height:38px}
  .nav .cta{display:none}
  .nav-right{gap:7px}
  .login-link{font-size:.76rem}
  .hero{padding:58px 0 52px}
  .hero-grid{gap:38px}
  .hero h1{font-size:clamp(2.35rem,11.5vw,3.25rem)}
  .hero .sub{font-size:1rem}
  .cta-row .btn{width:100%}
  .trustrow{gap:7px 14px}
  .demo-card{padding:21px 17px;border-radius:17px}
  .demo-top{align-items:flex-start;margin-bottom:19px}
  .demo-hud{margin-top:-6px}
  .demo-answer{flex-direction:column}
  .demo-answer .btn{width:100%}
  .pandi-welcome{gap:9px;margin-bottom:17px}.pandi-welcome-art{width:70px;height:70px;border-radius:18px}.pandi-welcome-art img{width:66px;height:66px}.pandi-welcome-bubble{min-height:66px;padding:9px 11px}.pandi-welcome-bubble>span{font-size:.68rem}.pandi-welcome-bubble small{display:none}
  .pandi-world{padding:49px 0}.pandi-world-lead{grid-template-columns:120px 1fr;gap:13px}.pandi-world-art{height:130px}.pandi-world-art .pandi-rays{width:115px;height:115px}.pandi-world-art img{width:130px;height:130px}.pandi-world-copy h2{font-size:1.55rem}.pandi-world-copy p{font-size:.76rem}.animal-parade{gap:5px}.animal-token{padding:5px 2px}.animal-token img{width:72px;height:72px}
  .sec-head{margin-bottom:32px;text-align:left}
  .sec-head h2{font-size:2.1rem}
  .proofgrid{grid-template-columns:repeat(3,1fr);padding-block:10px}
  .proofgrid div{padding:13px 7px;border-right:0;border-bottom:1px solid rgba(255,255,255,.11)}
  .proofgrid div:nth-last-child(-n+2){border-bottom:0}
  .experience-grid{gap:30px}
  .experience h2{font-size:2.25rem}
  .app-preview{min-height:440px;padding:10px 18px 46px 0}
  .preview-shell{padding:14px;border-radius:18px}
  .parent-preview{width:260px;padding:14px}
  .why-card{padding:24px}
  .topicchips{grid-template-columns:1fr 1fr}
  .tchip{padding:13px 12px;font-size:.78rem}
  .lib-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:43px}
  .price{padding:0 14px 20px;border-radius:22px}
  .price::before{height:190px}
  .price-compare{gap:7px}.price-compare>span{min-width:0;flex:1;padding:8px 7px}.price-compare i{width:27px;height:27px;flex:none}
  .offer-head{grid-template-columns:118px minmax(0,1fr);min-height:190px;gap:5px}
  .offer-visual{height:176px}.offer-halo{width:103px;height:103px}.price-pandi-main{width:128px;height:128px}.offer-pet{width:38px;height:38px}.pet-cat{left:-3px;bottom:16px}.pet-turtle{right:-2px;bottom:21px}
  .offer-copy h3{font-size:1.06rem}.offer-copy p{font-size:.65rem}.access-pills{gap:4px;margin-top:9px}.access-pills span{padding:3px 5px;font-size:.46rem}
  .deal-block{margin-top:13px;padding:18px 10px 14px}.amt{font-size:4.1rem}.was{max-width:155px;font-size:.66rem}.was strong{font-size:.86rem}.year-value{font-size:.58rem}
  .offer-highlights{gap:5px}.offer-highlights span{min-height:61px;padding:7px 2px}.offer-highlights b{font-size:.96rem}.offer-highlights small{font-size:.46rem}
  .purchase-box{padding:14px 12px}.purchase-box .btn-pay b{font-size:.82rem}.purchase-box .btn-pay small{font-size:.47rem}
  .price-row{gap:13px}
  .amt{font-size:3.75rem}
  .payment-trust{flex-direction:column;gap:9px}
  .feats{grid-template-columns:1fr;gap:9px}
  .sticky{display:block}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  #harga{scroll-margin-top:54px}
  .aff-teaser{align-items:flex-start;flex-direction:column}
  .section-pandi{top:-72px;right:3px!important;left:auto!important;width:58px;opacity:.95}.section-pandi img,.price-pandi img{width:56px;height:56px}.section-pandi span{display:none}.proof-pandi{right:9px;top:-39px;width:51px;height:51px}.proof-pandi img{width:51px;height:51px}
}

@media(max-width:370px){
  .login-link{display:none}
  .topicchips{grid-template-columns:1fr}
  .price-row{align-items:center;flex-direction:row;gap:9px}.amt{font-size:3.7rem}.was{text-align:left}
  .pandi-world-lead{grid-template-columns:100px 1fr}.pandi-world-art img{width:110px;height:110px}.pandi-world-copy h2{font-size:1.35rem}.animal-token img{width:62px;height:62px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}