/* ============================================
   Своя школа · components.css  (v10 — clean refactor)
   Header, footer, buttons, cards, forms, animations
   ============================================ */

/* a11y: skip-link. Ведёт к <main id="main">, добавленному на всех 11
   страницах + 404.html. Не влияет на burger/popup/lead-form/modal/
   animations — чисто аддитивный элемент перед <header>. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1000;
  background: var(--brand-dark);
  color: var(--brand-white);
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* a11y: visually-hidden — стандартный sr-only паттерн. Используется на
   schools.html/404.html, где в <main> только один <h1> и без этого заголовка
   структура документа прыгала бы сразу к <footer> h4 («Услуги»/«Информация»/
   «Связь») — пропуск уровней h1→h4. См. docs/TECHNICAL_DEBT.md §6.6 (тот же
   класс проблемы, тот же принятый в проекте способ починки — визуально
   скрытый заголовок). Не влияет на видимую вёрстку ни на одной странице. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════
   HEADER
   Палитра: брендовые токены Aschool (см. docs/DESIGN_SYSTEM.md §3),
   применены только внутри .site-header — .btn-primary/.btn-ghost
   вне шапки не затронуты (см. docs/ROADMAP.md, этап 5 — отдельный шаг).
══════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--brand-dark-rgb), .08);
  box-shadow: 0 1px 0 rgba(var(--brand-dark-rgb), .04), 0 12px 24px -16px rgba(var(--brand-dark-rgb), .12);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 20px;
}

/* Logo — путь к изображению не меняется (docs/BRAND_INTEGRATION_PLAN.md, вариант А),
   перекрашен только цвет текстовой подписи рядом со знаком */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  color: var(--brand-dark);
  flex-shrink: 0;
}
.logo-mark-img {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.logo:hover .logo-mark-img { transform: scale(1.08) rotate(-4deg); }
.logo:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: 8px; }

/* Nav */
.nav {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}
.nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-dark);
  padding: 8px 11px;
  border-radius: 8px;
  transition: background .2s ease, color .2s ease;
}
.nav a:hover         { background: rgba(var(--brand-blue-rgb), .08); color: var(--brand-blue); opacity: 1; }
.nav a:focus-visible  { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* Активный пункт — тёмный текст + лёгкая красная подложка + нижняя линия (inset,
   не влияет на высоту строки), без белого текста на сплошной заливке brand-red —
   см. анализ контраста в docs/TECHNICAL_DEBT.md */
.nav a.active         { background: rgba(var(--brand-red-rgb), .1); color: var(--brand-dark); box-shadow: inset 0 -2px 0 0 var(--brand-red); }
.nav a.active:hover   { background: rgba(var(--brand-red-rgb), .14); color: var(--brand-dark); opacity: 1; }

.header-cta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Кнопки внутри Header — переопределение только в рамках .header-cta,
   .btn-primary/.btn-ghost вне шапки не изменены */
.header-cta .btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 6px 16px rgba(var(--brand-red-rgb), .3);
}
.header-cta .btn-primary:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 24px rgba(var(--brand-orange-rgb), .35);
}
.header-cta .btn-ghost {
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}
.header-cta .btn-ghost:hover {
  background: var(--brand-dark);
  color: var(--brand-white);
}
.header-cta .btn:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* Burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(var(--brand-dark-rgb), .06);
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
}
.burger:hover         { background: rgba(var(--brand-dark-rgb), .12); }
.burger:active         { transform: scale(.94); }
.burger:focus-visible  { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--brand-dark);
  position: relative;
  transition: background .2s ease;
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-dark);
  transition: transform .2s ease, top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top:  6px; }
/* Открытое состояние (.burger-open уже переключается js/main.js) — иконка превращается в крест */
.burger-open              { background: rgba(var(--brand-dark-rgb), .12); }
.burger-open span         { background: transparent; }
.burger-open span::before { top: 0; transform: rotate(45deg); }
.burger-open span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 16px;
    gap: 6px;
    white-space: normal;
    border-bottom: 1px solid rgba(var(--brand-dark-rgb), .08);
    box-shadow: 0 16px 40px rgba(var(--brand-dark-rgb), .14);
    z-index: 99;
  }
  .nav a { font-size: 15px; padding: 12px 14px; }
  .nav.open { display: flex; }
  .burger { display: flex; }
  .header-cta .btn:not(.btn-primary) { display: none; }
}
@media (max-width: 520px) {
  .site-header .container { padding-left: 14px; padding-right: 14px; }
  .logo span:last-child   { font-size: 15px; }
  .header-cta { gap: 6px; }
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); opacity: 1; }
.btn:active { transform: translateY(0); }

/* Sprint: forms & CTA migration — was old yellow var(--accent)/var(--bg-dark).
   Safe to redefine the base rule directly: every scoped override across the
   site (.header-cta, .hero:not(.hero-sub), .section-why, #tarify, .lk-promo,
   .dark-section .form-block, .cookie-banner, all on index.html) already sets
   these exact brand-red/orange values — they become no-ops, not conflicts.
   Every other page that was still falling through to this base rule (hero-cta
   buttons on parents/schools/tarify/kursy, tarify.html cards, oplata/contacts/
   kursy/tour CTAs, login.html form + dashboard buttons) is fixed by this one
   change instead of needing a scoped rule per page. */
.btn-primary {
  background: var(--brand-red);
  color: var(--brand-white);
  border-color: var(--brand-red);
  box-shadow: 0 6px 16px rgba(var(--brand-red-rgb), .3);
}
.btn-primary:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 24px rgba(var(--brand-orange-rgb), .4);
}
.btn-dark {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.btn-dark:hover { background: var(--brand-red); border-color: var(--brand-red); }

/* Same reasoning as .btn-primary above — base rule redefined directly,
   old var(--bg-dark) purple → brand-dark. */
.btn-ghost {
  background: transparent;
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}
.btn-ghost:hover { background: var(--brand-dark); color: var(--brand-white); }

.btn-ghost-white {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.btn-ghost-white:hover { background: #fff; color: var(--brand-dark); }

/* Hero sub ghost override — was white-on-transparent for the old dark
   .hero-sub gradient background; .hero-sub is now light (Sprint: hero-sub
   migration), so this needs dark-on-transparent instead. Base .btn-ghost
   (var(--bg-dark), still old palette until the sitewide button pass) isn't
   reused directly — kept fully scoped to .hero-sub on brand tokens so this
   stage doesn't depend on/wait for that later stage. */
.hero-sub .btn-ghost { border-color: var(--brand-dark); color: var(--brand-dark); }
.hero-sub .btn-ghost:hover { background: var(--brand-dark); color: var(--brand-white); }

.btn-sm  { padding: 9px 16px; font-size: 13px; border-radius: 10px; }
.btn-lg  { padding: 16px 32px; font-size: 17px; }
.btn-block { width: 100%; display: block; text-align: center; }

/* ══════════════════════════════════════
   CARDS — unified system
══════════════════════════════════════ */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;        /* equal-height rows via grid */
}
.card-featured {
  background: linear-gradient(135deg, #fff 0%, rgba(var(--brand-red-rgb), .05) 100%);
  border: 2px solid var(--brand-red);
  position: relative;
}
.card-title {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--brand-dark);
}
.card-desc {
  color: rgba(var(--brand-dark-rgb), .72);
  font-size: 15px;
  margin-bottom: 18px;
  flex-grow: 1;   /* pushes button to bottom */
}
/* Sprint 1.6 — #tarify/#payment headings still fell through to the global
   h2/.lead rule (var(--text) #231B5C old dark purple) since neither section
   has a class scope like .section-why. IDs are index.html-exclusive, safe
   without body.page-canvas prefix. */
#tarify h2, #payment h2 { color: var(--brand-dark); }
#tarify .lead, #payment .lead { color: rgba(var(--brand-dark-rgb), .72); }
/* Sprint 1.9 — same leak found on #video/#reviews: neither has .section-why
   or its own heading override, so h2/.lead still fell through to the old
   var(--text)/var(--text-m) tokens. #reviews has no .lead paragraph. */
#video h2, #reviews h2 { color: var(--brand-dark); }
#video .lead { color: rgba(var(--brand-dark-rgb), .72); }

/* Sprint 1.6 — index.html tariff cards CTA. .btn-primary itself is shared
   site-wide (still old yellow var(--accent) until Этап 5 ROADMAP), so this
   must stay scoped to #tarify, never touch the base rule. */
body.page-canvas #tarify .btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 6px 16px rgba(var(--brand-red-rgb), .3);
}
body.page-canvas #tarify .btn-primary:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 24px rgba(var(--brand-orange-rgb), .4);
}
/* Sprint 1.9 — same leak as .btn-primary above: base .card/.card:hover (used
   site-wide) still shadow on var(--shadow) resting / hardcoded rgba(85,71,179,…)
   (old purple) on hover. Scoped to #tarify only, never touches the shared rule. */
body.page-canvas #tarify .card {
  box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb), .08);
}
body.page-canvas #tarify .card:hover {
  box-shadow: 0 20px 40px rgba(var(--brand-dark-rgb), .18);
}
.card ul {
  padding-left: 0;
  list-style: none;
  margin: 0 0 18px;
  flex-grow: 1;
}
.card ul li {
  padding: 6px 0 6px 26px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
}
.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 15px;
  height: 15px;
  background: var(--success);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='M5.8 9.8L3 7l1-1 1.8 1.8L10 3.6l1 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Buttons always at bottom of card */
.card > .btn,
.card > a.btn { margin-top: auto; }

/* ── Tarif cards ────────────────────────────── */
/* minmax(0, 1fr): same grid-blowout guard as .grid-3 in main.css — these
   cards carry the same nowrap CTA button that can force a track wider than
   its equal share and overflow the page. */
.tarify-grid { display: grid; gap: 20px; margin-top: 20px; }
.tarify-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .tarify-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tarify-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.tarif-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 6px 20px rgba(var(--brand-dark-rgb), .06);
}
.tarif-card.tarif-popular {
  border: 2px solid var(--brand-red);
  box-shadow: 0 14px 40px rgba(var(--brand-red-rgb), .22);
  position: relative;
}
.tarif-card.tarif-popular::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
  border-radius: var(--radius) var(--radius) 0 0;
}
.tarif-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(var(--brand-dark-rgb), .04);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.tarif-card h3 { margin: 0 0 16px; color: var(--brand-dark); font-size: 21px; }
.tarif-price-block {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
}
.tarif-price { font-size: 30px; font-weight: 800; color: var(--brand-dark); line-height: 1.1; }
/* a11y: было #888 на белом фоне карточки — ~3.5:1, ниже WCAG AA (4.5:1) для
   обычного текста 15px. var(--text-m) — тот же токен вторичного текста,
   что уже используется в .muted по всему сайту (~7.4:1). */
.tarif-price span { font-size: 15px; font-weight: 500; color: var(--text-m); }
.tarif-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex-grow: 1;
}
.tarif-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: #444;
  line-height: 1.5;
  font-size: 14px;
}
.tarif-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-red);
  font-weight: 900;
  font-size: 15px;
}
/* Button always at bottom */
.tarif-card > .btn,
.tarif-card > a.btn { margin-top: auto; }

.tarify-foot {
  margin-top: 24px;
  padding: 18px 22px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

/* ── Feature / Step / Audience cards ────────── */
.feature-card, .step-card, .audience-card, .course-card, .contact-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.feature-card h3, .audience-card h3, .course-card h3 {
  margin: 0 0 10px;
  color: var(--brand-dark);
  font-size: 17px;
}
.feature-card p, .audience-card p, .course-card p {
  color: #666;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}
.feature-card > .btn, .feature-card > a.btn { margin-top: auto; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
@media (max-width: 768px) {
  .audience-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Steps ──────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

.step-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(var(--brand-dark-rgb), .05);
}
.step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
}
.step-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-red);
  color: var(--brand-white);
  font-weight: 900;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
/* Legacy step (index.html dark section) */
.step {
  background: rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
}
.step .step-num {
  position: absolute;
  top: -14px;
  left: 24px;
}
.step h3 { margin-top: 10px; font-size: 18px; color: #fff; }
.step p   { font-size: 14px; color: rgba(255,255,255,.85); margin: 0; }

/* index.html "Как начать" — .step/.step-num are shared with oplata.html/
   schools.html/parents.html, so this must stay scoped to body.page-canvas
   .dark-section and never touch the base rules above. The base rules were
   built for a glass-on-dark surface; .dark-section is now transparent
   (light canvas), so these need an opaque white card instead. */
body.page-canvas .dark-section .step {
  background: #fff;
  border: 1px solid rgba(var(--brand-dark-rgb), .08);
  box-shadow: 0 8px 22px rgba(var(--brand-dark-rgb), .05);
}
body.page-canvas .dark-section .step h3 { color: var(--brand-dark); }
body.page-canvas .dark-section .step p  { color: rgba(var(--brand-dark-rgb), .65); }
body.page-canvas .dark-section .step-num {
  background: var(--brand-red);
  color: var(--brand-white);
}
/* The lead form's own submit button falls through to the unscoped
   .btn-primary (old yellow var(--accent)) same as cookie-banner did —
   the form is meant to be the page's final CTA, must match the red/orange
   CTA language used everywhere else on this page. */
body.page-canvas .dark-section .form-block .btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 6px 16px rgba(var(--brand-red-rgb), .3);
}
body.page-canvas .dark-section .form-block .btn-primary:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 24px rgba(var(--brand-orange-rgb), .4);
}
/* .form-thanks "Отправить ещё одну" button — same unscoped .btn-ghost leak
   (var(--bg-dark) old purple) as .btn-primary above, missed in the first pass. */
body.page-canvas .dark-section .form-block .btn-ghost {
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}
body.page-canvas .dark-section .form-block .btn-ghost:hover {
  background: var(--brand-dark);
  color: var(--brand-white);
}
/* Same old-token leak on the checkbox accent + privacy-policy link + the
   post-submit "thanks" heading — all still var(--bg)/var(--bg-dark). */
body.page-canvas .dark-section .form-block .lead-form .check input[type="checkbox"] { accent-color: var(--brand-blue); }
body.page-canvas .dark-section .form-block .lead-form .check a { color: var(--brand-blue); }
body.page-canvas .dark-section .form-block .form-note a { color: var(--brand-blue); }
body.page-canvas .dark-section .form-block .form-thanks h3 { color: var(--brand-dark); }
body.page-canvas .dark-section .form-block h3 { color: var(--brand-dark); }
body.page-canvas .dark-section .form-block .lead-form input:focus,
body.page-canvas .dark-section .form-block .lead-form select:focus,
body.page-canvas .dark-section .form-block .lead-form textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), .12);
}
/* Sprint 1.9 — the link inside .form-note/.check was scoped above, but the
   surrounding paragraph text itself (var(--text-m)) and .muted (form intro +
   "thanks" screen) were missed. Same var(--text) leak on typed-in field text. */
body.page-canvas .dark-section .form-block .form-note,
body.page-canvas .dark-section .form-block .muted {
  color: rgba(var(--brand-dark-rgb), .6);
}
body.page-canvas .dark-section .form-block .lead-form input,
body.page-canvas .dark-section .form-block .lead-form select,
body.page-canvas .dark-section .form-block .lead-form textarea {
  color: var(--brand-dark);
}
/* .form-block container itself — base rule below is hardcoded old-purple
   rgba(35,27,92,.1), not even a token. This is the one native form on the
   page, its card shadow is the last visible old-palette surface here. */
body.page-canvas .dark-section .form-block {
  box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), .1);
}

.step-card h3 { margin: 0 0 10px; color: var(--brand-dark); font-size: 17px; }
.step-card p  { color: #666; font-size: 14px; line-height: 1.55; margin: 0; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg) 60%, #7160D6 100%);
  color: #fff;
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(var(--brand-orange-rgb), .22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero h1   { color: #fff; }
.hero .lead { color: rgba(255,255,255,.9); font-size: clamp(17px, 1.8vw, 21px); }
.hero .text-center { max-width: 920px; margin: 0 auto; }

/* Hero sub (inner pages) — unified page canvas (заказчик, Решение 10,
   docs/DECISIONS.md): no longer paints its own local 2-layer glow formula —
   background is transparent so the shared fixed canvas on body.page-canvas
   (see main.css) shows through, the exact same canvas visible on index.html
   under every section. Hero-sub stopped being a separate "picture". */
.hero-sub {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--brand-dark);
  padding: 72px 0 60px;
}
.hero-sub .container { position: relative; z-index: 1; }
.hero-sub h1   { color: var(--brand-dark); }
.hero-sub .lead { color: rgba(var(--brand-dark-rgb), .72); max-width: 720px; }

/* Hero grid — shared */
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 32px;
}
/* Index hero uses 2-col equal grid */
.hero > .container .hero-grid {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (max-width: 880px) {
  .hero-grid                     { grid-template-columns: 1fr; }
  .hero > .container .hero-grid  { grid-template-columns: 1fr; }
}

/* Hero stats strip — verified exclusive to .hero-sub (grep: only
   parents.html/schools.html use .hero-stats/.stat-card, index.html uses
   .hero-trust/.hero-why instead) — safe to redefine directly on brand
   tokens, no scope needed. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--brand-dark-rgb), .12);
}
@media (max-width: 768px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .hero-stats { grid-template-columns: 1fr; }
}
/* .btn-lg's 32px horizontal padding + white-space:nowrap (inherited from
   base .btn) makes long single-line CTA text (e.g. "Вернуться на сайт для
   родителей") wider than its column at the 320px floor — the column itself
   is fine, only the un-wrappable label overflows it. Let it wrap instead of
   forcing a min-content width past the viewport. */
@media (max-width: 400px) {
  .btn-lg {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
  }
}
.stat-num   { font-size: 26px; font-weight: 900; color: var(--brand-red); }
.stat-label { font-size: 13px; color: rgba(var(--brand-dark-rgb), .68); line-height: 1.3; }

/* Hero stats sidebar (inner pages) — vertical cards */
.hero-sub .hero-stats {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (max-width: 880px) {
  .hero-sub .hero-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .hero-sub .hero-stats { grid-template-columns: 1fr; }
}
.stat-card {
  /* was glass-on-dark (rgba white + blur) for the old dark .hero-sub bg —
     .hero-sub is now light, so this is an opaque white card instead
     (same visual language as .hero-card/.step on index.html). backdrop-filter
     dropped — no longer serves a purpose on a white-on-white surface. */
  background: #fff;
  border: 1px solid rgba(var(--brand-dark-rgb), .08);
  box-shadow: 0 4px 14px rgba(var(--brand-dark-rgb), .05);
  border-radius: 16px;
  padding: 18px 20px;
}
.stat-card .stat-num   { font-size: 28px; }
.stat-card .stat-label { margin-top: 4px; }

/* Hero CTA row */
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
@media (max-width: 480px) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
}

/* Hero card (index dual-audience card) — light glass surface, icon + text row.
   Exclusive to index.html Hero — safe to redefine directly, no other page uses it. */
.hero-card {
  background: #fff;
  border: 1px solid rgba(var(--brand-dark-rgb),.08);
  box-shadow: 0 8px 22px rgba(var(--brand-dark-rgb),.05);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-card .icon { font-size: 26px; line-height: 1; flex-shrink: 0; opacity: .9; }
.hero-card .body { flex: 1; min-width: 0; }
.hero-card h3 { color: var(--brand-dark); margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.hero-card p  { color: rgba(var(--brand-dark-rgb),.62); font-size: 13px; margin: 0 0 8px; line-height: 1.4; }
.hero-card a {
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .2s ease;
}
.hero-card a:hover { color: var(--brand-orange); opacity: 1; }

/* ══════════════════════════════════════
   HERO v3 — index-only overrides (Aschool)
   Полностью аддитивно поверх правил выше — ни одно существующее правило
   .hero/.hero-sub/.hero-grid/.hero-cta/.eyebrow не редактировалось напрямую,
   чтобы не задеть hero-sub на parents.html/schools.html/kursy.html/и т.д.
   Скоуп — через :not(.hero-sub), т.к. на index .hero используется без .hero-sub.

   Light revision (заказчик, после просмотра тёмного варианта): тёмный фон
   читался как SaaS/IT-дашборд, не как образовательный бренд — заменён на
   светлую базу с мягкими цветными glow-пятнами лого (красный/оранжевый/
   голубой), тёмный используется только для текста, не для фона.

   Unified page canvas (заказчик, следующая итерация): Hero больше не несёт
   собственный фон — он transparent и показывает общую fixed-канву
   body.page-canvas (см. main.css), ту же самую, что видна под Sprint2/Видео/
   Тарифами/Оплатой/Отзывами. Hero перестал быть "отдельной картинкой".
══════════════════════════════════════ */
.hero:not(.hero-sub) {
  background: transparent;
  padding: 96px 0 104px;
}
.hero:not(.hero-sub)::before { content: none; }
.hero:not(.hero-sub) .container { position: relative; z-index: 1; }

/* Deliberate, delicate glow behind the CTA — not the button's own box-shadow,
   an ambient light pulling the eye toward it. Anchored to .hero-cta itself
   so it tracks the button regardless of H1/lead line-wrap height. */
.hero:not(.hero-sub) .hero-cta { position: relative; }
.hero:not(.hero-sub) .hero-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(var(--brand-red-rgb), .16), rgba(var(--brand-orange-rgb), .1) 45%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}

/* Single shared column — text, CTA, trust row, cards and why-row all share
   the same max-width/center axis instead of each row centering independently
   at a different width (was reading as "shifted" on wide viewports). */
.hero:not(.hero-sub) .hero-inner { max-width: 840px; margin: 0 auto; }

.hero:not(.hero-sub) h1 { color: var(--brand-dark); }
.hero:not(.hero-sub) .lead { color: rgba(var(--brand-dark-rgb), .72); }
.hero:not(.hero-sub) .eyebrow {
  background: rgba(var(--brand-red-rgb), .1);
  color: var(--brand-red);
}
.hero:not(.hero-sub) .hero-cta { justify-content: center; }
.hero:not(.hero-sub) .btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 10px 28px rgba(var(--brand-red-rgb), .28);
}
.hero:not(.hero-sub) .btn-primary:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 14px 34px rgba(var(--brand-orange-rgb), .32);
}
.hero:not(.hero-sub) > .container .hero-grid { margin-top: 64px; }

/* Decorative brand mark — giant translucent "A", echoes the Aschool mark
   geometry (letter in a circle, see branding/working/). aria-hidden in markup.
   Tinted blue on the light background — a watermark, not a wall of black. */
.hero-a-mark {
  position: absolute;
  right: 0;
  bottom: -140px;
  font-size: 560px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(var(--brand-blue-rgb), .06);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Reassurance microcopy under the hero CTA — secondary to the button */
.hero-reassure {
  text-align: center;
  font-size: 13px;
  color: rgba(var(--brand-dark-rgb), .5);
  margin-top: 14px;
}

/* Compact trust row — replaces the old heavy stats block for the index hero;
   hero-sub pages keep their existing .hero-stats sidebar untouched. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--brand-dark-rgb), .1);
  font-size: 13px;
  color: rgba(var(--brand-dark-rgb), .68);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hero-trust .dot { color: var(--brand-orange); font-weight: 900; }

/* Hero-sub sidebar context — narrow .hero-grid column (was a vertical
   .hero-stats sidebar here, not the wide centered index strip), so stack
   vertically and let long items wrap instead of forcing nowrap overflow. */
.hero-sub .hero-trust {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
}
.hero-sub .hero-trust span { white-space: normal; }

/* Short "why us" pill row under the dual-audience cards — light format,
   avoids duplicating the full "Почему семьи выбирают Aschool" section below */
.hero-why {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 40px;
}
.hero-why span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid rgba(var(--brand-dark-rgb), .1);
  box-shadow: 0 2px 10px rgba(var(--brand-dark-rgb), .04);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--brand-dark-rgb), .78);
  white-space: nowrap;
}
.hero-why .ic { font-size: 15px; }

/* ══════════════════════════════════════
   PRICE ELEMENTS
══════════════════════════════════════ */
.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.price-new  { font-size: 28px; font-weight: 900; color: var(--brand-dark); }
.price-old  { font-size: 16px; color: rgba(var(--brand-dark-rgb), .5); text-decoration: line-through; }
.price-unit { font-size: 14px; color: rgba(var(--brand-dark-rgb), .6); font-weight: 600; }
.discount {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ══════════════════════════════════════
   PAY BLOCKS
══════════════════════════════════════ */
.pay-block {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: #fff;
  border-radius: var(--radius);
  padding: 30px;
  /* index.html-exclusive (oplata.html uses .pay-block-lg instead) — var(--shadow)
     is old-palette rgba(35,27,92,…) in main.css (off-limits this sprint). */
  box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb), .08);
  height: 100%;
}
.pay-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: rgba(var(--brand-dark-rgb), .06);
  color: var(--brand-dark);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.pay-icon svg { width: 28px; height: 28px; }
.pay-block h3 { font-size: 19px; margin-bottom: 8px; color: var(--brand-dark); }
.pay-block p  { font-size: 15px; color: rgba(var(--brand-dark-rgb), .72); margin: 0; }

/* oplata.html larger pay-blocks */
.pay-block-lg {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
  background: #fff;
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb), .08);
  margin-bottom: var(--gap);
}
.pay-block-lg:last-child {
  margin-bottom: 0;
}
.pay-icon-lg {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-orange) 100%);
  color: var(--brand-white);
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .pay-block   { flex-direction: column; gap: 14px; }
  .pay-block-lg { grid-template-columns: 1fr; }
  .pay-icon-lg { width: 72px; height: 72px; font-size: 28px; }
}

/* ══════════════════════════════════════
   FORMS
══════════════════════════════════════ */
/* Sprint: forms & CTA migration — .lead-form/.form-block are exclusive to
   the native lead-capture form (6 internal pages + index.html's
   .dark-section instance, already covered there by a scoped override that
   becomes a no-op now). Not shared with .login-form, safe to redefine
   directly. Old hardcoded rgba(35,27,92,.1) → brand-dark-rgb. */
.lead-form, .form-block {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), .1);
  border: 1px solid #eee;
}
.lead-form h3, .form-block h3 {
  color: var(--brand-dark);
  font-size: 22px;
  margin: 0 0 8px;
}
.form-row, .lead-form .field {
  margin-bottom: 14px;
}
.form-row:last-child, .lead-form .field:last-child { margin-bottom: 0; }
.form-row label, .lead-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  margin-bottom: 6px;
}
.form-row input,
.form-row select,
.form-row textarea,
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form select,
.lead-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e2e8;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), .12);
}
/* Sprint: forms & CTA migration — the grouped rule above is shared with
   .form-row (also used inside .login-form on login.html, out of scope this
   stage), so it's left untouched. These .lead-form-only rules come after it
   in source order with matching specificity — win the cascade for .lead-form
   without touching login.html's fields. Old var(--text)/var(--bg) purple → brand. */
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form select,
.lead-form textarea {
  color: var(--brand-dark);
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), .12);
}
.lead-form textarea { resize: vertical; min-height: 80px; }
.lead-form input::placeholder,
.lead-form textarea::placeholder { color: #aaa; }

.lead-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.lead-form .field-row .field { margin-bottom: 0; }
@media (max-width: 600px) {
  .lead-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .lead-form .field-row .field { margin-bottom: 14px; }
}

.lead-form .req { color: #E04848; font-weight: 600; }
.lead-form .field-check { margin: 18px 0 8px; }
.lead-form .check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  color: #555;
  font-size: 13px;
  line-height: 1.5;
}
.lead-form .check input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--brand-blue);
  cursor: pointer;
}
.lead-form .check a { color: var(--brand-blue); text-decoration: underline; }
.lead-form button[type="submit"] { margin-top: 8px; }

/* Состояние ошибки поля из showFieldError() (js/main.js) — раньше не имело
   CSS нигде в проекте, из-за чего сообщение об ошибке визуально терялось. */
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--danger);
}
.lead-form input.input-error,
.lead-form select.input-error,
.lead-form textarea.input-error {
  border-color: var(--danger);
}
.lead-form .check input[type="checkbox"].input-error {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* Live status region for submitLeadForm() (js/main.js) — success/error text
   after a real fetch() result. Empty by default so it takes no space. */
.form-msg {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
}
.form-msg:empty { display: none; }
.form-msg-error { color: var(--danger); }
.form-msg-success { color: var(--success); }

/* .form-note is also used for the small note under login.html's register
   button ("Регистрируясь, ты соглашаешься...") — not .login-form-exclusive
   styling, just shared muted-text component, safe to migrate directly. */
.form-note {
  font-size: 12px;
  color: rgba(var(--brand-dark-rgb), .7);
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
}
.form-note a { color: var(--brand-blue); }

/* Form thanks state */
.form-thanks {
  padding: 48px 24px;
  text-align: center;
}
.form-thanks-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E8F5E9;
  color: #2E7D32;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
}
.form-thanks h3 { color: var(--brand-dark); font-size: 22px; margin: 0 0 8px; }
/* .muted itself stays untouched (main.css, shared sitewide — dash-list,
   contact-card, tarif-price etc. all use it, out of scope this stage).
   Scoped override for the two .muted paragraphs that live inside the lead
   form (intro text + .form-thanks confirmation) only. */
.form-block .muted { color: rgba(var(--brand-dark-rgb), .7); }

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq  { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.faq-item {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid #eee;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(var(--brand-dark-rgb), .04);
}
.faq-item summary {
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 300;
  color: var(--bg);
  flex-shrink: 0;
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-content, .faq-item p {
  padding: 0 22px 20px;
  color: var(--text-m);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ══════════════════════════════════════
   Sprint 1.8 — FAQ (index.html #faq)
   .faq/.faq-item above is shared with parents.html and still on the old
   palette (border #eee, summary/icon on var(--text)/var(--bg) purple).
   Scoped to #faq only — same pattern as #reviews/#tarify — so parents.html
   keeps its current look untouched. JS is unchanged: still plain native
   <details>/<summary>, no accordion script added.
══════════════════════════════════════ */
#faq .faq-item {
  border: 1px solid rgba(var(--brand-dark-rgb), .08);
  /* var(--shadow) is old-palette rgba(35,27,92,…) in main.css (off-limits this
     sprint) — redefined directly on brand-dark-rgb, same recipe. */
  box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb), .08);
  transition: box-shadow .2s ease, border-color .2s ease;
}
#faq .faq-item:hover {
  border-color: rgba(var(--brand-dark-rgb), .16);
}
#faq .faq-item:hover,
#faq .faq-item[open] {
  box-shadow: 0 16px 48px rgba(var(--brand-dark-rgb), .16);
}
#faq .faq-item summary {
  color: var(--brand-dark);
  border-radius: var(--radius);
  transition: background-color .2s ease;
}
#faq .faq-item summary:hover {
  background: rgba(var(--brand-dark-rgb), .03);
}
#faq .faq-item summary:active {
  background: rgba(var(--brand-dark-rgb), .06);
}
#faq .faq-item summary:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: -2px;
}
#faq .faq-item summary::after {
  content: "+";
  color: var(--brand-red);
  transition: color .2s ease;
}
#faq .faq-item[open] summary::after {
  content: "\2212";
  color: var(--brand-orange);
  transform: none;
}
#faq .faq-content,
#faq .faq-item p {
  color: rgba(var(--brand-dark-rgb), .72);
  animation: faq-reveal .25s ease;
}
#faq .faq-item p a {
  color: var(--brand-blue);
  font-weight: 600;
}
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   PRICING TABLE
══════════════════════════════════════ */
.pricing-table {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pricing-table table  { width: 100%; border-collapse: collapse; }
.pricing-table th {
  background: var(--brand-dark);
  color: #fff;
  text-align: left;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
}
.pricing-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  vertical-align: top;
}
.pricing-table tr:last-child td       { border-bottom: none; }
.pricing-table tr:nth-child(even) td  { background: var(--bg-section); }
.pricing-table .col-new { font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
.pricing-table .col-old { color: var(--text-m); text-decoration: line-through; white-space: nowrap; }

/* Tarify table */
.tarify-table-wrap { overflow-x: auto; background: #fff; border-radius: 14px; border: 1px solid #eee; }
.tarify-table { width: 100%; border-collapse: collapse; }
.tarify-table th {
  background: rgba(var(--brand-dark-rgb), .04);
  text-align: left;
  padding: 14px 16px;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tarify-table td {
  padding: 14px 16px;
  border-top: 1px solid #eee;
  color: #444;
  font-size: 14px;
  line-height: 1.5;
}
.tarify-table .num { text-align: right; white-space: nowrap; }
.tarify-table tr:hover td { background: rgba(var(--brand-blue-rgb), .04); }
.row-accent    { background: rgba(var(--brand-orange-rgb), .08); }
.row-accent td { font-weight: 500; }

/* ══════════════════════════════════════
   COURSES GRID
══════════════════════════════════════ */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.course-card {
  border: 1px solid #eee;
  transition: transform .25s, box-shadow .25s;
}
.course-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--brand-dark-rgb), .1); }
.course-age {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(var(--brand-dark-rgb), .04);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.course-card > .btn,
.course-card > a.btn { margin-top: auto; }
.course-price { color: var(--brand-dark); font-size: 15px; margin-top: auto; }
.course-price strong { font-size: 20px; color: var(--brand-red); }

/* Services */
.services-grid { display: flex; flex-direction: column; gap: 10px; max-width: 680px; margin: 0 auto; }
.service-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  gap: 12px;
  flex-wrap: wrap;
}
.service-row strong { color: var(--brand-dark); font-size: 15px; }

/* ══════════════════════════════════════
   CONTACTS
══════════════════════════════════════ */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.contact-card {
  border: 1px solid #eee;
  text-align: center;
  padding: 24px;
}
.contact-card h3 { margin: 0 0 12px; color: var(--brand-dark); font-size: 16px; }
.contact-link {
  display: block;
  color: var(--brand-blue);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  word-break: break-word;
}

/* ══════════════════════════════════════
   TABS
══════════════════════════════════════ */
.tabs {
  display: inline-flex;
  background: var(--bg-light);
  padding: 6px;
  border-radius: 14px;
  gap: 4px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tab {
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s;
  border: none;
}
.tab.active { background: var(--brand-dark); color: #fff; }
@media (max-width: 480px) {
  .tabs { display: flex; }
  .tab  { flex: 1; text-align: center; padding: 10px 12px; font-size: 14px; }
}

/* Tarify nav */
.tarify-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ══════════════════════════════════════
   TOUR / VIDEO
══════════════════════════════════════ */
.tour-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  /* index.html-exclusive — var(--shadow-lg) itself is old-palette rgba(35,27,92,…)
     in main.css (off-limits this sprint); redefined directly on brand-dark-rgb. */
  box-shadow: 0 16px 48px rgba(var(--brand-dark-rgb), .16);
}
.tour-frame iframe,
.tour-frame video { width: 100%; height: 100%; border: 0; object-fit: cover; }
/* .tour-placeholder (index.html) и .video-placeholder (tour.html) — общий
   click-to-play/fallback оверлей для тяжёлого lessons_loop.mp4 (~25 МБ):
   виден до тех пор, пока видео не догрузилось лениво (см. js/main.js,
   секция "Ленивая загрузка видео"), либо если загрузка завершилась ошибкой.
   Оба класса теперь <button> — не просто div. Sprint 1.9 cleanup + Perf fix. */
.tour-placeholder,
.video-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 24px;
  border: 0;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-blue) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  gap: 14px;
  font: inherit;
  cursor: pointer;
}
.tour-placeholder:focus-visible,
.video-placeholder:focus-visible { outline: 3px solid var(--brand-red); outline-offset: -3px; }
.tour-placeholder svg, .video-placeholder svg { width: 80px; height: 80px; opacity: .9; }
.tour-placeholder span, .video-placeholder span,
.tour-placeholder p,    .video-placeholder p   { margin: 0; max-width: 380px; text-align: center; color: rgba(255,255,255,.85); }
.tour-placeholder[hidden], .video-placeholder[hidden] { display: none; }

.video-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-dark);
  aspect-ratio: 16/9;
  box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), .15);
}
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════════════════════════════════
   LEAD MODAL
══════════════════════════════════════ */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.lead-modal[hidden] { display: none; }
.lead-modal-backdrop {
  position: fixed;
  inset: 0;
  /* DESIGN_SYSTEM.md §14 target: rgba(--brand-dark-rgb, ~.5) instead of old
     purple. Shared across all 11 pages — not in the item list but same
     component as .lead-modal-close (item 11), same old-palette leftover. */
  background: rgba(var(--brand-dark-rgb), .55);
  backdrop-filter: blur(4px);
}
.lead-modal-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 620px;
  width: 100%;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
}
.lead-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f1f4;
  color: var(--brand-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lead-modal-close:hover { background: #e5e5ec; }
.lead-modal-body { padding: 0 12px 12px; }
@media (max-width: 640px) {
  .lead-modal { padding: 10px; }
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,.7);
  padding: 60px 0 30px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 { color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 5px 0; }
.site-footer a  { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--accent); opacity: 1; }
.site-footer .logo { color: #fff; margin-bottom: 14px; }
.site-footer .logo span { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.55); }
.footer-bottom a:hover { color: var(--accent); opacity: 1; }

.socials { display: flex; gap: 8px; }
.socials a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.socials a:hover { background: var(--accent); color: var(--bg-dark); opacity: 1; }

/* index.html only — .site-footer/.footer-bottom/.socials are shared with
   all 11 pages, so every override here MUST stay nested under
   body.page-canvas .site-footer and never touch the base rules above.
   Old dark-purple fill → soft translucent light surface (per заказчик:
   "не тёмная заливка, но не сливаться с Отзывами над ним" — top divider +
   backdrop-filter keep it readable as the page's footer). */
body.page-canvas .site-footer {
  background: rgba(255, 255, 255, .55);
  border-top: 1px solid rgba(var(--brand-dark-rgb), .08);
  backdrop-filter: blur(10px);
  color: rgba(var(--brand-dark-rgb), .68);
}
body.page-canvas .site-footer h4 { color: var(--brand-red); }
body.page-canvas .site-footer a  { color: rgba(var(--brand-dark-rgb), .7); }
body.page-canvas .site-footer a:hover { color: var(--brand-red); opacity: 1; }
body.page-canvas .site-footer .logo,
body.page-canvas .site-footer .logo span { color: var(--brand-dark); }
body.page-canvas .site-footer .footer-bottom {
  border-top: 1px solid rgba(var(--brand-dark-rgb), .1);
  color: rgba(var(--brand-dark-rgb), .5);
}
body.page-canvas .site-footer .footer-bottom a { color: rgba(var(--brand-dark-rgb), .55); }
body.page-canvas .site-footer .footer-bottom a:hover { color: var(--brand-red); opacity: 1; }
body.page-canvas .site-footer .socials a {
  background: rgba(var(--brand-dark-rgb), .06);
  color: var(--brand-dark);
}
body.page-canvas .site-footer .socials a:hover { background: var(--brand-red); color: var(--brand-white); opacity: 1; }

/* Legal-requisites paragraph in the footer (ИП/ИНН/город). It used to carry
   an inline style="color:rgba(255,255,255,.7)" written for the old dark
   footer fill — unreadable now that .site-footer is a light translucent
   surface (see body.page-canvas .site-footer above). This class replaces
   that inline style on all 11 pages with the same brand-dark ink already
   used elsewhere in the footer, just at a higher alpha than index.html's
   original .65: at .65 the text measures ~4.59:1 against the lightest
   possible footer background (pure white under the .55 white overlay),
   which clears WCAG AA (4.5:1) only by a hair. .75 gives ~6.3:1, a safe
   margin for small print. No body.page-canvas prefix needed — this targets
   the <p> directly, so it beats the inherited .site-footer color without
   needing to out-specificity it. */
.footer-legal {
  color: rgba(var(--brand-dark-rgb), .75);
}

/* "Настройки cookie" reopens the banner — styled to match the plain-text
   footer links around it (.site-footer a) since it's a <button>, not <a>. */
.site-footer .footer-link-btn {
  background: none; border: none; padding: 0; margin: 0; display: inline;
  font: inherit; cursor: pointer; text-align: left; color: rgba(255,255,255,.75);
}
.site-footer .footer-link-btn:hover { color: var(--accent); opacity: 1; }
body.page-canvas .site-footer .footer-link-btn { color: rgba(var(--brand-dark-rgb), .7); }
body.page-canvas .site-footer .footer-link-btn:hover { color: var(--brand-red); opacity: 1; }

/* ══════════════════════════════════════
   COOKIE BANNER
══════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9998;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(var(--brand-dark-rgb),.22);
  border: 1px solid rgba(var(--brand-dark-rgb),.08);
  padding: 18px 22px;
  max-width: 1080px;
  margin: 0 auto;
  animation: cookieSlide .35s ease-out;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookieSlide { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.cookie-banner-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1; min-width: 260px; }
.cookie-banner-text strong { display: block; color: var(--brand-dark); font-size: 15px; margin-bottom: 4px; }
.cookie-banner-text p { margin: 0; color: #5a5775; font-size: 14px; line-height: 1.5; }
.cookie-banner-text a { color: var(--brand-blue); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner-actions .btn { min-height: 44px; }
.cookie-banner-state { display: block; margin: 8px 0 0; color: #5a5775; font-size: 13px; }
/* Aschool palette — cookie banner is not inside .header-cta/.hero/.section-why,
   so it falls through to the base .btn-primary/.btn-ghost rules (still old palette
   until Этап 5 ROADMAP) unless scoped here directly. */
.cookie-banner .btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 6px 16px rgba(var(--brand-red-rgb),.3);
}
.cookie-banner .btn-primary:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 24px rgba(var(--brand-orange-rgb),.4);
}
.cookie-banner .btn-ghost {
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}
.cookie-banner .btn-ghost:hover { background: var(--brand-dark); color: #fff; }
@media (max-width: 640px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-banner-actions { flex-direction: column; }
  .cookie-banner-actions .btn { width: 100%; }
}

/* ══════════════════════════════════════
   LK PROMO (index dark banner)
══════════════════════════════════════ */
/* index.html only (class exclusive to this page) — converted from the old
   purple gradient panel to a white Aschool-canvas card, see docs/DECISIONS.md */
.lk-promo {
  background: #fff;
  border: 1px solid rgba(var(--brand-dark-rgb), .08);
  box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), .06);
  border-radius: var(--radius-lg);
  padding: 48px;
  color: var(--brand-dark);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.lk-promo h2  { color: var(--brand-dark); }
.lk-promo .lead { color: rgba(var(--brand-dark-rgb), .72); }
/* Sprint 1.9 — was an inline style="background:rgba(0,108,181,.1);color:var(--brand-blue)"
   directly in index.html (values already correct, just not scoped like every
   other .eyebrow on this page — main.css only scopes #video/#tarify/#payment/
   #reviews, .lk-promo isn't in that list). Moved into the component rule. */
.lk-promo .eyebrow { background: rgba(var(--brand-blue-rgb), .1); color: var(--brand-blue); }
.lk-promo .btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
}
.lk-promo .btn-primary:hover { background: var(--brand-orange); border-color: var(--brand-orange); }
.lk-promo-list {
  background: rgba(var(--brand-blue-rgb), .05);
  border: 1px solid rgba(var(--brand-blue-rgb), .1);
  border-radius: var(--radius);
  padding: 24px;
}
.lk-promo-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lk-promo-list ul li {
  padding: 8px 0 8px 32px;
  position: relative;
  color: rgba(var(--brand-dark-rgb), .78);
  font-size: 15px;
}
.lk-promo-list ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-red);
  font-weight: 900;
}
@media (max-width: 800px) {
  .lk-promo { grid-template-columns: 1fr; padding: 32px; }
}
@media (max-width: 480px) {
  .lk-promo { padding: 24px; }
}

/* ══════════════════════════════════════
   PAIN BLOCKS (index)
══════════════════════════════════════ */
.pain-block {
  border-radius: var(--radius-lg);
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pain-block-parent { background: rgba(var(--brand-red-rgb), .06);  border-left: 4px solid var(--brand-red); }
.pain-block-school { background: rgba(var(--brand-blue-rgb), .06); border-left: 4px solid var(--brand-blue); }
.pain-block > .btn { margin-top: auto; padding-top: 24px; }
.pain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}
.pain-list li {
  padding: 10px 0 10px 32px;
  position: relative;
  border-bottom: 1px solid rgba(var(--brand-dark-rgb), .08);
  font-size: 15px;
  color: rgba(var(--brand-dark-rgb), .78);
}
.pain-list li:last-child { border-bottom: none; }
.pain-list .x {
  position: absolute;
  left: 0;
  color: var(--danger);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.6;
}

/* ══════════════════════════════════════
   SPRINT 2 — Боли / Почему Aschool / Направления
   Секционные переопределения токенов Aschool, скоуп через
   .section-why — не затрагивает Тарифы (тоже использует .card/
   .card-featured/.btn-primary/.eyebrow) и другие страницы.
══════════════════════════════════════ */
/* Sprint 1.8 — was 64px/40px, one notch tighter than every plain <section>
   on this page (72px/48px, main.css:136+153). Unified to the page's single
   padding rhythm; .section-why is index.html-exclusive so this can't leak
   to other pages. */
.section-why { padding: 72px 0; }
.section-why + .section-why { padding-top: 0; }
@media (max-width: 768px) {
  .section-why { padding: 48px 0; }
}

.section-why .eyebrow {
  background: rgba(var(--brand-dark-rgb), .06);
  color: var(--brand-dark);
}
.section-why h2,
.section-why h3,
.section-why .card-title { color: var(--brand-dark); }
.section-why .lead,
.section-why .card-desc { color: rgba(var(--brand-dark-rgb), .72); }

.section-why .card:hover {
  box-shadow: 0 20px 40px rgba(var(--brand-dark-rgb), .12);
}

.section-why .btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 6px 16px rgba(var(--brand-red-rgb), .3);
}
.section-why .btn-primary:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 24px rgba(var(--brand-orange-rgb), .35);
}
.section-why .btn-ghost {
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}
.section-why .btn-ghost:hover {
  background: var(--brand-dark);
  color: var(--brand-white);
}

.pill-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: .02em;
  margin-bottom: 14px;
}
.pill-tag--red  { background: rgba(var(--brand-red-rgb), .12);  color: var(--brand-red); }
.pill-tag--blue { background: rgba(var(--brand-blue-rgb), .12); color: var(--brand-blue); }
.pill-tag--dark { background: rgba(var(--brand-dark-rgb), .08); color: var(--brand-dark); }

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--brand-dark-rgb), .06);
  color: var(--brand-dark);
  margin-bottom: 16px;
}
.feature-icon svg { width: 24px; height: 24px; }

.dir-card-featured {
  background: linear-gradient(135deg, #fff 0%, rgba(var(--brand-red-rgb), .05) 100%);
  border: 2px solid var(--brand-red);
  position: relative;
}

/* ══════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════ */
.login-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 880px) { .login-wrap { grid-template-columns: 1fr; } }
.login-card { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), .08); }
.login-tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 24px; }
.login-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: .2s;
}
.login-tab-active { color: var(--brand-red); border-bottom-color: var(--brand-red); }
.login-form .form-row { margin-bottom: 16px; }
.login-form label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; font-weight: 500; }
.login-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e2e8;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  transition: .2s;
}
.login-form input:focus { outline: none; border-color: var(--brand-blue); }
.login-forgot { display: block; text-align: center; margin-top: 14px; color: var(--brand-blue); font-size: 14px; }
.login-divider { text-align: center; margin: 24px 0; position: relative; }
.login-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e2e2e8; }
.login-divider span { position: relative; background: #fff; padding: 0 16px; color: #888; font-size: 13px; }
.login-providers { display: flex; flex-direction: column; gap: 10px; }
.provider-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid #e2e2e8;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-dark);
  transition: .2s;
  width: 100%;
  text-align: left;
}
.provider-btn:hover { border-color: var(--brand-blue); background: rgba(var(--brand-blue-rgb), .04); }
.provider-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.provider-mark-yandex  { background: #FC3F1D; }
.provider-mark-gosuslugi { background: #0066CC; }
.provider-mark-vk      { background: #0077FF; font-size: 11px; }
.provider-mark-mailru  { background: linear-gradient(135deg, #168DE2, #005FF9); font-size: 16px; }

.login-side h2 { color: var(--brand-dark); margin: 0 0 18px; }
.login-features { list-style: none; padding: 0; margin: 0; }
.login-features li { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px solid #eee; }
.login-features li:last-child { border-bottom: none; }
.login-features strong { color: var(--brand-dark); font-size: 15px; margin-bottom: 4px; }
.login-features span   { color: #666; font-size: 14px; line-height: 1.5; }

/* ══════════════════════════════════════
   DASHBOARD
══════════════════════════════════════ */
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), .08);
  min-height: 600px;
}
.dash-sidebar { border-right: 1px solid #eee; padding-right: 20px; }
.dash-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
  margin-bottom: 18px;
}
.dash-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-dark));
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.dash-user-name { font-weight: 600; color: var(--brand-dark); font-size: 14px; }
.dash-user-meta { color: #888; font-size: 12px; margin-top: 2px; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav a { padding: 10px 12px; border-radius: 8px; color: #444; font-size: 14px; transition: .15s; }
.dash-nav a:hover { background: rgba(var(--brand-dark-rgb), .04); color: var(--brand-dark); }
.dash-nav .dash-nav-active { background: var(--brand-red); color: #fff; font-weight: 500; }
.dash-nav .dash-nav-active:hover { background: var(--brand-red); color: #fff; }

.dash-main { display: flex; flex-direction: column; gap: 18px; }
.dash-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
}
.dash-top h3 { margin: 0; color: var(--brand-dark); font-size: 18px; }

.dash-schedule { display: flex; flex-direction: column; gap: 10px; }
.dash-lesson {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px;
  background: #fafaff;
  border-radius: 12px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: .2s;
}
.dash-lesson:hover { border-color: var(--brand-red); transform: translateX(2px); }
.dash-lesson-now { background: linear-gradient(135deg, #fff8e0 0%, #fff4d0 100%); border-color: var(--brand-orange); }
.dash-time strong { display: block; font-size: 18px; color: var(--brand-dark); }
.dash-time span   { color: #888; font-size: 12px; }
.dash-arrow { color: #888; font-size: 18px; font-weight: 700; transition: .2s; }
.dash-lesson:hover .dash-arrow { color: var(--brand-red); transform: translateX(3px); }
.dash-lesson-title { font-weight: 600; color: var(--brand-dark); font-size: 15px; margin-bottom: 4px; }
.dash-lesson-meta  { color: #666; font-size: 13px; margin-bottom: 6px; }
.dash-lesson-tags  { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e2e2e8;
  font-size: 11px;
  color: #666;
  font-weight: 500;
}
.dash-tag-live  { background: #FC3F1D; color: #fff; border-color: #FC3F1D; }
.dash-tag-video { background: #e7f3ff; color: #0066CC; border-color: #cce4ff; }
.dash-tag-task  { background: #fff5d6; color: #9a7800; border-color: #ffe9a3; }

.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-card { background: #fafaff; border-radius: 12px; padding: 18px; border: 1px solid #eee; }
.dash-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dash-card-head h4 { margin: 0; color: var(--brand-dark); font-size: 15px; }
.dash-badge { background: var(--brand-orange); color: var(--brand-dark); font-weight: 700; padding: 2px 10px; border-radius: 20px; font-size: 12px; }
.dash-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #fff; border-radius: 8px; gap: 12px; }
.dash-list strong { display: block; color: var(--brand-dark); font-size: 13px; margin-bottom: 2px; }
.dash-list .muted { display: block; color: #888; font-size: 11px; }
.dash-status { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.dash-status-wait { background: #fff5d6; color: #9a7800; }
.dash-status-ok   { background: #d6f5e0; color: #1d8a3d; }
.dash-status-fix  { background: #ffe1e1; color: #c0392b; }

.dash-week { display: flex; gap: 4px; }
.dash-day {
  width: 34px; height: 34px;
  border: 1px solid #e2e2e8;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  transition: .15s;
}
.dash-day:hover       { border-color: var(--brand-red); color: var(--brand-dark); }
.dash-day-active      { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }

.dash-grades { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-grades th { text-align: left; padding: 8px 10px; color: #888; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid #eee; }
.dash-grades td { padding: 10px; border-bottom: 1px solid #f3f3f7; color: #444; }
.dash-grades tr:last-child td { border-bottom: none; }
.grade { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 13px; }
.grade-5       { background: #d6f5e0; color: #1d8a3d; }
.grade-4       { background: #e7f3ff; color: #0066CC; }
.grade-3       { background: #fff5d6; color: #9a7800; }
.grade-pending { background: #f4f3fb; color: #888; }

.dash-meets { display: flex; flex-direction: column; gap: 10px; }
.dash-meet {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: #fafaff;
  border-radius: 12px;
  border: 1px solid #eee;
}
.dash-meet-now { background: linear-gradient(135deg, #fff8e0 0%, #fff4d0 100%); border-color: var(--brand-orange); }
.dash-meet-time { font-weight: 600; color: var(--brand-dark); font-size: 13px; }
.dash-meet-body strong { display: block; color: var(--brand-dark); font-size: 14px; margin-bottom: 2px; }
.dash-meet-body .muted { color: #888; font-size: 12px; }

.dash-upload { display: flex; flex-direction: column; gap: 10px; }
.dash-upload-types { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-type { padding: 6px 14px; background: #fff; border: 1.5px solid #e2e2e8; border-radius: 8px; font-size: 13px; cursor: pointer; transition: .15s; color: #666; }
.dash-type:hover      { border-color: var(--brand-red); }
.dash-type-active     { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.dash-drop { border: 2px dashed #c8c5e5; border-radius: 10px; padding: 24px; text-align: center; background: #fff; cursor: pointer; transition: .15s; }
.dash-drop:hover { border-color: var(--brand-blue); background: rgba(var(--brand-blue-rgb), .04); }
.dash-drop-icon { font-size: 30px; color: var(--brand-red); margin-bottom: 6px; }
.dash-drop p { margin: 0; color: #444; font-size: 13px; line-height: 1.5; }

.dash-link { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: rgba(var(--brand-dark-rgb), .04); border-radius: 8px; font-size: 12px; }
.dash-link code { flex: 1; color: var(--brand-red); font-family: 'SF Mono', Monaco, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-link-copy { background: none; border: none; color: var(--brand-red); font-weight: 600; font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.btn-link-copy:hover { background: #fff; }

.dash-lesson-detail .dash-back { display: inline-block; color: var(--brand-red); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.dash-lesson-detail .dash-back:hover { opacity: .7; }
.dash-lesson-detail h3 { margin: 0 0 12px; color: var(--brand-dark); font-size: 22px; }
.dash-lesson-info { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-bottom: 18px; border-bottom: 1px solid #eee; margin-bottom: 18px; color: #666; font-size: 13px; }
.dash-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-detail-grid .dash-card { padding: 22px; }
.dash-detail-grid .dash-card h4 { margin: 0 0 12px; color: var(--brand-dark); font-size: 16px; }
.dash-card-wide { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .dashboard { grid-template-columns: 1fr; padding: 16px; }
  .dash-sidebar { border-right: none; border-bottom: 1px solid #eee; padding-right: 0; padding-bottom: 14px; }
  .dash-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .dash-nav a { padding: 8px 14px; font-size: 14px; }
  .dash-lesson { grid-template-columns: 70px 1fr auto; gap: 12px; padding: 12px; }
  .dash-row { grid-template-columns: 1fr; }
  .dash-top { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 680px) {
  .dash-meet { grid-template-columns: 1fr auto; gap: 8px; }
  .dash-meet-time { grid-column: 1 / -1; }
  .dash-detail-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   LEGAL
══════════════════════════════════════ */
.legal-card { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: 0 6px 20px rgba(var(--brand-dark-rgb), .06); }
.legal-doc h2 { margin: 30px 0 12px; font-size: 22px; color: var(--brand-dark); }
.legal-doc h3 { margin: 22px 0 10px; font-size: 17px; color: var(--brand-blue); }
.legal-doc p  { line-height: 1.7; color: #444; margin-bottom: 12px; }
.legal-doc ul { padding-left: 22px; margin-bottom: 14px; }
.legal-doc li { margin-bottom: 6px; line-height: 1.6; color: #444; }
.legal-list { list-style: none; padding: 0; margin: 0; }
.legal-list li { padding: 10px 0; border-bottom: 1px solid #eee; color: #444; }
.legal-list li:last-child { border-bottom: none; }
.legal-list strong { color: var(--brand-dark); margin-right: 8px; }

/* ══════════════════════════════════════
   BRIDGE BLOCK — компактный переход на B2B-сайт aschool.pro
   Используется на schools.html (bridge-страница вместо полной B2B-воронки)
   и на tarify.html (вместо карточки "Аттестация для школ-партнёров" в
   общей родительской сетке тарифов). Один общий класс вместо дублирования
   инлайн-стилей на обеих страницах.
══════════════════════════════════════ */
.bridge-block {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid #eee;
  box-shadow: 0 6px 20px rgba(var(--brand-dark-rgb), .06);
  text-align: center;
}
.bridge-block .eyebrow {
  background: rgba(var(--brand-blue-rgb), .1);
  color: var(--brand-blue);
}
.bridge-block h1,
.bridge-block h2,
.bridge-block h3 { color: var(--brand-dark); margin: 0 0 10px; }
/* bridge-block is a compact card, not a full hero — cap h1 so a page that
   uses it as the sole heading (schools.html) doesn't render an oversized
   hero-scale title inside a small white box. */
.bridge-block h1 { font-size: clamp(22px, 3vw, 32px); }
.bridge-block p {
  color: rgba(var(--brand-dark-rgb), .72);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 22px;
}
.bridge-block-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ══════════════════════════════════════
   ANIMATIONS (unified)
══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
.reveal.in-view:nth-child(1) { transition-delay: 0s;   }
.reveal.in-view:nth-child(2) { transition-delay: .08s; }
.reveal.in-view:nth-child(3) { transition-delay: .16s; }
.reveal.in-view:nth-child(4) { transition-delay: .24s; }
.reveal.in-view:nth-child(5) { transition-delay: .32s; }
.reveal.in-view:nth-child(6) { transition-delay: .40s; }

/* Card hover */
.card:hover,
.tarif-card:hover,
.feature-card:hover,
.course-card:hover,
.audience-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(var(--brand-dark-rgb), .18);
}
.tarif-card.tarif-popular:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(var(--brand-red-rgb), .28);
}

/* Pulse for live badges */
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.dash-lesson-now, .dash-tag-live { animation: pulse-live 2s ease-in-out infinite; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *        { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* pay-body (oplata page) */
.pay-body h2  { margin: 0 0 12px; font-size: 22px; color: var(--brand-dark); }
.pay-body p   { color: #444; line-height: 1.65; margin-bottom: 10px; }
.pay-body ul  { padding-left: 20px; margin: 10px 0 0; }
.pay-body li  { margin-bottom: 8px; color: #444; line-height: 1.5; font-size: 15px; }

/* ══════════════════════════════════════
   Sprint 1.7 — ОТЗЫВЫ (index.html #reviews)
   Old avatars used inline yellow/purple/green gradients and fell back to
   the global .card:hover purple shadow (rgba(85,71,179,…), line ~1905).
   Scoped overrides below — same pattern as #tarify/.section-why above —
   leave the shared .card/.card:hover rule untouched for other pages.
══════════════════════════════════════ */
#reviews .review-card {
  position: relative;
  border: 1px solid rgba(var(--brand-dark-rgb), .08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
#reviews .review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(var(--brand-dark-rgb), .14);
}
#reviews .review-quote {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 30px;
  height: 22px;
  background: var(--brand-red);
  opacity: .1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V13.5C0 6 4.8 1 12 0l1.6 3.4C8.4 4.8 6 8 6 12h6v12H0zm18 0V13.5C18 6 22.8 1 30 0l1.6 3.4C26.4 4.8 24 8 24 12h6v12H18z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V13.5C0 6 4.8 1 12 0l1.6 3.4C8.4 4.8 6 8 6 12h6v12H0zm18 0V13.5C18 6 22.8 1 30 0l1.6 3.4C26.4 4.8 24 8 24 12h6v12H18z'/%3E%3C/svg%3E") no-repeat center / contain;
}
#reviews .review-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
#reviews .review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: 18px;
  color: var(--brand-white);
  background: var(--brand-dark);
  box-shadow: 0 4px 10px rgba(var(--brand-dark-rgb), .2);
}
#reviews .review-card:nth-child(1) .review-avatar { background: var(--brand-red);    box-shadow: 0 4px 10px rgba(var(--brand-red-rgb), .3); }
#reviews .review-card:nth-child(2) .review-avatar { background: var(--brand-blue);   box-shadow: 0 4px 10px rgba(var(--brand-blue-rgb), .3); }
#reviews .review-card:nth-child(3) .review-avatar { background: var(--brand-orange); box-shadow: 0 4px 10px rgba(var(--brand-orange-rgb), .3); }
#reviews .review-name { font-weight: 700; color: var(--brand-dark); }
#reviews .review-role { font-size: 13px; color: rgba(var(--brand-dark-rgb), .7); }

/* ══════════════════════════════════════
   HEADER v2 — «Школам» (B2B, синяя кнопка) + «Кабинет» (ЛК)
   Добавлено при переходе на новую шапку (все страницы). Аддитивно —
   существующие правила .site-header/.nav/.header-cta не изменялись.
══════════════════════════════════════ */
.btn-schools {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--brand-white);
  box-shadow: 0 6px 16px rgba(var(--brand-blue-rgb), .28);
}
.btn-schools:hover {
  background: var(--brand-cyan);
  border-color: var(--brand-cyan);
  color: var(--brand-white);
  box-shadow: 0 10px 24px rgba(var(--brand-cyan-rgb), .32);
}
.header-cta .btn-schools:focus-visible,
.nav-actions .btn:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* Группа «Школам»/«Кабинет» в мобильном меню. На десктопе скрыта (кнопки в
   .header-cta). На ≤1080px существующее правило .header-cta .btn:not(.btn-primary)
   {display:none} прячет их в шапке, а здесь они показываются внутри .nav. */
.nav-actions { display: none; }
@media (max-width: 1080px) {
  .nav-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--brand-dark-rgb), .1);
  }
  .nav-actions .btn { width: 100%; }
}

/* ══════════════════════════════════════
   КАБИНЕТ (login.html) — чат и оплаты. Дополняет существующие dash-* стили.
══════════════════════════════════════ */
.dash-chat { display: flex; flex-direction: column; gap: 12px; }
.dash-msg { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.5; box-shadow: 0 2px 8px rgba(var(--brand-dark-rgb), .06); }
.dash-msg .who { display: block; font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 3px; }
.dash-msg-in { align-self: flex-start; background: #fff; border: 1px solid rgba(var(--brand-dark-rgb), .08); border-bottom-left-radius: 4px; color: var(--brand-dark); }
.dash-msg-out { align-self: flex-end; background: var(--brand-blue); color: var(--brand-white); border-bottom-right-radius: 4px; }
.dash-chat-bar { display: flex; gap: 8px; margin-top: 8px; }
.dash-chat-bar input { flex: 1; padding: 11px 14px; border: 1.5px solid #e2e2e8; border-radius: 10px; font-size: 14px; font-family: inherit; }
.dash-invoice { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid rgba(var(--brand-dark-rgb), .1); border-radius: 12px; background: #fff; margin-bottom: 12px; }
.dash-invoice-main strong { display: block; color: var(--brand-dark); font-size: 15px; }
.dash-invoice-main span { font-size: 13px; color: rgba(var(--brand-dark-rgb), .6); }
.dash-invoice-sum { font-size: 20px; font-weight: 800; color: var(--brand-dark); }
.dash-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.dash-pill-paid { background: #E8F5E9; color: #2E7D32; }
.dash-pill-due { background: rgba(var(--brand-orange-rgb), .14); color: var(--brand-orange); }