/* =========================================================================
   home_v1.css — Lead Out home page (v1)

   Styles are scoped to the `.lo-*` class prefix to avoid collisions with the
   broader site stylesheets. Section partials live in app/views/parts/ and
   each renders a top-level <section class="lo-sec ...">.
   ========================================================================= */

:root {
  /* Lead-Out home accent. Picked in Claude Design (Ask 1, Variant A). */
  --lo-color-2: #1F3A63;        /* ink-blue */
  --lo-rule:    rgba(28, 28, 28, .18);
  --lo-rule-on-dark: rgba(251, 246, 234, .25);
}

/* ---- Section primitives ------------------------------------------------ */
section.lo-sec {
  padding: clamp(80px, 10vw, 128px) 0;
  border-bottom: 0;
}
/* Tight-top variant — significantly less headroom above the section, used
   where it follows content that already provides a gap (e.g. the Two Columns
   sitting just under the video on the "The Beautiful Problem" page). */
section.lo-sec.lo-sec--tight-top {
  padding-top: clamp(20px, 3vw, 40px);
}
/* Audience band — the run of one-question sections addressed to parents,
   districts and educators on the home page. They are separate parts (so each
   can be edited on its own) sharing one paper-2 ground, and they should read
   as one set rather than as three sections that happen to be the same colour.

   section.lo-sec gives every section clamp(80px, 10vw, 128px) top AND bottom,
   which between two one-question sections is up to 256px of nothing. This
   tightens the padding INSIDE the run while leaving the outer edges alone:
   the first of the run keeps its full headroom under the hero, the last keeps
   its full footroom above the CTA, and only the joins between them close up.

   `:has(+ ...)` picks out the last of the run without the parts having to know
   their own position, so re-ordering or adding a fourth question needs no
   change here. Written at section.lo-sec.lo-sec--audience — two classes and an
   element — so it outranks section.lo-sec on specificity rather than on source
   order; a bare .lo-sec--audience would lose to it silently.

   The footroom half of this is a FALLBACK, not what renders today. The
   pioneers band below the questions is also paper-2, so the generic adjacency
   rules further down — which are more specific than these — take the join over
   and give the last question the band-interior 32px instead of the 128px here.
   That is the right answer when the band continues: the questions are then not
   the end of anything, and full footroom would open a hole inside one
   continuous tint. This rule is what restores the edge if the pioneers band
   ever moves away again, so it is kept rather than deleted as dead. */
section.lo-sec.lo-sec--audience {
  padding: clamp(80px, 10vw, 128px) 0 clamp(26px, 3.4vw, 40px);
}
section.lo-sec.lo-sec--audience + section.lo-sec.lo-sec--audience {
  padding-top: clamp(26px, 3.4vw, 40px);
}
section.lo-sec.lo-sec--audience:not(:has(+ section.lo-sec--audience)) {
  padding-bottom: clamp(80px, 10vw, 128px);
}

/* Tight-bottom variant — significantly less footroom below the section, used
   where the following section should sit close beneath it (e.g. the "two
   beautiful results" beat tucked directly under the "two columns" section on
   the "The Beautiful Problem" page, so the gap above it matches the gap above
   the columns section). */
section.lo-sec.lo-sec--tight-bottom {
  padding-bottom: clamp(20px, 3vw, 40px);
}
section.lo-sec:last-of-type        { border-bottom: 0; }
section.lo-sec[data-bg="paper-2"]  {
  background: var(--paper-2);
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .14),
              inset 0 -1px 0 rgba(28, 28, 28, .14);
}
/* Adjacent paper-2 sections — lo-sec, image-band, or image-pair — read as
   ONE continuous band: drop the internal hairlines and tighten the seams.
   Mirrors the sage adjacency rules below. */
section.lo-sec[data-bg="paper-2"]:has(+ section.lo-sec[data-bg="paper-2"]),
section.lo-sec[data-bg="paper-2"]:has(+ .image-band[data-bg="paper-2"]) {
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .14);
  padding-bottom: clamp(16px, 2.5vw, 32px);
}
section.lo-sec[data-bg="paper-2"] + section.lo-sec[data-bg="paper-2"],
.image-band[data-bg="paper-2"] + section.lo-sec[data-bg="paper-2"] {
  box-shadow: inset 0 -1px 0 rgba(28, 28, 28, .14);
  padding-top: clamp(16px, 2.5vw, 32px);
}
/* Interior of a run of three or more: a paper-2 section with paper-2
   neighbours on BOTH sides gets no hairline at all. Without this it matches
   both rules above — each of which keeps ONE edge — and the later one wins,
   drawing a stray line straight across the middle of the band. Keep it after
   them.

   `.image-pair` counts as a paper-2 neighbour here even though it carries no
   data-bg: the part paints its own background inline (see parts/_image_pair),
   which is also why the `:has(+ .image-pair)` rule below cannot test for the
   attribute. It was added to the trailing list on 2026-09-22, when the home
   page's pioneers band came back UNDER the audience questions rather than
   under the hero. Its lead copy then had a paper-2 section above it and the
   portraits below it, which no rule here covered: the `+` rule matched and
   drew a hairline between the lead and the portraits, in the middle of a band
   that is meant to read as continuous. No other page puts a paper-2 lo-sec
   between a paper-2 block and an image-pair, so nothing else changes. */
:is(section.lo-sec, .image-band)[data-bg="paper-2"]
  + section.lo-sec[data-bg="paper-2"]:has(
      + :is(section.lo-sec, .image-band)[data-bg="paper-2"], + .image-pair) {
  box-shadow: none;
  padding-top: clamp(16px, 2.5vw, 32px);
  padding-bottom: clamp(16px, 2.5vw, 32px);
}
/* When a paper-2 lo band is immediately followed by an image-pair band (also
   paper-2), the two should read as ONE continuous band: drop the seam line
   between them (keep only the band's top hairline) and tighten the band's
   bottom padding so the images sit close under the copy above. Pair this with
   pad_top:"0" on the image_pair part. */
section.lo-sec[data-bg="paper-2"]:has(+ .image-pair) {
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .14);
  padding-bottom: clamp(16px, 2.5vw, 32px);
}
/* The closing half of that sandwich: a paper-2 band placed directly BELOW an
   image-pair, so copy → portraits → copy reads as one continuous band. Mirror
   of the rule above — drop the top hairline that would otherwise draw a seam
   straight through the middle of the band, and tighten the top padding so the
   copy sits close under the portraits. Opt-in through display_statement's
   modifier_class rather than an `.image-pair + …` sibling selector, so this
   can never reach an existing pair-then-band sequence on another page. */
/* `section.lo-sec.lo-sec--after-pair[…]` — element plus TWO classes plus the
   attribute — so this outranks the band's own `section.lo-sec[data-bg=…]`
   rule on specificity rather than on source order. The paper-2 pair happened
   to work at equal specificity because the paper-2 band is defined earlier in
   this file; the sage band is defined later, so the sage version written the
   same way silently lost and the closing band kept both its hairlines. Both
   are spelled out here now, so neither depends on where it sits. */
section.lo-sec.lo-sec--after-pair[data-bg="paper-2"] {
  box-shadow: inset 0 -1px 0 rgba(28, 28, 28, .14);
  padding-top: clamp(16px, 2.5vw, 32px);
}
/* The same sandwich in sage, which is where the home page's pioneers band
   moved on 2026-09-22. Two rules rather than one `:is()` because the two
   bands' hairlines are not the same ink — paper-2 draws at .14, sage at .12
   (see each band's own rule) — and the whole point of these is which hairline
   survives. The paddings match, deliberately: the seam-closing behaviour is a
   property of the sandwich, not of the colour. */
section.lo-sec[data-bg="sage"]:has(+ .image-pair) {
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .12);
  padding-bottom: clamp(16px, 2.5vw, 32px);
}
section.lo-sec.lo-sec--after-pair[data-bg="sage"] {
  box-shadow: inset 0 -1px 0 rgba(28, 28, 28, .12);
  padding-top: clamp(16px, 2.5vw, 32px);
}
/* ---- Linen band -------------------------------------------------------- */
/* The third tinted ground, added 2026-09-22 for the home page's aside, which
   sits directly under the sage band. See the note on --linen in tokens.css for
   why --paper-2 was the wrong neighbour for --sage and what this fixes; the
   short version is that --paper-2 is the same lightness as --sage and more
   saturated than it, so the join read as a colour cast and the quiet band was
   the louder colour.

   Only three rules, because linen is used by exactly one band shape: a lo-sec,
   an image-pair, and an after-pair lo-sec. It needs no run rules of its own —
   there is no such thing yet as two adjacent linen sections. If a fourth band
   colour arrives, or linen gains a run, stop adding colours one at a time and
   give the bands a `--lo-seam` custom property so the structural rules can be
   written once over `:is()` instead of once per colour. The hairline ink is
   --paper-2's .14 rather than --sage's .12: linen is the lighter, less
   saturated ground of the two, and the seam needs the same weight to read. */
section.lo-sec[data-bg="linen"] {
  background: var(--linen);
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .14),
              inset 0 -1px 0 rgba(28, 28, 28, .14);
}
section.lo-sec[data-bg="linen"]:has(+ .image-pair) {
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .14);
  padding-bottom: clamp(16px, 2.5vw, 32px);
}
section.lo-sec.lo-sec--after-pair[data-bg="linen"] {
  box-shadow: inset 0 -1px 0 rgba(28, 28, 28, .14);
  padding-top: clamp(16px, 2.5vw, 32px);
}

/* Handing over from one coloured band to the next. Both bands carry their own
   top and bottom hairlines, so at the boundary the two stack into a 2px line
   where every other seam on the page is 1px. The band below draws the seam
   and the one above gives it up.

   Scoped to a section with a paper-2 neighbour ABOVE it as well, which is the
   only shape this occurs in today (the audience questions handing over to the
   pioneers band) and the only shape where `box-shadow: none` is safely right:
   the seam above it is already being drawn by that neighbour. A paper-2
   section that OPENED its run and then handed over to sage would need its top
   hairline kept, so do not loosen this to a bare `:has(+ sage)`. */
:is(section.lo-sec, .image-band)[data-bg="paper-2"]
  + section.lo-sec[data-bg="paper-2"]:has(+ section.lo-sec[data-bg="sage"]) {
  box-shadow: none;
}
/* The sage→paper-2 direction is handled by the sage run rule further down
   rather than repeated here; see the note there. The two directions are not
   symmetrical in the stylesheet because the two bands' rules are not:
   paper-2's adjacency rules carry padding and sage's do not. */
/* REMOVED 2026-09-22, the day it was added: `.lo-sec--pioneers-lead`, half a
   section's headroom on the pioneers band's opening headline. It existed
   because that band was paper-2 like the audience questions above it, so the
   two merged and the lead read as a fourth question. The band is sage now.
   A colour change is a stronger beat marker than any amount of space, and the
   band's own full section padding is back in play because the paper-2
   adjacency rules no longer match it — so the step had nothing left to do and
   would have read as a dent in the top of the band. */

/* ---- Aside band — a whole beat set in a quieter voice ------------------ */
/* The home page's pioneers band. It is a parenthesis between the audience
   questions and the closing ask: the reader is told, on the way past, that
   this has already been done and that nobody could say how. It has to be
   legible and it has to not compete — so the whole band steps down a tier
   rather than any one line of it doing so.

   The type sizes are roughly half the band's un-asided scale (the lead was
   34-60px under `lo-sec--long-display`, the turn 24-38px under
   `lo-sec--after-pair`) and they keep their order: the lead is a shade larger
   than the turn below it, so the beat still has a top even at this size. The
   measure is capped well inside the band, because a 968px line of 30px type
   reads as body copy the width of the page rather than as an aside.

   The two classes in each selector are load-bearing, not decoration. The lead
   drops `lo-sec--long-display` entirely (there would be nothing to gain from
   a rule that only wins a source-order tie), but the turn keeps
   `lo-sec--after-pair`, whose own type rule sits at one class; two classes
   here outrank it outright.

   PADDING IS SET PER EDGE, and only on the band's OUTER edges. The inner ones
   — the lead's bottom and the turn's top — belong to the image-pair sandwich
   rules near the top of this file, which close the joins around the
   portraits. A blanket `padding: … 0` here would sit at the same specificity
   as those and win or lose on source order, which is the trap CLAUDE.md warns
   about. Naming the edges means the two rule sets cannot collide: this one
   says where the band starts and stops, those say how it holds together
   inside. */
section.lo-sec.lo-sec--aside:has(+ .image-pair) {
  padding-top: clamp(40px, 5vw, 64px);
}
section.lo-sec.lo-sec--aside.lo-sec--after-pair {
  padding-bottom: clamp(40px, 5vw, 64px);
}
section.lo-sec.lo-sec--aside h2.lo-display {
  font-size: clamp(21px, 2.7vw, 30px);
  max-width: 40ch;
}
section.lo-sec.lo-sec--aside h2.lo-headline,
section.lo-sec.lo-sec--aside h3.lo-pull {
  font-size: clamp(19px, 2.4vw, 26px);
  max-width: 44ch;
}

/* Give the pull a breath under the headline it answers. `.lo-pull` already
   asks for this (see its clamp near the lo-headline block) but loses to
   `h3.lo-headline { margin: 0 }` on specificity — an element+class selector
   beats a bare class regardless of source order, so no pull on the site has
   ever taken that margin. Rather than raise `.lo-pull` globally and reflow
   every page that uses one, re-assert it here at matching specificity and
   scoped to this band. The gap is deliberately smaller than `.lo-pull` asks
   for: question and answer are one exchange, so this is a beat, not a break. */
section.lo-sec--after-pair h3.lo-pull { margin-top: clamp(18px, 2.4vw, 30px); }
/* Step this band's statement down one rung from the section-headline scale
   (lo-headline, 28–46px). The two short lines — the ink-blue point and the
   admission under it — read as a calm turn rather than a full headline.
   Applies to both the headline (h2) and the pull (h3) so they stay in
   proportion with each other. Scoped to the band; the base lo-headline scale is
   unchanged everywhere else.

   It was five lines until 2026-09-22 (the point, the setup, and three closing
   beats); the closing three left with the band's old ending, and the step-down
   is if anything more right for two lines than it was for five. */
section.lo-sec--after-pair h2.lo-headline,
section.lo-sec--after-pair h3.lo-pull {
  font-size: clamp(24px, 3.6vw, 38px);
}
section.lo-sec[data-bg="chalkboard"] {
  background: var(--chalkboard);
  color: var(--paper);
}
/* tokens.css applies an explicit `color: var(--ink)` to every h1–h6
   globally, which otherwise wins over the section's inherited color and
   leaves headings ink-black on the dark pivot. Override here. */
section.lo-sec[data-bg="chalkboard"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--paper);
}
section.lo-sec[data-bg="chalkboard"] .lo-accent {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(251, 246, 234, .35);
  text-underline-offset: 4px;
}
/* Blockquotes on the dark pivot: the soft-yellow fill (--highlighter-soft)
   is tuned for light paper; on chalkboard it would leave the section's cream
   text nearly illegible and fight the calm dark tone. Keep the yellow
   left-rule as the highlight signal, drop the fill to a whisper of paper for
   quiet panel definition, and let the text ride the section's cream colour.
   Scoped to chalkboard only — yellow-filled blockquotes on paper / paper-2
   are untouched. */
section.lo-sec[data-bg="chalkboard"] blockquote {
  background: rgba(251, 246, 234, .06);
  border-left-color: var(--highlighter);
  color: var(--paper);
}
section.lo-sec[data-bg="chalkboard"] blockquote .caption {
  color: rgba(251, 246, 234, .7);
}
/* Warm "need a new system" payoff band. A full-bleed terracotta beat used to
   land the turn from the dark "impossible" verdict to the hope that follows.
   Repaints the base lo-sec (whatever data-bg it declares) terracotta and lifts
   all text/headings to paper so the large display line reads as a bright,
   contrasting punch between the chalkboard band above and the paper band below. */
section.lo-sec.need-new-system {
  background: var(--terracotta);
  color: var(--paper);
}
section.lo-sec.need-new-system :is(h1, h2, h3, h4, h5, h6) {
  color: var(--paper);
}

/* Light "sage" band — a lifted, desaturated cousin of the chalkboard green.
   Reads as a distinct colour beat from the warm paper / paper-2 bands while
   staying light enough that text rides the default ink and a paper-2 callout
   card sits on it legibly (no colour overrides needed). Hairline insets give
   the band the same quiet top/bottom seam as the paper-2 band. */
section.lo-sec[data-bg="sage"] {
  background: var(--sage);
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .12),
              inset 0 -1px 0 rgba(28, 28, 28, .12);
}
/* Two sage bands in a row read as ONE band. The hairlines above mark where a
   colour beat starts and stops; drawn between two adjacent sage sections they
   mark nothing, and instead cut a line through the middle of a single beat —
   e.g. the Two Columns and the Two Beautiful Results on the lead-out-method
   page, which the tight-bottom / tight-top modifiers already join. So the
   first of a pair keeps only its top hairline and the second only its bottom,
   leaving the run with one seam at each end and none inside. Mirrors the
   paper-2 :has(+ .image-pair) pattern above. */
section.lo-sec[data-bg="sage"]:has(+ section.lo-sec[data-bg="sage"]) {
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .12);
}
section.lo-sec[data-bg="sage"] + section.lo-sec[data-bg="sage"] {
  box-shadow: inset 0 -1px 0 rgba(28, 28, 28, .12);
}
/* Interior of a sage run, and the end of one where the next band draws its own
   seam — the two cases the paper-2 rules above already cover and sage did not,
   added 2026-09-22 when the home page's audience questions moved onto sage and
   became a run of three handing over to a paper-2 band. A sage section with
   sage above it and a seam-drawing band below it needs no hairline of its own:
   without this it matches both rules above, each of which keeps ONE edge, and
   the later one wins, drawing a line across the middle of the run.

   BOX-SHADOW ONLY — deliberately unlike the paper-2 rules, which also tighten
   the padding. Sage adjacency has never touched padding, and the sage runs
   that already exist (the Two Columns / Two Beautiful Results pair on the
   lead-out-method page) set their own spacing with the tight-top and
   tight-bottom modifiers. Tightening here would fight them on pages nobody
   opened while making this change.

   `paper` and `chalkboard` are deliberately NOT in the trailing list. Neither
   draws a hairline, so a sage band above one has to keep its own or the beat
   ends with no seam at all. Any new band colour that DOES draw one has to be
   added to that list — linen was, when it arrived. */
section.lo-sec[data-bg="sage"]
  + section.lo-sec[data-bg="sage"]:has(
      + section.lo-sec:is([data-bg="sage"], [data-bg="paper-2"], [data-bg="linen"])) {
  box-shadow: none;
}

.lo-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* ---- Type primitives --------------------------------------------------- */
.lo-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 22px;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* color: inherit from the section — paper sections render ink-black,
     the chalkboard pivot inherits paper-cream automatically. */
}
.lo-eyebrow::before {
  content: "§";
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15em;
  opacity: 1;
  color: var(--lo-color-2);
}
/* On the dark chalkboard pivot, the § marker would muddy as ink-blue on
   green; let it inherit cream instead. */
section.lo-sec[data-bg="chalkboard"] .lo-eyebrow::before {
  color: var(--paper);
  opacity: .9;
}

/* Bottom CTA eyebrow is a reflective setup question ("Can this really be
   done?"), not a section label — so it drops the mono/all-caps/§ kicker
   treatment used elsewhere and reads as a quiet, human, serif-italic line
   sitting just above the "Hope starts here" headline. */
.lo-cta-section .lo-eyebrow {
  font-family: var(--font-display), "Source Serif 4", serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.375rem;
  opacity: .72;
  margin-bottom: 12px;
}
.lo-cta-section .lo-eyebrow::before { content: none; }

h1.lo-display, h2.lo-display, h3.lo-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
h2.lo-headline, h3.lo-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
/* A display headline carrying a longer sentence than the one-or-two-beat lines
   the display scale was drawn for ("Already proven? Decades ago?"). Set at full
   display size such a line runs to three or four lines and stops reading as a
   headline. This keeps every part of the display TREATMENT — the same family,
   weight 500, tight tracking and leading — and steps only the SIZE down one
   notch, then holds the measure so the line breaks into two balanced halves.
   That is what makes it match the other section openings rather than merely
   approximate them: the difference between lo-display and lo-headline is
   weight and tracking as much as size, and only size is being conceded here.
   Opt-in through display_statement's modifier_class, so it reaches nothing
   that has not asked for it. */
.lo-sec--long-display h2.lo-display {
  font-size: clamp(2.125rem, 5vw, 3.75rem);
  max-width: 32ch;
}
/* Home hero headline, opt-in via lead_out_hero's "headline_xl" flag. On tablet
   and up, step the display size up ~25% from the base clamp(2.5rem, 6vw, 4.5rem)
   so the two-line question ("Want a beautiful new" / "public school system?")
   fills more of the measure. Scoped to >=640px only, so the phone layout — where
   the sentence wraps to three lines — is left exactly as it was. The break stays
   at two lines because text-wrap:balance splits the sentence into two near-equal
   halves: measured against Source Serif 4, each half is ~897px at the 5.625rem
   ceiling, inside the ~968px hero measure, with more headroom at smaller sizes. */
@media (min-width: 640px) {
  h1.lo-display--xl { font-size: clamp(3.125rem, 7.5vw, 5.625rem); }
}
h2.lo-headline em, h3.lo-headline em,
h1.lo-display em, h2.lo-display em, h3.lo-display em { font-style: italic; }
h2.lo-headline .lo-accent,
h3.lo-headline .lo-accent,
h1.lo-display  .lo-accent,
h2.lo-display  .lo-accent,
h3.lo-display  .lo-accent { color: var(--lo-color-2); }

p.lo-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.3;
  letter-spacing: -.005em;
  margin: 18px 0 0;
  max-width: 38ch;
  text-wrap: pretty;
}
p.lo-lede em { font-style: italic; }

/* Mid-tier between lo-headline (28–46px) and lo-lede (18–24px). Used on the
   "Two educators proved" section to demote the proof-line one rung beneath
   the new "A whole lot of hope" headline. */
p.lo-subhead {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 14px 0 0;
  max-width: 38ch;
  text-wrap: balance;
}
p.lo-subhead em { font-style: italic; }
p.lo-subhead .lo-accent { color: var(--lo-color-2); }

/* Section-scoped: the "Two educators proved" lede sits visually below a
   demoted subhead, so it needs a small bump so the hierarchy still reads
   headline > subhead > lede. */
.lo-two-educators p.lo-lede {
  font-size: clamp(20px, 2.6vw, 28px);
}

/* "Choosing failure" — the lede is the diagnosis line ("Students come
   to see themselves as failures when in fact the system is failing
   them.") and needs to land louder than a default lede so it reads as
   the section's payoff. Scoped to the modifier class so other
   display_statement uses keep the regular lede size. */
.lo-choosing-failure p.lo-lede {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
  max-width: none;
  font-optical-sizing: auto;
}

/* Strikethrough on the demoted "the secret was unknown" beat. The line
   weight matches `.lo-underline` (used on "proved beautiful results" in
   the same beat) so the two marks read as a paired typographic system:
   underline = the load-bearing claim, strikethrough = the historical
   gap, both drawn at the same scale. The line stays in ink, not
   color-2. */
.lo-subhead s,
.lo-outro s,
p.lo-lede s {
  text-decoration: line-through;
  text-decoration-thickness: clamp(2px, 0.08em, 4px);
  text-decoration-skip-ink: none;
}

/* Bold + underline emphasis. Used inline (e.g.
   <strong class="lo-underline">proved beautiful results</strong>)
   to mark the load-bearing claim within a longer line. Underline
   sits a touch below the baseline so it doesn't crowd descenders. */
.lo-underline {
  text-decoration: underline;
  text-decoration-thickness: clamp(2px, 0.08em, 4px);
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

/* Keep a phrase from wrapping mid-clause — e.g.
   <span class="lo-nowrap">Two educators proved beautiful results</span>.
   Releases back to normal wrapping on narrow phone viewports so a
   long phrase doesn't force a horizontal scroll. */
.lo-nowrap { white-space: nowrap; }
@media (max-width: 480px) {
  .lo-nowrap { white-space: normal; }
}

/* Hairline rule between the subhead and the lede in the two-educators
   section — visually marks the pivot from "but the secret was unknown"
   to "decades later, the Lead Out Method has the secret." */
.lo-two-educators .lo-divider {
  border: 0;
  border-top: 1px solid var(--lo-rule, rgba(28, 28, 28, .18));
  margin: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
  max-width: 38ch;
}

/* Outro line beneath the lede — color-2 by default, sized between
   lede and body. Used for short payoff lines like "And anyone can
   learn it." */
p.lo-outro {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  letter-spacing: -.005em;
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font-optical-sizing: auto;
  color: var(--ink);
  max-width: 38ch;
}
p.lo-outro em { font-style: italic; color: var(--lo-color-2); }
p.lo-outro .lo-accent { color: var(--lo-color-2); }

p.lo-body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 60ch;
}
p.lo-body em { font-style: italic; }
/* Bulleted list inside a two-column body (data key "body_list"). Matches
   lo-body typography; em-dash markers in ink-blue echo the .lo-secret-col
   list treatment. */
ul.lo-body-list {
  list-style: none;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 12px 0 0;
  padding-left: 1.3em;
  max-width: 60ch;
}
ul.lo-body-list li { position: relative; }
ul.lo-body-list li + li { margin-top: .35rem; }
ul.lo-body-list li::before {
  content: "\2014";
  position: absolute;
  left: -1.3em;
  color: var(--lo-color-2);
  font-weight: 600;
}
ul.lo-body-list em { font-style: italic; }
.lo-accent { color: var(--lo-color-2); }
.lo-blue { color: var(--ink-blue); }
/* Terracotta text accent — the colour-only counterpart to .lo-blue (no
   small-caps/letter-spacing, unlike the branded .lo-bp treatment). */
.lo-terra { color: var(--terracotta); }

/* "The Beautiful Problem" — a named idea, not just an accent phrase.
   Baseline treatment everywhere it appears: terracotta + small caps, a
   quiet typographic signature that reads as a titled concept while staying
   calm enough to repeat in body copy. Uses --terracotta (not the ink-blue
   --lo-color-2 the ordinary accents use) so the named idea is visually
   distinct from a routine accent phrase. */
.lo-bp {
  color: var(--terracotta);
  font-variant-caps: small-caps;
  letter-spacing: .03em;
}
/* Inside a mono-label (Eva Fugitt & Marva Collins outcome blocks) the label's
   uppercase + monospace would flatten the named idea into faintly-blue mono
   text. Restore its Fraunces small-caps treatment (as it reads everywhere
   else on the site) and scale it up so its capitals line up with the mono
   caps beside it rather than sitting sunken. */
.mono-label .lo-bp {
  font-family: var(--font-display);
  text-transform: none;
  font-variant-caps: small-caps;
  font-weight: 500;
  font-size: 1.25em;
  letter-spacing: .01em;
}
/* Add `lo-bp--mark` alongside `lo-bp` for the big moments only (landing
   hero, major section headings): a small terracotta four-point sparkle
   (✦, U+2726) rides just before the phrase so the eye learns to associate
   the mark with the idea. Kept off routine mentions so it stays special. */
.lo-bp--mark::before {
  content: "\2726";
  color: var(--terracotta);
  font-variant-caps: normal;
  font-weight: 400;
  font-size: .82em;
  margin-right: .34em;
  vertical-align: .04em;
  display: inline-block;
}

/* Standalone section mark — a centered italic Fraunces "§" flanked
   by horizontal rules ( ──── § ──── ), used as a beat divider after
   a headline group (e.g. the "Classroom proof that …" opener on the
   guide pages). The § picks up color-2 ink-blue, the rules pick up
   a softer ink so the symbol stays the focal point. */
.lo-section-mark {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--lo-color-2);
  line-height: 1;
  margin: clamp(1rem, 2.5vw, 1.75rem) auto;
  max-width: 32rem;
}
.lo-section-mark::before,
.lo-section-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule, currentColor);
  opacity: .35;
}

/* A follow-up block inside a display_statement, used for a parallel
   "next beat" — has its own headline and (optionally) its own pull line
   below it. The top margin is generous so it reads as a new section
   rather than a continuation of the prose above. */
.lo-subsection { margin-top: clamp(56px, 9vw, 120px); }
.lo-subsection-headline { margin-top: 0; }

/* A secondary "pull" statement that sits beneath the section's primary
   headline — sized one tier smaller (lo-headline scale) and given extra
   vertical breathing room so the two beats read as separate ideas. */
.lo-pull { margin-top: clamp(40px, 6vw, 80px); }

/* A paragraph break inside a pull. Wrapping a run of the pull in
   `.lo-pull-para` drops it a beat below the line it follows — the same beat the
   band uses between its headline and this pull — so a pull can carry two
   paragraphs (e.g. the plain "we didn't know what they were doing" statement,
   then the ink-blue "The Lead Out Method does." answer) instead of one <br>-run.
   Scoped to `.lo-pull`, so it only means anything inside a pull. */
.lo-pull .lo-pull-para { display: block; margin-top: clamp(18px, 2.4vw, 30px); }

/* Turn a run of `.lo-pull-para` lines into a bulleted set without dropping them
   out of the pull's display scale. The three closing lines of "No one could
   explain" ("Science confirms it." / "Any educator can learn it." / "And with a
   willing district...") are a list in substance, but they cannot be marked up as
   one: they live inside an <h3>, and a <ul> nested in a heading is invalid. So
   the marker is drawn by CSS instead, and the lines stay spans.

   The marker is a round bullet rather than the em dash `.lo-cf-list li::marker`
   uses, deliberately: the last of the three lines already contains an em dash
   ("...allowed to apply it — and succeed"), and an em-dash marker in front of it
   put two of them in one line.

   The hanging indent is the same 1.15em pattern `.bp-line` uses on the guide
   pages, so a wrapped line aligns under its own first word rather than under the
   marker. Because a round bullet is far narrower than that indent, the marker is
   an inline-block set to exactly the indent width — otherwise the first line's
   text would start left of where the wrapped lines do. `text-indent` inherits
   into the inline-block, so it has to be zeroed there or the marker pulls itself
   back out of the well.

   Consecutive bullets sit closer together than a normal `.lo-pull-para` beat, so
   the three read as one group rather than three separate statements — the
   grouping is the whole reason for bulleting them. */
.lo-pull .lo-pull-bullet {
  padding-left: 1.15em;
  text-indent: -1.15em;
}
.lo-pull .lo-pull-bullet::before {
  content: "\2022";
  display: inline-block;
  width: 1.15em;
  text-indent: 0;
}
.lo-pull .lo-pull-bullet + .lo-pull-bullet { margin-top: clamp(10px, 1.4vw, 16px); }

/* A quiet left rule marking the band's pivot line — the honest "we didn't know
   what these normal humans were actually doing" admission. It borrows the
   vertical-line gesture from the guide pages' blockquotes but not their
   meaning: this is an authorial turn, not a quotation, so it takes the band's
   own ink-blue accent rather than the yellow highlighter fill quotes carry,
   and leaves the type and size as they are. Scoped to `.lo-pull`. */
.lo-pull .lo-pull-rule {
  display: block;
  border-left: 3px solid var(--lo-color-2);
  padding-left: clamp(14px, 1.8vw, 22px);
}

/* Keep a short emphasised phrase whole inside a pull, so a wrap cannot split
   it. Same device as `.lo-hero-subline .lo-nowrap-beat`, and it has to be
   spelled out again here because that rule is scoped to the hero: the class
   on its own carries no styling anywhere. Used on "willing district" in the
   band's closing line, where the italic phrase is the emphasis of the
   sentence and was breaking across two lines on a phone. Only ever put this
   round a phrase short enough to fit the narrowest line — `white-space:
   nowrap` cannot wrap, so an over-long one overflows the box instead. */
.lo-pull .lo-nowrap-beat { white-space: nowrap; }

/* A small horizontal pause between sentences in a display-tier line —
   adds breathing room beyond the default whitespace so the period
   reads as a deliberate beat rather than a word break. */
.lo-pause { margin-right: 0.4em; }

/* ---- Section: Header / hero ------------------------------------------- */
.lo-hero { padding: clamp(72px, 11vw, 140px) 0 clamp(80px, 13vw, 160px); }
.lo-hero-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.lo-hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--lo-color-2);
  opacity: 1;
}
.lo-hero-stack { display: grid; gap: clamp(14px, 1.6vw, 22px); }

/* V1 line_1 — small Fraunces audience tag in --lo-color-2 (the
   <span class="lo-accent"> wrapper in the partial supplies the color).
   Sized larger than before so the audience list reads with more
   weight, while still sitting beneath the lo-display headline. The
   clamp top of 26px keeps "Parents, educators, school boards,
   superintendents:" on one line at any reasonable desktop width;
   on very narrow phones it may wrap. opsz nudged up to match the
   larger size. */
.lo-line-1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 26px);
  line-height: 1.3;
  letter-spacing: .005em;
  margin: 0;
  font-optical-sizing: auto;
}
.lo-line-1 strong { font-weight: 500; }

/* line_2_sub — a quiet sub-clause hanging off the display headline.
   Deliberately NOT .lo-line-3: that treatment is italic, up to 48px and
   carries a leading rule, all of which make it read as a second headline.
   This sits at roughly half the headline's cap size (38px against its 72px
   ceiling), upright, so the question reads as subordinate to the headline
   while still carrying real weight. Much past this and the two compete
   instead of one leading into the other.

   Line breaks here are authored in the copy (see line_2_sub in home.rake and
   wip_home.rake — the two have diverged and break at different points),
   so this deliberately does NOT use `text-wrap: balance` — balancing would
   fight the <br>s by re-evening the fragments between them. `pretty` is safe
   because it only steps in for the overflow wrapping that happens on narrow
   screens, where it keeps a one-word orphan off the last line. The measure is
   capped in ch rather than px so that overflow point tracks the font size.
   Bottom margin is zero — spacing below is owned by whatever follows
   (.lo-line-3 or .lo-hero-callout).

   Leading is 1.38 rather than the 1.28 this started at (2026-08-20). The
   branded inside/outside glyphs are physically taller than the letters around
   them — the "i" mark carries a dot well above x-height and the "O" is a solid
   disc — so at 1.28 that dot came close enough to the descenders on the line
   above to look like a collision. 1.38 clears it. Deliberately not further:
   the sub-line is one sentence broken across three authored lines, and past
   roughly 1.4 the lines separate enough to read as three statements instead of
   one, which is the opposite of what the <br>s are for. Being unscoped, this
   applies to every lead_out_hero sub-line — the live home page and the WIP
   draft alike, which is intended.

   The lower bound of the font-size is a formula rather than a constant so the
   sub-line holds its three authored lines all the way down (2026-08-20).

   The sub-line is written as three lines separated by <br>. Those breaks are
   authored, so the only thing that can add a fourth line is one of them
   overflowing and wrapping. The longest is line 2, "Inside – what they need to
   succeed", and it measures 15.3x the font size (367px at 24px, 376px at
   24.58px, 581px at 38px). The content box is the viewport less the 20px
   gutters either side, so the theoretical limit is (100vw - 40px) / 15.3.

   That 15.3 is measured against the self-hosted Source Serif 4, confirmed
   rendering. It replaces a 13.75 that was simply wrong: it had been measured
   while tokens.css was shadowing the real faces with stubs that 404'd, so the
   number described Liberation Serif, the Linux fallback. Source Serif 4 sets
   about 11% wider — the old figure was optimistic in exactly the direction
   that causes a wrap, which is most of why this took three passes to fix. The
   note at the top of tokens.css has the full account. Re-measure rather than
   adjust by eye if line 2 ever changes.

   The divisor is 16 rather than 15.3, holding line 2 to about 96% of the
   content box. That margin is cover for the ratio still being wrong on the
   device. Self-hosting removed the largest cause — the font is no longer a CDN
   fetch that a fallback can win — but not all of them: Chrome on Android
   multiplies computed font sizes by the accessibility text-scaling factor, and
   100vw is not scaled to match, so any setting above 100% eats headroom that a
   viewport-derived size cannot see.

   An earlier pass used a flat 4px of slack — about 1% at phone sizes. That
   measured clean in headless Blink and still wrapped on a real Android, which
   is what motivated the proportional margin.

   min() caps the result at 24px, the flat value this floor used to be, so the
   cap takes over around 400px: below that phones scale down, above it 3.2vw
   picks up around 750px.

   The 15.3 is measured from the current home copy, so lengthening line 2 means
   re-measuring it. Nothing else sets line_2_sub today. A page that did, with
   longer copy, would not overflow — it would simply wrap as before.

   None of the above can be exactly right, because the ratio depends on which
   font the device actually rendered and that is not knowable from a stylesheet.
   controllers/fit_lines_controller.js measures the rendered line count and
   shrinks the type if it still came out long, so treat this clamp() as the
   intended size and the no-JS baseline, not as the guarantee. Keep it slightly
   conservative: every px it is too large is a visible reflow when the
   controller corrects it after the webfont swaps in. */
.lo-hero-subline {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(min(24px, calc((100vw - 40px) / 16)), 3.2vw, 38px);
  line-height: 1.38;
  letter-spacing: -.008em;
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  max-width: 46ch;
  text-wrap: pretty;
}
.lo-hero-subline strong { font-weight: 600; }
.lo-hero-subline .lo-accent { color: var(--lo-color-2); }
/* Weld a branded glyph to the rest of its word. The mark is an <img>, so the
   line is free to break between it and the letters after it — at narrow
   widths "outside" was printing as a lone O-mark at the end of one line with
   "utside" starting the next. Matching on :has() targets only the wrapper the
   branded_inside_html / branded_outside_html helpers emit, so an ordinary
   .lo-accent run is unaffected and still wraps freely. */
.lo-hero-subline .lo-accent:has(> .lo-mark-letter) { white-space: nowrap; }

/* Keep a key beat whole when the line it sits on overflows. Opt-in per beat
   rather than blanket, which is why it is its own class and not another :has()
   on .lo-accent.

   Applied to "need to succeed" on the home hero. Adding the en dashes to that
   sub-line pushed line 2 past the available width at 360px — a common Android
   size — and it broke as "…what they need / to succeed", splitting the beat
   and leaving a two-word orphan.

   The viewport-tracking font floor above now keeps line 2 inside the content
   box at every width, so this no longer has anything to do: it is a fallback
   for the case where an engine sets the line wider than the 4px of slack that
   floor allows. If line 2 ever does wrap, this keeps the beat whole and moves
   it down entire, which reads as a deliberate stack rather than a mis-set one.

   Safe against overflow: the longest beat this is used on is ~15 characters,
   which at ~20px — what the floor resolves to on a 320px screen — still fits
   with room to spare. Check that before adding the class to a longer phrase;
   an unbreakable run wider than the viewport would push the layout sideways. */
.lo-hero-subline .lo-nowrap-beat { white-space: nowrap; }

/* ---- Hero sub-line with a paired image -------------------------------- */
/* Opt-in via lead_out_hero's `sub_image_path`. The sub-line and the image sit
   on one row from 860px up and stack below it, so the image reads as belonging
   to that sub-line rather than to the headline or to the band as a whole.

   860px is not a round number picked for tidiness. Side by side, the sub-line
   loses `--lo-subfig-w + --lo-subfig-gap` of the band to the image, and its own
   font size is still derived from the VIEWPORT (see .lo-hero-subline, whose
   lower bound is calc((100vw - 40px) / 16) — a formula that assumes the
   sub-line has the whole band). Above 860px the clamp's preferred value (3.2vw)
   is what governs, because 3.2vw there exceeds the 24px the lower bound caps
   at, so the floor formula never fires and its assumption never gets a chance
   to be wrong. Below 860px it would fire, on a box narrower than it thinks —
   which is the one case that puts a fourth line on a three-line sub-line. So
   the row stops before the floor starts.

   The figure gets two different widths, because the two layouts constrain it
   for opposite reasons. Stacked, nothing competes with it and the only limit
   is the phone's own width, so it takes 62vw up to 300px — at 150px, which is
   what the side-by-side clamp resolves to down there, it read as a stamp
   rather than as the students the sub-line is about. Side by side, every pixel
   it takes comes off the sub-line's measure, so it is capped at 280px.

   That cap is set against the same measured ratio the sub-line's own note
   records: the longest authored line ("inside – what they need to succeed")
   sets about 15.3x the font size. Worst case is the widest viewport, where the
   figure is at its cap and the band is capped at 1080px: 968 - 280 - 44 = 644px
   of text box against 15.3 x 38px = 581px needed, about 11% of slack —
   confirmed by measurement at 1600px, where the rendered line comes out at
   581px in a 646px box. Re-check that arithmetic if the figure grows, if the
   band's max-width changes, or if the sub-line copy gets longer;
   fit_lines_controller will catch a miss by shrinking the type, but a visible
   reflow after the webfont swaps in is not the design.

   The figure is naturally taller than the three-line sub-line (a 280px-wide
   races.png stands 227px against roughly 157px of text), so `align-items:
   center` lets it overhang evenly above and below rather than hanging off one
   end. */
.lo-hero-subrow {
  --lo-subfig-w: min(300px, 62vw);
  --lo-subfig-gap: clamp(20px, 3vw, 44px);
}
.lo-hero-subfigure {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
}
.lo-hero-subfigure img {
  display: block;
  width: 100%;
  max-width: var(--lo-subfig-w);
  height: auto;
}

@media (min-width: 860px) {
  .lo-hero-subrow {
    --lo-subfig-w: clamp(150px, 18vw, 280px);
    display: flex;
    align-items: center;
    gap: var(--lo-subfig-gap);
  }
  /* min-width: 0 so the text column may shrink below its longest unbreakable
     run instead of forcing the row wider than the band — a flex item's default
     min-width: auto would push the figure out of the wrap. */
  .lo-hero-subrow .lo-hero-subline { flex: 1 1 auto; min-width: 0; }
  .lo-hero-subfigure {
    flex: 0 0 var(--lo-subfig-w);
    margin: 0;
  }
}

/* V1 line_3 — italic Fraunces signature beneath the display headline,
   prefixed by a thin horizontal rule so it reads as an attribution
   line rather than another headline. Sized bigger than the original
   V1 mockup spec so "the Lead Out Method" carries enough weight to
   register as the system's name, not a footnote. */
.lo-line-3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0;
  font-optical-sizing: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.lo-line-3::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ink);
  opacity: .5;
  transform: translateY(-6px);
  flex-shrink: 0;
}

/* V1 line_2 — the headline uses h1.lo-display (defined above) for the
   hero scale. The "new" accent inside line_2 gets weight + italic via
   the inline <span class="lo-accent"><em><strong>new</strong></em></span>
   markup; lo-accent already supplies color-2 inside lo-display. */
h1.lo-display strong { font-weight: 700; }
.lo-hero-callout {
  margin-top: clamp(28px, 4vw, 48px);
}
.lo-hero-callout img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
}

/* ---- Section: Callout band --------------------------------------------- */
/* A colour band pairing a display headline with a callout image so the two
   read as one beat (see parts/_callout_band.html.erb). Image sizing mirrors
   .lo-hero-callout, but the cap is overridable per-instance via the
   --lo-callout-band-max custom property set inline by the partial. */
.lo-callout-band-figure {
  margin-top: clamp(28px, 4vw, 48px);
}
.lo-callout-band-figure img {
  display: block;
  width: 100%;
  max-width: var(--lo-callout-band-max, 760px);
  height: auto;
}

/* ---- Section: Educators want ------------------------------------------ */
.lo-ew-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: clamp(36px, 5vw, 72px) 0;
}
/* Drop the outer row margins so a row sitting flush against the
   section's top/bottom padding (no eyebrow/headline/lede above it,
   no row below it) doesn't stack a second 36–72px gap on top of the
   section's own 64–120px padding. */
.lo-ew-row:first-child { margin-top: 0; }
.lo-ew-row:last-child  { margin-bottom: 0; }
/* When the educators_want section has just a single row of content
   (no eyebrow / headline / lede), tighten the section's own top &
   bottom padding so the whole block reads as a quick beat instead of
   a full-height section. */
section.lo-sec:has(.lo-ew-row:only-child) {
  padding: clamp(24px, 4vw, 56px) 0;
}
/* In that single-row layout, drop the image's framed-card treatment
   (paper background, ruled border, fixed 4:3 box, object-fit:cover)
   so a transparent PNG floats against the section background as a
   freestanding illustration instead of a card. */
section.lo-sec:has(.lo-ew-row:only-child) .lo-ew-img {
  aspect-ratio: auto;
  background: transparent;
  border: 0;
}
section.lo-sec:has(.lo-ew-row:only-child) .lo-ew-img img {
  height: auto;
  object-fit: contain;
}
.lo-ew-row.lo-flip { grid-template-columns: 1fr 1.4fr; }
.lo-ew-row.lo-flip .lo-ew-copy { order: 2; }
.lo-ew-row.lo-flip .lo-ew-img  { order: 1; }
.lo-ew-img {
  aspect-ratio: 4 / 3;
  background: var(--paper);
  border: 1px solid var(--lo-rule);
  overflow: hidden;
}
.lo-ew-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.95);
}
.lo-ew-copy p {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}
.lo-ew-copy p em { font-style: italic; }
.lo-ew-copy p + p { margin-top: .6em; }
.lo-ew-copy strong { font-weight: 600; }

/* Larger-type variant of the text-and-image beat (e.g. the Lead Out Method
   page's "We all want all students succeeding." aim). */
.lo-sec--aim .lo-ew-copy p { font-size: clamp(30px, 3.8vw, 48px); }

/* "Loud" payoff — a display-scale statement dropped inside a lo-band
   paragraph's prose (e.g. the Lead Out Method problem band's
   "The solutions are on the shelf…" close). */
.lo-sec .prose .lo-loud { margin-top: 1.75rem; }
.lo-sec .prose .lo-loud p {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 .35em;
  max-width: none;
}
.lo-sec .prose .lo-loud p:last-child { margin-bottom: 0; }
.lo-sec .prose .lo-loud em { font-style: italic; }
.lo-sec .prose .lo-loud .lo-accent { color: var(--lo-color-2); }

/* ---- Section: Two educators ------------------------------------------- */
/* Two-column gallery for the "Two educators proved" section. Each
   educator is a vertical card (portrait, then name, then dates).
   The two cards sit side by side on desktop and stack on narrow
   viewports (see the responsive block at the bottom of this file). */
.lo-educators-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
}
.lo-educator-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
/* Whole-card click target: a transparent <a> stretched across the
   card (visually-hidden text label for screen readers). The card gets
   a subtle hover lift to signal interactivity. */
.lo-educator-card--linked {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  border-radius: 4px;
}
.lo-educator-card--linked:hover,
.lo-educator-card--linked:focus-within {
  transform: translateY(-2px);
}
.lo-educator-card--linked:hover .lo-name,
.lo-educator-card--linked:focus-within .lo-name {
  text-decoration: underline;
  text-decoration-color: var(--lo-color-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.lo-educator-card__link {
  position: absolute;
  inset: 0;
  /* Visually hide the link's own text but keep it accessible to
     screen readers. Don't use display:none — that hides from AT too. */
  text-indent: -9999px;
  overflow: hidden;
}
.lo-educator-card__link:focus-visible {
  outline: 2px solid var(--lo-color-2);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Legacy .lo-pair still exists for any other section that used the
   horizontal "portrait + prose" pairing. The new educators grid above
   replaces it on the home page. */
.lo-pair {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: clamp(24px, 3.2vw, 40px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
}
.lo-portrait {
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  overflow: hidden;
  margin: 0;
}
.lo-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.88) contrast(1.02);
}
/* Inside the new vertical card, the portrait sits at a modest size so
   the section reads as a quiet pair of plates rather than two
   competing posters. Adjust the max-width to scale them up/down. */
.lo-educator-card .lo-portrait {
  width: 100%;
  max-width: 220px;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.lo-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.05;
  letter-spacing: -.012em;
  margin: 4px 0 0;
}
.lo-caption {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #2a2a2a;
  margin: 6px 0 14px;
}
/* In the vertical card, dates sit directly below the name with a
   little more breathing room. */
.lo-educator-card .lo-caption {
  font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* ---- Section: Key to the secret --------------------------------------- */

/* First line of the section-5 headline ("The secret?") — promoted to
   display tier so it matches the scale of "The challenge, of course"
   while the rest of the headline ("What science says is the Right
   Problem.") stays at lo-headline scale. Rendered display:block so it
   forces a line break without needing <br> inside the sanitized HTML.
   Soft/opsz settings mirror h?.lo-display. */
.lo-headline .lo-secret-lead {
  display: block;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin-bottom: clamp(8px, 1vw, 16px);
}

.lo-secret-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--lo-rule-on-dark);
}

/* Divider between the two beats. Vertical line — § — vertical line on
   desktop; flips to horizontal on mobile via the responsive block at
   the bottom of this stylesheet. */
.lo-secret-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--lo-rule-on-dark);
}
.lo-secret-divider::before,
.lo-secret-divider::after {
  content: "";
  flex: 1;
  width: 1px;
  background: currentColor;
  min-height: 24px;
}
.lo-divider-symbol {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  color: var(--paper);
  opacity: .9;
  line-height: 1;
}
.lo-secret-col h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0 0 8px;
  line-height: 1.2;
}
/* The "fail with the Wrong Problem:" / "succeeded with the Right
   Problem:" line rides inline within the h4 on a <br>, so it reads
   as one block with the agent name above. It picks up a larger,
   non-italic, upright weight to land as the main beat of each
   column — the title above is the subject, this is the verb. */
.lo-secret-col h4 .lo-secret-headline {
  display: inline-block;
  font-family: "Source Serif 4", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.25;
  margin-top: 6px;
}
.lo-secret-col h4 .lo-secret-headline strong { font-weight: 700; }
.lo-secret-col .lo-secret-intro {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.4;
  margin: 14px 0 0;
  max-width: 36ch;
  opacity: .92;
}
.lo-secret-col .lo-qm {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  margin: 8px 0 0;
}
/* Closing line beneath the question — sized like the intro and given
   a little extra top margin so it reads as a separate beat ("Impossible:
   students are all different." / "It's already been done…"). */
.lo-secret-col .lo-secret-close {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.4;
  margin: 16px 0 0;
  max-width: 36ch;
  opacity: .92;
}
.lo-secret-col .lo-secret-close em { font-style: italic; }
.lo-secret-col .lo-secret-close strong { font-weight: 600; }
.lo-secret-col ul {
  margin: 14px 0 0;
  padding-left: 18px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
}
.lo-secret-col li::marker { content: "— "; }

/* ---- Section: Two columns + etymology --------------------------------- */
.lo-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(28px, 4vw, 48px);
}
/* Short closing beat under the two columns (e.g. "And it's already been
   done"), kept inside the same section and pulled tight to the columns
   above it rather than sitting as a separate band. */
.lo-twocol-closer {
  margin-top: clamp(24px, 3.5vw, 40px);
}
.lo-twocol-closer .lo-body {
  margin-top: .35rem;
}
.lo-col-eye {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--lo-color-2);
}
.lo-col-eye strong {
  font-weight: 700;
}
/* A hand-drawn squiggle beneath 'Educating' (Column 1) — visually
   echoes the scribbled e·du·ce·re lozenge in the etymology block
   below, marking 'Educating' as the term being defined. Uses the
   same path / stroke / opacity as .lo-scribbled svg, rendered as
   a SVG-data-URI background so we don't have to inject SVG into
   the eyebrow markup. Scoped to the educating column so 'Learning'
   stays clean.

   THE URI ITSELF MOVED TO --squiggle-blue in tokens.css on 2026-08-28,
   when the lead-out-method page asked for the same mark under 'here'
   and a second literal copy would have been free to go stale. The
   geometry below stays local: the -2px bleed, the 9px band and the
   -6px drop are tuned to this eyebrow's 16-20px uppercase mono, and
   the other call site sets its own against 24px display type. */
.lo-col-edu .lo-col-eye strong {
  position: relative;
  display: inline-block;
}
.lo-col-edu .lo-col-eye strong::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -6px;
  height: 9px;
  pointer-events: none;
  background-image: var(--squiggle-blue);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.lo-col-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.05;
  letter-spacing: -.012em;
  margin: 0 0 14px;
}
/* A column name set as more than one line — currently only the Lead Out
   Method's Column 1, whose name is a formula: "Use NEW educating skills /
   + Inner Educational Exercises" (choice.rake position 52).

   Block spans rather than <br> for the usual reason: the "+" line needs a
   hanging indent, and text-indent applies to a block's first line, which a
   <br>-separated run is not. Line-height is inherited from .lo-col-name, so
   a one-line name and a two-line name sit on the same rhythm. */
.lo-col-name-line { display: block; }
/* The hanging indent for a line opening with a literal "+" prefix, so a
   wrapped continuation starts at the "I" of "Inner" rather than running back
   under the plus. Equal and opposite, per the bullets rule in CLAUDE.md.

   0.7506em is MEASURED, not eyeballed: it is the advance width of the whole
   "+ " prefix — the plus glyph plus its trailing space — taken with a Range
   over the prefix text node on the rendered page (21.02px against the 28px
   name, 16.52px against the 22px one; both 0.7506em, which is why this is
   safe in em under the clamp above). document.fonts.check() was confirmed
   first, so this is Source Serif 4 and not a fallback.

   DO NOT substitute the font's own numbers. Source Serif 4 at wght 500 gives
   541 + 233 = 774/1000, i.e. 0.774em, and that is WRONG here: .lo-col-name
   sets letter-spacing -.012em, which the browser applies once per character,
   so the real prefix is .024em shorter than the face says — two thirds of a
   pixel at the 28px name, half a pixel at 22px. Any face-derived figure has
   to have the letter-spacing taken back out of it. Re-measure — on the page,
   not in the font — if the display face, the weight, the letter-spacing, or
   the prefix character changes.

   Nothing wraps at this length today (checked at 1280 / 768 / 414 / 360; the
   "+" line stays one line at every one). This is here so that it still reads
   as a hanging list if the copy grows, which is exactly when a guessed value
   would be discovered to be wrong. */
.lo-col-name-line--plus {
  padding-left: .7506em;
  text-indent: -.7506em;
}
.lo-inset-block {
  margin: 22px 6%;
  padding: 18px 22px;
  background: var(--paper-2);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--ink);
}
.lo-inset-block em { font-style: italic; }
.lo-scribbled { position: relative; display: inline-block; padding: 0 2px; }
.lo-scribbled .lo-latin {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: .01em;
  font-size: 1.05em;
}
.lo-scribbled svg {
  position: absolute;
  left: -2px; right: -2px; bottom: -7px;
  width: calc(100% + 4px); height: 9px;
  pointer-events: none; overflow: visible;
}
.lo-scribbled svg path {
  fill: none;
  stroke: var(--lo-color-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.lo-col-lrn .lo-float-img {
  float: right;
  width: clamp(200px, 42%, 320px);
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 4px 0 12px 18px;
  background: var(--paper-2);
  border: 1px solid var(--lo-rule);
  overflow: hidden;
}
.lo-col-lrn .lo-float-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ---- Section: Four steps ---------------------------------------------- */
.lo-steps {
  counter-reset: lo-step;
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
/* Each li used to be `display: grid` with two columns (counter | content),
   but the browser treated mixed text and inline elements ("Start using
   the " + <strong>...</strong>) as separate grid items — putting the
   <strong> into a new row inside the narrow counter column and stacking
   its words vertically. Using a positioned counter keeps the li as a
   normal flow box so inline content stays inline. */
.lo-steps li {
  counter-increment: lo-step;
  position: relative;
  padding-left: 50px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
}
.lo-steps li::before {
  content: counter(lo-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--lo-color-2);
}

/* ---- Section: You as the educator ------------------------------------- */
/* Deck line beneath the headline — carries the "it's the system, working
   with educators" framing before the result rows. Sized between headline
   and body so it reads as a supporting beat, not a second headline. */
.lo-yae-deck {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 12px 0 0;
  max-width: 42ch;
  text-wrap: balance;
}
.lo-yae-deck em { font-style: italic; }
.lo-yae-deck .lo-accent { color: var(--lo-color-2); }

.lo-yae-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin: clamp(28px, 4vw, 56px) 0;
}
.lo-yae-row.lo-flip { grid-template-columns: 280px 1fr; }
.lo-yae-row.lo-flip .lo-yae-copy { order: 2; }
.lo-yae-row.lo-flip .lo-yae-img  { order: 1; }
.lo-yae-img {
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border: 1px solid var(--lo-rule);
  overflow: hidden;
}
.lo-yae-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.lo-yae-callout {
  margin-top: 28px;
  padding-left: 22px;
  border-left: 2px solid var(--ink);
}
.lo-yae-callout strong { font-weight: 600; }
/* The callout's body line ('With just one educator, the-many...') is the
   payoff of section 6, so bump it above the default 17px lo-body scale
   to read as a closing emphasis rather than a body footnote. Tracks the
   lo-lede scale, with a fraction more headroom on line-height. */
.lo-yae-callout p.lo-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  max-width: 38ch;
}

/* ---- Section: Choosing failure ---------------------------------------- */
/* The intro line that sits above a structured list — the
   display_statement bullets ('Instead of succeeding, too many
   students:') and the four_steps numbered list ('Schoolio offers
   The Gentle Lead Out Migration Service...') — reads as a setup
   for what follows. Bump it above the default 17px lo-body scale
   to clamp(20px, 2.4vw, 26px) for a clear handoff into the list. */
p.lo-bullets-intro {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
}
.lo-cf-list {
  margin: 18px 0 0;
  padding-left: 18px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  max-width: 80ch;
  column-count: 2;
  column-gap: clamp(24px, 4vw, 56px);
}
.lo-cf-list li {
  font-weight: 700;
  break-inside: avoid;
}
/* A closing italic line beneath a bullet block — used on 'Choosing
   failure' to land the question 'Do you really want to allow this
   to continue?' as the last beat of the section. */
.lo-closer {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  margin-top: clamp(28px, 4vw, 48px);
  max-width: 60ch;
}
.lo-closer strong { font-weight: 700; }
.lo-cf-list li::marker { content: "— "; }

/* ---- Section: Bottom CTA --------------------------------------------- */
/* Give the CTA headline ("In seconds:") extra breathing room before the
   two-point subhead below it. */
.lo-cta-section h2.lo-display,
.lo-cta-section h2.lo-headline {
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* The CTA subhead is a two-point list at the same display scale as the
   headline. Each "&bull;" point is its own line; the first point carries an
   italic sub-line naming why today's system can't be fixed.

   The bullets are literal "&bull;" characters in the copy rather than list
   markers, so a wrapped point would otherwise run back under its own bullet.
   The points get a hanging indent — padding in, first line pulled back out by
   the same amount — which leaves the bullet on the original left edge and
   starts every continuation line directly under the first letter after it.

   0.5061em is the *measured* advance of the "&bull; " prefix (bullet glyph plus
   its trailing space) in Source Serif 4 at the weight these points render in —
   14.17px against a 28px font-size. It is em-based so it holds through the
   font-size clamp, but it is a property of this face: re-measure if the
   display font or the bullet character changes, and confirm
   `document.fonts.check()` passes first or you will be measuring a fallback.
   Measure with a Range over the prefix text node — `getClientRects()` on the
   block returns its border box, not the glyph run. */
.lo-cta-subhead .lo-cta-point,
.lo-cta-subhead .lo-cta-subpoint {
  display: block;
}
.lo-cta-subhead .lo-cta-point {
  padding-left: 0.5061em;
  text-indent: -0.5061em;            /* hanging indent: wraps clear the bullet */
}
/* The sub-line takes the same measured 0.5061em, so it starts on exactly the
   column the point's own text does — flush under the first letter after the
   bullet, like the point's wrapped lines. It reads as belonging to the point
   because it sits inside the bullet's hanging indent; stepping it deeper than
   that (it was 1.15em) just pushed it out of the column and made it look
   stray. Its font-size matches the point's, so the same em resolves to the
   same pixels. */
.lo-cta-subhead .lo-cta-subpoint {
  padding-left: 0.5061em;
  margin-top: .5em;                  /* paragraph beat, not a tucked-in line */
}
/* The sub-line now reads as its own paragraph, so the gap before the next
   bullet has to grow with it or the sub-line ends up equidistant between the
   two points and stops belonging to the first one. Keep this roughly double
   the sub-line's own beat — near enough that the three lines stay one block,
   far enough that the second bullet still starts a new point. */
.lo-cta-subhead .lo-cta-subpoint + .lo-cta-point {
  margin-top: 1em;
}

/* The "Next: The Beautiful Problem" button sits below the video, aligned to
   the video card's right edge. The container matches the video figure's
   880px centred width and right-aligns the (inline-flex) button within it. */
.lo-cta-actions {
  max-width: 880px;
  margin: 0 auto;
  text-align: right;
}

/* Rendered as an unmistakable pill button: larger tap target, a paper
   drop-shadow, a trailing arrow, and a hover lift so visitors read it
   as clickable rather than as a mono label. */
.lo-cta-section .lo-btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: 28px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ink-blue, #1F3A63);
  color: var(--paper);
  padding: 17px 32px;
  border-radius: 999px;
  border: 2px solid var(--ink-blue, #1F3A63);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 rgba(28, 28, 28, .18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.lo-cta-section .lo-btn::after {
  content: "\2192"; /* → */
  font-size: 1.15em;
  line-height: 1;
  transition: transform .12s ease;
}
.lo-cta-section .lo-btn:hover,
.lo-cta-section .lo-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 rgba(28, 28, 28, .22);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lo-cta-section .lo-btn:hover::after,
.lo-cta-section .lo-btn:focus-visible::after {
  transform: translateX(3px);
}
.lo-cta-section .lo-btn:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 0 rgba(28, 28, 28, .2);
}
/* Inline variant: the pull line and the button share one row (wrapping to
   two lines only when the viewport is too narrow to hold both). The button
   drops one size so it sits comfortably beside the text. */
.lo-cta-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.5vw, 26px);
  margin-top: clamp(16px, 2vw, 28px);
}
.lo-cta-inline .lo-pull {
  margin: 0;
}
.lo-cta-section .lo-cta-inline .lo-btn--sm {
  margin-top: 0;
  padding: 11px 22px;
  font-size: 13px;
}

/* ---- Bottom CTA: clickable "video card" thumbnail ------------------- */
/* An optional large thumbnail that stands in for the text button. Reads
   as a tappable video: rounded paper frame, soft shadow, a hover lift,
   and a play badge tucked into the bottom-right corner (the card art has
   its own centred title, so a centred badge would collide with it). */
.lo-cta-video {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: clamp(20px, 3vw, 32px) auto 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rule, #B7AE93);
  box-shadow: 6px 6px 0 0 rgba(28, 28, 28, .16);
  line-height: 0;
  transition: transform .14s ease, box-shadow .14s ease;
}
.lo-cta-video:hover,
.lo-cta-video:focus-visible {
  transform: translateY(-3px);
  box-shadow: 8px 10px 0 0 rgba(28, 28, 28, .22);
  outline: none;
}
.lo-cta-video__img {
  display: block;
  width: 100%;
  height: auto;
}
.lo-cta-video__play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ink-blue, #1F3A63);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .14s ease, transform .14s ease;
}
.lo-cta-video:hover .lo-cta-video__play,
.lo-cta-video:focus-visible .lo-cta-video__play {
  background: var(--terracotta, #C46B5B);
  transform: scale(1.08);
}
/* CSS play triangle, nudged right so it sits optically centred */
.lo-cta-video__play::after {
  content: "";
  display: block;
  margin-left: 5px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--paper, #FBF6EA);
}

/* ---- Inline closing CTA inside a prose section ----------------------- */
/* Used when a paragraph part carries its own hand-off CTA at its foot
   (see _paragraph.html.erb). The heading + pull + button sit under a
   hairline, left-aligned in the same reading column — so the ask reads as
   the quiet close of the section rather than a separate coloured band. */
.para-cta {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid rgba(28, 28, 28, .14);
}
.para-cta__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 2.6vw, var(--fs-30));
  line-height: 1.15;
  margin: 0;
}
.para-cta__headline em { font-style: italic; }
.para-cta__headline .lo-accent { color: var(--lo-color-2); }
.para-cta__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.2vw, 24px);
  margin-top: clamp(12px, 1.6vw, 18px);
}
.para-cta__pull {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.2;
  margin: 0;
}
.para-cta__pull em { font-style: italic; }
.para-cta__pull .lo-accent { color: var(--lo-color-2); }
.para-cta .lo-btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ink-blue, #1F3A63);
  color: var(--paper);
  padding: 11px 22px;
  border-radius: 999px;
  border: 2px solid var(--ink-blue, #1F3A63);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 4px 4px 0 0 rgba(28, 28, 28, .18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.para-cta .lo-btn::after {
  content: "\2192"; /* → */
  font-size: 1.15em;
  line-height: 1;
  transition: transform .12s ease;
}
.para-cta .lo-btn:hover,
.para-cta .lo-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 rgba(28, 28, 28, .22);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.para-cta .lo-btn:hover::after,
.para-cta .lo-btn:focus-visible::after {
  transform: translateX(3px);
}
.para-cta .lo-btn:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 0 rgba(28, 28, 28, .2);
}

/* ---- Inline prose CTA pill ------------------------------------------- */
/* A self-contained pill for a hand-off link that sits inline in prose (e.g.
   the "Production →" / "Education →" next-step links on the choice pages),
   so those CTAs read in exactly the same ink-blue pill language as the home
   page rather than as a flat rectangular button. The trailing arrow is drawn
   by ::after, so link text should NOT include a literal arrow. */
.lo-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ink-blue, #1F3A63);
  color: var(--paper);
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid var(--ink-blue, #1F3A63);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 rgba(28, 28, 28, .18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.lo-cta-pill::after {
  content: "\2192"; /* → */
  font-size: 1.15em;
  line-height: 1;
  transition: transform .12s ease;
}
.lo-cta-pill:hover,
.lo-cta-pill:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 rgba(28, 28, 28, .22);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lo-cta-pill:hover::after,
.lo-cta-pill:focus-visible::after {
  transform: translateX(3px);
}
.lo-cta-pill:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 0 rgba(28, 28, 28, .2);
}

/* Standout callout box — a bordered paper-2 panel with a big display line.
   Used to frame a single emphatic sentence (e.g. "Let's make a conscious
   choice.") above the surrounding prose. */
.choice-box {
  background: var(--paper-2);
  border: 1px solid rgba(28, 28, 28, .16);
  border-radius: var(--radius-md);
  padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 40px);
  margin: clamp(20px, 3vw, 32px) 0 clamp(28px, 4vw, 44px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.4vw, var(--fs-48));
  line-height: 1.08;
}
/* A THESIS variant of the callout. Same paper-2 panel, border and radius, but
   carrying a statement of several lines plus a short list instead of one
   emphatic sentence — so the type steps down from .choice-box's
   clamp(1.75rem, 4.4vw, 48px), which over three lines in the prose column
   wraps every one of them.

   First used at the head of /choose-your-school-system/todays-school-system,
   where it states up front what the whole page is about to show. That also
   brought .choice-box back into use: its only caller was the "How to choose?"
   page, deleted 2026-09-19, and the class had been sitting unreferenced since.

   The list takes .72em of the box's own size rather than a fixed value, so the
   two scale together and the three conditions stay a step under the statement
   they qualify at every width. The marker is ink-blue: the three "or not"
   lines are the sting, and the colour is what stops them reading as ordinary
   prose set small. */
.choice-box--thesis {
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  line-height: 1.18;
}
.choice-box--thesis ul {
  margin: .9rem 0 0;
  padding-left: 1.15em;
  font-size: .72em;
  line-height: 1.32;
}
.choice-box--thesis li { margin: 0; }
.choice-box--thesis li::marker { color: var(--lo-color-2); }
/* The tail — the consequence the conditions add up to. It takes the box's own
   size and weight, not the lead's: it is a conclusion, not setup, and reading
   it as a footnote under the list would throw the box's argument away at the
   last line. It carries no <strong> of its own, so the priority above stays
   the only bold thing in the box. */
.choice-box--thesis .thesis-tail {
  display: block;
  margin-top: .8rem;
}

/* The lead — the clause that sets the claim up, a tier under the claim
   itself. Same idea as .bp-statement's .bp-lead: the two are one sentence, so
   the lead sits INSIDE the box rather than as a paragraph above it, but it is
   setup and must not compete with what it introduces.

   IT ALSO DECIDES THE BOX'S WIDTH, which is the non-obvious part. At the
   statement's 32px the Education page's opening measures 1016px — wider than
   any reading measure the paragraph part offers — and holding it on one line
   meant forcing the prose open with an !important and leaving the three short
   statement lines stranded in ~1100px of box. At this size the widest line in
   the box is 461px and the whole problem goes away.

   Its own clamp, not an em of the box's: an em would look right on a desktop
   and collapse on a phone, where the box is already at its 1.3rem floor. This
   floor is ordinary body size, so the lead can never render smaller than the
   prose around the box. */
.choice-box--thesis .thesis-lead {
  display: block;
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: .7rem;
}
.choice-box em { font-style: italic; }
.choice-box .lo-accent { color: var(--lo-color-2); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 720px) {
  .lo-ew-row, .lo-ew-row.lo-flip,
  .lo-yae-row, .lo-yae-row.lo-flip,
  .lo-secret-grid, .lo-twocol {
    grid-template-columns: 1fr;
  }
  /* Flip the §-divider from vertical to horizontal when the secret
     grid stacks. */
  .lo-secret-divider {
    flex-direction: row;
    width: 100%;
    margin: 4px 0;
  }
  .lo-secret-divider::before,
  .lo-secret-divider::after {
    width: auto;
    height: 1px;
    min-height: 0;
    min-width: 24px;
  }
  .lo-ew-row.lo-flip .lo-ew-copy,
  .lo-ew-row.lo-flip .lo-ew-img,
  .lo-yae-row.lo-flip .lo-yae-copy,
  .lo-yae-row.lo-flip .lo-yae-img { order: 0; }
  .lo-pair { grid-template-columns: 1fr; }
  .lo-educators-grid { grid-template-columns: 1fr; }
  .lo-portrait { width: 60%; max-width: 240px; }
  .lo-educator-card .lo-portrait { width: 100%; max-width: 200px; }
  .lo-col-lrn .lo-float-img {
    float: none;
    width: 100%; height: auto;
    aspect-ratio: 16 / 10;
    margin: 8px 0;
  }
}

/* ---- Proof-videos band (two classroom-proof clips side by side) --------- */
.proof-videos__head { text-align: center; }
.proof-videos__sub {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, var(--fs-30));
  line-height: 1.15;
  color: var(--ink);
  margin: .25rem 0 2.25rem;
}
.proof-videos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 720px) {
  .proof-videos__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.proof-videos__item { margin: 0; text-align: center; }
.proof-videos__portrait { display: inline-block; line-height: 0; }
.proof-videos__portrait img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--ink);
}
.proof-videos__name {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: 1.15;
  margin: .6rem 0 1rem;
  color: var(--ink);
}
.proof-videos__name a {
  color: var(--ink-blue);
  text-decoration: underline;
  text-decoration-color: var(--ink-blue);
  text-underline-offset: 2px;
}
.proof-videos__dates {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .02em;
  color: rgba(28, 28, 28, .62);
  margin-top: .2rem;
}
.proof-videos__frame {
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-paper);
  background: var(--ink);
}
.proof-videos__frame video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}
.proof-videos__footer {
  max-width: 44rem;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgba(28, 28, 28, .14);
  text-align: center;
}
.proof-videos__footer p {
  margin: 0;
}
.proof-videos__footer p + p {
  margin-top: .5rem;
}
.proof-videos__science-lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, var(--fs-30));
  line-height: 1.2;
}
.proof-videos__footer a {
  color: var(--ink-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================================
   Audience triad — parts/_audience_triad.html.erb
   Added 2026-09-23. Parents, districts and educators at the corners of a
   triangle, with the student (the Schoolio mark) at its centre, beside a card
   that speaks to one of them at a time. The triangle turns to bring whoever
   is being spoken to up to the top; the card crossfades with it.

   Two modes, set by the audience_triad controller:
     .is-static  no JS yet (or none at all): all three cards stacked, the
                 picture a still, the tabs and pause button hidden.
     .is-live    one card at a time, tabs and rotation live. Adds .is-playing
                 while autoplay runs, .is-held while hovered or focused, and
                 .is-offscreen while scrolled away — the last two pause the
                 meter animation, which IS the clock (see the controller).

   Geometry (reworked 2026-09-23 to squeeze the triangle vertically). The
   figure is 3:2, not square. The three corners, as % of the figure's own
   width and height, are: top (50, 18), lower left (16.2, 75), lower right
   (83.8, 75). The SVG polygon and spokes in the partial encode the same
   points in their stretched 100x100 viewBox — change them together.

   Rotation moves each NODE to the next corner, gliding straight along the
   triangle's edge, rather than turning the whole ring. A turned box only
   works while it is square — a flattened one swings its corners out — and
   an orbit round an ellipse carries the bottom node out below the figure
   mid-turn. Travel along the edges keeps everything inside the triangle.
   The controller writes each node's corner as data-slot (0 top, 1 lower
   left, 2 lower right), slot = (index - turn) mod 3, so as turn rises every
   node steps lower-left -> top -> lower-right -> lower-left: CLOCKWISE.
   ========================================================================= */
.lo-triad {
  --triad-ease: cubic-bezier(.65, 0, .35, 1);
  --triad-spin: 1.1s;
  overflow-x: clip;
}
.lo-triad-head { margin-bottom: clamp(16px, 6vw, 72px); }
.lo-triad h2.lo-triad-title {
  font-size: clamp(2.125rem, 5vw, 3.75rem);
  max-width: 22ch;
}

.lo-triad-grid {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  /* Top-aligned, not centred: the card is much taller than the picture, and
     centred against it the triangle started half a screen down — below the
     fold for anyone landing here from the hero's "Who it's for" link. */
  .lo-triad-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
  .lo-triad-figure { margin-top: 28px; }
}
/* Landing from "Who it's for": stop partway into the section's headroom
   rather than at its very top, so the eyebrow and headline arrive near the
   top of the screen. */
.lo-triad { scroll-margin-top: calc(-1 * clamp(40px, 6vw, 80px)); }
@media (prefers-reduced-motion: no-preference) {
  html:has(.lo-hero--showcase) { scroll-behavior: smooth; }
}

/* ---- The picture ------------------------------------------------------- */
.lo-triad-figure {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  /* Room for the bottom labels, which hang below the lower two discs. */
  margin-bottom: 12px;
}
@media (max-width: 899px) {
  .lo-triad-figure { width: min(100%, 340px); margin-bottom: 14px; }
  .lo-triad-grid { gap: 16px; }
  /* On a phone the top label and the student sit close; tuck the student's
     caption in under a smaller mark so the two clear each other. */
  /* Every rule in this block is written under `.lo-triad` so it outranks
     the unscoped base rules further down the file; at equal specificity
     those would win on source order and these would silently do nothing. */
  .lo-triad .lo-triad-center { top: 62%; gap: 0; }
  .lo-triad .lo-triad-center-label { font-size: 13px; }

  /* Labels ON the disc, not under it (tried 2026-09-23). Each label's pill
     overlaps the lower part of its own disc, with the icon lifted to make
     room, so the bottom two nodes no longer hang their labels below the
     triangle and the figure can be shorter: 16:9 here instead of 3:2. The
     pill's paper ground keeps it readable over the ink-blue active disc and
     the paper inactive ones alike. The corner percentages are unchanged, so
     the SVG lines still land on the discs. */
  .lo-triad .lo-triad-figure { aspect-ratio: 16 / 9; margin-bottom: 4px; }
  .lo-triad .lo-triad-label { top: 72%; font-size: 11px; padding: 3px 7px 2px; }
  .lo-triad .lo-triad-icon { transform: translateY(-14%); }
  .lo-triad .lo-triad-center { top: 60%; }
}
/* A soft pool of light under the child, so the centre reads as the point the
   three lines are all drawn to rather than as an empty middle. */
.lo-triad-figure::before {
  content: "";
  position: absolute;
  inset: 22% 30% 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(253, 231, 154, .75), rgba(253, 231, 154, 0));
}
.lo-triad-ring {
  position: absolute;
  inset: 0;
  /* Above the beam, so the top node's disc and label cover its upper end. */
  z-index: 2;
}
.lo-triad-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lo-triad-edge {
  fill: rgba(251, 246, 234, .35);
  stroke: rgba(31, 58, 99, .35);
  stroke-width: 1.25;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lo-triad-spoke {
  stroke: rgba(31, 58, 99, .22);
  stroke-width: 1;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.lo-triad-node {
  position: absolute;
  left: 50%;
  top: 18%;
  width: clamp(60px, 18%, 84px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left var(--triad-spin) var(--triad-ease), top var(--triad-spin) var(--triad-ease);
  z-index: 2;
}
.lo-triad-node[data-slot="1"] { left: 16.2%; top: 75%; }
.lo-triad-node[data-slot="2"] { left: 83.8%; top: 75%; }
/* The node gliding along the base passes behind the student, not over. */
.lo-triad-node:not(.is-active) { z-index: 1; }
.lo-triad.is-live .lo-triad-node { cursor: pointer; }
.lo-triad-disc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1.5px rgba(28, 28, 28, .16),
              0 10px 24px -14px rgba(31, 58, 99, .45);
  transition: background .5s ease, color .5s ease, box-shadow .5s ease, transform .5s ease;
}
.lo-triad-node:hover .lo-triad-disc {
  box-shadow: 0 0 0 1.5px var(--ink-blue),
              0 10px 24px -14px rgba(31, 58, 99, .45);
}
.lo-triad-node.is-active .lo-triad-disc {
  background: var(--ink-blue);
  color: var(--paper);
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(255, 193, 7, .38),
              0 16px 32px -14px rgba(31, 58, 99, .6);
}
.lo-triad-icon { width: 56%; height: 56%; }
.lo-triad-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(28, 28, 28, .66);
  /* A small paper tag, so a label can sit over the triangle's lines (the top
     node's always lands on the beam) without a line striking through it. */
  background: var(--paper);
  padding: 4px 9px 3px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(28, 28, 28, .08);
  transition: color .5s ease, background .5s ease;
}
.lo-triad-node.is-active .lo-triad-label {
  color: var(--ink-blue);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(31, 58, 99, .35);
}

/* The beam: a fixed line from the top vertex down to the child. It sits
   outside the ring, so whoever turns to the top is always the one connected. */
.lo-triad-beam {
  position: absolute;
  left: 50%;
  top: 18%;
  height: 32%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, var(--ink-blue), rgba(31, 58, 99, .15));
  border-radius: 2px;
  z-index: 1;   /* under the ring (2), under the centre mark (3) */
  overflow: hidden;
}
.lo-triad-beam::after {
  content: "";
  position: absolute;
  left: -2px;
  width: 6px;
  height: 18%;
  border-radius: 3px;
  background: linear-gradient(to bottom, rgba(255, 193, 7, 0), var(--highlighter));
  top: -20%;
}
.lo-triad-center {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  z-index: 3;
}
.lo-triad-center img {
  width: clamp(40px, 4vw, 54px);
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(31, 58, 99, .28));
}
.lo-triad-center-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-blue);
  white-space: nowrap;
}

/* ---- The card ---------------------------------------------------------- */
.lo-triad-cards { display: grid; }
.lo-triad-card {
  background: var(--paper);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 1px 0 rgba(28, 28, 28, .06),
              0 28px 56px -32px rgba(31, 58, 99, .45);
  position: relative;
}
/* A thin ink-blue rule across the card's head, the one piece of "chrome" on
   it — enough to make it read as a made object rather than a floating box. */
.lo-triad-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(24px, 4vw, 48px);
  width: 48px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ink-blue);
}
.lo-triad.is-static .lo-triad-cards { gap: 20px; }
.lo-triad.is-live .lo-triad-card {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity .45s ease, transform .6s var(--triad-ease), visibility 0s linear .6s;
}
.lo-triad.is-live .lo-triad-card.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .6s ease .25s, transform .7s var(--triad-ease) .25s, visibility 0s;
}

.lo-triad-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, .62);
}
.lo-triad-count { color: var(--ink-blue); font-weight: 600; }
.lo-triad-count::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: rgba(28, 28, 28, .3);
}
.lo-triad-lead {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.35;
  color: var(--ink-blue);
}
h3.lo-triad-question {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.lo-triad-body {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(28, 28, 28, .1);
  font-family: var(--font-educating);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(28, 28, 28, .8);
  max-width: 48ch;
}

/* The tasteful emphasis: a soft highlighter stroke laid under the lower part
   of the line, not a fill behind all of it — the pen-on-paper version of
   bold. It draws itself left to right when its card arrives. Soft yellow, not
   the logo's full --highlighter, and a flat stroke, not the logo's oval. */
.lo-triad mark {
  color: inherit;
  background-color: transparent;   /* or the UA's own bright yellow shows */
  background-image: linear-gradient(to top, var(--highlighter-soft) 0 .42em, transparent .42em);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .06em;
}
.lo-triad.is-live mark { background-size: 0% 100%; transition: background-size 0s; }
.lo-triad.is-live .lo-triad-card.is-active mark {
  background-size: 100% 100%;
  transition: background-size 1.1s var(--triad-ease) .8s;
}

/* ---- Tabs + pause ------------------------------------------------------ */
.lo-triad-controls { display: none; }
.lo-triad.is-live .lo-triad-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.lo-triad-tabs { display: flex; flex: 1; gap: 14px; }
.lo-triad-tab {
  flex: 1;
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 0 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, .55);
  transition: color .3s ease;
}
.lo-triad-tab:hover,
.lo-triad-tab[aria-selected="true"] { color: var(--ink); }
.lo-triad-tab:focus-visible,
.lo-triad-pause:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 4px;
}
.lo-triad-meter {
  display: block;
  height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: rgba(28, 28, 28, .15);
  overflow: hidden;
}
.lo-triad-meter-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink-blue);
  transform-origin: left;
  transform: scaleX(0);
}
.lo-triad-tab[aria-selected="true"] .lo-triad-meter-fill { transform: scaleX(1); }
.lo-triad.is-playing .lo-triad-tab[aria-selected="true"] .lo-triad-meter-fill {
  animation: lo-triad-meter var(--triad-interval, 9000ms) linear forwards;
}
.lo-triad.is-held .lo-triad-meter-fill,
.lo-triad.is-offscreen .lo-triad-meter-fill { animation-play-state: paused !important; }
@keyframes lo-triad-meter { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lo-triad-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(28, 28, 28, .22);
  background: var(--paper);
  color: var(--ink-blue);
  cursor: pointer;
  transition: border-color .3s ease;
}
.lo-triad-pause:hover { border-color: var(--ink-blue); }
.lo-triad-pause svg { width: 14px; height: 14px; }
.lo-triad-pause-icon { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lo-triad-play-icon  { fill: currentColor; display: none; }
.lo-triad:not(.is-playing) .lo-triad-pause-icon { display: none; }
.lo-triad:not(.is-playing) .lo-triad-play-icon  { display: inline; }

.lo-triad-closer {
  margin: clamp(40px, 6vw, 72px) auto 0;
  max-width: 40ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.35;
  text-wrap: balance;
}

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .lo-triad.is-live .lo-triad-edge { animation: lo-triad-march 24s linear infinite; }
  .lo-triad.is-live .lo-triad-beam::after { animation: lo-triad-flow 2.8s var(--triad-ease) infinite; }
}
@keyframes lo-triad-march { to { stroke-dashoffset: -70; } }
@keyframes lo-triad-flow  { from { top: -20%; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .lo-triad { --triad-spin: 0s; }
  .lo-triad * { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ---- Triad → video link ------------------------------------------------ */
/* The foot of every triad card points at the video, so a reader who has just
   been asked their question is one click from the start of the answer. */
.lo-triad-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--font-educating);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-blue);
  text-decoration: none;
}
.lo-triad-link-play {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-blue);
  transition: background .2s ease, transform .2s ease;
}
.lo-triad-link-play svg { width: 11px; height: 11px; fill: var(--paper); margin-left: 2px; }
.lo-triad-link-arrow { transition: transform .2s ease; }
.lo-triad-link:hover .lo-triad-link-play { background: var(--terracotta); transform: scale(1.08); }
.lo-triad-link:hover .lo-triad-link-arrow { transform: translateX(4px); }
.lo-triad-link:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.lo-triad-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 4px; }

/* =========================================================================
   Video invitation — parts/_video_invite.html.erb
   Added 2026-09-23. The home page's one ask, staged as a screening: the only
   dark band on the page, so the eye lands on it as the place the page has
   been heading. Ink-blue rather than chalkboard: the poster is warm and its
   title is green, and green-on-green would sink it.
   ========================================================================= */
section.lo-sec.lo-invite {
  background:
    radial-gradient(120% 90% at 85% 40%, rgba(255, 193, 7, .10), transparent 60%),
    var(--ink-blue);
  color: var(--paper);
  overflow-x: clip;
}
.lo-invite-grid {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .lo-invite-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.lo-invite-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251, 246, 234, .78);
}
/* A small lit dot, the "on air" light of a screening room. */
.lo-invite-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--highlighter);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, .2);
}
section.lo-invite h2.lo-invite-title {
  color: var(--paper);
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1.04;
}
section.lo-invite .lo-invite-title strong {
  color: var(--highlighter);
  font-weight: 600;
}
.lo-invite-lede {
  margin: 20px 0 0;
  max-width: 34em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  line-height: 1.45;
  color: rgba(251, 246, 234, .88);
}
.lo-invite-teasers { margin-top: clamp(24px, 3.5vw, 36px); }
.lo-invite-teasers-label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251, 246, 234, .6);
}
.lo-invite-teasers ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: teaser;
  border-top: 1px solid rgba(251, 246, 234, .16);
}
.lo-invite-teasers li {
  counter-increment: teaser;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(251, 246, 234, .16);
  font-family: var(--font-educating);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: rgba(251, 246, 234, .92);
}
.lo-invite-teasers li::before {
  content: counter(teaser, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--highlighter);
}
.lo-invite-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: clamp(28px, 4vw, 40px);
}
/* The house pill (see .lo-btn), inverted for the dark band: paper on
   ink-blue, turning highlighter on hover. */
.lo-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px 16px 22px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-blue);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lo-invite-btn svg { width: 14px; height: 14px; fill: currentColor; }
.lo-invite-btn:hover,
.lo-invite-btn:focus-visible {
  background: var(--highlighter);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .6);
}
.lo-invite-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.lo-invite-note {
  margin: 0;
  font-family: var(--font-educating);
  font-size: .9375rem;
  color: rgba(251, 246, 234, .66);
}

.lo-invite-poster {
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 0 0 1px rgba(251, 246, 234, .18),
              0 40px 80px -30px rgba(0, 0, 0, .7);
  transform: rotate(-1.2deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.lo-invite-poster__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.lo-invite-poster:hover,
.lo-invite-grid:has(.lo-invite-btn:hover) .lo-invite-poster {
  transform: rotate(0deg) translateY(-4px);
}
.lo-invite-poster:hover .lo-invite-poster__img,
.lo-invite-grid:has(.lo-invite-btn:hover) .lo-invite-poster__img { transform: scale(1.03); }
.lo-invite-play {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink-blue);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: background .2s ease, transform .2s ease;
}
.lo-invite-play svg { width: 36%; height: 36%; fill: var(--paper); margin-left: 6%; }
.lo-invite-play::before,
.lo-invite-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--highlighter);
  opacity: 0;
}
.lo-invite-poster:hover .lo-invite-play,
.lo-invite-grid:has(.lo-invite-btn:hover) .lo-invite-play {
  background: var(--terracotta);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .lo-invite-play::before { animation: lo-invite-ping 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
  .lo-invite-play::after  { animation: lo-invite-ping 2.6s cubic-bezier(.2, .6, .3, 1) 1.3s infinite; }
}
@keyframes lo-invite-ping {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-invite-poster { transform: none; }
  .lo-invite * , .lo-invite-poster { transition-duration: 0s !important; }
}

/* ---- Triad drawings (parts/triad_art/) --------------------------------- */
/* Each card opens on a drawing of its own question. Inline SVG, so the
   words inside set in the page's faces; sized by width, height follows the
   480x250 viewBox. The small movements — loose planks and coins drifting
   down, the struck rule, the spark — play when the card arrives and only
   for readers who have not asked for less motion. */
.lo-triad-art {
  margin: 4px 0 20px;
  border-radius: 14px;
  background: linear-gradient(to bottom, rgba(217, 228, 212, .45), rgba(217, 228, 212, 0));
  padding: 12px 8px 0;
}
.lo-triad-art-svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .lo-triad.is-live .lo-triad-card.is-active .lo-art-fall {
    animation: lo-art-fall 1.4s cubic-bezier(.5, 0, .75, 0) .6s both;
  }
  .lo-triad.is-live .lo-triad-card.is-active .lo-art-strike {
    stroke-dasharray: 280;
    animation: lo-art-strike .7s cubic-bezier(.65, 0, .35, 1) .7s both;
  }
  .lo-triad.is-live .lo-triad-card.is-active .lo-art-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: lo-art-spark 1.8s ease-in-out 1.2s infinite;
  }
}
@keyframes lo-art-fall   { from { transform: translateY(-26px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes lo-art-strike { from { stroke-dashoffset: 280; } to { stroke-dashoffset: 0; } }
@keyframes lo-art-spark  { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.35) rotate(20deg); } }
/* Under the question: the gap comes above the drawing instead of below it,
   and the card's link follows the drawing. */
.lo-triad-art.lo-triad-art--below { margin: 22px 0 0; }

/* The card's audience name, made the first thing read (2026-09-23): "01 —
   Parents" in the display face, bold, at nearly the question's size, so a
   reader finds their own card before reading any of it. Overrides the small
   mono kicker above; the number takes terracotta so it reads as a count and
   the name keeps the ink-blue every audience word on the page uses. */
.lo-triad-kicker {
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.1;
}
.lo-triad-count {
  color: var(--terracotta);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}
.lo-triad-count::after {
  width: .6em;
  height: 3px;
  margin-left: 14px;
  border-radius: 2px;
  background: var(--terracotta);
  opacity: .55;
}
.lo-triad-for { color: var(--ink-blue); }
/* Educators' drawing (2026-09-23 redraw): the highlighter under "ready or
   not." draws in, and the NEXT LESSON arrow keeps nudging forward. */
@media (prefers-reduced-motion: no-preference) {
  .lo-triad.is-live .lo-triad-card.is-active .lo-art-mark {
    transform-box: fill-box;
    transform-origin: left;
    animation: lo-art-mark .9s cubic-bezier(.65, 0, .35, 1) .6s both;
  }
  .lo-triad.is-live .lo-triad-card.is-active .lo-art-push {
    animation: lo-art-push 2.4s cubic-bezier(.5, 0, .5, 1) 1s infinite;
  }
}
@keyframes lo-art-mark { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lo-art-push { 0%, 100% { transform: none; } 45% { transform: translateX(7px); } }

/* =========================================================================
   Showcase hero — lead_out_hero with `showcase` (the home page, 2026-09-23)
   Everything here is dressing AROUND the measured type. Nothing below may
   change the width or font size of h1 or .lo-hero-subline, or the figure's
   --lo-subfig-w: the fit-lines arithmetic in the notes above depends on
   them. Decoration is drawn with backgrounds, pseudo-elements and
   transforms, none of which take up layout room.
   ========================================================================= */
.lo-hero--showcase {
  position: relative;
  overflow: clip;
  isolation: isolate;
  /* The ground: a warm light where the students are looking, and a little
     sage low on the left, echoing the band that follows. */
  background:
    radial-gradient(55% 60% at 88% 58%, rgba(253, 231, 154, .55), rgba(253, 231, 154, 0) 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(217, 228, 212, .7), rgba(217, 228, 212, 0) 70%),
    var(--paper);
}

/* line_1 as a badge: a small lit dot, a hairline pill. `justify-self` so the
   pill hugs its words instead of stretching across the grid column. */
/* inline-block, not inline-flex: in a flex box every text run and span is
   its own item and the spaces between them collapse, which unspaced the dash
   in "The Lead Out Method – for school districts". */
.lo-hero--showcase .lo-line-1 {
  justify-self: start;
  display: inline-block;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: rgba(251, 246, 234, .8);
  box-shadow: 0 0 0 1px rgba(31, 58, 99, .22), 0 6px 18px -12px rgba(31, 58, 99, .5);
  /* 3.6vw keeps the badge to one line down to a 360px phone. */
  font-size: clamp(13px, min(3.6vw, 1.6vw + 6px), 19px);
}
/* The Schoolio mark leads the badge — served from public/, like the branded
   inside/outside glyphs, so the absolute path is the real URL. */
.lo-hero--showcase .lo-line-1::before {
  content: "";
  display: inline-block;
  vertical-align: -.22em;
  margin: 0 9px 0 -2px;
  width: 1.3em;
  height: 1.3em;
  background: url("/brand/schoolio-mark.svg") center / contain no-repeat;
}

/* "beautiful" gets the page's one emphasis mark, the soft highlighter
   stroke the triad's questions use: laid under the lower part of the word as
   a background, so it takes no room, and drawn in left to right once the
   headline has arrived. A thin ink-blue pen line was tried first and read as
   a hyperlink. */
.lo-hero--showcase h1 .lo-blue strong {
  background-image: linear-gradient(var(--highlighter-soft), var(--highlighter-soft));
  background-repeat: no-repeat;
  background-position: 0 78%;
  background-size: 100% .26em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The sunrise the five students are looking toward: a warm disc low behind
   them, and a sage ground line they stand on. Pseudo-elements on the figure,
   positioned absolutely, so the figure's measured width is untouched. */
.lo-hero--showcase .lo-hero-subfigure { position: relative; }
.lo-hero--showcase .lo-hero-subfigure::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 6%;
  width: 118%;
  aspect-ratio: 2 / 1;
  transform: translateX(-46%);
  border-radius: 999px 999px 0 0;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 193, 7, .6), rgba(253, 231, 154, .5) 50%, rgba(253, 231, 154, 0) 76%);
}
.lo-hero--showcase .lo-hero-subfigure::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6%;
  right: -10%;
  bottom: 4%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(31, 58, 99, 0), rgba(31, 58, 99, .35) 20%, rgba(31, 58, 99, .35) 80%, rgba(31, 58, 99, 0));
}

/* ---- Actions + proof ---------------------------------------------------- */
.lo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(22px, 3.4vw, 40px);
}
.lo-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 10px 10px;
  border-radius: 999px;
  background: var(--ink-blue);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(31, 58, 99, .75);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.lo-hero-btn-play {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--highlighter);
  transition: transform .2s ease;
}
.lo-hero-btn-play svg { width: 13px; height: 13px; fill: var(--ink); margin-left: 2px; }
.lo-hero-btn:hover,
.lo-hero-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(31, 58, 99, .85);
}
.lo-hero-btn:hover .lo-hero-btn-play { transform: scale(1.1); }
.lo-hero-btn:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 4px; }
.lo-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-educating);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink-blue);
  text-decoration: none;
}
.lo-hero-link span:first-child {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  padding-bottom: 2px;
}
.lo-hero-link-arrow { transition: transform .2s ease; }
.lo-hero-link:hover .lo-hero-link-arrow { transform: translateY(3px); }
.lo-hero-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 4px; }

.lo-hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, .6);
}
.lo-hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.lo-hero-proof li::before {
  content: "";
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--ink-blue);
  border-bottom: 2px solid var(--ink-blue);
  transform: rotate(-45deg) translateY(-2px);
  opacity: .8;
}

/* ---- Entrance ----------------------------------------------------------- */
/* Each line of the stack rises in turn, then the underline draws under
   "beautiful". Transform and opacity only: nothing reflows, so fit-lines
   measures the same lines it always did. */
@media (prefers-reduced-motion: no-preference) {
  .lo-hero--showcase .lo-hero-stack > * {
    animation: lo-hero-rise .8s cubic-bezier(.2, .7, .2, 1) both;
  }
  .lo-hero--showcase .lo-hero-stack > :nth-child(1) { animation-delay: .05s; }
  .lo-hero--showcase .lo-hero-stack > :nth-child(2) { animation-delay: .18s; }
  .lo-hero--showcase .lo-hero-stack > :nth-child(3) { animation-delay: .36s; }
  .lo-hero--showcase .lo-hero-stack > :nth-child(4) { animation-delay: .54s; }
  .lo-hero--showcase .lo-hero-stack > :nth-child(5) { animation-delay: .66s; }
  .lo-hero--showcase h1 .lo-blue strong {
    animation: lo-hero-underline .9s cubic-bezier(.65, 0, .35, 1) .85s both;
  }
  .lo-hero--showcase .lo-hero-subfigure::before {
    animation: lo-hero-sunrise 1.6s cubic-bezier(.2, .7, .2, 1) .5s both;
  }
}
@keyframes lo-hero-rise      { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lo-hero-underline { from { background-size: 0% .26em; } to { background-size: 100% .26em; } }
@keyframes lo-hero-sunrise   { from { opacity: 0; transform: translate(-46%, 18%); } to { opacity: 1; transform: translateX(-46%); } }

/* ---- Triad, desktop: one screen (2026-09-23) --------------------------- */
/* Landing from the hero's "Who it's for" on a laptop (~600px of viewport
   under the browser chrome), the section has to show headline, triangle and
   the whole card at once. Three moves, desktop only:
     1. the section's wrap widens from 1080px to 1280px, all of it given to
        the card — the triangle column shrinks to a fixed ~320px;
     2. the card goes landscape: number, question and link on the left, the
        drawing on the right, instead of stacking the drawing under the
        question;
     3. the question steps down a size, which the wider text column pays
        for in line count.
   Below 900px nothing changes: the phone layout is already one column and
   was tuned on its own. Scoped under .lo-triad to outrank the base rules. */
@media (min-width: 900px) {
  .lo-triad .lo-wrap { max-width: 1280px; }
  .lo-triad .lo-triad-head { margin-bottom: clamp(24px, 3vw, 40px); }
  .lo-triad .lo-triad-grid {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 56px);
  }
  .lo-triad .lo-triad-figure { margin-top: 8px; }
  /* At ~320px the figure is phone-sized, so the student takes the phone's
     smaller mark and lower seat to clear the top label. */
  .lo-triad .lo-triad-center { top: 63%; gap: 0; }
  .lo-triad .lo-triad-center img { width: 40px; }
  .lo-triad .lo-triad-center-label { font-size: 13px; }

  .lo-triad .lo-triad-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "kicker   art"
      "question art"
      "link     art";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(24px, 3vw, 44px);
    padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 44px);
  }
  .lo-triad .lo-triad-kicker  { grid-area: kicker; font-size: clamp(1.625rem, 2.4vw, 2.25rem); margin-bottom: 12px; }
  .lo-triad .lo-triad-question { grid-area: question; font-size: clamp(1.375rem, 2vw, 1.875rem); }
  .lo-triad .lo-triad-link    { grid-area: link; align-self: end; }
  .lo-triad .lo-triad-art     { grid-area: art; align-self: center; margin: 0; }
  .lo-triad .lo-triad-card::before { left: clamp(24px, 3vw, 44px); }
}

/* =========================================================================
   Triad, tabs layout — audience_triad with `layout: "tabs"` (2026-09-24)
   No triangle. A row of large audience buttons (the tablist, each with its
   icon and the autoplay meter) sits over one full-width card: question on
   the left, drawing on the right. Cards slide in from the left and leave to
   the right. The card's own "01 — Parents" heading is hidden: the lit button
   above it already says whose card it is, and the room goes to the question.
   Written as .lo-triad.lo-triad--tabs so it outranks the triangle layout's
   `.lo-triad …` desktop rules.
   ========================================================================= */
.lo-triad.lo-triad--tabs .lo-wrap { max-width: 1080px; }
.lo-triad.lo-triad--tabs .lo-triad-head { margin-bottom: clamp(16px, 2.4vw, 28px); }
.lo-triad.lo-triad--tabs .lo-triad-grid { display: block; }
.lo-triad.lo-triad--tabs .lo-triad-kicker { display: none; }

/* The buttons. */
.lo-triad.lo-triad--tabs.is-live .lo-triad-controls {
  margin: 0 0 clamp(14px, 2vw, 22px);
  gap: clamp(8px, 1.4vw, 16px);
}
.lo-triad--tabs .lo-triad-tabs { gap: clamp(8px, 1.4vw, 16px); }
.lo-triad--tabs .lo-triad-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(12px, 1.6vw, 18px) clamp(10px, 2vw, 24px);
  border-radius: 16px;
  background: rgba(251, 246, 234, .7);
  box-shadow: 0 0 0 1px rgba(31, 58, 99, .16);
  color: var(--ink-blue);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none;
  overflow: hidden;
  transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .2s ease;
}
.lo-triad--tabs .lo-triad-tab:hover { background: var(--paper); box-shadow: 0 0 0 1px var(--ink-blue); }
.lo-triad--tabs .lo-triad-tab[aria-selected="true"] {
  background: var(--ink-blue);
  color: var(--paper);
  box-shadow: 0 14px 28px -16px rgba(31, 58, 99, .8);
}
.lo-triad-tab-icon { display: grid; place-items: center; width: clamp(28px, 3vw, 36px); flex: none; }
.lo-triad-tab-icon .lo-triad-icon { width: 100%; height: auto; }
/* The meter becomes a thin bar across the foot of the lit button. */
.lo-triad--tabs .lo-triad-meter {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  height: 3px;
  border-radius: 0;
  background: transparent;
}
.lo-triad--tabs .lo-triad-tab[aria-selected="true"] .lo-triad-meter { background: rgba(251, 246, 234, .2); }
.lo-triad--tabs .lo-triad-meter-fill { background: var(--highlighter); }
.lo-triad--tabs .lo-triad-tab:not([aria-selected="true"]) .lo-triad-meter-fill { transform: scaleX(0); }
@media (max-width: 599px) {
  /* Icon over label on a phone, and everything a notch tighter, so three
     buttons and the pause control fit across a 360px screen. */
  .lo-triad.lo-triad--tabs.is-live .lo-triad-controls { gap: 6px; }
  .lo-triad--tabs .lo-triad-tabs { gap: 6px; }
  .lo-triad--tabs .lo-triad-tab {
    flex-direction: column;
    gap: 5px;
    padding: 10px 4px 12px;
    border-radius: 12px;
    font-size: .9375rem;
    min-width: 0;
  }
  .lo-triad--tabs .lo-triad-pause { width: 32px; height: 32px; }
}

/* The card: question left, drawing right, from 1100px. Below that the
   question takes the card's full width, drawing underneath — on a tablet in
   portrait (2026-09-24) the side-by-side card held the question to half the
   width at phone size, 24px, with room to spare above and below. */
.lo-triad.lo-triad--tabs .lo-triad-question { font-size: clamp(1.5rem, 2.8vw, 2.375rem); }
@media (min-width: 600px) and (max-width: 1099px) {
  .lo-triad.lo-triad--tabs .lo-triad-question { font-size: clamp(1.875rem, 4.4vw, 2.75rem); }
  .lo-triad.lo-triad--tabs .lo-triad-art { max-width: 600px; }
  /* display: block beats the triangle layout's own ≥900px landscape card,
     which would otherwise catch 900-1099px. */
  .lo-triad.lo-triad--tabs .lo-triad-card { display: block; padding: clamp(28px, 4.5vw, 48px); }
  .lo-triad.lo-triad--tabs .lo-triad-art { margin: 22px 0 0; }
  /* The one-line desktop headline size is small here; a tablet in portrait
     has the height for it to wrap to two lines at a size that leads. */
  section.lo-triad.lo-triad--tabs h2.lo-triad-title { font-size: clamp(2rem, 5vw, 3rem); }
}
@media (min-width: 1100px) {
  .lo-triad.lo-triad--tabs .lo-triad-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "question art"
      "link     art";
    grid-template-rows: auto 1fr;
    column-gap: clamp(24px, 3.5vw, 48px);
    align-items: start;
    padding: clamp(24px, 3vw, 40px);
  }
  .lo-triad.lo-triad--tabs .lo-triad-question { grid-area: question; align-self: center; }
  .lo-triad.lo-triad--tabs .lo-triad-link { grid-area: link; align-self: end; }
  .lo-triad.lo-triad--tabs .lo-triad-art { grid-area: art; align-self: center; margin: 0; }
  .lo-triad.lo-triad--tabs .lo-triad-card::before { left: clamp(24px, 3vw, 40px); }
}

/* Slide: in from the left, out to the right. */
.lo-triad.lo-triad--tabs.is-live .lo-triad-card {
  transform: translateX(-56px);
  transition: opacity .4s ease, transform .6s var(--triad-ease), visibility 0s linear .6s;
}
.lo-triad.lo-triad--tabs.is-live .lo-triad-card.is-leaving {
  transform: translateX(56px);
}
.lo-triad.lo-triad--tabs.is-live .lo-triad-card.is-active {
  transform: none;
  transition: opacity .5s ease .15s, transform .7s var(--triad-ease) .15s, visibility 0s;
}
/* Tabs layout headline ("Heroes held back by today's school system.",
   2026-09-24): one line on desktop, so the buttons and the whole card still
   fit a ~600px laptop viewport under it. Sized from the measure rather than
   the display scale — the full display size ran to two lines and cost the
   card its bottom 100px. */
.lo-triad.lo-triad--tabs h2.lo-triad-title {
  max-width: none;
  font-size: clamp(1.875rem, 3.3vw, 2.75rem);
}
.lo-triad.lo-triad--tabs .lo-eyebrow { margin-bottom: 12px; }
/* Land with the eyebrow ~24px under the top edge: the section's own top
   padding is clamp(80px, 10vw, 128px), so give back all but 24px of it. */
.lo-triad.lo-triad--tabs { scroll-margin-top: calc(24px - clamp(80px, 10vw, 128px)); }
/* The seven-student drawing (2026-09-24) is wider than the photo it replaced
   (1.59:1 against 1.23:1), so at the photo's phone width of 62vw the faces
   came out small. Stacked under the sub-line nothing competes with it, so on
   a phone it takes the full measure, up to 440px. Side by side (860px and
   up) the measured --lo-subfig-w cap in .lo-hero-subrow still governs. */
@media (max-width: 859px) {
  .lo-hero--showcase .lo-hero-subrow { --lo-subfig-w: min(100%, 520px); }
}
/* Tablets in portrait (2026-09-24). From 860px the base rules put the
   drawing BESIDE the sub-line, and there it gets 24vw — about 210-265px
   across 860-1100px, which on a Samsung tablet in portrait (876-924px) read
   as awkwardly small next to a headline that size. So the showcase hero
   keeps the stacked layout up to 1100px, with the drawing up to 520px under
   the sub-line. Stacking is always safe for the sub-line's fit arithmetic:
   it gets the whole band back, which is what its font-size floor assumes. */
/* Written as .lo-hero.lo-hero--showcase so it outranks the ≥860px
   --lo-subfig-w rule further down the file, which has the same weight as a
   single-class selector and would otherwise win on source order. */
@media (min-width: 860px) and (max-width: 1099px) {
  .lo-hero.lo-hero--showcase .lo-hero-subrow {
    --lo-subfig-w: min(100%, 520px);
    display: block;
  }
  .lo-hero.lo-hero--showcase .lo-hero-subfigure { margin: clamp(18px, 2.4vw, 28px) 0 0; }
}
/* Side by side, the wider drawing gets a little more room than the photo
   had: up to 310px instead of 280px. Re-running the arithmetic in the
   .lo-hero-subrow note: 968 - 310 - 44 = 614px of text box against the
   581px the longest sub-line needs at 38px, about 5.5% of slack (was 11%).
   Measured: at 1440px and 1600px the sub-line still sets on three lines at
   the full 38px. Go no wider without re-measuring; fit-lines would catch a
   miss, but by shrinking the type after the font swaps in. */
@media (min-width: 860px) {
  .lo-hero--showcase .lo-hero-subrow { --lo-subfig-w: clamp(150px, 24vw, 310px); }
}
/* The hero's watch button, stepped down (2026-09-24): an outlined pill at
   about two-thirds the size, so it says where the page is heading without
   pushing the film before the reader has met the questions. The solid,
   full-size ask stays at the bottom of the page, in the video band. */
.lo-hero--showcase .lo-hero-btn {
  gap: 9px;
  padding: 5px 16px 5px 5px;
  background: rgba(251, 246, 234, .7);
  color: var(--ink-blue);
  box-shadow: 0 0 0 1.5px var(--ink-blue);
  font-size: 12px;
}
.lo-hero--showcase .lo-hero-btn-play { width: 26px; height: 26px; background: var(--ink-blue); }
.lo-hero--showcase .lo-hero-btn-play svg { width: 10px; height: 10px; fill: var(--paper); }
.lo-hero--showcase .lo-hero-btn:hover,
.lo-hero--showcase .lo-hero-btn:focus-visible {
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--ink-blue), 0 10px 22px -14px rgba(31, 58, 99, .7);
}
.lo-hero--showcase .lo-hero-btn:hover .lo-hero-btn-play { background: var(--terracotta); }