/* MyEncore Academy — marketing site stylesheet
   Brand: "Two Voices" — coral (#FF6B35) = English, teal (#12B5A0) = Afrikaans.
   Ported from the approved visual prototype (full-prototype-v3.html). */

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/site/assets/fonts/fredoka-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/site/assets/fonts/fredoka-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/site/assets/fonts/fredoka-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/site/assets/fonts/nunito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/site/assets/fonts/nunito-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/site/assets/fonts/nunito-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/site/assets/fonts/nunito-900.woff2') format('woff2');
}

:root{
  /* dark theme (default) */
  --coral:#FF6B35; --coral-dark:#E04E1B; --coral-tint:#3A2417; --coral-on-tint:#FF9A70;
  --teal:#12B5A0;  --teal-dark:#0A9484;  --teal-tint:#0F2E29; --teal-on-tint:#3FD6C0;
  --bg:#16181C; --surface:#1F2226; --ink:#ECEDEE; --gray:#9BA1A6;
  --line:#2F343A; --track:#2A2E33; --safety-border:#3A4048;
  --accent-soft:#5A3324; --on-brand:#fff; --white:var(--surface);
  color-scheme:dark;
}
[data-theme="light"]{
  --coral:#FF6B35; --coral-dark:#E04E1B; --coral-tint:#FFF0E8; --coral-on-tint:#B8390F;
  --teal:#12B5A0;  --teal-dark:#0A9484;  --teal-tint:#E6F9F6; --teal-on-tint:#076A5F;
  --bg:#fff; --surface:#fff; --ink:#3C3C3C; --gray:#6B6B6B;
  --line:#E5E5E5; --track:#F0F0F0; --safety-border:var(--line);
  --accent-soft:#FFB59B; --on-brand:#fff; --white:#fff;
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;transition:background-color .15s ease,color .15s ease;}
h1,h2,h3{font-family:'Fredoka',sans-serif;letter-spacing:-.01em;}
.wrap{max-width:1020px;margin:0 auto;padding:0 24px;}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.grade:focus-visible,
.lang-pill a:focus-visible{
  outline:3px solid var(--coral-dark);
  outline-offset:2px;
  border-radius:6px;
}

.btn{display:inline-block;font-family:'Nunito',sans-serif;font-weight:900;font-size:14px;
     letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center;
     padding:14px 28px;border-radius:14px;cursor:pointer;
     transition:transform .06s ease, box-shadow .06s ease;}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 !important;}
.btn-coral{background:var(--coral);color:var(--on-brand);box-shadow:0 4px 0 var(--coral-dark);}
.btn-teal{background:var(--teal);color:var(--on-brand);box-shadow:0 4px 0 var(--teal-dark);}
.btn-white{background:var(--surface);color:var(--teal);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);}

header{border-bottom:2px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:20;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0 0 10px 0;z-index:100;}
.skip-link:focus{left:0;}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);
  cursor:pointer;font-size:16px;line-height:1;padding:0;flex-shrink:0;}
.theme-toggle:hover{border-color:var(--coral);color:var(--coral);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;}
.logo .mark{width:36px;height:36px;}
.nav-links{display:flex;gap:20px;font-weight:800;font-size:14px;}
.nav-links a{color:var(--gray);text-decoration:none;}
.nav-links a:hover{color:var(--coral);}
.lang-pill{display:inline-flex;border:2px solid var(--line);border-radius:14px;overflow:hidden;font-weight:900;font-size:12.5px;}
.lang-pill a{padding:8px 14px;color:var(--gray);text-decoration:none;display:inline-block;}
.lang-pill a.active{background:var(--teal-tint);color:var(--teal-on-tint);}

.hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:60px 0 48px;}
.hero-art{display:flex;justify-content:center;}
.hero-copy h1{font-size:2.1rem;font-weight:600;color:var(--ink);max-width:430px;line-height:1.25;margin-bottom:26px;}
.hero-copy h1 .en{color:var(--coral);} .hero-copy h1 .af{color:var(--teal);}
.hero-btns{display:flex;flex-direction:column;gap:12px;max-width:330px;}
.hero-note{max-width:330px;margin-top:12px;color:var(--gray);font-size:.9rem;font-weight:700;}

@keyframes peek{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.meerkat{animation:peek 3.2s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){.meerkat{animation:none;}}

.grade-strip{border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:14px 0;}
.grades{display:flex;gap:10px;overflow-x:auto;padding:4px 24px;max-width:1020px;margin:0 auto;scrollbar-width:none;}
.grades::-webkit-scrollbar{display:none;}
.grade{flex-shrink:0;font-weight:900;font-size:13px;color:var(--gray);border:2px solid var(--line);
       border-radius:12px;padding:9px 16px;text-decoration:none;transition:.15s;}
.grade:hover{background:var(--coral-tint);color:var(--coral-on-tint);border-color:var(--coral);}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:64px 0;}
.feature h2{font-size:1.75rem;font-weight:600;margin-bottom:12px;}
.feature p{font-size:1.02rem;color:var(--gray);max-width:400px;}
.feature .art{display:flex;justify-content:center;}
.h-coral{color:var(--coral);} .h-teal{color:var(--teal);}

.safety-badge-bg{fill:var(--teal-tint);stroke:var(--safety-border);stroke-width:2px;}
.accent-soft-dot{fill:var(--accent-soft);}

.biling-card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:22px;max-width:330px;width:100%;box-shadow:0 6px 0 var(--line);}
.biling-card .row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;margin-bottom:10px;font-weight:800;}
.row-en{background:var(--coral-tint);color:var(--coral-on-tint);}
.row-af{background:var(--teal-tint);color:var(--teal-on-tint);}
.row .flagdot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-brand);font-size:12px;font-weight:900;flex-shrink:0;}
.row-en .flagdot{background:var(--coral);} .row-af .flagdot{background:var(--teal);}
.biling-card .label{font-weight:900;font-size:13px;color:var(--gray);letter-spacing:.05em;margin-bottom:12px;}
.biling-card .footnote{font-size:12.5px;color:var(--gray);font-weight:700;}

.prog-card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:24px;max-width:330px;width:100%;box-shadow:0 6px 0 var(--line);}
.prog-card .label{font-weight:900;font-size:13px;color:var(--gray);letter-spacing:.05em;margin-bottom:16px;}
.prog-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.prog-row:last-child{margin-bottom:0;}
.prog-bar{flex:1;height:14px;border-radius:7px;background:var(--track);overflow:hidden;}
.prog-fill{height:100%;border-radius:7px;}
.star{font-size:20px;}
.streak-label{font-weight:800;}

.pricing-sec{background:var(--teal-tint);padding:64px 0;}
.pricing-sec h2{font-size:1.9rem;font-weight:600;text-align:center;}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:34px auto 0;}
.price-card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:28px 26px;box-shadow:0 6px 0 var(--line);text-align:left;}
.price-card.popular{border-color:var(--teal);box-shadow:0 6px 0 var(--teal);}
.price-card .pill{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:10px;margin-bottom:14px;}
.essentials .pill,.family .pill{background:var(--coral-tint);color:var(--coral-on-tint);}
.popular .pill{background:var(--teal-tint);color:var(--teal-on-tint);}
.amt{font-family:'Fredoka',sans-serif;font-weight:700;font-size:2.3rem;}
.per{font-size:.85rem;color:var(--gray);margin-bottom:16px;}
.annual-deal{font-size:.88rem;font-weight:800;color:var(--ink);margin:-6px 0 16px;}
.annual-deal s{color:var(--gray);margin-right:6px;}
.founding-banner{max-width:980px;margin:18px auto 0;color:var(--ink);font-size:.95rem;font-weight:800;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:12px 16px;}
.price-card ul{list-style:none;font-size:.9rem;color:var(--ink);font-weight:600;margin-bottom:20px;}
.price-card li{padding:4px 0;}
.price-card li::before{content:"✓ ";color:var(--teal);font-weight:900;}
.pricing-note{max-width:640px;margin:22px auto 0;color:var(--gray);font-size:.95rem;font-weight:700;}

.faq-sec{padding:64px 0;}
.faq-sec h2{font-size:1.9rem;font-weight:600;text-align:center;margin-bottom:34px;}
.faq-list{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:4px 22px;}
.faq-item summary{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;padding:18px 0;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--teal);font-weight:900;flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{color:var(--gray);padding-bottom:18px;max-width:620px;}

.final{padding:80px 0;text-align:center;}
.final h2{font-size:2rem;font-weight:600;margin-bottom:24px;}

footer{border-top:2px solid var(--line);padding:30px 0;font-size:.85rem;color:var(--gray);text-align:center;}
footer a{color:var(--teal);font-weight:700;text-decoration:none;}
footer .foot-links{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;}

@media(max-width:760px){
  .hero,.feature{grid-template-columns:1fr;text-align:center;}
  .hero-copy h1{max-width:none;}
  .hero-btns{margin:0 auto;}
  .feature p{margin:0 auto;}
  .feature .art{order:-1;}
  .pricing{grid-template-columns:1fr;}
  .nav-links{display:none;}
}

@media(max-width:400px){
  .wrap{padding:0 16px;}
  .hero-copy h1{font-size:1.7rem;}
  .amt{font-size:1.9rem;}
}