/* Шрифты хранятся на сайте (без Google Fonts — запросы посетителей не уходят за рубеж). Лицензия SIL OFL — assets/fonts/LICENSE-*.txt */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/unbounded-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/unbounded-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/unbounded-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/unbounded-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/unbounded-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/unbounded-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/golos-text-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/golos-text-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/golos-text-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/golos-text-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/golos-text-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/golos-text-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/golos-text-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/golos-text-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/golos-text-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Автошкола «Стимул» — дизайн-система, редакция 2. Решения и контрасты — в BRIEF.md, «Дизайн-решения (редакция 2)». */
:root {
  --white: #FFFFFF;
  --concrete: #F0F1EE;
  --asphalt: #23272B;
  --asphalt-2: #30363B;
  --red: #D7261E;
  --red-hover: #BC1F18;
  --red-deep: #9E1913;
  --yellow: #FFC629;
  --muted: #585E63;
  --haze: #A9B0B5;
  --pass: #2E9D5B;
  --error: #B5201A;
  --error-bg: #FBEAE8;
  --line-2: #DADDD7;
  --line-d: rgba(255, 255, 255, .14);
  --photo-bg: #E2E5DF;
  --f-d: 'Unbounded', 'Golos Text', sans-serif;
  --f-t: 'Golos Text', sans-serif;
  --fs-xs: 13px;
  --fs-s: 15px;
  --fs-1: 20px;
  --fs-2: 25px;
  --fs-3: 31px;
  --r-panel: 16px;
  --r-card: 12px;
  --r-ctl: 8px;
  --r-km: 6px;
  --gutter: 16px;
  --head-h: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --head-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body { min-width: 320px; background: var(--white); color: var(--asphalt); font: 400 16px/1.55 var(--f-t); -webkit-font-smoothing: antialiased; }
@media (min-width: 720px) { body { font-size: 17px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: inherit; }
a { color: var(--asphalt); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--muted); }
:focus-visible { outline: 2px solid var(--asphalt); outline-offset: 3px; }
.calc-out :focus-visible, .ribbon :focus-visible, .foot :focus-visible { outline-color: var(--white); }
.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 60; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--asphalt); color: var(--white); font-weight: 600; }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }
.nb { white-space: nowrap; }
.small { font-size: var(--fs-s); }
.ph { text-decoration: underline dotted var(--muted); text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: help; }
.ph-note { color: var(--muted); font-size: var(--fs-xs); }

/* фото и заглушки */
.photo { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-card); background: var(--photo-bg); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.is-broken { background: repeating-linear-gradient(135deg, #E2E5DF 0 14px, #D6DAD3 14px 28px); }
.photo.is-broken img { visibility: hidden; }
.photo.is-broken::after { content: attr(data-fallback); position: absolute; left: 16px; right: 16px; bottom: 14px; font: 600 var(--fs-s)/1.3 var(--f-t); color: var(--asphalt); }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--r-ctl); font: 600 16px/1.2 var(--f-t); text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn svg { flex: none; width: 18px; height: 18px; }
.btn-main { background: var(--red); color: var(--white); }
.btn-main:hover { background: var(--red-hover); color: var(--white); }
.btn-main:active { background: var(--red-deep); transform: translateY(1px); }
.btn-line { border-color: var(--asphalt); background: transparent; color: var(--asphalt); }
.btn-line:hover { background: var(--asphalt); color: var(--white); }
.btn-lg { min-height: 54px; padding-inline: 26px; font-size: 17px; }
.btn-wide { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* демо-плашка и шапка */
.ribbon { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 var(--gutter); background: var(--asphalt); color: var(--haze); font-size: var(--fs-xs); line-height: 1.4; }
.ribbon p { flex: 1; min-width: 0; padding-block: 8px; }
.ribbon button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--haze); cursor: pointer; }
.ribbon button:hover { color: var(--white); }
.ribbon svg { width: 14px; height: 14px; }
.top { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line-2); background: rgba(255, 255, 255, .97); }
.top-in { display: flex; align-items: center; gap: 16px; min-height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--asphalt); text-decoration: none; }
.brand svg { flex: none; width: 34px; height: 31px; }
.brand-txt { display: grid; line-height: 1.05; }
.brand-txt b { font: 700 19px/1 var(--f-d); letter-spacing: -.02em; }
.brand-txt small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.brand:hover { color: var(--asphalt); }
.nav, .top-phone, .top-cta { display: none; }
.call { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: var(--white); }
.call svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .top-phone { display: block; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .top-cta { display: inline-flex; }
  .call { display: none; }
}
@media (min-width: 1200px) {
  .brand { margin-right: 20px; }
  .nav { display: flex; gap: 0; margin-right: auto; }
  .nav .nav-phone { display: none; }
  .nav a { padding: 10px 8px; border-radius: var(--r-ctl); color: var(--muted); font-size: var(--fs-s); font-weight: 500; text-decoration: none; white-space: nowrap; }
  .nav a:hover { color: var(--asphalt); }
}

/* первый экран */
.hero { padding: 28px 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.h1 { font: 700 clamp(28px, 2.6vw + 19.5px, 42px)/1.12 var(--f-d); letter-spacing: -.025em; text-wrap: balance; overflow-wrap: break-word; }
.hero-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 22px; }
.hero-price b { font: 700 clamp(30px, 1vw + 26px, 40px)/1 var(--f-d); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-price span { color: var(--muted); font-size: clamp(17px, .4vw + 15.5px, 19px); }
/* скидка под ценой: сумма на жёлтой плашке, вся строка — ссылка на блок «Скидки» */
.hero-disc { max-width: 40ch; margin-top: 10px; font-size: clamp(16px, .3vw + 15px, 18px); line-height: 1.45; }
.hero-disc a { color: var(--asphalt); text-decoration: none; }
.hero-disc a:hover { text-decoration: underline; }
.hero-disc b { margin-right: 4px; padding: 1px 7px; border-radius: 6px; background: var(--yellow); font-weight: 700; white-space: nowrap; }
.mark { padding-inline: .06em; background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { max-width: 40ch; margin-top: 8px; color: var(--muted); font-size: clamp(17px, .4vw + 15.5px, 19px); }
.hero .cta-row .btn { flex: 1 1 auto; }
@media (max-width: 599px) { .hero .cta-row .btn-line { display: none; } }
.hero-media { position: relative; }
.hero-photo { aspect-ratio: 3 / 2; border-radius: var(--r-panel); }
.hero-lic {
  position: relative; display: grid; gap: 8px; width: min(272px, calc(100% - 28px)); margin: -44px 0 0 14px; padding: 14px 52px 14px 16px;
  border-radius: var(--r-card); background: linear-gradient(135deg, #FFFFFF 0%, #F3F4F1 100%); color: var(--asphalt); text-decoration: none;
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .18);
}
.hero-lic:hover { color: var(--asphalt); }
.hl-row { display: grid; gap: 1px; }
.hl-row span { color: var(--muted); font-size: var(--fs-xs); }
.hl-row b { font: 600 16px/1.2 var(--f-t); font-variant-numeric: tabular-nums; }
.hl-cat { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; min-width: 30px; height: 26px; border-radius: var(--r-km); background: var(--asphalt); color: var(--white); font: 700 14px/1 var(--f-d); }
.facts { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.facts li { position: relative; display: grid; gap: 2px; padding-top: 16px; }
.facts li::before { content: ''; position: absolute; left: 0; top: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--asphalt); }
.facts b { font: 600 16px/1.3 var(--f-d); }
.facts span { color: var(--muted); font-size: var(--fs-s); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line-2); list-style: none; }
.stats li { display: grid; align-content: start; gap: 6px; }
.stats b { font: 700 clamp(30px, 2.4vw + 22px, 52px)/1 var(--f-d); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats small { margin-left: .12em; font-size: .46em; letter-spacing: 0; }
.stats span { color: var(--muted); font-size: var(--fs-s); line-height: 1.35; }
@media (min-width: 720px) { .stats { gap: 24px; } .stats span { max-width: 22ch; } }
@media (min-width: 1024px) {
  .hero { padding: 56px 0 80px; }
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "copy media" "facts media"; column-gap: 72px; row-gap: 52px; }
  .hero-copy { grid-area: copy; align-self: end; }
  .h1 { font-size: clamp(38px, 1.6vw + 22px, 48px); }
  .hero .cta-row .btn { flex: 0 0 auto; }
  .hero-media { grid-area: media; align-self: center; padding-bottom: 36px; }
  .hero-lic { position: absolute; left: -40px; bottom: 0; margin: 0; }
  .facts { grid-area: facts; align-self: start; }
}
.rise { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* разделы */
.sec { padding-block: clamp(64px, 7vw, 104px); }
.sec-alt { background: var(--concrete); }
.sec-rule { border-top: 1px solid var(--line-2); }
.sec-head { display: grid; align-content: start; gap: 12px; max-width: 60ch; margin-bottom: clamp(28px, 3vw, 44px); }
.sec-head p { color: var(--muted); }
.h2 { font: 700 clamp(24px, 1.4vw + 19px, 38px)/1.15 var(--f-d); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; }
.h3 { font: 600 18px/1.3 var(--f-d); }

/* «Что входит»: дорога с едущим знаком «У» */
.sec-route { overflow: clip; background: var(--concrete); }
.road-wrap { position: relative; }
.road-wrap::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 44px; border-radius: var(--r-ctl); background: var(--asphalt);
  box-shadow: inset 4px 0 0 var(--asphalt), inset 6px 0 0 var(--yellow), inset -4px 0 0 var(--asphalt), inset -6px 0 0 var(--yellow);
}
.road-wrap::after { content: ''; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px; background: repeating-linear-gradient(to bottom, var(--white) 0 16px, transparent 16px 32px); }
.route { margin: 0; padding: 0 0 0 64px; list-style: none; }
.stage { position: relative; min-height: 56px; padding: 0 0 26px; }
.stage:last-child { padding-bottom: 4px; }
.km { position: absolute; left: -57px; top: 0; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-km); background: var(--white); color: var(--asphalt); font: 700 15px/1 var(--f-t); transition: background-color .3s, color .3s; }
.km svg { display: none; width: 16px; height: 16px; }
.stage.is-passed .km { background: var(--pass); color: var(--white); }
.stage.is-passed .km b { display: none; }
.stage.is-passed .km svg { display: block; }
.stage h3 { padding-top: 3px; font: 600 16px/1.35 var(--f-d); }
.stage p { margin-top: 2px; color: var(--muted); font-size: var(--fs-s); }
.stage .stage-date { margin-top: 6px; color: var(--asphalt); font-weight: 600; }
.stage-date:empty { display: none; }
.road-sign { position: absolute; left: 2px; top: 0; z-index: 2; width: 40px; height: 37px; pointer-events: none; transition: transform .6s var(--ease); will-change: transform; }
.road-sign svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.route-foot { display: grid; gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.extra-line { max-width: 52ch; color: var(--muted); }
.extra-line b { color: var(--asphalt); font-weight: 600; }
.market p { color: var(--muted); font-size: var(--fs-s); }
.scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; padding-bottom: 28px; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.scale-track { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(to right, #D5D9D2, #BCC2BA); }
.scale-track i { position: absolute; left: var(--x); top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--asphalt); box-shadow: 0 0 0 3px var(--concrete); }
.scale-track b { position: absolute; left: -2px; top: 22px; color: var(--asphalt); font-size: var(--fs-xs); font-weight: 600; font-style: normal; white-space: nowrap; }
@media (min-width: 960px) { .route-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
@media (min-width: 1100px) {
  .road-wrap::before { right: 0; bottom: auto; width: auto; height: 44px; box-shadow: inset 0 4px 0 var(--asphalt), inset 0 6px 0 var(--yellow), inset 0 -4px 0 var(--asphalt), inset 0 -6px 0 var(--yellow); }
  .road-wrap::after { left: 12px; right: 12px; top: 21px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(to right, var(--white) 0 16px, transparent 16px 32px); }
  .route { display: grid; grid-template-columns: repeat(var(--stages, 7), minmax(0, 1fr)); gap: 20px; padding: 72px 0 0; }
  .stage { min-height: 0; padding: 0; }
  .km { left: 0; top: -65px; }
  .stage h3 { font-size: 15px; }
  .road-sign { left: 0; top: 3px; }
}

/* «Сколько и когда»: расчёт и запись одним потоком */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: var(--r-panel); background: var(--white); }
.calc-a { padding: 22px 16px 26px; }
.calc-b { padding: 24px 16px 26px; }
.calc-out { background: var(--asphalt); color: var(--white); }
.out-in { display: grid; align-content: start; gap: 18px; padding: 26px 16px; }
.calc-out a { color: var(--white); }
.calc-out .ph { text-decoration-color: var(--haze); }
.calc-b:focus { outline: none; }
.step { min-width: 0; margin: 0; padding: 0; border: 0; }
.step + .step { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.step-title { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 16px; padding: 0; font: 600 16px/1.25 var(--f-d); }
legend.step-title { float: left; }
legend.step-title + * { clear: both; }
.step-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--asphalt); color: var(--white); font: 700 14px/1 var(--f-t); }
.cap { display: block; margin-bottom: 8px; color: var(--muted); font-size: var(--fs-s); font-weight: 500; }
.hint { margin-top: 10px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.day { position: relative; display: block; min-width: 0; }
.day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.day span { display: grid; place-content: center; gap: 2px; min-height: 58px; padding: 6px 4px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); text-align: center; transition: background-color .15s, border-color .15s, color .15s; }
.day small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.1; }
.day b { font: 600 15px/1.15 var(--f-t); white-space: nowrap; }
.day-other b { font: 600 14px/1.15 var(--f-t); white-space: normal; }
.day:hover span { border-color: var(--muted); }
.day input:checked + span { border-color: var(--asphalt); background: var(--asphalt); color: var(--white); }
.day input:checked + span small { color: var(--haze); }
.day input:focus-visible + span { box-shadow: 0 0 0 3px rgba(35, 39, 43, .25); }
.custom { margin-top: 14px; max-width: 280px; }
.field { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--white); color: var(--asphalt); font-weight: 600; }
.field:hover { border-color: var(--muted); }
.duo { display: grid; gap: 16px; }
.ctl { min-width: 0; }
.lanes { display: grid; grid-template-columns: repeat(var(--lanes, 2), minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--asphalt); border-radius: var(--r-ctl); background: var(--white); }
.lane { position: relative; display: block; margin: 0; cursor: pointer; }
.lane input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lane span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; color: var(--asphalt); font-weight: 600; text-align: center; transition: background-color .15s, color .15s; }
.lane + .lane span { background-image: linear-gradient(var(--line-2) 55%, transparent 55%); background-size: 2px 14px; background-repeat: repeat-y; background-position: left top; }
.lane input:checked + span { background-color: var(--asphalt); color: var(--white); }
.lane input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--haze); }
.ctl-dep { margin-top: 22px; }
.ctl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ctl-row .cap { margin: 0; }
.dep-out { font: 600 var(--fs-1)/1 var(--f-t); font-variant-numeric: tabular-nums; white-space: nowrap; }
.range { width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --fill: 0%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--asphalt) var(--fill), var(--line-2) var(--fill)); }
.range::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; border: 2px solid var(--asphalt); border-radius: 50%; background: var(--white); -webkit-appearance: none; appearance: none; }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-2); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--asphalt); }
.range::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid var(--asphalt); border-radius: 50%; background: var(--white); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(35, 39, 43, .22); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(35, 39, 43, .22); }
.range-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); }
/* карточка прав — неброско под бланк прав РФ: розово-голубой «ирисовый» фон, гильошная сетка, розетка справа,
   «RUS» в овале и номера полей (4a — дата выдачи, 9 — категории); всё светлое и прозрачное, текст читается как раньше */
.licence {
  position: relative; display: flex; flex-direction: column; justify-self: center; width: 100%; max-width: 360px; aspect-ratio: 1.586;
  overflow: hidden; padding: 18px 20px 18px; border-radius: var(--r-card); color: #2A2630;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(118, 168, 198, .2), transparent 62%),
    linear-gradient(118deg, #FBF1F3 0%, #F6E4EA 42%, #ECE6F2 74%, #E3EEF0 100%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
}
.licence::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 84% 48%, rgba(150, 52, 98, .07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(115deg, rgba(58, 88, 160, .045) 0 1px, transparent 1px 6px);
}
.licence::after {
  content: ''; position: absolute; right: -16%; top: 6%; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(150, 52, 98, .055) 0 2deg, transparent 2deg 8deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 31% 68%, transparent 69%);
  mask: radial-gradient(circle, transparent 30%, #000 31% 68%, transparent 69%);
}
.licence > * { position: relative; z-index: 1; }
.lic-top { display: flex; align-items: center; gap: 8px; color: #9C2B52; font-size: var(--fs-s); font-weight: 600; }
.lic-rus { display: inline-grid; flex: none; place-items: center; height: 18px; padding: 0 7px; border: 1.5px solid #2F57A3; border-radius: 50%; color: #2F57A3; font: 700 10px/1 var(--f-t); letter-spacing: .06em; }
.lic-n { margin-right: 5px; color: #7A6872; font-style: normal; font-weight: 500; }
.lic-label { margin-top: auto; color: #6C5C66; font-size: var(--fs-xs); }
.lic-date { font: 700 clamp(24px, 1.6vw + 19px, 32px)/1.1 var(--f-d); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
/* дата склеена неразрывными пробелами и не переносится: на узкой карточке (320 px, крупный шрифт) кегль подстраивается под её ширину */
.licence { container-type: inline-size; }
.lic-date { font-size: min(clamp(24px, 1.6vw + 19px, 32px), 9cqi); }
.lic-cats { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 10px; }
.lic-cats .lic-n { font-size: var(--fs-xs); }
.lic-cats span { display: grid; place-items: center; min-width: 36px; height: 30px; padding: 0 8px; border-radius: var(--r-km); background: #2C4C8C; color: var(--white); font: 700 15px/1 var(--f-d); }
.lic-cats .lic-at { background: transparent; color: #2C4C8C; box-shadow: inset 0 0 0 2px #2C4C8C; }
/* сноска «*» к сроку в заголовке и в карточке первого экрана */
.fn { margin-left: .04em; font-size: .42em; line-height: 0; vertical-align: super; }
.fn a { color: inherit; text-decoration: none; }
.fn-in { font-style: normal; }
.hero-note { max-width: 70ch; margin-top: 14px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
/* расчёт не ожил за 6 секунд (скрипт не загрузился) — показываем подсказку; появление — не анимация, его не отключаем */
.out-in { position: relative; }
.calc-wait { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--yellow); color: var(--asphalt); font-size: var(--fs-s); line-height: 1.4; visibility: hidden; }
html .calc-wait { animation: calc-wait 0s 6s forwards !important; }
.calc-out .calc-wait a { color: var(--asphalt); }
@keyframes calc-wait { to { visibility: visible; } }
html.calc-on .calc-wait { display: none; }
.licence.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: translateY(-4px) rotate(-.6deg); } }
.out-sum { color: #E4E7E4; font-size: var(--fs-s); }
.pay { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pay th, .pay td { padding: 10px 0; border-bottom: 1px solid var(--line-d); font-size: var(--fs-s); }
.pay th { color: var(--haze); font-weight: 500; text-align: left; }
.pay td { font: 600 16px/1.2 var(--f-t); text-align: right; white-space: nowrap; }
.pay tfoot th, .pay tfoot td { padding-top: 12px; border-top: 2px solid var(--yellow); border-bottom: 0; color: var(--white); }
.pay tfoot th { font-weight: 600; }
.pay tfoot td { font-size: var(--fs-1); font-weight: 800; }
.out-fine { color: var(--haze); font-size: var(--fs-xs); }
@media (min-width: 600px) {
  .calc-a, .calc-b { padding-inline: 28px; }
  .out-in { padding: 28px; }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .calc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "a out" "b out"; }
  .calc-a { grid-area: a; padding: 32px 36px 8px; }
  .calc-b { grid-area: b; padding: 0 36px 36px; }
  .calc-b .f { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-2); }
  .calc-out { grid-area: out; border-radius: 0 calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px) 0; }
  .out-in { position: sticky; top: calc(var(--head-h) + 20px); padding: 32px; }
}
@media (max-width: 959px) {
  .calc-a { border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .calc-b { border-radius: 0 0 var(--r-panel) var(--r-panel); }
}

/* форма записи (шаг 3) */
.f { display: grid; gap: 18px; }
.f .step-title { margin-bottom: 0; }
.f label { display: block; margin-bottom: 6px; font-size: var(--fs-s); font-weight: 500; }
.f input:not([type="checkbox"]):not([type="radio"]) { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--white); font-size: 16px; line-height: 1.35; }
.f input:hover { border-color: var(--muted); }
.f [aria-invalid="true"] { border-color: var(--error) !important; box-shadow: 0 0 0 1px var(--error); }
.f-row { display: grid; gap: 18px; }
.f .check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0; padding-block: 8px; font-size: 16px; font-weight: 500; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--asphalt); }
/* галочка скидки в расчёте: как «Ученику меньше 18 лет» в форме (там раскладка задана через .f .check) */
.disc-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 16px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.disc-check a { white-space: nowrap; }
.calc-b .btn-lg { padding-inline: 16px; text-wrap: balance; }
@media (max-width: 359px) { .calc-b .btn-lg { padding-inline: 12px; font-size: 16px; } }
.note { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--concrete); font-size: var(--fs-s); }
.err { margin-top: 6px; color: var(--error); font-size: var(--fs-s); }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 12px; align-items: start; margin-inline: -12px; padding: 12px; border-radius: var(--r-ctl); }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--asphalt); }
.f .consent label { margin: 0; font-weight: 400; line-height: 1.45; }
.consent .note, .consent .err { grid-column: 2; margin: 0; }
.consent.is-invalid { background: var(--error-bg); }
.f-alt { color: var(--muted); font-size: var(--fs-s); }
.done { display: grid; gap: 14px; justify-items: start; }
.done-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pass); color: var(--white); }
.done-mark svg { width: 24px; height: 24px; }
.done .h3 { font-size: var(--fs-2); }
.done h3:focus { outline: none; }
.done .small { max-width: 46ch; color: var(--muted); }
@media (min-width: 600px) { .f-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* как проходят занятия */
.sec-lessons { background: var(--concrete); }
.lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.lesson { margin: 0; }
.lesson .photo { display: block; aspect-ratio: 4 / 3; }
.lesson-cap { display: block; margin-top: 12px; }
.lesson b { display: block; font: 600 16px/1.3 var(--f-d); }
.lesson-cap > span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-s); line-height: 1.45; }
@media (min-width: 960px) { .lessons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .lesson .photo { aspect-ratio: 1 / 1; } }

/* отзывы: на телефоне — лента с прокруткой вбок, на широком — сетка */
.rv-head { display: grid; gap: 4px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.rv-head .sec-head { margin-bottom: 0; }
.rv-rates { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; margin-top: 8px; }
.rv-rate { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-card); text-decoration: none; transition: border-color .15s; }
.rv-rate:hover { border-color: var(--asphalt); color: var(--asphalt); }
.rv-rate b { font: 700 22px/1 var(--f-d); letter-spacing: -.03em; }
@media (min-width: 720px) { .rv-rates { gap: 10px; margin-top: 0; } .rv-rate { gap: 8px; min-height: 52px; padding: 8px 14px; } .rv-rate b { font-size: 26px; } }
.rv-rate svg { width: 18px; height: 18px; margin-right: 2px; color: var(--yellow); }
.rv-rate span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 360px); gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); list-style: none; scrollbar-width: thin; }
.rv { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--white); scroll-snap-align: start; }
.rv-stars { display: flex; gap: 2px; color: var(--yellow); }
.rv-stars svg { width: 16px; height: 16px; }
.rv-text { flex: 1; margin: 0; }
.rv-text p { font-size: 16px; line-height: 1.5; }
.rv-by { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.rv-by b { font: 600 16px/1.25 var(--f-t); }
.rv-by span { color: var(--muted); font-size: var(--fs-xs); }
.rv-note { margin-top: 18px; color: var(--muted); font-size: var(--fs-s); }
.rv-note a { color: var(--asphalt); }
@media (min-width: 720px) {
  .reviews { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 1024px) {
  .rv-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* вопросы */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.faq details { border-top: 1px solid var(--line-2); }
.faq details:last-child { border-bottom: 1px solid var(--line-2); }
.faq summary { position: relative; display: block; padding: 18px 44px 18px 0; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid var(--asphalt); border-bottom: 2px solid var(--asphalt); transform: rotate(45deg); transition: transform .2s var(--ease); }
.faq details[open] summary::after { margin-top: -3px; transform: rotate(-135deg); }
.faq summary:hover { color: var(--muted); }
.faq details p { max-width: 62ch; padding-bottom: 18px; color: var(--muted); }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } }

/* контакты и карта */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.addr { margin-top: 20px; font: 700 clamp(20px, .8vw + 17px, 26px)/1.25 var(--f-d); }
.addr-sub { margin-top: 4px; color: var(--muted); }
.c-list { margin: 22px 0 0; }
.c-list div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.c-list dt { color: var(--muted); font-size: var(--fs-s); }
.c-list dd { margin: 0; overflow-wrap: anywhere; }
.map { position: relative; height: 320px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-panel); background: #E2E5DF; }
.map-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 24px; background: repeating-linear-gradient(135deg, #E2E5DF 0 14px, #D9DDD6 14px 28px); text-align: center; }
.map-fallback b { font: 600 var(--fs-1)/1.2 var(--f-t); }
.map-fallback span { color: var(--muted); }
.map.is-ready .map-fallback { display: none; }
.map .leaflet-container, .map.leaflet-container { background: #E2E5DF; font: inherit; }
.map .leaflet-tile-pane { filter: grayscale(.92) contrast(1.04) brightness(1.03); }
.leaflet-marker-icon.pin { display: block; }
.pin svg { width: 40px; height: 37px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.routes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.routes .btn { flex: 1 1 auto; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } .map { height: 400px; } }

/* сведения об образовательной организации */
.sec-docs { padding-block: 48px 56px; }
.docs-h { font: 600 18px/1.3 var(--f-d); }
.docs { display: grid; grid-template-columns: minmax(0, 1fr); margin: 18px 0 0; padding: 0; list-style: none; }
.docs li { border-top: 1px solid var(--line-2); }
.docs a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; font-size: var(--fs-s); font-weight: 500; text-decoration: none; }
.docs svg { flex: none; width: 18px; height: 22px; color: var(--muted); }
.docs a:hover span { text-decoration: underline; }
.sec-docs .ph-note { margin-top: 14px; }
@media (min-width: 720px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1024px) { .docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* футер и мобильная панель */
/* пунктир дорожной разметки между крупными частями страницы */
.roadline { height: 14px; background: repeating-linear-gradient(90deg, var(--white) 0 28px, transparent 28px 52px) 0 50% / 100% 3px no-repeat, var(--asphalt); }
.foot { padding: 56px 0 calc(96px + env(safe-area-inset-bottom)); background: var(--asphalt); color: var(--haze); font-size: var(--fs-s); }
.foot a { color: var(--white); }
.foot a:hover { color: var(--haze); }
.foot-grid { display: grid; gap: 28px; }
.foot p + p { margin-top: 6px; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--white); font: 700 var(--fs-1)/1 var(--f-d); }
.foot-brand svg { flex: none; width: 30px; height: 27px; }
.foot-h { margin-bottom: 6px; color: var(--white); font-weight: 600; }
.foot-legal { display: grid; gap: 10px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line-d); font-size: var(--fs-xs); }
.foot-legal p + p { margin-top: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-gov { column-gap: 14px; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .foot { padding-bottom: 48px; } .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: var(--white); transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }
.mbar.show { transform: none; visibility: visible; transition: transform .25s var(--ease); }
.mbar.show.off { transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }
.mbar .btn { min-height: 48px; padding-inline: 14px; }
.mbar .btn-line { padding: 0; }
@media (min-width: 1024px) { .mbar { display: none; } }

/* документы: КП, политика, согласие */
.doc-top { border-bottom: 1px solid var(--line-2); background: var(--white); }
.doc-top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.doc-top .brand { margin-right: 0; }
@media (max-width: 519px) { .doc-top .btn { display: none; } }
.doc { max-width: calc(760px + 2 * var(--gutter)); padding-block: clamp(32px, 6vw, 72px) 72px; }
.doc h1 { font: 700 clamp(24px, 2vw + 17px, 38px)/1.15 var(--f-d); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; }
.doc h2 { margin: 40px 0 12px; font: 600 18px/1.3 var(--f-d); }
.doc p, .doc li { max-width: 68ch; }
.doc p + p, .doc ul + p, .doc ol + p { margin-top: 12px; }
.doc ul, .doc ol { margin: 12px 0 0; padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc-meta { margin-top: 12px; color: var(--muted); }
.draft { margin: 24px 0; padding: 16px 18px; border: 1px solid var(--line-2); border-left: 4px solid var(--asphalt); border-radius: var(--r-ctl); background: var(--white); }
.draft b { display: block; margin-bottom: 4px; }
.back { font-weight: 600; }
.kp { max-width: calc(1040px + 2 * var(--gutter)); }
.kp-hero { display: grid; gap: 16px; justify-items: start; }
.kp-hero h1 { max-width: 22ch; }
.kp-hero p { color: var(--muted); }
.kp-sec { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line-2); }
.kp-sec > h2 { margin-top: 0; }
.kp-sec > p { max-width: 64ch; color: var(--muted); }
.kp-list { display: grid; max-width: 780px; margin: 20px 0 0; padding: 0; list-style: none; }
.kp-list li { position: relative; max-width: none; margin: 0; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line-2); }
.kp-list li + li { margin-top: 0; }
.kp-list li::before { content: ''; position: absolute; left: 2px; top: 25px; width: 10px; height: 2px; background: var(--asphalt); }
.tariffs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.tariff { display: grid; align-content: start; gap: 14px; padding: 24px; border: 1px solid var(--line-2); border-radius: var(--r-panel); background: var(--white); }
.tariff h3 { font: 700 var(--fs-1)/1.2 var(--f-d); }
.tariff-tag { justify-self: start; padding: 4px 10px; border-radius: var(--r-km); background: var(--white); color: var(--asphalt); font-size: var(--fs-xs); font-weight: 600; }
.tariff-price { font: 800 var(--fs-3)/1 var(--f-d); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tariff-price small { display: block; margin-top: 8px; color: var(--muted); font: 400 var(--fs-s)/1.4 var(--f-t); letter-spacing: 0; }
.doc .tariff ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-s); }
.tariff-fine { color: var(--muted); font-size: var(--fs-xs); }
.tariff-main { border-color: var(--asphalt); background: var(--asphalt); color: var(--white); }
.tariff-main .tariff-price small, .tariff-main .tariff-fine { color: var(--haze); }
.year { display: grid; gap: 6px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--white); font-size: var(--fs-s); }
.doc .year p + p { margin-top: 0; }
.kp-sec > .payback { max-width: 40ch; margin-top: 16px; color: var(--asphalt); font: 600 var(--fs-1)/1.4 var(--f-t); }
.kp-steps { display: grid; max-width: 780px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: k; }
.doc .kp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; max-width: none; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line-2); counter-increment: k; }
.kp-steps li::before { content: counter(k); font: 800 var(--fs-1)/1.2 var(--f-d); }
.kp-contacts { display: grid; gap: 10px; margin-top: 16px; }
.kp-contacts a { font-weight: 600; }
@media (min-width: 900px) { .tariffs { grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; } .tariff-main { padding: 28px; } }
@media print {
  .top, .ribbon, .mbar, .no-print, #agentus-slot { display: none !important; }
  body { background: var(--white); font-size: 11pt; }
  .doc { padding-block: 0; }
  .kp-sec { break-before: page; margin-top: 0; padding-top: 0; border-top: 0; }
  .tariff, .year { border: 1px solid var(--muted); background: none; color: var(--asphalt); }
  .tariff-main { border: 2px solid var(--asphalt); }
  .tariff-main .tariff-price small, .tariff-main .tariff-fine { color: var(--muted); }
  .tariff, .kp-list li, .kp-steps li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Боевая версия: мобильное меню, карта по кнопке, сведения, cookie ===== */
.burger { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--white); color: var(--asphalt); cursor: pointer; }
.burger svg { width: 20px; height: 20px; }
.burger .i-shut { display: none; }
.menu-open .burger .i-open { display: none; }
.menu-open .burger .i-shut { display: block; }
@media (max-width: 1199px) {
  .nav { position: fixed; left: 0; right: 0; top: var(--head-h); z-index: 49; display: grid; align-content: start; max-height: calc(100dvh - var(--head-h)); overflow-y: auto; padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom)); border-bottom: 1px solid var(--line-2); background: var(--white); box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .35); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s; }
  .menu-open .nav { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s var(--ease); }
  .nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line-2); color: var(--asphalt); font-weight: 600; text-decoration: none; }
  .nav .nav-phone { border-bottom: 0; color: var(--red); font: 600 var(--fs-1)/1.2 var(--f-t); }
  .menu-open { overflow: hidden; }
}
@media (min-width: 1200px) { .burger { display: none; } }
.top-in .call { order: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.f-fail { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--error-bg); }
.how { margin-top: 12px; max-width: 46ch; color: var(--muted); }

.map-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center;
  background: linear-gradient(90deg, rgba(35, 39, 43, .06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(rgba(35, 39, 43, .06) 1px, transparent 1px) 0 0 / 28px 28px, #E8EBE5; }
.map-pin { width: 44px; height: 40px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.map-addr { display: grid; gap: 2px; }
.map-addr b { font: 600 18px/1.25 var(--f-d); }
.map-addr span { color: var(--muted); font-size: var(--fs-s); }
.map-card .btn { background: var(--white); }
.map-card .btn:hover { background: var(--asphalt); }
.map-note { color: var(--muted); font-size: var(--fs-xs); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-ready .map-card { display: none; }

.docs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.docs-all { font-weight: 600; }

.cookie { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 640px; padding: 14px 16px; border-radius: var(--r-card); background: var(--asphalt); color: var(--white); font-size: var(--fs-s); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .6); }
.cookie p { flex: 1 1 260px; }
.cookie a { color: var(--white); }
.cookie .btn-line { min-height: 44px; border-color: var(--white); color: var(--white); }
.cookie .btn-line:hover { background: var(--white); color: var(--asphalt); }
@media (max-width: 1023px) { .cookie { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* «Сведения об образовательной организации» */
.sv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: clamp(28px, 5vw, 56px) 72px; }
.sv-crumbs { color: var(--muted); font-size: var(--fs-s); }
.sv-crumbs a { color: var(--muted); }
.sv h1 { margin-top: 8px; font: 700 clamp(20px, 1.6vw + 15px, 34px)/1.2 var(--f-d); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; }
.sv-intro { max-width: 68ch; margin-top: 12px; color: var(--muted); }
.sv-side { align-self: start; }
.sv-side ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.sv-side li { border-bottom: 1px solid var(--line-2); }
.sv-side a { display: block; padding: 11px 0; color: var(--asphalt); font-size: var(--fs-s); font-weight: 500; line-height: 1.35; text-decoration: none; }
.sv-side a:hover { color: var(--muted); }
.sv-side a[aria-current="page"] { color: var(--red); font-weight: 700; }
.sv-side summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); font-weight: 600; cursor: pointer; list-style: none; }
.sv-side summary::-webkit-details-marker { display: none; }
.sv-side summary::after { content: ''; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--asphalt); border-bottom: 2px solid var(--asphalt); transform: rotate(45deg); }
.sv-side details[open] summary { margin-bottom: 8px; }
.sv-body { min-width: 0; }
.sv-text { max-width: 68ch; margin-top: 18px; }
.sv-rows { margin: 22px 0 0; border-top: 1px solid var(--line-2); }
.sv-rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.sv-rows dt { color: var(--muted); font-size: var(--fs-s); }
.sv-rows dd { margin: 0; overflow-wrap: anywhere; }
.sv-empty { color: var(--muted); }
.sv-people { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: var(--fs-s); }
.sv-people th, .sv-people td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.sv-people th { color: var(--muted); font-weight: 500; }
.sv-scroll { overflow-x: auto; }
.sv-docs { display: grid; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.sv-docs li { border-bottom: 1px solid var(--line-2); }
.sv-docs a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; font-weight: 500; text-decoration: none; }
.sv-docs svg { flex: none; width: 18px; height: 22px; color: var(--muted); }
.sv-docs a:hover span { text-decoration: underline; }
.sv-index { display: grid; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: sv; border-top: 1px solid var(--line-2); }
.sv-index li { border-bottom: 1px solid var(--line-2); counter-increment: sv; }
.sv-index a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 14px 0; font-weight: 600; text-decoration: none; }
.sv-index a::before { content: counter(sv); color: var(--muted); font: 600 var(--fs-s)/1.6 var(--f-t); }
.sv-index a:hover span { text-decoration: underline; }
.sv-updated { margin-top: 28px; color: var(--muted); font-size: var(--fs-xs); }
@media (min-width: 720px) { .sv-rows > div { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; } }
@media (min-width: 1024px) {
  .sv { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
  .sv-head { grid-column: 1 / -1; }
  .sv-side details summary { display: none; }
  .sv-side { position: sticky; top: calc(var(--head-h) + 20px); max-height: calc(100vh - var(--head-h) - 40px); overflow-y: auto; }
}

/* страница 404 */
.nf { display: grid; justify-items: start; gap: 16px; padding-block: clamp(48px, 10vw, 120px); }
.nf h1 { font: 700 clamp(28px, 2vw + 20px, 40px)/1.12 var(--f-d); letter-spacing: -.02em; }
.nf p { max-width: 48ch; color: var(--muted); }
@media print { .burger, .cookie, .map, .routes { display: none !important; } }

/* ---------- карточки занятий-ссылки ---------- */
.lesson.is-link { display: block; border-radius: var(--r-card); color: inherit; text-decoration: none; }
.lesson .go { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: var(--white); font: 700 18px/1 var(--f-t); box-shadow: 0 4px 12px rgba(35, 39, 43, .25); transition: transform .2s var(--ease); }
.lesson .more { display: inline-block; margin-top: 8px; color: var(--red); font-size: var(--fs-s); font-style: normal; font-weight: 600; }
.lesson.is-link:hover { color: inherit; }
.lesson.is-link:hover .go { transform: translateX(3px); }
.lesson.is-link:hover .more { text-decoration: underline; }
.lesson.is-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

/* ---------- плашка «Инструкторы и автопарк» на главной ---------- */
.team-plate { display: grid; gap: 22px; margin-top: clamp(36px, 4vw, 56px); padding: clamp(22px, 3vw, 36px); border-radius: var(--r-panel); background: var(--asphalt); color: var(--white); }
.team-h { font: 700 clamp(22px, 1.2vw + 17px, 30px)/1.15 var(--f-d); letter-spacing: -.02em; text-wrap: balance; }
.team-copy p { max-width: 52ch; margin-top: 8px; color: var(--haze); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.chips li { padding: 6px 12px; border-radius: 99px; background: var(--asphalt-2); color: var(--white); font-size: var(--fs-s); }
.team-links { display: grid; align-content: start; gap: 10px; }
.team-link { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 18px; border: 1px solid var(--line-d); border-radius: var(--r-card); color: var(--white); font: 600 17px/1.2 var(--f-d); text-decoration: none; transition: border-color .15s; }
.team-link b { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--yellow); color: var(--asphalt); font: 700 14px/1 var(--f-t); }
.team-link i { margin-left: auto; color: var(--yellow); font-size: 20px; font-style: normal; }
.team-link:hover { border-color: var(--yellow); color: var(--white); }
.team-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
@media (min-width: 960px) { .team-plate { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 40px; } }
/* блок «Скидки»: та же тёмная плашка, категории — списком с галочками */
.disc-plate { scroll-margin-top: calc(var(--head-h) + 16px); }
.disc-plate .mark { background: none; color: var(--yellow); }
.disc-list { display: grid; gap: 8px 24px; margin: 18px 0 0; padding: 0; list-style: none; }
.disc-list li { position: relative; padding-left: 26px; color: var(--white); line-height: 1.4; }
.disc-list li::before { content: ''; position: absolute; left: 2px; top: .32em; width: 12px; height: 7px; border-left: 2.5px solid var(--yellow); border-bottom: 2.5px solid var(--yellow); transform: rotate(-45deg); }
.team-copy .disc-note { margin-top: 16px; font-size: var(--fs-s); }
@media (min-width: 720px) { .disc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- страница занятия ---------- */
.lp { padding-top: clamp(20px, 3vw, 36px); }
.lp-hero { display: grid; gap: 28px; margin-top: 18px; }
.lp-copy .lead { max-width: 46ch; margin-top: 14px; }
.lp .cta-row .btn { flex: 1 1 auto; }
.lp-photo { aspect-ratio: 3 / 2; border-radius: var(--r-panel); }
.lp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.lp-facts li { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 16px; border-radius: var(--r-card); background: var(--concrete); container-type: inline-size; }
/* длинное слово (--w — его длина в буквах, ставит шаблон) мельчает, чтобы влезть в плашку целиком; мельче 13px — уже перенос */
.lp-facts b { font: 700 clamp(15px, .9vw + 11.5px, 23px)/1.2 var(--f-d); font-size: clamp(13px, 100cqi / var(--w, 1) / .86, clamp(15px, .9vw + 11.5px, 23px)); letter-spacing: -.02em; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 379px) { .lp-facts { grid-template-columns: minmax(0, 1fr); } }
.lp-facts span { color: var(--muted); font-size: var(--fs-s); line-height: 1.4; }
.lp-body { margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 960px) {
  .lp-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 56px; }
  .lp .cta-row .btn { flex: 0 0 auto; }
  .lp-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lp-list { margin-top: clamp(48px, 6vw, 80px); padding-block: clamp(48px, 6vw, 80px); background: var(--concrete); }
.lp-list .h2, .lp-more .h2 { margin-bottom: clamp(20px, 3vw, 32px); }
.people, .cars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .people, .cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 18px; border-radius: var(--r-card); background: var(--white); }
.ava { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--asphalt); }
.ava b { color: var(--yellow); font: 700 20px/1 var(--f-d); letter-spacing: -.02em; }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.who b { display: block; font: 600 16px/1.3 var(--f-d); }
.who span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-s); line-height: 1.35; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags i { padding: 3px 10px; border-radius: 99px; background: var(--concrete); color: var(--asphalt); font-size: var(--fs-xs); font-style: normal; }
.person p { grid-column: 1 / -1; margin-top: 8px; color: var(--muted); font-size: var(--fs-s); }
.car { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: var(--r-card); background: var(--white); }
.car-ph { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 8px; overflow: hidden; border-radius: 10px; background: var(--concrete); color: var(--asphalt-2); }
.car-ph svg { width: 72%; height: auto; aspect-ratio: 80 / 32; }
.car-ph img { width: 100%; height: 100%; object-fit: cover; }
.car-name { font: 600 17px/1.25 var(--f-d); }
.car-sub, .car-note { color: var(--muted); font-size: var(--fs-s); }
.car-specs { display: grid; gap: 6px; margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: var(--fs-s); }
.car-specs div { display: flex; justify-content: space-between; gap: 12px; }
.car-specs dt { color: var(--muted); }
.car-specs dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.lp-gallery { padding-top: clamp(40px, 5vw, 64px); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery .photo { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-cta { margin-top: clamp(48px, 6vw, 80px); }
.lp-cta-in { display: grid; gap: 18px; padding-block: clamp(28px, 4vw, 44px); border-block: 1px solid var(--line-2); }
.lp-cta p { max-width: 56ch; margin-top: 8px; color: var(--muted); }
@media (min-width: 960px) { .lp-cta-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; } }
.lp-more { padding-block: clamp(48px, 6vw, 80px); }
@media (min-width: 960px) { .lessons-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- длинный текст: страницы занятий и статьи ---------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 14px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 40px; font: 700 clamp(20px, .8vw + 17px, 26px)/1.25 var(--f-d); letter-spacing: -.015em; text-wrap: balance; scroll-margin-top: calc(var(--head-h) + 16px); }
.prose h3 { margin-top: 28px; font: 600 18px/1.3 var(--f-d); }
.prose h2 + *, .prose h3 + * { margin-top: 10px; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--asphalt); text-decoration-color: var(--red); text-underline-offset: 3px; }
.prose .note { padding: 14px 16px; border-left: 4px solid var(--yellow); border-radius: 0 var(--r-card) var(--r-card) 0; background: var(--concrete); font-size: inherit; }

/* ---------- статьи ---------- */
.arts-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.arts-head .sec-head { margin-bottom: 0; }
.arts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 18px; }
@media (min-width: 720px) { .arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .arts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
.art-card { display: grid; align-content: start; gap: 8px; color: inherit; text-decoration: none; }
.art-card:hover { color: inherit; }
.art-card:hover b { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.art-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: var(--r-card); }
.art-cover { display: block; aspect-ratio: 16 / 9; margin-bottom: 6px; }
.art-cover.is-blank { display: grid; align-items: end; justify-items: start; padding: 14px; background: repeating-linear-gradient(90deg, var(--yellow) 0 22px, transparent 22px 40px) 0 62% / 100% 4px no-repeat, linear-gradient(160deg, #4A5157, var(--asphalt)); }
.art-cover i { padding: 4px 10px; border-radius: 99px; background: var(--white); color: var(--asphalt); font: 600 13px/1.2 var(--f-t); font-style: normal; }
.art-meta { color: var(--muted); font-size: var(--fs-xs); }
.art-card b { font: 600 17px/1.3 var(--f-d); text-wrap: balance; }
.art-lead { color: var(--muted); font-size: var(--fs-s); line-height: 1.45; }
.arts-page { padding-block: clamp(20px, 3vw, 36px) clamp(56px, 7vw, 96px); }
.arts-page .sec-head { margin-top: 18px; }
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--white); color: var(--asphalt); font: 500 15px/1 var(--f-t); cursor: pointer; }
.chip:hover { border-color: var(--asphalt); }
.chip[aria-pressed="true"] { border-color: var(--asphalt); background: var(--asphalt); color: var(--white); }
.art { padding-block: clamp(20px, 3vw, 36px) clamp(56px, 7vw, 96px); }
.art-head { max-width: 52rem; margin-top: 18px; }
.art-head .art-meta { margin-bottom: 10px; font-size: var(--fs-s); }
.art-head .lead { max-width: 60ch; margin-top: 14px; }
.art .h1 { font-size: clamp(22px, 2.4vw + 14.5px, 40px); -webkit-hyphens: auto; hyphens: auto; }
.art-upd { margin-top: 10px; color: var(--muted); font-size: var(--fs-xs); }
.art-photo { aspect-ratio: 16 / 9; margin-top: 28px; border-radius: var(--r-panel); }
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: clamp(28px, 4vw, 48px); }
.toc { padding: 16px 18px; border-radius: var(--r-card); background: var(--concrete); font-size: var(--fs-s); }
.toc p { margin-bottom: 8px; font: 600 15px/1.3 var(--f-d); }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li + li { margin-top: 6px; }
.toc a { color: var(--asphalt); }
.art-cta { display: grid; align-content: start; gap: 12px; padding: 20px; border-radius: var(--r-panel); background: var(--asphalt); color: var(--haze); }
.art-cta-h { color: var(--white); font: 700 19px/1.25 var(--f-d); }
.art-cta p a { color: var(--white); text-decoration-color: var(--yellow); }
.art-cta p a:hover { color: var(--haze); }
.art-cta-tel { color: var(--white); font-weight: 600; text-align: center; }
.art-cta-tel:hover { color: var(--haze); }
.art-more { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line-2); }
.art-more .h2 { margin-bottom: 20px; }
@media (min-width: 1024px) {
  .art-grid { grid-template-columns: 220px minmax(0, 1fr) 280px; align-items: start; gap: 40px; }
  .art-grid > .prose:first-child { grid-column: 1 / 3; }
  .toc, .art-cta { position: sticky; top: calc(var(--head-h) + 20px); }
}

/* ---------- подвал и меню ---------- */
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
@media (min-width: 1200px) and (max-width: 1399px) { .nav a.nav-x { display: none; } }
@media (prefers-reduced-motion: reduce) { .lesson .go, .team-link { transition: none; } .lesson.is-link:hover .go { transform: none; } }

/* ---------- версия для слабовидящих: с 25.10.2025 не обязательна (приказ Рособрнадзора № 1353), оставлена для удобства; кнопка в шапке и подвале, панель настроек ---------- */
.eye { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--white); color: var(--asphalt); cursor: pointer; }
.eye svg { width: 22px; height: 22px; }
.eye:hover { border-color: var(--asphalt); }
.foot-a11y { padding: 0; border: 0; background: none; color: var(--white); font: inherit; text-decoration: underline; cursor: pointer; }
.foot-a11y:hover { color: var(--haze); }
.a11y-bar { position: relative; z-index: 60; border-bottom: 2px solid var(--asphalt); background: var(--white); color: var(--asphalt); }
.a11y-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block: 10px; }
.a11y-g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.a11y-g b { margin-right: 2px; font: 600 15px/1.2 var(--f-t); }
.a11y-bar button { min-height: 40px; padding: 0 12px; border: 2px solid var(--asphalt); border-radius: 8px; background: var(--white); color: var(--asphalt); font: 600 16px/1 var(--f-t); cursor: pointer; }
.a11y-bar button[aria-pressed="true"] { background: var(--asphalt); color: var(--white); }
.a11y-bar .a11y-off { margin-left: auto; }
html.a11y-s1 body { zoom: 1.15; }
html.a11y-s2 body { zoom: 1.3; }
html.a11y-bw { --white: #FFFFFF; --concrete: #FFFFFF; --asphalt: #000000; --asphalt-2: #000000; --muted: #000000; --haze: #FFFFFF; --red: #000000; --red-hover: #000000; --red-deep: #000000; --yellow: #FFFFFF; --line-2: #000000; --line-d: #FFFFFF; --photo-bg: #FFFFFF; --pass: #000000; --error: #000000; --error-bg: #FFFFFF; }
html.a11y-wb { --white: #000000; --concrete: #000000; --asphalt: #FFFFFF; --asphalt-2: #FFFFFF; --muted: #FFFFFF; --haze: #000000; --red: #FFFFFF; --red-hover: #FFFFFF; --red-deep: #FFFFFF; --yellow: #000000; --line-2: #FFFFFF; --line-d: #000000; --photo-bg: #000000; --pass: #FFFFFF; --error: #FFFFFF; --error-bg: #000000; }
/* Схемы «чёрный на белом» и «белый на чёрном»: один фон и один цвет текста на всей странице. Переменные выше перекрашивают
   только то, что задано через них, а у карточек, плашек и шкал цвета и градиенты зашиты — поэтому фон, цвет, рамки и тени
   задаются всем элементам сразу. Блоки различаются рамками, выбранное (день старта, темп, нажатая кнопка, текущий раздел,
   пройденный этап) — в обратных цветах. Фото и значки (svg) не перекрашиваются. */
html.a11y-bw { --a-bg: #FFFFFF; --a-fg: #000000; color-scheme: light; }
html.a11y-wb { --a-bg: #000000; --a-fg: #FFFFFF; color-scheme: dark; }
html.a11y, html.a11y body { background: var(--a-bg); color: var(--a-fg); }
html.a11y body { letter-spacing: .02em; }
html.a11y body :not(svg, svg *, img, picture, video, iframe) {
  background-color: var(--a-bg) !important; background-image: none !important; color: var(--a-fg) !important;
  border-color: var(--a-fg) !important; outline-color: var(--a-fg) !important; box-shadow: none !important; text-shadow: none !important;
}
html.a11y body ::before, html.a11y body ::after { background-image: none !important; color: var(--a-fg) !important; border-color: var(--a-fg) !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y ::placeholder { color: var(--a-fg) !important; opacity: .7; }
html.a11y :focus-visible { outline: 3px solid var(--a-fg) !important; outline-offset: 3px; }
html.a11y input[type="checkbox"], html.a11y input[type="radio"] { accent-color: var(--a-fg); }
html.a11y :is(.btn, .call, .skip, .hero-lic, .hl-cat, .km, .step-n, .lanes, .licence, .lic-cats span, .note, .rv, .map, .map-card, .cookie, .team-plate, .team-link b, .lp-list, .ava, .tags i, .car-ph, .art-cover i, .chip, .art-cta, .lesson .go, .done-mark, .consent.is-invalid, .f-fail, .tariff, .tariff-tag) { border: 2px solid var(--a-fg) !important; }
html.a11y :is(.sec-alt, .sec-route, .sec-lessons, .foot) { border-top: 2px solid var(--a-fg); }
html.a11y .calc { border-width: 2px; }
html.a11y .calc-out { border-top: 2px solid var(--a-fg); }
@media (min-width: 960px) { html.a11y .calc-out { border-top: 0; border-left: 2px solid var(--a-fg); } }
@media (max-width: 1199px) { html.a11y .nav { border-bottom: 2px solid var(--a-fg); } }
html.a11y .lane + .lane span { border-left: 2px solid var(--a-fg); }
html.a11y .roadline { display: none; }
html.a11y .road-wrap::before { background-color: var(--a-bg) !important; border: 2px solid var(--a-fg); }
html.a11y .scale-track { border: 2px solid var(--a-fg); }
html.a11y .scale-track i { background-color: var(--a-fg) !important; }
html.a11y :is(.day input:checked + span, .lane input:checked + span, [aria-pressed="true"], [aria-current="page"], .stage.is-passed .km),
html.a11y :is(.day input:checked + span, .lane input:checked + span, [aria-pressed="true"], [aria-current="page"], .stage.is-passed .km) * { background-color: var(--a-fg) !important; color: var(--a-bg) !important; border-color: var(--a-fg) !important; }
html.a11y .range::-webkit-slider-runnable-track { height: 10px; border: 2px solid var(--a-fg); background: linear-gradient(to right, var(--a-fg) var(--fill), var(--a-bg) var(--fill)); }
html.a11y .range::-webkit-slider-thumb { margin-top: -10px; border: 3px solid var(--a-fg); background: var(--a-bg); box-shadow: none; }
html.a11y .range::-moz-range-track { border: 2px solid var(--a-fg); background: var(--a-bg); }
html.a11y .range::-moz-range-progress { background: var(--a-fg); }
html.a11y .range::-moz-range-thumb { border: 3px solid var(--a-fg); background: var(--a-bg); box-shadow: none; }
html.a11y a { text-decoration: underline; }
html.a11y .btn, html.a11y .lesson, html.a11y .art-card, html.a11y .team-link, html.a11y .brand { text-decoration: none; }
html.a11y .mark { background: none; text-decoration: underline; text-decoration-thickness: .08em; }
html.a11y .rise { animation: none; }
html.a11y .rv-stars, html.a11y .rv-rate svg { color: var(--asphalt); }
html.a11y .art-cover.is-blank, html.a11y .photo.is-broken { background: var(--concrete); border: 2px solid var(--asphalt); }
html.a11y .lp-facts li, html.a11y .toc, html.a11y .person, html.a11y .car, html.a11y .chips li { border: 2px solid var(--asphalt); }
html.a11y-noimg img { visibility: hidden; }
html.a11y-noimg .photo { background: var(--concrete); border: 2px solid var(--asphalt); }
html.a11y-noimg .photo::after { content: attr(data-fallback); position: absolute; left: 12px; right: 12px; bottom: 10px; color: var(--asphalt); font: 600 var(--fs-s)/1.3 var(--f-t); }
/* крупный шрифт: узкие колонки складываются, этапы курса и на десктопе идут столбиком — длинные слова не вылезают за плитки */
html.a11y .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
html.a11y .person { grid-template-columns: minmax(0, 1fr); }
html.a11y .ava { grid-row: auto; }
html.a11y .road-sign { display: none; }
@media (max-width: 599px) { html.a11y .lp-facts { grid-template-columns: minmax(0, 1fr); } html.a11y-s2 .lessons { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { html.a11y .lessons { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1099px) { html.a11y-s2 .people { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) {
  html.a11y .road-wrap::before { right: auto; bottom: 0; width: 44px; height: auto; }
  html.a11y .route { display: block; padding: 0 0 0 64px; }
  html.a11y .stage { min-height: 56px; padding: 0 0 26px; }
  html.a11y .stage:last-child { padding-bottom: 4px; }
  html.a11y .km { left: -57px; top: 0; }
  html.a11y .stage h3 { font-size: 16px; }
}
@media (max-width: 359px) { .eye { width: 40px; height: 40px; } }
/* в режиме для слабовидящих: глаз не нужен (на экране панель), на десктопе шапка переносится, а не вылезает за край */
html.a11y .eye { display: none; }
@media (min-width: 1200px) { html.a11y .top-in { flex-wrap: wrap; row-gap: 6px; padding-block: 8px; } html.a11y .nav { order: 5; flex-wrap: wrap; width: 100%; margin-right: 0; } html.a11y .nav a.nav-x { display: block; } }