:root {
  --ink: #263241;
  --muted: #657181;
  --line: #dce3ec;
  --paper: #f8fafc;
  --white: #ffffff;
  --teal: #178f86;
  --gold: #c9871d;
  --coral: #b4473f;
  --focus: #125e59;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* {
  box-sizing: border-box;
}

/* Safety: any element with the [hidden] attribute must stay hidden,
   even if a more specific rule (e.g. .text-button { display: inline-flex })
   would otherwise win over the UA default. This is the load-bearing rule
   that keeps pre-submit "Review solution" buttons off the page. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.95)),
    repeating-linear-gradient(90deg, rgba(38, 50, 65, 0.04) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(38, 50, 65, 0.04) 0 1px, transparent 1px 72px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(220, 227, 236, 0.85);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.brand strong,
.brand span span {
  display: block;
  line-height: 1.05;
}

.brand span span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.topnav a,
.icon-button {
  border-radius: 8px;
  padding: 10px 12px;
}

.topnav a:hover,
.icon-button:hover {
  background: #eef3f6;
  color: var(--ink);
}

/* ----- Top-nav dropdown menus (Courses, Placement) ----- */

.topnav-dropdown {
  position: relative;
  display: inline-flex;
}

.topnav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.topnav-trigger:hover,
.topnav-trigger[aria-expanded="true"] {
  background: #eef3f6;
  color: var(--ink);
}

.topnav-chevron {
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
  transition: transform 120ms ease;
}

.topnav-trigger[aria-expanded="true"] .topnav-chevron {
  transform: rotate(180deg);
}

.topnav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--line, #dce3ec);
  border-radius: 10px;
  background: white;
  box-shadow: 0 20px 40px rgba(38, 50, 65, 0.12);
}

.topnav-menu[hidden] {
  display: none !important;
}

.topnav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--ink, #14202b);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.topnav-menu a:hover,
.topnav-menu a:focus-visible {
  background: #eef3f6;
  outline: none;
}

@media (max-width: 680px) {
  .topnav-menu {
    right: 0;
    left: auto;
    min-width: 180px;
  }
}

/* ----- Mobile hamburger + drawer (≤680px) ----- */

/* The button itself is always in the DOM; we just hide it above the
   breakpoint. Keeping it in the DOM means the IIFE in index.html can
   attach handlers once at load. */
.topnav-hamburger {
  display: none;
}

.topnav-hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: var(--ink, #14202b);
  border-radius: 2px;
  transition: transform 120ms ease, opacity 120ms ease;
}

@media (max-width: 680px) {
  .topnav-hamburger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line, #dce3ec);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    padding: 0;
  }

  /* Animate the bars into an "X" when the drawer is open. */
  .topnav-hamburger[aria-expanded="true"] .topnav-hamburger-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .topnav-hamburger[aria-expanded="true"] .topnav-hamburger-bar:nth-child(2) {
    opacity: 0;
  }
  .topnav-hamburger[aria-expanded="true"] .topnav-hamburger-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* The nav itself becomes a drop-down drawer below the topbar. Hidden by
     default; visible when .topnav-open is added by the IIFE. */
  .topnav {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    z-index: 15;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 18px 18px;
    background: white;
    border-bottom: 1px solid var(--line, #dce3ec);
    box-shadow: 0 12px 30px rgba(38, 50, 65, 0.08);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
  }

  .topnav.topnav-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* In the drawer, items stack full-width with consistent padding. */
  .topnav a,
  .topnav-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
  }

  .topnav-dropdown {
    width: 100%;
  }

  .topnav-menu {
    position: static;
    width: 100%;
    margin-top: 4px;
    box-shadow: none;
    border-color: rgba(220, 227, 236, 0.6);
  }
}

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--white);
}

.icon-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

main {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 34px 0 64px;
  outline: none;
}

.home-hero,
.course-header,
.lesson-shell,
.activity-shell,
.brand-page,

.review-plan-page {
  margin-bottom: 30px;
}

.review-plan-dashboard .secondary-button {
  margin-top: 12px;
}

.review-plan-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.review-plan-grid {
  display: grid;
  gap: 18px;
}

.review-plan-course {
  border-top: 5px solid var(--course-color);
  padding: 20px;
}

.review-plan-course-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.review-plan-course-heading h2 {
  margin-bottom: 0;
}

.review-plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-plan-card {
  border-top: 5px solid var(--course-color);
  padding: 18px;
}

.review-plan-card h3 {
  margin: 10px 0;
}

.review-plan-card p {
  color: var(--muted);
  line-height: 1.5;
}

.review-plan-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.review-plan-topline span {
  border: 1px solid color-mix(in srgb, var(--course-color) 24%, var(--line));
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--course-color) 5%, white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.review-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.review-plan-empty {
  display: grid;
  min-height: 320px;
  place-items: center;
  padding: 34px;
  text-align: center;
}

.review-plan-empty p:not(.eyebrow) {
  max-width: 640px;
  color: var(--muted);
  line-height: 1.55;
}

.empty-state {
  margin-bottom: 30px;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 24px;
  align-items: stretch;
}

.hero-copy,
.learning-board,
.course-header,
.lesson-main,
.help-panel,
.quiet-panel,
.dashboard-panel,
.coach-card,
.course-status,
.problem-card,
.quiz-results,
.review-coach,
.review-plan-course,
.review-plan-card,
.review-plan-empty,
.brand-card {
  border: 1px solid rgba(220, 227, 236, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 45px rgba(38, 50, 65, 0.07);
}

.hero-copy {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 58px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 780px;
  margin-bottom: 18px;
  font-size: clamp(42px, 6vw, 68px);
  line-height: 0.96;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.15;
}

.lede {
  max-width: 740px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.55;
}

.hero-actions,
.stacked-actions,
.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Quiet inbound link from the home hero to the Algebra Readiness
   landing. Visually subordinate to the primary CTA row above so it
   doesn't compete — but reachable for a parent whose specific
   worry is Algebra I readiness vs general "math gaps." */
.hero-secondary-link {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.hero-secondary-link a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.primary-button,
.secondary-button,
.small-button,
.course-link,
.text-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 800;
}

.primary-button,
.small-button.dark {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
}

.secondary-button,
.small-button {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}

.primary-button,
.secondary-button {
  padding: 12px 18px;
}

.small-button,
.course-link {
  padding: 10px 14px;
}

.text-button {
  min-height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--focus);
}

.primary-button:hover,
.small-button.dark:hover {
  background: #121923;
}

.secondary-button:hover,
.small-button:hover,
.course-link:hover {
  background: #eef3f6;
}

.learning-board {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  overflow: hidden;
}

.board-header,
.board-problem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.board-header {
  border-bottom: 1px solid var(--line);
}

.board-header span,
.board-problem span {
  color: var(--muted);
  font-weight: 800;
}

.board-problem {
  margin-top: auto;
  border-top: 1px solid var(--line);
  font-size: 22px;
}

.board-problem strong {
  color: var(--teal);
  font-size: 32px;
}

#heroCanvas {
  width: 100%;
  height: auto;
  flex: 1;
}

.section-block {
  margin-top: 28px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.95fr 0.8fr;
  gap: 14px;
}

.dashboard-panel {
  padding: 20px;
}

.dashboard-primary {
  border-top: 5px solid var(--teal);
}

.dashboard-panel h2 {
  font-size: 24px;
}

.dashboard-panel p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.5;
}

.snapshot-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.snapshot-item,
.readiness-metric,
.course-card-readiness {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}

.snapshot-item {
  display: flex;
  min-height: 86px;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
}

.snapshot-item span,
.readiness-metric span,
.course-card-readiness small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.snapshot-item strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.coach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 14px;
}

.coach-card {
  border-top: 5px solid var(--course-color);
  padding: 20px;
}

.coach-card h2 {
  font-size: 24px;
}

.coach-card p:not(.eyebrow),
.review-coach p,
.tutor-focus p {
  color: var(--muted);
  line-height: 1.5;
}

.focus-list {
  display: grid;
  gap: 8px;
}

.focus-list a {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbfc;
}

.focus-list a:hover {
  border-color: var(--course-color);
}

.focus-list span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.review-list {
  display: grid;
  gap: 8px;
}

.review-item {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fffaf7;
}

.review-item:hover {
  border-color: var(--coral);
}

.review-item span,
.review-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.review-item strong {
  line-height: 1.25;
}

.review-more {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 800;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.section-heading.compact {
  margin-top: 24px;
}

.section-heading.compact h2 {
  margin-bottom: 0;
}

.progress-pill,
.section-heading span,
.unit-heading > span,
.course-title-row span,
.metric-row span,
.problem-topline span,
.practice-group-heading span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.course-card {
  overflow: hidden;
  border: 1px solid rgba(220, 227, 236, 0.95);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(38, 50, 65, 0.06);
}

.course-card::before {
  display: block;
  width: 100%;
  height: 5px;
  background: var(--course-color);
  content: "";
}

.course-visual {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 5;
  border-bottom: 1px solid var(--line);
}

.course-card-body {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  padding: 16px;
}

.course-title-row,
.metric-row,
.problem-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.course-title-row {
  align-items: start;
}

.metric-row {
  flex-wrap: wrap;
}

.course-card .metric-row {
  justify-content: space-between;
}

.course-card-readiness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--course-color) 28%, var(--line));
  background: color-mix(in srgb, var(--course-color) 5%, white);
}

.course-card-readiness span {
  color: var(--course-color);
  font-size: 13px;
  font-weight: 900;
}

.course-card p,
.lesson-card p,
.quiet-panel p,
.brand-card p {
  color: var(--muted);
  line-height: 1.5;
}

.course-link {
  margin-top: auto;
  border: 1px solid color-mix(in srgb, var(--course-color) 55%, var(--line));
  color: var(--course-color);
}

.roadmap-note {
  margin: 10px 0 16px;
  border-left: 3px solid color-mix(in srgb, var(--course-color) 55%, var(--line));
  padding-left: 10px;
  font-size: 13px;
  font-weight: 700;
}

.two-column {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
  align-items: stretch;
}

.quiet-panel {
  padding: 22px;
}

.quiet-panel p {
  margin-bottom: 0;
  font-size: 18px;
}

.back-link {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--focus);
  font-weight: 800;
}

.back-link::before {
  margin-right: 8px;
  content: "<";
}

.course-header {
  border-top: 5px solid var(--course-color);
  padding: clamp(24px, 4vw, 42px);
}

.course-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.course-overview {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.course-overview > div {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(220, 227, 236, 0.85);
  border-radius: 10px;
  padding: 12px 14px;
}

.course-overview p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}

.course-status {
  padding: 20px;
}

.course-status span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.course-status strong {
  display: block;
  margin: 10px 0;
  color: var(--course-color);
  font-size: 42px;
  line-height: 1;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef4;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--course-color);
}

.readiness-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.readiness-metric {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: color-mix(in srgb, var(--course-color) 4%, white);
}

.readiness-metric strong {
  margin: 0;
  color: var(--course-color);
  font-size: 20px;
}

/* Vertical-stack layout. The card lives in a course-page sidebar that
   can be as narrow as ~260px, where the previous two-column grid
   collapsed the text column to 0px and wrapped every word onto its own
   line. Stacking puts the title/body above and the action below — robust
   to any sidebar width and any button label length. */
.course-placement-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--course-color) 30%, var(--line));
  border-radius: 10px;
  padding: 16px;
  background: color-mix(in srgb, var(--course-color) 6%, white);
}

.course-placement-card > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.course-placement-card span {
  color: var(--course-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.course-placement-card strong {
  margin: 0;
  color: var(--course-color);
  font-size: 17px;
  line-height: 1.2;
}

.course-placement-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.course-placement-card .small-button {
  /* Stretch to the card's content width and allow the label to wrap
     so long course-specific copy ("Take College Algebra placement",
     "Retake Pre-Algebra placement") doesn't overflow narrow sidebars.
     The card's parent column on a course page can be ~260px wide, so
     align-self:flex-start + white-space:nowrap blew the button past
     the card's right edge for the longer labels. */
  align-self: stretch;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  word-break: break-word;
}

.course-recommendation {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.course-recommendation h2 {
  margin-bottom: 8px;
  font-size: 20px;
}

.course-recommendation p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

.lesson-list {
  display: grid;
  gap: 12px;
}

.unit-block + .unit-block {
  margin-top: 26px;
}

.unit-block > summary {
  list-style: none;
  cursor: pointer;
}

.unit-block > summary::-webkit-details-marker {
  display: none;
}

.unit-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.unit-heading h2,
.unit-heading p {
  margin-bottom: 0;
}

.unit-heading p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.unit-heading-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.unit-toggle {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.unit-toggle::before {
  content: "+";
  transform: translateY(-1px);
}

.unit-block[open] .unit-toggle::before {
  content: "-";
}

.unit-progress {
  height: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #e9eef4;
}

.unit-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--course-color);
}

.unit-coach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--course-color) 22%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--course-color) 5%, white);
}

.unit-coach div {
  display: grid;
  gap: 3px;
}

.unit-coach strong {
  font-size: 14px;
}

.unit-coach span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.lesson-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 18px;
}

.lesson-card.assessment-card {
  border-left: 5px solid var(--course-color);
  background: color-mix(in srgb, var(--course-color) 5%, white);
}

.status-pill {
  border-color: #d3dce7;
}

.status-pill.strong,
.status-pill.passed {
  border-color: rgba(23, 143, 134, 0.25);
  background: #edf8f5;
  color: var(--teal);
}

.status-pill.in-progress {
  border-color: rgba(201, 135, 29, 0.32);
  background: #fff8ea;
  color: #8a5d12;
}

.status-pill.needs-review {
  border-color: rgba(180, 71, 63, 0.3);
  background: #fff0ed;
  color: var(--coral);
}

.status-pill.not-started {
  background: #f7f9fb;
}

.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.lesson-main,
.help-panel {
  border-top: 5px solid var(--course-color);
  padding: clamp(22px, 4vw, 36px);
}

.lesson-main h1,
.activity-shell h1,
.brand-page h1 {
  font-size: clamp(34px, 5vw, 54px);
}

.goal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.goal-strip span {
  border: 1px solid color-mix(in srgb, var(--course-color) 36%, var(--line));
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--course-color) 8%, white);
  font-size: 13px;
  font-weight: 800;
}

.real-world-callout {
  margin: 22px 0;
  border: 1px solid color-mix(in srgb, var(--course-color) 24%, var(--line));
  border-left: 5px solid var(--course-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--course-color) 7%, white);
  padding: 16px 18px;
}

.real-world-callout p:last-child {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.concept-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr);
  gap: 18px;
  align-items: center;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #f8fbfc;
}

.concept-panel h2 {
  font-size: 22px;
}

.concept-panel p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.concept-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.worked-example {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.worked-example ol,
.steps {
  padding-left: 24px;
  color: var(--muted);
  line-height: 1.65;
}

.solution-panel {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #f8fbfc;
}

.solution-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 10px;
  color: var(--ink);
}

.solution-summary span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.solution-summary strong {
  color: var(--course-color);
  text-align: right;
}

.solution-panel .steps {
  margin: 0;
}

.answer-bar {
  border-radius: 8px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--course-color) 10%, white);
}

.help-panel {
  position: sticky;
  top: 88px;
}

.hint-list {
  display: grid;
  gap: 8px;
}

.hint-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
}

.hint-button:hover {
  border-color: var(--course-color);
}

.hint-button.is-active {
  border-color: var(--course-color);
  background: color-mix(in srgb, var(--course-color) 8%, white);
  color: var(--focus);
}

.hint-output {
  min-height: 76px;
  margin: 16px 0;
  border-left: 4px solid var(--course-color);
  padding: 12px 0 12px 14px;
  color: var(--muted);
  line-height: 1.5;
}

.tutor-focus {
  margin: 16px 0;
  border: 1px solid color-mix(in srgb, var(--course-color) 28%, var(--line));
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--course-color) 6%, white);
}

.tutor-focus h3 {
  font-size: 18px;
}

.tutor-focus span {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stacked-actions {
  flex-direction: column;
}

.activity-shell {
  --course-color: var(--teal);
}

.review-coach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  border-top: 5px solid var(--course-color);
  padding: 18px;
}

.review-coach h2 {
  font-size: 24px;
}

.problem-stack {
  display: grid;
  gap: 14px;
}

.assessment-submit-bar {
  /* Keep the finish action in the normal reading flow. A sticky submit bar
     obscured lower problem content on long quizzes and placement checks. */
  position: static;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--course-color) 28%, var(--line));
  border-top: 5px solid var(--course-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--course-color) 5%, white);
  box-shadow: 0 12px 30px rgba(38, 50, 65, 0.12);
  padding: 18px;
  backdrop-filter: blur(4px);
}

@media print {
  .assessment-submit-bar {
    position: static;
    box-shadow: none;
  }
}

.assessment-submit-bar span {
  color: var(--course-color);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.assessment-submit-bar p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.practice-group {
  display: grid;
  gap: 12px;
}

.practice-group.focus-group .practice-group-heading {
  border: 1px solid color-mix(in srgb, var(--course-color) 30%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--course-color) 6%, white);
}

.practice-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}

.practice-group-heading h2 {
  margin-bottom: 0;
  font-size: 24px;
}

.problem-card {
  border-top: 5px solid var(--course-color);
  padding: 22px;
}

.problem-card h2 {
  margin-top: 10px;
  font-size: 22px;
}

.problem-diagram {
  width: min(100%, 420px);
  margin: 16px auto 18px;
  border: 1px solid color-mix(in srgb, var(--course-color) 26%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--course-color) 5%, white);
  padding: 14px;
}

.problem-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.choice-grid label {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--white);
  font-weight: 700;
}

.choice-grid label:hover {
  border-color: var(--course-color);
}

.choice-grid input {
  width: 18px;
  height: 18px;
  accent-color: var(--course-color);
}

.typed-answer {
  display: flex;
  max-width: 480px;
  gap: 10px;
  margin: 16px 0;
}

.typed-answer input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
}

.typed-answer input:focus,
.hint-button:focus,
.primary-button:focus,
.secondary-button:focus,
.small-button:focus,
.text-button:focus,
.course-link:focus,
.review-item:focus,
.focus-list a:focus {
  outline: 3px solid rgba(23, 143, 134, 0.24);
  outline-offset: 2px;
}

.feedback {
  min-height: 34px;
  margin: 10px 0;
  color: var(--muted);
  font-weight: 800;
}

.feedback.correct {
  color: var(--teal);
}

.feedback.incorrect {
  color: var(--coral);
}

.quiz-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 22px;
}

.quiz-results h2 {
  color: var(--teal);
  font-size: 44px;
  margin-bottom: 4px;
}

.quiz-results p {
  margin-bottom: 0;
  color: var(--muted);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.review-topics {
  margin-top: 10px;
  color: var(--coral);
  font-weight: 800;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.brand-card {
  padding: 20px;
}

.brand-swatch {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--brand-accent) 0 50%, transparent 50%),
    var(--ink);
}


.review-plan-page {
  margin-bottom: 30px;
}

.review-plan-dashboard .secondary-button {
  margin-top: 12px;
}

.review-plan-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.review-plan-grid {
  display: grid;
  gap: 18px;
}

.review-plan-course {
  border-top: 5px solid var(--course-color);
  padding: 20px;
}

.review-plan-course-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.review-plan-course-heading h2 {
  margin-bottom: 0;
}

.review-plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-plan-card {
  border-top: 5px solid var(--course-color);
  padding: 18px;
}

.review-plan-card h3 {
  margin: 10px 0;
}

.review-plan-card p {
  color: var(--muted);
  line-height: 1.5;
}

.review-plan-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.review-plan-topline span {
  border: 1px solid color-mix(in srgb, var(--course-color) 24%, var(--line));
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--course-color) 5%, white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.review-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.review-plan-empty {
  display: grid;
  min-height: 320px;
  place-items: center;
  padding: 34px;
  text-align: center;
}

.review-plan-empty p:not(.eyebrow) {
  max-width: 640px;
  color: var(--muted);
  line-height: 1.55;
}

.empty-state {
  display: grid;
  min-height: 360px;
  place-items: center;
  text-align: center;
}


.activity-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.activity-nav-link {
  min-height: 86px;
  border: 1px solid color-mix(in srgb, var(--course-color) 24%, var(--line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(38, 50, 65, 0.05);
}

.activity-nav-link a,
.activity-nav-link.is-disabled {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px 16px;
}

.activity-nav-link a:hover {
  background: color-mix(in srgb, var(--course-color) 6%, white);
}

.activity-nav-link span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.activity-nav-link strong {
  color: var(--ink);
  line-height: 1.25;
}

.activity-nav-link.is-disabled {
  border-color: var(--line);
  background: #f7f9fb;
  opacity: 0.68;
}

.review-topics.success {
  color: var(--teal);
}

.geometry-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.68fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(220, 227, 236, 0.92);
  border-top: 5px solid #c9871d;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 45px rgba(38, 50, 65, 0.07);
}

.geometry-spotlight > div:first-child {
  padding: clamp(22px, 4vw, 34px);
}

.geometry-spotlight p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.geometry-mini-board {
  position: relative;
  min-height: 240px;
  border-left: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(38, 50, 65, 0.06) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(38, 50, 65, 0.06) 0 1px, transparent 1px 38px),
    #fffaf0;
}

.geo-line,
.geo-triangle,
.geo-circle,
.geo-angle,
.geo-label {
  position: absolute;
}

.geo-line {
  height: 4px;
  border-radius: 999px;
  background: var(--ink);
  transform-origin: left center;
}

.geo-line-one {
  width: 72%;
  left: 13%;
  top: 38%;
  transform: rotate(-8deg);
}

.geo-line-two {
  width: 60%;
  left: 20%;
  top: 65%;
  background: #178f86;
  transform: rotate(13deg);
}

.geo-triangle {
  left: 16%;
  top: 20%;
  width: 92px;
  height: 92px;
  border: 4px solid #c9871d;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgba(201, 135, 29, 0.1);
}

.geo-circle {
  right: 15%;
  top: 24%;
  width: 82px;
  height: 82px;
  border: 4px solid #b4473f;
  border-radius: 50%;
  background: rgba(180, 71, 63, 0.08);
}

.geo-angle {
  right: 26%;
  bottom: 28%;
  color: #1f5c7a;
  font-size: 28px;
  font-weight: 900;
}

.geo-label {
  left: 24px;
  right: 24px;
  bottom: 20px;
  border: 1px solid rgba(201, 135, 29, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  padding: 10px 12px;
  text-align: center;
}


.progress-tools-page {
  margin-bottom: 30px;
}

.progress-tools-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.local-save-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0;
  border: 1px solid rgba(23, 143, 134, 0.22);
  border-radius: 8px;
  background: #edf8f5;
  padding: 16px 18px;
}

.local-save-note strong {
  color: var(--focus);
  font-size: 18px;
}

.local-save-note p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.progress-definitions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.progress-definitions article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  padding: 14px 16px;
}

.progress-definitions strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.progress-definitions p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.progress-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.progress-tool-card {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid rgba(220, 227, 236, 0.92);
  border-top: 5px solid var(--teal);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 45px rgba(38, 50, 65, 0.07);
  padding: 22px;
}

.progress-tool-card h2 {
  font-size: 24px;
}

.progress-tool-card p {
  color: var(--muted);
  line-height: 1.5;
}

.progress-tool-card small {
  margin-top: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.progress-tool-card .primary-button,
.progress-tool-card .secondary-button,
.file-import-button {
  margin: 12px 0 16px;
}

.file-import-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 12px 18px;
}

.file-import-button:hover {
  background: #eef3f6;
}

.file-import-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.danger-card {
  border-top-color: var(--coral);
}

.danger-button {
  border-color: rgba(180, 71, 63, 0.3);
  color: var(--coral);
}

.progress-message {
  margin-top: 18px;
  border: 1px solid rgba(23, 143, 134, 0.25);
  border-radius: 8px;
  background: #edf8f5;
  color: var(--teal);
  font-weight: 800;
  padding: 16px 18px;
}

.progress-message.error {
  border-color: rgba(180, 71, 63, 0.3);
  background: #fff0ed;
  color: var(--coral);
}

@media (max-width: 1080px) {
  .course-grid,
  .brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero,
  .lesson-layout,
  .course-header-grid,
  .dashboard-grid,
  .geometry-spotlight,
  .review-plan-summary,
  .progress-tools-summary,
  .progress-definitions,
  .progress-tools-grid,
  .review-plan-cards,
  .coach-grid,
  .concept-panel,
  .snapshot-strip,
  .two-column {
    grid-template-columns: 1fr;
  }

  .help-panel {
    position: static;
  }

  .geometry-mini-board {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 680px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topnav {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .topnav a {
    padding: 8px 10px;
  }

  .home-hero,
  .course-grid,
  .brand-grid,
  .choice-grid,
  .lesson-card,
  .readiness-metrics,
  .activity-nav {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .unit-heading,
  .unit-coach,
  .course-placement-card,
  .review-plan-course-heading,
  .review-coach,
  .quiz-results,
  .assessment-submit-bar,
  .local-save-note,
  .typed-answer,
  .practice-group-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-copy,
  .learning-board {
    min-height: auto;
  }

  h1 {
    font-size: 40px;
    line-height: 1.02;
  }

  .lede {
    font-size: 17px;
  }

  .course-card-body {
    min-height: auto;
  }
}

.mini-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.summary-page {
  margin-bottom: 30px;
}

.summary-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr 0.9fr;
  gap: 14px;
  margin-top: 18px;
}

.summary-panel,
.summary-course-card {
  border: 1px solid rgba(220, 227, 236, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 45px rgba(38, 50, 65, 0.07);
}

.summary-panel {
  padding: 20px;
}

.summary-primary {
  border-top: 5px solid var(--teal);
}

.summary-panel p:not(.eyebrow),
.summary-course-card p {
  color: var(--muted);
  line-height: 1.5;
}

.summary-course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.summary-course-card {
  border-top: 5px solid var(--course-color);
  padding: 20px;
}

.summary-course-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.summary-course-heading h3 {
  margin-bottom: 0;
}

.summary-course-heading > span {
  border: 1px solid color-mix(in srgb, var(--course-color) 24%, var(--line));
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--course-color) 5%, white);
  color: var(--course-color);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.summary-metrics div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--course-color) 4%, white);
}

.summary-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.summary-metrics strong {
  color: var(--course-color);
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 1080px) {
  .summary-snapshot,
  .summary-grid,
  .summary-course-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .summary-course-heading,
  .mini-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----- Diagnostic switcher (cross-links to other placement checks) ----- */

.diagnostic-switcher {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.diagnostic-switcher .eyebrow {
  margin: 0 0 10px;
}

.diagnostic-switcher-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ----- Gap report (post-diagnostic placement result) ----- */

.diagnostic-results {
  display: block;
  padding: 0;
  margin-top: 32px;
}

.gap-report {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--border, #e3e6ea);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.gap-report-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border, #e3e6ea);
  padding-bottom: 24px;
}

.gap-report-header h2 {
  font-size: 32px;
  margin: 0;
  color: var(--ink, #14202b);
}

.gap-calibration {
  margin: 6px 0 0;
  color: var(--ink, #14202b);
  font-size: 15px;
  font-weight: 700;
}

.gap-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
}

.gap-score-fraction {
  font-size: 48px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
}

.gap-score-divider {
  color: var(--muted);
  font-weight: 400;
  margin: 0 2px;
}

.gap-score-label {
  color: var(--muted);
  font-size: 15px;
}

.gap-interpretation {
  background: var(--soft, #f5f7f8);
  border-left: 4px solid var(--teal);
  padding: 18px 22px;
  border-radius: 8px;
}

.gap-interpretation p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink, #14202b);
}

.gap-topic-counts {
  margin: 4px 0 0;
  color: var(--muted, #657181);
  font-size: 14px;
}

.gap-topic-counts strong {
  color: var(--ink, #14202b);
  font-weight: 800;
}

.gap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.gap-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gap-section-group h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gap-section-group:first-of-type h3 {
  margin-top: 4px;
}

.gap-topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gap-topic-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  color: var(--ink, #14202b);
}

.gap-marker {
  display: inline-block;
  width: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.gap-column:first-of-type .gap-marker {
  color: #1f8a4c;
}

.gap-column:last-of-type .gap-marker {
  color: #c44; /* muted red, not alarming */
}

.gap-empty {
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.gap-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gap-plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gap-plan-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 16px;
  background: var(--soft, #f5f7f8);
  border-radius: 8px;
}

.gap-week {
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.02em;
}

.gap-plan-lesson strong {
  display: block;
  font-size: 15px;
  color: var(--ink, #14202b);
}

.gap-plan-lesson em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* Remaining-gaps section. Sits between the 4-week plan and the action
   row when buildGapReport found missed lessons that didn't make it into
   the first 4 slots. Visually quieter than the plan (smaller list,
   neutral background, no week numbers) so the eye still lands on the
   plan first; this is a "also flagged" surface, not a competing CTA. */
.gap-remaining {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--soft, #f5f7f8);
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--teal) 30%, var(--line, #d7dee8));
}

.gap-remaining-copy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.gap-remaining-list {
  list-style: disc inside;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gap-remaining-list li {
  font-size: 13px;
  color: var(--ink, #14202b);
}

.gap-remaining-list li strong {
  font-weight: 700;
}

.gap-remaining-list li em {
  font-style: normal;
  color: var(--muted);
  margin-left: 6px;
}

.gap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

@media (max-width: 680px) {
  .gap-grid {
    grid-template-columns: 1fr;
  }
  .gap-report {
    padding: 22px;
  }
  .gap-report-header h2 {
    font-size: 26px;
  }
  .gap-score-fraction {
    font-size: 40px;
  }
  .gap-plan-list li {
    grid-template-columns: 70px 1fr;
  }
}

.placement-result-card h2 {
  color: var(--teal);
}

.placement-result-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.placement-result-footer {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* ===== 4-Week Plan view (#plan) =========================================
   The durable parent-facing roadmap. Visually distinct from the Review
   queue: cards are larger, each shows status, and the page carries the
   "this is the plan, the queue is the queue" framing in two places so
   the conceptual separation reads even on a quick glance. */

.plan-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.plan-page .section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.plan-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line, #d7dee8);
  border-radius: 10px;
  background: white;
  min-width: 110px;
}

.plan-meta-item span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-meta-item strong {
  font-size: 20px;
  color: var(--ink, #14202b);
}

/* Calibration pill — renders the gap report's calibration line at the
   top of the plan page so the emotional anchor matches what the
   placement-result page showed. Tone classes route to band-appropriate
   colour without re-deriving the band from the percentage. */
.plan-calibration {
  display: inline-block;
  margin: 0 0 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.plan-calibration-strong {
  background: color-mix(in srgb, #2e8b6e 14%, white);
  color: #1f6a52;
}

.plan-calibration-calm {
  background: color-mix(in srgb, var(--teal) 14%, white);
  color: var(--teal);
}

.plan-calibration-soft {
  background: color-mix(in srgb, #c9871d 14%, white);
  color: #8a5b14;
}

.plan-calibration-firm {
  background: color-mix(in srgb, #b4473f 12%, white);
  color: #8b3631;
}

/* Positive-count line — balances the deficit framing by surfacing
   "X of Y correct" + a "solid topics" count. Plain text so it doesn't
   compete with the calibration pill or the cards below; just an
   honest companion fact. */
.plan-positive {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink, #14202b);
  line-height: 1.5;
}

.plan-positive strong {
  color: #1f6a52;
}

.plan-framing {
  padding: 12px 16px;
  background: color-mix(in srgb, var(--teal) 6%, white);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #14202b);
}

/* Plan action row — Print / Download / Copy / Export. Sits directly
   under the meta row so the actions are discoverable on first view
   without competing with the week cards. Each action is intentionally
   secondary-button styled (not primary) so it doesn't pull the eye
   away from the "Start here" Week 1 CTA below. */
.plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line, #d7dee8);
  border-radius: 10px;
  background: white;
}

.plan-actions .text-button {
  margin-left: auto;
}

/* Hide actions during print — the printed page should be the plan
   itself, not the buttons that produced it. */
@media print {
  .plan-actions { display: none; }
}

.plan-framing a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.plan-weeks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 760px) {
  .plan-weeks { grid-template-columns: 1fr; }
}

.plan-week-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line, #d7dee8);
  border-radius: 12px;
  background: white;
  position: relative;
}

/* "Start here" treatment for the next-up week — a brighter teal border
   + soft tint so the parent's eye lands on this card first without
   having to infer that Week 1 = today's task. Three personas tested
   (worried-mid, confident-high, struggling-low) all surfaced this as
   missing in the v1 UI pass. */
.plan-week-card-current {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 4%, white);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--teal) 20%, transparent);
}

.plan-week-here-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--teal);
  color: white;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Status accent — a thin left border keyed to lesson progress so a
   parent skims down the page and immediately sees "what's done / in
   flight / not started." */
.plan-week-card.plan-status-passed {
  border-left: 4px solid #2e8b6e;
}
.plan-week-card.plan-status-progress,
.plan-week-card.plan-status-incomplete {
  border-left: 4px solid #c9871d;
}
.plan-week-card.plan-status-pending {
  border-left: 4px solid var(--muted, #6b7785);
}

.plan-week-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-week-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--teal);
  text-transform: uppercase;
}

.plan-week-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.plan-week-card.plan-status-passed .plan-week-status { color: #2e8b6e; }
.plan-week-card.plan-status-progress .plan-week-status,
.plan-week-card.plan-status-incomplete .plan-week-status { color: #c9871d; }

.plan-week-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-week-course {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.plan-week-title {
  margin: 0;
  font-size: 17px;
  color: var(--ink, #14202b);
}

.plan-week-reason {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.plan-week-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Remaining-gaps section on the plan page (separate from the gap-remaining
   on the placement-result page so the two surfaces can evolve their copy
   independently). */
.plan-remaining {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--soft, #f5f7f8);
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--teal) 30%, var(--line, #d7dee8));
}

.plan-remaining h2 {
  margin: 0;
  font-size: 16px;
  color: var(--ink, #14202b);
}

.plan-remaining-copy {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.plan-remaining-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-remaining-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}

.plan-remaining-list li strong {
  color: var(--ink, #14202b);
}

.plan-remaining-list li em {
  font-style: normal;
  color: var(--muted);
}

.plan-remaining-list li .text-button {
  margin-left: auto;
}

/* Collapsed-remainder section — for low-scoring profiles the deferred
   list can reach 15+ items. Native <details>/<summary> keeps everything
   reachable without JS, and the summary line tells the parent exactly
   how many are tucked away. */
.plan-remaining-more {
  margin-top: 6px;
}

.plan-remaining-more > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--teal);
  padding: 6px 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.plan-remaining-more > summary::-webkit-details-marker { display: none; }

.plan-remaining-more > summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform 0.15s ease;
}

.plan-remaining-more[open] > summary::before {
  transform: rotate(90deg);
}

.plan-remaining-more > summary:hover {
  text-decoration: underline;
}

.plan-remaining-more .plan-remaining-list {
  margin-top: 8px;
}

/* Explicit hide-when-closed. Setting display:flex on .plan-remaining-list
   above overrides the browser's default behavior for <details>, which
   hides non-summary children when [open] is false. Without this rule,
   all 15 deferred items render on initial view, defeating the entire
   point of the collapse for low-scorer profiles. */
.plan-remaining-more:not([open]) > .plan-remaining-list {
  display: none;
}

/* Cross-nav block — links back to the related views so the parent
   doesn't have to guess where Placement Report / Review / Progress /
   Summary live. The framing sentence above the links is product copy
   that should match the one in the framing aside. */
.plan-cross-nav {
  padding: 18px 20px;
  border: 1px solid var(--line, #d7dee8);
  border-radius: 12px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-cross-nav h2 {
  margin: 0;
  font-size: 16px;
  color: var(--ink, #14202b);
}

.plan-cross-nav p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.plan-cross-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Empty-state variant — fewer surfaces, but keep the framing aside so
   the parent still reads the distinction between plan and queue. */
.plan-page-empty {
  align-items: flex-start;
}

/* ===== Algebra Readiness landing page (#algebra-readiness) ===========
   Focused parent-facing entry point for paid traffic. Tone is calm,
   high-contrast, single-CTA. Visual hierarchy mirrors the home hero
   so a parent who clicks through to either surface feels they're in
   the same product. */

.readiness-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 880px;
  margin: 0 auto;
}

.readiness-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 0 12px;
  border-bottom: 1px solid var(--line, #d7dee8);
}

.readiness-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal);
}

.readiness-hero h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: var(--ink, #14202b);
  letter-spacing: -0.01em;
}

.readiness-subhead {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink, #14202b);
  max-width: 640px;
}

.readiness-cta-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.readiness-primary-cta {
  align-self: flex-start;
  font-size: 16px;
  padding: 14px 22px;
}

.readiness-cta-meta {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.readiness-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.readiness-block h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.25;
  color: var(--ink, #14202b);
}

.readiness-block p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink, #14202b);
}

/* How-it-works numbered steps. Big-number style so a parent can scan
   the four steps at a glance and trust there's a finite process. */
.readiness-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.readiness-steps > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}

.readiness-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  font-weight: 800;
  font-size: 18px;
}

.readiness-steps > li > div > strong {
  display: block;
  font-size: 17px;
  color: var(--ink, #14202b);
  margin-bottom: 4px;
}

.readiness-steps > li > div > p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

/* "What you get" — three lead cards in a row on desktop, stacked
   on mobile. The fourth row of "Also included" features sits below
   the cards as plain text so it doesn't compete for attention. */
.readiness-get-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 760px) {
  .readiness-get-grid { grid-template-columns: 1fr; }
}

.readiness-get-grid > article {
  padding: 18px;
  border: 1px solid var(--line, #d7dee8);
  border-radius: 12px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.readiness-get-grid h3 {
  margin: 0;
  font-size: 16px;
  color: var(--teal);
}

.readiness-get-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #14202b);
}

.readiness-also {
  font-size: 14px !important;
  color: var(--muted) !important;
  font-style: italic;
}

/* Who-it's-for + Trust lists share the same compact list pattern. */
.readiness-who-list,
.readiness-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.readiness-who-list > li,
.readiness-trust-list > li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink, #14202b);
}

.readiness-who-list > li::before,
.readiness-trust-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

.readiness-trust {
  padding: 22px;
  background: color-mix(in srgb, var(--teal) 6%, white);
  border-radius: 12px;
  border-left: 4px solid var(--teal);
}

.readiness-final-cta {
  align-items: flex-start;
  padding: 28px;
  background: var(--ink, #14202b);
  border-radius: 14px;
  color: white;
}

.readiness-final-cta h2,
.readiness-final-cta p {
  color: white;
}

.readiness-final-cta p {
  max-width: 640px;
}

.readiness-final-cta .readiness-primary-cta {
  background: white;
  color: var(--ink, #14202b);
  border-color: white;
}

.readiness-final-cta .readiness-primary-cta:hover {
  background: color-mix(in srgb, var(--teal) 12%, white);
}

.readiness-final-cta .readiness-cta-meta {
  color: color-mix(in srgb, white 70%, var(--teal));
}

/* ----- Print: only the gap report, formatted as a takeaway document ----- */

@media print {
  /* Hide everything except the gap report */
  body * {
    visibility: hidden;
  }
  .gap-report,
  .gap-report * {
    visibility: visible;
  }
  .gap-report {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
    padding: 0;
    box-shadow: none;
  }
  .gap-actions {
    display: none;
  }
  .gap-interpretation {
    background: transparent;
    border-left: 3px solid #000;
  }
  .gap-plan-list li {
    background: transparent;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
  .gap-grid,
  .gap-plan,
  .gap-report-header,
  .gap-interpretation {
    break-inside: avoid;
  }
  body {
    background: white;
    color: black;
    font-size: 11pt;
  }
}

/* ----- Gap report feedback rating ----- */

.gap-feedback {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line, #dce3ec);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.gap-feedback-prompt {
  margin: 0;
  color: var(--muted, #657181);
  font-size: 14px;
  font-weight: 600;
}

.gap-feedback-buttons {
  display: inline-flex;
  gap: 8px;
}

.gap-feedback-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line, #dce3ec);
  border-radius: 999px;
  background: white;
  color: var(--ink, #14202b);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.gap-feedback-button:hover {
  background: #eef3f6;
  border-color: var(--teal, #178f86);
}

.gap-feedback-ack {
  margin: 0;
  color: var(--teal, #178f86);
  font-size: 14px;
  font-weight: 700;
}

@media print {
  .gap-feedback {
    display: none;
  }
}

/* ----- Print: 4-Week Plan view as a parent-facing takeaway document
   Same pattern as the gap-report print block above — visibility-hide
   the world, then re-show the plan content. Specific sub-elements
   (back link, actions row, cross-nav links, "Open lesson" buttons in
   the deferred list) are hidden because they're navigation/utility
   that doesn't belong in a printed document. The "Start here" badge
   and status pills are kept because they carry the day's-task
   signal even on paper. */
@media print {
  body * {
    visibility: hidden;
  }
  .plan-page,
  .plan-page * {
    visibility: visible;
  }
  .plan-page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
    padding: 0;
    box-shadow: none;
  }
  .plan-page .back-link,
  .plan-actions,
  .plan-cross-nav,
  .plan-remaining-list .text-button,
  .plan-remaining-more > summary {
    display: none;
  }
  /* The Print button handler force-opens .plan-remaining-more before
     calling window.print(), so by the time these print styles apply
     the <details> is [open] and its children render normally. We just
     hide the <summary> chevron because it doesn't belong on paper. */
  .plan-week-card {
    break-inside: avoid;
    background: transparent;
    box-shadow: none;
  }
  .plan-week-card-current {
    background: transparent;
  }
  .plan-week-here-badge {
    background: transparent;
    color: black;
    border: 1px solid #555;
  }
  .plan-framing {
    background: transparent;
    border-left: 3px solid #000;
  }
  .plan-remaining {
    background: transparent;
    border: 1px solid #ccc;
  }
  body {
    background: white;
    color: black;
    font-size: 11pt;
  }
}

/* ----- Site footer ----- */

.site-footer {
  margin-top: 60px;
  border-top: 1px solid var(--line, #dce3ec);
  background: rgba(255, 255, 255, 0.7);
}

.site-footer-inner {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 28px 0 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  color: var(--muted, #657181);
  font-size: 13px;
}

.site-footer-brand {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.site-footer-brand strong {
  color: var(--ink, #14202b);
  font-weight: 800;
  font-size: 14px;
}

/* Footer tagline — replaced the previous "In development" badge.
   Plain prose treatment rather than a pill so it reads as a normal
   one-liner descriptor rather than a status indicator. Sits at the
   same baseline as the brand name for clean alignment. */
.site-footer-tagline {
  color: var(--muted, #657181);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.site-footer-copy {
  margin: 0;
}

/* Footer links row — Privacy, Terms, About. Required by Meta and
   Google for paid-ad approval; doubles as a transparency signal on
   the live site. */
.site-footer-links {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}

.site-footer-links a {
  color: var(--muted, #657181);
  text-decoration: none;
  font-weight: 600;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
  color: var(--ink, #14202b);
  text-decoration: underline;
}

/* Static-content pages: privacy, terms, about. Pure prose, generous
   line height, capped reading width. No interactive UI. */
.info-page {
  max-width: 720px;
  margin: 40px auto 56px;
  padding: 0 20px;
  color: var(--ink, #14202b);
}

.info-page h1 {
  font-size: 30px;
  line-height: 1.2;
  margin: 12px 0 18px;
}

.info-page h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 32px 0 10px;
  color: var(--ink, #14202b);
}

.info-page p,
.info-page ul {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft, #2c3a4a);
}

.info-page ul {
  padding-left: 22px;
}

.info-page li {
  margin-bottom: 6px;
}

.info-page .lede {
  font-size: 17px;
  color: var(--muted, #657181);
}

.info-page-meta {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule, #e5ebf1);
  font-size: 13px;
  color: var(--muted, #657181);
}

.info-page a {
  color: var(--accent, #178f86);
  text-decoration: underline;
}

@media (max-width: 680px) {
  .site-footer-inner {
    padding: 22px 0 26px;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Print: footer should not appear on the printed gap-report PDF. The
   print stylesheet earlier sets body * { visibility: hidden } except for
   .gap-report descendants, so the footer is already hidden — this rule is
   a defensive backup in case the visibility approach is ever loosened. */
@media print {
  .site-footer {
    display: none;
  }
}

/* ----- Diagnostic intro card (reassurance before the wall of questions) ----- */

/* Section divider between question groups in the placement diagnostic.
   Visually breaks the wall of 22–28 questions into recognizable topic
   groups (Number Sense, Proportional Reasoning, etc.) so students can
   pace themselves. */
.diagnostic-section-divider {
  margin: 28px 0 14px;
  padding: 8px 0 8px 14px;
  border-left: 4px solid var(--teal, #178f86);
  color: var(--teal, #178f86);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.problem-stack > .diagnostic-section-divider:first-child {
  margin-top: 8px;
}

.diagnostic-intro {
  margin: 18px 0 24px;
  padding: 18px 22px;
  background: rgba(23, 143, 134, 0.06);
  border-left: 4px solid var(--teal, #178f86);
  border-radius: 8px;
}

.diagnostic-intro-eyebrow {
  margin: 0 0 10px;
  color: var(--teal, #178f86);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.diagnostic-intro-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  color: var(--ink, #14202b);
  font-size: 14px;
  line-height: 1.5;
}

.diagnostic-intro-points li::before {
  content: "✓";
  display: inline-block;
  width: 18px;
  color: var(--teal, #178f86);
  font-weight: 700;
}

@media (max-width: 680px) {
  .diagnostic-intro-points {
    grid-template-columns: 1fr;
  }
}

/* ----- Home FAQ section (trust signals) ----- */

.home-faq h2 {
  font-size: 26px;
  margin-bottom: 18px;
}

.home-faq-list {
  margin: 0;
  display: grid;
  gap: 14px;
}

.home-faq-item {
  padding: 16px 20px;
  border: 1px solid var(--line, #dce3ec);
  border-radius: 10px;
  background: white;
}

.home-faq-item dt {
  font-weight: 800;
  color: var(--ink, #14202b);
  margin-bottom: 6px;
  font-size: 15px;
}

.home-faq-item dd {
  margin: 0;
  color: var(--muted, #657181);
  font-size: 14px;
  line-height: 1.55;
}

.home-faq-item dd a {
  color: var(--teal, #178f86);
  text-decoration: underline;
}

/* ----- Adult-learner landing (#placement-test) ----- */

.adult-landing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.adult-landing-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted, #657181);
  font-size: 14px;
  line-height: 1.55;
}

.adult-landing-list li {
  margin-bottom: 6px;
}

@media (max-width: 680px) {
  .adult-landing-grid {
    grid-template-columns: 1fr;
  }
}