/* SEEK2LRN — Become an Educator (seek2lrn-become-an-educator.html, built from
 * pages-src/become-an-educator.html), in the landing's editorial design (the
 * "Editorial light" style in design-system/DESIGN_SYSTEM.md): a white page,
 * Roboto Slab 300 display type, Inter body type, flat blue and ink, square
 * corners, 2px ink rules between sections. Scoped under .s2b-page.
 *
 * The landing's "teach anything" headline, then its four teacher videos side
 * by side, as tall as the screen below the nav and as wide as the sections
 * below, then the copy and the register buttons. */
.s2b-page {
  --s2e-blue: #1558D6;
  --s2e-ink: #16203A;
  --s2e-muted: #475569;
  --s2e-line: #E3E8F3;
  --s2e-display: 'Roboto Slab', Georgia, serif;
  --s2e-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  display: block;
  padding-top: 58px; /* the fixed nav */
  background: #fff;
  color: var(--s2e-ink);
  font-family: var(--s2e-body);
  font-weight: 300;
}
.s2b-page *, .s2b-page *::before, .s2b-page *::after { box-sizing: border-box; }
.s2b-page h1, .s2b-page h2, .s2b-page h3, .s2b-page p, .s2b-page ul, .s2b-page ol { margin: 0; padding: 0; }
.s2b-page em { font-style: normal; color: var(--s2e-blue); }

/* ── the headline, as the landing sets "teach anything" ── */
.s2b-hero { padding: 9vh 4vw 6vh; text-align: center; }
.s2b-hero h1 {
  font-family: var(--s2e-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 9.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.s2b-hero p { max-width: 620px; margin: 1.4rem auto 0; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.65; color: var(--s2e-muted); }

/* ── the four teacher videos: the screen's height below the nav, and together
   exactly as wide as the sections below them (their 1180px box, which is what
   the ink rules between them span) ── */
.s2b-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(0, 1fr); /* the row is the wall's height, not the videos' own 960px */
  gap: 12px; /* the landing bars' gap */
  max-width: 1180px;
  margin: 0 auto;
  height: calc(100vh - 58px);
  min-height: 420px;
}
.s2b-wall video { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; background: var(--s2e-line); }

/* ── the copy: sections between 2px ink rules ── */
.s2b-page section { max-width: 1180px; margin: 0 auto; padding: 5rem 4vw; }
.s2b-page section + section { border-top: 2px solid var(--s2e-ink); }
.s2b-page h2 {
  font-family: var(--s2e-display);
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.s2b-page h3 { font-family: var(--s2e-display); font-weight: 300; font-size: 1.5rem; line-height: 1.2; }
.s2b-page p { font-size: 1.02rem; line-height: 1.65; color: var(--s2e-muted); }

.s2b-intro { text-align: center; }
.s2b-perks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.5rem; margin-top: 1.6rem !important; font-size: 1.1rem; font-weight: 400; }
.s2b-perks li::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 0.7rem; background: var(--s2e-blue); vertical-align: 0.1em; }

/* the register button: square, blue, ink on hover, as the landing's rows' links */
.s2b-btn {
  display: inline-block;
  margin-top: 2.2rem;
  padding: 0.95rem 1.8rem;
  background: var(--s2e-blue);
  border: 1px solid var(--s2e-blue);
  color: #fff;
  font-family: var(--s2e-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.s2b-btn::after { content: ' \2192'; }
.s2b-btn:hover { background: var(--s2e-ink); border-color: var(--s2e-ink); }
.s2b-btn:focus-visible { outline: 2px solid var(--s2e-blue); outline-offset: 3px; }

/* four steps, in a row between hairlines */
.s2b-steps ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.s2b-steps li { padding: 0 1.5rem; }
.s2b-steps li + li { border-left: 1px solid var(--s2e-line); }
.s2b-steps li:first-child { padding-left: 0; }
.s2b-n { display: block; margin-bottom: 1rem; font-family: var(--s2e-display); font-weight: 300; font-size: 2.6rem; line-height: 1; color: var(--s2e-blue); }
.s2b-steps p { margin-top: 0.6rem; }

.s2b-feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 2.5rem; }
.s2b-feature-row > div { border-top: 1px solid var(--s2e-ink); padding-top: 1.2rem; }
.s2b-feature-row p { margin-top: 0.6rem; }

.s2b-cta { text-align: center; }
.s2b-cta p { margin-top: 1rem; }

/* the FAQ: plain disclosure rows between hairlines */
.s2b-faq h2 { margin-bottom: 2rem; }
.s2b-faq details { border-top: 1px solid var(--s2e-line); }
.s2b-faq details:last-of-type { border-bottom: 2px solid var(--s2e-ink); }
.s2b-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0;
  font-size: 1.08rem; font-weight: 400; color: var(--s2e-ink);
  cursor: pointer; list-style: none;
}
.s2b-faq summary::-webkit-details-marker { display: none; }
.s2b-faq summary::after { content: '+'; flex: none; font-family: var(--s2e-display); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--s2e-blue); }
.s2b-faq details[open] summary::after { content: '\2212'; }
.s2b-faq summary:focus-visible { outline: 2px solid var(--s2e-blue); outline-offset: 2px; }
.s2b-faq details p { padding: 0 0 1.3rem; max-width: 820px; }

@media (max-width: 900px) {
  .s2b-steps ol { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .s2b-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
  .s2b-feature-row { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 760px) {
  .s2b-page { padding-top: 52px; }
  /* two by two, each still tall, so the four still fill the screen */
  .s2b-wall { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); height: calc(100vh - 52px); gap: 8px; margin: 0 8px; } /* sides = the gap */
  .s2b-page section { padding: 3.5rem 16px; }
  .s2b-steps ol { grid-template-columns: 1fr; }
  .s2b-steps li { padding: 0; border-left: 0 !important; }
}

/* phones: full-width 48px buttons, 48px FAQ rows */
@media (max-width: 760px) {
  .s2b-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; }
  .s2b-faq summary { min-height: 48px; }
}