.story-close h2 {
  font: 500 36px/1.15 var(--serif);
  margin: 0 0 12px;
  text-wrap: balance;
}
.story-close .home-form-head p {
  font: 17px/1.65 var(--sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}

.explorer-line {
  margin: 0;
  font: 16px/1.6 var(--sans);
  color: var(--ink-soft);
}

.story-close {
  padding-block: 72px;
}
/* The closing section holds the parents' form (the founder, 2026-10-17): the heading and its two lines centred, the form
   card below at reading width. The form's own rules are in /primer/interest-form.css. */
.story-close .home-form {
  max-width: 1080px;
}
.story-close .home-form-head {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 16px;
}
.story-close .home-form-head p {
  margin-inline: auto;
}
.story-close .home-form-head a {
  color: var(--ink);
  font-weight: 600;
}
.story-close .lede {
  max-width: 60ch;
  margin: 0 auto 12px;
  text-align: center;
  font: 16px/1.6 var(--sans);
  color: var(--ink);
}

@media (max-width: 600px) {
  .story-close {
    padding-block: 44px;
  }
  .story-close h2 {
    font-size: 28px;
  }
}

/* One tone per panel (the founder, 2026-10-14: "more colour diversity"). The scroll runs: cream, island green,
   mint, night blue, gold, sage, parchment, gold, forest. No two neighbours share a background.
   Tones come from the brand palette in primer.css (forest, lemon, oxblood, leaf, teal, berry, sky) plus the graph's night blue. */
.building-page {
  --night: #13243d;
  --dragon: #b93a32;
  --gold-soft: #fbebb8;
  background: #fff6e0;
}
.building-page .mast.marketing-mast {
  background: #fff6e0;
}
.build-opening.founder-note {
  background:
    radial-gradient(760px 380px at 88% 0%, #ffd98a99, transparent 70%),
    radial-gradient(640px 360px at 0% 100%, #f9c5b488, transparent 70%), #fff6e0;
}
.opening-story h1 {
  color: var(--ink);
}
.opening-grades {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0 0 20px;
}
.opening-grades b {
  font: 600 clamp(40px, 8vw, 64px)/1 var(--serif);
  color: var(--dragon);
  background: linear-gradient(transparent 64%, var(--lemon) 64%);
  padding: 0 6px;
  margin-inline: -6px;
}
.opening-grades span {
  font: 500 clamp(17px, 2.4vw, 22px)/1.3 var(--sans);
  color: var(--ink);
}
.opening-memory > img {
  border-radius: 14px;
  box-shadow:
    10px 12px 0 -2px var(--lemon),
    0 24px 40px -26px #000a;
}
.opening-memory figcaption {
  color: var(--ink-soft);
}

.explorer {
  background: linear-gradient(180deg, #d4ece6, #e6f5ec);
  border-block: 0;
}
.explorer .section-heading h2 {
  color: #0e5d57;
}
.explorer .explorer-line {
  color: var(--ink);
}

.journey-steps li:nth-child(1) {
  --c: var(--lemon);
}
.journey-steps li:nth-child(2) {
  --c: #f59a8f;
}
.journey-steps li:nth-child(3) {
  --c: #7fd1c4;
}
.journey-steps li:nth-child(4) {
  --c: #9cc3ea;
}

.membership {
  background: linear-gradient(180deg, #e1eed3, #edf5e3);
}
.membership .plans-head .build-eyebrow {
  color: var(--dragon);
}
.membership h2 {
  color: var(--ink);
}

.build-faq {
  max-width: none;
  padding-block: 72px;
  background: #f6f1e7;
}
.faq-inner {
  max-width: 940px;
}
.build-faq .section-heading .build-eyebrow {
  color: var(--dragon);
}
.build-faq .section-heading h2 {
  color: var(--oxblood);
}
.build-faq details {
  margin: 0 0 10px;
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--leaf);
  border-radius: 12px;
  background: #fff;
}
.build-faq details:nth-of-type(3n + 2) {
  border-left-color: var(--lemon);
}
.build-faq details:nth-of-type(3n) {
  border-left-color: var(--berry);
}
.build-faq summary {
  padding: 18px 20px;
}
.build-faq details p {
  padding: 0 20px 20px;
}
.build-faq details[open] {
  box-shadow: 0 14px 26px -22px #000;
}
@media (max-width: 600px) {
  .build-faq {
    padding-block: 44px;
  }
  .build-faq summary {
    padding: 16px;
  }
  .build-faq details p {
    padding: 0 16px 18px;
  }
}

.story-close {
  background: linear-gradient(135deg, #f6d463, #edb93e);
}
.story-close h2 {
  color: var(--ink);
  font-size: 44px;
}
.story-close .home-form-head p {
  color: var(--ink);
}
@media (max-width: 600px) {
  .story-close h2 {
    font-size: 32px;
  }
}
.building-page footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.building-page footer span {
  color: #bfd3c7;
}
.building-page footer a {
  color: var(--lemon);
}
.building-page footer .footer-brand {
  color: var(--paper);
}

@media (max-width: 600px) {
  .build-opening.founder-note .opening-copy {
    padding-block: 20px 36px;
  }

}

.kit-slim .kit-heading,
.kit-slim .kit-world,
.kit-slim #kitOutcomes,
.kit-slim #kitMath {
  display: none;
}
.kit-slim .kit-actions {
  margin-top: 0;
}
.kit-slim .mission-link {
  border-radius: 999px;
  padding-inline: 26px;
  background: #0e5d57;
  border-color: #0e5d57;
}
.kit-slim .mission-link:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}

.tutoring {
  padding-block: 64px 72px;
  background: linear-gradient(180deg, #fff8e8, #fdf1dc);
  scroll-margin-top: 24px;
}
.tutoring .section-heading {
  text-align: center;
}
.tutoring .section-heading h2 {
  color: #0e5d57;
}
.tutoring .lesson-videos {
  max-width: 760px;
  margin-inline: auto;
}
.tutoring .lesson-pop {
  border-color: #ffffff;
  box-shadow: 0 18px 32px -22px #3b2a1c;
}
.tutoring .lesson-pop:hover {
  border-color: var(--lemon);
}
.tutoring .journey-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  scroll-margin-top: 24px;
}
.tutoring .journey-steps li {
  display: block;
  padding: 20px 20px 22px;
  border-radius: 14px;
  background: #ffffff;
  border-top: 6px solid var(--c, var(--lemon));
  box-shadow: 0 14px 28px -24px #3b2a1c;
}
.tutoring .step-number {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  margin: 0 0 12px;
  border-radius: 50%;
  background: var(--c);
  color: var(--ink);
  font: 700 14px/1 var(--mono);
}
.tutoring .journey-steps h3 {
  margin: 0;
  color: var(--ink);
  font: 500 21px/1.25 var(--serif);
}
.tutoring .journey-steps li > p {
  margin: 8px 0 0;
  font: 15px/1.6 var(--sans);
  color: var(--ink-soft);
}

.membership .plans-head h2 {
  grid-column: 1 / -1;
  max-width: none;
}

.math-span { margin: 14px 0 6px; max-width: 48ch; }
.math-span-heading { margin: 0 0 8px; font: 600 14px/1.5 var(--sans); color: var(--ink); }
.math-span-bands { margin: 0; display: grid; gap: 6px; font: 13px/1.5 var(--sans); }
.math-span-bands div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 12px; }
.math-span-bands dt { font-weight: 600; color: var(--ink); }
.math-span-bands dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 1000px) {
  .tutoring .journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tutoring {
    padding-block: 44px 52px;
  }
  .tutoring .journey-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* One calm visual language for the plans, the public maps and the tutoring panel. */
.tutoring-math .world-card {
  border-color: #d2ddcd;
  box-shadow: 0 8px 24px -20px #233d31;
  border-radius: 20px;
}
.tutoring-math .world-art { aspect-ratio: 2.5 / 1; }
.tutoring-math .world-copy { padding: clamp(20px, 3vw, 32px); }
.tutoring-math .world-hook { max-width: 31ch; }
.world-delivery {
  margin: 20px 0 0;
  font: 15px/1.6 var(--sans);
  color: var(--ink-soft);
  max-width: 48ch;
}
.tutoring-math .math-outcome-list {
  border: 0;
  padding-top: 0;
  gap: 9px;
  font-size: 14px;
}
.tutoring-math .world-buy { padding-top: 28px; }
.topic-entry {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 600 14px/1.5 var(--sans);
  color: var(--ink);
  text-underline-offset: 5px;
}
.world-copy > .topic-entry { margin-top: 8px; }

.subject-topics {
  margin-top: 24px;
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid #c8d6c7;
  border-radius: 20px;
  background: #fffdf7;
  scroll-margin-top: 24px;
}
.topic-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.topic-heading h3 { font: 500 clamp(25px, 3vw, 34px)/1.2 var(--serif); margin: 0; }
.topic-heading p:not(.build-eyebrow) { color: var(--ink-soft); font: 15px/1.6 var(--sans); max-width: 58ch; }
.topic-close, .topic-back {
  border: 1px solid #c8d6c7;
  border-radius: 8px;
  min-height: 44px;
  background: transparent;
  padding: 8px 12px;
  color: var(--ink);
  font: 600 13px/1.4 var(--sans);
  cursor: pointer;
}
.topic-close { flex-shrink: 0; }
.topic-back:disabled { opacity: .45; cursor: default; }
.topic-tools { display: flex; align-items: flex-end; gap: 16px; margin: 20px 0; }
.topic-search { display: grid; gap: 6px; flex: 1; max-width: 440px; font: 600 12px/1.4 var(--sans); }
.topic-search input { min-width: 0; min-height: 46px; width: 100%; border: 1px solid #c8d6c7; border-radius: 8px; background: white; padding: 10px 12px; color: var(--ink); font: 16px/1.5 var(--sans); }
.topic-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-group, .topic-match {
  border: 1px solid #d5dfd1;
  border-radius: 24px;
  background: transparent;
  min-height: 44px;
  padding: 8px 12px;
  font: 13px/1.4 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.topic-group[aria-pressed=true] { background: #e4ebda; border-color: #869b80; }
.topic-results { margin-top: 20px; }
.topic-results > p { color: var(--ink-soft); font: 13px/1.5 var(--sans); }
.topic-matches { display: flex; flex-wrap: wrap; gap: 8px; max-height: 250px; overflow-y: auto; padding: 4px; }
.topic-match { border-radius: 8px; background: white; text-align: left; }
.topic-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  position: relative;
  margin-top: 26px;
  padding-block: 16px 24px;
  isolation: isolate;
}
.topic-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.topic-lines path { stroke: #a7b89e; stroke-width: 1.5; fill: none; }
.topic-lane { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; min-width: 0; }
.topic-lane-label { margin: 0 0 4px; font: 600 11px/1.5 var(--sans); color: var(--ink-soft); letter-spacing: .07em; text-transform: uppercase; }
.topic-node {
  display: block;
  min-height: 52px;
  padding: 14px;
  border: 1px solid #c8d6c7;
  border-radius: 12px;
  background: #fffdf7;
  color: var(--ink);
  font: 500 14px/1.5 var(--sans);
  text-align: left;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.topic-node:hover { border-color: #71896b; background: #f1f5eb; }
.topic-selected { background: #e6eddb; border: 1.5px solid #71896b; padding: 22px 18px; cursor: default; box-shadow: 0 10px 24px -24px #233d31; }
.topic-selected h4 { margin: 0; font: 500 23px/1.25 var(--serif); overflow-wrap: break-word; }
.topic-node-group { margin: 10px 0 0; color: var(--ink-soft); font: 12px/1.5 var(--sans); }
.topic-empty { color: var(--ink-soft); font: italic 14px/1.6 var(--serif); margin: 0; }
.topic-status { margin: 4px 0 0; color: var(--ink-soft); font: 12px/1.6 var(--sans); }
.subject-topics :is(button,a,input,h4):focus-visible,
.topic-entry:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 4px; }
.tutoring .section-heading { max-width: 62ch; margin-inline: auto; }

.tutoring .lesson-videos { width: 100%; max-width: none; margin: 0; gap: 12px; }
.tutoring .lesson-pop { border-radius: 14px; box-shadow: none; border: 1px solid #e0d7c7; }

.tutoring .journey-steps { gap: 24px; margin-top: 48px; }
.tutoring .journey-steps li { background: transparent; border-top: 1px solid #d8d3bf; border-radius: 0; padding: 18px 0 0; box-shadow: none; }
.tutoring .step-number { background: transparent; color: var(--ink-soft); height: auto; min-width: 0; margin-bottom: 12px; font-size: 12px; }
.tutoring .journey-steps h3 { font-size: 20px; }

/* The grade-by-grade maths map (subject-catalog.js mountGrades): one button per grade, its topic rows as cards. */
.grade-map { margin-top: 24px; }
.grade-map > h4 { margin: 0; font: 500 22px/1.3 var(--serif); }
.grade-intro { margin: 6px 0 16px; color: var(--ink-soft); font: 15px/1.6 var(--sans); max-width: 62ch; }
.grade-block { border-top: 1px solid #d8d3bf; }
.grade-block h5 { margin: 0; }
.grade-toggle {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 10px 4px; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left;
  font: 500 20px/1.3 var(--serif);
}
.grade-toggle::after { content: '+'; margin-left: auto; font: 600 20px/1 var(--sans); color: var(--ink-soft); }
.grade-toggle[aria-expanded=true]::after { content: '\2212'; }
.grade-count { order: 1; color: var(--ink-soft); font: 13px/1.4 var(--sans); }
.grade-toggle::after { order: 2; }
.grade-panel { padding: 4px 0 20px; }
.grade-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grade-row { min-width: 0; padding: 14px 16px; border: 1px solid #e0d7c7; border-radius: 12px; background: white; }
.grade-row-name { margin: 0 0 8px; font: 600 15px/1.4 var(--sans); overflow-wrap: break-word; }
.grade-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.grade-steps li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: baseline; font: 14px/1.45 var(--sans); }
.grade-level { font: 600 10px/1.6 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.grade-level-core { color: #4d6b48; }
.grade-level-stretch { color: var(--oxblood); }
.grade-step { overflow-wrap: break-word; }
.topic-connect { margin-top: 28px; padding-top: 20px; border-top: 1px solid #d8d3bf; }
.topic-connect h4 { margin: 0; font: 500 22px/1.3 var(--serif); }
@media (max-width: 1099px) { .grade-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .grade-rows { grid-template-columns: 1fr; }
  .grade-toggle { min-height: 56px; }
}

@media (max-width: 899px) {

  .tutoring .lesson-videos { max-width: 620px; margin-inline: auto; }

}
@media (max-width: 699px) {
  .topic-stage { grid-template-columns: 1fr; gap: 30px; max-width: 440px; margin-inline: auto; }
  .topic-before { order: 0; }
  .topic-now { order: 1; }
  .topic-after { order: 2; }
  .topic-lane { align-items: stretch; }
  .topic-heading { flex-wrap: wrap; gap: 8px; }
  .topic-heading > div { flex: 1 1 250px; }
}
@media (max-width: 559px) {
  .math-span-bands div { grid-template-columns: 1fr; }

  .tutoring-math .world-copy { padding: 20px; }

  .topic-tools { gap: 8px; }
  .tutoring .lesson-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutoring .journey-steps { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .topic-node,
.membership .plan-join { transition: none; animation: none; }
}

/* The homepage of 2026-10-22 (the founder; docs/decisions/2026-10-22-home-layout.md): hero, worlds, tutoring, plans,
   the guide, the form. The tutoring panel is a grid of three rows at one width: the two lesson posters side by side
   with their line, the Math card alone under them, the four steps under that. From 900px the card is one wide card,
   its picture left of its words; below, it stacks. The steps are four across, two by two to 1000px, one on a phone. */
.tutoring { padding-block: 64px 72px; background: linear-gradient(180deg, #fff8e8, #fdf1dc); scroll-margin-top: 24px; }
.tutoring-heading h2 { font: 500 clamp(32px, 4.4vw, 48px)/1.12 var(--serif); }
.tutoring-line { margin: 12px auto 0; font: 18px/1.6 var(--sans); color: var(--ink-soft); }
.tutoring-grid { display: grid; gap: 32px; margin: 36px auto 0; max-width: 1040px; }
.tutoring .journey-steps { max-width: 1040px; margin-inline: auto; }
.tutoring-math { display: flex; min-width: 0; }
@media (min-width: 900px) {
  .tutoring-math .world-card { flex-direction: row; }
  .tutoring-math .world-art { flex: 0 0 44%; aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 1px solid color-mix(in srgb, var(--wi) 18%, white); }
  .tutoring-math .world-window { top: 50%; bottom: auto; left: 9%; right: 9%; aspect-ratio: 16 / 9; translate: 0 -50%; border-bottom: 3px solid var(--wi); border-radius: 14px; }
  .tutoring-math .world-copy { padding: clamp(28px, 3.4vw, 40px); }
  .tutoring-math .math-span-bands div { grid-template-columns: 9.5em minmax(0, 1fr); }
}

/* Learn inside many worlds: one box per world, live worlds first, coming soon after and quieter. Every picture fills
   the same 3 by 2 frame, so the titles of a row start on one line; two across on a phone, three from 700px, five
   from 1100px. */
.world-boxes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 28px);
  align-items: stretch;
}
@media (min-width: 700px) { .world-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .world-boxes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.world-box { display: flex; flex-direction: column; min-width: 0; }
.world-box-picture {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: #f5efe2;
}
.world-box-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.world-box-quiet { background: #efe9dc; color: #9a8f7a; font: 500 44px/1 var(--serif); }
.world-box-subject { margin: 12px 0 2px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.world-box-title { margin: 0; font: 500 21px/1.25 var(--serif); color: var(--ink); overflow-wrap: break-word; }
.world-box-actions { display: grid; gap: 2px; margin-top: auto; padding-top: 12px; }
.world-box-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: white;
  padding: 8px 12px;
  font: 600 14px/1.4 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.world-box-play:hover { background: var(--oxblood); border-color: var(--oxblood); }
.world-box .topic-entry { justify-content: center; }
.world-box.is-soon .world-box-title { color: var(--ink-soft); }
.world-box.is-soon .world-box-picture { opacity: 0.8; }
.world-box :is(button, a):focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }
.world-book { margin: 48px auto 0; max-width: 760px; text-align: center; }
.world-book img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid #ddd8c8; box-shadow: 0 18px 36px -28px #3b2a1c; }
.world-book figcaption { margin-top: 14px; }
.world-book .world-book-line { font: italic 500 20px/1.4 var(--serif); color: var(--ink); }

/* The three plans, each a month, written from plans.js by scripts/render-plans.mjs. */
.price-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 900px) { .price-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.price-plan {
  --wi: #1b2f4f;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid #d2ddcd;
  border-top: 6px solid var(--wi);
  border-radius: 16px;
  background: white;
}
.price-plan-week { --wi: #0e5d57; }
.price-plan-primer { --wi: #7a2e2a; }
.price-plan h3 { margin: 0; font: 500 26px/1.2 var(--serif); color: var(--wi); }
.price-plan .plan-price { margin: 10px 0 0; }
.price-plan .plan-list { margin-bottom: 20px; }
.price-plan .plan-join { margin-top: auto; }

.tutoring-lessons { min-width: 0; }
.tutoring-note { margin: 14px 0 0; font: 15px/1.6 var(--sans); color: var(--ink-soft); }