/* ==========================================================================
   Mr. Grummel — landing page
   The intro runs on a fixed timeline: door (0.5s) → walk (0.75s) →
   floor (2s) → ceiling (2.15s) → board (2.35s) → sign (2.6s) → clock (2.7s).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero classroom
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  height: 92vh;
  background: linear-gradient(180deg, #d9c9a8 0%, #c4b08a 70%, #a8906a 100%);
}

/* ceiling + strip light */
.hero__ceiling {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9%;
  background: linear-gradient(180deg, #e6dcc5, #cdc0a0);
  border-bottom: 3px solid var(--ink);
  z-index: 4;
  animation: lb-pop-down 0.45s cubic-bezier(0.34, 1.56, 0.48, 1) 2.15s both;
}
.hero__tiles {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background:
    repeating-linear-gradient(90deg, transparent 0 5.55%, rgba(0, 0, 0, 0.18) 5.55%, rgba(0, 0, 0, 0.18) calc(5.55% + 2px)),
    repeating-linear-gradient(0deg, transparent 0 50%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.18) calc(50% + 2px));
}
.hero__light {
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, -6px);
  width: 22%;
  height: 14px;
  background: linear-gradient(180deg, #f8f4d8 0%, #fff8c2 50%, #d9cf90 100%);
  border: 2.5px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 0 18px 5px rgba(255, 240, 160, 0.75), 0 0 60px 20px rgba(255, 240, 160, 0.32);
}
.hero__light span {
  position: absolute;
  top: -10px;
  width: 3px; height: 10px;
  background: var(--ink);
}
.hero__light span:first-child { left: 16%; }
.hero__light span:last-child { right: 16%; }

/* a fluorescent tube on its way out */
.hero__flicker {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: var(--ink);
  opacity: 0;
  animation: lb-flicker 11s linear infinite;
}

.hero__motes {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hero__motes span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff6dc;
  animation-name: lb-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero__clock {
  position: absolute;
  top: 12%; right: 3.5%;
  width: 78px; height: 78px;
  z-index: 2;
  filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.28));
  animation: lb-pop-clock 0.45s cubic-bezier(0.34, 1.7, 0.48, 1) 2.7s both;
}
.hero__clock svg { display: block; width: 100%; height: 100%; }

/* chalkboard */
.hero__board {
  position: absolute;
  top: 11%; left: 6%;
  width: 58%;
  max-width: 860px;
  z-index: 1;
  transform-origin: center center;
  animation: lb-pop-board 0.55s cubic-bezier(0.34, 1.65, 0.48, 1) 2.35s both;
}
.hero__board .board { min-height: 280px; }
.hero__board .tray {
  position: absolute;
  left: -10px; right: -10px; bottom: -26px;
  margin: 0;
}

.hero__lesson {
  position: relative;
  padding: 32px 44px 32px 42px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.3vw, 52px);
  line-height: 1.05;
  color: var(--cream);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
  text-wrap: pretty;
  max-width: 15ch;
}
.hero__sub {
  margin: 0;
  font-family: var(--font-hand);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.35;
  color: var(--chalk-body);
  max-width: 44ch;
}
.hero__actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* the sign nobody obeys */
.hero__sign {
  position: absolute;
  top: 6%; right: 5%;
  width: 104px;
  padding: 6px 6px 7px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
  color: var(--ink);
  transform: rotate(-4deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
  z-index: 3;
  animation: lb-pop-sign 0.45s cubic-bezier(0.34, 1.7, 0.48, 1) 2.6s both;
}
.hero__sign-emoji { font-size: 24px; display: block; line-height: 0.9; margin-bottom: 2px; }
.hero__pin {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  width: 11px; height: 11px;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.hero__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  z-index: 1;
  border-top: 3px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(90deg, #8a6a48 0px, #8a6a48 44px, #7a5a3c 44px, #7a5a3c 46px);
  animation: lb-pop-up 0.45s cubic-bezier(0.34, 1.56, 0.48, 1) 2s both;
}
.hero__floor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 40%);
}

/* the door he comes through */
.hero__door {
  position: absolute;
  left: 0; bottom: 14%;
  width: 150px;
  height: 62%;
  min-height: 400px;
  perspective: 1100px;
  perspective-origin: 100% 50%;
  z-index: 2;
  pointer-events: none;
  animation: lb-door-fade 0.5s ease-in 2.55s both;
}
.hero__door-seam {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ink);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06), -1px 0 4px rgba(0, 0, 0, 0.45);
  z-index: 3;
  animation: lb-seam-fade 0.1s linear 0.55s both;
}
.hero__door-panel {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter: drop-shadow(4px 5px 5px rgba(0, 0, 0, 0.45));
  animation: lb-door-swing 1.05s cubic-bezier(0.38, 0.02, 0.42, 1) 0.5s both;
}
.hero__door-panel svg { display: block; width: 100%; height: 100%; }

.hero__replay {
  position: absolute;
  left: 3%; bottom: 4%;
  z-index: 8;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  opacity: 0.6;
}
.hero__replay:hover, .hero__replay:focus-visible { opacity: 1; }

/* the man himself */
.hero__teacher {
  position: absolute;
  right: 2%; bottom: 11%;
  width: 42%;
  max-width: 560px;
  min-width: 320px;
  z-index: 6;
  animation: lb-walk 1.9s cubic-bezier(0.32, 0.55, 0.4, 1) 0.75s both;
}
/* Mirrored so he faces the chalkboard instead of the wings; every rotation
   applied inside the svg reads flipped, so the arm keyframes are tuned for
   this orientation.
   He does not arrive in it. lb-walk carries him left-to-right from the door,
   so he enters unmirrored — facing where he is going — and pivots on the spot
   as he plants his feet. The walk runs 0.75s → 2.65s; the turn takes over at
   2.6s, which also puts it under the door's fade (2.55s). */
.hero__teacher > svg {
  display: block; width: 100%; height: auto; overflow: visible;
  transform: scaleX(-1);
  animation: lb-turn-around 0.3s ease-in-out 2.6s both;
}

.hero__pointer-arm {
  transform-box: view-box;
  transform-origin: 232px 232px;
  animation: lb-idle-point 15s ease-in-out 4s infinite;
}
/* he stops fidgeting for the length of the CTA tap. All three run 2.8s from
   the same instant, so the jabs and the button's jolts need no timer. */
.hero__pointer-arm.is-tapping { animation: lb-cta-point 2.8s ease-in-out both; }
.hero__pointer-stick { transform-box: view-box; transform-origin: 240px 354px; }
.hero__pointer-arm.is-tapping .hero__pointer-stick { animation: lb-cta-jab 2.8s ease-in-out both; }
.btn.is-struck { animation: lb-cta-struck 2.8s linear both; }

/* Idle life. Blink and glance wait out the 3.6s intro; the periods
   (4.2 / 5.6 / 13 / the point cycle's 15) share no beat, so he never looks metronomic. */
.hero__body {
  transform-box: view-box;
  transform-origin: 156px 360px;
  animation: lb-breathe 4.2s ease-in-out infinite;
}
.hero__eyes {
  transform-box: view-box;
  transform-origin: 158px 132px;
  animation: lb-blink 5.6s ease-in-out 3.8s infinite;
}
.hero__pupils {
  animation: lb-glance-r 13s ease-in-out 6.5s infinite;
}
/* cursor tracking drives the transform inline; the glance loop must let go */
.hero__pupils.is-tracking { animation: none; }

/* idle mutter bubble — a clone of the intro bubble that pops on its own clock */
.hero__bubble--mutter { animation: none; opacity: 0; transform-origin: 12% 100%; }
.hero__bubble--mutter.is-muttering { animation: lb-mutter-pop 4.6s ease-in-out both; }
/* once he starts muttering, the opening line stays retired (until a replay) */
.hero__bubble.is-quiet { animation: none; opacity: 0; }

.hero__caption {
  position: absolute;
  left: 6%; bottom: -6px;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 22px;
  color: var(--paper);
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.45);
  transform: rotate(-2deg);
  animation: lb-fade-in 0.5s ease-out 3.1s both;
}

.hero__bubble {
  position: absolute;
  left: -34%; top: -4%;
  width: 62%;
  min-width: 230px;
  pointer-events: none;
  transform-origin: bottom right;
  animation: lb-bubble 3.7s cubic-bezier(0.34, 1.6, 0.48, 1) 1.15s both;
}
.hero__bubble-body {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}
.hero__bubble-tail {
  position: absolute;
  right: 10%; bottom: -22px;
  width: 40px; height: 26px;
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Lesson plan / how it works
   -------------------------------------------------------------------------- */

.lesson-plan {
  position: relative;
  padding: 84px 6% 96px;
  border-top: 3px solid var(--ink);
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 0, 0, 0.35), transparent 70%),
    repeating-linear-gradient(92deg,
      #b07843 0px, #b07843 4px,
      #7a4f28 4px, #7a4f28 5px,
      #b07843 5px, #b07843 18px,
      #d39764 18px, #d39764 19px),
    linear-gradient(180deg, #7a4f28, #b07843);
}
.lesson-plan .eyebrow { color: var(--paper); }
.lesson-plan h2 {
  margin: 0 0 42px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px);
  color: var(--paper);
  text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 30px;
}
.step {
  padding: 22px 22px 26px 46px;
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.35);
}
.step__n {
  font-family: var(--font-hand);
  font-size: 13px;
  letter-spacing: 2px;
  color: #8a6a3a;
}
.step__title {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  margin: 4px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-blue);
}
.step__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: #4a3a24;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Pop quiz
   -------------------------------------------------------------------------- */

.quiz {
  position: relative;
  overflow: hidden;
  padding: 80px 6% 96px;
  background: linear-gradient(180deg, #d9c9a8 0%, #c4b08a 100%);
  border-top: 3px solid var(--ink);
}

/* the room sours as he loses patience */
.quiz__tint,
.quiz__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
.quiz__tint {
  z-index: 3;
  background: linear-gradient(180deg, rgba(40, 14, 8, 0.9), rgba(20, 10, 6, 0.95));
}
.quiz__vignette {
  z-index: 4;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, rgba(120, 20, 10, 0.85) 100%);
}

.quiz__grid {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 46px;
  align-items: start;
}

.quiz .eyebrow { color: var(--wood); margin-bottom: 10px; }

.quiz__board { padding: 30px 32px 34px; min-height: 260px; }
.quiz__qnum {
  font-family: var(--font-hand);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--chalk-dim);
  margin-bottom: 14px;
}
.quiz__question {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  color: var(--cream);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
  min-height: 2.3em;
  transition: color 400ms ease;
}
.quiz__line {
  margin-top: 22px;
  font-family: var(--font-hand);
  font-size: 17px;
  color: #eab098;
  min-height: 1.4em;
}

/* He stands at the right corner of his little board, grading in real time —
   the feedback line is left-aligned, so the right edge keeps it readable. */
.quiz__board-col { position: relative; }
.quiz__grummel {
  position: absolute;
  right: 2%;
  bottom: -40px;
  width: 180px;
  pointer-events: none;
}
.quiz__grummel svg { display: block; width: 100%; height: auto; }

.quiz__paper-wrap {
  position: relative;
  transform: rotate(-1.2deg);
}
.quiz__paper-wrap.is-rattling { animation: lb-rattle 0.5s ease-in-out infinite; }

.quiz__paper {
  --margin-x: 34px;
  padding: 16px 20px 22px 48px;
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.3), inset 0 0 30px rgba(180, 150, 90, 0.15);
  background-image: repeating-linear-gradient(180deg,
    transparent 0, transparent 34px,
    var(--rule-blue) 34px, var(--rule-blue) 35px);
}

.quiz__streak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.18);
}
.quiz__streak-label {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 20px;
}
.quiz__slots { display: flex; gap: 10px; align-items: center; }
.quiz__slot {
  display: grid;
  place-items: center;
  width: 24px; height: 32px;
}
.quiz__slot.is-popping { animation: lb-pop 500ms ease-out; }

.quiz__choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 20px;
}
.quiz__choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 6px 10px 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
}
.quiz__choice[disabled] { cursor: default; }
.quiz__letter {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: #ffffff;
}
.quiz__choice.is-right .quiz__letter { background: #c9edd3; }
.quiz__choice.is-wrong .quiz__letter { background: #f7d2cc; }
.quiz__choice-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the mark he scrawls over your answer */
.quiz__mark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
}
.quiz__mark--cross { left: 8px; width: 34px; height: 34px; }
.quiz__mark--tick { left: 6px; width: 38px; height: 38px; }
.quiz__mark line, .quiz__mark path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: lb-draw 300ms ease-out forwards;
}
.quiz__mark line:nth-child(2) { animation-delay: 120ms; }

.quiz__pencil {
  position: absolute;
  right: -4%; bottom: -46px;
  width: 190px;
  transform: rotate(-16deg);
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.25));
}

/* three in a row */
.quiz__win {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(255, 235, 140, 0.35) 0%, rgba(0, 0, 0, 0.6) 80%);
  animation: lb-win-fade 320ms ease-out;
}
.quiz__win[hidden] { display: none; }
.quiz__confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.quiz__confetti span {
  position: absolute;
  top: -14px;
  width: 9px; height: 14px;
  animation-name: lb-confetti;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.quiz__win-card {
  position: relative;
  max-width: 460px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 26px 30px;
  text-align: center;
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.4);
  animation: lb-win-pop 600ms cubic-bezier(0.4, 1.6, 0.5, 1) both;
}
.quiz__win-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
}
.quiz__win-sub {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 20px;
  color: #5b4a30;
  line-height: 1.3;
  margin-top: 8px;
}
.quiz__win-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.quiz__win-actions .btn { padding: 11px 20px; box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.4); }
.quiz__win-actions .btn:hover { box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4); }

/* --------------------------------------------------------------------------
   Curriculum
   -------------------------------------------------------------------------- */

.curriculum {
  position: relative;
  padding: 84px 6px 90px;
  background: var(--dark);
  border-top: 3px solid var(--ink);
}
.curriculum > .wrap { padding: 0 6%; }
.curriculum .eyebrow { color: var(--brown); }
.curriculum h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px);
  color: var(--cream);
}
.curriculum__intro {
  margin: 0 0 34px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tan);
  max-width: 64ch;
}

.subjects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}
.subject {
  padding: 20px 20px 22px;
  background: rgba(47, 82, 64, 0.32);
  border: 2px solid rgba(244, 241, 228, 0.22);
  border-radius: 6px;
  transition: border-color 150ms ease, background 150ms ease;
}
.subject:hover {
  border-color: rgba(242, 197, 74, 0.7);
  background: rgba(47, 82, 64, 0.5);
}
.subject__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.subject__name {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--cream);
}
.subject__count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #8fc7a3;
  border: 1px solid rgba(143, 199, 163, 0.5);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.subject__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 12px;
}
.subject__domains {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.subject__domains span {
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--chalk-body);
  padding: 4px 11px;
  border: 1.5px dashed rgba(244, 241, 228, 0.4);
  border-radius: 30px;
}

/* topic request slip */
.request {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 34px;
  align-items: center;
}
.request h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  color: var(--cream);
}
.request p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}
.request__slip {
  padding: 20px 22px 24px 46px;
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-0.8deg);
}
.request__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.request__form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.request__form label span {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #8a6a3a;
}
.request__form input {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--rule-blue);
  padding: 4px 2px;
  outline: none;
  width: 100%;
}
.request__form input[type="email"] { font-size: 20px; }
.request__form input:focus { border-bottom-color: var(--red); }
.request__form .btn { align-self: flex-start; margin-top: 6px; }
.request__done {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: #2f6b41;
}
.request__done span {
  font-size: 19px;
  color: #5b4a30;
}

/* --------------------------------------------------------------------------
   Report card / pricing
   -------------------------------------------------------------------------- */

.pricing {
  position: relative;
  padding: 90px 6% 104px;
  background: linear-gradient(180deg, #c4b08a 0%, #a8906a 100%);
  border-top: 3px solid var(--ink);
}
.pricing__card {
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 34px 38px 38px;
  text-align: center;
  transform: rotate(-1.5deg);
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.35);
}
/* the closer — mirrored to face the card, stick fixed on the signup button */
.pricing__grummel {
  position: absolute;
  left: calc(100% + 10px);
  bottom: -3px;
  width: 230px;
  pointer-events: none;
}
.pricing__grummel svg { display: block; width: 100%; height: auto; overflow: visible; transform: scaleX(-1); }
.pricing__grummel:not(.is-steaming):not(.is-celebrating) .grummel-figure { animation: lb-breathe 4.2s ease-in-out infinite; }
.pricing__grummel.is-celebrating .grummel-figure { animation: lb-cheer 0.85s ease-in-out infinite; }
.pricing__grummel .pricing__grummel-arm {
  transform-box: view-box;
  transform-origin: 232px 232px;
  transform: rotate(-13deg); /* aims the stick's line at the submit button */
}
/* the stick goes up and waves. The static rotate is what reduced motion is
   left with once the wave collapses — still an arm in the air. */
.pricing__grummel.is-celebrating .pricing__grummel-arm {
  transform: rotate(-96deg);
  animation: lb-cheer-arm 0.85s ease-in-out infinite;
}
@media (max-width: 1180px) {
  /* No gutter left beside the centred card, so he steps inside it and stands
     on the bottom edge instead of vanishing. */
  .pricing__grummel {
    position: relative;
    left: auto;
    bottom: auto;
    width: 156px;
    /* the side margins pull him past the card padding onto its border, the
       bottom one lets his feet hang over the edge he is standing on */
    margin: -4px -20px -34px auto;
  }
  /* the button is now above him, not beside him — the stick has to go up */
  .pricing__grummel .pricing__grummel-arm { transform: rotate(-62deg); }
}

.pricing__label {
  font-family: var(--font-hand);
  font-size: 14px;
  letter-spacing: 3px;
  color: #8a6a3a;
}
.pricing__price {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
  margin: 10px 0 6px;
}
.pricing__note {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 22px;
  color: #5b4a30;
  line-height: 1.35;
}
.pricing__fine {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: #6b5a3e;
}

/* --------------------------------------------------------------------------
   Waiting-list capture — the funnel's terminal action until there's a
   real App Store link to send people to
   -------------------------------------------------------------------------- */

.signup {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 2px dashed rgba(0, 0, 0, 0.2);
}
.signup__label {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: #4a3a24;
  margin-bottom: 12px;
}
.signup__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}
.signup__row input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--rule-blue);
  padding: 6px 4px;
  outline: none;
  text-align: left;
}
.signup__row input[type="email"]:focus { border-bottom-color: var(--red); }
.signup__row input[type="email"]::placeholder { color: #a89578; }
.signup__fine {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: #6b5a3e;
}
.signup__fine a { color: #7a4f28; text-decoration: underline; }
.signup__fine a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   Blog teaser
   -------------------------------------------------------------------------- */

.teaser {
  padding: 74px 6% 84px;
  background: var(--dark);
  border-top: 3px solid var(--ink);
}
.teaser__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}
.teaser h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--cream);
}
.teaser__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

/* --------------------------------------------------------------------------
   Small screens — the classroom stops being a diorama and becomes a stack
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* stacked intro: ceiling 0s → floor 0.2s → board 0.25s → teacher 0.65s → caption 1.05s */
  .hero {
    height: auto;
    min-height: 0;
    padding: 60px 6% 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  /* the sign hangs over the lesson once the board goes full-width, and
     .board clips it, so it goes the way of the door and the clock */
  .hero__door, .hero__clock, .hero__replay, .hero__sign { display: none; }
  /* The ceiling stays for the strip light — it is the room's only light
     source and the board reads as a cellar without it. Height has to become
     pixels: the hero is auto-height here, so the 9% resolves to nothing.
     It sits inside the hero's own top padding, above the board. */
  .hero__ceiling {
    height: 30px;
    animation: lb-pop-down 0.45s cubic-bezier(0.34, 1.56, 0.48, 1) both;
  }
  .hero__light { width: 44%; height: 12px; }
  .hero__pointer-arm.is-tapping { animation-name: lb-cta-point-stacked; }
  /* once the quiz stacks to one column there is no gutter for him to stand
     in — he comes out from behind the board and stands on its tray */
  .quiz__grummel {
    position: relative;
    right: auto;
    bottom: auto;
    width: 128px;
    /* the art is cropped at the thigh, so the bottom margin has to out-run
       the grid gap: the answer sheet is painted after him and hides the cut */
    margin: -30px 2% -66px auto;
  }
  /* stacked layout puts the CTA nowhere he can aim at — back to plain taps */
  .hero__pointer-arm { animation: lb-idle-tap 7s ease-in-out 4s infinite; }
  .hero__floor {
    height: 22%;
    /* a fade, not the desktop pop: it's a background strip, popping would slide it over the teacher */
    animation: lb-fade-in 0.5s ease-out 0.2s both;
  }
  .hero__board {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: none;
    animation: lb-pop-board 0.55s cubic-bezier(0.34, 1.65, 0.48, 1) 0.25s both;
  }
  .hero__board .tray { position: relative; left: auto; right: auto; bottom: auto; margin: 0 -10px; }
  /* the bottom padding is the strip of empty chalkboard he stands against —
     without it he covers the two CTAs */
  .hero__lesson { padding: 26px 24px 104px; }
  .hero__title { max-width: none; }
  /* he stands in front of the board, not underneath it: the negative margin
     has to swallow the .hero flex gap as well as the overlap itself */
  .hero__teacher {
    position: relative;
    right: auto; bottom: auto;
    width: 72%;
    /* uncapped he becomes a 650px giant on a tablet */
    max-width: 320px;
    min-width: 0;
    margin: -158px auto 0;
    animation: lb-rise-in 0.5s cubic-bezier(0.34, 1.56, 0.48, 1) 0.65s both;
  }
  /* he rises into place here instead of walking in, so there is no direction
     of travel to face and nothing to turn away from */
  .hero__teacher > svg { animation: none; }
  .hero__bubble { display: none; }
  .hero__caption {
    position: relative;
    left: auto; bottom: auto;
    display: block;
    text-align: center;
    animation: lb-fade-in 0.4s ease-out 1.05s both;
  }
  .quiz__choices { grid-template-columns: minmax(0, 1fr); }
  .quiz__pencil { display: none; }
}

@media (max-width: 620px) {
  .lesson-plan, .quiz, .curriculum, .pricing, .teaser { padding-left: 5%; padding-right: 5%; }
  .lesson-plan { padding-top: 60px; padding-bottom: 68px; }
  .quiz { padding-top: 58px; padding-bottom: 68px; }
  .curriculum { padding-top: 60px; padding-bottom: 66px; }
  .pricing { padding-top: 64px; padding-bottom: 72px; }
  .teaser { padding-top: 56px; padding-bottom: 64px; }
  .teaser__head a { display: inline-flex; align-items: center; min-height: 40px; }
  .curriculum > .wrap { padding: 0; }

  .lesson-plan h2 { margin-bottom: 30px; }
  .steps { gap: 20px; }
  .step { padding: 20px 18px 22px 40px; }
  .step__title { font-size: 26px; }

  .quiz__grid { gap: 30px; }
  /* the board reserved desktop height that mobile has nothing to put in */
  .quiz__board { padding: 24px 20px 28px; min-height: 0; }
  .quiz__paper-wrap { transform: none; }
  .quiz__paper { padding: 16px 16px 20px 44px; }
  .quiz__win-card { padding: 22px 20px; }
  .quiz__win-actions .btn { width: 100%; }

  .subjects { gap: 16px; }
  .request { margin-top: 40px; gap: 24px; }
  .request__slip { padding: 18px 18px 22px 42px; transform: none; }
  .request__form .btn { align-self: stretch; text-align: center; }
  /* the type is already ≥16px so iOS won't zoom — this is purely touch area */
  .request__form input, .signup__row input[type="email"] { min-height: 44px; }

  .pricing__card { transform: none; padding: 28px 22px 30px; }

  /* a thumb wants the field and the button stacked, each full width */
  .signup__row { flex-direction: column; align-items: stretch; gap: 14px; }
  .signup__row input[type="email"] { flex: 0 0 auto; }
  .signup__row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Phones proper — the classroom has to fit in one hand
   -------------------------------------------------------------------------- */

@media (max-width: 430px) {
  .hero { padding: 40px 5% 32px; gap: 20px; }
  /* the hero top padding drops to 40px — the lamp has to fit under it */
  .hero__ceiling { height: 22px; }
  .hero__light { width: 52%; height: 10px; }
  /* keep the standing strip from the 900px rule — only the sides get tighter */
  .hero__lesson { padding: 22px 18px 100px; gap: 12px; }
  .hero__actions { gap: 10px; }
  /* both hero CTAs go full width so neither is the harder tap */
  .hero__actions .btn { width: 100%; text-align: center; }
  .hero__teacher { width: 86%; }
  .hero__caption { font-size: 19px; }

  .step { padding: 18px 16px 20px 36px; --margin-x: 24px; }
  .quiz__board { padding: 20px 16px 24px; }
  .quiz__paper { padding: 14px 12px 18px 38px; --margin-x: 26px; }
  .quiz__choice { font-size: 23px; min-height: 48px; gap: 10px; }
  .quiz__letter { width: 32px; height: 32px; font-size: 19px; }
  .quiz__slot { width: 20px; height: 28px; }
  .quiz__streak-label { font-size: 18px; }

  .subject { padding: 16px 16px 18px; }
  .request__slip { padding: 16px 14px 20px 38px; --margin-x: 26px; }
  .pricing__card { padding: 24px 16px 26px; }
  .signup__label { font-size: 20px; }
}