:root{
  --saffron:#e6c229; --harvest:#f17105; --cherry:#d11149; --indigo:#6610f2;
  --azure:#1a8fe3; --velvet:#3d348b; --slate:#7678ed; --amber:#f7b801;
  --tiger:#f18701; --cayenne:#f35b04;
  --bg:#ffffff; --muted:#f6f4ff; --ink:#24224a; --line:#e9e6fb;
  --radius:16px; --shadow:0 8px 24px rgba(61,52,139,.10);
}
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
  ascent-override: 98%;
  descent-override: 23%;
  line-gap-override: 0%;
  size-adjust: 101%;
}
@font-face {
  font-family: 'Fredoka Fallback';
  src: local('Arial Rounded MT Bold'), local('Arial'), local('sans-serif');
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 104%;
}
html,body{overflow-x:clip;width:100%;max-width:100%;-webkit-text-size-adjust:100%}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
main{min-width:0;max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){main{overflow-x:hidden}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Plus Jakarta Sans','Plus Jakarta Sans Fallback',ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
h1,h2,h3,h4,h5,h6,p,a,span,div,li,td,th{overflow-wrap:break-word;word-break:break-word}
img,video,canvas,svg,embed,object{max-width:100%!important;height:auto}
iframe{max-width:100%!important}
pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
h1,h2,h3,.dx-logo,.logo{font-family:'Fredoka','Fredoka Fallback','Plus Jakarta Sans',sans-serif;letter-spacing:.01em}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:99999}
.skip:focus,.skip:focus-visible{position:fixed;left:12px;top:12px;width:auto;height:auto;padding:10px 18px;background:#0b2b4c;color:#ffffff;font-weight:800;font-size:0.95rem;border-radius:10px;box-shadow:0 8px 24px rgba(11,43,76,0.3);outline:3px solid #10aeb2;outline-offset:2px;z-index:99999;text-decoration:none}
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 18px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--velvet);text-decoration:none;font-size:1.15rem}
.logo-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--amber),var(--harvest));color:#fff}
.main-nav{display:flex;gap:14px;margin-left:8px}
.main-nav a{color:var(--velvet);text-decoration:none;font-weight:600}
.main-nav a:hover{color:var(--harvest)}
.header-search{margin-left:auto;display:flex;gap:8px}
.header-search input{border:2px solid var(--line);border-radius:999px;padding:8px 14px;min-width:220px}
.header-search button{background:var(--harvest);color:#fff;border:0;border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer}
.menu-btn{display:none;margin-left:auto;background:var(--velvet);color:#fff;border:0;border-radius:12px;padding:8px 12px;min-width:44px;min-height:44px;align-self:center;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.menu-btn:focus-visible{outline:3px solid #10aeb2;outline-offset:2px}
body.mobile-menu-open{overflow:hidden !important}
html:not(.js) .mobile-nav{display:flex !important;position:static !important}
html:not(.js) .menu-btn{display:none !important}
.mobile-nav{display:none;flex-direction:column;padding:12px 16px 24px;gap:6px;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.mobile-nav a{padding:8px 12px;font-size:0.95rem}
.mobile-nav.open{display:flex}
.hero{background:linear-gradient(180deg,#fff 0%,var(--muted) 100%);border-bottom:1px solid var(--line);padding:44px 0}
.hero h1{color:var(--velvet);font-size:clamp(1.8rem,4vw,3rem);margin:.2em 0}
.hero p{max-width:60ch}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:10px 18px;border-radius:999px;font-weight:800;text-decoration:none;border:2px solid transparent;cursor:pointer;max-width:100%;box-sizing:border-box;word-break:break-word;line-height:1.35}
.btn-primary{background:var(--harvest);color:#fff}
.btn-ghost{background:#fff;border-color:var(--velvet);color:var(--velvet)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:14px;margin:16px 0;width:100%;max-width:100%;box-sizing:border-box}
@media(max-width:520px){.cards{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:10px}}
@media(max-width:340px){.cards{grid-template-columns:1fr;gap:10px}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;transition:transform .15s;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;word-break:break-word}
.card:hover{transform:translateY(-3px)}
.card h3{margin:.3em 0;color:var(--velvet);word-break:break-word}
.badge{display:inline-flex;align-items:center;font-size:.75rem;font-weight:800;background:var(--saffron);border-radius:999px;padding:3px 10px;margin-right:4px;margin-bottom:4px;max-width:100%;word-break:break-word;white-space:normal;line-height:1.25}
.badge.blue{background:#e3f2fd;color:var(--velvet)}
.badge.orange{background:#ffe8d6;color:#7a3500}
.badge.green{background:#dcfce7;color:#166534}
.badge.teal{background:#ccfbf1;color:#0f766e}
.meta{color:#5b5890;font-size:.9rem;overflow-wrap:break-word;word-break:break-word;max-width:100%}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;width:100%;max-width:100%;box-sizing:border-box}
.pdf-frame{width:100%;height:70vh;border:1px solid var(--line);border-radius:12px}
/* Locked preview overlay */
.pdf-locked-wrap{position:relative;width:100%;min-height:420px;border-radius:12px;overflow:hidden;border:1px solid #e2eef2;background:#f8fafc}
.pdf-locked-thumb{width:100%;height:420px;object-fit:cover;object-position:top;filter:blur(6px) brightness(0.6);display:block}
.pdf-locked-placeholder{height:420px;display:grid;place-items:center;font-size:5rem;background:linear-gradient(135deg,#e2eef2,#f2fafb)}
.pdf-locked-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(11,43,76,0.35)}
.pdf-locked-content{background:rgba(255,255,255,0.96);backdrop-filter:blur(12px);border-radius:20px;padding:32px 28px;text-align:center;max-width:400px;width:100%;box-shadow:0 20px 60px rgba(11,43,76,0.22)}
.pdf-locked-icon{font-size:2.4rem;display:block;margin-bottom:10px}
.pdf-locked-title{font-size:1.25rem;font-weight:900;color:#0b4b4e;margin:0 0 10px}
.pdf-locked-sub{font-size:0.88rem;color:#5b7a8a;margin:0 0 18px;line-height:1.5}
.pdf-locked-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.pdf-locked-note{font-size:0.75rem;color:#94a3b8;margin:0}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.filters select,.filters input{padding:8px 10px;border:2px solid var(--line);border-radius:10px}
.pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0}
.pager .pg-cur{border-radius:999px; min-width:36px; height:36px; display:inline-grid; place-items:center; padding:0 10px; background:#10aeb2; color:#fff; border-color:#10aeb2; pointer-events:none;}
.pager .btn{border-radius:999px;}
.alert{background:#fff7e6;border:1px solid var(--amber);border-radius:12px;padding:12px 14px}
.site-footer{margin-top:40px;background:var(--velvet);color:#fff;padding:28px 0}
.site-footer a{color:#ffe9a8;margin-right:12px}
.footer-grid{display:grid;gap:12px}
table.admin{width:100%;border-collapse:collapse}
table.admin th,table.admin td{border:1px solid var(--line);padding:8px;text-align:left}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=url],textarea,select{width:100%;max-width:100%;box-sizing:border-box;padding:10px 12px;border:2px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:inherit}
form.stack{display:grid;gap:12px;max-width:640px}
form.stack label{display:grid;gap:6px;font-weight:700}
form.stack label input,form.stack label select,form.stack label textarea{margin:0}
/* --- eye-catchy home --- */
.hero-new{background:radial-gradient(900px 400px at 15% 10%,#fff3c4 0%,transparent 60%),radial-gradient(700px 380px at 90% 20%,#e6e0ff 0%,transparent 55%),linear-gradient(180deg,#fff 0%,var(--muted) 100%);border-bottom:1px solid var(--line);padding:40px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.pill{display:inline-block;background:var(--velvet);color:#fff;font-weight:800;font-size:.875rem;border-radius:999px;padding:6px 14px}
.hero-copy h1{color:var(--velvet);font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.05;margin:.4em 0}
.lede{font-size:1.1rem;max-width:52ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.btn-lg{padding:13px 24px;font-size:1.05rem}
.hero-search{display:flex;gap:8px;margin:10px 0}
.hero-search input{flex:1;border:2px solid var(--velvet);border-radius:999px;padding:11px 16px}
.hero-search button{background:var(--velvet);color:#fff;border:0;border-radius:999px;padding:11px 20px;font-weight:800;cursor:pointer}
.trust{display:flex;gap:14px;flex-wrap:wrap;color:#4c4980;font-weight:700;font-size:.92rem}
.hero-media .slider,#heroSlider{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line);min-height:300px;height:340px}
.slide{display:none;width:100%;height:100%}.slide.active{display:block}
.slide a{display:block;width:100%;height:100%}
.slide img,.slide video{width:100%!important;height:340px!important;object-fit:cover!important;object-position:center center!important;display:block!important;background:#eee}
.cap{position:absolute;left:12px;bottom:44px;background:rgba(20,16,60,.75);color:#fff;padding:4px 12px;border-radius:999px;font-size:.875rem;z-index:3}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:4px;justify-content:center}
.dots button{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dots button::before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#cfc9f5;transition:background-color .2s, transform .2s}
.dots button.on::before{background-color:var(--harvest);transform:scale(1.2)}
.slider.placeholder{display:flex;gap:12px;padding:18px;align-items:stretch}
.ph-card{flex:1;border-radius:16px;padding:22px;color:#fff;text-align:center}
.ph-card.c1{background:linear-gradient(135deg,var(--amber),var(--harvest))}.ph-card.c2{background:linear-gradient(135deg,var(--indigo),var(--slate))}.ph-card.c3{background:linear-gradient(135deg,var(--azure),var(--velvet))}
.ph-card strong{font-size:2rem;display:block}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:26px}
.cat-cards .card{border:2px solid var(--harvest)}
.cat-1,.g-1{border:2px solid var(--harvest)}.cat-2,.g-2{border:2px solid var(--indigo)}.cat-3,.g-3{border:2px solid var(--azure)}.cat-4,.g-4{border:2px solid var(--amber)}
.how .card{background:linear-gradient(180deg,#fff,#fbf8ff)}
.faq details{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
.cta-banner{background:linear-gradient(135deg,var(--velvet),var(--indigo));color:#fff;border-radius:20px;padding:28px;margin:28px 0;text-align:center}
.cta-banner .btn-primary{background:var(--amber);color:#3a2b00}
@media(max-width:900px){
  .main-nav,.header-search{display:none}
  .menu-btn{display:flex}
  .grid-2,.hero-grid{grid-template-columns:1fr}
  .header-search.open{display:flex}
  .slide img,.slide video{height:230px}
}
/* --- gatepathshala-style chrome --- */
.topbar{background:var(--velvet);color:#fff;font-size:.875rem}
.topbar-inner{display:flex;justify-content:space-between;gap:10px;padding:7px 18px;align-items:center}
.topbar a{color:#ffe9a8;margin-left:12px;text-decoration:none;font-weight:700}
.top-cta{background:var(--amber);color:#3a2b00!important;border-radius:999px;padding:3px 12px}
.promo{background:linear-gradient(90deg,var(--cherry),var(--tiger));color:#fff}
.promo-inner{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 18px}
.promo a{color:#fff;font-weight:800}
.promo button{background:transparent;border:0;color:#fff;font-size:1rem;cursor:pointer}
.head-cta{white-space:nowrap}
.float-cta{position:fixed;right:12px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:30}
.float-cta a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--velvet);color:#fff;text-decoration:none;box-shadow:var(--shadow)}
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);background:#fff;padding:8px 0}
.ticker span{display:inline-block;padding:0 18px;font-weight:700;color:var(--velvet)}
.stats-band{background:var(--velvet);color:#fff;border-radius:20px;padding:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0;text-align:center}
.stats-band strong{font-size:1.7rem;display:block;color:var(--amber)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0}
.check{list-style:none;padding:0;margin:10px 0}
.check li{padding:6px 0 6px 28px;position:relative}
.check li::before{content:"✔";position:absolute;left:0;color:var(--harvest);font-weight:900}
.bars{display:grid;gap:10px;margin:12px 0}
.bar-row{display:grid;grid-template-columns:180px 1fr 52px;gap:10px;align-items:center}
.bar{height:12px;background:#eee9ff;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--azure),var(--indigo))}
.programs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.program{position:relative}
.pop-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--amber);font-size:.75rem;font-weight:800;border-radius:999px;padding:3px 12px;white-space:nowrap}
.finder{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.finder .result{background:var(--muted);border-radius:14px;padding:16px;min-height:120px}
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testis .stars{color:var(--amber)}
@media(max-width:820px){.stats-band{grid-template-columns:repeat(2,1fr)}.why-grid,.programs,.testis,.finder{grid-template-columns:1fr}.bar-row{grid-template-columns:120px 1fr 46px}.head-cta{display:none}}

/* ===== PRO V2 — bold & colorful, teal + orange, mixed layout ===== */
:root{--pro-teal:#00a9b5;--pro-teal-deep:#077f89;--pro-navy:#0b2b4c;--pro-ink:#10243e;--pro-orange:#ff6d00;--pro-orange2:#ff8f00;--pro-sky:#eaf7f8;--pro-line:#e2eaf0;--pro-radius:20px;--pro-shadow:0 14px 34px rgba(11,43,76,.12)}
body{color:var(--pro-ink)}
.wrap{max-width:1180px}
/* header */
.pro-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--pro-line);box-shadow:0 2px 14px rgba(11,43,76,.06)}
.pro-top{display:flex;align-items:center;gap:18px;padding:12px 18px}
.pro-logo{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--pro-navy);text-decoration:none;font-size:1.35rem;letter-spacing:-.02em;white-space:nowrap}
.pro-logo-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--pro-teal),var(--pro-navy));font-size:1.3rem;box-shadow:var(--pro-shadow)}
.pro-nav{display:flex;gap:4px}
.pro-nav a{color:var(--pro-navy);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:10px}
.pro-nav a:hover{background:var(--pro-sky);color:var(--pro-teal-deep)}
.pro-search{margin-left:auto;display:flex;background:#f1f5f9;border:1px solid var(--pro-line);border-radius:999px;overflow:hidden}
.pro-search input{border:0;background:transparent;padding:10px 16px;min-width:210px;outline:none}
.pro-search button{border:0;background:var(--pro-navy);color:#fff;padding:0 16px;cursor:pointer;font-weight:800}
.pro-cta{display:flex;align-items:center;gap:10px}
.pro-login{color:var(--pro-navy);font-weight:800;text-decoration:none;white-space:nowrap}
.btn-pro{background:linear-gradient(135deg,var(--pro-orange),var(--pro-orange2));color:#fff;border-radius:999px;padding:11px 22px;font-weight:900;text-decoration:none;border:0;display:inline-block;box-shadow:0 8px 20px rgba(255,109,0,.35);white-space:nowrap}
.btn-pro:hover{filter:brightness(1.05)}
.btn-pro-ghost{background:transparent;border:2px solid #fff;color:#fff;border-radius:999px;padding:11px 22px;font-weight:800;text-decoration:none;display:inline-block}
.btn-pro-navy{background:var(--pro-navy);color:#fff;border-radius:999px;padding:11px 22px;font-weight:800;text-decoration:none;display:inline-block}
.pro-strip{background:var(--pro-navy);color:#bfe9ec;font-size:.88rem}
.pro-strip-inner{display:flex;gap:14px;align-items:center;padding:8px 18px;overflow-x:auto}
.pro-strip a{color:#d8f4f6;text-decoration:none;font-weight:600;white-space:nowrap}
.pro-strip a:hover{color:#fff}
/* hero — FULL WIDTH */
.pro-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#0496a3 0%,#0b6b82 45%,#0b2b4c 100%);color:#fff}
.pro-hero::before,.pro-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.25}
.pro-hero::before{width:480px;height:480px;background:#ffd166;top:-160px;right:-120px}
.pro-hero::after{width:340px;height:340px;background:#ff6d00;bottom:-140px;left:-100px;opacity:.35}
.pro-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:64px 18px;max-width:1180px;margin:0 auto}
.pro-eyebrow{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:800;font-size:.875rem;border-radius:999px;padding:7px 16px}
.pro-hero h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.1;margin:.35em 0;letter-spacing:-.03em}
.pro-hero h1 em{font-style:normal;background:linear-gradient(90deg,#ffd166,#ff8f00);-webkit-background-clip:text;background-clip:text;color:transparent}
.pro-hero .lede{font-size:1.15rem;opacity:.92;max-width:52ch}
.pro-hero-search{display:flex;background:#fff;border-radius:16px;overflow:hidden;margin:16px 0;max-width:520px;box-shadow:var(--pro-shadow)}
.pro-hero-search input{flex:1;border:0;padding:15px 18px;outline:none;font-size:1rem}
.pro-hero-search button{background:linear-gradient(135deg,var(--pro-orange),var(--pro-orange2));color:#fff;border:0;padding:0 28px;font-weight:900;font-size:1rem;cursor:pointer}
.pro-hero-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px}
.pro-hero-stats strong{font-size:1.5rem;display:block}
.pro-hero-stats span{font-size:.875rem;opacity:.8}
.pro-hero-card{background:#fff;border-radius:24px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.3);color:var(--pro-ink)}
.pro-hero-card .slider{border-radius:16px}
/* sections — BOXED */
.pro-section{padding:56px 0}
.pro-section.alt{background:var(--pro-sky)}
.pro-kicker{color:var(--pro-teal-deep);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.875rem}
.pro-section h2{color:var(--pro-navy);font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.02em;margin:.2em 0}
.pro-section .lede{color:#456179;max-width:64ch}
/* grade cards */
.pro-grades{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:20px}
.pro-grade{position:relative;overflow:hidden;background:#fff;border:1px solid var(--pro-line);border-radius:var(--pro-radius);padding:22px;text-decoration:none;color:var(--pro-ink);box-shadow:var(--pro-shadow);transition:transform .15s}
.pro-grade:hover{transform:translateY(-4px)}
.pro-grade::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--pro-teal),var(--pro-orange))}
.pro-grade .g-ico{font-size:2rem}
.pro-grade h3{color:var(--pro-navy);margin:.4em 0 .1em}
/* subject cards */
.pro-subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:20px}
.pro-subject{background:#fff;border:1px solid var(--pro-line);border-radius:var(--pro-radius);padding:20px;box-shadow:var(--pro-shadow)}
/* ===== CARD REDESIGN — palette + motion ===== */
@keyframes card-in{from{opacity:0;transform:translate3d(0, 22px, 0) scale(.98)}to{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}
.cards>*,.pro-subjects>*,.dx-grid-grades>*,.dx-grid-subs>*{animation:card-in .5s ease backwards;will-change:transform,opacity;transform:translateZ(0)}
.cards>*:nth-child(2n),.pro-subjects>*:nth-child(2n),.dx-grid-grades>*:nth-child(2n),.dx-grid-subs>*:nth-child(2n){animation-delay:.06s}
.cards>*:nth-child(3n),.pro-subjects>*:nth-child(3n),.dx-grid-grades>*:nth-child(3n),.dx-grid-subs>*:nth-child(3n){animation-delay:.12s}
.cards>*:nth-child(4n),.pro-subjects>*:nth-child(4n),.dx-grid-grades>*:nth-child(4n),.dx-grid-subs>*:nth-child(4n){animation-delay:.18s}
.card,.pro-subject,.dx-grade,.dx-sub{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card::before,.pro-subject::before,.dx-grade::before,.dx-sub::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(90deg,#17deee,#10aeb2);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:3}
.card:nth-child(4n+2)::before,.pro-subject:nth-child(4n+2)::before,.dx-grade:nth-child(4n+2)::before,.dx-sub:nth-child(4n+2)::before{background:linear-gradient(90deg,#ff7f50,#ff4162)}
.card:nth-child(4n+3)::before,.pro-subject:nth-child(4n+3)::before,.dx-grade:nth-child(4n+3)::before,.dx-sub:nth-child(4n+3)::before{background:linear-gradient(90deg,#ecf284,#17deee)}
.card:nth-child(4n+4)::before,.pro-subject:nth-child(4n+4)::before,.dx-grade:nth-child(4n+4)::before,.dx-sub:nth-child(4n+4)::before{background:linear-gradient(90deg,#ff4162,#ecf284)}
.card:hover,.pro-subject:hover,.dx-grade:hover{transform:translateY(-6px);border-color:#17deee;
  box-shadow:
    0 0 0 1px rgba(23,222,238,.55),
    0 0 18px 2px rgba(23,222,238,.45),
    0 0 38px 6px rgba(16,174,178,.30),
    0 18px 44px rgba(36,34,74,.22)}
.dx-sub:hover{transform:translateY(-6px) scale(1.03);border-color:#ff7f50;
  box-shadow:
    0 0 0 1px rgba(255,127,80,.55),
    0 0 18px 2px rgba(255,127,80,.45),
    0 0 38px 6px rgba(255,65,98,.28),
    0 18px 44px rgba(36,34,74,.22)}
.card:hover::before,.pro-subject:hover::before,.dx-grade:hover::before,.dx-sub:hover::before{filter:drop-shadow(0 0 6px rgba(23,222,238,.85)) brightness(1.15)}
.card h3 a,.pro-subject h3{transition:color .15s}
.card:hover h3 a{color:#10aeb2}
.pro-subject .s-ico,.dx-sub .s-ico{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#e9fcfd,#f7fbd8);font-size:1.7rem;transition:transform .2s ease}
.pro-subject:hover .s-ico,.dx-sub:hover .s-ico{transform:scale(1.12) rotate(-6deg)}
.pro-subject p .btn{margin:3px 2px;transition:transform .15s ease}
.pro-subject p .btn:hover{transform:scale(1.07)}
@media(prefers-reduced-motion:reduce){.cards>*,.pro-subjects>*,.dx-grid-grades>*,.dx-grid-subs>*{animation:none}.card:hover,.pro-subject:hover,.dx-grade:hover,.dx-sub:hover{transform:none}}
/* ===== THEMES ROW: 5-across, image covers, animated topic rows ===== */
.theme5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:20px}
.theme-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.theme-card h3{padding:14px 16px 4px}
.theme-cover{display:block;overflow:hidden;aspect-ratio:4/3;background:#f2fafb}
.theme-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.theme-card:hover .theme-cover img{transform:scale(1.08)}
.topic-row{display:flex;align-items:center;gap:10px;padding:9px 16px;text-decoration:none;color:#0b2b4c;font-weight:700;border-top:1px solid #f0f4f6;transition:background .15s ease,padding-left .2s ease;animation:card-in .5s ease backwards}
.theme-card .topic-row:nth-child(3){animation-delay:.05s}.theme-card .topic-row:nth-child(4){animation-delay:.1s}.theme-card .topic-row:nth-child(5){animation-delay:.15s}.theme-card .topic-row:nth-child(6){animation-delay:.2s}.theme-card .topic-row:nth-child(7){animation-delay:.25s}
.t-dot{flex:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#17deee,#10aeb2)}
.topic-row:nth-child(4n+1) .t-dot{background:linear-gradient(135deg,#ff7f50,#ff4162)}
.topic-row:nth-child(4n+2) .t-dot{background:linear-gradient(135deg,#ecf284,#17deee)}
.t-arrow{margin-left:auto;color:#10aeb2;font-weight:900;opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .2s ease}
.topic-row:hover{background:#f2fafb;padding-left:22px}
.topic-row:hover .t-arrow{opacity:1;transform:none}
@media(max-width:1100px){.theme5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.theme5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.theme5{grid-template-columns:1fr}}
/* ===== ATTRACTIVE HEADER ===== */
.dx-header{position:-webkit-sticky;position:sticky;top:0;z-index:1000}
.dx-nav a{position:relative}
.dx-nav a::after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:99px;background:linear-gradient(90deg,#ff7f50,#ff4162);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.dx-nav a:hover::after{transform:scaleX(1)}
.dx-nav a[aria-current="page"]::after{transform:scaleX(1)}
.dx-nav a[aria-current="page"]{color:#ff4162}
.dx-logo-img{filter:drop-shadow(0 4px 10px rgba(16,174,178,.25));transition:transform .2s ease}
.dx-logo:hover .dx-logo-img{transform:scale(1.04) rotate(-1deg)}
.pro-subject .s-ico{font-size:1.8rem}
.pro-subject h3{color:var(--pro-navy);margin:.3em 0}
.pro-meter{height:10px;background:#e8f0f4;border-radius:999px;overflow:hidden;margin:8px 0}
.pro-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--pro-teal),var(--pro-orange))}
/* how it works — FULL WIDTH dark band */
.pro-band-dark{background:linear-gradient(120deg,#0b2b4c,#123f6b);color:#fff;padding:56px 0}
.pro-band-dark h2{color:#fff}
.pro-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:20px auto 0;padding:0 18px}
.pro-step{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--pro-radius);padding:24px}
.pro-step .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--pro-orange),var(--pro-orange2));font-weight:900}
/* testimonials + faq */
.pro-testi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.pro-testi .stars{color:var(--pro-orange)}
.pro-faq details{border:1px solid var(--pro-line);border-radius:14px;padding:12px 16px;margin:10px 0;background:#fff}
/* final CTA — FULL WIDTH orange band */
.pro-band-cta{background:linear-gradient(120deg,var(--pro-orange),var(--pro-orange2));color:#fff;text-align:center;padding:64px 18px}
.pro-band-cta h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em;margin:0 0 .3em}
.pro-band-cta .btn-white{background:#fff;color:#b34700;border-radius:999px;padding:14px 34px;font-weight:900;text-decoration:none;display:inline-block;font-size:1.1rem;box-shadow:0 12px 28px rgba(0,0,0,.25)}
/* ===== MODERN PREMIUM FOOTER STYLES ===== */
.pro-footer {
  background: linear-gradient(180deg, #072d30 0%, #041d20 100%);
  color: #9cb5bd;
  padding: 0 0 30px;
  position: relative;
  font-size: 0.94rem;
}

/* Newsletter Bar Section (Above Trust Showcase) */
.foot-newsletter-bar-sec {
  background: #ffffff;
  padding: 40px 20px 10px;
}

.foot-newsletter-bar {
  background: linear-gradient(135deg, #10aeb2 0%, #0d7d81 100%);
  color: #ffffff;
  padding: 32px 36px;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(16, 174, 178, 0.2);
}

.foot-news-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.foot-news-text h3 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
}

.foot-news-text p {
  margin: 0;
  color: #e0f8f9;
  font-size: 0.96rem;
}

.foot-news-form {
  display: flex;
  gap: 10px;
  flex: 1;
  max-width: 480px;
}

.foot-news-form input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 999px;
  border: 0;
  outline: none;
  font-size: 0.95rem;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
}

.foot-news-btn {
  background: linear-gradient(135deg, #ff7f50, #ff4162);
  color: #ffffff;
  font-weight: 800;
  border: 0;
  padding: 0 26px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(255, 65, 98, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.foot-news-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 65, 98, 0.5);
}

/* Footer Container & Grid */
.pro-foot-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.pro-foot-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.45fr 1.45fr 1.05fr;
  gap: 32px;
  margin-bottom: 40px;
}

.foot-brand-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.foot-brand-logo {
  font-size: 2rem;
}

.foot-brand-header strong {
  font-size: 1.45rem;
  font-weight: 900;
  color: #ffffff;
}

.foot-tagline {
  color: #17deee;
  font-weight: 800;
  font-size: 0.92rem;
  margin: 0 0 10px;
}

.foot-desc {
  color: #8da9b3;
  line-height: 1.6;
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.foot-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.foot-trust-pills span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d1e8ee;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}

.foot-heading {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 20px;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 8px;
}

.foot-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 3px;
  background: #10aeb2;
  border-radius: 999px;
}

.foot-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-links a {
  color: #9cb5bd;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
  font-size: 0.91rem;
  white-space: normal;
}

.foot-links a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

/* Contact Column */
.foot-contact-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.foot-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.foot-contact-item:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: #10aeb2;
}

.foot-contact-item .c-icon {
  font-size: 1.3rem;
}

.foot-contact-item small {
  display: block;
  font-size: 0.72rem;
  color: #72909a;
  text-transform: uppercase;
  font-weight: 700;
}

.foot-contact-item strong {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
}

.foot-social-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.social-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-icons-row a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  flex: 0 0 auto;
  transition: background 0.25s ease, transform 0.25s ease;
}

.social-icons-row a:hover {
  background: #10aeb2;
  transform: translateY(-3px);
}

.social-icons-row svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Bottom Fine Print */
.pro-fine {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: #72909a;
}

.fine-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fine-left strong {
  color: #d1e8ee;
}

.fine-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
}

.fine-right a {
  color: #8da9b3;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fine-right a:hover {
  color: #ffffff;
}

.fine-right .admin-link {
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #d1e8ee;
}

@media (max-width: 960px) {
  .pro-foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 600px) {
  .pro-foot-grid {
    grid-template-columns: 1fr;
  }
  .foot-links a {
    white-space: normal;
  }
  .foot-news-form {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  .foot-news-btn {
    padding: 14px;
  }
  .pro-fine {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ===== KID-FRIENDLY SPEC LAYER (original First Pathshala identity) ===== */
.kp-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#00b8c6 0%,#0a7d96 45%,#7b2ff7 110%);color:#fff}
.kp-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:70px 18px;max-width:1180px;margin:0 auto;position:relative;z-index:1}
.kp-hero::before{content:"✏️";position:absolute;font-size:9rem;opacity:.15;top:20px;right:6%;transform:rotate(18deg)}
.kp-hero::after{content:"🔢";position:absolute;font-size:7rem;opacity:.15;bottom:24px;left:4%;transform:rotate(-14deg)}
.kp-eyebrow{display:inline-block;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);color:#fff;font-weight:800;font-size:.875rem;border-radius:999px;padding:7px 16px}
.kp-hero h1{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.1;margin:.35em 0;letter-spacing:-.03em}
.kp-hero h1 em{font-style:normal;color:#ffd166}
.kp-hero .lede{font-size:1.15rem;opacity:.93;max-width:52ch}
.kp-hero-search{display:flex;background:#fff;border-radius:18px;overflow:hidden;margin:16px 0;max-width:540px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.kp-hero-search input{flex:1;border:0;padding:16px 20px;outline:none;font-size:1.05rem}
.kp-hero-search button{background:linear-gradient(135deg,var(--pro-orange),var(--pro-orange2));color:#fff;border:0;padding:0 30px;font-weight:900;font-size:1.05rem;cursor:pointer}
.kp-art{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kp-float{background:#fff;color:var(--pro-ink);border-radius:22px;padding:22px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25);font-size:2rem}
.kp-float strong{display:block;font-size:1.1rem;color:var(--pro-navy)}
.kp-float span{font-size:.875rem;color:#3d5a73}
.kp-float.f1{transform:rotate(-2deg)}.kp-float.f2{transform:rotate(2deg)}.kp-float.f3{transform:rotate(1.5deg)}.kp-float.f4{transform:rotate(-1.5deg)}
.kp-slider{border-radius:24px;overflow:hidden;border:4px solid #fff;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.kp-subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:20px}
.kp-subject{background:#fff;border:1px solid var(--pro-line);border-radius:20px;padding:20px 14px;text-align:center;text-decoration:none;color:var(--pro-ink);box-shadow:var(--pro-shadow);transition:transform .15s}
.kp-subject:hover{transform:translateY(-4px) scale(1.02)}
.kp-subject .s-ico{font-size:2.2rem;display:block}
.kp-subject strong{display:block;color:var(--pro-navy);margin-top:6px}
.kp-subject small{color:#3d5a73}
.kp-free{background:linear-gradient(120deg,#0b2b4c,#134a7c);color:#fff;padding:56px 0;text-align:center}
.kp-free h2{color:#fff}
.kp-free .card{color:var(--pro-ink);text-align:left}
.kp-free .btn-white,.btn-white{background:#fff;color:#b34700;border-radius:999px;padding:13px 30px;font-weight:900;text-decoration:none;display:inline-block}
.kp-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kp-panel{border-radius:24px;padding:30px;border:1px solid var(--pro-line)}
.kp-panel.t{background:linear-gradient(180deg,#eaf7f8,#fff)}
.kp-panel.p{background:linear-gradient(180deg,#fff4e8,#fff)}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.spec-grid div{background:#f4f8fa;border:1px solid var(--pro-line);border-radius:14px;padding:10px 12px}
.spec-grid strong{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--pro-teal-deep)}
.spec-grid span{font-weight:700;color:var(--pro-navy)}
.fav-btn.on{background:#fff4e8;border-color:var(--pro-orange);color:#b34700}
/* autocomplete */
.ac-wrap{position:relative}
.ac-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--pro-line);border-radius:14px;box-shadow:var(--pro-shadow);z-index:50;overflow:hidden;margin-top:6px}
.ac-list a{display:flex;gap:8px;align-items:center;padding:10px 14px;text-decoration:none;color:var(--pro-ink)}
.ac-list a:hover,.ac-list a.ac-active{background:var(--pro-sky)}
.ac-list small{color:#3d5a73;margin-left:auto}
@media(max-width:900px){.kp-hero-grid{grid-template-columns:1fr;padding:48px 18px}.kp-duo{grid-template-columns:1fr}.spec-grid{grid-template-columns:1fr 1fr}}
/* ===== DX-ORIGINAL dark animated theme (hand-built, no third-party assets) ===== */
:root{--dx-bg:#0a1230;--dx-bg2:#0d1738;--dx-teal:#22d3ee;--dx-orange:#fb923c;--dx-pink:#f472b6;--dx-txt:#eaf2ff;--dx-mut:#9fb3cc}
.dx-header{position:sticky;top:0;z-index:99999;background:rgba(10,18,48,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
body.mobile-menu-open .dx-header{z-index:1000000 !important}
body.mobile-menu-open #cpCookieBanner{display:none !important}
.dx-top{display:flex;align-items:center;gap:12px;padding:10px 18px}
.dx-logo{display:flex;align-items:center;font-weight:900;color:#fff;text-decoration:none;white-space:nowrap}
.dx-logo-img{height:52px;max-height:52px;width:auto;display:block;border-radius:10px}
.dx-logo-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--dx-teal),#818cf8);box-shadow:0 0 22px rgba(34,211,238,.55);animation:dx-glow 3s ease-in-out infinite}
.dx-nav{display:flex;gap:1px;margin-left:auto;align-items:center}
.dx-nav a{color:#cdd9ee;text-decoration:none;font-weight:700;padding:6px 8px;border-radius:8px;font-size:14.5px;letter-spacing:-0.01em}
.dx-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.dx-search{margin-left:auto;display:flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;overflow:hidden}
.dx-search input{border:0;background:transparent;padding:9px 14px;min-width:190px;outline:none;color:#fff}
.dx-search input::placeholder{color:#cfd8e0}
.dx-search button{border:0;background:rgba(255,255,255,.12);color:#fff;padding:0 14px;cursor:pointer}
.dx-cta{display:flex;align-items:center;gap:10px}
.dx-login{color:#cdd9ee;font-weight:800;text-decoration:none;white-space:nowrap}
.btn-dx{background:linear-gradient(135deg,#f97316,#fb923c);color:#fff;border-radius:999px;padding:10px 20px;font-weight:900;text-decoration:none;border:0;display:inline-block;box-shadow:0 6px 22px rgba(249,115,22,.5);white-space:nowrap;transition:transform .15s}
.btn-dx:hover{transform:translateY(-2px)}
.dx-mobile{background:#0d1738}
.dx-mobile a{color:#eaf2ff;text-decoration:none;padding:8px 0}
@keyframes dx-glow{0%,100%{box-shadow:0 0 14px rgba(34,211,238,.4)}50%{box-shadow:0 0 28px rgba(34,211,238,.8)}}
@keyframes dx-float{0%,100%{transform:translate3d(0, 0, 0) rotate(var(--tilt,0deg))}50%{transform:translate3d(0, -14px, 0) rotate(var(--tilt,0deg))}}
@keyframes dx-drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(30px,-30px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes dx-marquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@keyframes dx-shine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.dx-page{background:var(--dx-bg);color:var(--dx-txt)}
.dx-page h1,.dx-page h2,.dx-page h3{color:#fff}
.dx-wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.dx-hero{position:relative;overflow:hidden;background:radial-gradient(800px 400px at 85% -5%,rgba(244,114,182,.25),transparent 60%),radial-gradient(900px 500px at 10% 110%,rgba(34,211,238,.22),transparent 60%),linear-gradient(180deg,#0d1738,#0a1230);padding:76px 0 60px}
/* extend dark hero gradient up behind the transparent sticky header */
.dx-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-120px;z-index:-1;background:linear-gradient(180deg,#0d1738,#0a1230);pointer-events:none}
.dx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:dx-drift 9s ease-in-out infinite;will-change:transform;transform:translateZ(0)}
.dx-orb.o1{width:340px;height:340px;background:#0ea5e9;top:-120px;right:-80px}
.dx-orb.o2{width:280px;height:280px;background:#f97316;bottom:-140px;left:-80px;opacity:.35;animation-delay:-4s}
.dx-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:24px 36px;align-items:start}
.dx-hero-head{grid-column:1 / -1;margin-bottom:4px}
.dx-hero-body{display:flex;flex-direction:column}
.dx-eyebrow{display:inline-block;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.5);color:#a5f3fc;font-weight:800;font-size:.875rem;border-radius:999px;padding:7px 16px}
.dx-hero-head h1,.dx-hero h1{font-size:clamp(2.35rem,3.8vw,3.65rem);line-height:1.15;margin:.25em 0 0;letter-spacing:-.025em;max-width:100%}
.dx-hero h1 .grad,.grad{background:linear-gradient(90deg,#10aeb2 0%,#ff7f50 48%,#ff4162 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;display:inline-block}
.dx-hero-flow{display:flex;align-items:center;gap:10px;margin:8px 0 14px;flex-wrap:wrap;min-height:2.2rem}
.flow-step{font-family:'Fredoka','Fredoka Fallback','Plus Jakarta Sans',system-ui,sans-serif;font-size:1.05rem;font-weight:700;color:#0f766e;display:inline-block;transition:transform .2s ease,color .2s ease;cursor:default}
.flow-step:hover{transform:translateY(-2px);color:#0d7d81}
.flow-step.s5{color:#0b4b4e;font-weight:800}
.flow-sep{color:#94a3b8;font-size:.9rem;opacity:.7;user-select:none}
.dx-hero .lede{font-size:1.30rem;color:#c4d3ea;max-width:56ch;line-height:1.5;margin-top:0}
.dx-hero-search{display:flex;background:#fff;border-radius:16px;overflow:hidden;margin:34px 0 10px;max-width:560px;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.dx-hero-search input{flex:1;border:0;padding:18px 22px;outline:none;font-size:1.10rem;color:#10243e}
.dx-hero-search button{background:linear-gradient(135deg,#f97316,#fb923c);color:#fff;border:0;padding:0 34px;font-weight:900;font-size:1.10rem;cursor:pointer}
.dx-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.dx-stats strong{font-size:1.7rem;display:block;color:#fff}
.dx-stats span{font-size:.875rem;color:var(--dx-mut)}
.dx-stage{position:relative}
.dx-frame{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 40px rgba(34,211,238,.25)}
.dx-chip{position:absolute;background:rgba(255,255,255,.96);color:#0b2b4c;border-radius:16px;padding:10px 16px;font-weight:700;box-shadow:0 14px 30px rgba(0,0,0,.25);border:1px solid #e2eef2;animation:dx-float 5s ease-in-out infinite;z-index:2;font-size:1.05rem;transition:opacity .25s ease;will-change:transform;transform:translateZ(0);contain:layout style;min-width:140px;box-sizing:border-box}
.dx-chip small{display:block;font-weight:600;color:#3d5a73;font-size:.75rem}
.dx-chip.c1{top:-18px;left:-14px;--tilt:-3deg}
.dx-chip.c2{bottom:-18px;right:-10px;--tilt:3deg;animation-delay:-2.5s}
.dx-ticker{overflow:hidden;border-block:1px solid rgba(255,255,255,.1);background:#0d1738;padding:12px 0}
.dx-ticker-track{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:dx-marquee 28s linear infinite;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.dx-ticker-track span{color:#a5f3fc;font-weight:800}
.dx-sec{padding:60px 0}
.dx-sec.alt{background:var(--dx-bg2)}
.dx-kicker{color:var(--dx-teal);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.875rem}
.dx-sec .lede{color:#a9bcd6}
.dx-grid-grades{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:20px}
.dx-grade{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px;text-decoration:none;color:var(--dx-txt);transition:transform .15s,border-color .15s}
.dx-grade:hover{transform:translateY(-4px);border-color:var(--dx-teal)}
.dx-grade h3{margin:.4em 0 .1em}
.dx-grade .meta{color:var(--dx-mut);font-size:.9rem}
.dx-grid-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:20px}
.dx-sub{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:20px 14px;text-align:center;text-decoration:none;color:var(--dx-txt);transition:transform .15s}
.dx-sub:hover{transform:translateY(-4px) scale(1.02);border-color:var(--dx-orange)}
.dx-sub .s-ico{font-size:2.2rem;display:block}
.dx-sub strong{display:block;margin-top:6px}
.dx-sub small{color:var(--dx-mut)}
.dx-page .card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);color:var(--dx-txt)}
.dx-page .card h3,.dx-page .card h3 a{color:#fff}
.dx-page .card .meta{color:var(--dx-mut)}
.dx-page .card .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.dx-page .card .fav-btn.on{border-color:var(--dx-orange);color:var(--dx-orange)}
.dx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.dx-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:26px}
.dx-step .n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#f97316,#f472b6);font-weight:900;font-size:1.1rem}
.dx-cta-band{position:relative;overflow:hidden;text-align:center;padding:70px 18px;background:radial-gradient(700px 340px at 50% 120%,rgba(249,115,22,.4),transparent 65%),linear-gradient(180deg,#0d1738,#141b4d)}
.dx-cta-band h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em}
.dx-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.dx-panel{border-radius:22px;padding:30px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
/* ===== ADVANCED SCROLL & MOTION ENGINE ===== */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #10aeb2, #ff7f50, #ff4162, #17deee);
  z-index: 100000;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(16, 174, 178, 0.6);
  pointer-events: none;
}

.dx-header.scrolled, .home .dx-header.scrolled {
  background: #ffffff !important;
  border-bottom: 1px solid #e2eef2 !important;
  box-shadow: 0 6px 24px rgba(11, 43, 76, 0.14) !important;
  backdrop-filter: blur(12px);
}

.dx-reveal.in,
.dx-reveal-up.in,
.dx-reveal-scale.in,
.dx-reveal-left.in,
.dx-reveal-right.in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px);
}

/* Staggered Children Cascading Physics */
.dx-stagger-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.96);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
  transition-delay: calc(var(--stagger-i, 1) * 0.07s);
}

.in .dx-stagger-item,
.dx-stagger-item.in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Floating & Ambient Motion Keyframes */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(8px) rotate(-1.5deg); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 10px rgba(23, 222, 238, 0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 0 22px rgba(255, 127, 80, 0.6)); }
}

@keyframes softPulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.dx-float-slow { animation: floatSlow 6s ease-in-out infinite; }
.dx-float-reverse { animation: floatReverse 7s ease-in-out infinite; }
.dx-pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }
.dx-pulse-scale { animation: softPulseScale 3.5s ease-in-out infinite; }
@media(max-width:900px){.dx-nav,.dx-search{display:none}.dx-login{display:none}.dx-cta .btn-dx{display:none}.dx-hero-grid{grid-template-columns:1fr;gap:20px}.dx-hero-head{grid-column:1}.dx-steps,.dx-duo{grid-template-columns:1fr}.dx-chip.c1{left:6px}.dx-chip.c2{right:6px}}
/* ===== 3D MOTION LAYER (original canvas engine + tilt) ===== */
.hero3d{position:relative}
#space3d{position:absolute;inset:0;z-index:0}
.hero3d .dx-hero-grid{position:relative;z-index:1}
.dx-page [data-tilt]{transition:transform .2s cubic-bezier(0.2, 0, 0, 1),box-shadow .2s ease,border-color .18s ease;will-change:transform}
@media (hover: hover) and (pointer: fine) {
  .dx-page [data-tilt]:hover {
    transform: scale(1.035) translateY(-4px);
  }
}
.dx-stage3d{perspective:1200px}
.dx-frame-tilt{transform-style:preserve-3d}
.hero3d .dx-frame{animation:hero-float 7s ease-in-out infinite;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
@keyframes hero-float{0%,100%{transform:translate3d(0, 0, 0)}50%{transform:translate3d(0, -10px, 0)}}
@media(prefers-reduced-motion:reduce){.hero3d .dx-frame,.dx-chip,.dx-logo-mark,.dx-hero h1 .grad,.grad,.flow-step{animation:none}}
/* ===== LIGHT THEME — palette: #17deee #ff7f50 #ff4162 #ecf284 #10aeb2 ===== */
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #10aeb2;outline-offset:2px;border-radius:6px}
.dx-header{position:-webkit-sticky !important;position:sticky !important;top:0 !important;z-index:1000 !important;background:rgba(255,255,255,1);border-bottom:1px solid #e2eef2;box-shadow:0 2px 14px rgba(11,43,76,.08);transition:background .2s ease,box-shadow .2s ease}
.home .dx-header:not(.scrolled){background:transparent !important;border-bottom:1px solid transparent !important;box-shadow:none !important}
.dx-header.scrolled, .home .dx-header.scrolled{background:#ffffff !important;background-color:#ffffff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-bottom:1px solid #e2eef2 !important;box-shadow:0 6px 24px rgba(11,43,76,.16) !important}
.home .dx-header{margin-bottom:-90px}
.home .dx-hero-grid{padding-top:74px}
.dx-logo{color:#0b2b4c}
.dx-logo-mark{background:linear-gradient(135deg,#17deee,#10aeb2);box-shadow:0 0 18px rgba(23,222,238,.55)}
.dx-nav a{color:#334e5c;font-size:14.5px;padding:6px 8px}
.dx-nav a:hover{background:#e6fbfc;color:#10aeb2}
.dx-search{background:#f1f5f9;border-color:#e2eaf0}
.dx-search input{color:#0b2b4c}
.dx-search input::placeholder{color:#b0bec5}
.dx-search button{background:#e6fbfc;color:#0b2b4c}
.dx-login{color:#0b2b4c}
.btn-dx{background:linear-gradient(135deg,#ff7f50,#ff4162);box-shadow:0 6px 22px rgba(255,65,98,.35)}
.dx-mobile{background:#fff}
.dx-mobile a{color:#0b2b4c}
.dx-page{background:#fff;color:#0b2b4c}
.dx-page h1,.dx-page h2,.dx-page h3{color:#0b2b4c}
.dx-hero{background:linear-gradient(135deg,#e9fcfd 0%,#fff7ee 55%,#fdeef3 100%)}
.dx-hero h1 .grad,.grad{background:linear-gradient(90deg,#10aeb2 0%,#ff7f50 48%,#ff4162 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;display:inline-block}
.dx-hero .lede{color:#45606e}
.dx-eyebrow{background:#f7fbd8;border:1px solid #17deee;color:#0d7d81}
.dx-hero-search{box-shadow:0 18px 44px rgba(16,174,178,.25)}
.dx-hero-search button{background:linear-gradient(135deg,#ff7f50,#ff4162)}
.dx-hero .btn-pro-ghost{border:2px solid #10aeb2;color:#0d7d81;background:#fff}
.cta-row.gone{visibility:hidden}
.dx-stats strong{color:#0b2b4c}
.dx-stats span{color:#4a6572}
.dx-chip{border:1px solid #e2eef2}
.dx-frame{border:4px solid #fff;box-shadow:0 24px 60px rgba(16,174,178,.28)}
.dx-ticker{background:linear-gradient(90deg,#ff7f50,#ff4162);border:0;padding:10px 0;position:relative}
.dx-ticker:hover .dx-ticker-track{animation-play-state:paused}
.dx-ticker-track{display:flex;align-items:center;gap:16px;white-space:nowrap;width:max-content;animation:dx-marquee 42s linear infinite;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.dx-ticker-track span{color:#fff}
.dx-ticker-pill{color:#ffffff !important;text-decoration:none;font-weight:800;font-size:0.92rem;letter-spacing:0.02em;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.28);transition:all 0.2s ease;display:inline-flex;align-items:center}
.dx-ticker-pill:hover{background:#ffffff !important;color:#ff4162 !important;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.dx-ticker-dot{color:rgba(255,255,255,0.55);font-size:1.1rem;user-select:none}
/* content-visibility: auto removed — was causing CLS 1.0+ on mobile & desktop */
.dx-sec.alt{background:#f2fafb}
.dx-sec .lede{color:#4a6572}
.dx-kicker{color:#0d7d81}
.dx-grade{background:#fff;border:1px solid #e2eef2;color:#0b2b4c;box-shadow:0 10px 26px rgba(16,174,178,.10)}
.dx-grade:hover{border-color:#17deee}
.dx-grade .meta{color:#4a6572}
.dx-sub{background:#fff;border:1px solid #e2eef2;color:#0b2b4c;box-shadow:0 10px 26px rgba(16,174,178,.10)}
.dx-sub:hover{border-color:#ff7f50}
.dx-sub small{color:#4a6572}
.dx-page .card{background:#fff;border:1px solid #e2eef2;color:#0b2b4c;box-shadow:0 10px 26px rgba(16,174,178,.10)}
.dx-page .card h3,.dx-page .card h3 a{color:#0b2b4c}
.dx-page .card .meta{color:#4a6572}
.dx-page .card .btn-ghost{background:#fff;border-color:#10aeb2;color:#10aeb2}
.dx-page .card .fav-btn.on{border-color:#ff7f50;color:#ff4162}
.dx-step{background:#fff;border:1px solid #e2eef2;box-shadow:0 10px 26px rgba(16,174,178,.10)}
.dx-step .n{background:linear-gradient(135deg,#ff7f50,#ff4162)}
.dx-panel{background:#fff;border:1px solid #e2eef2;box-shadow:0 10px 26px rgba(16,174,178,.10)}
.dx-step{background:#fff;border:1px solid #e2eef2;color:#0b2b4c;box-shadow:0 10px 26px rgba(16,174,178,.10)}
.dx-step h3{color:#0b2b4c}
.dx-step .lede,.dx-panel .lede,.dx-sec .lede{color:#4a6572}
.dx-sec h2{color:#0b2b4c}
.grades-lock{background:#fff}
.grades-lock h2{color:#0b4b4c!important}
.grades-lock .dx-kicker{color:#0d7d81!important}
.grades-lock .lede{color:#4a6572!important}
.grades-lock .dx-grade{background:#fff;border:2px solid #ecf284}
.grades-lock .dx-grade .g-ico{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#f4f8d8}
.grades-lock .dx-kicker{background:#ecf284;color:#0b4b4e!important;border-radius:999px;padding:5px 14px}
.grades-lock .dx-grade h3{color:#0b4b4e!important}
.grades-lock .dx-grade .meta{color:#4a6572!important}
.dx-cta-band{background:linear-gradient(120deg,#ff7f50,#ff4162)}
.dx-cta-band h2{color:#fff}
.dx-cta-band .lede{color:#fff;opacity:.92}
.dx-media-item{border:1px solid #e2eef2;box-shadow:0 14px 30px rgba(16,174,178,.16)}
/* media wall + panel images (your uploads, reused site-wide) */
.dx-media-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:20px}
.dx-media-item{position:relative;display:block;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.14);text-decoration:none;box-shadow:0 16px 40px rgba(0,0,0,.35);transition:transform .15s}
.dx-media-item:hover{transform:translateY(-4px)}
.dx-media-item img,.dx-media-item video{width:100%;height:200px;object-fit:cover;display:block}
.dx-media-item span{position:absolute;left:10px;bottom:10px;background:rgba(10,18,48,.8);color:#fff;font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:999px}
.dx-panel-img{width:100%;height:150px;object-fit:cover;border-radius:14px;margin-bottom:12px;display:block}
/* ===== PALETTE LOCK — only #17deee #ff7f50 #ff4162 #ecf284 #10aeb2 (+ white/black/neutral grays) ===== */
:root{--saffron:#ecf284;--harvest:#ff7f50;--cherry:#ff4162;--indigo:#10aeb2;--azure:#17deee;--velvet:#0b4b4e;--slate:#10aeb2;--amber:#ecf284;--tiger:#ff7f50;--cayenne:#ff4162;--bg:#ffffff;--muted:#f2fafb;--ink:#33414e;--line:#dcebed;--dx-teal:#0d7d81;--dx-orange:#ff7f50;--dx-pink:#ff4162;--dx-mut:#5b6b76;--pro-teal:#10aeb2;--pro-teal-deep:#0d7d81;--pro-navy:#0b4b4e;--pro-ink:#33414e;--pro-orange:#ff7f50;--pro-orange2:#ff4162;--pro-sky:#e9fcfd;--pro-line:#dcebed;--edu-teal:#10aeb2;--edu-dark:#0b4b4e;--edu-orange:#ff7f50;--edu-orange2:#ff4162;--edu-sky:#e9fcfd;--lt-coral:#ff7f50;--lt-pink:#ff4162;--lt-cyan:#17deee;--lt-teal:#10aeb2;--lt-lime:#ecf284;--lt-navy:#0b4b4e;--lt-mut:#5b6b76}
body{color:#33414e;background:#fff}
a{color:#10aeb2}
.btn-dx{background:linear-gradient(135deg,#ff7f50,#ff4162);box-shadow:0 6px 22px rgba(255,65,98,.5)}
.dx-logo-mark{background:linear-gradient(135deg,#17deee,#10aeb2);box-shadow:0 0 18px rgba(23,222,238,.55)}
@keyframes dx-glow{0%,100%{box-shadow:0 0 14px rgba(23,222,238,.4)}50%{box-shadow:0 0 28px rgba(23,222,238,.8)}}
.dx-step .n{background:linear-gradient(135deg,#ff7f50,#ff4162)}
.badge{background:#ecf284;color:#333}
.badge.blue{background:#d9f7f9;color:#0b4b4e}
.badge.orange{background:#ffe3d3;color:#333}
.meta{color:#5b6b76}
.card{border-color:#dcebed}
.card h3{color:#0b4b4e}
.pop-tag{background:#ecf284;color:#333}
.pro-meter i,.bar i{background:linear-gradient(90deg,#17deee,#ff7f50)}
.stars{color:#ff7f50!important}
.alert{background:#fafce8;border-color:#ecf284}
.pro-footer{background:#0b4b4e}
.pro-foot-grid a{color:#c9e8ea}
.cap{background:rgba(0,0,0,.65)}
.dx-hero-search input{color:#333}
.dx-chip{color:#0b4b4e}
.dx-chip small{color:#5b6b76}
.dx-icon-btn{background:rgba(16,174,178,.12);border:1px solid #dcebed;color:#0b4b4e;border-radius:12px;padding:8px 12px;font-size:1.05rem;cursor:pointer;position:relative;z-index:45}
.dx-top{position:relative}
.dx-icon-btn:hover{background:#e6fbfc}
.dx-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 43, 76, 0.48);
  z-index: 99990;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.dx-overlay.open {
  opacity: 1;
  visibility: visible;
  display: block !important;
}
.dx-overlay[hidden], .dx-drawer[hidden] {
  display: none !important;
}
.dx-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 90vw);
  background: #ffffff;
  z-index: 99999;
  box-shadow: -18px 0 50px rgba(11, 43, 76, 0.28);
  padding: 24px 20px;
  transform: translateX(105%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dx-drawer.open {
  transform: translateX(0) !important;
  display: flex !important;
}
.dx-drawer-head{display:flex;justify-content:space-between;align-items:center;color:#0b4b4e}
.dx-drawer-search{display:grid;gap:10px}
.dx-drawer-search input{border:2px solid #dcebed;border-radius:12px;padding:11px 14px;font-size:1rem}
.dx-drawer-links{display:flex;flex-wrap:wrap;gap:8px}
.dx-drawer-links a{background:#f2fafb;border:1px solid #dcebed;border-radius:999px;padding:6px 14px;text-decoration:none;font-weight:700;font-size:.9rem}
.brand-kicker{margin:0 0 2px;font-weight:900;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase}
.brand-kicker a{color:#10aeb2;text-decoration:none;border-bottom:2px solid #ecf284}
.price{color:#ff4162;font-weight:900;font-size:1.35rem;margin:.2em 0}
.rail-card form{margin:0}
.rail-card input[type=email]{margin:0}
.inside-grid{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start;margin:6px 0 8px}
.inside-thumb{width:100%;border-radius:14px;border:1px solid #dcebed;box-shadow:0 10px 26px rgba(16,174,178,.16)}
.word-chips{display:flex;flex-wrap:wrap;gap:8px}
.word-chips span{background:#f7fbd8;border:1px solid #17deee;color:#0d7d81;font-weight:700;font-size:.875rem;border-radius:999px;padding:4px 12px}
@media(max-width:700px){.inside-grid{grid-template-columns:1fr}.inside-thumb{max-width:280px}}
@media(max-width:820px){.spec-grid{grid-template-columns:1fr}.pro-testi{grid-template-columns:1fr}table.admin{display:block;overflow-x:auto}.pdf-frame{height:55vh}}
.sample-lines{background:#f2fafb;border:1px solid #dcebed;border-radius:14px;padding:14px 16px 14px 36px}
.sample-lines li{margin:6px 0}
/* ===== READABLE ARTICLE DESIGN (PDF pages) ===== */
.read{max-width:78ch;counter-reset:readsec}
.read>p,.read>ul:not(.check),.read>ol{line-height:1.75;font-size:1.03rem;color:#33414e}
.read>h2{counter-increment:readsec;color:#0b4b4e;font-size:1.45rem;margin:2.2em 0 .7em;padding-top:.4em;border-top:3px solid #ecf284;display:flex;align-items:center;gap:10px}
.read>h2::before{content:counter(readsec);flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ff7f50,#ff4162);color:#fff;font-size:1rem;font-weight:900}
.read>h3{color:#0d7d81;margin:1.6em 0 .5em}
.read-toc{background:#f2fafb;border:1px solid #dcebed;border-radius:14px;padding:12px 16px;margin:16px 0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.read-toc strong{color:#0b4b4e}
.read-toc a{font-weight:700;text-decoration:none}
.read .check li{line-height:1.7;background:#fff;border:1px solid #dcebed;border-radius:12px;padding:10px 12px 10px 38px;margin:8px 0;box-shadow:0 4px 12px rgba(16,174,178,.08)}
.read .check li::before{left:12px}
.read ol:not(.sample-lines) li{margin:10px 0;line-height:1.7}
.read details{border:1px solid #dcebed;border-radius:14px;padding:12px 16px;margin:10px 0;background:#fff}
.read details summary{font-weight:800;color:#0b4b4e;cursor:pointer}
.read .spec-grid{margin:14px 0}
.read .pdf-frame{margin:8px 0}
.read .cta-row .btn{margin:2px 0}
/* sticky right rail (uses empty column on wide screens) */
.rail{align-self:start;position:sticky;top:84px;display:grid;gap:12px;align-content:start}
.rail-card{background:#fff;border:1px solid #dcebed;border-radius:16px;padding:14px 16px;box-shadow:0 8px 22px rgba(16,174,178,.10);display:grid;gap:8px;font-size:.92rem}
.rail-card strong{color:#0b4b4e}
.rail-card a:not(.btn){color:#10aeb2;font-weight:700;text-decoration:none}
.rail-card a:not(.btn):hover{text-decoration:underline}
.rail-card.accent{background:linear-gradient(135deg,#fff7ee,#fdeef3);border-color:#ff7f50}
.rail-share{display:flex;gap:10px}
.rail-share a{display:inline-flex}
@media(max-width:820px){.rail{position:static}}
.soc-ico{width:22px;height:22px;flex:none;vertical-align:-4px}
.btn .soc-ico,.pro-foot-grid a .soc-ico,.pro-footer a .soc-ico{margin-right:2px}
/* ============ /pdfs cinematix redesign ============ */
:root{--cin-ink:#0b2340;--cin-teal:#17deee;--cin-teal2:#10aeb2;--cin-pink:#ff4162;--cin-orange:#ff7f50;--cin-gold:#ffe9a8;--cin-lime:#ecf284}
.btn-sm{padding:7px 13px;font-size:.86rem}
.btn-lg{padding:14px 26px;font-size:1.05rem}
/* ---- scroll reveal ---- */
.reveal{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}
/* ---- cinematic hero ---- */
.pdfs-hero{position:relative;overflow:hidden;border-radius:26px;padding:52px 40px 96px;margin:20px 0 6px;color:#fff;background:linear-gradient(120deg,#160f3d 0%,#3d2f9e 35%,#1180a8 72%,#10aeb2 100%);background-size:200% 200%;animation:heroPan 18s ease infinite;box-shadow:0 30px 70px rgba(20,13,70,.35)}
@keyframes heroPan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.pdfs-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 340px at 18% -10%,rgba(247,184,1,.25),transparent 60%),
  radial-gradient(700px 400px at 105% 18%,rgba(23,222,238,.22),transparent 60%)}
/* animated grid floor */
.pdfs-grid{position:absolute;left:0;right:0;bottom:0;height:46%;background-image:
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:44px 44px;transform:perspective(600px) rotateX(55deg) scale(1.4);transform-origin:center bottom;animation:gridDrift 16s linear infinite;opacity:.7;-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
@keyframes gridDrift{to{background-position:0 44px,0 0}}
/* floating orbs */
.pdfs-orbs{position:absolute;inset:0;pointer-events:none}
.pdfs-orbs .orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;animation:floaty 12s ease-in-out infinite}
.pdfs-orbs .o1{width:240px;height:240px;left:-40px;top:-30px;background:#ff7f50}
.pdfs-orbs .o2{width:200px;height:200px;right:6%;top:14%;background:#17deee}
.pdfs-orbs .o3{width:170px;height:170px;left:38%;bottom:-30px;background:#ff4162}
.pdfs-orbs .o4{width:120px;height:120px;right:2%;bottom:16%;background:#ecf284;animation-delay:-6s}
@keyframes floaty{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-26px) translateX(16px)}}
/* mouse spotlight */
.pdfs-spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 320px at var(--mx,70%) var(--my,30%),rgba(255,255,255,.14),transparent 65%);opacity:0;transition:opacity .4s ease}
.pdfs-hero:hover .pdfs-spot{opacity:1}
.pdfs-hero-inner{position:relative;z-index:3;max-width:620px}
.pdfs-crumb{color:#fff;font-size:.86rem;margin:0 0 12px}
.pdfs-crumb a{color:#fff;text-decoration:none;font-weight:700}
.pdfs-crumb a:hover{text-decoration:underline}
.pdfs-crumb span{margin:0 6px;opacity:.6}
.pdfs-pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.08em;border-radius:999px;padding:6px 15px;margin-bottom:6px;backdrop-filter:blur(4px);box-shadow:0 6px 18px rgba(0,0,0,.25);animation:pulsePill 4s ease-in-out infinite}
@keyframes pulsePill{0%,100%{box-shadow:0 0 0 0 rgba(23,222,238,.35)}50%{box-shadow:0 0 0 10px rgba(23,222,238,0)}}
.pdfs-grad{background:linear-gradient(90deg,#fff 0%,#ffe9a8 22%,#17deee 55%,#fff 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.06;margin:.12em 0 .22em;animation:shineWalk 6s linear infinite;filter:drop-shadow(0 6px 24px rgba(0,0,0,.25))}
@keyframes shineWalk{to{background-position:220% center}}
.pdfs-sub{color:#e9e6ff;font-size:1.08rem;max-width:54ch;margin:0 0 22px}
.pdfs-sub strong{color:var(--cin-gold)}
.pdfs-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.pdfs-actions .btn{border-radius:999px;font-weight:800}
.pdfs-actions .btn-primary{background:linear-gradient(90deg,var(--cin-orange),var(--cin-pink));border:0;box-shadow:0 12px 30px rgba(255,65,98,.35);transition:transform .2s ease,box-shadow .2s ease}
.pdfs-actions .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,65,98,.5)}
.pdfs-actions .arr{display:inline-block;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.btn-glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(4px)}
.btn-glass:hover{background:rgba(255,255,255,.24);color:#fff}
.pdfs-stats{display:flex;gap:26px;flex-wrap:wrap;margin:26px 0 0}
.pdfs-stats span{font-size:.86rem;color:#cfc9ff;display:inline-flex;align-items:baseline;gap:6px}
.pdfs-stats b{font-size:1.3rem;color:#fff}
/* ---- Fullscreen Hero Background Ken-Burns Slider (for /pdfs, /activities, /games) ---- */
.pdfs-hero.hero-kenburns{position:relative;overflow:hidden;border-radius:26px;padding:60px 48px 105px;margin:20px 0 6px;color:#fff;min-height:500px;display:flex;flex-direction:column;justify-content:center;background:#0b112c !important;box-shadow:0 30px 70px rgba(11,17,44,.5)}
.pdfs-hero.hero-kenburns::before{display:none !important}
.hero-kenburns .pdfs-orbs{display:none !important}
.hero-kenburns .pdfs-grid{opacity:.25;mix-blend-mode:overlay}
.hero-bg-slider{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:1;pointer-events:none}
.hero-bg-slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease-in-out;pointer-events:none}
.hero-bg-slide.active{opacity:1;z-index:2}
.hero-bg-slide img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transform:scale(1);transform-origin:center center;will-change:transform}
.hero-bg-slide.active img{animation:heroKenBurnsZoom 12s ease-in-out infinite alternate}
@keyframes heroKenBurnsZoom{
  0%{transform:scale(1.0) translate(0,0)}
  50%{transform:scale(1.08) translate(-0.8%,-0.5%)}
  100%{transform:scale(1.15) translate(0.5%,0.8%)}
}
.hero-bg-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(10,14,38,.88) 0%,rgba(10,14,38,.75) 45%,rgba(10,14,38,.35) 75%,rgba(10,14,38,.55) 100%),linear-gradient(180deg,rgba(10,14,38,.2) 0%,rgba(10,14,38,.65) 100%)}
.hero-kenburns .pdfs-hero-inner{position:relative;z-index:10;max-width:760px}
.hero-bg-indicators{position:absolute;bottom:24px;right:36px;z-index:12;display:flex;gap:8px;align-items:center}
.bg-ind{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.7);transition:all .4s ease;cursor:pointer}
.bg-ind.active{width:30px;background:linear-gradient(90deg,var(--cin-orange,#ff7f50),var(--cin-teal,#10aeb2));border-color:#fff;box-shadow:0 0 14px rgba(23,222,238,.75)}
@media(max-width:768px){
  .pdfs-hero.hero-kenburns{padding:42px 22px 70px;min-height:430px}
  .hero-bg-overlay{background:linear-gradient(180deg,rgba(10,14,38,.82) 0%,rgba(10,14,38,.92) 100%)}
  .hero-bg-indicators{bottom:14px;right:20px}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg-slide.active img{animation:none}
}

/* floating cover showcase — cards fan out, pull to front one by one with zoom */
.pdfs-showcase{position:absolute;top:50%;right:4%;width:320px;height:360px;transform:translateY(-50%);z-index:2}
.pf-card{position:absolute;left:50%;top:50%;width:150px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:2px solid rgba(255,255,255,.6);background:#0b2340;box-shadow:0 18px 44px rgba(0,0,0,.35);transform:translate(-50%,-50%) translate(var(--ex),var(--ey)) rotate(var(--er,0deg)) scale(var(--es,.78));opacity:.55;transform-style:preserve-3d;animation:pfCycle 6.5s cubic-bezier(.45,.05,.35,1) infinite;will-change:transform,opacity}
.pf-card img{width:100%;height:100%;object-fit:cover;display:block}
.pf-card video{width:100%;height:100%;object-fit:cover;display:block;background:#0b2340}
.showcase-916 .pf-card{aspect-ratio:9/16;width:112px}
.showcase-916.showcase-gif .pf-card{aspect-ratio:440/569}
.showcase-916 .pf-card img{object-fit:contain;background:#0b2340}
.pf-card::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 45%)}
@keyframes pfCycle{
  0%,6%{transform:translate(-50%,-50%) translate(var(--ex),var(--ey)) rotate(var(--er,0deg)) scale(var(--es,.78));opacity:.55;z-index:1}
  18%{transform:translate(-50%,-50%) rotate(0deg) scale(1.6);opacity:1;z-index:7;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 30px 6px rgba(255,127,80,.55),0 0 60px 14px rgba(23,222,238,.30),0 30px 70px rgba(0,0,0,.5)}
  30%{transform:translate(-50%,-50%) rotate(0deg) scale(1.6);opacity:1;z-index:7}
  42%{transform:translate(-50%,-50%) translate(var(--ex),var(--ey)) rotate(var(--er,0deg)) scale(var(--es,.78));opacity:.55;z-index:1}
  100%{transform:translate(-50%,-50%) translate(var(--ex),var(--ey)) rotate(var(--er,0deg)) scale(var(--es,.78));opacity:.55;z-index:1}
}
.pf-1{--ex:-96px;--ey:-58px;--er:-14deg;animation-delay:-.0s}
.pf-2{--ex:-28px;--ey:-96px;--er:7deg;animation-delay:-1.4s}
.pf-3{--ex:62px;--ey:-62px;--er:17deg;animation-delay:-2.8s}
.pf-4{--ex:-92px;--ey:42px;--er:-9deg;animation-delay:-4.2s}
.pf-5{--ex:52px;--ey:46px;--er:13deg;width:120px;animation-delay:-5.6s}
.pf-ring{position:absolute;border-radius:50%;border:2px dashed rgba(255,255,255,.35);animation:spin 24s linear infinite}
.pf-ring.r1{inset:10px}
.pf-ring.r2{inset:44px;animation-duration:38s}
@keyframes spin{to{transform:rotate(360deg)}}
/* filter panel */
.pdfs-filters{margin-top:22px}
.filter-panel{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px rgba(36,34,74,.10);padding:18px;backdrop-filter:blur(6px)}
.fp-search{display:flex;gap:10px}
.fp-search input{flex:1;padding:13px 18px;border:2px solid var(--line);border-radius:14px;font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease}
.fp-search input:focus{outline:none;border-color:var(--cin-teal2);box-shadow:0 0 0 4px rgba(16,174,178,.16)}
.fp-search .btn{border-radius:14px;padding:12px 24px;white-space:nowrap;background:linear-gradient(90deg,var(--cin-teal2),var(--cin-teal));border:0}
.fp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.fp-field{display:flex;flex-direction:column;gap:5px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#7a78a3}
.fp-field select{width:100%;padding:9px 11px;border:2px solid var(--line);border-radius:11px;font-size:.93rem;text-transform:none;letter-spacing:normal;font-weight:600;color:var(--ink);background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.fp-field select:focus{outline:none;border-color:var(--cin-teal2);box-shadow:0 0 0 4px rgba(16,174,178,.14)}
.fp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:13px;border-top:1px dashed var(--line)}
.fp-count{font-weight:800;color:var(--velvet);font-size:.95rem}
/* results header */
.results-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:28px 0 0}
.results-head h2{color:var(--cin-ink);margin:0;font-size:1.6rem;position:relative}
.results-head h2::after{content:"";position:absolute;left:0;bottom:-6px;width:52px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--cin-pink),var(--cin-orange),var(--cin-teal))}
/* result cards — cinematic */
.cards{margin-top:18px}
.card{display:flex;flex-direction:column;padding:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px rgba(36,34,74,.07);transform-style:flat;will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:3;background:linear-gradient(90deg,var(--cin-teal),var(--cin-pink),var(--cin-orange));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.card:hover{border-color:#cfd8ff;box-shadow:
  0 0 0 1px rgba(255,127,80,.25),
  0 0 22px 2px rgba(23,222,238,.35),
  0 0 44px 6px rgba(255,65,98,.28),
  0 0 80px 10px rgba(255,127,80,.18),
  0 22px 50px rgba(16,174,178,.25);
  transform:translateY(-5px);
  animation:cardGlow 2.4s ease-in-out infinite}
@keyframes cardGlow{
  0%,100%{box-shadow:
    0 0 0 1px rgba(255,127,80,.25),
    0 0 18px 2px rgba(23,222,238,.30),
    0 0 38px 5px rgba(255,65,98,.22),
    0 0 70px 9px rgba(255,127,80,.14),
    0 22px 50px rgba(16,174,178,.22)}
  50%{box-shadow:
    0 0 0 1px rgba(23,222,238,.30),
    0 0 30px 6px rgba(255,65,98,.40),
    0 0 60px 12px rgba(247,184,1,.28),
    0 0 96px 16px rgba(23,222,238,.22),
    0 22px 50px rgba(16,174,178,.25)}
}
.card-media{position:relative;display:block;aspect-ratio:1/1.12;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)}
.card-media img{width:100%;height:100%;object-fit:contain;object-position:center center;display:block;transform:none;will-change:transform;background:#fff}
.card:hover .card-media img{animation:none;transform:scale(1.03)}
@keyframes cinReveal{
  0%	{transform:scale(1) translateY(0)}
  100%	{transform:scale(1.03) translateY(0)}
}
.med-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,35,64,.55));opacity:0;transition:opacity .3s ease;pointer-events:none}
.card:hover .med-grad{opacity:1}
/* shimmer sweep */
.shine{position:absolute;top:0;left:-120%;height:100%;width:60%;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);z-index:2;pointer-events:none;opacity:0}
.card:hover .shine{animation:sheen .9s ease forwards}
@keyframes sheen{to{left:130%;opacity:1}}
/* preview eye badge */
.eye{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--cin-pink);font-size:.65rem;letter-spacing:.03em;opacity:0;transition:.28s cubic-bezier(.2,.7,.2,1);z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.card:hover .eye{opacity:1;transform:translate(-50%,-50%) scale(1)}
.card-pages{position:absolute;left:8px;bottom:8px;background:rgba(11,24,44,.78);color:#fff;font-size:.65rem;font-weight:800;border-radius:999px;padding:3px 7px;backdrop-filter:blur(3px);z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.card-body{display:flex;flex-direction:column;gap:3px;padding:6px 9px 8px;flex:1}
.card-badges{display:flex;gap:3px;flex-wrap:wrap}
.card-badges .badge{font-size:.62rem;padding:1px 6px}
.card-badges .badge{margin:0}
.card-body h3{margin:0;font-size:.82rem;line-height:1.22}
.card-body h3 a{color:var(--cin-ink);text-decoration:none;background-image:linear-gradient(90deg,var(--cin-pink),var(--cin-orange));background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;transition:background-size .3s ease,color .2s ease}
.card-body h3 a:hover{color:var(--cin-teal2);background-size:100% 2px}
.card-body .meta{font-size:.72rem;margin:0;line-height:1.25}
.card-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.card-actions .btn-sm{padding:4px 8px;font-size:.75rem}
.card-actions .btn-primary{background:linear-gradient(90deg,var(--cin-pink),var(--cin-orange));border:0;flex:1 1 auto;min-width:0;text-align:center}
.card-actions .btn:hover{transform:translateY(-2px)}
.card-actions .fav-btn{font-size:.82rem;flex:0 0 auto}
@media(max-width:900px){.fp-grid{grid-template-columns:repeat(2,1fr)}.pdfs-showcase{opacity:.35}.pdfs-hero-inner{max-width:100%}}
html{scroll-behavior:smooth}
.theme5,.results-head{scroll-margin-top:92px}
@media(max-width:720px){.pdfs-showcase{display:none}.pdfs-hero{padding:40px 22px 70px}.results-head h2{font-size:1.35rem}}
/* Filter panel: 1-col breakpoint raised to 680px — prevents cramped 2-col selects on 360-430px phones */
@media(max-width:680px){.fp-grid{grid-template-columns:1fr}.fp-search{flex-direction:column}.fp-search .btn{width:100%}.pdfs-stats{gap:16px}}
@media(prefers-reduced-motion:reduce){.pdfs-hero,.pdfs-grad,.pdfs-grid,.pdfs-orbs .orb,.pf-card,.pf-ring,.pdfs-pill{animation:none}.pdfs-showcase .pf-card{opacity:1;transform:translate(-50%,-50%)}
.reveal-inline{opacity:1;transform:none}.reveal{opacity:1;transform:none;transition:none}.card:hover{animation:none}}
/* safety net: bare .card content (no .card-body) never touches the gradient border */
.cards .card:not(:has(.card-body)):not(:has(.card-media)){padding:14px 16px;gap:8px}
.cards .card:not(:has(.card-body)):not(:has(.card-media)) h3{margin:0;line-height:1.35;overflow-wrap:anywhere}
.cards .card:not(:has(.card-body)):not(:has(.card-media)) .meta{line-height:1.6;overflow-wrap:anywhere}
.read .cards .card .meta{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.cms-body{line-height:1.75;font-size:1.03rem;color:#33414e}
.cms-body img{max-width:100%;height:auto;border-radius:12px}
.cms-body h2{color:#0b4b4e;margin:1.8em 0 .5em}
.cms-body ul,.cms-body ol{line-height:1.8}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:70;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.5);transition:transform .15s}
.wa-float:hover{transform:scale(1.08)}
.ai-float{position:fixed;right:16px;bottom:84px;z-index:70;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,#ff7f50,#ff4162);font-size:1.5rem;cursor:pointer;box-shadow:0 10px 28px rgba(255,65,98,.5);transition:transform .15s}
.ai-float:hover{transform:scale(1.08)}
@media (max-width: 768px) {
  .wa-float{right:auto;left:16px;bottom:16px;width:50px;height:50px}
  .wa-float svg{width:26px;height:26px}
  .ai-float{right:16px;bottom:16px;width:50px;height:50px;font-size:1.3rem}
  .ai-panel{right:12px;left:12px;width:auto;bottom:76px}
}
.ai-panel{position:fixed;right:16px;bottom:150px;z-index:71;width:min(340px,90vw);background:#fff;border:1px solid #dcebed;border-radius:18px;box-shadow:0 24px 60px rgba(11,43,76,.25);overflow:hidden}
.ai-panel[hidden],.ai-msgs[hidden],#aiForm[hidden],#aiLead[hidden]{display:none!important}
.ai-head{display:flex;justify-content:space-between;align-items:center;background:#0b4b4e;color:#fff;padding:10px 14px}
.ai-head button{background:none;border:0;color:#fff;font-size:1rem;cursor:pointer}
.ai-msgs{max-height:300px;overflow-y:auto;padding:12px;display:grid;gap:8px;align-content:start}
.ai-msgs p{margin:0;padding:8px 12px;border-radius:12px;font-size:.9rem;line-height:1.5;overflow-wrap:anywhere;max-width:100%}
.ai-bot{background:#f2fafb;color:#0b4b4e}
.ai-bot a{color:#0d7d81;font-weight:700}
.ai-bot code{background:#e6fbfc;border:1px solid #dcebed;border-radius:6px;padding:0 6px;font-size:.82rem}
.ai-me{background:#e6fbfc;color:#0b4b4e;justify-self:end}
#aiForm{display:flex;border-top:1px solid #dcebed}
#aiForm input{flex:1;min-width:0;border:0;padding:12px;outline:none;font-size:.9rem}
#aiForm button{border:0;background:#0b4b4e;color:#fff;padding:0 18px;cursor:pointer;font-size:1rem;flex:none}
#aiLead input{width:100%;max-width:100%;box-sizing:border-box;border:2px solid #dcebed;border-radius:10px;padding:10px 12px;font-size:.9rem}
#aiLead .btn{margin:4px 12px 12px}
.read.pdf-ac h1,.read.pdf-ac .lede{text-align:center}
.read.pdf-ac .cta-row{justify-content:center}
/* ===== interactive activities + games ===== */
.play-hero{position:relative;overflow:hidden;border-radius:26px;padding:52px 40px 60px;margin:20px 0 6px;color:#fff;background:linear-gradient(120deg,#0b2b4c 0%,#3d2f9e 40%,#0d7d81 100%);box-shadow:0 30px 70px rgba(20,13,70,.35)}
.play-root{background:#fff;border:1px solid #dcebed;border-radius:20px;padding:22px;box-shadow:0 14px 34px rgba(11,43,76,.10);margin:14px 0}
.play-top{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:12px;font-weight:800;color:#0b4b4e}
.hud-score b,.hud-timer b{color:#0b4b4e}
.play-qbar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.play-progress{flex:1;height:10px;background:#e8f0f4;border-radius:999px;overflow:hidden}
.play-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#17deee,#ff7f50);transition:width .3s}
.play-body h3{color:#0b4b4e;margin:.4em 0}
.play-opts{display:grid;gap:10px;margin:12px 0}
.play-opt{padding:13px 16px;border:2px solid #dcebed;border-radius:14px;background:#fff;font:inherit;font-weight:700;color:#0b4b4e;cursor:pointer;text-align:left;transition:all .15s}
.play-opt:hover:not(:disabled){border-color:#17deee;transform:translateY(-2px)}
.play-opt.right{border-color:#1c9c1c;background:#e8f9e8}
.play-opt.wrong{border-color:#ff4162;background:#fdeef1}
.play-opt.sm{padding:8px 12px;font-size:.9rem}
.play-opt:disabled{cursor:default;opacity:.85}
.play-msg{min-height:1.6em;font-weight:700;color:#0d7d81}
.match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:12px 0}
.match-grid.mem{grid-template-columns:repeat(4,1fr)}
.match-card{padding:16px 8px;border:2px solid #dcebed;border-radius:14px;background:#f2fafb;font:inherit;font-weight:800;color:#0b4b4e;cursor:pointer;min-height:64px;transition:all .15s}
.match-card.sel{border-color:#ff7f50;background:#fff4e8;transform:scale(1.05)}
.match-card.done{border-color:#1c9c1c;background:#e8f9e8;opacity:.75}
.mem-card{font-size:1.1rem}
.mem-card.open{border-color:#17deee;background:#fff}
.play-root input[type=text],.play-root input:not([type]){width:100%;max-width:420px;padding:12px 14px;border:2px solid #dcebed;border-radius:12px;font-size:1rem;margin:8px 0}
.play-root input:focus{outline:none;border-color:#17deee;box-shadow:0 0 0 4px rgba(16,174,178,.16)}
.shake{animation:shk .35s}
@keyframes shk{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.build-word{display:flex;gap:8px;flex-wrap:wrap;min-height:56px;margin:10px 0}
.build-tiles{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tile{width:52px;height:52px;border-radius:14px;border:2px solid #17deee;background:#e9fcfd;font-size:1.4rem;font-weight:900;color:#0b4b4e;cursor:pointer}
.tile:disabled{opacity:.3}
.tile.used{border-color:#ff7f50;background:#fff4e8}
.sort-bins{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.sort-bin{padding:16px;border:3px dashed #17deee;border-radius:14px;background:#f2fafb;cursor:pointer;font:inherit;color:#0b4b4e}
.sort-bin strong{display:block;font-size:1.05rem}
.sort-items{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.sort-item{padding:10px 16px;border:2px solid #dcebed;border-radius:999px;background:#fff;font:inherit;font-weight:700;cursor:pointer}
.sort-item.sel{border-color:#ff7f50;background:#fff4e8}
.sort-item.done{border-color:#1c9c1c;background:#e8f9e8;color:#5b6b76}
.order-list{display:grid;gap:8px;margin:12px 0}
.order-item{display:flex;gap:10px;align-items:center;padding:12px 14px;border:2px solid #dcebed;border-radius:12px;background:#fff;font:inherit;font-weight:700;color:#0b4b4e;cursor:pointer;text-align:left;width:100%}
.order-item.sel{border-color:#ff7f50;background:#fff4e8}
.ord-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e9fcfd;font-weight:900;flex:none}
.catch-area{position:relative;height:340px;background:linear-gradient(180deg,#e9fcfd,#f2fafb);border:2px solid #dcebed;border-radius:16px;overflow:hidden;margin:10px 0}
.catch-item{position:absolute;top:-8%;min-width:56px;min-height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,#ff7f50,#ff4162);color:#fff;font-size:1.3rem;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(255,65,98,.4);padding:10px 14px}
.catch-item.is-good{background:linear-gradient(135deg,#22c55e,#15803d)}
.catch-item.is-bad{background:linear-gradient(135deg,#f472b6,#9333ea)}
.catch-num{font-size:1.35rem}
/* ===== dynamic visuals (SVG icons, viz chips) ===== */
.viz{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#0b4b4e}
.viz svg{flex:none;filter:drop-shadow(0 3px 6px rgba(11,43,76,.18))}
.match-card .viz,.sort-item .viz,.play-opt .viz{pointer-events:none}
.big-letter{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#17deee,#0d7d81);color:#fff;font-size:1.5rem;font-weight:900}
.big-num{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:999px;background:linear-gradient(135deg,#ff7f50,#ff4162);color:#fff;font-size:1.3rem;font-weight:900}
.q-media{margin:10px 0}
.q-icon{font-size:1.6rem}
.count-viz{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;padding:12px;background:#f2fafb;border:2px dashed #17deee;border-radius:14px}
.cv-e{font-size:1.7rem;line-height:1}
.sort-bin .bin-icon{display:block;margin:6px 0}
.sort-count{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:999px;background:#0b4b4e;color:#fff;font-weight:900;margin-top:6px}
.card-back{font-size:1.8rem;color:#9db8c0;font-weight:900}
.pat-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0;padding:14px;background:#f2fafb;border:2px dashed #17deee;border-radius:14px}
.pat-token{display:inline-grid;place-items:center}
.pat-token.pat-num{min-width:48px;height:48px;padding:0 10px;border-radius:12px;background:#fff;border:2px solid #dcebed;font-size:1.3rem;font-weight:900;color:#0b4b4e}
.pat-token.pat-letter{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#17deee,#0d7d81);color:#fff;font-size:1.5rem;font-weight:900}
.pat-arrow{font-size:1.2rem;font-weight:900;color:#9db8c0}
.pat-arrow.pat-q{width:48px;height:48px;display:inline-grid;place-items:center;border-radius:12px;border:2px dashed #ff7f50;color:#ff7f50;font-size:1.5rem}
.q-wordicon{display:inline-block;vertical-align:middle;margin-left:8px}
.q-wordicon svg{display:block}
.sort-bins.bins-3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.data-table-wrap{overflow-x:auto;margin:10px 0}
.play-done{text-align:center;padding:20px 10px}
.play-stars{font-size:2.6rem;color:#ff7f50;letter-spacing:.1em}
.lvl-item{border:1px solid #dcebed;border-radius:12px;padding:12px;margin:10px 0}
.lvl-item.done{border-color:#1c9c1c;background:#f7fcfc}
.quick-answer{background:#e9fcfd;border:2px solid #10aeb2;border-radius:12px;padding:12px 16px;margin:14px 0;line-height:1.65}
.gate-overlay{position:fixed;inset:0;z-index:90;background:rgba(11,43,76,.55);display:grid;place-items:center;padding:18px}
.gate-overlay[hidden]{display:none}
.gate-card{background:#fff;border-radius:20px;padding:28px;max-width:420px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.gate-card h2{color:#0b4b4e;margin:.2em 0 .4em}
.gate-card form{display:grid;gap:10px;margin:14px 0}
.gate-card input{padding:12px 14px;border:2px solid #dcebed;border-radius:12px;font-size:1rem;width:100%;box-sizing:border-box}
/* game/activity cards */
.gcard{border-top:0}
.gmedia{aspect-ratio:16/10;background:#0b2b4e}
.gmedia img{object-fit:cover}
.g-ico{position:absolute;left:12px;top:10px;font-size:2rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));z-index:2}
.g-ph{position:absolute;right:10px;bottom:10px;background:rgba(11,24,44,.72);color:#ffe9a8;font-size:.68rem;font-weight:800;border-radius:999px;padding:3px 10px;z-index:2}
.gcard:hover{transform:translateY(-6px)}
.gbanner{border-radius:18px;overflow:hidden;margin:12px 0;border:1px solid #dcebed}
.gbanner img{width:100%;height:auto;max-height:300px;object-fit:cover;display:block}
/* ===== PDF page layout upgrades ===== */
.inside-grid{grid-template-columns:180px 1fr}
.read .spec-pills{display:flex;flex-wrap:wrap;gap:8px}
.read .spec-pills div{background:#f4f8fa;border:1px solid var(--pro-line);border-radius:999px;padding:6px 14px;display:flex;gap:8px;align-items:baseline}
.read .spec-pills strong{font-size:.72rem}
.read .spec-pills span{font-size:.88rem}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-row a{background:#f2fafb;border:1px solid #dcebed;border-radius:999px;padding:6px 14px;text-decoration:none;font-weight:700;font-size:.88rem;color:#0b4b4e;transition:transform .15s ease,background .15s ease}
.chip-row a:hover{background:#e6fbfc;transform:translateY(-2px)}
.use-strip{grid-template-columns:repeat(4,1fr)}
.use-strip .card-body{text-align:center}
.rel-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.rel-tabs button{border:2px solid #dcebed;background:#fff;border-radius:999px;padding:8px 18px;font-weight:800;font-size:.9rem;color:#0b4b4e;cursor:pointer;transition:all .2s ease}
.rel-tabs button.on{background:linear-gradient(90deg,var(--cin-pink),var(--cin-orange));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(255,65,98,.3)}
.end-cta{background:linear-gradient(120deg,#ff7f50,#ff4162);color:#fff;border-radius:20px;padding:32px 28px;margin:32px 0 16px;text-align:center}
.end-cta h2{color:#fff!important;border:0!important;margin:0 0 .3em!important;padding:0!important}
.end-cta h2::before{display:none!important}
.end-cta p{color:#fff;opacity:.92}
.end-cta .cta-row{justify-content:center}
.end-cta .btn-ghost{border-color:#fff;color:#111;background:#fff}
.end-news{background:#f2fafb;border:1px solid #dcebed;border-radius:16px;padding:20px;display:grid;gap:8px;margin:0 0 16px}
.end-news form{display:flex;gap:8px}
.end-news input{flex:1}
@media(max-width:1100px){.use-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
.grid-2, .pdf-detail-grid{display:flex !important;flex-direction:column !important;width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important}
.grid-2 > *, .pdf-detail-grid > *, article.read{min-width:0 !important;max-width:100% !important;width:100% !important;box-sizing:border-box !important}
.grid-2 .rail, .pdf-rail{display:contents;width:100% !important;max-width:100% !important}
.grid-2 .rail-card{order:2}
.grid-2 .rail-share-card{order:-2}
.grid-2 .rail-bundle-card{order:-1}
.grid-2 article.read{order:0}
.end-news{box-sizing:border-box;max-width:100%}
.end-news form{flex-direction:column}
.end-news input,.end-news button{width:100%;box-sizing:border-box}
.use-strip{grid-template-columns:1fr}
}

/* Workbook activity PDF embed */
.pdf-embed{margin:14px 0 26px;border:1px solid #e3eef3;border-radius:16px;overflow:hidden;background:#f7fbfd;box-shadow:0 8px 26px rgba(23,222,238,.10)}
.pdf-embed iframe{display:block;width:100%;height:min(88vh,900px);border:0}
.read-side .card-body .cta-row{flex-wrap:wrap}
@media(max-width:640px){.pdf-embed iframe{height:70vh}}

/* ===== PARENTS / TEACHERS HUB PAGE ===== */
.hub-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#0496a3 0%,#0b6b82 45%,#0b2b4c 100%);color:#fff;padding:72px 0 64px}
.hub-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 340px at 18% -10%,rgba(247,184,1,.25),transparent 60%),radial-gradient(700px 400px at 105% 18%,rgba(23,222,238,.22),transparent 60%)}
.hub-hero-orbs{position:absolute;inset:0;pointer-events:none}
.hub-hero-orbs .orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;animation:floaty 12s ease-in-out infinite}
.hub-hero-orbs .o1{width:240px;height:240px;left:-40px;top:-30px;background:#ff7f50}
.hub-hero-orbs .o2{width:200px;height:200px;right:6%;top:14%;background:#17deee}
.hub-hero-orbs .o3{width:170px;height:170px;left:38%;bottom:-30px;background:#ff4162}
.hub-hero-grid{position:absolute;left:0;right:0;bottom:0;height:40%;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;transform:perspective(600px) rotateX(55deg) scale(1.4);transform-origin:center bottom;animation:gridDrift 16s linear infinite;opacity:.5;mask-image:linear-gradient(transparent,#000 45%)}
.hub-hero-inner{position:relative;z-index:3;max-width:720px}
.hub-hero .brand-kicker a{color:#17deee;border-bottom-color:rgba(236,242,132,.6)}
@media(max-width:700px){.hub-hero{padding:48px 0 40px}}

/* ── value props grid ── */
.hub-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.hub-value{background:#fff;border:1px solid #dcebed;border-radius:20px;padding:28px 22px;box-shadow:0 10px 30px rgba(16,174,178,.10);transition:transform .18s ease,box-shadow .18s ease}
.hub-value:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(16,174,178,.18)}
.hub-value-ico{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#e6fbfc,#f7fbd8);font-size:1.8rem;margin-bottom:10px}
.hub-value h3{color:#0b4b4e;margin:.3em 0 .2em}
.hub-value p{color:#4a6572;line-height:1.6;margin:0}
@media(max-width:820px){.hub-values{grid-template-columns:1fr}}

/* ── testimonials ── */
.hub-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.hub-testi{background:#fff;border:1px solid #dcebed;border-radius:20px;padding:26px 22px;margin:0;box-shadow:0 10px 30px rgba(16,174,178,.10);display:flex;flex-direction:column;gap:8px;position:relative;transition:transform .18s ease,box-shadow .18s ease}
.hub-testi:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(16,174,178,.18)}
.hub-testi::before{content:"❝";position:absolute;top:14px;right:18px;font-size:2.6rem;color:#ecf284;line-height:1}
.hub-testi p{color:#33414e;font-size:1.05rem;line-height:1.65;font-style:italic;margin:0}
.hub-testi cite{color:#5b6b76;font-style:normal;font-weight:700;font-size:.9rem}
.hub-testi .stars{color:#ff7f50;font-size:1.1rem;letter-spacing:.08em}
@media(max-width:820px){.hub-testimonials{grid-template-columns:1fr}}

/* ── FAQ accordion ── */
.hub-faq{max-width:780px;margin:20px auto 0;display:grid;gap:10px}
.hub-faq-item{background:#fff;border:1px solid #dcebed;border-radius:16px;padding:0;overflow:hidden;box-shadow:0 6px 18px rgba(16,174,178,.07);transition:box-shadow .2s ease}
.hub-faq-item:hover{box-shadow:0 10px 28px rgba(16,174,178,.14)}
.hub-faq-item summary{padding:16px 20px;font-weight:800;color:#0b4b4e;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:1.02rem}
.hub-faq-item summary::-webkit-details-marker{display:none}
.hub-faq-item summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#e6fbfc,#f7fbd8);color:#0b4b4e;font-size:1.2rem;font-weight:900;transition:transform .25s ease}
/* Step Custom Images (.n-img) */
.dx-step .n.n-img {
  background: transparent;
  padding: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
}
.dx-step .n.n-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== REDESIGNED HOME COMPONENTS ===== */

/* 1. Browse by grade - Clean Static Multi-Color Glowing Cards (Side-by-Side Random Glow) */
.dx-grade-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 2px solid #10aeb2;
  border-radius: 20px;
  padding: 18px;
  text-decoration: none;
  color: #0b4b4e;
  box-shadow: 0 8px 24px rgba(16, 174, 178, 0.16), 0 0 12px rgba(16, 174, 178, 0.12);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  will-change: transform;
  transform: translateZ(0);
  position: relative;
}

/* 6 Varied Side-by-Side Static Glow Themes */
.dx-grade-card:nth-child(6n+1) {
  border-color: #10aeb2;
  box-shadow: 0 8px 24px rgba(16, 174, 178, 0.16), 0 0 12px rgba(16, 174, 178, 0.12);
}
.dx-grade-card:nth-child(6n+1) .g-card-icon { background: rgba(16, 174, 178, 0.08); }

.dx-grade-card:nth-child(6n+2) {
  border-color: #ff7f50;
  box-shadow: 0 8px 24px rgba(255, 127, 80, 0.18), 0 0 12px rgba(255, 127, 80, 0.14);
}
.dx-grade-card:nth-child(6n+2) .g-card-icon { background: rgba(255, 127, 80, 0.08); }

.dx-grade-card:nth-child(6n+3) {
  border-color: #ff4162;
  box-shadow: 0 8px 24px rgba(255, 65, 98, 0.18), 0 0 12px rgba(255, 65, 98, 0.14);
}
.dx-grade-card:nth-child(6n+3) .g-card-icon { background: rgba(255, 65, 98, 0.08); }

.dx-grade-card:nth-child(6n+4) {
  border-color: #8a2be2;
  box-shadow: 0 8px 24px rgba(138, 43, 226, 0.18), 0 0 12px rgba(138, 43, 226, 0.14);
}
.dx-grade-card:nth-child(6n+4) .g-card-icon { background: rgba(138, 43, 226, 0.08); }

.dx-grade-card:nth-child(6n+5) {
  border-color: #00b4d8;
  box-shadow: 0 8px 24px rgba(0, 180, 216, 0.18), 0 0 12px rgba(0, 180, 216, 0.14);
}
.dx-grade-card:nth-child(6n+5) .g-card-icon { background: rgba(0, 180, 216, 0.08); }

.dx-grade-card:nth-child(6n+6) {
  border-color: #ffb703;
  box-shadow: 0 8px 24px rgba(255, 183, 3, 0.20), 0 0 12px rgba(255, 183, 3, 0.15);
}
.dx-grade-card:nth-child(6n+6) .g-card-icon { background: rgba(255, 183, 3, 0.10); }

/* Hover Effects */
.dx-grade-card:hover {
  transform: translateY(-5px);
}
.dx-grade-card:nth-child(6n+1):hover {
  box-shadow: 0 16px 36px rgba(16, 174, 178, 0.32), 0 0 20px rgba(16, 174, 178, 0.25);
}
.dx-grade-card:nth-child(6n+2):hover {
  box-shadow: 0 16px 36px rgba(255, 127, 80, 0.34), 0 0 20px rgba(255, 127, 80, 0.25);
}
.dx-grade-card:nth-child(6n+3):hover {
  box-shadow: 0 16px 36px rgba(255, 65, 98, 0.34), 0 0 20px rgba(255, 65, 98, 0.25);
}
.dx-grade-card:nth-child(6n+4):hover {
  box-shadow: 0 16px 36px rgba(138, 43, 226, 0.34), 0 0 20px rgba(138, 43, 226, 0.25);
}
.dx-grade-card:nth-child(6n+5):hover {
  box-shadow: 0 16px 36px rgba(0, 180, 216, 0.34), 0 0 20px rgba(0, 180, 216, 0.25);
}
.dx-grade-card:nth-child(6n+6):hover {
  box-shadow: 0 16px 36px rgba(255, 183, 3, 0.36), 0 0 20px rgba(255, 183, 3, 0.25);
}

.g-card-icon {
  font-size: 2.2rem;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #f2fafb;
  border-radius: 14px;
  flex-shrink: 0;
}
.g-card-content { flex: 1; min-width: 0; }
.g-card-content h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0b4b4e;
}
.g-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecf284;
  color: #333;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.g-count { margin: 0; font-size: 0.84rem; color: #5b6b76; }
.g-card-arrow {
  font-size: 1.2rem;
  font-weight: 800;
  color: #10aeb2;
  transition: transform 0.2s ease;
}
.dx-grade-card:hover .g-card-arrow { transform: translateX(4px); color: #ff4162; }

/* 2. Popular Subjects / Explore - Modern Pill Grid */
.dx-grid-subs-pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.dx-sub-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #dcebed;
  border-radius: 18px;
  padding: 14px 18px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(16, 174, 178, 0.06);
  transition: all 0.2s ease;
  min-width: 0;
}
.dx-sub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(16, 174, 178, 0.15);
  border-color: #ff7f50;
  background: linear-gradient(135deg, #ffffff 0%, #fffbf7 100%);
}
.s-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.s-card-left .s-ico {
  font-size: 1.8rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.s-card-left > div {
  min-width: 0;
  flex: 1;
}
.s-card-left strong {
  display: block;
  font-size: 1.05rem;
  color: #0b4b4e;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-card-left small {
  display: block;
  color: #5b6b76;
  font-size: 0.82rem;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-card-btn {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0b4b4e;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.dx-sub-card:hover .s-card-btn {
  background: linear-gradient(135deg, #ff7f50, #ff4162);
  color: #ffffff;
}

/* 3. Community Reviews / Testimonials */
.testi-card-pro {
  background: #ffffff;
  border: 1.5px solid #dcebed;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(16, 174, 178, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  transition: all 0.2s ease;
}
.testi-card-pro:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(16, 174, 178, 0.16);
  border-color: #17deee;
}
.t-stars { color: #ff7f50; font-size: 1.15rem; letter-spacing: 2px; }
.t-text { font-size: 1.02rem; line-height: 1.6; color: #33414e; font-style: italic; margin: 0; }
.t-author { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.t-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 900;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.t-author strong { display: block; font-size: 0.95rem; color: #0b4b4e; }
.t-author span { display: block; font-size: 0.78rem; color: #5b6b76; }

/* 4. Keep Exploring - Tag Cloud Chips */
.dx-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #ffffff;
  border: 1.5px solid #dcebed;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0b4b4e;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}
.dx-tag-chip:hover {
  background: linear-gradient(135deg, #17deee, #10aeb2);
  color: #ffffff;
  border-color: #17deee;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 174, 178, 0.25);
}

/* 5. Why Parents Switch - Large Image Feature Cards */
.trust-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.trust-card {
  background: #ffffff;
  border: 1.5px solid #dcebed;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 174, 178, 0.08);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.trust-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(16, 174, 178, 0.18);
  border-color: #17deee;
}
.trust-card-media {
  height: 210px;
  overflow: hidden;
  position: relative;
  background: #f2fafb;
}
.trust-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.trust-card:hover .trust-card-media img {
  transform: scale(1.05);
}
.trust-placeholder-img {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.trust-placeholder-img span {
  font-size: 3.5rem;
}
.trust-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.trust-card-body h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b4b4e;
}
.trust-card-body p {
  margin: 0;
  color: #5b6b76;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Micro-Interaction Motion Enhancements */
.trust-card:hover .trust-placeholder-img span {
  transform: scale(1.15) rotate(5deg);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dx-media-item {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  overflow: hidden;
  border-radius: 16px;
}
.dx-media-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 36px rgba(16, 174, 178, 0.22);
}
.dx-media-item img, .dx-media-item video {
  transition: transform 0.4s ease;
}
.dx-media-item:hover img, .dx-media-item:hover video {
  transform: scale(1.06);
}

.btn-dx {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background 0.2s ease;
}
.btn-dx:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
}
.btn-dx:active {
  transform: translateY(0) scale(0.98);
}

/* ===== HIGH IMPACT "EASY AS 1-2-3" IMAGE-FIRST STEP GRID ===== */
.how-it-works-sec {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbfb 100%);
  padding: 80px 0;
}

.how-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 10px;
}

.how-img-card {
  background: #ffffff;
  border: 1.5px solid #dcebed;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(16, 174, 178, 0.08);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.how-img-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(16, 174, 178, 0.18);
  border-color: #17deee;
}

.how-card-media {
  height: 200px;
  overflow: hidden;
  position: relative;
  background: #f2fafb;
}

.how-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.how-img-card:hover .how-card-media img {
  transform: scale(1.06);
}

.step-tag-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

.step-tag-pill.s1 { background: linear-gradient(135deg, #10aeb2, #17deee); }
.step-tag-pill.s2 { background: linear-gradient(135deg, #ff7f50, #ffb703); }
.step-tag-pill.s3 { background: linear-gradient(135deg, #ff4162, #ff7f50); }

/* Visual Placeholders when no custom step image is uploaded */
.how-visual-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.how-visual-placeholder.v1 { background: linear-gradient(135deg, #e6fbfc, #d9f7f9); }
.how-visual-placeholder.v2 { background: linear-gradient(135deg, #fff3eb, #ffe5d4); }
.how-visual-placeholder.v3 { background: linear-gradient(135deg, #ffeef1, #ffd9e0); }

.v-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.v-graphic .v-emoji {
  font-size: 3.2rem;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.how-img-card:hover .v-graphic .v-emoji {
  transform: scale(1.18) rotate(6deg);
}

.v-search-bar, .v-preview-badge, .v-print-badge {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b4b4e;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.how-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.how-card-body h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0b4b4e;
}

.how-card-body p {
  margin: 0 0 18px;
  color: #5b6b76;
  font-size: 0.95rem;
  line-height: 1.6;
}

.how-card-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #10aeb2;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
}

.how-img-card:hover .how-card-link {
  color: #ff4162;
  transform: translateX(4px);
}

/* Shimmer Highlight Effect */
.dx-shimmer {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
}
.dx-shimmer::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 70%
  );
  transform: rotate(30deg);
  animation: shimmerSweep 4s infinite;
}

@keyframes shimmerSweep {
  0% { transform: translateX(-100%) rotate(30deg); }
  25%, 100% { transform: translateX(100%) rotate(30deg); }
}

/* ===== SCREEN VS PAPER STORY SECTION ===== */
.screen-story-sec {
  background: linear-gradient(180deg, #f8fcfd 0%, #ffffff 100%);
  padding: 85px 0;
}

.screen-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.story-card {
  background: #ffffff;
  border: 1.5px solid #dcebed;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(16, 174, 178, 0.08);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(16, 174, 178, 0.18);
  border-color: #17deee;
}

.story-card-media {
  height: 210px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.story-card:hover .story-card-media img {
  transform: scale(1.06);
}

.act-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 2;
  white-space: nowrap;
  will-change: transform, opacity;
}

.act-red { background: linear-gradient(135deg, #ff4162, #e63946); }
.act-teal { background: linear-gradient(135deg, #10aeb2, #17deee); }
.act-gold { background: linear-gradient(135deg, #ff7f50, #ffb703); }

/* Visual Placeholders for Story Acts */
.story-visual-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}

.story-visual-ph.ph-screen { background: linear-gradient(135deg, #fff0f2, #ffe5e8); }
.story-visual-ph.ph-paper { background: linear-gradient(135deg, #e6fbfc, #d9f7f9); }
.story-visual-ph.ph-pride { background: linear-gradient(135deg, #fff3eb, #ffe8d6); }

.story-screen-glow,
.story-paper-glow,
.story-pride-glow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.story-emoji {
  font-size: 3.5rem;
  display: block;
  margin: 0 auto 8px;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.story-card:hover .story-emoji {
  transform: scale(1.18);
}

.story-alert-tag {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #d90429;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin: 0 auto;
  display: inline-block;
}

.story-alert-tag.green-tag { color: #0d7d81; }
.story-alert-tag.gold-tag { color: #d95d28; }

.story-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
}

.story-card-body h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0b4b4e;
  text-align: center;
}

.story-card-body p {
  margin: 0 0 18px;
  color: #5b6b76;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
}

.story-stat-pill {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 12px;
  margin: 0 auto;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  will-change: transform, opacity;
  margin-top: auto;
}

.red-pill { background: #ffebee; color: #c62828; }
.teal-pill { background: #e6fbfc; color: #0d7d81; }
.gold-pill { background: #fff8e1; color: #854d0e; font-weight: 800; }

/* Story Banner CTA Box */
.story-banner-cta {
  margin-top: 40px;
  background: linear-gradient(135deg, #0b4b4e 0%, #0d1738 100%);
  border-radius: 22px;
  padding: 32px 36px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 16px 40px rgba(11, 75, 78, 0.22);
}

.story-cta-text h4 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
}

.story-cta-text p {
  margin: 0;
  color: #cdeef1;
  font-size: 0.98rem;
}

.story-cta-btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .story-banner-cta {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
  }
  .story-cta-btns {
    flex-direction: column;
    width: 100%;
  }
}

/* ===== PSYCHOLOGICAL & EMOTIONAL HOOK COMPONENTS ===== */
.hk-grid-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 32px 0 24px;
}

.hk-banner {
  background: #ffffff;
  border: 1.5px solid #dcebed;
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 28px rgba(16, 174, 178, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.hk-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 174, 178, 0.16);
  border-color: #17deee;
}

.hk-banner.hk-eye {
  background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
  border-color: #cceef0;
}

.hk-banner.hk-fomo {
  background: linear-gradient(135deg, #ffffff 0%, #fff9f5 100%);
  border-color: #ffe4d6;
}

.hk-banner.hk-act {
  background: linear-gradient(135deg, #ffffff 0%, #f2fbfb 100%);
  border-color: #c7f2f5;
  margin: 24px 0 32px;
}

.hk-banner.hk-game {
  background: linear-gradient(135deg, #0b4b4e 0%, #0d1738 100%);
  border-color: #10aeb2;
  color: #ffffff;
  margin: 24px 0 32px;
}
.hk-banner.hk-game .hk-text p { color: #cdeef1; }
.hk-banner.hk-game .hk-text strong { color: #ffffff; }

.hk-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.hk-text {
  flex: 1;
  min-width: 0;
}

.hk-text strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0b4b4e;
  margin-bottom: 3px;
}

.hk-text p {
  margin: 0;
  font-size: 0.88rem;
  color: #5b6b76;
  line-height: 1.5;
}

.hk-pill {
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.hk-pill.green { background: #e6fbfc; color: #0d7d81; }
.hk-pill.gold { background: #fff3eb; color: #d95d28; }
.hk-pill.cyan { background: #10aeb2; color: #ffffff; }
.hk-pill.neon { background: linear-gradient(135deg, #ff7f50, #ff4162); color: #ffffff; }

@media (max-width: 640px){
  .hk-banner{
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    padding: 18px 16px;
  }
  .hk-icon{font-size: 2rem;}
  .hk-text{width: 100%;}
  .hk-text strong{font-size: 1rem; line-height: 1.35;}
  .hk-text p{font-size: 0.86rem;}
  .hk-pill{align-self: flex-start; margin-top: 2px;}
}
@media (min-width: 641px){
  .hk-grid-duo{grid-auto-rows: 1fr;}
  .hk-banner{height: 100%; align-items: center;}
}

/* Single Page Development & Safety Box */
.hk-box-single {
  background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
  border: 1.5px solid #dcebed;
  border-radius: 22px;
  padding: 26px 28px;
  margin: 28px 0;
  box-shadow: 0 10px 30px rgba(16, 174, 178, 0.08);
}

.hk-single-header {
  margin-bottom: 20px;
}

.hk-single-header .hk-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  background: #e6fbfc;
  color: #0d7d81;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hk-single-header h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: #0b4b4e;
}

.hk-single-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.hk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hk-item .hk-ico {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.hk-item strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  color: #0b4b4e;
  margin-bottom: 3px;
}

.hk-item small {
  display: block;
  font-size: 0.84rem;
  color: #5b6b76;
  line-height: 1.5;
}

/* ===== MASTERCLASS CONVERSION BOOSTERS ===== */
.conv-social-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #f7fcfd;
  border: 1px solid #dcebed;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0b4b4e;
  margin: 12px 0 18px;
}

.csb-stars { color: #ff7f50; letter-spacing: 2px; }
.csb-rating { color: #0b4b4e; font-weight: 800; }
.csb-sep { color: #cbd5e1; }
.csb-downloads { color: #d95d28; }
.csb-badge {
  background: #e6fbfc;
  color: #0d7d81;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.conv-value-box {
  background: linear-gradient(135deg, #ffffff 0%, #fff9f5 100%);
  border: 2px solid #ff7f50;
  border-radius: 20px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 12px 36px rgba(255, 127, 80, 0.14);
  position: relative;
}

.cvb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1.5px dashed #ffd4c2;
}

.cvb-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cvb-mrp {
  font-size: 1.1rem;
  text-decoration: line-through;
  color: #94a3b8;
  font-weight: 700;
}

.cvb-deal {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ff4162;
}

.cvb-save {
  font-size: 0.78rem;
  font-weight: 800;
  background: #ff4162;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.cvb-pill {
  font-size: 0.8rem;
  font-weight: 800;
  background: #10aeb2;
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 999px;
}

.cvb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.cvb-list li {
  font-size: 0.9rem;
  color: #33414e;
  line-height: 1.4;
}

.cvb-list li strong {
  color: #0b4b4e;
}

/* ===== PRICING PITCH BOX ===== */
.pitch-box {
  background: #fff;
  border: 2px solid #e2eef2;
  border-radius: 22px;
  padding: 24px 22px 20px;
  margin: 22px 0;
  box-shadow: 0 10px 40px rgba(11, 43, 76, 0.10);
  position: relative;
  overflow: hidden;
}
.pitch-box::before {
  content: none;
}
.pitch-header {
  text-align: center;
  margin-bottom: 16px;
}
.pitch-label {
  display: inline-block;
  background: linear-gradient(135deg, #ff7f50, #ff4162);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.pitch-sub {
  font-size: 0.88rem;
  color: #5b7a8a;
  margin: 4px 0 0;
}
.pitch-tabs {
  display: flex;
  gap: 6px;
  background: #f2fafb;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 18px;
}
.ptab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 11px;
  padding: 9px 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5b7a8a;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  white-space: nowrap;
  position: relative;
}
.ptab.active {
  background: #fff;
  color: #0b4b4e;
  box-shadow: 0 2px 12px rgba(11, 43, 76, 0.12);
}
.ptab-badge {
  display: inline-block;
  background: #ff4162;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 3px;
  text-transform: uppercase;
}
.pitch-panel {
  animation: pitchFadeIn .2s ease;
}
@keyframes pitchFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pitch-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pp-mrp {
  font-size: 1.05rem;
  text-decoration: line-through;
  color: #94a3b8;
  font-weight: 700;
}
.pp-deal {
  font-size: 2.4rem;
  font-weight: 900;
  color: #ff4162;
  line-height: 1;
}
.pp-badge {
  font-size: 0.75rem;
  font-weight: 900;
  background: #ff4162;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pp-per {
  font-size: 0.85rem;
  color: #5b7a8a;
  font-weight: 600;
  margin-left: 2px;
}
.pitch-per-month {
  font-size: 0.82rem;
  color: #10aeb2;
  font-weight: 700;
  margin: -4px 0 10px;
}
.pitch-item-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0b4b4e;
  margin: 0 0 12px;
  padding: 6px 12px;
  background: #f2fafb;
  border-radius: 8px;
  border: 1px solid #10aeb2;
}
.pitch-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}
.pitch-list li {
  font-size: 0.88rem;
  color: #33414e;
  line-height: 1.4;
}
.pitch-list li strong { color: #0b4b4e; }
.pitch-buy-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  padding: 14px 20px;
  border-radius: 14px;
  letter-spacing: .01em;
}
.pitch-note {
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;
  margin: 8px 0 0;
}
.pitch-popular-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff7f50, #ff4162);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .pp-deal { font-size: 1.9rem; }
  .ptab { font-size: 0.75rem; padding: 8px 4px; }
}

/* LIVE SOCIAL PROOF TOAST */
.social-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: #ffffff;
  border: 1.5px solid #10aeb2;
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 14px 40px rgba(11, 43, 76, 0.18);
  z-index: 99999;
  transform: translateY(120px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  max-width: 380px;
  width: min(380px, calc(100vw - 32px));
}
@media (max-width: 640px){
  .social-toast{
    left: 12px;
    right: 12px;
    bottom: 76px; /* clear wa/ai floats */
    max-width: none;
    width: auto;
  }
}

.social-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* flat vector icon alignment (replaces emoji icons site-wide) */
.hk-icon svg,.dx-step .n svg,.story-emoji svg,.trust-default-icon svg,.c-icon svg,.dx-icon-btn svg,
.ai-float svg,.g-card-icon svg,.g-ico svg,.wb-act-main-icon svg,.card-badges svg,.badge svg,
.kid-gate-emoji svg,.kid-mascot svg,.kid-mini-mascot svg,.kid-step-emoji svg,.kid-medal svg,
.kid-sound-btn svg,.btn svg,.btn-dx svg,.kid-gate-btn svg {
  vertical-align: middle;
}
.kid-mascot svg,.kid-mini-mascot svg,.kid-medal svg,.hk-icon svg,.wb-act-main-icon svg {
  width: 1.35em;
  height: 1.35em;
}

.st-avatar {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #f2fafb;
  border-radius: 50%;
  flex-shrink: 0;
}

.st-avatar.st-avatar-svg {
  overflow: hidden;
}

.st-avatar.st-avatar-svg svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.st-body {
  flex: 1;
  min-width: 0;
}

.st-body strong {
  display: block;
  font-size: 0.88rem;
  color: #0b4b4e;
  font-weight: 800;
}

.st-body p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #5b6b76;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.st-body p span {
  color: #ff4162;
  font-weight: 700;
}


/* PATHSHALA INSIGHT BANNER */
.pathshala-insight-box {
  background: linear-gradient(135deg, #ffffff, #f2fafb);
  border: 2px solid #10aeb2;
  border-radius: 20px;
  padding: 20px 24px;
  margin: 24px 0;
  box-shadow: 0 10px 30px rgba(16, 174, 178, 0.12);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pathshala-insight-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(16, 174, 178, 0.2);
}

.pib-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dcebed;
}

.pib-tag {
  font-size: 0.8rem;
  font-weight: 800;
  background: #ecf284;
  color: #0b4b4e;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

.pib-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: #10aeb2;
}

.pib-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pib-stat {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ff4162;
  background: #fff0f3;
  border: 1.5px solid #ff7f50;
  border-radius: 16px;
  padding: 10px 18px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 65, 98, 0.15);
  flex-shrink: 0;
}

.pib-info h4 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: #0b4b4e;
  font-weight: 800;
}

.pib-info p {
  margin: 0;
  font-size: 0.92rem;
  color: #33414e;
  line-height: 1.45;
}


/* 30-SECOND FOMO POPUP MODAL */
.fomo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 35, 64, 0.75);
  backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.fomo-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.fomo-modal-card {
  background: #ffffff;
  border: 3px solid #ff4162;
  border-radius: 28px;
  max-width: 540px;
  width: 100%;
  padding: 32px 28px;
  position: relative;
  box-shadow: 0 24px 60px rgba(255, 65, 98, 0.3);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fomo-modal-overlay.show .fomo-modal-card {
  transform: scale(1) translateY(0);
}

.fomo-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: #f2fafb;
  border: 1px solid #dcebed;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  color: #5b6b76;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.fomo-close:hover {
  background: #ffe3d3;
  color: #ff4162;
}

.fomo-warning-badge {
  display: inline-block;
  background: #ff4162;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 8px;
  animation: pulseGlow 2s infinite;
}

.fomo-header h2 {
  font-size: 1.45rem;
  color: #0b4b4e;
  margin: 4px 0 16px;
  line-height: 1.3;
  font-weight: 900;
}

.fomo-danger-box {
  background: #fff0f3;
  border: 2px solid #ff4162;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.fomo-danger-ico {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.fomo-danger-box p {
  margin: 0;
  font-size: 0.88rem;
  color: #33414e;
  line-height: 1.45;
}

.fomo-danger-box p strong {
  color: #ff4162;
}

.fomo-points {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}

.fomo-points li {
  font-size: 0.88rem;
  color: #33414e;
  line-height: 1.4;
  background: #f2fafb;
  border: 1px solid #dcebed;
  border-radius: 12px;
  padding: 10px 14px;
}

.fomo-cta-wrap {
  text-align: center;
}

.fomo-btn {
  width: 100%;
  display: block;
  background: linear-gradient(135deg, #ff7f50, #ff4162);
  color: #ffffff !important;
  font-weight: 900;
  font-size: 1.05rem;
  padding: 15px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(255, 65, 98, 0.4);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fomo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255, 65, 98, 0.55);
}

.fomo-guarantee {
  font-size: 0.78rem;
  color: #5b6b76;
  margin: 10px 0 0;
  font-weight: 700;
}

/* ===== REDESIGNED BROWSE BY ACTIVITY CARDS ===== */
.alt-bg-soft {
  background: linear-gradient(180deg, #f8fdfd 0%, #ffffff 100%);
  padding: 64px 0;
}

.wb-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.wb-act-card {
  background: #ffffff;
  border: 1.5px solid #dcebed;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(16, 174, 178, 0.06);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  position: relative;
}

.wb-act-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(16, 174, 178, 0.16);
  border-color: #10aeb2;
}

.wb-act-media {
  height: 110px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.25s ease;
}

.wb-act-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wb-act-main-icon {
  font-size: 3rem;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wb-act-card:hover .wb-act-main-icon {
  transform: scale(1.18);
}

.wb-act-tag-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: #0b4b4e;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wb-act-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  flex: 1;
  justify-content: space-between;
}

.wb-act-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0b4b4e;
  line-height: 1.35;
}

.wb-act-arrow {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0d7d81;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s ease;
}

/* ===== FEATURE & TRUST SHOWCASE SECTION (ABOVE FOOTER) ===== */
.trust-showcase-sec {
  background: #ffffff;
  padding: 64px 0 50px;
}

.trust-showcase-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.trust-showcase-head {
  text-align: center;
  margin-bottom: 40px;
}

.trust-showcase-head h2 {
  font-size: 2.2rem;
  margin: 0.35em 0 0;
  color: #0b4b4e;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.trust-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.trust-card {
  background: #ffffff;
  border: 1.5px solid #e1f0f2;
  border-radius: 20px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-shadow: 0 6px 18px rgba(16, 174, 178, 0.05);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Color Motion Border Overlay on Hover */
.trust-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

.trust-card.c-cyan:hover::after { background: linear-gradient(135deg, #10aeb2, #17deee); opacity: 1; }
.trust-card.c-red:hover::after { background: linear-gradient(135deg, #ff4162, #ff7f50); opacity: 1; }
.trust-card.c-orange:hover::after { background: linear-gradient(135deg, #ff7f50, #ffb703); opacity: 1; }
.trust-card.c-teal:hover::after { background: linear-gradient(135deg, #0d7d81, #10aeb2); opacity: 1; }
.trust-card.c-purple:hover::after { background: linear-gradient(135deg, #7b2ff7, #17deee); opacity: 1; }
.trust-card.c-gold:hover::after { background: linear-gradient(135deg, #ffb703, #ff7f50); opacity: 1; }

.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(16, 174, 178, 0.14);
}

.trust-img-wrap {
  width: 75px;
  height: 75px;
  border-radius: 16px;
  overflow: visible;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-cyan .trust-img-wrap,
.c-red .trust-img-wrap,
.c-orange .trust-img-wrap,
.c-teal .trust-img-wrap,
.c-purple .trust-img-wrap,
.c-gold .trust-img-wrap {
  background: transparent;
  border: 0;
}

.trust-admin-img {
  width: 100%;
  height: 100%;
  max-width: 75px;
  max-height: 75px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: auto;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-card:hover .trust-img-wrap {
  transform: scale(1.08);
}

.trust-card:hover .trust-admin-img {
  transform: scale(1.32);
}

.trust-default-icon {
  font-size: 3rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  user-select: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-card:hover .trust-default-icon {
  transform: scale(1.35);
}

/* Fallback Media Placeholder with Color Gradient Pulse */
.trust-media-ph {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.trust-media-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-100%);
  animation: phSweep 3s infinite;
}

@keyframes phSweep {
  100% { transform: translateX(100%); }
}

.trust-text {
  text-align: center;
}

.trust-text h3 {
  margin: 0 0 6px;
  font-size: 1.06rem;
  font-weight: 800;
  color: #0b4b4e;
}

.trust-text p {
  margin: 0;
  color: #5b6b76;
  font-size: 0.9rem;
  line-height: 1.5;
}

.trust-icon-wrap.cyan { background: #e6fbfc; color: #0d7d81; }
.trust-icon-wrap.red { background: #fff0f2; color: #ff4162; }
.trust-icon-wrap.orange { background: #fff3eb; color: #ff7f50; }
.trust-icon-wrap.teal { background: #e6fbf8; color: #10aeb2; }
.trust-icon-wrap.purple { background: #f3effe; color: #7b2ff7; }
.trust-icon-wrap.gold { background: #fff8e6; color: #ffb703; }

.trust-feat-info h3 {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 800;
  color: #0b4b4e;
}

.trust-feat-info p {
  margin: 0;
  color: #5b6b76;
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .trust-features-grid {
    grid-template-columns: 1fr;
  }
}




/* === FIX PACK 2026-09-07: layout/contrast/a11y/print === */
@media (max-width:900px){
  .dx-header,
  .home .dx-header,
  .home .dx-header:not(.scrolled),
  .dx-header.scrolled,
  .home .dx-header.scrolled{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:99990 !important;
    background:#ffffff !important;
    background-color:#ffffff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:1px solid #e2eef2 !important;
    box-shadow:0 2px 14px rgba(11,43,76,.10) !important;
    margin-bottom:0 !important;
    overflow:visible !important;
  }
  .home .dx-hero-grid{padding-top:16px !important}
  .dx-top{display:flex !important;flex-wrap:nowrap !important;justify-content:space-between !important;align-items:center !important;padding:10px 14px !important;gap:8px !important}
  .dx-logo{flex-shrink:0 !important}
  .dx-logo-img{height:44px !important;width:auto !important}
  .dx-cta{display:none !important}
  .dx-icon-btn#searchBtn{margin-left:auto !important;color:#0b4b4e !important;padding:8px !important;min-width:44px !important;min-height:44px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}
  .menu-btn{display:inline-flex !important;margin-left:4px !important;min-width:44px !important;min-height:44px !important;background:linear-gradient(135deg,#10aeb2,#0b4b4e) !important;color:#fff !important;border-radius:12px !important;box-shadow:0 4px 12px rgba(11,75,78,0.25) !important}
}
.card:focus-within .eye,.card:hover .eye{opacity:1}
.card .eye:focus-within{opacity:1}
/* readable minimums on small screens */
@media (max-width:560px){
  .card-body h3{font-size:1rem}
  .card .meta,.card-body .meta{font-size:.88rem}
  .card-badges .badge,.badge{font-size:.76rem}
  .pdfs-showcase{display:none}
  .dx-top input[type=search]{min-width:0;width:100%}
  .hk-grid-duo{grid-template-columns:1fr}
  .bar-row{grid-template-columns:110px 1fr 48px}
}
@media (max-width:380px){
  .dx-cta .btn-dx{padding:8px 12px;font-size:.85rem}
  .use-strip{grid-template-columns:1fr}
}
/* contrast: darken CTA text/shadow for AA on orange */
.btn-dx,.btn-primary{text-shadow:0 1px 1px rgba(0,0,0,.28)}
.foot-news-btn,.btn-dx{background:linear-gradient(135deg,#e56a2e,#d92645)}
.pro-eyebrow,.dx-eyebrow,.pdfs-pill{color:#083b3d;background:rgba(255,255,255,.85)}
.pdfs-sub{color:#fff}
/* print: zero-waste pure worksheet print optimization */
@media print{
  @page{
    size: auto;
    margin: 8mm 10mm 8mm 10mm;
  }
  *, *::before, *::after{
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  header, footer, nav, aside,
  .dx-header, .site-header, .dx-footer, .site-footer, .pro-footer,
  .foot-newsletter-bar-sec, .trust-showcase-sec, .rail, .pitch-box, .social-bar,
  .cta-row, .end-cta, .end-news, .fomo-bar, .wa-float, .ai-float, .ai-panel,
  #scrollProgress, .dx-drawer, .dx-overlay, .menu-btn, .mobile-nav,
  .cookie-consent-bar, #cookieConsentBanner, .cookie-banner, .cookie-modal,
  #globalQuotaModal, #previewQuotaMask, #quotaOverlay, .modal-overlay, .ai-quota-mask,
  .dx-tag-cloud, .filter-panel, .results-head,
  .pager, .pagination, .card-actions, .btn, .btn-dx, .btn-primary, button,
  input, select, textarea, .pwa-install-banner, .cp-curr-switcher,
  .whatsapp-floating-btn, .chat-widget, #searchDrawer, #searchOverlay,
  .skip, .no-print, [aria-hidden="true"]{
    display: none !important;
  }
  .wrap, .dx-wrap, .container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .pdf-frame, iframe[src*=".pdf"]{
    width: 100% !important;
    height: 100vh !important;
    min-height: 98vh !important;
    border: none !important;
  }
  .sheet-paper, #worksheetSheet, .hw-sheet, .rc-sheet, .ws-sheet, .a4-sheet,
  .cpz-sheet-paper, .worksheet-content, .worksheet-print-area{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 6mm 8mm !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  .worksheet-card, .sheet-section, .exercise-card, .problem-card,
  .problem-row, .grid-card, .puzzle-card, .q-item{
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .answer-key-section, #answerKeyBlock{
    page-break-before: always !important;
    break-before: page !important;
  }
  a{
    color: #000000 !important;
    text-decoration: none !important;
  }
}

/* === RESPONSIVE FIX PACK 2: 320px min-width, pager, insight, footer, touch (2026-09-07) === */
/* pager: wrap + compress on tiny screens (numbers hidden, nav kept) */
.pager{flex-wrap:wrap;row-gap:8px}
@media (max-width:480px){
  .pager{gap:8px}
  .pager .btn{padding:8px 12px;font-size:.85rem}
  .pager a.pg-num{display:none}
}
/* insight banner: stack stat above text on phones */
.pib-content{flex-wrap:wrap}
@media (max-width:560px){
  .pib-content{flex-direction:column;align-items:flex-start;gap:12px}
}
/* footer contact cards: let email wrap instead of forcing page wider */
.foot-contact-item > div{min-width:0;flex:1}
.foot-contact-item strong{overflow-wrap:anywhere}
/* icon-only close button: 44px touch target */
.st-close{min-width:44px;min-height:44px;display:grid;place-items:center}
/* touch devices: 16px form text stops iOS zoom-on-focus; roomy buttons */
@media (pointer:coarse){
  input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=url],input[type=password],textarea,select{font-size:16px}
  .btn{min-height:44px}
  .foot-links a{display:inline-block;padding:6px 0}
}

/* === RESPONSIVE FIX PACK 3: mobile alignment & readability (2026-09-07) === */
@media (max-width: 640px){
  /* hero: bigger elements to fill space after stats removal */
  .dx-hero{padding:36px 0 28px !important;}
  .dx-hero h1{font-size:clamp(1.85rem,7.2vw,2.75rem) !important; line-height:1.16; text-align:left; margin:.20em 0 .32em !important;}
  .dx-hero-flow{min-height:50px;gap:6px 10px !important;}
  .flow-step{font-size:0.95rem !important;}
  .dx-hero .lede{font-size:1.10rem !important; text-align:left; max-width:none; margin:0 0 22px !important; line-height:1.50 !important;}
  .dx-hero-search{margin:0 0 14px !important; border-radius:16px;}
  .dx-hero-search input{padding:17px 18px !important; font-size:1.05rem !important;}
  .dx-hero-search button{padding:0 28px !important; font-size:1.05rem !important;}
  .dx-hero-grid{gap:24px !important;}
  .dx-eyebrow{font-size:.95rem !important; padding:9px 18px !important; text-align:left; margin-bottom:14px !important;}
  /* pdfs hero */
  .pdfs-hero{padding:32px 18px 48px !important; text-align:left;}
  .pdfs-pill{font-size:.74rem !important;}
  .pdfs-grad{font-size:clamp(1.7rem,7vw,2.4rem) !important; text-align:left;}
  .pdfs-sub{font-size:.97rem !important; text-align:left; margin-bottom:16px !important;}
  .pdfs-actions .btn{width:100%; justify-content:center;}
  .pdfs-stats{gap:14px 18px !important; justify-content:flex-start;}
  /* filters */
  .filter-panel{padding:14px !important;}
  .results-head{margin:18px 0 0 !important; text-align:left;}
  .results-head h2{text-align:left;}
  /* cards: larger tap targets, left-aligned text, readable meta */
  .cards{gap:14px !important; margin-top:16px !important;}
  .card-body{padding:10px 12px 12px !important; text-align:left;}
  .card-body h3{font-size:.96rem !important; line-height:1.35 !important; text-align:left;}
  .card-body .meta{font-size:.83rem !important; text-align:left;}
  .card-badges .badge{font-size:.74rem !important;}
  .card-actions{gap:8px !important;}
  .card-actions .btn-sm{flex:1 1 calc(50% - 4px); text-align:center; min-height:42px; display:inline-grid; place-items:center;}
  /* theme / showcase */
  .theme5 .theme-card h3{font-size:1.05rem !important; text-align:left;}
  .topic-row{text-align:left;}
  .trust-showcase-head{padding:0 4px !important; text-align:left !important;}
  .trust-showcase-head h2{text-align:left;}
  .trust-card-body{text-align:left !important;}
  .trust-card-media{height:180px !important;}
  .trust-features-grid{gap:16px !important;}
  /* footer newsletter */
  .foot-news-wrap{flex-direction:column; align-items:stretch !important; text-align:left !important;}
  .foot-news-text{text-align:left;}
  .foot-news-form{max-width:100% !important;}
  .pro-foot-wrap{padding:0 16px !important;}
  /* article / detail */
  .inside-grid{text-align:left;}
  .read>p,.read>ul,.read>ol{font-size:1rem !important; text-align:left;}
  .read>h2{font-size:1.25rem !important; text-align:left;}
  .end-cta{padding:24px 18px !important; text-align:left !important;}
  .end-cta .cta-row{justify-content:flex-start !important;}
  .cta-banner{padding:22px 16px !important; text-align:left;}
  .pro-band-cta{padding:40px 16px !important;}
}

/* --- PDF detail page: sticky right rail (share + pricing) --- */
.pdf-detail-grid{grid-template-columns:minmax(0,1fr) 350px;align-items:start}
.pdf-rail{display:grid;gap:14px;align-self:start}
.pdf-rail .side-card{background:#fff;border:1px solid #dcebed;border-radius:16px;padding:14px 16px;box-shadow:0 6px 24px rgba(11,43,76,.07)}
.pdf-rail .side-card h3{margin:0 0 10px;color:#0b4b4e;font-size:1rem}
.pdf-rail .side-card .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.pdf-rail .side-card .cta-row .btn{width:100%;justify-content:center;margin:0;padding:9px 10px;font-size:.9rem}
.pdf-rail .share-copy-btn{grid-column:1/-1}
.pdf-rail .pitch-box{margin:0}
.pdf-rail .side-toc{flex-direction:column;align-items:flex-start;gap:7px;padding:14px 16px}
.pdf-rail .side-toc strong{font-size:.95rem}
.pdf-rail .side-toc a{font-size:.92rem;color:#0d7d81}
.pdf-rail .side-toc a:hover{text-decoration:underline}
.pdf-rail .side-proof h3,.pdf-rail .side-news h3,.pdf-rail .side-extra h3{font-size:.98rem;margin:0 0 8px}
.pdf-rail .side-proof h3:not(:first-child),.pdf-rail .side-extra h3:not(:first-child){margin-top:14px}
.pdf-rail .proof-row{font-size:.9rem;color:#33414e;line-height:1.5;margin:0 0 10px}
.pdf-rail .proof-num{font-weight:900;color:#ff4162;font-size:1.15rem}
.pdf-rail .proof-vote{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#5b7a8a}
.pdf-rail .vote-btn{background:#f2fafb;border:1px solid #dcebed;border-radius:10px;padding:4px 10px;font-size:1rem;cursor:pointer;transition:transform .12s,background .15s}
.pdf-rail .vote-btn:hover{background:#e6fbfc;transform:translateY(-1px)}
.pdf-rail .vote-msg{font-size:.82rem;color:#0b4b4e;font-weight:700}
.pdf-rail .news-sub{font-size:.86rem;color:#5b7a8a;margin:0 0 10px;line-height:1.45}
.pdf-rail .news-form{display:grid;gap:8px}
.pdf-rail .news-form input[type=email]{border:1px solid #dcebed;border-radius:10px;padding:10px 12px;font-size:.92rem;width:100%}
.pdf-rail .side-extra .extra-qr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:4px}
.pdf-rail .side-extra h3:first-child{text-align:center}
.pdf-rail .extra-qr img{border:1px solid #e2eef2;border-radius:10px;flex:none}
.pdf-rail .extra-qr span{font-size:.85rem;color:#5b7a8a;line-height:1.4}
.pdf-rail .print-tips{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pdf-rail .print-tips li{font-size:.86rem;color:#33414e;line-height:1.45;padding-left:18px;position:relative}
.pdf-rail .print-tips li::before{content:'✓';position:absolute;left:0;color:#10aeb2;font-weight:900}
@media(max-width:1280px){.pdf-detail-grid{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:900px){.pdf-detail-grid{display:flex !important;flex-direction:column !important;width:100% !important;max-width:100% !important}.pdf-rail{position:static;width:100% !important;max-width:100% !important}}

/* ===== PDF detail page: readability & typography polish ===== */
html{scroll-behavior:smooth}
.read [id]{scroll-margin-top:96px}

/* headline & intro */
.read h1{font-size:2.05rem;line-height:1.18;letter-spacing:-.015em;margin:.2em 0 .35em;text-wrap:balance}
.read .lede{font-size:1.16rem;line-height:1.7;color:#435968;max-width:60ch;margin:0 0 1.2em;text-wrap:pretty}

/* body copy rhythm */
.read>p{font-size:1.06rem;line-height:1.85;color:#33414e;margin:0 0 1.1em;text-wrap:pretty}
.read strong{color:#0b4b4e;font-weight:700}
.read .meta{line-height:1.65;font-size:.92rem}

/* section headings */
.read>h2{font-size:1.5rem;line-height:1.3;letter-spacing:-.01em;margin:2.4em 0 .8em;text-wrap:balance}
.read>h3{font-size:1.12rem;line-height:1.4;margin:1.8em 0 .55em}

/* lists */
.read ul:not(.check) li,.read ol li{line-height:1.78}
.read .check li{font-size:1rem;line-height:1.7}
.read .sample-lines{font-size:.96rem;line-height:1.7}
.read .sample-lines li{margin:7px 0}

/* spec / details grid */
.read .spec-grid div{padding:12px 14px;border-radius:12px;background:#f7fbfc}
.read .spec-grid strong{font-size:.72rem;letter-spacing:.1em}
.read .spec-grid span{font-size:.95rem;line-height:1.45;display:block;margin-top:2px}

/* faq & accordions */
.read details{line-height:1.7}
.read details summary{font-size:1.02rem;padding:2px 0}

/* pdf preview frame */
.read .pdf-frame{border-radius:16px;border-color:#dcebed;box-shadow:0 12px 36px rgba(11,43,76,.10)}

/* word chips */
.read .word-chips span{font-size:.85rem;padding:5px 14px}

/* ---- right rail polish ---- */
.pdf-rail{font-size:.92rem;line-height:1.55}
.pdf-rail .side-toc strong{text-transform:uppercase;font-size:.76rem;letter-spacing:.09em;color:#5b7a8a}
.pdf-rail .side-toc a{line-height:1.5}
.pdf-rail .pitch-list li{line-height:1.55}
.pdf-rail .pitch-note{line-height:1.5}
.pdf-rail .proof-row,.pdf-rail .news-sub,.pdf-rail .print-tips li,.pdf-rail .extra-qr span{text-align:left}

/* related mini-list */
.pdf-rail .side-rel h3{margin-bottom:10px}
.pdf-rail .rel-mini{display:grid;gap:6px}
.pdf-rail .rel-mini-row{display:flex;align-items:center;gap:10px;text-decoration:none;padding:5px 6px;border-radius:10px;transition:background .15s}
.pdf-rail .rel-mini-row:hover{background:#f2fafb}
.pdf-rail .rel-mini-row img{width:52px;height:52px;object-fit:cover;border:1px solid #e2eef2;border-radius:8px;flex:none;background:#fff}
.pdf-rail .rel-mini-row span{font-size:.9rem;font-weight:700;color:#0b4b4e;line-height:1.35}
.pdf-rail .rel-all{display:block;margin-top:10px;font-size:.88rem;font-weight:800;color:#0d7d81;text-decoration:none}
.pdf-rail .rel-all:hover{text-decoration:underline}

/* trust badges */
.pdf-rail .trust-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pdf-rail .trust-badges span{background:#f2fafb;border:1px solid #dcebed;border-radius:10px;padding:8px 10px;font-size:.82rem;font-weight:700;color:#0b4b4e;text-align:center;line-height:1.3}

/* live activity (fomo) */
.pdf-rail .side-fomo{display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,#f2fbf3,#eef9fb);border-color:#c9ecd2}
.pdf-rail .side-fomo #railFomoText{font-size:.85rem;color:#2f5e43;line-height:1.5}
.pdf-rail .side-fomo #railFomoText strong{color:#1e7a46}
.pdf-rail .fomo-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;flex:none;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:fomoPulse 2s infinite}
@keyframes fomoPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ===== KID ACTIVITY PAGE ===== */
.kid-page{background:linear-gradient(180deg,#FFF6E5 0%,#E8F7FF 40%,#F3FFE8 100%);min-height:100vh;padding:26px 16px 60px}
.kid-page h1,.kid-page h2,.kid-page h3{color:#2D3142;letter-spacing:-.01em}
.kid-hero{text-align:center;max-width:640px;margin:0 auto 26px}
.kid-mascot{display:inline-block;font-size:4.2rem;line-height:1;animation:kidBounce 2.2s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
@keyframes kidBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.kid-hero h1{font-size:2.5rem;font-weight:900;margin:.2em 0 .25em}
.kid-sub{font-size:1.18rem;line-height:1.6;color:#4A5165;margin:0 0 14px}
.kid-sub strong{color:#E76F51}
.kid-stars-chip{display:inline-block;background:#fff;border:3px solid #FFD166;border-radius:999px;padding:7px 18px;font-weight:900;color:#8a6d00;font-size:.95rem;box-shadow:0 4px 0 rgba(255,209,102,.5)}
.kid-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:760px;margin:0 auto 30px}
.kid-step{position:relative;display:grid;justify-items:center;gap:5px;text-align:center;background:#fff;border:3px solid #2D3142;border-radius:22px;padding:20px 12px 16px;text-decoration:none;box-shadow:0 6px 0 #2D3142;transition:transform .15s}
.kid-step:hover{transform:translateY(-4px)}
.kid-step-num{position:absolute;top:-13px;left:-9px;width:30px;height:30px;border-radius:50%;background:#FF6F61;color:#fff;font-weight:900;display:grid;place-items:center;border:3px solid #2D3142;font-size:.9rem}
.kid-step-emoji{font-size:2.1rem;line-height:1}
.kid-step strong{font-size:1.05rem;color:#2D3142}
.kid-step small{font-size:.83rem;color:#6B7280;line-height:1.35}
.kid-game-wrap{max-width:620px;margin:0 auto 34px}
.kid-game-card{background:#fff;border:3px solid #2D3142;border-radius:26px;padding:22px 22px 26px;box-shadow:0 8px 0 #2D3142}
.kid-game-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.kid-game-head h2{margin:0;font-size:1.35rem}
.kid-progress{display:flex;gap:5px}
.kid-dot{width:12px;height:12px;border-radius:50%;background:#E5E7EB;border:2px solid #2D3142}
.kid-dot.now{background:#FFD166}
.kid-dot.ok{background:#7ED957}
.kid-q{font-size:2rem;font-weight:900;text-align:center;color:#2D3142;line-height:1.35;min-height:74px;display:grid;place-items:center;margin-bottom:14px}
.kid-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kid-opt{background:#E8F7FF;border:3px solid #2D3142;border-radius:18px;padding:16px 10px;font-size:1.5rem;font-weight:900;color:#2D3142;cursor:pointer;box-shadow:0 5px 0 #2D3142;transition:transform .12s,background .15s}
.kid-opt:hover{background:#D6F0FF;transform:translateY(-3px)}
.kid-opt.good{background:#7ED957;animation:kidPop .35s}
.kid-opt.bad{background:#FFB3B3;opacity:.75}
@keyframes kidPop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.kid-fb{min-height:28px;text-align:center;font-size:1.1rem;font-weight:800;color:#2D3142;margin-top:12px}
.kid-done{text-align:center;padding:10px 0 4px}
.kid-done-emoji{font-size:3.4rem;display:inline-block;animation:kidBounce 1.8s infinite}
.kid-done h3{font-size:1.5rem;margin:.3em 0}
.kid-done p{font-size:1.1rem;font-weight:800;color:#4A5165;margin:0 0 16px}
.kid-done-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.kid-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#4FC3F7;border:3px solid #2D3142;border-radius:999px;padding:12px 24px;font-size:1.02rem;font-weight:900;color:#2D3142;text-decoration:none;box-shadow:0 5px 0 #2D3142;transition:transform .13s;cursor:pointer}
.kid-btn:hover{transform:translateY(-3px)}
.kid-btn-yellow{background:#FFD166}
.kid-btn-green{background:#7ED957}
.kid-btn-big{background:linear-gradient(120deg,#FF6F61,#FF9F43);color:#fff;font-size:1.2rem;padding:16px 34px;box-shadow:0 6px 0 #2D3142}
.kid-print{max-width:640px;margin:0 auto 34px}
.kid-print-card{background:#fff;border:3px dashed #B388EB;border-radius:26px;padding:22px;text-align:center}
.kid-print-card h2{margin:0 0 4px}
.kid-print-sub{color:#6B7280;font-size:.95rem;margin:0 0 14px}
.kid-pdf-frame{border:3px solid #2D3142;border-radius:18px;overflow:hidden;margin-bottom:18px;background:#f4f8fb}
.kid-pdf-frame iframe{display:block;width:100%;height:420px;border:0}
.kid-more{max-width:760px;margin:0 auto 26px;text-align:center}
.kid-more h2{margin-bottom:14px}
.kid-more-row{display:flex;gap:12px;overflow-x:auto;padding:6px 4px 14px;justify-content:flex-start}
.kid-chip{flex:none;width:112px;background:#fff;border:3px solid #2D3142;border-radius:18px;padding:8px;text-decoration:none;box-shadow:0 5px 0 #2D3142;transition:transform .14s}
.kid-chip:hover{transform:translateY(-4px)}
.kid-chip img{width:92px;height:92px;object-fit:cover;border-radius:12px;border:2px solid #E5E7EB;display:block;margin:0 auto 6px}
.kid-chip span{display:block;font-size:.8rem;font-weight:800;color:#2D3142;line-height:1.3}
.kid-parent-note{text-align:center;font-size:.9rem;color:#6B7280;margin:26px 0 0}
.kid-parent-note a{color:#0d7d81;font-weight:800}
.kid-confetti{position:fixed;top:-40px;z-index:9999;pointer-events:none;animation:kidFall 2.8s ease-in forwards}
@keyframes kidFall{to{transform:translateY(105vh) rotate(360deg);opacity:.9}}
@media(max-width:640px){.kid-hero h1{font-size:1.9rem}.kid-steps{grid-template-columns:1fr}.kid-opt{font-size:1.25rem}.kid-q{font-size:1.6rem}.kid-pdf-frame iframe{height:320px}}

/* kid game micro-engagement */
.kid-game-title{display:grid;gap:8px}
.kid-game-tools{display:flex;align-items:center;gap:10px}
.kid-game-mascot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kid-mini-mascot{font-size:1.7rem;line-height:1;transition:transform .2s}
.kid-bubble{background:#FFF6E5;border:2px solid #2D3142;border-radius:14px;padding:5px 12px;font-size:.85rem;font-weight:800;color:#2D3142;position:relative;max-width:230px;line-height:1.35}
.kid-bubble::before{content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:#2D3142}
.kid-streak{background:#FFEBD6;border:2px solid #FF6F61;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:900;color:#c2410c;animation:kidPop .35s}
.kid-sound-btn{background:#fff;border:3px solid #2D3142;border-radius:12px;font-size:1.05rem;padding:3px 9px;cursor:pointer;box-shadow:0 3px 0 #2D3142;transition:transform .12s}
.kid-sound-btn:hover{transform:translateY(-2px)}
.kid-dot.bad{background:#FFB3B3}
.kid-shake{animation:kidShake .45s}
@keyframes kidShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.kid-medal{font-size:4rem;display:inline-block;animation:kidBounce 1.6s infinite}
.kid-star-row{font-size:2.2rem;letter-spacing:.12em;line-height:1.2}
.kid-star-row .on{color:#FFB800;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.kid-star-row .off{color:#E5E7EB}
.kid-record{font-weight:900;color:#c2410c;font-size:1rem;margin:-6px 0 10px}

/* kid unlock gate */
.kid-page [hidden]{display:none !important}
.kid-gate{position:fixed;inset:0;z-index:10000;background:rgba(45,49,66,.62);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;overflow:auto}
.kid-gate-card{position:relative;width:min(440px,100%);background:#fff;border:3px solid #2D3142;border-radius:26px;box-shadow:0 10px 0 #2D3142;padding:26px 22px 20px;text-align:center;animation:kidGateIn .35s}
@keyframes kidGateIn{from{transform:translateY(30px) scale(.92);opacity:0}to{transform:none;opacity:1}}
.kid-gate-emoji{font-size:3rem;display:inline-block;animation:kidBounce 1.8s infinite}
.kid-gate-card h2{margin:.15em 0 .2em;font-size:1.6rem}
.kid-gate-sub{color:#4A5165;font-size:.98rem;margin:0 0 16px}
.kid-gate-opts{display:grid;gap:10px}
.kid-gate-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:3px solid #2D3142;border-radius:16px;padding:12px 14px;font-weight:900;font-size:.98rem;color:#2D3142;text-decoration:none;box-shadow:0 4px 0 #2D3142;transition:transform .13s}
.kid-gate-btn:hover{transform:translateY(-3px)}
.kid-gate-btn.ig{background:linear-gradient(120deg,#FEDA75,#D62976);color:#fff}
.kid-gate-btn.yt{background:#FF0000;color:#fff}
.kid-gate-btn.st{background:#7ED957}
.kid-gate-or{color:#9CA3AF;font-weight:800;font-size:.85rem;margin:12px 0 10px}
.kid-gate-form{display:grid;gap:9px}
.kid-gate-form input[type=email]{border:3px solid #2D3142;border-radius:14px;padding:11px 14px;font-size:.95rem;text-align:center}
.kid-gate-note{font-size:.78rem;color:#6B7280;margin:12px 0 0;line-height:1.45}
/* fix: empty fav buttons show a heart instead of a bare circle */
.fav-btn:empty::before{content:'\2661'}
.fav-btn.on:empty::before{content:'\2665'}
/* fav hearts: red active */
.fav-btn.on:empty::before{color:#ff4162}
/* fav hearts: grey outline idle, filled red active (svg inherits currentColor) */
.fav-btn{color:#8a9ba5}
.fav-btn svg{width:1.1em;height:1.1em}
.fav-btn.on{color:#ff4162}
.fav-btn.on svg path{fill:#ff4162}

/* ---- Store cards v2 (attractive) ---- */
.sc .card-body{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px}
.sc .card-badges{margin-bottom:2px}
.sc-type{display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--cin-orange),var(--cin-pink));border-radius:999px;padding:3px 10px;margin-right:6px;box-shadow:0 4px 10px rgba(255,65,98,.22)}
.sc-price-row{display:flex;align-items:baseline;gap:8px;margin:4px 0 8px;flex-wrap:wrap}
.sc-price-row .price{font-size:1.5rem;margin:0}
.sc-mrp{color:#94a3b8;text-decoration:line-through;font-weight:700;font-size:.95rem}
.sc-save{background:#e6fbfc;color:#0b4b4e;border:1px solid var(--cin-teal2);font-size:.68rem;font-weight:900;border-radius:999px;padding:2px 9px}
.sc-save-pill{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,var(--cin-lime),var(--cin-teal));color:#083344;font-size:.7rem;font-weight:900;border-radius:999px;padding:4px 10px;z-index:2;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.sc .card-actions{display:flex;gap:8px;margin:2px 0 8px}
.sc .card-actions .btn{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}
.sc .btn-primary{background:linear-gradient(135deg,var(--cin-orange),var(--cin-pink));border:0;box-shadow:0 6px 16px rgba(255,65,98,.25);font-weight:800}
.sc .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(255,65,98,.38)}
.sc-trust{margin:0;font-size:.72rem;font-weight:700;color:#64748b;display:flex;align-items:center;gap:6px}
.sc-trust::before{content:"";width:14px;height:14px;flex:0 0 14px;background:linear-gradient(135deg,var(--cin-teal2),var(--cin-teal));border-radius:50%;box-shadow:inset 0 0 0 3px #fff}

/* ==========================================================================
   HOMEPAGE SPOTLIGHT SECTIONS: AI TOOLS, ZONE STUDIOS, GAMES & VERIFICATION
   ========================================================================== */
.cp-home-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.cp-tool-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--theme-border, #e2e8f0);
  border-radius: 16px;
  padding: 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(11, 43, 76, 0.05);
}
.cp-tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(11, 43, 76, 0.12);
}
.cp-tool-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.cp-tool-title {
  margin: 0 0 8px;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--theme-navy, #0b2b4c);
}
.cp-tool-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #64748b;
  margin: 0 0 14px;
  flex: 1;
}
.cp-tool-action {
  font-weight: 800;
  font-size: 0.88rem;
  margin-top: auto;
}

.cp-home-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.cp-zone-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--theme-border, #e2e8f0);
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cp-zone-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 43, 76, 0.1);
}

/* ==========================================================================
   EDUCATIONAL GAMES SECTION & VERIFICATION BAND (HOME SPOTLIGHT)
   ========================================================================== */

.cp-home-games-sec {
  background: linear-gradient(180deg, #f8fafc 0%, #f0fdfa 100%);
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.cp-home-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}

.cp-game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 8px 24px rgba(11, 75, 78, 0.06);
}

.cp-game-card:hover {
  transform: translateY(-6px);
  border-color: #0aa9b5;
  box-shadow: 0 16px 36px rgba(10, 169, 181, 0.16);
}

.cp-game-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.cp-game-card:hover .cp-game-glow {
  opacity: 1;
}

.cp-game-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.cp-game-ico {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.cp-game-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cp-game-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pro-navy, #0b4b4e);
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  line-height: 1.35;
  position: relative;
  z-index: 2;
}

.cp-game-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #5b6b76;
  margin: 0 0 22px;
  flex: 1;
  position: relative;
  z-index: 2;
}

.cp-game-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.92rem;
  color: #0b4b4e;
  background: #f0fdfa;
  border: 1.5px solid #ccfbf1;
  padding: 10px 18px;
  border-radius: 12px;
  margin-top: auto;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
}

.cp-game-card:hover .cp-game-play-btn {
  background: linear-gradient(135deg, #0aa9b5, #0b4b4e);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(10, 169, 181, 0.3);
}

/* Physical Book QR Authenticity & Digital Companion Band - ChildPathshala Theme */
.cp-home-verify-band {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
  align-items: center;
  background: linear-gradient(135deg, #0b4b4e 0%, #10aeb2 100%);
  border-radius: 24px;
  padding: 40px 36px;
  margin: 48px 0 24px;
  box-shadow: 0 20px 48px rgba(11, 75, 78, 0.22);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.cp-home-verify-band::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 70%);
  pointer-events: none;
}

.cp-verify-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.18);
  border: 1px solid rgba(255, 209, 102, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cp-verify-title {
  margin: 0 0 10px;
  font-size: 1.65rem;
  font-weight: 900;
  color: #ffffff;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  line-height: 1.3;
}

.cp-verify-desc {
  font-size: 0.96rem;
  line-height: 1.6;
  color: #e6fbfc;
  margin: 0 0 18px;
}

.cp-verify-features {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #a7f3d0;
}

.cp-verify-action-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 16px 40px rgba(11, 75, 78, 0.18);
  color: #0b4b4e;
  position: relative;
  z-index: 2;
}

.cp-verify-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-verify-label {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0b4b4e;
  margin-bottom: 4px;
}

.cp-verify-input-group {
  display: flex;
  gap: 8px;
  width: 100%;
}

.cp-verify-input {
  flex: 1;
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 16px;
  color: #0b4b4e;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: monospace, inherit;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cp-verify-input:focus {
  border-color: #0aa9b5;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(10, 169, 181, 0.2);
}

.cp-verify-input::placeholder {
  color: #94a3b8;
  font-weight: normal;
}

.cp-verify-submit {
  background: linear-gradient(135deg, #ff7f50, #ff4162);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 65, 98, 0.35);
}

.cp-verify-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 65, 98, 0.45);
}

.cp-verify-hint {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 4px;
  display: block;
}

@media (max-width: 860px) {
  .cp-home-verify-band {
    grid-template-columns: 1fr;
    padding: 28px 20px;
    gap: 24px;
  }
  .cp-verify-input-group {
    flex-direction: column;
  }
  .cp-verify-submit {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .cp-home-tools-grid,
  .cp-home-zone-grid,
  .cp-home-games-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   HIGH-CONTRAST READABILITY & WCAG AA POLISH
   ========================================================================== */
.mobile-nav.open,
.dx-mobile.open {
  display: flex !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 14px 16px 36px !important;
  border-bottom: 3px solid #10aeb2 !important;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.28) !important;
  max-height: calc(100vh - 75px);
  max-height: calc(100dvh - 75px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
}
.dx-mobile a {
  color: #0f172a !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.dx-mobile a:hover,
.dx-mobile a:active {
  background: #f0fdfa !important;
  color: #0b4b4e !important;
}

/* ==========================================================================
   MOBILE POLISH: FOOTER CLEARANCE, 360PX TABLE OVERFLOW, HERO STACKING
   ========================================================================== */
@media (max-width: 820px) {
  /* Sticky-bar clearance: prevents .lp2-sticky, .cp-sticky & .cp-cartbar from obscuring footer */
  .pro-footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  /* Worksheet hero mobile stacking order: preview box visually prominent */
  .cp-hero-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .cp-hero-grid > div:last-child {
    order: -1;
    margin: 10px auto 16px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .cp-preview-box {
    margin: 0 auto !important;
    max-width: 100% !important;
  }
}

/* AI Studio Tool Headers & Sheet Paper Mobile Alignment Shield */
@media (max-width: 900px) {
  .studio-header {
    position: static !important;
    top: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    z-index: 10 !important;
  }
  .studio-header-left {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .studio-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }
  .studio-header-right,
  .studio-header-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 8px !important;
  }
  .studio-header-right .btn,
  .studio-header-actions .btn {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }
  .sheet-paper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  }
  .sheet-watermark {
    font-size: 26px !important;
  }
}

/* Floating Actions & Sticky Bar Collision Prevention */
@media (max-width: 640px) {
  .wa-float {
    right: 12px !important;
    bottom: 16px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 60 !important;
  }
  .ai-float {
    right: 12px !important;
    bottom: 72px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.3rem !important;
    z-index: 60 !important;
  }
  body:has(.cp-cartbar) .wa-float,
  body:has(.cp-sticky) .wa-float {
    bottom: 76px !important;
  }
  body:has(.cp-cartbar) .ai-float,
  body:has(.cp-sticky) .ai-float {
    bottom: 132px !important;
  }
  body:has(.cp-cartbar):has(.cp-sticky) .wa-float {
    bottom: 140px !important;
  }
  body:has(.cp-cartbar):has(.cp-sticky) .ai-float {
    bottom: 196px !important;
  }
  /* AI Studio & Interactive Dock Clearance: Never block prompt capsule or send button */
  body:has(.cp-gemini-workspace) .ai-float,
  body:has(.cp-gemini-workspace) .ai-panel,
  body:has(.cp-gemini-dock-container) .ai-float,
  body:has(.cp-gemini-dock-container) .ai-panel {
    display: none !important;
  }
  body:has(.cp-gemini-workspace) .wa-float,
  body:has(.cp-gemini-dock-container) .wa-float {
    display: none !important;
  }
  .cp-cartbar,
  .cp-sticky {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    transform: none !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
  }
}

/* Universal Mobile Responsiveness (22,000+ Pages Viewport & Layout Shield) */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Prevent iOS Safari Automatic Viewport Auto-Zoom on form input focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  .form-control,
  .cp-gemini-textarea,
  .cpz-input,
  #subPayPhone,
  #subPayName,
  #subPayEmail {
    font-size: 16px !important;
  }
  .wrap, .dx-wrap, .adm-wrap, .pdfs-container, .blog-wrap, .inside-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
  .cp-flagship-card,
  .cp-showcase-pcard {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Universal Table Responsive Scroller */
  table:not(.no-responsive),
  .rubric-table, .cc-table, .geo-table, .times-table-grid, .rm-table,
  .city-offset-table, .area-grid-table, .seo-lexile-table, .logic-table,
  .logic-grid-table, .inference-rubric-table, .measure-rubric-table,
  .challenge-table, .morph-table, .fraction-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  table th, table td {
    white-space: normal;
  }
  /* Blog Proof Cards & Lab Anecdote Containers */
  .blog-proof-card {
    padding: 14px 10px !important;
    margin: 20px 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .blog-proof-card > div {
    gap: 12px !important;
  }
  .blog-proof-card > div > div {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  /* Touch Target Ergonomics & Tap Height */
  .btn, .kid-btn, .menu-btn, button, input[type="submit"], input[type="button"] {
    min-height: 44px;
    touch-action: manipulation;
  }
  /* Mobile Input Fields (16px avoids iOS Safari automatic zoom) */
  input[type="text"], input[type="search"], input[type="email"], select, textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Single PDF Viewport Scaler */
  .pdf-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: 55vh !important;
  }
  .pdf-locked-wrap, .pdf-locked-thumb {
    max-width: 100% !important;
    height: auto !important;
    min-height: 280px !important;
  }
  .pdf-locked-content {
    padding: 20px 14px !important;
    max-width: 90% !important;
  }
  /* Standalone Canvas Tools on Mobile:
     Default: manipulation (allows tap, prevents double-tap zoom but allows scroll).
     Drawing-specific canvases get touch-action: none via .drawing-canvas class. */
  canvas {
    max-width: 100% !important;
    height: auto !important;
    touch-action: manipulation;
  }
  canvas.drawing-canvas {
    touch-action: none !important;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .cards {
    grid-template-columns: 1fr !important;
  }
  .inside-grid {
    grid-template-columns: 1fr !important;
  }
  .filters select, .filters input:not([type="checkbox"]):not([type="radio"]), .filters button {
    width: 100% !important;
  }
  .filters label.meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .filters label.meta input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
  }
}

/* =====================================================================
   UNIVERSAL RESPONSIVE ENGINE & ACCESSIBILITY GUARANTEES
   - 100% Device Width Fitting: Zero horizontal overflow on any screen
   - Typographic Readability & Ratios: Proportional headings, optimal line-height
   - Element Block Stacking: Automatic multi-column collapse, zero overlaps
   - Touch Accessibility: >=44px tap targets, high contrast focus rings
   - Anchor Scroll Clearance: Headers never obscure clicked section links
   ===================================================================== */

/* 1. Global Overflow & Box Model Containment */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

/* 2. Media & Embed Containment */
img, svg, video, canvas, iframe, object, embed {
  max-width: 100% !important;
  height: auto;
}

/* 3. Text Wrapping & Typographic Readability */
h1, h2, h3, h4, h5, h6, p, span, a, li, blockquote, dt, dd, figcaption, label {
  overflow-wrap: anywhere;
  word-break: break-word;
}
p {
  line-height: 1.65;
}

/* 4. Table, Puzzle & Code Block Responsive Wrapping */
table {
  max-width: 100%;
}
.table-wrap, .responsive-table, .grid-container, .puzzle-container, .sudoku-container, .matrix-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wordsearch-table, .sudoku-grid, .math-grid, .crossword-grid, .puzzle-table, .matrix-table {
  max-width: 100% !important;
}
@media (max-width: 600px) {
  .wordsearch-table td, .sudoku-cell, .puzzle-cell {
    width: clamp(20px, 6.2vw, 32px) !important;
    height: clamp(20px, 6.2vw, 32px) !important;
    font-size: clamp(10px, 3.2vw, 15px) !important;
    padding: 0 !important;
  }
}
pre, code {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 5. Accessible Focus Rings & Sticky Header Offsets */
:focus-visible {
  outline: 3px solid #0284c7 !important;
  outline-offset: 2px !important;
}
[id] {
  scroll-margin-top: 80px;
}

/* 6. Form Inputs & Interactive Targets */
input, select, textarea, button {
  font-family: inherit;
  font-size: 1rem;
  max-width: 100%;
}

/* 7. Tablet & Mobile Responsive Stacking (< 900px) */
@media (max-width: 900px) {
  .wrap, .container, .inside-wrap {
    max-width: 100% !important;
    padding-left: clamp(12px, 3.5vw, 24px) !important;
    padding-right: clamp(12px, 3.5vw, 24px) !important;
  }
  .inside-grid, .two-col, .three-col, .four-col, .cols-2, .cols-3, .cols-4,
  .main-with-sidebar, .content-with-sidebar, .catalog-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .side-card, .sidebar, .sidebar-block, .matched-bundle-card, .filter-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
  .toolbar-actions, .filter-bar, .action-bar, .studio-top-actions, .palette, .tools-row {
    flex-wrap: wrap !important;
  }
}

/* 8. Phone Responsive Proportions (< 640px) */
@media (max-width: 640px) {
  h1, .hero-title, .page-title {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
  }
  h2, .section-title {
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
    line-height: 1.3 !important;
  }
  h3 {
    font-size: clamp(1.05rem, 4vw, 1.3rem) !important;
    line-height: 1.35 !important;
  }
  .cards, .grid-cards, .bundle-grid, .pdf-grid, .act-grid, .game-grid, .tools-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-dx, button,
  input[type="submit"], input[type="button"], .menu-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    white-space: normal !important;
    text-align: center !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
  }
  .card, .pdf-card, .bundle-card, .act-card, .game-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .story-cta-btns a, .dx-lead button {
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* 9. Ultra-Narrow Devices (< 360px) */
@media (max-width: 360px) {
  .wrap, .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  h1 {
    font-size: 1.3rem !important;
  }
}




/* =====================================================================
   DARK MODE — prefers-color-scheme: dark
   Remaps all custom property tokens to dark-friendly values.
   Cards, headers, sidebars, inputs, badges, code blocks all adapted.
   ===================================================================== */
/* Dark mode: activates automatically via OS preference. Also supports [data-theme="dark"] for manual toggle. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --muted: #161b22;
    --ink: #e6edf3;
    --line: #30363d;
    --pro-sky: #131c24;
    --pro-line: #30363d;
    --pro-navy: #79c0ff;
    --pro-ink: #cdd9e5;
    --velvet: #58cdd5;
    --slate: #58cdd5;
    --indigo: #58cdd5;
    --edu-sky: #0d1b1c;
    --edu-gray: #161b22;
    --edu-dark: #79c0ff;
  }
  body { background: var(--bg); color: var(--ink); }
  .dx-header { background: #010409; border-bottom: 1px solid #30363d; }
  .dx-nav a { color: #cdd9e5; }
  .dx-nav a:hover { background: #1c2128; }
  .dx-nav a[aria-current="page"] { color: #58cdd5; }
  .dx-login { color: #79c0ff; }
  .menu-btn { color: #cdd9e5; }
  .card, .pdf-card, .bundle-card, .act-card, .game-card,
  .side-card, .sidebar-block, .matched-bundle-card,
  .kd-word-card, .kd-def-card, .kd-ex-card,
  .blog-post-card, .blog-mini { background: #161b22; border-color: #30363d; color: #e6edf3; }
  .cat-pill, .tag, .badge, .toc-badge { background: #1c2128; color: #79c0ff; border-color: #30363d; }
  .btn-ghost { background: #1c2128; border-color: #30363d; color: #79c0ff; }
  .btn-ghost:hover { background: #2d333b; }
  input[type=text], input[type=email], input[type=search],
  input[type=password], textarea, select { background: #161b22; border-color: #30363d; color: #e6edf3; }
  input::placeholder, textarea::placeholder { color: #768390; }
  .pdf-list-row, .pdf-row { background: #161b22; border-bottom-color: #30363d; }
  .pdf-list-row:hover { background: #1c2128; }
  .blog-body, .read, .cms-body { color: #cdd9e5; }
  .blog-body h2, .blog-body h3, .read h2, .read h3 { color: #79c0ff; }
  blockquote, .blog-cta { background: #161b22; border-color: #388bfd; color: #cdd9e5; }
  .blog-sidebar { background: #0d1117; }
  .pitch-box { background: #161b22; border-color: #30363d; }
  .ptab { background: #0d1117; color: #cdd9e5; border-color: #30363d; }
  .ptab.active { background: #1c2128; color: #58cdd5; }
  .game-card-body, .act-meta { color: #768390; }
  .game-leader { background: #161b22; border-color: #30363d; }
  .kd-banner { background: linear-gradient(135deg,#0d2626,#0a1929) !important; }
  .kd-tool-btn { background: #1c2128; border-color: #30363d; color: #79c0ff; }
  .kd-tool-btn:hover { background: #2d333b; }
  .kd-phonics-box { background: #161b22; border-color: #30363d; }
  .kd-section-head { color: #58cdd5; }
  table { border-color: #30363d; }
  th { background: #1c2128; color: #79c0ff; }
  td { border-color: #30363d; }
  tr:nth-child(even) td { background: #161b22; }
  footer, .site-footer { background: #010409 !important; border-top-color: #30363d; color: #768390; }
  footer a, .site-footer a { color: #58cdd5; }
  footer a:hover, .site-footer a:hover { color: #79c0ff; }
  pre, code { background: #161b22; border-color: #30363d; color: #e6edf3; }
  .kd-toast, #cpToast { background: #2d333b; color: #e6edf3; border-color: #388bfd; }
  #searchDrawer { background: #010409; border-color: #30363d; }
  #searchDrawer input { background: #161b22; color: #e6edf3; border-color: #30363d; }
  #searchOverlay { background: rgba(1,4,9,.75); }
  .fomo-dot { background: #3fb950; }
  img:not([src*="logo"]):not([class*="logo"]) { filter: brightness(.92); }
  img:hover { filter: brightness(1); }
}
[data-theme="dark"] {
  &, :root {
    /* Core palette overrides */
    --bg: #0d1117;
    --muted: #161b22;
    --ink: #e6edf3;
    --line: #30363d;

    /* Pro / site palette */
    --pro-sky: #131c24;
    --pro-line: #30363d;
    --pro-navy: #79c0ff;
    --pro-ink: #cdd9e5;

    /* KD / dictionary palette */
    --velvet: #58cdd5;
    --slate: #58cdd5;
    --indigo: #58cdd5;

    /* Edu palette */
    --edu-sky: #0d1b1c;
    --edu-gray: #161b22;
    --edu-dark: #79c0ff;

    /* DX (dark-header) palette stays intentionally unchanged — already dark */
  }

  /* ── Body & layout ── */
  body { background: var(--bg); color: var(--ink); }

  /* ── Header ── */
  .dx-header { background: #010409; border-bottom: 1px solid #30363d; }
  .dx-nav a { color: #cdd9e5; }
  .dx-nav a:hover { background: #1c2128; }
  .dx-nav a[aria-current="page"] { color: #58cdd5; }
  .dx-login { color: #79c0ff; }
  .menu-btn { color: #cdd9e5; }

  /* ── Cards & surfaces ── */
  .card, .pdf-card, .bundle-card, .act-card, .game-card,
  .side-card, .sidebar-block, .matched-bundle-card,
  .kd-word-card, .kd-def-card, .kd-ex-card,
  .blog-post-card, .blog-mini { 
    background: #161b22; 
    border-color: #30363d; 
    color: #e6edf3;
  }

  /* ── Category / filter pills ── */
  .cat-pill, .tag, .badge, .toc-badge {
    background: #1c2128;
    color: #79c0ff;
    border-color: #30363d;
  }

  /* ── Buttons ── */
  .btn-ghost {
    background: #1c2128;
    border-color: #30363d;
    color: #79c0ff;
  }
  .btn-ghost:hover { background: #2d333b; }

  /* ── Inputs, selects ── */
  input[type=text], input[type=email], input[type=search],
  input[type=password], textarea, select {
    background: #161b22;
    border-color: #30363d;
    color: #e6edf3;
  }
  input::placeholder, textarea::placeholder { color: #768390; }

  /* ── PDF / worksheet list ── */
  .pdf-list-row, .pdf-row { 
    background: #161b22; 
    border-bottom-color: #30363d; 
  }
  .pdf-list-row:hover { background: #1c2128; }

  /* ── Blog ── */
  .blog-body, .read, .cms-body { color: #cdd9e5; }
  .blog-body h2, .blog-body h3, .read h2, .read h3 { color: #79c0ff; }
  blockquote, .blog-cta {
    background: #161b22;
    border-color: #388bfd;
    color: #cdd9e5;
  }
  .blog-sidebar { background: #0d1117; }

  /* ── Pitch box / paywall ── */
  .pitch-box { background: #161b22; border-color: #30363d; }
  .ptab { background: #0d1117; color: #cdd9e5; border-color: #30363d; }
  .ptab.active { background: #1c2128; color: #58cdd5; }

  /* ── Game / activity cards ── */
  .game-card-body, .act-meta { color: #768390; }
  .game-leader { background: #161b22; border-color: #30363d; }

  /* ── Dictionary word page ── */
  .kd-banner { background: linear-gradient(135deg,#0d2626,#0a1929) !important; }
  .kd-tool-btn { background: #1c2128; border-color: #30363d; color: #79c0ff; }
  .kd-tool-btn:hover { background: #2d333b; }
  .kd-phonics-box { background: #161b22; border-color: #30363d; }
  .kd-section-head { color: #58cdd5; }

  /* ── Tables ── */
  table { border-color: #30363d; }
  th { background: #1c2128; color: #79c0ff; }
  td { border-color: #30363d; }
  tr:nth-child(even) td { background: #161b22; }

  /* ── Footer ── */
  footer, .site-footer { 
    background: #010409 !important; 
    border-top-color: #30363d; 
    color: #768390;
  }
  footer a, .site-footer a { color: #58cdd5; }
  footer a:hover, .site-footer a:hover { color: #79c0ff; }

  /* ── Code blocks ── */
  pre, code { background: #161b22; border-color: #30363d; color: #e6edf3; }

  /* ── Toast / snackbar ── */
  .kd-toast, #cpToast { background: #2d333b; color: #e6edf3; border-color: #388bfd; }

  /* ── Search drawer ── */
  #searchDrawer { background: #010409; border-color: #30363d; }
  #searchDrawer input { background: #161b22; color: #e6edf3; border-color: #30363d; }

  /* ── Overlays ── */
  #searchOverlay { background: rgba(1,4,9,.75); }

  /* ── Side-card dictionary cross-link (worksheet sidebar) ── */
  .side-card[style*="#f0fdfa"] {
    background: linear-gradient(135deg,#0d2626,#0a1929) !important;
    border-color: #1a4a4a !important;
  }

  /* ── Nav active underline color in dark mode ── */
  .dx-nav a[aria-current="page"] { color: #58cdd5; }
  .dx-nav a[aria-current="page"]::after { background: linear-gradient(90deg,#58cdd5,#388bfd); }

  /* ── Fomo dot ── */
  .fomo-dot { background: #3fb950; }

  /* ── Image thumbnails: slight dimming for contrast ── */
  img:not([src*="logo"]):not([class*="logo"]) { filter: brightness(.92); }
  img:hover { filter: brightness(1); }
}

/* ══════════════════════════════════════════════════════════════════
   5-PILLAR GLOBAL LEARNING NAVIGATION (Learn, Practice, Create, Play, Track)
   ══════════════════════════════════════════════════════════════════ */
.dx-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; position: relative; }
.cp-nav-group { position: relative; display: inline-flex; align-items: center; }
.cp-nav-trigger {
  color: #334e5c !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  padding: 7px 11px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
}
.cp-nav-trigger:hover,
.cp-nav-group:hover .cp-nav-trigger,
.cp-nav-group.is-open .cp-nav-trigger,
.cp-nav-group:focus-within .cp-nav-trigger {
  background: #e6fbfc !important;
  color: #0b4b4e !important;
  border-color: rgba(16, 174, 178, 0.25);
}
.cp-nav-trigger[aria-current="page"] {
  color: #0f766e !important;
  font-weight: 800 !important;
}
.cp-nav-trigger::after { display: none !important; }
.cp-nav-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
  opacity: 0.75;
  pointer-events: none;
}
.cp-nav-group:hover .cp-nav-caret,
.cp-nav-group.is-open .cp-nav-caret,
.cp-nav-group:focus-within .cp-nav-caret {
  transform: rotate(225deg) translateY(-2px);
}
.cp-nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 285px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 48px -8px rgba(11, 43, 76, 0.22), 0 6px 18px rgba(11, 43, 76, 0.08);
  border: 1.5px solid #e2e8f0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  pointer-events: none;
  z-index: 1050;
}
/* Invisible hover bridge: covers the gap between trigger and menu so mouse won't lose hover */
.cp-nav-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  display: block;
}
/* Right-align trailing dropdowns to avoid clipping off the screen edge */
.cp-nav-group:nth-last-child(-n+2) .cp-nav-menu,
.cp-nav-menu.right-aligned {
  left: auto;
  right: 0;
}
.cp-nav-group:hover .cp-nav-menu,
.cp-nav-group.is-open .cp-nav-menu,
.cp-nav-group:focus-within .cp-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.cp-nav-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  color: #1e293b !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  transition: all 0.15s ease !important;
}
.cp-nav-menu a::after { display: none !important; }
.cp-nav-menu a:hover,
.cp-nav-menu a:focus {
  background: #f0fdfa !important;
  color: #0f766e !important;
  transform: translateX(3px);
}
.cp-nav-menu a strong {
  display: block;
  font-size: 13.5px;
  color: #0b2b4c;
  font-weight: 700;
  transition: color 0.15s ease;
}
.cp-nav-menu a:hover strong {
  color: #0f766e;
}
.cp-nav-menu a small {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  margin-top: 1.5px;
}
.cp-nav-menu .cp-nav-badge {
  font-size: 10px;
  padding: 2.5px 8px;
  border-radius: 999px;
  background: #ccfbf1;
  color: #0f766e;
  font-weight: 800;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.cp-nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.18s ease, background 0.18s ease;
}
.cp-nav-menu a:hover .cp-nav-icon {
  transform: scale(1.12);
  background: #e6fbfc;
  border-color: #bbf7d0;
}

/* ==========================================================================
   DESKTOP HEADER REFINEMENT & OVERFLOW PROTECTION (2026)
   Prevents word wrapping, compacts user pill, streamlines store & cart
   ========================================================================== */
.dx-header .wrap {
  max-width: 1180px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 18px !important;
  margin: 0 auto !important;
}
.dx-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 0 !important;
  min-height: 58px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.dx-logo {
  flex-shrink: 0 !important;
}
.dx-logo-img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  display: block !important;
}
@media (min-width: 901px) {
  .dx-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .dx-nav a,
  .cp-nav-trigger {
    padding: 7px 10px !important;
    font-size: 14px !important;
    gap: 5px !important;
  }
}
.dx-nav a,
.cp-nav-trigger {
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
}
.dx-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  margin-left: 6px !important;
}
.dx-cta .dx-login {
  white-space: nowrap !important;
  font-size: 13.5px !important;
  padding: 5px 8px !important;
}
.dx-cta .btn-dx.btn-dx-store {
  padding: 7px 16px !important;
  font-size: 13px !important;
}
.dx-cta .btn-dx.btn-dx-cart {
  padding: 7px 12px !important;
  font-size: 13px !important;
}
.btn-hdr-curr {
  padding: 5px 10px !important;
  font-size: 0.8rem !important;
  gap: 4px !important;
}

/* User Account Pill */
.dx-user-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  padding: 4px 10px 4px 5px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  max-width: 125px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.dx-user-pill:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
.dx-user-avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0ea5e9, #6366f1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}
.dx-user-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

/* VIP Role Dropdown & User Experience */
.dx-user-menu-wrap {
  position: relative !important;
  display: inline-block !important;
}
.dx-user-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 295px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  padding: 12px !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.dx-user-menu-wrap:hover .dx-user-dropdown,
.dx-user-menu-wrap:focus-within .dx-user-dropdown,
.dx-user-dropdown.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.dx-udd-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 8px 12px !important;
  border-bottom: 1.5px solid #f1f5f9 !important;
}
.dx-udd-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  flex-shrink: 0 !important;
}
.dx-udd-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.dx-udd-info strong {
  display: block !important;
  font-size: 0.92rem !important;
  color: #0f172a !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.dx-udd-badges {
  display: flex !important;
  gap: 6px !important;
  margin-top: 3px !important;
  flex-wrap: wrap !important;
}
.dx-udd-role-badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}
.dx-udd-role-badge.teacher {
  background: #ccfbf1 !important;
  color: #0f766e !important;
}
.dx-udd-role-badge.parent {
  background: #e0e7ff !important;
  color: #3730a3 !important;
}
.dx-udd-pro-badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
}
.dx-udd-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-top: 8px !important;
}
.dx-udd-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #334155 !important;
  font-size: 0.85rem !important;
  transition: background 0.15s ease !important;
}
.dx-udd-item:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}
.dx-udd-item.highlight {
  background: #f0fdfa !important;
  color: #0d4b52 !important;
}
.dx-udd-item.highlight:hover {
  background: #ccfbf1 !important;
}
.dx-udd-item.switch-btn {
  background: #fefce8 !important;
  color: #854d0e !important;
}
.dx-udd-item.switch-btn:hover {
  background: #fef08a !important;
}
.dx-udd-item.danger:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}
.dx-udd-item span {
  font-size: 1.15rem !important;
  width: 24px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.dx-udd-item div {
  line-height: 1.25 !important;
}
.dx-udd-item small {
  display: block !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: normal !important;
}

/* Streamlined Store & Cart Pills */
.btn-dx.btn-dx-store {
  background: #f8fafc !important;
  color: #0b4b4e !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 999px !important;
  padding: 6px 13px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}
.btn-dx.btn-dx-store:hover {
  background: #e6fbfc !important;
  border-color: #10aeb2 !important;
  color: #0b4b4e !important;
  transform: translateY(-1px) !important;
}

.btn-dx.btn-dx-cart {
  background: linear-gradient(135deg, #ff7f50, #ff4162) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 3px 10px rgba(255, 65, 98, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.btn-dx.btn-dx-cart:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(255, 65, 98, 0.4) !important;
  color: #ffffff !important;
}
.dx-cart-count {
  background: rgba(255, 255, 255, 0.3) !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}

/* Floating Cart when user has items */
.cp-floating-cart {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff7f50, #ff4162);
  color: #ffffff !important;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(255, 65, 98, 0.38), 0 2px 6px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(8px);
}
.cp-floating-cart:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(255, 65, 98, 0.5);
  color: #ffffff !important;
}
.cp-floating-cart .cp-fc-badge {
  background: #ffffff;
  color: #ff4162;
  font-weight: 900;
  font-size: 12px;
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.3;
}
@media (max-width: 1120px) {
  .dx-nav { gap: 1px !important; }
  .dx-nav a, .cp-nav-trigger { padding: 6px 6px !important; font-size: 13.5px !important; }
  .dx-cta { gap: 6px !important; }
  .btn-dx.btn-dx-store { padding: 5px 10px !important; font-size: 12.5px !important; }
  .btn-dx.btn-dx-cart { padding: 5px 9px !important; font-size: 12.5px !important; }
}
@media (max-width: 900px) {
  .dx-nav {
    display: none !important;
  }
  .dx-header {
    height: auto !important;
    min-height: 52px !important;
  }
  .dx-header .wrap {
    padding: 0 12px !important;
  }
  .dx-top {
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 52px !important;
  }
  .dx-logo-img {
    height: 40px !important;
    width: auto !important;
    max-width: 140px !important;
  }
  .dx-cta {
    margin-left: auto !important;
    gap: 6px !important;
  }
  .dx-cta .dx-login,
  .dx-cta .btn-dx-store {
    display: none !important;
  }
  .dx-cta .btn-dx-cart {
    display: inline-flex !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    align-items: center !important;
  }
  .dx-icon-btn#searchBtn {
    display: inline-flex !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .menu-btn {
    display: inline-flex !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 2px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .cp-floating-cart {
    bottom: 18px;
    right: 18px;
    padding: 9px 15px 9px 12px;
    font-size: 13px;
  }
}

/* ==========================================================================
   CP-AUTH: Modern Dashboard-Style Authentication Portal
   ========================================================================== */
.cp-auth-wrap {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 18px;
  background: radial-gradient(circle at top left, #f0fdfa, #f8fafc 60%);
}
.cp-auth-card {
  width: 100%;
  max-width: 1040px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px -12px rgba(11, 75, 78, 0.16), 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1.5px solid #e2e8f0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
}
@media (max-width: 860px) {
  .cp-auth-card {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .cp-auth-showcase {
    display: none !important;
  }
}
.cp-auth-main {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 540px) {
  .cp-auth-main {
    padding: 32px 20px;
  }
}
.cp-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e6fbfc;
  color: #0b4b4e;
  border: 1px solid rgba(16, 174, 178, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  width: fit-content;
}
.cp-auth-header h1 {
  font-family: 'Fredoka', cursive, system-ui, sans-serif;
  font-size: 2.2rem;
  color: #0b2b4c;
  margin: 0 0 8px;
  line-height: 1.15;
}
.cp-auth-header p {
  color: #64748b;
  font-size: 0.95rem;
  margin: 0 0 24px;
  line-height: 1.45;
}
.cp-auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cp-auth-field {
  display: flex;
  flex-direction: column;
}
.cp-auth-field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.cp-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.cp-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  pointer-events: none;
  opacity: 0.75;
  line-height: 1;
}
.cp-input-group input,
.cp-auth-field input[type="text"],
.cp-auth-field input[type="email"],
.cp-auth-field input[type="password"],
.cp-auth-field input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px 13px 44px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #1e293b;
  background: #f8fafc;
  outline: none;
  transition: all 0.18s ease;
}
.cp-input-group input:focus,
.cp-auth-field input:focus {
  background: #ffffff;
  border-color: #10aeb2;
  box-shadow: 0 0 0 4px rgba(16, 174, 178, 0.16);
}
.btn-auth-submit {
  background: linear-gradient(135deg, #10aeb2 0%, #0b4b4e 100%);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 15px 24px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(11, 75, 78, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 6px;
}
.btn-auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 75, 78, 0.38);
}
.cp-auth-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  font-size: 0.88rem;
  color: #64748b;
}
.cp-auth-footer a {
  color: #0f766e;
  font-weight: 700;
  text-decoration: none;
}
.cp-auth-footer a:hover {
  text-decoration: underline;
}

/* Showcase Panel */
.cp-auth-showcase {
  background: linear-gradient(145deg, #0b4b4e 0%, #062b2e 100%);
  padding: 44px 36px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.cp-auth-showcase::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.cp-showcase-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  color: #a5f3fc;
  border: 1px solid rgba(165, 243, 252, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  width: fit-content;
}
.cp-auth-showcase h2 {
  font-family: 'Fredoka', cursive, system-ui, sans-serif;
  font-size: 1.85rem;
  color: #ffffff;
  margin: 0 0 10px;
  line-height: 1.2;
}
.cp-auth-showcase p {
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0 0 24px;
}
.cp-showcase-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.cp-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 14px;
  border-radius: 12px;
}
.cp-feat-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.cp-feat-item strong {
  display: block;
  font-size: 0.9rem;
  color: #ffffff;
  margin-bottom: 2px;
}
.cp-feat-item small {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.35;
}
.cp-showcase-quote {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: 14px;
}

/* ==========================================================================
   CP-DASHBOARD: Comprehensive Parent & Educator Dashboard View
   ========================================================================== */
.cp-dash-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 18px 60px;
}
.cp-dash-hero {
  background: linear-gradient(135deg, #0b4b4e 0%, #062b2e 100%);
  border-radius: 20px;
  padding: 28px 32px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 12px 36px rgba(11, 75, 78, 0.22);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.cp-dash-hero::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.cp-dash-user {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cp-dash-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.4);
  flex-shrink: 0;
}
.cp-dash-hero h1 {
  font-family: 'Fredoka', cursive, system-ui, sans-serif;
  font-size: 1.85rem;
  margin: 0 0 4px;
  color: #ffffff;
  line-height: 1.2;
}
.cp-dash-meta {
  font-size: 0.88rem;
  color: #cbd5e1;
  margin: 0 0 10px;
}
.cp-dash-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cp-dash-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}
.cp-dash-pill.gold {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.cp-dash-pill.teal {
  background: rgba(34, 211, 238, 0.2);
  color: #a5f3fc;
  border: 1px solid rgba(34, 211, 238, 0.4);
}
.cp-dash-pill.dark {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.cp-dash-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}
.cp-dash-btn.logout {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.cp-dash-btn.logout:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fecaca;
}
.cp-dash-btn.upgrade {
  background: linear-gradient(135deg, #ff7f50, #ff4162);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(255, 65, 98, 0.35);
}
.cp-dash-btn.upgrade:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 65, 98, 0.45);
}

/* Bento KPI Grid */
.cp-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1024px) {
  .cp-dash-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .cp-dash-kpis {
    grid-template-columns: 1fr;
  }
}
.cp-kpi-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cp-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.cp-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cp-kpi-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.cp-kpi-icon {
  font-size: 1.3rem;
}
.cp-kpi-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: #0b2b4c;
  line-height: 1.2;
  margin-bottom: 4px;
}
.cp-kpi-sub {
  font-size: 0.8rem;
  color: #64748b;
}

/* Tab Navigation Bar */
.cp-dash-nav {
  display: flex;
  gap: 8px;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cp-dash-nav::-webkit-scrollbar {
  height: 4px;
}
.cp-dash-nav::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.cp-dash-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #475569;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.cp-dash-tab-btn:hover {
  color: #0b4b4e;
  background: rgba(255, 255, 255, 0.6);
}
.cp-dash-tab-btn.active {
  background: #ffffff;
  color: #0b4b4e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  font-weight: 800;
}
.cp-dash-tab-pane {
  display: none;
}
.cp-dash-tab-pane.active {
  display: block;
  animation: cpFadeIn 0.2s ease;
}
@keyframes cpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dashboard Content Cards */
.cp-dash-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}
.cp-dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.cp-dash-card-header h2 {
  font-family: 'Fredoka', cursive, system-ui, sans-serif;
  font-size: 1.35rem;
  color: #0b2b4c;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   HOMEPAGE HIGH-VALUE FEATURES SHOWCASE
   ========================================================================== */
.cp-super-features-sec {
  padding: 56px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.cp-super-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .cp-super-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .cp-super-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.cp-super-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.cp-super-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
  border-color: #cbd5e1;
}
.cp-super-icon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cp-super-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.cp-super-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.cp-super-title {
  font-family: 'Fredoka', cursive, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.35;
}
.cp-super-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 18px;
  flex-grow: 1;
}
.cp-super-link {
  font-size: 0.88rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.cp-super-card:hover .cp-super-link {
  gap: 10px;
}

/* Defensive baseline for video modals and strips (prevents unstyled render on any page) */
.cp-modal { display: none !important; position: fixed; inset: 0; z-index: 99990; }
.cp-modal.open { display: grid !important; }