*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --indigo: #1B2361; --yellow: #8D9AF7; --mint: #B389F9; --coral: #2E43E6;
  --sky: #D7DEFC; --white: #FFFFFF; --body-text: #241F33; --muted: #6B7280; --border: #DDE3F5;
  --stamp: 4px 4px 0 var(--indigo);
  /* Height of the sticky site header. Anything else that sticks, or that gets
     scrolled to, has to clear it. */
  --nav-h: 80px;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Noto Sans Thai', sans-serif;
  background: var(--white); color: var(--body-text); overflow-x: hidden;
}
::selection { background: var(--yellow); color: var(--indigo); }

/* language toggle: default (no attr) = English visible */
body[data-lang="en"] .th-text { display: none; }
body[data-lang="th"] .en-text { display: none; }
body[data-lang="th"] { font-family: 'Noto Sans Thai', 'Inter', sans-serif; }
body[data-lang="th"] h1, body[data-lang="th"] h2, body[data-lang="th"] h3, body[data-lang="th"] h4,
body[data-lang="th"] .eyebrow, body[data-lang="th"] .nav-logo,
body[data-lang="th"] .btn, body[data-lang="th"] .step-num, body[data-lang="th"] .stat-num,
body[data-lang="th"] .nav-links button { font-family: 'Noto Sans Thai', 'Fredoka', sans-serif; }
body[data-lang="th"] .hero-v3-heading { font-family: 'Fredoka', 'Noto Sans Thai', sans-serif; }
body[data-lang="th"] .hero-v3-heading .th-text { font-family: 'Mali', 'Noto Sans Thai', sans-serif; }

/* The cards and the logo are real <button>s so they can be reached by keyboard.
   Strip the browser's button styling here, before the rules that style them as
   cards, so those rules apply exactly as they did when these were <div>s. */
.nav-logo, .topic-card, .lesson-card {
  appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0;
}

/* Visible keyboard focus. :focus-visible keeps it off mouse clicks. */
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}
/* --coral disappears against the indigo hero and footer. */
.page-hero :focus-visible,
.hero-v3 :focus-visible,
footer :focus-visible,
body > nav .lang-toggle button:focus-visible { outline-color: var(--yellow); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.85rem;
  background: var(--indigo); color: var(--white); padding: 0.7rem 1.1rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.page { display: none; }
.page.active { display: block; }

/* Direct child of body only: this is the site header. The lesson table of
   contents is also a <nav>, and an unscoped selector styled it as a second
   sticky header. */
body > nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2.5rem; background: var(--white);
  box-shadow: 0 2px 10px rgba(27,35,97,0.08); position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 0.6rem;
}
.nav-logo {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.35rem;
  color: var(--indigo); display: flex; align-items: center; gap: 0.5rem;
  text-decoration: none; cursor: pointer;
}
.nav-logo .spark { color: var(--coral); }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
body[data-lang="th"] .nav-logo-text > .th-text { font-family: 'Mali', 'Noto Sans Thai', sans-serif; }
body[data-lang="th"] .nav-logo-text { line-height: 1.5; }
body[data-lang="th"] .nav-logo-by.th-text { margin-top: 0.15rem; }
.nav-logo-by { font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-weight: 500; font-size: 0.68rem; color: var(--muted); margin-left: 0; }
@media (max-width: 700px) { .nav-logo-by { display: none; } }
.nav-logo-img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 0.2rem; list-style: none; flex-wrap: wrap; }
.nav-links button {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--indigo); background: none; border: 1.5px solid transparent; cursor: pointer;
  padding: 0.5rem 0.9rem; border-radius: 8px; opacity: 0.55; transition: opacity 0.2s, border-color 0.2s;
}
.nav-links button:hover { opacity: 1; border-color: var(--border); }
.nav-links button.active { opacity: 1; border-color: var(--indigo); border-style: dashed; }
.lang-toggle {
  display: flex; border: 1.5px solid var(--indigo); border-radius: 10px; overflow: hidden; margin-left: 0.6rem;
}
.lang-toggle button {
  font-family: 'Fredoka', sans-serif !important; font-weight: 700 !important; font-size: 0.78rem !important;
  padding: 0.5rem 0.85rem !important; border-radius: 0 !important; opacity: 1 !important; border: none !important;
  background: transparent; color: var(--indigo); cursor: pointer;
}
.lang-toggle button.active { background: var(--indigo); color: var(--white); }

.mode-toggle {
  display: inline-flex; border: 1.5px solid var(--indigo); border-radius: 10px; overflow: hidden;
}
.mode-toggle button {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.82rem;
  padding: 0.55rem 1rem; border: none; background: transparent; color: var(--indigo);
  cursor: pointer; opacity: 0.6; transition: opacity 0.2s, background 0.2s;
}
.mode-toggle button.active { opacity: 1; background: var(--indigo); color: var(--white); }
.page-hero .mode-toggle { border-color: rgba(255,255,255,0.4); }
.page-hero .mode-toggle button { color: var(--white); }
.page-hero .mode-toggle button.active { background: var(--yellow); color: var(--indigo); }
.modal-mode-toggle { margin-bottom: 1.5rem; }
.mode-toggle-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  background: linear-gradient(135deg, #EEF1FE, #E3E8FE); border: 2px solid var(--indigo);
  border-radius: 18px; padding: 1.3rem 1.8rem; margin-bottom: 2rem;
  box-shadow: 0 6px 20px rgba(27,35,97,0.1);
}
.mode-toggle-label {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--indigo);
}
.mode-toggle-big {
  border: none; border-radius: 50px; background: var(--white);
  box-shadow: inset 0 0 0 2px var(--indigo); padding: 0.3rem;
}
.mode-toggle-big button {
  font-size: 0.95rem; padding: 0.75rem 1.6rem; border-radius: 50px; opacity: 0.7;
}
.mode-toggle-big button.active {
  background: var(--indigo); color: var(--white); opacity: 1;
  box-shadow: 0 4px 14px rgba(27,35,97,0.35);
}
@media (max-width: 600px) { .mode-toggle-banner { flex-direction: column; align-items: stretch; text-align: center; } }
.mini-tag-active { background: var(--coral); color: var(--white); font-weight: 700; }
.modal-activity-mode { font-size: 0.7rem; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }

.footer-brand {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 0.7rem; opacity: 0.9;
}
.footer-brand img { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; }
.footer-brand span { color: var(--yellow); font-weight: 700; }
.footer-links { margin-top: 0.9rem; display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
.footer-link {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  font: inherit; font-size: 0.8rem; color: rgba(255,255,255,0.55);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.footer-link:hover { color: var(--yellow); }
a.footer-link { display: inline-block; }

/* Centred, and wide enough that the padding does not squeeze the text: with
   border-box the 5rem sides come out of max-width, so 920px leaves a ~760px
   measure rather than the ~600px this used to have. */
.simple-page { padding: 4rem 5rem; max-width: 920px; margin-inline: auto; }
.simple-page h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--indigo); margin: 1.8rem 0 0.5rem; }
.simple-page p { font-size: 0.95rem; color: var(--body-text); line-height: 1.75; margin-bottom: 0.5rem; }
.simple-page ul { margin: 0.6rem 0 0.6rem 1.2rem; }
.simple-page ul li { font-size: 0.95rem; color: var(--body-text); line-height: 1.8; }

/* A wide table must not widen the page: it scrolls inside its own box. */
.table-scroll { overflow-x: auto; margin: 1rem 0 0.5rem; }
.align-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.88rem; }
.align-table th, .align-table td {
  text-align: left; vertical-align: top; padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.align-table thead th {
  font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--indigo);
  background: #EDF0FD; border-bottom: 2px solid var(--border);
}
.align-table tbody td { color: var(--body-text); line-height: 1.6; }
.align-table tbody td:first-child {
  font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--coral); width: 3rem;
}

.simple-page ul.contributors { list-style: none; margin-left: 0; display: grid; gap: 0.7rem; }
.contributors li {
  display: flex; flex-direction: column; gap: 0.1rem;
  background: #EDF0FD; border-radius: 12px; padding: 0.9rem 1.1rem;
}
.contributor-name { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--indigo); }
.contributor-role { font-size: 0.88rem; color: var(--muted); }

/* A button styled as inline text, so navigating stays keyboard-reachable
   without pretending to be a link to somewhere else. */
.inline-link {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--coral); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.inline-link:hover { color: var(--indigo); }
.contact-card {
  background: #EDF0FD; border-radius: 16px; padding: 1.6rem; margin-top: 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.contact-row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; }
.contact-row .contact-icon { font-size: 1.2rem; }
.contact-row a { color: var(--coral); font-weight: 600; text-decoration: none; }
.contact-row a:hover { text-decoration: underline; }
.contact-form-wrap { margin-top: 0; }
.contact-form-wrap h3 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--indigo); margin-bottom: 0.8rem; }
.contact-layout { max-width: 1100px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 2.5rem; align-items: start; }
@media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-form-embed { width: 100%; height: 560px; border: 2px solid var(--border); border-radius: 16px; }
@media (max-width: 600px) { .contact-form-embed { height: 620px; } }
@media (max-width: 860px) { .simple-page { padding: 3rem 1.5rem; } }

/* Quick start. A real <ol> so the order is announced and the numbering is not
   just a picture; the counter draws the badge from the list itself. */
.quickstart-steps { list-style: none; margin: 0; padding: 0; counter-reset: qs; }
.quickstart-step {
  counter-increment: qs;
  position: relative; padding-left: 4rem; padding-bottom: 2.2rem;
}
.quickstart-step::before {
  content: counter(qs);
  position: absolute; left: 0; top: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--indigo); color: var(--white);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
/* Joins the badges into one thread so the steps read as a sequence. */
.quickstart-step:not(:last-child)::after {
  content: ''; position: absolute; left: 1.3rem; top: 3rem; bottom: 0.8rem;
  width: 2px; background: var(--border);
}
.quickstart-step h2 {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem;
  color: var(--indigo); margin: 0.35rem 0 0.6rem;
}
.quickstart-step h2 em { font-style: italic; }
.quickstart-step p { font-size: 0.95rem; line-height: 1.75; margin-bottom: 0.5rem; }
.quickstart-aside { font-size: 0.88rem !important; color: var(--muted); }

.quickstart-cta {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--border);
}
@media (max-width: 600px) {
  .quickstart-step { padding-left: 3.2rem; }
  .quickstart-step::before { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
  .quickstart-step:not(:last-child)::after { left: 1.1rem; top: 2.6rem; }
  .quickstart-cta .btn { width: 100%; }
}

.btn {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.95rem;
  padding: 0.75rem 1.7rem; border-radius: 12px; border: 2px solid var(--indigo); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--stamp);
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--indigo); }
.btn-yellow { background: var(--yellow); color: var(--indigo); }
.btn-dark { background: var(--indigo); color: var(--white); }

.eyebrow {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; display: inline-block; }
.section-title {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--indigo); line-height: 1.2; margin-bottom: 0.8rem;
}
.section-sub { font-size: 0.98rem; color: var(--muted); line-height: 1.7; max-width: 560px; }

.hero {
  background: var(--indigo); display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 2rem; padding: 5rem 5rem; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(141,154,247,0.16) 0%, transparent 70%);
  top: -100px; right: -80px; pointer-events: none;
}
.hero h1 {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem); color: var(--white); line-height: 1.15; margin-bottom: 1rem;
}
.hero h1 .hl { color: var(--yellow); }
.hero p { font-size: 1.05rem; color: rgba(251,246,234,0.72); line-height: 1.7; max-width: 440px; margin-bottom: 2rem; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-mascot { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

/* ── HERO v3 (real background photo + rebuilt content) ── */
.hero-v3 {
  position: relative; text-align: center; overflow: hidden;
  background-color: #F4F6FE; background-repeat: no-repeat;
  background-size: cover; background-position: center;
  padding: 4rem 2rem 3rem;
}
.hero-v3-title { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.hero-v3-heading { font-family: 'Fredoka', sans-serif; font-weight: 700; line-height: 1.05; margin-bottom: 0.9rem; }
.hero-v3-heading .line-1 { display: block; font-size: clamp(2.3rem, 5.4vw, 3.6rem); color: var(--indigo); }
.line-2-wrap { display: flex; align-items: center; justify-content: center; gap: 0.7rem; }
.hero-v3-heading .line-2 { display: block; font-size: clamp(2.7rem, 6.6vw, 5.4rem); color: var(--coral); }
.title-burst { width: clamp(20px, 3vw, 32px); height: clamp(20px, 3vw, 32px); color: var(--coral); flex-shrink: 0; transform: scaleX(-1); }
.title-burst-right { transform: scaleX(1); }
@media (max-width: 640px) { .title-burst { display: none; } }
.hero-v3-sub { font-size: 1.3rem; color: var(--muted); margin-bottom: 1.2rem; }
.hero-v3-by {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-weight: 500; font-size: 0.95rem;
  color: var(--muted); margin-bottom: 1.1rem;
}
.hero-v3-by-logo { width: 38px; height: 38px; object-fit: contain; }

.hero-illustration {
  position: relative; max-width: 1120px; margin: 2rem auto 0; height: 620px; z-index: 1;
}
.connector-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.connector-svg path { fill: none; stroke: rgba(46,67,230,0.45); stroke-width: 3; stroke-dasharray: 6 8; }

.feature-card {
  position: absolute; width: 260px; border-radius: 24px; padding: 1.7rem 1.3rem;
  box-shadow: 0 12px 30px rgba(27,35,97,0.12); display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.card-tl { top: 2%; left: -30px; background: #EDE9FE; }
.card-bl { top: 50%; left: -30px; background: #FCE7F3; }
.card-tr { top: 2%; right: -30px; background: #D1FAE5; }
.card-br { top: 50%; right: -30px; background: #FEF3C7; }
.feature-icon { width: 5rem; height: 5rem; border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0.8rem; }
.feature-icon img { width: 100%; height: 100%; object-fit: contain; }
.fi-purple { background: #8F88EF; }
.fi-pink { background: #F592D0; }
.fi-green { background: #9ECE58; }
.fi-yellow { background: #F0B429; }
.feature-label { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.25rem; color: var(--indigo); text-align: center; line-height: 1.3; }
.card-tl .feature-label { color: #6C5CE0; }
.card-bl .feature-label { color: #D6469C; }
.card-tr .feature-label { color: #5C8A28; }
.card-br .feature-label { color: #A9770C; }

.hero-mascot-v2 {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 250px; height: 330px;
}
.hero-mascot-v2-img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(27,35,97,0.18));
  animation: float 3.5s ease-in-out infinite;
}

.hero-v3-btns { display: flex; justify-content: center; gap: 1.2rem; margin-top: 2rem; flex-wrap: wrap; position: relative; z-index: 1; }
/* One button carries the whole hero now, so it is sized to be the thing you
   reach for rather than one option among two. */
.hero-v3-btns .btn {
  font-size: 1.45rem; padding: 1.25rem 3.4rem; border-radius: 16px;
  box-shadow: 6px 6px 0 var(--indigo);
}
.hero-v3-btns .btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--indigo); }
@media (max-width: 600px) {
  .hero-v3-btns .btn { font-size: 1.2rem; padding: 1.05rem 2.2rem; width: 100%; justify-content: center; }
}

@media (max-width: 860px) {
  .hero-illustration { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; padding-top: 1rem; }
  .connector-svg { display: none; }
  .feature-card { position: static; width: auto; }
  .hero-mascot-v2 { position: static; grid-column: 1 / 3; margin: 0.5rem auto; transform: none; }
}

.stats { background: #D9E7FD; border-top: 2px dashed var(--border); border-bottom: 2px dashed var(--border); padding: 1.2rem 4rem; display: flex; justify-content: space-around; gap: 1rem; flex-wrap: wrap; }
.stat { text-align: center; font-family: 'Fredoka', sans-serif; }
.stat-num { font-size: 1.6rem; font-weight: 700; color: var(--indigo); }
.stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(27,35,97,0.6); }

.home-topics { padding: 5rem; background: var(--white); }
.topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; margin-top: 2.5rem; }
.topic-card {
  background: #EDF0FD; border-radius: 18px; padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: transform 0.22s, box-shadow 0.22s; cursor: pointer;
  border: 2px solid transparent;
}
.topic-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(27,35,97,0.1); border-color: var(--indigo); }
.topic-card:hover .topic-icon { transform: rotate(-6deg) scale(1.05); }
.topic-icon {
  font-size: 1.7rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px dashed rgba(27,35,97,0.25); transition: transform 0.25s;
}
.topic-card .card-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem; color: var(--indigo); }
.topic-card .card-text { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
.badge { display: inline-block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.2rem 0.6rem; border-radius: 50px; }

.home-how { background: var(--indigo); padding: 5rem; }
.home-how .eyebrow { color: var(--mint); }
.home-how .section-title { color: var(--white); }
.home-how .section-sub { color: rgba(255,255,255,0.6); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.step-num { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 2.8rem; color: rgba(141,154,247,0.6); line-height: 1; margin-bottom: 0.4rem; }
.step h2, .step h3 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--yellow); margin-bottom: 0.4rem; }
.step p { font-size: 0.85rem; color: rgba(255,255,255,0.85); line-height: 1.65; }

.page-hero { background: var(--indigo); padding: 4rem 5rem; }
/* The band stays full width, but its text lines up with the column beneath it,
   which differs per page: the prose pages centre a 920px box (760px measure),
   Contact centres a 1100px box (940px), and Lessons runs full width, so its
   hero is left alone. */
#page-about .page-hero > *,
#page-start .page-hero > *,
#page-faq .page-hero > *,
#page-curriculum .page-hero > *,
#page-privacy .page-hero > * { max-width: 760px; margin-inline: auto; }
#page-contact .page-hero > * { max-width: 940px; margin-inline: auto; }
.page-hero .eyebrow { color: var(--mint); }
.page-hero .section-title { color: var(--white); margin-bottom: 0.6rem; }
.page-hero .section-sub { color: rgba(255,255,255,0.65); }

.learn-body { padding: 3rem 5rem; }
.level-label {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: var(--indigo); margin-bottom: 1.2rem; margin-top: 2.5rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.level-label:first-child { margin-top: 0; }
/* Nothing under it yet, so it reads as a promise rather than a heading. */
.level-label-soon { color: var(--muted); }

.lessons-more-soon {
  border: 2px dashed var(--border); border-radius: 16px;
  padding: 1.4rem 1.6rem; margin: 0;
  color: var(--muted); line-height: 1.7;
}
.lessons-more-soon strong { color: var(--indigo); }

.unit-download {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap; margin-top: 2.5rem;
  background: linear-gradient(135deg, #EEF1FE, #E3E8FE);
  border: 2px solid var(--indigo); border-radius: 18px; padding: 1.4rem 1.8rem;
}
.unit-download-text strong {
  display: block; font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 1.05rem; color: var(--indigo); margin-bottom: 0.25rem;
}
.unit-download-text p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
.unit-download-action { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
/* Fixed width: the label changes to a progress count while the files come
   down, and a button that resizes on every file reads as flicker. */
.unit-download-action .btn { min-width: 15rem; justify-content: center; white-space: nowrap; }
.unit-download-action .btn[disabled] { cursor: progress; opacity: 0.85; }
.unit-download-status { font-size: 0.8rem; color: var(--muted); min-height: 1.1em; }
@media (max-width: 700px) {
  .unit-download { flex-direction: column; align-items: stretch; }
  .unit-download-action { align-items: stretch; }
  .unit-download-action .btn { width: 100%; }
}

.lessons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 900px) { .lessons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lessons-grid { grid-template-columns: 1fr; } }
.lesson-card {
  background: var(--white); border: 2px solid var(--border); border-radius: 16px;
  padding: 1.5rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.lesson-card:hover { border-color: var(--indigo); box-shadow: 0 6px 20px rgba(27,35,97,0.08); transform: translateY(-2px); }
.lesson-card-photo { padding: 0; overflow: hidden; background: var(--white); align-self: start; }
.lesson-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lesson-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.lesson-icon { font-size: 1.8rem; }
.lesson-duration { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.72rem; color: var(--muted); background: #EDF0FD; padding: 0.2rem 0.6rem; border-radius: 50px; white-space: nowrap; }
.lesson-card .card-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.98rem; color: var(--indigo); }
.lesson-card .card-text { font-size: 0.83rem; color: var(--muted); line-height: 1.6; }
.lesson-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.3rem; flex-wrap: wrap; gap: 0.4rem; }
.lesson-open { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.8rem; color: var(--indigo); }
.lesson-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mini-tag { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--muted); background: #EDF0FD; padding: 0.15rem 0.5rem; border-radius: 50px; white-space: nowrap; }

.modal {
  background: var(--white); border-radius: 24px; max-width: 720px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 2.5rem; position: relative;
}
.lesson-page-wrap { max-width: 980px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.lesson-back {
  display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Fredoka', sans-serif;
  font-weight: 600; font-size: 0.85rem; color: var(--indigo); background: #EDF0FD;
  padding: 0.6rem 1.1rem; border-radius: 50px; border: none; cursor: pointer; margin-bottom: 1.5rem;
}
.lesson-back:hover { background: var(--border); }
.lesson-page-wrap .modal { max-width: none; max-height: none; overflow-y: visible; padding: 0; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.lesson-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
/* Sticks below the header rather than over it. The background, shadow and
   padding used to come from the unscoped nav rule; they are declared here now
   that the header rule no longer reaches this element. */
.lesson-toc {
  width: 220px; max-width: 220px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem;
  background: var(--white); box-shadow: 0 2px 10px rgba(27,35,97,0.08);
  border-left: 2px solid var(--border); padding: 1rem 2.5rem 1rem 1rem;
  position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; z-index: 1;
}
.lesson-toc-link {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.88rem; color: var(--muted);
  text-decoration: none; padding: 0.5rem 0.2rem; border-radius: 6px; display: block; text-align: left;
  transition: color 0.2s;
}
.lesson-toc-link:hover { color: var(--indigo); }
.lesson-toc-link.active { color: var(--coral); }
.lesson-extra-section {
  background: var(--white); border: 2px solid var(--border); border-radius: 16px;
  padding: 1.8rem; margin-top: 1.8rem; text-align: left; scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.lesson-extra-section h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--indigo); margin-bottom: 0.6rem; text-align: left; }
.lesson-extra-placeholder { font-size: 0.9rem; color: var(--muted); }
.lesson-download-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Fredoka', sans-serif;
  font-weight: 600; font-size: 0.9rem; color: var(--white); background: var(--coral);
  padding: 0.7rem 1.3rem; border-radius: 10px; text-decoration: none;
}
.lesson-download-btn:hover { opacity: 0.9; }
.lesson-download-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; }
/* The .pptx is the secondary option: useful if you want to edit the deck,
   but the PDF is what opens on any device. */
.lesson-download-alt {
  background: none; color: var(--indigo); box-shadow: inset 0 0 0 2px var(--border);
}
.lesson-download-alt:hover { box-shadow: inset 0 0 0 2px var(--indigo); opacity: 1; }
.lesson-slides-embed {
  width: 100%; height: 480px; border: 2px solid var(--border); border-radius: 14px;
  margin-bottom: 1rem; display: block;
}
@media (max-width: 600px) { .lesson-slides-embed { height: 320px; } }
/* Taller than the slide viewer: the worksheet is a portrait A4 page, and a
   landscape frame would show a third of it. */
/* An image of the page rather than an embedded reader. Capped in height so a
   tall sheet does not push the download buttons off the screen; clicking it
   opens the real PDF. */
.lesson-worksheet-preview {
  display: block; max-width: 520px; margin: 0 auto; border: 2px solid var(--border);
  border-radius: 14px; overflow: hidden; background: var(--white); line-height: 0;
}
.lesson-worksheet-preview:hover { border-color: var(--indigo); }
.lesson-worksheet-preview img { width: 100%; height: auto; display: block; }
.lesson-extra-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.8rem; }
@media (max-width: 800px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-toc { position: static; flex-direction: row; flex-wrap: wrap; border-left: none; border-bottom: 2px solid var(--border); padding-left: 0; padding-bottom: 1rem; }
}
.modal-icon { font-size: 2.8rem; margin-bottom: 1rem; }
.modal h1 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--indigo); margin-bottom: 0.5rem; }
.modal-meta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.modal-tag { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.25rem 0.7rem; border-radius: 50px; }
.modal-body h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem; color: var(--indigo); margin: 1.4rem 0 0.5rem; }
.modal-body p { font-size: 0.92rem; color: var(--body-text); line-height: 1.75; }
.modal-body ul { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.modal-body ul li { font-size: 0.88rem; color: var(--body-text); padding: 0.5rem 0.8rem; background: #EDF0FD; border-radius: 10px; line-height: 1.5; }
.modal-body ul li::before { content: '→ '; color: var(--coral); font-weight: 600; }
.modal-activity { background: #EEF1FE; border: 2px solid var(--yellow); border-radius: 14px; padding: 1.2rem; margin-top: 1.5rem; }
.modal-activity h3 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--indigo); margin-bottom: 0.5rem; }
.modal-activity p { font-size: 0.85rem; color: var(--body-text); line-height: 1.6; }
.modal-tip {
  display: flex; align-items: flex-start; gap: 0.5rem; background: #FFF7E0;
  border: 1.5px dashed #E0B23C; border-radius: 12px; padding: 0.8rem 1rem;
  font-size: 0.85rem; color: var(--body-text); line-height: 1.55; margin-top: 0.6rem;
}
.modal-exit-ticket { font-size: 0.85rem; color: var(--muted); font-style: italic; margin-top: 0.6rem !important; }
.modal-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: var(--coral); text-decoration: none; }
.modal-link:hover { text-decoration: underline; }

footer { background: var(--indigo); color: rgba(255,255,255,0.5); text-align: center; padding: 2rem; font-size: 0.85rem; font-family: 'Fredoka', sans-serif; }
.footer-tagline, .footer-tagline span, .footer-brand span { color: var(--yellow); font-weight: 700; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 3rem 2rem; text-align: center; }
  .hero p { max-width: 100%; }
  .hero-btns { justify-content: center; }
  .hero-mascot { order: -1; }
  .home-topics, .home-how, .page-hero, .learn-body { padding: 3rem 1.5rem; }
  .stats { padding: 1.2rem 1.5rem; }
  body > nav { padding: 1rem 1.2rem; }
}

/* The previous version named two elements that no longer exist, so it did
   nothing while the mascot bobbed and every navigation scrolled smoothly.
   Cover what actually moves. */
/* Phone layout. The header is one slim row (logo + language) with the menu as
   a swipeable row of pills under it, instead of wrapping onto three rows. */
@media (max-width: 600px) {
  body > nav { padding: 0.55rem 1rem 0.5rem; gap: 0.35rem; }
  .nav-logo { font-size: 1.1rem; gap: 0.5rem; max-width: calc(100% - 5.5rem); }
  .nav-logo-img { width: 36px; height: 36px; }
  .nav-links {
    width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem;
    margin: 0 -1rem; padding: 0.1rem 1rem 0.2rem; width: calc(100% + 2rem);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { flex: 0 0 auto; scroll-snap-align: start; }
  .nav-links button {
    white-space: nowrap; font-size: 0.82rem; padding: 0.5rem 1rem; min-height: 40px;
    border-radius: 999px; background: #EEF1FE; opacity: 1; color: var(--indigo);
  }
  .nav-links button.active { background: var(--indigo); color: var(--white); border-color: var(--indigo); border-style: solid; }
  .nav-links .lang-toggle { position: absolute; top: 0.6rem; right: 1rem; margin: 0; background: var(--white); }
  .lang-toggle button { background: transparent; min-height: 0; }
  .lang-toggle button.active { background: var(--indigo); color: var(--white); }
  .lang-toggle button { padding: 0.4rem 0.7rem !important; }

  .home-topics, .home-how, .page-hero, .learn-body { padding: 2.5rem 1.25rem; }
  .steps { gap: 1.5rem; margin-top: 1.5rem; }
  .step { display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.9rem; align-items: start; }
  .step-num { grid-row: 1 / 3; font-size: 2.2rem; }
  .step h2, .step h3 { margin-bottom: 0.2rem; }
  .btn { min-height: 48px; }
  .lesson-page-wrap { padding: 1.25rem 1.25rem 3rem; }
  .lesson-layout { gap: 1rem; }
  .lesson-toc {
    width: auto; max-width: none; margin: 0 -1.25rem; padding: 0.5rem 1.25rem;
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem;
    position: sticky; top: calc(var(--nav-h) - 1px); border: 0; scrollbar-width: none;
  }
  .lesson-toc::-webkit-scrollbar { display: none; }
  .lesson-toc-link { flex: 0 0 auto; white-space: nowrap; padding: 0.5rem 1rem; border-radius: 999px; background: #EEF1FE; }
  .lesson-toc-link.active { background: var(--indigo); color: var(--white); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body > nav, .lesson-toc, .skip-link, footer { display: none !important; }
  body { background: white; }
}