/* Landing page and the schools page. Tokens come from ../app/tokens.css; layout and buttons from ../app/app.css. */
body { padding-inline: 0; }
.top, main, .foot { max-width: 960px; margin-inline: auto; padding-inline: var(--s4); box-sizing: border-box; }
body > header.top { position: static; max-width: 960px; min-height: 0; padding: var(--s3) var(--s4); gap: var(--s2) var(--s3); flex-wrap: wrap; }
body > header.top .right { margin-left: auto; }
.top .wordmark { height: 32px; width: auto; margin-right: 0; }   /* L15-2: app.css pulls the wordmark's right margin in (-1.2 x 44px) for the app header; here that slid the language list over the name on a phone */
.top .brand { flex: none; min-width: 0; }
.top .brandlink { display: inline-flex; align-items: center; min-height: var(--tap); }
.top .right { gap: var(--s3); }
.tl-lang { min-height: var(--tap); min-width: 5.5em; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 var(--s2); }
.btn { min-height: var(--tap); }
.btn.ghost { background: transparent; color: var(--ink); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s5) 0 var(--s4); align-items: center; }
@media (min-width: 800px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s6); padding-top: var(--s7); } }
.hero h1 { font-size: var(--fs-xl); line-height: var(--lh-t); margin: 0 0 var(--s3); }
@media (min-width: 800px) { .hero h1 { font-size: 2.25rem; } }
.hero .lead { font-size: var(--fs-md); color: var(--muted); margin: 0 0 var(--s3); }
.hero .price-line { margin: 0 0 var(--s4); }
.hero .trust { font-size: var(--fs-sm); font-weight: 600; margin: var(--s2) 0 0; }   /* L01-7: the strongest trust line sits under the button, not only in card 3 */
.hero .note, .hero .aud { font-size: var(--fs-sm); color: var(--muted); margin: var(--s3) 0 0; }
.clip { margin: 0; }
.clip img, .clip video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.clip figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s2); }
.feats, .price { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.price { margin-top: var(--s3); }
.feats .card h3 { margin: var(--s1) 0 var(--s2); font-size: var(--fs-md); }
.feats .card p, .price .card p { margin: 0; }
.price .card b { font-size: var(--fs-lg); display: block; margin-bottom: var(--s2); }
main > h2 { font-size: var(--fs-lg); margin: var(--s6) 0 var(--s3); }
ol.steps { counter-reset: s; display: grid; gap: var(--s2); margin: var(--s3) 0; padding: 0; list-style: none; }
ol.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s3) var(--s4) var(--s3) 52px; position: relative; }
ol.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: var(--s3); top: var(--s3); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); text-align: center; font-weight: var(--fw-b); line-height: 28px; font-size: var(--fs-sm); }
.closing { display: flex; justify-content: center; margin: var(--s6) 0 var(--s4); }
.statement { color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); font-size: 0; }
.foot nav a { font-size: var(--fs-sm); display: inline-flex; align-items: center; min-height: var(--tap); }
.foot p { margin: var(--s2) 0; }
a:focus-visible, .btn:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc { padding-bottom: var(--s5); }
.doc h1 { margin-top: var(--s5); }
.doc p, .doc li { line-height: 1.6; max-width: 720px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print {
  .top, .foot { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .doc h1 { font-size: 16pt; margin-top: 0; }
  .doc h2 { font-size: 12pt; margin: 10pt 0 4pt; }
  .doc p, .doc li { line-height: 1.35; margin: 0 0 4pt; }
  a { color: inherit; text-decoration: none; }
}
html:not([data-strings="ready"]) .foot, html:not([data-strings="ready"]) main { visibility: visible; }