/* cedarlearn.com: the marketing pages. Every brand color, font and radius comes from brand.css (loaded first).
   Phone first: one column below 640px; the wide nav from 1024px (below that the menu is a <details>).
   No JS, light only, no motion except a hover tint. The logo PNG has the cream baked in, so it sits only on --cl-cream
   (the header and the footer).

   The system, in short:
   - Type: Nunito Sans 800 for display (tight, large), Inter for reading text at 18px.
   - Rhythm: every <section class="band"> has the same vertical padding; bands alternate cream / white / tint so
     the page reads as chapters, not as a stack of cards.
   - The one bold element is the path map (one curriculum, a path for each child). Everything else stays quiet.
   - Product screens sit in one phone frame style (.phone), always captioned as example screens. */

:root {
  --ink: var(--cl-text);
  --line: #E3E8EE;
  --path-green: #1E7F3E;
  --path-navy: #0B4A78;
  --path-sky: #3B78AC;
  --stage: #E9F1F8;          /* the soft blue stage behind phone screens */
  --frame: #12304C;          /* the phone bezel */
  --shadow-soft: 0 1px 2px rgba(11, 74, 120, 0.06), 0 12px 32px -12px rgba(11, 74, 120, 0.18);
  --shadow-phone: 0 2px 4px rgba(18, 48, 76, 0.10), 0 28px 56px -24px rgba(18, 48, 76, 0.45);
  --band-y: 64px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: var(--cl-cream);
  color: var(--ink);
  font-family: var(--cl-font-body);
  font-size: 18px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
}
img, svg { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--cl-navy); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--cl-font-head); color: var(--cl-navy); margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: 38px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: 21px; line-height: 1.3; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
p { margin: 0 0 16px; }
p, li { max-width: 66ch; }
a { color: var(--cl-navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 650; }
.small { font-size: 15px; color: var(--cl-muted); }
.lead { font-size: 20px; line-height: 1.55; color: var(--ink); }
.muted { color: var(--cl-muted); }
.eyebrow {
  font-family: var(--cl-font-head); font-weight: 800; font-size: 16px; line-height: 1.35;
  color: var(--cl-green-deep); margin-bottom: 14px;
}
.promise { font-family: var(--cl-font-head); font-weight: 800; font-size: 19px; color: var(--cl-navy); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow > * { max-width: 760px; }
main { display: block; }
.band { padding: var(--band-y) 0; }
.band-white { background: var(--cl-white); }
.band-sky { background: var(--cl-sky-light); }
.band-sage { background: var(--cl-sage-light); }
.band:not([class*="band-"]) + .band:not([class*="band-"]) { padding-top: 0; }  /* two cream bands in a row share one gap */
.band-head { max-width: 720px; margin-bottom: 40px; }
.band-head > :last-child { margin-bottom: 0; }
.band-head .lead { color: var(--ink); }
.split { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.split.top { align-items: start; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 24px;
  border: 2px solid transparent; border-radius: var(--cl-radius-md);
  font-family: var(--cl-font-head); font-weight: 800; font-size: 17px; line-height: 1.2;
  text-decoration: none; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--cl-green); border-color: var(--cl-green); color: var(--cl-white); }
.btn.primary:hover { background: var(--cl-green-deep); border-color: var(--cl-green-deep); }
.btn.secondary { background: var(--cl-white); border-color: var(--cl-line-strong); color: var(--cl-navy); }
.btn.secondary:hover { border-color: var(--cl-navy); }
.btn.on-dark { background: var(--cl-white); border-color: var(--cl-white); color: var(--cl-navy); }
.btn.on-dark:hover { background: var(--cl-sky); border-color: var(--cl-sky); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  font-family: var(--cl-font-head); font-weight: 800; font-size: 17px; color: var(--cl-navy);
}

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: 16px; top: -120px; z-index: 30;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--cl-white); border: 2px solid var(--cl-navy); border-radius: var(--cl-radius-md);
  font-family: var(--cl-font-head); font-weight: 800;
}
.skip:focus { top: 8px; }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 20; background: var(--cl-cream); border-bottom: 1px solid var(--line); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 68px; }
.logo-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 8px 8px 0; flex: none; }
.cl-logo { height: 32px; width: auto; max-width: none; }
.nav-wide { display: none; }
.nav-wide a, .nav-menu nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  font-family: var(--cl-font-head); font-weight: 700; font-size: 17px; color: var(--cl-navy); text-decoration: none;
}
.nav-wide a:not(.btn):hover, .nav-menu nav a:not(.btn):hover { text-decoration: underline; }
.nav-wide .btn { min-height: 46px; padding: 10px 20px; }
.nav-menu summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 2px solid var(--cl-line-strong); border-radius: var(--cl-radius-md); background: var(--cl-white);
  font-family: var(--cl-font-head); font-weight: 800; font-size: 17px; color: var(--cl-navy);
  cursor: pointer; list-style: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::before {  /* three lines, drawn with borders */
  content: ""; width: 18px; height: 12px;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}
.nav-menu[open] summary { border-color: var(--cl-navy); }
.nav-menu nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cl-cream); border-bottom: 1px solid var(--cl-line-strong);
  box-shadow: 0 16px 24px -16px rgba(11, 74, 120, 0.25);
  padding: 8px 16px 20px;
  display: flex; flex-direction: column;
}
.nav-menu nav a:not(.btn) { padding: 4px 0; border-bottom: 1px solid var(--line); min-height: 52px; }
.nav-menu nav .btn { margin-top: 16px; }

/* ---------- home hero ---------- */
.hero { padding: 40px 0 56px; }
.hero-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero h1 { font-size: 44px; margin-bottom: 20px; }
.hero .lead { margin-bottom: 0; }
.hero .fine { margin: 20px 0 0; font-size: 15px; color: var(--cl-muted); }

/* ---------- the path map: one curriculum, a path for each child ---------- */
.map {
  margin: 0; background: var(--cl-white); border-radius: 28px; padding: 22px 18px 20px;
  box-shadow: var(--shadow-soft); border: 1px solid var(--line);
}
.map-title {
  font-family: var(--cl-font-head); font-weight: 800; font-size: 21px; line-height: 1.25;
  color: var(--cl-navy); margin: 0 0 4px;
}
.map-sub { font-size: 15px; color: var(--cl-muted); margin: 0 0 8px; }
.map svg { width: 100%; height: auto; }
.map-key { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.map-key li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.35; max-width: none; }
.map-key svg { flex: none; width: 44px; height: 16px; }
.map figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--cl-muted); }

/* ---------- icon points (feature lists without boxes) ---------- */
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.points li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; align-items: start; align-content: start; max-width: none; }
.points h3 { margin: 10px 0 4px; }
.points.one { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; }
.points p { margin: 0; grid-column: 2; color: var(--ink); }
.ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--cl-sky-light); color: var(--cl-navy);
}
.ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.green { background: var(--cl-sage-light); color: var(--cl-green-deep); }
.band-sky .ico, .band-sage .ico { background: var(--cl-white); }

/* ---------- product screens in a phone frame ---------- */
.screen { margin: 0; display: flex; flex-direction: column; align-items: center; }
.phone {
  width: 100%; max-width: 280px; padding: 9px; border-radius: 42px;
  background: var(--frame); box-shadow: var(--shadow-phone);
}
.phone img { width: 100%; height: auto; border-radius: 33px; background: var(--cl-cream); }
.screen figcaption { margin-top: 18px; max-width: 320px; text-align: center; font-size: 16px; line-height: 1.45; color: var(--ink); }
.screen figcaption strong { display: block; font-family: var(--cl-font-head); font-weight: 800; font-size: 17px; color: var(--cl-navy); margin-bottom: 2px; }
.screen figcaption .ex { display: block; margin-top: 4px; font-size: 14px; color: var(--cl-muted); }
.stage { background: var(--stage); border-radius: 32px; padding: 36px 20px 32px; }
.screens { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.screens.pair { gap: 32px; }

/* the learning sequence: numbered, because it is one */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); counter-reset: step; }
.steps > li { max-width: none; counter-increment: step; }
.steps .screen figcaption strong::before {
  content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px;
  border-radius: 50%; background: var(--cl-navy); color: var(--cl-white); font-size: 15px; vertical-align: 2px;
}

/* "the same idea, another way" */
.another { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.another .arrow { display: none; }

/* ---------- options grid (inclusive learning) ---------- */
.options { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px 32px; grid-template-columns: minmax(0, 1fr); }
.options li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 16px; align-content: start; max-width: none; }
.options h3 { font-size: 19px; margin: 11px 0 2px; }
.options p { grid-column: 2; margin: 0; font-size: 17px; }

/* ---------- founder strip ---------- */
.founder { background: var(--cl-navy); color: var(--cl-white); padding: var(--band-y) 0; }
.founder blockquote { margin: 0; max-width: 860px; }
.founder blockquote p {
  font-family: var(--cl-font-head); font-weight: 800; font-size: 26px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--cl-white); max-width: 30ch; margin-bottom: 20px;
}
.founder .who { font-size: 17px; color: #D7EAF7; margin: 0; }
.founder a { color: var(--cl-white); }
.founder .text-link { color: var(--cl-white); margin-top: 12px; }

/* ---------- page heads (inner pages) ---------- */
.page-head { padding: 48px 0 48px; background: var(--cl-cream); }
.page-head .eyebrow { margin-bottom: 12px; }
.page-head h1 { max-width: 20ch; }
.page-head .lead { max-width: 60ch; margin-bottom: 0; }
.page-head.with-art .split { align-items: center; }

/* ---------- prose and notes ---------- */
.prose p, .prose li { font-size: 18px; }
.prose h2 { margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.note {
  border-left: 4px solid var(--cl-green); background: var(--cl-white);
  border-radius: 0 var(--cl-radius-lg) var(--cl-radius-lg) 0; padding: 20px 24px;
}
.note p { margin: 0; }
.thesis { font-family: var(--cl-font-head); font-weight: 800; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; color: var(--cl-navy); margin: 0; max-width: 26ch; }
.story { max-width: 720px; }
.story p { font-size: 20px; line-height: 1.6; }
.signature { font-family: var(--cl-font-head); font-weight: 800; font-size: 18px; color: var(--cl-navy); margin-top: 28px; }
.placeholder { background: var(--cl-stone); border: 2px dashed var(--cl-line-strong); border-radius: var(--cl-radius-md); padding: 16px; color: #4B5563; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; grid-template-columns: minmax(0, 1fr); }
.faq details { background: var(--cl-white); border: 1px solid var(--line); border-radius: var(--cl-radius-lg); }
.faq details[open] { box-shadow: var(--shadow-soft); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 20px; cursor: pointer; list-style: none;
  font-family: var(--cl-font-head); font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--cl-navy);
  border-radius: var(--cl-radius-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cl-sky-light); font-size: 22px; line-height: 1; color: var(--cl-navy);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 20px 20px; }
.faq .answer > :last-child { margin-bottom: 0; }

/* ---------- contact ---------- */
.contact-card { background: var(--cl-white); border: 1px solid var(--line); border-radius: var(--cl-radius-xl); padding: 28px 24px; box-shadow: var(--shadow-soft); max-width: 720px; }
.contact-card h2 { font-size: 26px; }
.contact-card .actions { margin: 8px 0 24px; }
.mail { word-break: break-all; }
.contact-list { padding-left: 22px; margin: 0 0 16px; }
.contact-list li { margin-bottom: 8px; }

/* ---------- draft legal pages ---------- */
.draft-banner {
  background: var(--cl-amber-wash); border: 2px dashed var(--cl-amber); border-radius: var(--cl-radius-md);
  padding: 16px 20px; margin: 24px 0 0; color: #7A4D00; max-width: 760px;
}
.draft-banner p { margin: 0; }
.draft-banner strong { font-weight: 700; }
.legal h2 { font-size: 23px; margin-top: 36px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }

/* ---------- closing invitation ---------- */
.cta {
  background: var(--cl-sage-light); border-radius: 32px; padding: 40px 24px;
  display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center;
}
.cta h2 { margin-bottom: 12px; max-width: 26ch; }
.cta p { margin: 0; }
.cta .actions { margin: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--cl-cream); border-top: 1px solid var(--line); padding: 48px 0 24px; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.footer-brand .logo-link { margin-bottom: 8px; }
.mission { font-family: var(--cl-font-head); font-weight: 800; font-size: 19px; color: var(--cl-navy); margin-bottom: 4px; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links a, .footer-base a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  color: var(--ink); text-decoration: none; font-size: 17px;
}
.footer-links a:hover, .footer-base a:hover { text-decoration: underline; }
.footer-base {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-top: 28px; padding-top: 16px; padding-bottom: 0;
}
.footer-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.footer-base p { margin: 0; font-size: 15px; color: var(--cl-muted); }
.footer-base a { font-size: 15px; color: var(--cl-muted); }

/* ---------- phones from 360px: sequences and pairs sit two by two, so the page stays short ---------- */
@media (min-width: 360px) and (max-width: 639px) {
  .steps, .screens.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .steps .phone, .screens.pair .phone { padding: 6px; border-radius: 26px; }
  .steps .phone img, .screens.pair .phone img { border-radius: 20px; }
  .steps .screen figcaption, .screens.pair .screen figcaption { font-size: 15px; margin-top: 12px; }
  .steps .screen figcaption strong, .screens.pair .screen figcaption strong { font-size: 16px; }
  .steps .screen figcaption strong::before { width: 24px; height: 24px; font-size: 13px; margin-right: 6px; }
}

/* ---------- 200% text zoom on a phone (a window about 200 px wide): nothing scrolls sideways ---------- */
@media (max-width: 320px) {
  .map, .stage, .cta, .contact-card { padding-left: 12px; padding-right: 12px; }
  .points li, .options li { grid-template-columns: minmax(0, 1fr); }
  .points p, .options p { grid-column: 1; }
  h1, h2, h3, .hero h1 { overflow-wrap: break-word; }
  .hero h1 { font-size: 34px; }
  .faq summary { padding: 12px 14px; gap: 10px; overflow-wrap: anywhere; }
  .faq .answer { padding: 0 14px 16px; }
}

/* ---------- 640px and wider ---------- */
@media (min-width: 640px) {
  :root { --gutter: 24px; --band-y: 80px; }
  h1 { font-size: 44px; }
  h2 { font-size: 34px; }
  .hero h1 { font-size: 54px; }
  .map { padding: 28px 28px 24px; }
  .map-key { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
  .map-key li { align-items: flex-start; flex-direction: column; gap: 8px; font-size: 15px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  .points.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screens.two, .screens.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .another { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 16px; }
  .another .arrow { display: block; color: var(--cl-navy); align-self: center; margin-top: -120px; }
  .stage { padding: 48px 32px 40px; }
  .founder blockquote p { font-size: 34px; }
  .cta { padding: 48px; }
  .contact-card { padding: 36px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr; }
}

/* ---------- 1024px and wider: the wide nav, the two-column hero ---------- */
@media (min-width: 1024px) {
  :root { --band-y: 104px; }
  h1 { font-size: 52px; }
  h2 { font-size: 40px; }
  .lead { font-size: 21px; }
  .header-row { min-height: 84px; }
  .cl-logo { height: 40px; }
  .site-footer .cl-logo { height: 32px; }
  .nav-menu { display: none; }
  .nav-wide { display: flex; align-items: center; gap: 4px 24px; }
  .nav-wide .btn { margin-left: 8px; }
  .hero { padding: 72px 0 104px; }
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .hero h1 { font-size: 64px; }
  .map { padding: 32px 32px 26px; }
  .map-title { font-size: 23px; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .split.text-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split.art-first > :first-child { order: 2; }
  .points.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .phone { max-width: 290px; }
  .steps .phone { max-width: 250px; }
  .screens.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .another { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .page-head { padding: 80px 0 72px; }
  .cta { grid-template-columns: minmax(0, 1fr) auto; padding: 56px 64px; }
  .founder blockquote p { font-size: 44px; max-width: 32ch; }
  .thesis { font-size: 48px; }
  .footer-grid { grid-template-columns: 1fr 1.4fr; }
  .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

/* the lawyer's-review note on the draft legal pages */
.review-note { background: var(--cl-sky-light); border-radius: var(--cl-radius-md); padding: 14px 18px; max-width: 760px; }
.stage-note { text-align: center; margin: -8px auto 28px; max-width: none; }

/* "Grades matter. Confidence comes first.": the four goals in one row on wide screens */
@media (min-width: 1024px) { .points.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.story h3 { font-size: 22px; color: var(--cl-navy); margin: 36px 0 10px; }

/* =====================================================================================================================
   Visual-first (Ricky, 2026-11-07 22:00): each section is a short headline and one strong visual. Kids' screens sit in
   a tablet frame, parents' in a phone frame. Motion is calm and optional: with reduced motion, or with no JS, every
   section is visible and the path map is fully drawn.
   ===================================================================================================================== */
.band-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.band-head.center .lead { margin-left: auto; margin-right: auto; }
.fine { margin: 20px 0 0; font-size: 15px; color: var(--cl-muted); }
.more { margin: 20px 0 0; }

/* a scene: headline and a line on one side, the visual on the other */
.scene { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.scene-text > :last-child { margin-bottom: 0; }
.scene-text .lead { max-width: 34ch; }
.scene-text .chips { margin-top: 24px; }
.scene-art { min-width: 0; }
.art { display: block; width: 100%; height: auto; border-radius: 28px; background: var(--cl-cream); }  /* flat art on its own cream: no frame, no shadow */
.banner { margin: 0 0 32px; }
.banner .art { aspect-ratio: 16 / 8; object-fit: cover; object-position: center 30%; border-radius: 32px; }

/* icon chips: two to four words each, never paragraphs */
.chips { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.chips li {
  display: flex; align-items: center; gap: 14px; max-width: none; padding: 12px 18px 12px 12px;
  background: var(--cl-white); border: 1px solid var(--line); border-radius: 18px;
  font-family: var(--cl-font-head); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--ink);
}
.chips .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.chips.wrap { display: flex; flex-wrap: wrap; }
.chips.wrap li { padding-right: 20px; }

/* device frames */
.tablet { width: 100%; padding: 12px; border-radius: 30px; background: var(--frame); box-shadow: var(--shadow-phone); }
.tablet img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--cl-cream); }
.screen .tablet + figcaption { max-width: 520px; }

/* parents: the illustration with the two phones resting on it */
.parents-art { position: relative; }
.parents-art .phones { display: flex; justify-content: center; gap: 16px; margin-top: -96px; padding: 0 12px; }
.parents-art .screen { flex: 0 1 200px; }
.parents-art .phone { max-width: 200px; padding: 7px; border-radius: 30px; }
.parents-art .phone img { border-radius: 24px; }
.parents-art .screen figcaption { font-size: 15px; margin-top: 10px; }
.phone-row, .tablet-row { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.tablet-row .screen { width: 100%; }

/* the email address: a mailto button, and the same address as plain text to select and copy */
.btn .ico { width: 24px; height: 24px; background: none; color: inherit; border-radius: 0; }
.btn .ico svg { width: 22px; height: 22px; }
.selectable { user-select: all; -webkit-user-select: all; font-weight: 650; color: var(--cl-navy); }
.email { margin: 8px 0 12px; }
.page-head.slim { padding-bottom: 24px; }

/* gentle reveal on scroll (only once site.js has run and motion is welcome) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }

/* the mountain map: the three trails draw in, three walkers climb them at their own pace, each in its own lane (the
   dashed one rests at its two break dots, the blue one goes round its loop), all three cross the same class-goal lines and
   reach the cedar, and the cedar glows once. It plays once and stays finished. Without JS or with reduced motion the
   picture is already complete: every trail drawn, all three at the cedar.
   The walkers' routes repeat the trail shapes in the SVG (one design on index, how-it-works and inclusive-learning). */
.js .map .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .map.in .draw { animation: draw-path 2.2s cubic-bezier(.45, .05, .25, 1) forwards; }
.js .map.in .db { animation-duration: 2.8s; animation-delay: 0.6s; }
.js .map.in .dc { animation-duration: 2.6s; animation-delay: 0.3s; }
.js .map .pause { opacity: 0; }
.js .map.in .pause { animation: appear 0.6s ease forwards; }
.js .map.in .p1 { animation-delay: 1.5s; }
.js .map.in .p2 { animation-delay: 2.8s; }
@supports (offset-path: path("M0 0 H1")) {  /* a browser without motion paths keeps the walkers still, at the cedar */
  .js .map .walker { opacity: 0; transform: none; offset-rotate: 0deg; offset-distance: 100%; }
  .js .map .wg { offset-path: path("M280 362 C 279 318, 284 270, 281 226 C 278 192, 281 174, 280 158"); }
  .js .map .wn { offset-path: path("M280 362 C 336 362, 404 354, 406 330 C 408 306, 330 300, 318 276 C 306 252, 358 248, 360 222 C 362 196, 324 166, 306 156"); }
  .js .map .wb { offset-path: path("M280 362 C 242 360, 214 346, 212 322 C 210 302, 218 290, 214 276 C 210 262, 188 254, 186 268 C 184 282, 208 284, 212 268 C 216 248, 222 224, 230 204 C 238 182, 246 168, 254 156"); }
  .js .map.in .wg { animation: appear 0.6s ease 3.2s forwards, climb 4.6s ease-in-out 3.8s both; }
  .js .map.in .wb { animation: appear 0.6s ease 3.2s forwards, climb 7.6s ease-in-out 3.8s both; }
  .js .map.in .wn { animation: appear 0.6s ease 3.2s forwards, climb-rests 10s ease-in-out 3.8s both; }
}
.js .map.in .cedar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 2.4s ease-in-out 13.9s both; }
.js .map.in .halo { animation: glow 2.8s ease-in-out 13.8s both; }
@keyframes draw-path { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes climb { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* short rounds and breaks: the dashed walker rests 0.8 s at each of its two break dots (the trail's right-hand turns) */
@keyframes climb-rests {
  0% { offset-distance: 0%; }
  28.1%, 36.1% { offset-distance: 33.5%; }
  73.6%, 81.6% { offset-distance: 78.1%; }
  100% { offset-distance: 100%; }
}
@keyframes grow { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.07); } }
@keyframes glow { 0%, 100% { opacity: 0; } 45% { opacity: 0.9; } }

/* a soft lift under the pointer */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .lift:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(11, 74, 120, 0.08), 0 18px 36px -16px rgba(11, 74, 120, 0.3); }
}

@media (min-width: 640px) {
  .chips.three, .chips.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .tablet-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .another { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); }
  .another .arrow { margin-top: -60px; }
}
@media (min-width: 900px) {
  .scene { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .scene.rev > .scene-text { order: 2; }
  .chips.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scene .screen .phone { max-width: 300px; }
}
@media (max-width: 899px) {
  .scene-art .art { max-width: 640px; }
}
@media (max-width: 420px) {
  .parents-art .phones { margin-top: -48px; gap: 10px; }
  .chips li { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- "So simple, it just makes sense." ---------- */
.simple { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); align-items: start; }

/* Open. One tap. Learning.: five real screens in turn (20 s), the step lit below; paused under the pointer */
.seq .screen figcaption { max-width: none; }
.reel { position: relative; }
.reel .frame + .frame { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); opacity: 0; }
.reel .frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 18px; }
.tap {
  position: absolute; left: 87.7%; top: 32.2%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 4px solid var(--cl-green); background: rgba(30, 127, 62, 0.18);
}
.seq-steps, .glance-steps { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: s; display: flex; flex-wrap: wrap; gap: 8px; }
.seq-steps { justify-content: center; }
.seq-steps li, .glance-steps li {
  counter-increment: s; display: flex; align-items: center; gap: 10px; max-width: none; padding: 8px 14px 8px 8px;
  border-radius: 999px; background: var(--cl-white); border: 1px solid var(--line);
  font-family: var(--cl-font-head); font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--ink);
}
.seq-steps li::before, .glance-steps li::before {
  content: counter(s); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cl-sky-light); color: var(--cl-navy); font-size: 14px;
}

/* Clear in 30 seconds: the overview's four parts lit in turn (12 s) */
.glance { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.glance .phone { max-width: 290px; }
.pin { position: relative; }
.pin img { display: block; width: 100%; height: auto; border-radius: 33px; }
.hl {
  position: absolute; left: 6%; width: 88%; border: 3px solid var(--cl-green); border-radius: 14px;
  background: rgba(30, 127, 62, 0.06); box-shadow: 0 0 0 6px rgba(30, 127, 62, 0.14);
}
.hl b {
  position: absolute; top: -14px; left: -14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cl-green); color: var(--cl-white); font-family: var(--cl-font-head); font-size: 14px;
}
.hl.h0 { top: 22.4%; height: 13%; }
.hl.h1 { top: 35.6%; height: 20.9%; }
.hl.h2 { top: 56.8%; height: 13.6%; }
.hl.h3 { top: 70.4%; height: 17.6%; }
.glance-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; width: 100%; max-width: 440px; }
.glance-steps li { font-size: 15px; }

@media (prefers-reduced-motion: no-preference) {
  .reel .frame { animation: frame5 20s infinite; }
  .reel .frame.f0 { opacity: 1; animation-name: frame5-first; }
  .reel .f1, .seq-steps .f1 { animation-delay: 4s; }
  .reel .f2, .seq-steps .f2 { animation-delay: 8s; }
  .reel .f3, .seq-steps .f3 { animation-delay: 12s; }
  .reel .f4, .seq-steps .f4 { animation-delay: 16s; }
  .seq-steps li { animation: lit5 20s infinite; }
  .tap { animation: tap 1.6s ease-out infinite; }
  .seq:hover .frame, .seq:hover .seq-steps li, .seq:hover .tap { animation-play-state: paused; }
  .hl { opacity: 0; animation: hl4 12s infinite; }
  .glance-steps li { animation: lit4 12s infinite; }
  .h1, .glance-steps .g1 { animation-delay: 3s; }
  .h2, .glance-steps .g2 { animation-delay: 6s; }
  .h3, .glance-steps .g3 { animation-delay: 9s; }
  .glance:hover .hl, .glance:hover li { animation-play-state: paused; }
}
@keyframes frame5 { 0% { opacity: 0; } 3%, 20% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes frame5-first { 0%, 20% { opacity: 1; } 23%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lit5 {
  0%, 20% { background: var(--cl-navy); color: var(--cl-white); border-color: var(--cl-navy); }
  23%, 100% { background: var(--cl-white); color: var(--ink); border-color: var(--line); }
}
@keyframes lit4 {
  0%, 24% { background: var(--cl-sage-light); border-color: var(--cl-green); }
  27%, 100% { background: var(--cl-white); border-color: var(--line); }
}
@keyframes hl4 { 0% { opacity: 0; } 3%, 24% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes tap { 0% { transform: scale(0.6); opacity: 1; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {  /* a still strip of the five screens; the overview with all four parts outlined */
  .reel { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); padding: 0; background: none; box-shadow: none; }
  .reel .frame + .frame { position: relative; top: auto; left: auto; width: auto; opacity: 1; }
  .reel .frame { position: relative; padding: 6px; border-radius: 16px; background: var(--frame); }
  .reel .frame img { border-radius: 10px; }
  .tap { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-width: 3px; }
}

/* Built for focus: icon tiles over cropped real-screen details */
.focus { margin-top: 64px; }
.focus-title { text-align: center; font-size: 26px; color: var(--cl-navy); margin-bottom: 24px; }
.focus-note { text-align: center; margin: 16px auto 0; }
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tile { max-width: none; background: var(--cl-white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.tile-shot { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 14px; background: var(--cl-cream); border-bottom: 1px solid var(--line); }
.tile-shot img { max-width: 100%; max-height: 100%; min-width: 0; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 1px 3px rgba(11, 74, 120, 0.12); }
.tile p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; font-family: var(--cl-font-head); font-weight: 800; font-size: 17px; line-height: 1.25; }
.tile .ico { width: 40px; height: 40px; border-radius: 12px; flex: none; }

@media (min-width: 900px) {
  .simple { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; }
}
@media (min-width: 1100px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- the invitation form (/contact#invite) ---------- */
.invite-card { max-width: 820px; margin: 0 auto; background: var(--cl-white); border: 1px solid var(--line); border-radius: 28px; padding: 28px 20px; box-shadow: var(--shadow-soft); }
.invite .group { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
.invite .group > legend { font-family: var(--cl-font-head); font-weight: 800; font-size: 22px; color: var(--cl-navy); padding: 0; margin-bottom: 12px; }
.invite .field { margin-bottom: 16px; }
.invite label { display: block; font-weight: 600; margin-bottom: 6px; }
.invite .optional { font-weight: 400; color: var(--cl-muted); }
.invite .hint { font-size: 15px; color: var(--cl-muted); margin: -2px 0 8px; }
.invite input[type="text"], .invite input[type="email"], .invite input[type="tel"], .invite select, .invite textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--cl-line-strong); border-radius: var(--cl-radius-md);
  background: var(--cl-white); color: var(--ink); font: inherit; font-size: 17px;
}
.invite textarea { min-height: 120px; resize: vertical; }
.invite input:focus-visible, .invite select:focus-visible, .invite textarea:focus-visible { outline: 3px solid var(--cl-navy); outline-offset: 2px; border-color: var(--cl-navy); }
.invite [aria-invalid="true"] { border-color: var(--cl-amber); background: var(--cl-amber-wash); }
.field-msg { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: #7A4D00; }
.field-msg:empty { display: none; }
.invite .child { border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin: 0 0 14px; background: var(--cl-cream); min-width: 0; }
.invite .child > legend { font-family: var(--cl-font-head); font-weight: 800; font-size: 18px; padding: 0 6px; color: var(--ink); }
.invite .program { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.invite .program > legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.choices { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.invite .choice {
  display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 10px 14px; font-weight: 500;
  border: 2px solid var(--line); border-radius: var(--cl-radius-md); background: var(--cl-white); cursor: pointer;
}
.invite .choice:has(input:checked) { border-color: var(--cl-green); background: var(--cl-sage-light); }
.invite .choice input { width: 22px; height: 22px; flex: none; accent-color: var(--cl-green); margin: 0; }
.invite .sms .choice, .invite .consent .choice { align-items: flex-start; font-size: 16px; line-height: 1.45; }
.invite .sms .choice input, .invite .consent .choice input { margin-top: 2px; }
.invite .sms { margin: -4px 0 8px; }
.invite .sms .choice:has(input:disabled) { opacity: 0.75; cursor: default; }
.invite .sms .hint, .invite .consent .hint { margin: 8px 0 0; }
.invite .remove-child { margin-top: 12px; min-height: 44px; padding: 8px 16px; background: none; border: 2px solid var(--line); color: var(--cl-navy); font-size: 16px; }
.invite .add-child { margin-top: 4px; }
.invite .two { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.invite .hp input[type="text"], .invite .hp label { display: block; width: 0; min-height: 0; height: 0; padding: 0; border: 0; margin: 0; overflow: hidden; }
.invite .consent { margin: 0 0 20px; }
.form-status { font-weight: 600; color: var(--cl-navy); margin: 0 0 16px; }
.form-status:empty { display: none; }
.invite .submit { width: 100%; font-size: 18px; min-height: 56px; }
.invite-done { text-align: center; padding: 40px 16px; }
.invite-done h2 { margin-bottom: 8px; }
.nojs { text-align: center; font-size: 18px; margin: 0; }
.contact-alt { max-width: 820px; margin: 40px auto 0; text-align: center; }
.contact-alt h2 { font-size: 24px; margin-bottom: 8px; }
.contact-alt .email { display: flex; justify-content: center; }
@media (min-width: 640px) {
  .invite-card { padding: 40px 44px; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invite .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invite .submit { width: auto; padding: 14px 40px; }
}

/* the wide nav fits on one line from 1024 px: a little tighter until there is room */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-wide { gap: 4px 16px; }
  .nav-wide a:not(.btn) { font-size: 16px; }
  .nav-wide .btn { padding: 8px 16px; font-size: 16px; }
  .header-row { flex-wrap: nowrap; }
}
/* the five focus tiles: two, three or five across, never one alone */
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tiles .tile { grid-column: span 2; }
  .tiles .tile:nth-child(4) { grid-column: 2 / span 2; }
  .tiles .tile:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tiles .tile, .tiles .tile:nth-child(4), .tiles .tile:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 699px) {
  .tile p { gap: 10px; padding: 10px 12px; font-size: 16px; }
  .tile .ico { width: 32px; height: 32px; border-radius: 10px; }
  .tile .ico svg { width: 20px; height: 20px; }
}
@media (max-width: 320px) {  /* 200% text zoom on a phone */
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile p span, .chips li span, .seq-steps li, .glance-steps li { min-width: 0; overflow-wrap: anywhere; }
  .glance-steps { grid-template-columns: minmax(0, 1fr); }
}