/* Дополнения школы к стилям основного сайта (site.css скопирован оттуда без изменений). Макет: docs/mockups/school-site.src.html */
.wrap{max-width:1280px;margin-inline:auto}
.logo small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;color:var(--gold);margin-top:3px}
/* навигация держит левую колонку шапки, чтобы логотип стоял по центру; на телефоне ссылки скрыты */
.site-header .nav{display:flex;gap:22px;justify-self:start}
.site-header .nav a{display:none;text-decoration:none}

.sec-head{display:grid;gap:10px;margin-bottom:28px;max-width:40em}
.acts{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.ulink{background:none;border:0;padding:0;cursor:pointer;color:inherit}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;border-top:1px solid var(--line);padding-top:16px}
.facts div{display:grid;gap:2px;min-width:0}
.facts b{font-weight:400;font-size:24px;line-height:1.1;overflow-wrap:anywhere}

.courses{display:grid;gap:10px;margin-top:4px}
.course{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;text-decoration:none}
.course .t{font-size:20px;font-weight:400}
.course .m{grid-column:1/-1;font-size:15px;color:var(--ink-2)}
.course-head{display:grid;gap:12px;margin-bottom:32px;max-width:44em}
.band{border-top:1px solid var(--line)}

.prog{display:grid;gap:28px}
.prog .step{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:16px;align-content:start}
.prog .step>.label{color:var(--gold)}
.lessons{display:grid;gap:6px;font-size:16px;line-height:1.4}
/* сквозная нумерация уроков внутри курса */
.prog{counter-reset:lesson}
.lessons li{display:grid;grid-template-columns:44px 1fr;gap:6px;counter-increment:lesson}
.lessons li::before{content:counter(lesson,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--ink-2);padding-top:3px}
.prog .res{font-size:15px;line-height:1.45;color:var(--ink-2)}
.prog-extra{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px;border-top:1px solid var(--line);padding-top:16px;font-size:16px}
.prog-extra span::before{content:"+ ";color:var(--gold)}

.pkg ul{display:grid;gap:8px;font-size:16px;line-height:1.4}
.pkg li{display:grid;grid-template-columns:22px 1fr}
.pkg li::before{content:"—";color:var(--gold)}
.pkg .price{font-size:26px;font-weight:400;border-top:1px solid var(--line);padding-top:12px}
.pkg .price small{display:block;font-size:14px;color:var(--ink-2);font-weight:300}
.packages{margin-top:36px}

.stats{display:flex;flex-wrap:wrap;gap:16px 36px}
.stats b{display:block;font-size:34px;font-weight:300;line-height:1}

.faqs{max-width:820px}
.faq summary{font-size:19px}
.faq p{margin-top:10px;font-size:16px;color:var(--ink-2);max-width:40em}

.lead-aside{display:grid;gap:16px;align-content:start}
.lead-aside ol{display:grid;gap:10px;font-size:16px}
.lead-aside li{display:grid;grid-template-columns:28px 1fr}
.lead-aside .n{font-family:var(--mono);font-size:12px;color:var(--gold);padding-top:4px}
.field textarea{min-height:72px;resize:vertical}
fieldset.field{border:0;padding:0;margin:0}
fieldset.field legend{margin-bottom:8px}
.demo-note .label{color:var(--gold);display:block}

@media (min-width:900px){
  .site-header .nav a{display:inline}
  .facts{grid-template-columns:repeat(4,1fr)}
  .prog{grid-template-columns:repeat(4,1fr);gap:32px}
  .packages{grid-template-columns:repeat(2,1fr)}
  .lead-sec{grid-template-columns:1fr 1.2fr}
}

/* страница оплаты взноса /p/<токен>/ */
.pay-page{max-width:640px;margin-inline:auto;padding-block:48px 72px;display:grid;gap:20px}
.pay-box{background:var(--panel);padding:24px;display:grid;gap:12px}
.pay-sum{font-size:40px;font-weight:300;line-height:1}
.pay-plan{display:grid;gap:0;border-top:1px solid var(--line)}
.pay-plan li{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:baseline;padding-block:12px;border-bottom:1px solid var(--line);font-size:17px}
.pay-plan li.current{font-weight:400}
.pay-plan .ok{color:var(--ink)}
.pay-plan .late{color:#9B2C2C}