/* «Пробный ЕГЭ» — schools.mipt.ru/ege.

   Палитра и шкала из макета страницы (1600px). Фреймов 768 и 360 у неё нет:
   ярусы и пороги взяты у «Зимней школы» (1100 и 720), чтобы страницы одного
   сайта перестраивались на одних и тех же ширинах. */

:root {
    --main: #11348c;
    --main-10: rgba(17, 52, 140, 0.1);
    /* «Main Blue 60%» кита — это #0069b4 на 60%, а не основной синий. */
    --main-60: rgba(0, 105, 180, 0.6);
    --add-1: #4966ae;
    --add-2: #7091e4;
    --add-3: #c1d3ff;
    --orange: #ef675b;
    --orange-hover: #e2584c;
    --light-orange: #ffe9e7;
    --light-blue: #dee8ff;
    --light-blue-2: #eff3ff;
    --grey: #f8f8f8;
    /* Текст карточек пакетов — единственный не синий текст макета. */
    --ink: #2c2c2c;
    /* Подложка липкой шапки: тот же фон страницы, но сквозь него виден скролл. */
    --grey-88: rgba(248, 248, 248, 0.88);
    --white-60: rgba(255, 255, 255, 0.6);
    --backdrop: rgba(0, 28, 42, 0.6);
    /* Трекинг кита — −3% от кегля. Через переменную, а не на body: em на body
       считается один раз от 18px, и заголовки получали трекинг основного текста
       (см. landing.css главной). */
    --tracking: -0.03em;
}

*, *::before, *::after { box-sizing: border-box; }
* { letter-spacing: var(--tracking); }

/* Якорь останавливается ниже шапки, иначе заголовок раздела оказывается
   под ней ровно тогда, когда по ссылке к нему и пришли. */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
    margin: 0;
    background: var(--grey);
    color: var(--main);
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap { max-width: 1520px; margin: 0 auto; padding: 0 40px; }
/* Плашки «Качество» и «Отчёт» в макете шире колонки на её поля: 1520 из 1600. */
.wrap--wide { max-width: 1600px; }

@media (max-width: 1100px) { .wrap { padding: 0 24px; } }
@media (max-width: 720px) { .wrap { padding: 0 10px; } }

/* ---------- типографика из кита ---------- */

.h1 { font-size: clamp(82px, 7.5vw, 120px); font-weight: 600; line-height: 1; text-transform: uppercase; }
.h2 { font-size: 45px; font-weight: 500; line-height: 1; }
.h3 { font-size: 40px; font-weight: 500; line-height: 1; }
.h4 { font-size: 35px; font-weight: 500; line-height: 1; }
.h5 { font-size: 20px; font-weight: 500; line-height: 1.2; }
.text-1 { font-size: 25px; font-weight: 500; line-height: 1; }
.text-2 { font-size: 18px; font-weight: 400; line-height: 1.3; }
.descriptor { font-size: 20px; font-weight: 500; line-height: 1.2; }

@media (max-width: 1100px) {
    .h1 { font-size: 90px; }
    .h2 { font-size: 30px; }
    .h3 { font-size: 28px; }
    .h4 { font-size: 24px; line-height: 1.1; }
    .h5 { font-size: 16px; }
    .text-1 { font-size: 20px; line-height: 1.1; }
    .text-2 { font-size: 16px; }
    .descriptor { font-size: 16px; }
}

@media (max-width: 720px) {
    .h1 { font-size: 56px; }
    .h2 { font-size: 26px; }
    .h3 { font-size: 24px; }
    .h4 { font-size: 21px; }
    .h5 { font-size: 15px; }
    .text-1 { font-size: 18px; }
    .text-2 { font-size: 15px; line-height: 1.25; }
    .descriptor { font-size: 14px; }
}

/* Между секциями в макете ровно 140 — от низа одной до верха следующей. */
.section { padding-top: 140px; }
.section-title { text-align: center; }

@media (max-width: 1100px) { .section { padding-top: 80px; } }
@media (max-width: 720px) { .section { padding-top: 60px; } }

/* ---------- кнопки и галочки ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 0;
    border-radius: 12px;
    background: var(--orange);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn:hover { background: var(--orange-hover); }
.btn:focus-visible, .arrow:focus-visible, .faq-item__head:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

.btn--outline { background: #fff; color: var(--main); box-shadow: inset 0 0 0 1px var(--main); }
.btn--outline:hover { background: var(--light-blue-2); }

.btn--ghost { background: var(--main-10); color: var(--main); }
.btn--ghost:hover { background: rgba(17, 52, 140, 0.16); }

@media (max-width: 1100px) { .btn { padding: 16px 20px; font-size: 16px; } }

/* Обводки карточек — тени внутрь и outline, а не border: в Figma обводка
   лежит внутри рамки и места не занимает. С border каждая карточка вырастала
   на 2 пикселя, и ряды мозаики расползались против макета. */

/* Плашка с галочкой: 31 × 32 из макета, галочка 24 в середине. */
.check {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 32px;
    border-radius: 5px;
    background: var(--light-blue-2);
}

.check img { width: 24px; height: 24px; }
.check--light { background: var(--light-blue); }
.check--orange { background: var(--light-orange); }
.check--small { width: 23.25px; height: 24px; border-radius: 3.75px; }
.check--small img { width: 18px; height: 18px; }

/* ---------- шапка ---------- */

/* Шапка едет со страницей: «Записаться» нужна на любом экране, а не только
   на первом. fixed, а не sticky: первый экран рассчитан на шапку поверх себя. */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 20px 0;
    transition: background-color 0.2s, box-shadow 0.2s;
}

/* Подложка появляется только после прокрутки: на первом экране шапка лежит
   прямо на фоне, как в макете. */
.header.is-stuck,
.header.is-open {
    background: var(--grey-88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--main-10);
}

/* Три колонки, а не флекс с margin: auto: меню в макете стоит ровно по центру
   страницы, а логотип и кнопка разной ширины и сдвигали бы его. */
.header > .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }

.brand {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 10px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* max-width: none — с процентным пределом картинка в расчёте колонки сетки
   весит ноль, колонка ужималась, и название наезжало на меню. */
.brand img { flex: none; max-width: none; width: 47.8px; height: 53px; margin: 0.5px 0.7px 0.5px 0.5px; }

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.nav > a, .nav-schools > a { display: flex; align-items: center; gap: 2px; padding: 5px 0; }
.nav a:hover { color: var(--add-1); }

.nav-schools { position: relative; }
/* Стрелка нарисована «вправо» и в макете повёрнута: держим её так же. */
.nav-schools > a img { width: 12px; height: 24px; margin: 0 6px; transform: rotate(90deg); }

.nav-schools-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 28, 42, 0.15);
}

.nav-schools:hover .nav-schools-menu, .nav-schools:focus-within .nav-schools-menu { display: flex; }

.header__btn { justify-self: end; width: 210px; }

.burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.burger span { display: block; height: 2px; border-radius: 2px; background: var(--main); }

.mobile-menu { display: none; padding: 20px 0 24px; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 14px; margin: 0 0 20px; font-size: 18px; font-weight: 500; }
.mobile-menu .btn { width: 100%; }
.header.is-open .mobile-menu { display: block; }
/* Под открытым меню — страница, а не фон первого экрана: сквозь полупрозрачную
   подложку заголовок читался бы поверх пунктов. */
.header.is-open { background: var(--grey); }

/* Меню из шести пунктов с логотипом и кнопкой по бокам помещается от 1440:
   уже — пункты и логотип мельче. Ниже 1200 меню по центру не помещается и
   мелким кеглем, поэтому там шапка как на планшете — с бургером. */
@media (min-width: 1201px) and (max-width: 1439px) {
    .nav { gap: 14px; font-size: 16px; }
    .brand { font-size: 20px; }
    .brand img { width: 38px; height: 42px; margin: 0; }
    .header__btn { width: auto; padding: 16px 22px; font-size: 16px; }
}

@media (max-width: 1200px) {
    html { scroll-padding-top: 70px; }
    .header { padding: 10px 0; }
    .header > .wrap { display: flex; justify-content: space-between; }
    .nav, .header__btn { display: none; }
    .burger { display: flex; }
    .brand { font-size: 18px; }
    .brand img { width: 32px; height: 35px; margin: 0; }
}

@media (max-width: 720px) { .brand { font-size: 16px; } }

/* ---------- первый экран ---------- */

/* Композиция справа стоит в макете от 713 до 1548 из 1600 — на 28 пикселей
   правее колонки — и сжимается вместе с окном. Высота первого экрана идёт за
   ней: 860 в макете — это её низ и 12 пикселей воздуха. */
.hero__inner {
    position: relative;
    min-height: calc(110px + min(835px, 52.2vw) * 0.8982);
    padding-top: 220px;
}

/* Текст не шире места слева от композиции: дальше начинается её круг. */
.hero__copy { position: relative; z-index: 1; max-width: calc(100% + 28px - min(835px, 52.2vw)); }
.hero .h1 { white-space: nowrap; }
.hero__sub { max-width: 405px; margin-top: 24px; }
.hero__points { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin-top: 15px; }
.hero__points li { display: flex; align-items: center; gap: 10px; }
.hero__btn { width: 531px; max-width: 100%; margin-top: 23px; }

/* Места внутри композиции — доли рамки 835 × 750 из макета, поэтому она
   сжимается целиком и не разъезжается. Шрифт карточки — в долях её ширины. */
.hero-art {
    position: absolute;
    top: 98px;
    right: -28px;
    width: min(835px, 52.2vw);
    aspect-ratio: 835.036 / 749.986;
    container-type: inline-size;
}

.hero-art > * { position: absolute; max-width: none; }

.hero-art__orbits { left: 0; top: 0.537%; width: 100%; height: 99.463%; }
.hero-art__photo { left: 4.419%; top: 1.828%; width: 86.09%; height: 95.853%; border-radius: 50%; object-fit: cover; }
.hero-art__dot--navy { left: 10.179%; top: 8.667%; width: 11.736%; height: 13.067%; }
.hero-art__dot--indigo { left: 57.58%; top: 0; width: 7.784%; height: 8.667%; }
.hero-art__dot--sky { left: 1.415%; top: 45.868%; width: 6.227%; height: 6.933%; }
.hero-art__dot--blush { left: 7.523%; top: 72.668%; width: 8.503%; height: 9.467%; }
.hero-art__dot--pink { left: 86.464%; top: 42.268%; width: 8.263%; height: 9.2%; }

/* Карточка прижата к низу, а не к верху: если текст на узком экране выйдет
   выше, карточка растёт вверх, на снимок, а не вниз из композиции. */
.hero-card {
    left: 45.507%;
    bottom: 2.267%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.994cqw;
    width: 40.956%;
    min-height: 21.867%;
    padding: 1.796cqw;
    border-radius: 2.395cqw;
    background: var(--main);
    color: #fff;
}

.hero-card__dot { width: 2.395cqw; height: 2.395cqw; }
.hero-card__label { color: var(--white-60); font-size: 1.916cqw; line-height: 1; }
.hero-card__date { margin-top: 1.198cqw; font-size: 4.191cqw; font-weight: 600; line-height: 1; }
.hero-card__deadline { margin-top: 0.599cqw; font-size: 2.156cqw; line-height: 1.3; }

@media (max-width: 1100px) {
    .hero__inner { min-height: 0; padding-top: 120px; }
    .hero__copy { max-width: none; }
    .hero-art { position: relative; top: auto; right: auto; width: min(620px, 100%); margin: 40px auto 0; }
}

/* На телефоне доли от композиции в 340 пикселей дают карточку в 140 и дату
   кеглем 14 — её не прочесть. Здесь у карточки свои размеры. */
@media (max-width: 720px) {
    .hero__inner { padding-top: 96px; }
    .hero__btn { width: 100%; }
    .hero__points { max-width: none; }
    .hero-art { margin-top: 32px; }
    .hero-card { left: auto; right: 0; width: 210px; min-height: 0; gap: 14px; padding: 12px; border-radius: 14px; }
    .hero-card__dot { width: 14px; height: 14px; }
    .hero-card__label { font-size: 12px; }
    .hero-card__date { margin-top: 6px; font-size: 22px; }
    .hero-card__deadline { margin-top: 3px; font-size: 13px; }
}

/* ---------- плашки «Качество» и «Отчёт» ---------- */

/* overflow: hidden — орбиты и снимок выходят за свои рамки и обрезаются
   краем плашки, как в макете. */
.panel {
    position: relative;
    overflow: hidden;
    padding: 30px 40px;
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--main-10);
}

/* Подпись и заголовок в одной строке сетки: подпись слева, заголовок
   прижат вправо и может занять почти всю ширину. */
.panel__label { grid-column: 1; grid-row: 1; }
.panel__title { grid-column: 1 / -1; grid-row: 1; justify-self: end; max-width: min(1069px, 100% - 140px); text-align: right; }

/* Декоративные слои: эллипсы орбит и точки на них. Места — пиксели рамки
   из макета, приходят в style. */
.orbit {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    max-width: none;
    transform: rotate(var(--r));
}

.orbit--flipped { transform: rotate(var(--r)) scaleY(-1); }

.orbit-dot { position: absolute; left: var(--x); top: var(--y); width: var(--d); height: var(--d); max-width: none; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.fact { display: flex; align-items: flex-start; gap: 10px; }
.fact__title { margin-bottom: 10px; }

/* Качество. Рамка снимка — 478 × 404, а сам снимок выше неё на 79
   пикселей: голова эксперта выходит над рамкой, низ срезает плашка. */
.quality { display: grid; grid-template-columns: 478px minmax(0, 1fr); column-gap: 60px; }

/* Снизу снимок срезан в 30 пикселях под рамкой — там, где в макете кончается
   плашка, — и рамка прижата к низу: если на узком десктопе текст справа
   вырастет, эксперт по-прежнему стоит на краю плашки, а не обрывается
   посреди неё. */
.quality-art {
    position: relative;
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: end;
    width: 478px;
    height: 404px;
    margin-top: -6px;
    clip-path: inset(-300px -300px -30px -300px);
}

.quality-art__stage { position: absolute; left: 0; top: 0; width: 478px; height: 404px; }
.quality-art__expert { position: absolute; left: 13px; top: -79px; width: 453px; height: 561px; max-width: none; }

.quality__name { grid-column: 2; grid-row: 2; margin-top: 60px; color: var(--orange); }
.quality__facts { grid-column: 2; grid-row: 3; margin-top: 40px; padding-bottom: 20px; }

/* Отчёт: иллюстрация 458 × 538, лист под письмом свисает ниже неё до края
   плашки. */
.report { display: grid; grid-template-columns: 458px minmax(0, 1fr); column-gap: 80px; }

/* Лист срезан в 42 пикселях под рамкой — по краю плашки из макета — и
   прижат к низу по той же причине, что и снимок эксперта. */
.report-art {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    width: 458px;
    height: 538px;
    margin: 30px 0 12px;
    clip-path: inset(-300px -300px -42px -300px);
}

.report-art > img { position: absolute; max-width: none; }
.report-art__blob--light { left: 273px; top: 293px; width: 255px; height: 255px; }
.report-art__blob--blue { left: -11px; top: -20px; width: 234px; height: 234px; }
.report-art__blob--pink { left: -15px; top: 290px; width: 255px; height: 255px; }

/* Обводка — outline, а не border: в Figma она лежит поверх содержимого и
   не сдвигает его, а все места внутри листа сняты с макета от внешнего края. */
.report-art__mail {
    left: 104.56px;
    top: 41.72px;
    width: 369.179px;
    height: 504.761px;
    border-radius: 8px;
    object-fit: cover;
    outline: 2px solid var(--add-3);
    outline-offset: -2px;
    transform: rotate(6.29deg);
}

.report__facts { grid-column: 2; grid-row: 2; align-self: start; margin-top: 60px; }

.sheet {
    position: absolute;
    left: 60.85px;
    top: 91.41px;
    width: 323px;
    height: 715.486px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--grey);
    color: var(--main);
    outline: 3px solid var(--add-3);
    outline-offset: -3px;
    transform: rotate(-6deg);
}

.sheet > :not(.orbit, .orbit-dot) { position: absolute; left: var(--x); top: var(--y); }

.sheet__title { width: 281.743px; color: #000; font-size: 13.029px; font-weight: 600; line-height: 1.3; }

.sheet__tag {
    padding: 2.171px 4.343px;
    border-radius: 4.343px;
    background: var(--main);
    color: #fff;
    font-size: 8.686px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.sheet__chip {
    padding: 4.343px 8.686px;
    border: 0.543px solid var(--main);
    border-radius: 4.343px;
    background: #fff;
    font-size: 8.686px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.sheet__box {
    padding: 6.514px;
    border: 0.543px dashed var(--main);
    border-radius: 4.343px;
    background: #fff;
    font-size: 7.6px;
    font-weight: 500;
    line-height: 1.3;
}

.sheet__box--orange { border-color: var(--orange); }

.sheet__person { display: flex; flex-direction: column; gap: 4.343px; }
.sheet__person p { display: flex; gap: 6.514px; white-space: nowrap; }
.sheet__person span:first-child { width: 43.429px; }

.sheet__score { display: flex; flex-direction: column; align-items: flex-end; gap: 2.171px; }
.sheet__score p:first-child { align-self: stretch; }
.sheet__score p:last-child { display: flex; align-items: flex-end; gap: 2.171px; }
.sheet__score b { font-size: 19.543px; font-weight: 500; line-height: 1; }
.sheet__score small { font-size: 10.857px; font-weight: 600; line-height: 1.2; }

.sheet__table {
    display: flex;
    flex-direction: column;
    gap: 3.257px;
    width: 279.571px;
    padding: 6.514px;
    border: 0.543px dashed var(--main);
    border-radius: 4.343px;
    background: #fff;
    font-size: 6.514px;
    line-height: 1.3;
}

.sheet__table > div { display: grid; align-items: center; }
.sheet__table--test > div { grid-template-columns: 10.857px 76.543px 22.257px 48.857px 62.429px; column-gap: 10.314px; }
.sheet__table--second { gap: 4.886px; padding: 6.514px 8.686px; }
.sheet__table--second > div { grid-template-columns: 9.229px 67.314px 39.086px 19.543px 42.886px 54.829px; column-gap: 5.445px; }
.sheet__table .is-head, .sheet__table b { font-weight: 600; }

@media (max-width: 1250px) and (min-width: 1101px) {
    .quality__facts, .report__facts { grid-template-columns: minmax(0, 1fr); }
}

/* В колонку рамки иллюстраций режут то, что в макете срезала плашка, —
   иначе голова эксперта залезает на заголовок, а лист — на пункты под
   ним. clip-path, а не overflow: орбитам и пятнам нужен запас по бокам. */
@media (max-width: 1100px) {
    .panel { padding: 24px 20px; border-radius: 24px; }
    .quality, .report { grid-template-columns: minmax(0, 1fr); }

    .panel__label,
    .panel__title,
    .quality-art,
    .quality__name,
    .quality__facts,
    .report-art,
    .report__facts { grid-column: 1; grid-row: auto; }

    .panel__title { justify-self: start; max-width: none; margin-top: 10px; text-align: left; }

    .quality-art { justify-self: center; margin: 103px 0 30px; clip-path: inset(-79px -60px -30px -60px); }
    .quality__name { margin-top: 24px; }
    .quality__facts { margin-top: 24px; padding-bottom: 0; }

    .report-art { justify-self: center; margin: 44px 0 42px; clip-path: inset(-24px -40px -42px -40px); }
    .report__facts { margin-top: 24px; }
}

@media (max-width: 720px) {
    .panel { padding: 20px 15px; }
    .facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    /* Рамки иллюстраций — пиксели макета, поэтому на телефоне они целиком
       уменьшаются ступенями под ширину плашки, как главная на телефонах. */
    .quality-art, .report-art { zoom: 0.64; }
}

@media (min-width: 390px) and (max-width: 720px) { .quality-art, .report-art { zoom: 0.7; } }
@media (min-width: 430px) and (max-width: 720px) { .quality-art, .report-art { zoom: 0.78; } }
@media (min-width: 532px) and (max-width: 720px) { .quality-art, .report-art { zoom: 1; } }

/* ---------- день экзамена ---------- */

.exam-day__head { display: flex; flex-direction: column; }
.exam-day__head .h2 { text-align: center; }

.timeline { margin-top: 60px; text-align: center; }
.timeline__time { font-size: 120px; font-weight: 600; line-height: 1; }

/* Подписи соседних часов стоят вровень с низом крупного времени — лента
   заходит под него на 44 пикселя, как в макете. */
.timeline__rail { position: relative; margin-top: -44px; }

/* Активная точка всегда посередине, остальные разъезжаются от неё. Сдвиг
   считает скрипт: он зависит от ширины подписей. Снизу поле на свес
   активной точки — иначе окно срезает ей донце. */
.timeline__viewport { position: relative; overflow: hidden; padding-bottom: 10px; }

/* Пунктир проходит через центры точек и уходит под стрелки: у тех свой
   фон, и концы линии прячутся за ними, как в макете. */
.timeline__viewport::before {
    content: '';
    position: absolute;
    left: 25px;
    right: 38px;
    bottom: 19px;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--add-2) 0 3px, transparent 3px 6px);
}

/* Шаг 140 — среднее из макета: там точки расставлены руками через 263 и 226.
   На узком окне шаг сжимается: от середины до крайней точки два шага, и
   они обязаны уместиться до стрелки. */
.timeline__points { position: relative; display: flex; align-items: flex-end; gap: clamp(60px, 25% - 160px, 140px); transition: transform 0.3s; }
.timeline__points li { flex: none; }

.timeline__points button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--add-2);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.timeline__points button::after {
    content: '';
    width: 20px;
    height: 20px;
    background: url('img/timeline-dot.svg') center / contain no-repeat;
}

.timeline__points .is-active::after {
    width: 40px;
    height: 40px;
    margin-bottom: -10px;
    background-image: url('img/timeline-dot-active.svg');
}

.timeline__points .is-active .timeline__label { visibility: hidden; }

.timeline__rail .arrow { position: absolute; bottom: 0; z-index: 1; }
.timeline__rail .arrow--prev { left: 0; }
.timeline__rail .arrow--next { right: 0; }

.arrow { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.arrow img { width: 40px; height: 40px; }
/* Стрелка «влево» в макете — та же, что «вверх», повёрнутая. */
.arrow--prev img { transform: rotate(-90deg); }
.arrow[disabled] { opacity: 0.35; cursor: default; }

.timeline__title { margin-top: 20px; }
.timeline__text { max-width: 680px; margin: 10px auto 0; }
.timeline__title:empty, .timeline__text:empty { display: none; }

.exam-day__note {
    width: min(1192px, 100%);
    margin: 60px auto 0;
    padding: 16px;
    border-radius: 12px;
    background: var(--light-blue);
    text-align: center;
}

@media (max-width: 1100px) {
    .timeline { margin-top: 40px; }
    .timeline__time { font-size: 90px; }
    .timeline__rail { margin-top: 0; }
    .timeline__points button { font-size: 28px; }
    .exam-day__note { margin-top: 40px; }
}

/* На телефоне у ленты одни точки: подписи соседних часов в 340 пикселей не
   помещаются, а выбранный час и так написан крупно над лентой. Поля кнопки
   добирают палец до 30 пикселей, не трогая ни точку, ни шаг. */
@media (max-width: 720px) {
    .timeline__time { font-size: 64px; }
    .timeline__rail { margin-top: 16px; }
    .timeline__label { display: none; }
    .timeline__points { gap: 52px; }
    .timeline__points button { gap: 0; padding: 10px 10px 0; }
    .timeline__points button::after { width: 12px; height: 12px; }
    .timeline__points .is-active::after { width: 28px; height: 28px; margin-bottom: -8px; }
    .timeline__viewport { padding-bottom: 8px; }
    .timeline__viewport::before { left: 20px; right: 20px; bottom: 13px; }
    .timeline__rail .arrow { bottom: -6px; }
    .exam-day__note { margin-top: 32px; padding: 14px; }
}

/* ---------- чем мы отличаемся ---------- */

/* Мозаика из макета: четыре колонки и строки по границам плиток. Полосы
   по 24 — это зазоры; остальные — minmax от размера в макете: если текст
   на ширине уже 1600 не влезет, ряд вырастет, а плитки останутся в линию. */
.features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows:
        minmax(214px, auto) 24px minmax(92px, auto) 24px minmax(54px, auto) 24px
        minmax(45px, auto) 24px minmax(145px, auto) 24px minmax(240px, auto);
    column-gap: 24px;
    margin-top: 60px;
}

/* Фрейм мозаики в макете на 53 пикселя выше самих плиток, и до «Отчёта» от
   неё 193, а не 140, как между остальными блоками. */
@media (min-width: 1101px) {
    .features { margin-bottom: 53px; }
}

.feature--format { grid-area: 1 / 1 / 6 / 2; }
.feature--official { grid-area: 1 / 2 / 2 / 4; }
.feature--expert { grid-area: 1 / 4 / 4 / 5; }
.feature--photo-1 { grid-area: 3 / 2 / 6 / 3; }
.feature--procedure { grid-area: 3 / 3 / 10 / 4; }
.feature--photo-2 { grid-area: 5 / 4 / 8 / 5; }
.feature--photo-3 { grid-area: 7 / 1 / 10 / 3; }
.feature--result { grid-area: 9 / 4 / 12 / 5; }
.feature--report { grid-area: 11 / 1 / 12 / 3; }
.feature--photo-4 { grid-area: 11 / 3 / 12 / 4; }

.feature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--main-10);
}

.feature__shape { flex: none; align-self: flex-end; width: 60px; height: 60px; }
.feature__body { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }

/* Заголовок в две строки уходит под фигуру: в макете текст поднят к ней
   вплотную, фигура стоит справа над короткой строкой. */
.feature--result .feature__shape { margin-bottom: -20px; }
.feature--report .feature__shape { margin-bottom: -32px; }
.feature--report .h4 { max-width: 444px; }
.feature--expert .h4 { max-width: 293px; }

.feature-photo { overflow: hidden; border-radius: 14px; background: #fff; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature--photo-3 { border-radius: 20px; outline: 1px solid var(--main-10); outline-offset: -1px; }

/* На узком экране мозаика не читается: плитки идут парами в порядке
   чтения, снимки встают рядом с текстом. */
@media (max-width: 1100px) {
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 16px; margin-top: 40px; }
    .features > * { grid-area: auto; }
    .feature-photo { min-height: 220px; }
}

@media (max-width: 720px) {
    .features { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
    .feature { padding: 16px; }
    .feature__shape { width: 44px; height: 44px; }
    .feature--result .feature__shape, .feature--report .feature__shape { margin-bottom: 0; }
    .feature__body { margin-top: 12px; }
    .feature-photo { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ---------- стоимость ---------- */

.packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1272px; margin: 60px auto 0; }

/* Карточки одной высоты, цена и кнопка прижаты к низу: в стандартном пакете
   пунктов меньше, и без этого цены стояли бы на разной высоте. */
.package {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    border-radius: 20px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--main);
}

.package--extended { box-shadow: inset 0 0 0 1px var(--orange); }

.package__body { display: flex; flex-direction: column; gap: 20px; }
.package__intro { display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
.package__name { color: var(--main); }
.package--extended .package__name { color: var(--orange); }

.package__list { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.package__list li { display: flex; align-items: center; gap: 8px; }

.package__footer { display: flex; flex-direction: column; gap: 20px; }
.package__price { text-align: right; }
.package--extended .package__price { color: var(--orange); }
.package__btn { width: 100%; padding: 13px 20px; }

@media (max-width: 1100px) {
    .packages { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
}

@media (max-width: 720px) {
    .packages { margin-top: 24px; }
    .package { padding: 20px 16px; }
}

/* ---------- FAQ ---------- */

.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 851px; margin: 20px auto 0; }

.faq-item { border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--main-10); }

.faq-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border-radius: 18px;
    cursor: pointer;
    list-style: none;
}

.faq-item__head::-webkit-details-marker { display: none; }

.faq-item__sign { flex: none; }
.faq-item__sign img { width: 50px; height: 50px; }
.faq-item__minus, .faq-item[open] .faq-item__plus { display: none; }
.faq-item[open] .faq-item__minus { display: block; }

/* Раскрытый вопрос — оранжевая карточка с белым текстом, как в макете.
   Рамка остаётся и перекрашивается: без неё карточка прыгала бы на
   пиксель при каждом раскрытии. */
.faq-item[open] { background: var(--orange); box-shadow: none; color: #fff; }
.faq-item[open] .faq-item__head { padding-bottom: 0; }

.faq-item__answer { max-width: 706px; padding: 10px 20px 30px; }

@media (max-width: 1100px) {
    .faq-list { margin-top: 24px; }
    .faq-item__head { padding: 15px; }
    .faq-item__sign img { width: 34px; height: 34px; }
    .faq-item__answer { padding: 10px 15px 20px; }
}

/* ---------- адрес и контакты ---------- */

/* Колонки поровну: в макете и текст, и карта — по 678 из 1380. */
.contacts-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 30px;
    padding: 30px;
    border-radius: 24px;
    background: #fff;
}

/* Заголовок наверху, контакты прижаты к низу карточки — к низу карты. */
.contacts-info { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.contacts-info__title { max-width: 651px; }

.contacts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 312px)); column-gap: 24px; }
.contacts-list a[href^="tel:"] { white-space: nowrap; }
.contacts-list__col { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 200px; }
.contacts-list dt { color: var(--main-60); }
.contacts-list dd { margin-top: 10px; }
.contacts-list a:hover { color: var(--add-1); }

.socials { display: flex; gap: 10px; }

.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background: var(--main);
    transition: background-color 0.15s;
}

.socials a:hover { background: var(--add-1); }
.socials img { width: 24px; height: 24px; }
/* Значок Телеграма в макете меньше своей рамки 24 и сдвинут в ней вниз. */
.socials .socials__tg { width: 20.1px; height: 19.5px; margin: 4.3px 2.1px 0.2px 1.8px; }

.contacts-map { position: relative; height: 439px; overflow: hidden; border-radius: 12px; outline: 1px solid var(--add-1); outline-offset: -1px; }
.contacts-map > img { width: 100%; height: 100%; object-fit: cover; }

/* Булавка стоит на Лабораторном корпусе: доли от карты, а значок внутри —
   отдельный слой, как в макете. */
.contacts-map__pin { position: absolute; left: 45.28%; top: 30.75%; width: 63px; height: 102px; }
.contacts-map__pin img { position: absolute; max-width: none; }
.contacts-map__pin img:first-child { inset: 0; width: 100%; height: 100%; }
.contacts-map__pin img:last-child { left: 18.75px; top: 17.25px; width: 25.5px; height: 28.5px; }

/* Половина карточки на узком десктопе — около 470: номер телефона в 25px
   туда уже не помещается. */
@media (min-width: 1101px) and (max-width: 1300px) {
    .contacts-list .text-1 { font-size: 21px; }
}

@media (max-width: 1100px) {
    .contacts-card { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .contacts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contacts-list__col { min-height: 0; }
    /* Пропорция карты та же, что в макете: булавка стоит в долях от неё. */
    .contacts-map { height: auto; aspect-ratio: 678 / 439; }
}

@media (max-width: 720px) {
    .contacts-card { padding: 16px; }
    .contacts-list { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
    .contacts-list__col { gap: 20px; }
    .socials a { width: 40px; height: 40px; }
    .contacts-map__pin { width: 31.5px; height: 51px; }
    .contacts-map__pin img:last-child { left: 9.4px; top: 8.6px; width: 12.75px; height: 14.25px; }
}

/* ---------- подвал ---------- */

.footer {
    margin-top: 140px;
    padding: 30px 0 25px;
    border-radius: 100px 100px 0 0;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--main-10);
}

/* Колонки подвала — те же четыре по 342, что у мозаики выше: навигация и
   реквизиты стоят на их границах. */
.footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.footer__brand { grid-column: 1 / 3; }
.footer__logos { display: flex; align-items: center; gap: 66px; }
.footer__mipt, .footer__fc { position: relative; flex: none; }
.footer__mipt { width: 300px; height: 90.045px; }
.footer__fc { width: 151px; height: 153.879px; }
.footer__mipt img, .footer__fc img { position: absolute; max-width: none; }

.footer__legal { max-width: 636px; margin-top: 26px; color: var(--main-60); }

.footer__nav { grid-column: 3; }
.footer__nav .h5 { margin-bottom: 10px; }
.footer__nav ul { display: flex; flex-direction: column; gap: 5px; }
.footer__nav a:hover { color: var(--add-1); }

.footer__requisites { grid-column: 4; color: var(--main-60); }

.footer__privacy { grid-column: 1 / 3; }
.footer__privacy a { border-bottom: 1px solid currentcolor; }

.footer__copy { grid-column: 4; color: var(--main-60); }

@media (min-width: 1440px) {
    .footer__copy { white-space: nowrap; }
}

/* Логотипы — 517 пикселей макета, а две колонки на узком десктопе уже. */
@media (min-width: 1101px) and (max-width: 1300px) {
    .footer__logos { zoom: 0.85; }
}

@media (max-width: 1100px) {
    .footer { margin-top: 80px; border-radius: 60px 60px 0 0; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; }
    .footer__nav { grid-column: 1; }
    .footer__requisites { grid-column: 2; }
    .footer__privacy { grid-column: 1; }
    .footer__copy { grid-column: 2; }
}

@media (max-width: 720px) {
    .footer { margin-top: 60px; padding-top: 24px; border-radius: 40px 40px 0 0; }
    .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .footer__brand, .footer__nav, .footer__requisites, .footer__privacy, .footer__copy { grid-column: 1; }
    /* Логотипы — векторы в пикселях макета: 517 в ширину целиком
       уменьшаются под колонку 340. */
    .footer__logos { zoom: 0.62; }
    .footer__legal { margin-top: 16px; }
}

/* ---------- окно заявки ---------- */

.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: var(--backdrop); }

/* Высота окна из макета и не меняется от шага к шагу: иначе кнопки прыгают
   под курсором, когда полей на шаге становится меньше. */
.apply-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 830px;
    max-width: 100%;
    min-height: 658px;
    max-height: 100%;
    padding: 30px 20px;
    overflow-y: auto;
    border-radius: 24px;
    background: var(--grey);
    color: var(--main);
}

.apply-dialog.is-done { width: 840px; min-height: 708px; padding: 30px; }
.apply-dialog form { display: flex; flex: 1; flex-direction: column; }

.modal__close { position: absolute; top: 30px; right: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.modal__close img { width: 40px; height: 40px; }
.apply-dialog.is-done .modal__close { right: 30px; }

.steps { display: flex; gap: 13px; margin: 48px 0 32px; }
.steps li { flex: 1; color: var(--main-10); font-size: 16px; font-weight: 500; line-height: 1.2; }
.steps li.is-current, .steps li.is-done { color: var(--main); }
.steps span { display: flex; align-items: center; height: 24px; }
.steps li::after { content: ''; display: block; height: 4px; margin-top: 8px; border-radius: 100px; background: currentcolor; }

/* Поля в макете на 10 пикселей правее полосок шагов и кнопок. */
.step { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; padding: 0 0 0 10px; border: 0; }
.step[hidden] { display: none; }
.step legend { padding: 0; margin-bottom: 32px; }

.field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; }
.field label { font-size: 18px; line-height: 1.3; }

.field input, .field select {
    width: 100%;
    height: 49px;
    padding: 15px 10px;
    border: 1px solid var(--main-10);
    border-radius: 8px;
    background: #fff;
    color: var(--main);
    font: inherit;
    font-size: 16px;
    line-height: 1.2;
}

.field input::placeholder { color: var(--main-60); opacity: 1; }
.field select { padding-right: 40px; appearance: none; }
.field select:invalid { color: var(--main-60); }

/* Стрелка списка — та же, что у «Наших школ» в шапке, повёрнутая вниз:
   своего значка для списка в макете нет. */
.field--select { position: relative; }

.field--select::after {
    content: '';
    position: absolute;
    right: 16px;
    bottom: 12.5px;
    width: 12px;
    height: 24px;
    background: url('img/nav-arrow.svg') center / contain no-repeat;
    transform: rotate(90deg);
    pointer-events: none;
}

/* Красная рамка появляется только после нажатия «Продолжить»: подсвечивать
   пустое поле раньше, чем человек начал его заполнять, незачем. */
.step.is-checked .field :invalid { border-color: var(--orange); }

.consent { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.consent input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--main); }
.consent a { border-bottom: 1px solid var(--main-60); }

/* Кнопки прижаты к низу и занимают по половине — на первом шаге «Назад»
   нет, и одна кнопка не растягивается на всю ширину. 24 поля + 36 = 60 от
   последнего поля, как в макете. */
.step__actions { display: flex; justify-content: flex-end; gap: 22px; margin: auto 0 0 -10px; padding-top: 36px; }
.step__actions .btn { flex: 0 1 calc(50% - 11px); }

.consult-error { display: none; margin: 16px 0 0; color: var(--orange); }

.apply-done { display: none; flex-direction: column; align-items: center; padding-top: 50px; text-align: center; }
.apply-done__mark { display: flex; align-items: center; justify-content: center; width: 257px; height: 257px; border-radius: 50%; background: var(--add-3); }
.apply-done__mark img { width: 197px; height: 197px; }
.apply-done .h3 { margin-top: 32px; }
.apply-done p { max-width: 541px; margin-top: 8px; }
.apply-done .btn { width: 100%; margin-top: auto; }

.apply-dialog.is-done .steps,
.apply-dialog.is-done form { display: none; }
.apply-dialog.is-done .apply-done { display: flex; flex: 1; }

.apply-fallback__title { margin-top: 60px; }
.apply-fallback__text { margin-top: 20px; }
.apply-fallback__text a { border-bottom: 1px solid var(--main-60); }

@media (max-width: 720px) {
    .modal { padding: 10px; }
    .apply-dialog, .apply-dialog.is-done { min-height: 0; padding: 20px 15px; }
    .modal__close, .apply-dialog.is-done .modal__close { top: 20px; right: 15px; }
    .modal__close img { width: 30px; height: 30px; }
    .steps { gap: 6px; margin: 36px 0 24px; }
    .steps li { font-size: 12px; }
    .step { padding-left: 0; }
    .step legend { margin-bottom: 24px; }
    .field label { font-size: 15px; }
    .step__actions { flex-direction: column-reverse; gap: 10px; margin-left: 0; }
    .step__actions .btn { flex: none; }
    .apply-done { padding-top: 30px; }
    .apply-done__mark { width: 160px; height: 160px; }
    .apply-done__mark img { width: 123px; height: 123px; }
    .apply-done .btn { margin-top: 24px; }
}