/* =========================================================================
   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(64px, 9vw, 120px) 0;
  border-bottom: 1px solid var(--lo-rule);
}
section.lo-sec:last-of-type        { border-bottom: 0; }
section.lo-sec[data-bg="paper-2"]  { background: var(--paper-2); }
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;
}

.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: "Fraunces", serif;
  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;
}

h1.lo-display, h2.lo-display, h3.lo-display {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  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: "Fraunces", serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 96;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
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: "Fraunces", serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 36;
  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: "Fraunces", serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 60;
  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-variation-settings: "SOFT" 50, "opsz" 60;
}

/* Strikethrough on the demoted "the secret was unknown" beat — slightly
   thicker than the browser default so it reads as an intentional cross-
   out rather than a render artifact. 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: 1.5px;
  text-decoration-skip-ink: none;
}

/* 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: "Fraunces", serif;
  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-variation-settings: "SOFT" 50, "opsz" 36;
  color: var(--lo-color-2);
  max-width: 38ch;
}
p.lo-outro em { font-style: italic; }
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; }
.lo-accent { color: var(--lo-color-2); }

/* 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: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 26px);
  line-height: 1.3;
  letter-spacing: .005em;
  margin: 0;
  font-variation-settings: "SOFT" 50, "opsz" 24;
}
.lo-line-1 strong { font-weight: 500; }

/* 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: "Fraunces", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0;
  font-variation-settings: "SOFT" 50, "opsz" 96;
  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: 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: "Fraunces", serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 60;
  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 strong { font-weight: 600; }

/* ---- 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: "Fraunces", serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "opsz" 60;
  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 --------------------------------------- */
.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: "Fraunces", serif;
  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: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0 0 8px;
  line-height: 1.2;
}
.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: "Fraunces", serif;
  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);
}
.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: "Fraunces", serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "opsz" 60;
  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: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "opsz" 36, "WONK" 1;
  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 ------------------------------------- */
.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: "Fraunces", serif;
  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: "Fraunces", serif;
  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 --------------------------------------------- */
.lo-cta-section .lo-btn {
  display: inline-block;
  margin-top: 28px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  border-radius: 2px;
  text-decoration: none;
}

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