/* Practice Materials lesson styling.
   Tokens match the rest of the site: navy #031f42, teal #00e2c5,
   muted #5b6d84, border #e6efff, lightbg #f4f9ff. */

:root {
  --lsn-navy: #031f42;
  --lsn-teal: #00e2c5;
  --lsn-muted: #5b6d84;
  --lsn-border: #e6efff;
  --lsn-lightbg: #f4f9ff;
  --lsn-green: #0f9d58;
  --lsn-red: #d93025;
  --lsn-amber: #b8860b;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   The band itself is .brand-hero, defined in css/styles.css so the homepage
   (which does not load this file) shares the one definition. Everything here is
   only the typography that sits on top of it. */
.lesson-hero-inner { position: relative; z-index: 1; }

.lesson-hero-kicker {
  margin: 1.75rem 0 .6rem;
  color: var(--lsn-teal);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.lesson-hero-title {
  font-size: clamp(1.85rem, 1.1rem + 2.4vw, 2.6rem);
  line-height: 1.15; font-weight: 700; color: #fff;
  margin: 0 0 .9rem; letter-spacing: -.015em;
}
.lesson-hero-title-lg { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.1rem); }
.lesson-hero-lede {
  color: rgba(255, 255, 255, .72);
  font-size: 1.075rem; line-height: 1.65; max-width: 46rem; margin: 0;
}
.lesson-hero-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.lesson-hero-chip {
  display: inline-block;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
  font-size: .82rem; font-weight: 600;
  padding: .35rem .85rem; border-radius: 9999px;
  backdrop-filter: blur(2px);
}

.lesson-main { color: var(--lsn-navy); }
.lesson-main h2 { font-size: 1.625rem; line-height: 1.3; font-weight: 700; color: var(--lsn-navy); margin: 0 0 1rem; }
.lesson-main h3 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .6rem; }
.lesson-main p { line-height: 1.75; margin-bottom: 1rem; color: #1c3350; }
.lesson-main ul, .lesson-main ol { margin: 0 0 1rem 1.25rem; line-height: 1.75; }
.lesson-main li { margin-bottom: .4rem; }
.lesson-main strong { color: var(--lsn-navy); font-weight: 600; }
.lesson-main a { color: #0b6bcb; text-decoration: underline; text-underline-offset: 2px; }

/* Answer-first block. Deliberately the first thing in the DOM after the hero:
   it is what assistants quote and what a skimming student reads. */
.lesson-quick-answer {
  border-left: 4px solid var(--lsn-teal);
  background: #f0fdfa;
  border-radius: 10px;
  padding: 1.15rem 1.35rem;
  margin-bottom: 3.5rem;
}
.lesson-quick-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #0d9488; margin-bottom: .35rem;
}
.lesson-quick-answer p { margin: 0; font-size: 1.02rem; }

/* Section rhythm.
   Spacing is owned by the block, never by the heading's margin. The first build
   let h2 { margin-top } do the work, and because .lesson-block has no padding or
   border that margin collapsed straight out through the section: on the hub the
   course grid and the FAQ heading ended up touching at a measured 0px gap.
   An explicit margin on the block cannot collapse through anything. */
.lesson-block { margin: 3.5rem 0 0; }
.lesson-block:first-child { margin-top: 0; }
.lesson-quick-answer + .lesson-block { margin-top: 0; }

/* A short accent rule under each section heading. Nine prose sections in one
   column read as a single wall of text without a repeating visual marker for
   where one ends and the next begins. Panels that are already boxed (quiz,
   record) are excluded: they carry their own edge. */
.lesson-block:not(.lesson-quiz):not(.lesson-record) > h2::after {
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--lsn-teal); border-radius: 2px; margin-top: .8rem;
}
.lesson-block:not(.lesson-quiz):not(.lesson-record) > h2 { margin-bottom: 1.35rem; }

/* Section eyebrow, matching the pill the rest of the site puts above every H2. */
.lesson-eyebrow {
  display: inline-block; background: #fef9c3; color: #a16207;
  font-weight: 600; font-size: .875rem; padding: .375rem 1rem;
  border-radius: 9999px; margin-bottom: 1rem;
}

/* Callouts */
.lesson-callout {
  border-radius: 10px; padding: 1.15rem 1.35rem; margin: 2.25rem 0;
  border: 1px solid var(--lsn-border); background: var(--lsn-lightbg);
}
.lesson-block + .lesson-callout { margin-top: 3.5rem; }
.lesson-callout-title { font-weight: 700; margin-bottom: .4rem; }
.lesson-callout p:last-child { margin-bottom: 0; }
.lesson-callout-tip { background: #f0fdfa; border-color: #99f6e4; }
.lesson-callout-warning { background: #fffbeb; border-color: #fde68a; }
.lesson-callout-warning .lesson-callout-title { color: var(--lsn-amber); }
.lesson-callout-example { background: #f8fafc; border-color: #cbd5e1; }
.lesson-callout-ets { background: #eff6ff; border-color: #bfdbfe; }
.lesson-callout-ets .lesson-callout-title { color: #1d4ed8; }

/* Tables */
.lesson-table-wrap { overflow-x: auto; margin: 1.25rem 0; }
.lesson-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 460px; }
.lesson-table th {
  background: var(--lsn-navy); color: #fff; text-align: left;
  padding: .7rem .85rem; font-weight: 600;
}
.lesson-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--lsn-border); vertical-align: top; }
.lesson-table tbody tr:nth-child(even) { background: var(--lsn-lightbg); }
.lesson-caption { font-size: .82rem; color: var(--lsn-muted); margin-top: -.5rem; }

/* Steps */
.lesson-steps { list-style: none; margin-left: 0; padding: 0; }
.lesson-step { display: flex; gap: .85rem; margin-bottom: 1.1rem; }
.lesson-step-n {
  flex: 0 0 1.85rem; height: 1.85rem; border-radius: 50%;
  background: var(--lsn-teal); color: var(--lsn-navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}
.lesson-step-title { font-weight: 700; margin-bottom: .25rem; }
.lesson-step p:last-child { margin-bottom: 0; }

/* Checklist */
.lesson-checklist { list-style: none; margin-left: 0; padding: 0; }
.lesson-checklist li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; }
.lesson-checklist li::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: 1rem; height: .55rem; border-left: 2.5px solid var(--lsn-teal);
  border-bottom: 2.5px solid var(--lsn-teal); transform: rotate(-45deg);
}

/* Practice questions. The reasoning is the product, so the feedback panel is
   given more visual weight than the options themselves. */
.lesson-quiz {
  background: var(--lsn-lightbg); border: 1px solid var(--lsn-border);
  border-radius: 20px; padding: 1.75rem; margin: 3.5rem 0 0;
}
.lesson-quiz h2 { margin-top: 0; }
.lesson-quiz-score { font-weight: 700; color: var(--lsn-navy); }
.lesson-q {
  background: #fff; border: 1px solid var(--lsn-border); border-radius: 10px;
  padding: 1.35rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.lesson-q:last-child { margin-bottom: 0; }
.lesson-q-passage { background: var(--lsn-lightbg); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; font-size: .95rem; }
.lesson-q-prompt { font-weight: 600; margin-bottom: .8rem; }
.lesson-opts { display: flex; flex-direction: column; gap: .5rem; }
.lesson-opt {
  display: flex; align-items: flex-start; gap: .7rem; width: 100%;
  text-align: left; padding: .85rem 1rem; border: 1.5px solid var(--lsn-border);
  border-radius: 10px; background: #fff; cursor: pointer;
  font: inherit; color: inherit; transition: border-color .15s, background .15s;
}
.lesson-opt:hover:not([disabled]) { border-color: var(--lsn-teal); background: #f0fdfa; }
.lesson-opt[disabled] { cursor: default; }
.lesson-opt-letter {
  flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--lsn-lightbg); color: var(--lsn-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}
.lesson-opt-correct { border-color: var(--lsn-green) !important; background: #e6f4ea !important; }
.lesson-opt-correct .lesson-opt-letter { background: var(--lsn-green); color: #fff; }
.lesson-opt-wrong { border-color: var(--lsn-red) !important; background: #fce8e6 !important; }
.lesson-opt-wrong .lesson-opt-letter { background: var(--lsn-red); color: #fff; }
.lesson-opt-muted { opacity: .55; }

.lesson-feedback { margin-top: .9rem; border-top: 1px solid var(--lsn-border); padding-top: .8rem; }
.lesson-why-wrong { color: #8a1c14; margin-bottom: .6rem; }
.lesson-why-correct { color: #0b5c33; margin-bottom: 0; }

/* Audio */
.lesson-audio-player { margin: 1rem 0; }
.lesson-audio-player audio, .lesson-model audio { width: 100%; }
.lesson-transcript {
  background: var(--lsn-lightbg); border-radius: 10px; padding: .85rem 1rem; margin-top: 1rem;
}
.lesson-transcript summary { cursor: pointer; font-weight: 600; }
.lesson-transcript p { margin: .6rem 0 0; }

/* Speaking recorder */
.lesson-record { background: #f8fafc; border: 1px solid var(--lsn-border); border-radius: 20px; padding: 1.75rem; margin: 3.5rem 0 0; }
.lesson-record h2 { margin-top: 0; }
.lesson-record-prompt { background: #fff; border-left: 4px solid var(--lsn-teal); border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 1rem; }
.lesson-record-prompt p { margin: 0; font-weight: 600; }
.lesson-record-narration { font-size: .93rem; color: var(--lsn-muted); margin-bottom: 1rem; }
.lesson-record-controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.lesson-btn-record, .lesson-btn-stop, .lesson-complete-btn, .lesson-paywall-cta, .lesson-cc-cta {
  border: none; border-radius: 10px; padding: .8rem 1.5rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block; transition: filter .15s, background .15s;
}
.lesson-btn-record:hover, .lesson-complete-btn:hover,
.lesson-paywall-cta:hover, .lesson-cc-cta:hover { filter: brightness(1.08); }
.lesson-btn-record { background: var(--lsn-navy); color: #fff; }
.lesson-btn-stop { background: var(--lsn-red); color: #fff; }
.lesson-record-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lsn-navy); }
.lesson-record-status { font-size: .9rem; color: var(--lsn-muted); margin-top: .6rem; min-height: 1.2rem; }
.lesson-model { margin-top: 1.1rem; border-top: 1px solid var(--lsn-border); padding-top: 1rem; }
.lesson-model-title { font-weight: 700; margin-bottom: .5rem; }
.lesson-model-why { margin-top: .8rem; font-size: .95rem; }

/* Paywall. The locked body stays in the DOM and is declared not-free in
   JSON-LD; only its height is clipped. Removing it would cost the ranking,
   and serving it to crawlers alone would be cloaking. */
.lesson-locked {
  max-height: 260px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  pointer-events: none; user-select: none;
}
/* The gate is the single most commercially important surface in the course, so
   it gets the brand's dark treatment rather than a pale card. A washed-out
   panel at the exact moment we ask for money reads as an error state; the navy
   reads as the product continuing behind a door. Same radial recipe as
   .brand-hero so it belongs to the site. */
.lesson-paywall {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 20px; margin: -1rem 0 0; padding: 2.5rem 2rem 2.25rem;
  text-align: center; color: #fff;
  background:
    radial-gradient(620px 300px at 82% -20%, rgba(0, 226, 197, .22), transparent 62%),
    radial-gradient(560px 280px at 10% 120%, rgba(0, 91, 255, .32), transparent 64%),
    linear-gradient(160deg, #04274f 0%, #031f42 48%, #021530 100%);
  box-shadow: 0 20px 44px -20px rgba(2, 16, 40, .55);
}
.lesson-paywall::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  opacity: .55;
}
.lesson-paywall-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%; margin-bottom: 1.1rem;
  background: rgba(0, 226, 197, .14); border: 1px solid rgba(0, 226, 197, .34);
  color: var(--lsn-teal);
}
.lesson-main .lesson-paywall-kicker, .lesson-paywall-kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lsn-teal); margin: 0 0 .55rem;
}
/* The title carries the hierarchy. At a flat 1.5rem it sat too close to the
   body copy for a panel this size, so the eye had nothing to land on first. */
.lesson-main .lesson-paywall-title, .lesson-paywall-title {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2rem);
  line-height: 1.18; letter-spacing: -.015em;
  font-weight: 700; color: #fff; margin: 0 0 .8rem;
  text-wrap: balance;
}
/* ONE measure and one centre line for every block of copy in the gate. The
   body used to sit in a 34rem box and the list in a 26rem box, both centred
   independently, so the list's left edge lined up with nothing above or below
   it and the panel read as three separate columns stacked.

   The `.lesson-main` half of each pair is load-bearing, not belt-and-braces:
   `.lesson-main ul` sets `margin-left: 1.25rem`, which outranks a bare class
   and is why the benefits list was sitting 20px off the panel's centre line
   instead of `margin: 0 auto` as its own rule asked for. */
.lesson-main .lesson-paywall-body, .lesson-paywall-body,
.lesson-main .lesson-paywall-list, .lesson-paywall-list,
.lesson-main .lesson-paywall-note, .lesson-paywall-note {
  max-width: 31rem; margin-left: auto; margin-right: auto;
}
.lesson-main .lesson-paywall-body, .lesson-paywall-body {
  color: rgba(255, 255, 255, .72); line-height: 1.65;
  margin-top: 0; margin-bottom: 1.6rem;
  /* Stops the centred paragraph ending in a short orphan line, which is what
     made the block look wedge-shaped. */
  text-wrap: balance;
}
/* A rule turns the benefits into a distinct group instead of three lines
   floating between two centred blocks. */
.lesson-paywall-list {
  list-style: none; text-align: left;
  margin-top: 0; margin-bottom: 1.75rem;
  padding: 1.4rem 0 0; border-top: 1px solid rgba(255, 255, 255, .13);
}
.lesson-main .lesson-paywall-list li, .lesson-paywall-list li {
  position: relative; padding-left: 1.9rem; margin-bottom: .7rem;
  color: rgba(255, 255, 255, .86); font-size: .95rem; line-height: 1.5;
  text-wrap: pretty;
}
.lesson-main .lesson-paywall-list li:last-child,
.lesson-paywall-list li:last-child { margin-bottom: 0; }
.lesson-paywall-list li::before {
  content: ""; position: absolute; left: .2rem; top: .44rem;
  width: .85rem; height: .45rem;
  border-left: 2.5px solid var(--lsn-teal); border-bottom: 2.5px solid var(--lsn-teal);
  transform: rotate(-45deg);
}
/* text-decoration has to be repeated here. The shared button rule above is a
   single class, so it loses to `.lesson-main a`, and that is what was drawing
   an underline through the CTA. */
.lesson-main a.lesson-paywall-cta, .lesson-paywall-cta {
  background: var(--lsn-teal); color: var(--lsn-navy);
  padding: .95rem 2.25rem; font-size: 1rem; text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 226, 197, .3);
}
.lesson-main .lesson-paywall-note, .lesson-paywall-note {
  font-size: .85rem; color: rgba(255, 255, 255, .55);
  margin-top: 1.15rem; margin-bottom: 0; line-height: 1.6;
}
.lesson-main .lesson-paywall-note a, .lesson-paywall-note a { color: var(--lsn-teal); }

/* The fade above the gate has to end in the gate's own colour, or the locked
   text appears to dissolve into white and then collide with a dark slab. */
.lesson-locked {
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

/* FAQs */
.lesson-faq {
  background: #fff; border: 1px solid var(--lsn-border); border-radius: 10px;
  padding: 1.1rem 1.35rem; margin-bottom: .75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.lesson-faq summary { cursor: pointer; font-weight: 600; }
.lesson-faq summary::marker { color: var(--lsn-teal); }
.lesson-faq p { margin: .75rem 0 0; color: #1c3350; }

/* Footer actions */
.lesson-footer-actions {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
}
.lesson-complete-btn { background: var(--lsn-navy); color: #fff; }
.lesson-complete-btn.lesson-done { background: var(--lsn-green); }

/* Lesson-to-lesson nav. Two plain inline links closed out all 45 lessons, which
   is the weakest possible end to a 4,000-word page: the next lesson is the one
   thing a student who finished should see. Cards, in reading order. */
.lesson-pager { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.75rem; }
@media (min-width: 720px) { .lesson-pager { grid-template-columns: 1fr 1fr; } }
.lesson-pager > :only-child { grid-column: 1 / -1; }
.lesson-pager-link {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--lsn-border); border-radius: 10px; background: #fff;
  padding: 1.15rem 1.35rem; text-decoration: none; color: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lesson-pager-link:hover {
  border-color: var(--lsn-teal); transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
}
.lesson-pager-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--lsn-muted);
}
.lesson-pager-title { font-weight: 600; color: var(--lsn-navy); line-height: 1.4; }
.lesson-pager-forward { text-align: right; }
.lesson-next-pulse { animation: lessonPulse 1.4s ease-in-out 3; }
@keyframes lessonPulse { 50% { opacity: .45; } }

.lesson-course-complete {
  margin-top: 2rem; background: var(--lsn-navy); color: #fff;
  border-radius: 20px; padding: 2rem;
}
.lesson-cc-title { font-size: 1.15rem; font-weight: 700; color: #fff; }
.lesson-course-complete p { color: rgba(255, 255, 255, .7); }
.lesson-cc-cta { background: var(--lsn-teal); color: var(--lsn-navy); margin-top: .5rem; }

/* Course list + detail.
   Two columns, not auto-fit. There are four courses and auto-fit resolved to
   three at desktop, which left Speaking alone on a second row. */
.course-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
.course-card {
  display: flex; flex-direction: column; border: 1px solid var(--lsn-border);
  border-radius: 14px; text-decoration: none; color: inherit;
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.course-card:hover {
  border-color: var(--lsn-teal); transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(3, 31, 66, .14);
}
.course-card-art {
  display: block; height: 172px; overflow: hidden;
  border-bottom: 1px solid var(--lsn-border);
}
.course-card-svg {
  display: block; width: 100%; height: 100%;
  transition: transform .35s ease;
}
.course-card:hover .course-card-svg { transform: scale(1.04); }
.course-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
/* h3/p now, so their UA margins have to be reset explicitly. */
.course-card-title { font-size: 1.25rem; font-weight: 700; margin: .75rem 0 .5rem; color: var(--lsn-navy); }
.course-card-desc { color: var(--lsn-muted); font-size: .93rem; line-height: 1.65; margin: 0; }
.course-card-soon { font-size: .8rem; color: var(--lsn-muted); margin: .5rem 0 0; }

/* Pills */
.course-pill {
  display: inline-block; align-self: flex-start;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: .3rem .7rem; border-radius: 9999px;
  background: var(--lsn-lightbg); color: var(--lsn-muted);
  border: 1px solid var(--lsn-border);
}
.course-pill-accent { background: rgba(0, 226, 197, .14); color: #0b7f70; border-color: rgba(0, 226, 197, .4); }

/* Progress. Pinned to the bottom of the card so every bar in a row sits on one
   baseline regardless of how long the description runs. */
.course-progress { margin-top: auto; padding-top: 1.35rem; }
.course-progress-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}
.course-progress-label { font-size: .85rem; font-weight: 600; color: var(--lsn-navy); }
.course-progress-pct { font-size: .85rem; font-weight: 700; color: #0b7f70; font-variant-numeric: tabular-nums; }
.course-progress-track {
  display: block; height: 7px; border-radius: 9999px;
  background: #e3ecf9; overflow: hidden;
}
.course-progress-fill {
  display: block; height: 100%; border-radius: 9999px; min-width: 0;
  background: linear-gradient(90deg, #00c2a8, var(--lsn-teal));
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.course-progress-complete .course-progress-fill { background: linear-gradient(90deg, #0f9d58, #3ddc84); }
.course-progress-complete .course-progress-pct { color: var(--lsn-green); }

/* ── Course header card ──────────────────────────────────────────────────── */
.course-head {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: 1.75rem; background: #fff;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(2, 16, 40, .28);
}
@media (min-width: 800px) { .course-head { grid-template-columns: 300px 1fr; } }
.course-head-art { display: block; overflow: hidden; min-height: 172px; }
.course-head-svg { display: block; width: 100%; height: 100%; }
.course-head-body { padding: 1.75rem; display: flex; flex-direction: column; }
.course-head-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .9rem; }
.course-head-title {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.15rem); line-height: 1.2;
  font-weight: 700; color: var(--lsn-navy); margin: 0 0 .6rem; letter-spacing: -.015em;
}
.course-head-desc { color: var(--lsn-muted); line-height: 1.65; margin: 0; }
.course-progress-lg { padding-top: 1.5rem; }
.course-progress-lg .course-progress-track { height: 9px; }

/* ── Lesson rows ─────────────────────────────────────────────────────────── */
.course-lessons { list-style: none; margin: 0; padding: 0; }
.course-lessons li { margin-bottom: .75rem; }
.course-lesson {
  display: flex; align-items: flex-start; gap: 1.1rem;
  border: 1px solid var(--lsn-border); border-radius: 12px;
  padding: 1.25rem 1.4rem; text-decoration: none; color: inherit; background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
a.course-lesson:hover {
  border-color: var(--lsn-teal); transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(3, 31, 66, .12);
}
.course-lesson-soon { opacity: .55; }

/* The marker slot holds all three states; CSS picks one so JS can move the
   highlight between rows without rebuilding any DOM. */
.course-lesson-mark {
  flex: 0 0 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--lsn-lightbg); color: var(--lsn-navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; position: relative;
}
.course-lesson-play { display: none; color: var(--lsn-teal); }
.course-lesson-n { display: block; }
.course-lesson-tick { display: none; }

.course-lesson-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Label and access badges share one line. Stacked, they pushed each row to
   169px and a twelve-lesson course became a 2,000px wall. */
.course-lesson-topline {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem;
}
.course-lesson-eyebrow {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--lsn-muted);
}
.course-lesson-title { font-weight: 700; font-size: 1.05rem; color: var(--lsn-navy); line-height: 1.35; margin: 0; }
.course-lesson-desc {
  color: var(--lsn-muted); font-size: .88rem; line-height: 1.5; margin: .3rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  line-clamp: 1; overflow: hidden;
}
@media (max-width: 640px) {
  .course-lesson-desc { -webkit-line-clamp: 2; line-clamp: 2; }
}
.course-lesson-badge, .course-lesson-tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .18rem .5rem; border-radius: 5px; background: var(--lsn-lightbg); color: var(--lsn-muted);
}
.course-lesson-badge-free { background: #e6f4ea; color: #0b6b3a; }
.course-lesson-tag { background: #f0fdfa; color: #0d9488; }

.course-lesson-go { flex: 0 0 auto; display: flex; align-items: center; align-self: center; }
.course-lesson-cta { display: none; }
.course-lesson-arrow { display: flex; color: #9db4d2; transition: transform .2s, color .2s; }
a.course-lesson:hover .course-lesson-arrow { color: var(--lsn-teal); transform: translateX(3px); }

/* ── The start / resume row ──────────────────────────────────────────────── */
/* The thicker edge is an INSET ring, not a wider border. border-width:2px here
   against 1px on every other row meant each row grew by 2px the moment the
   highlight moved onto it, nudging the whole list. An inset shadow paints the
   same 2px edge without touching the box model. */
.course-lesson-start {
  border-color: var(--lsn-teal);
  background: linear-gradient(180deg, #f4fffd 0%, #fff 60%);
  box-shadow: inset 0 0 0 1px var(--lsn-teal), 0 6px 18px rgba(0, 226, 197, .16);
}
.course-lesson-start .course-lesson-mark { background: rgba(0, 226, 197, .16); }
.course-lesson-start .course-lesson-play { display: flex; }
.course-lesson-start .course-lesson-n { display: none; }
.course-lesson-start .course-lesson-eyebrow { color: #0b7f70; }
.course-lesson-start .course-lesson-arrow { display: none; }
.course-lesson-start .course-lesson-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--lsn-teal); color: var(--lsn-navy);
  font-weight: 700; font-size: .92rem;
  padding: .7rem 1.3rem; border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(0, 226, 197, .45);
  animation: lessonStartPulse 2.4s ease-in-out infinite;
}
.course-lesson-start:hover .course-lesson-cta { animation-play-state: paused; }
.course-lesson-start .course-lesson-cta svg { transition: transform .2s; }
.course-lesson-start:hover .course-lesson-cta svg { transform: translateX(3px); }
@keyframes lessonStartPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 226, 197, .45); }
  50%      { box-shadow: 0 4px 14px rgba(0, 226, 197, .45), 0 0 0 9px rgba(0, 226, 197, .12); }
}

/* Completed rows: the number becomes a tick. */
.course-lesson-done .course-lesson-mark { background: #e6f4ea; }
.course-lesson-done .course-lesson-n { display: none; }
.course-lesson-done .course-lesson-play { display: none; }
.course-lesson-done .course-lesson-tick { display: block; width: 1rem; height: .55rem; }
.course-lesson-done .course-lesson-tick::before {
  content: ""; display: block; width: 1rem; height: .55rem;
  border-left: 2.5px solid var(--lsn-green); border-bottom: 2.5px solid var(--lsn-green);
  transform: rotate(-45deg) translate(1px, -2px);
}
.course-lesson-done .course-lesson-title { color: #4a6180; }

/* ── Save-your-progress prompt ────────────────────────────────────────────
   Shown when a signed-out student marks a lesson complete. The completion is
   ALREADY saved to localStorage before this appears: the modal is an offer, not
   a toll gate, so dismissing it never costs them the thing they just did.
   Rate limited to once a day in js/lesson.js, because a prompt on every single
   completion is how a helpful nudge turns into the reason someone leaves. */
.lsn-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(2, 16, 40, .58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s ease;
}
.lsn-modal.is-open { opacity: 1; }
.lsn-modal-card {
  position: relative; width: 100%; max-width: 27rem;
  background: #fff; border-radius: 20px; padding: 2rem 1.85rem 1.75rem;
  text-align: center; box-shadow: 0 30px 70px -20px rgba(2, 16, 40, .5);
  transform: translateY(10px) scale(.98); transition: transform .22s ease;
}
.lsn-modal.is-open .lsn-modal-card { transform: none; }
.lsn-modal-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%; margin-bottom: 1rem;
  background: rgba(0, 226, 197, .16); color: #0b7f70;
}
.lsn-modal-title { font-size: 1.3rem; font-weight: 700; color: var(--lsn-navy); margin: 0 0 .6rem; }
.lsn-modal-body { color: var(--lsn-muted); line-height: 1.65; margin: 0 0 1.4rem; font-size: .95rem; }
.lsn-modal-actions { display: flex; flex-direction: column; gap: .6rem; }
.lsn-modal-primary {
  display: block; background: var(--lsn-teal); color: var(--lsn-navy);
  font-weight: 700; padding: .85rem 1.5rem; border-radius: 10px;
  text-decoration: none; border: none; cursor: pointer; font-size: 1rem;
  font-family: inherit; box-shadow: 0 6px 18px rgba(0, 226, 197, .32);
}
.lsn-modal-secondary {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--lsn-muted); font-size: .9rem; padding: .5rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.lsn-modal-note { font-size: .85rem; color: var(--lsn-muted); margin: 1rem 0 0; }
.lsn-modal-note a { color: #0b6bcb; }
.lsn-modal-close {
  position: absolute; top: .75rem; right: .85rem;
  background: none; border: none; cursor: pointer; font-size: 1.5rem;
  line-height: 1; color: #9db4d2; padding: .25rem .5rem;
}
.lsn-modal-close:hover { color: var(--lsn-navy); }
@media (prefers-reduced-motion: reduce) {
  .lsn-modal, .lsn-modal-card { transition: none; }
}

/* Hub prose. The hub sits outside .lesson-main (it is not a lesson), so it
   inherits none of the reading-column typography and needs its own. */
.hub-prose { max-width: 46rem; }
.hub-prose h3 {
  font-size: 1.15rem; font-weight: 700; color: var(--lsn-navy);
  margin: 2rem 0 .6rem;
}
.hub-prose h3:first-child { margin-top: 0; }
.hub-prose p { color: #1c3350; line-height: 1.75; margin: 0 0 1rem; }

/* Scoped to <main> ON PURPOSE, and it must stay that way.
   This file loads AFTER the Tailwind build, so a bare `.hidden { display:none
   !important }` here outranks Tailwind's `.lg\:flex` inside its 1024px media
   query. The site header's desktop nav is literally `class="hidden lg:flex"`,
   so the unscoped version hid the entire navigation on all 50 lesson pages, at
   every viewport width, while the markup stayed byte-identical to the homepage
   and every markup-level check passed. The runtime only ever toggles .hidden on
   lesson content, which is all inside <main>. */
main .hidden { display: none !important; }

@media (max-width: 640px) {
  .lesson-main h2 { font-size: 1.35rem; }
  .lesson-block { margin-top: 2.75rem; }
  .lesson-quick-answer { margin-bottom: 2.75rem; }
  .lesson-quiz, .lesson-record { padding: 1.25rem 1rem; }
  .course-card-body, .course-lesson { padding: 1.25rem; }
  .course-head-body { padding: 1.35rem; }
  .lesson-hero-lede { font-size: 1rem; }

  /* The Start pill cannot share a row with the title at this width, so the row
     becomes two rows and the pill goes full width under the text. */
  .course-lesson { flex-wrap: wrap; gap: .9rem; }
  .course-lesson-go { flex: 1 0 100%; align-self: stretch; }
  .course-lesson-start .course-lesson-cta { width: 100%; justify-content: center; }
  .course-lesson-arrow { display: none; }
  .course-lesson-mark { flex-basis: 2.25rem; height: 2.25rem; }
}

/* The Start button pulses to draw the eye. That is exactly the kind of motion
   people disable, and the button is perfectly legible without it. */
@media (prefers-reduced-motion: reduce) {
  .course-lesson-start .course-lesson-cta { animation: none; }
  .lesson-next-pulse { animation: none; }
  .course-progress-fill { transition: none; }
  .course-card, .course-lesson, .course-card-svg { transition: none; }
  .course-card:hover, a.course-lesson:hover { transform: none; }
}

/* Layout shells.
   These exist because assets/tailwind.css is a PURGED production build: any
   arbitrary utility not already used elsewhere on the site (max-w-[880px],
   to-teal/40, pb-14) is simply absent from it and renders as nothing. That is
   what broke the first build of these pages, where the lesson column had no
   max-width and spanned the full viewport.
   Defining the few widths we need here makes them immune to the purge. */
.lesson-shell { max-width: 880px; margin-left: auto; margin-right: auto; }
.course-shell { max-width: 980px; margin-left: auto; margin-right: auto; }
.hub-shell    { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* ─────────────────────── playable drills ───────────────────────
   Complete the Words and Build a Sentence, the two tasks students can
   actually attempt inside a lesson. They share the quiz card's shell so a
   lesson does not look like three different products stacked. */
.lesson-drill {
  background: var(--lsn-lightbg); border: 1px solid var(--lsn-border);
  border-radius: 20px; padding: 1.75rem; margin: 3.5rem 0 0;
}
.lesson-drill > h2 { margin-top: 0; }
.lesson-drill-actions {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem;
}
.lesson-drill-btn {
  border: none; border-radius: 10px; padding: .7rem 1.35rem; font: inherit;
  font-weight: 600; cursor: pointer; background: var(--lsn-navy); color: #fff;
  transition: filter .15s;
}
.lesson-drill-btn:hover { filter: brightness(1.15); }
.lesson-drill-btn[disabled] { opacity: .5; cursor: default; filter: none; }
.lesson-drill-btn-ghost {
  border: 1.5px solid var(--lsn-border); border-radius: 10px; padding: .7rem 1.2rem;
  font: inherit; font-weight: 600; cursor: pointer; background: #fff;
  color: var(--lsn-navy); transition: border-color .15s;
}
.lesson-drill-btn-ghost:hover { border-color: var(--lsn-teal); }
.lesson-drill-score { font-weight: 700; color: var(--lsn-navy); }
.lesson-drill-feedback {
  margin-top: 1rem; background: #fff; border: 1px solid var(--lsn-border);
  border-radius: 10px; padding: 1rem 1.15rem;
}
.lesson-drill-feedback p:last-child { margin-bottom: 0; }

/* Complete the Words */
.cw-passage {
  background: #fff; border: 1px solid var(--lsn-border); border-radius: 10px;
  padding: 1.25rem 1.35rem;
}
.cw-passage p { line-height: 2.45; margin: 0; }
.cw-slot { white-space: nowrap; }
.cw-stem { font-weight: 600; }
.cw-in {
  font: inherit; font-weight: 600; color: var(--lsn-navy);
  border: none; border-bottom: 2px solid var(--lsn-navy);
  background: transparent; padding: 0 .15rem; min-width: 3.2rem;
  border-radius: 0; /* iOS rounds text inputs by default and it reads as a pill */
}
.cw-in:focus { outline: none; border-bottom-color: var(--lsn-teal); background: #f0fdfa; }
.cw-right { border-bottom-color: var(--lsn-green); color: var(--lsn-green); }
.cw-wrong { border-bottom-color: var(--lsn-red); color: var(--lsn-red); }
.cw-fix { color: var(--lsn-green); font-weight: 700; margin-left: .3rem; }

/* Build a Sentence */
.bs-item {
  background: #fff; border: 1px solid var(--lsn-border); border-radius: 10px;
  padding: 1.35rem; margin-bottom: 1rem;
}
.bs-item:last-child { margin-bottom: 0; }
.bs-context { font-size: .87rem; color: var(--lsn-muted); margin-bottom: .5rem; }
.bs-said {
  background: var(--lsn-lightbg); border-left: 3px solid var(--lsn-teal);
  border-radius: 8px; padding: .7rem .9rem; margin-bottom: .8rem;
}
.bs-who { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--lsn-muted); margin-bottom: .15rem; }
.bs-prompt { font-weight: 600; margin-bottom: .8rem; }
.bs-answer-row { display: flex; align-items: stretch; gap: .4rem; }
.bs-fixed { font-weight: 700; align-self: center; color: var(--lsn-navy); }
.bs-answer-row .bs-line { flex: 1 1 auto; min-width: 0; }
.bs-line {
  min-height: 3.25rem; border: 2px dashed var(--lsn-border); border-radius: 10px;
  padding: .6rem; display: flex; flex-wrap: wrap; gap: .45rem; align-content: flex-start;
  background: var(--lsn-lightbg);
}
.bs-line:empty::before {
  content: 'Tap the words below in the right order'; color: var(--lsn-muted);
  font-size: .9rem; align-self: center; padding: 0 .4rem;
}
.bs-tray { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; min-height: 1px; }
.bs-tile {
  font: inherit; font-size: .95rem; cursor: pointer; background: #fff;
  border: 1.5px solid var(--lsn-border); border-radius: 8px;
  padding: .5rem .8rem; color: var(--lsn-navy); transition: border-color .15s, background .15s;
}
.bs-tile:hover { border-color: var(--lsn-teal); background: #f0fdfa; }
.bs-line .bs-tile { background: var(--lsn-navy); color: #fff; border-color: var(--lsn-navy); }
.bs-line .bs-tile:hover { background: #06305f; border-color: #06305f; }
.bs-line-right { border-color: var(--lsn-green); border-style: solid; background: #e6f4ea; }
.bs-line-wrong { border-color: var(--lsn-red); border-style: solid; background: #fce8e6; }

@media (max-width: 640px) {
  .lesson-drill { padding: 1.25rem; border-radius: 16px; }
  .cw-passage { padding: 1rem; }
  .cw-passage p { line-height: 2.6; }
  .lesson-drill-actions > .lesson-drill-btn,
  .lesson-drill-actions > .lesson-drill-btn-ghost { flex: 1 1 auto; }
}

/* Completion dialog additions. Reuses .lsn-modal from the signup prompt so the
   two dialogs are visibly the same object rather than two designs. */
.lsn-done-emoji { display: block; font-size: 2.25rem; line-height: 1; margin-bottom: .7rem; }
.lsn-next-card {
  display: block; text-align: left; background: var(--lsn-lightbg);
  border: 1px solid var(--lsn-border); border-radius: 10px;
  padding: .8rem 1rem; margin: 0 0 1.2rem;
}
.lsn-next-label {
  display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--lsn-muted); margin-bottom: .15rem;
}
.lsn-next-title { display: block; font-weight: 600; color: var(--lsn-navy); line-height: 1.4; }
.lsn-modal-secondary-link {
  display: inline-block; font-weight: 600; color: var(--lsn-muted);
  text-decoration: none; padding: .55rem .5rem;
}
.lsn-modal-secondary-link:hover { color: var(--lsn-navy); text-decoration: underline; }
.lesson-complete-emoji { font-size: 1.05em; }