/* ==================================================
  SCHOOLS (schools.html, John 2026-10-17: D99 + D100)
  Composes the shared hero, card and status pills; this file holds only the pieces unique to the page: the eyebrow and
  display-face title, the course cards by grade (school-blue top edge), the 75/75 stat strip beside the Master Concept
  List, what students do as icon-tile rows, the price card in the action tint (face lift, John's mockup 2026-10-29).
================================================== */
.schools-eyebrow{
  margin:0 0 var(--space-3);
  color:var(--hero-text-sub);
  font-size:var(--text-xs);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.schools-hero .schools-hero__title{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
}

/* The ghost button over the photo: dark glass, white text. */
.schools-hero .schools-hero__ghost{
  --action-text:var(--hero-text);
  --action-line:var(--hero-text-sub);
  background:rgba(0,0,0,.35);
}

.schools-lead{
  max-width:60ch;
  color:var(--text-200);
}

/* Courses by grade: Movers · Middle & junior high · High school (cards in a row, stacked on phones) */
.schools-courses{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:var(--space-5);
  margin:var(--space-6) 0 0;
  padding:0;
  list-style:none;
}

.schools-course{
  border-top:4px solid var(--program-school);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}

.schools-course h3{ margin:0; }

.schools-course p{ margin:0; }

.schools-course .schools-course__standards{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
  margin-top:auto;
  color:var(--text-200);
  font-size:var(--text-sm);
  font-weight:700;
}

/* Built on state standards (52 · 23 · 75 / 75 as one strip) beside the Master Concept List card */
.schools-standards{
  display:grid;
  gap:var(--space-6);
  align-items:start;
}

.schools-standards h2{ margin-top:0; }

.schools-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin:var(--space-4) 0 0;
  padding:var(--space-4) 0;
  list-style:none;
  background:var(--bg);
  border:1px solid var(--line-muted);
  border-radius:var(--radius-card);
}

.schools-stats li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-1);
  padding:0 var(--space-2);
  text-align:center;
}

.schools-stats li + li{ border-left:1px solid var(--line-muted); }

.schools-stats__number{
  color:var(--text);
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 5vw, 2.6rem);
  font-weight:800;
  line-height:1;
}

.schools-stats__all .schools-stats__number{ color:var(--primary); }

.schools-stats__label{
  color:var(--text-200);
  font-size:.85rem;
  line-height:1.3;
}

.schools-concepts h2{ margin:0 0 var(--space-3); font-size:1.15rem; }
.schools-concepts > p{ margin:0 0 var(--space-3); color:var(--text-200); font-size:.9rem; line-height:1.5; }
.schools-concepts .schools-shot{ margin-top:var(--space-4); }

/* What students do: one surface, a row per item with a blue icon tile */
.schools-rows{
  margin:var(--space-4) 0 0;
  padding:0;
  list-style:none;
  background:var(--bg);
  border:1px solid var(--line-muted);
  border-radius:var(--radius-card);
  overflow:hidden;
}

.schools-row{
  display:grid;
  grid-template-columns:2.25rem minmax(0, 1fr);
  gap:var(--space-3);
  padding:var(--space-4);
}

.schools-row + .schools-row{ border-top:1px solid var(--line-muted); }

.schools-row strong{ display:block; }

.schools-row strong + span{ display:block; margin-top:2px; color:var(--text-200); font-size:.875rem; line-height:1.45; }

.schools-row__tile{
  display:grid;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:var(--accent-soft-10);
  color:var(--accent-200);
}

.schools-row__tile svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

@media (min-width: 900px){
  .schools-standards{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--space-7); }
  .schools-rows{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .schools-row:nth-child(2){ border-top:0; }
  .schools-row:nth-child(even){ border-left:1px solid var(--line-muted); }
}

.schools-shot{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line-muted);
  border-radius:var(--radius-xl);
}

.schools-shot img{
  display:block;
  width:100%;
  height:auto;
}

.schools-checks{
  margin:0;
  padding:0;
  list-style:none;
}

.schools-checks li{
  position:relative;
  padding-left:1.75rem;
  font-weight:600;
}

.schools-checks li + li{ margin-top:var(--space-2); }

.schools-checks li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--status-success);
  font-weight:800;
}

.schools-video video{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-xl);
}

/* The one public price line (D100), in the action tint; the tiers stay in the quote. */
.schools-price{
  display:grid;
  gap:var(--space-4);
  padding:var(--space-5);
  border:1px solid var(--action-line);
  border-radius:var(--radius-card);
  background:var(--action-soft);
}

.schools-price__line{
  margin:0;
  color:var(--action-deep);
  font-size:1.25rem;
  line-height:1.3;
}

.schools-price__line span{
  display:block;
  margin-top:var(--space-1);
  color:var(--text-200);
  font-size:.9rem;
  font-weight:500;
}

.schools-price .btn-primary{ margin:0; justify-self:start; }

@media (min-width: 900px){
  .schools-price{ grid-template-columns:minmax(0, 1fr) auto; align-items:center; }
}