/* =========================================================================
   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);
}
/* 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);
}
/* 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--after-pair[data-bg="paper-2"] {
  box-shadow: inset 0 -1px 0 rgba(28, 28, 28, .14);
  padding-top: clamp(16px, 2.5vw, 32px);
}
/* 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); }
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: #D9E4D4;
  box-shadow: inset 0 1px 0 rgba(28, 28, 28, .12),
              inset 0 -1px 0 rgba(28, 28, 28, .12);
}

.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;
}
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 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; }

/* 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. */
.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: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2,7 Q14,2 28,6 T58,6 T96,5 T138,7 T182,5 T198,6' fill='none' stroke='%231F3A63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/></svg>");
  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;
}
.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
   indented sub-line (dashed) naming why today's system can't be fixed. */
.lo-cta-subhead .lo-cta-point,
.lo-cta-subhead .lo-cta-subpoint {
  display: block;
}
.lo-cta-subhead .lo-cta-subpoint {
  padding-left: 1.15em;              /* line the sub-line up past the bullet */
  margin-top: .12em;
}
.lo-cta-subhead .lo-cta-subpoint + .lo-cta-point {
  margin-top: .4em;                  /* gap before the second point */
}

/* 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;
}
.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;
}