/* ==========================================================================
   Экосистема 99Percentile — страница «CSCA»

   Страница новая, макета в Figma под неё нет. Поэтому здесь не рисуется
   своя система, а переиспользуется существующая:

   • все цвета, кегли, отступы, радиусы — из assets/css/variables.css;
   • шапка, подвал, кнопки, контейнер — из header/footer/base.css без правок;
   • раскладка секций повторяет приёмы страницы «Advanced Placement (AP)»
     (page-advanced-placement-ap.css): цветное хиро с эллипсами и белой
     панелью, надзаголовок с синей точкой, H2 36/0.9, карточки на
     --color-bg-soft с радиусом 16, финальный CTA на синем.

   Локальные токены ниже — те же значения, что у AP-страницы: заголовок
   секции 36px и CTA 64px в общие переменные не вынесены, а копировать
   числа по файлу хуже, чем объявить их один раз здесь.

   Сетка: контейнер 1840 = 4 колонки по 445 при gutter 20. Колонки заданы
   долями, а не пикселями, — на 1440 и 1280 страница сжимается сама.
   ========================================================================== */

.csca-page {
  /* H2 секций: как на AP — 36 / 0.9 / 500 */
  --csca-fs-h2: 36px;
  --csca-lh-h2: 0.9;
  --csca-ls-h2: -0.02em;

  /* Крупный акцент и заголовок финального CTA */
  --csca-fs-32: 32px;
  --csca-fs-64: 64px;

  /* Квадратная плитка-иконка, как «Box Icon Container» на AP */
  --csca-box: 93px;
  --csca-box-radius: 15.5px;

  /* Кружок с номером шага */
  --csca-num: 48px;

  /* Приглушение вспомогательного текста: в системе это opacity, не цвет.
     На AP-странице стоит 0.6 — это даёт #8A8A8A на белом и контраст 3.45:1,
     ниже нормы AA (4.5:1) для обычного текста. Здесь ослаблено до 0.75:
     тот же приём и почти тот же вид, но 5.0:1 даже на серой карточке. Расхождение с AP —
     осознанное, вынесено в отчёт. */
  --csca-dim: 0.75;

  /* Синий для мелких подписей. --color-link (#2597FF) на белом даёт
     3.0:1 — для 14–18px этого мало. Тот же оттенок, но темнее: 5.4:1 на белом и 4.9:1 на светло-синей карточке.
     На крупных числах (32px) остаётся системный --color-brand. */
  --csca-link-strong: #0B69C7;

  /* Текст ошибки: --color-error (#FF6672) на белом — 2.9:1. Рамка поля
     остаётся системной, читается только текст. */
  --csca-error-text: #C62B39;
}

/* ==========================================================================
   ОБЩЕЕ ДЛЯ СЕКЦИЙ
   ========================================================================== */

.csca-section { margin-top: var(--section-gap); }

/*
 * Минимальный размер колонки в grid по умолчанию равен min-content ребёнка.
 * Из-за этого одна длинная строка (например, почта в плашке контактов)
 * раздувала колонку 1fr шире контейнера, и текст на 360px уходил под обрез
 * (body{overflow-x:clip} прятал это от полосы прокрутки). Поймано замером.
 */
.csca-panel__grid > *,
.csca-about__grid > *,
.csca-format__grid > *,
.csca-tracks__grid > *,
.csca-univs__grid > *,
.csca-route__grid > *,
.csca-books__row > *,
.csca-books__grid > *,
.csca-org__grid > *,
.csca-cta__inner > * { min-width: 0; }

.csca-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);

  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.csca-eyebrow__dot {
  flex: 0 0 auto;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.csca-h2 {
  margin-top: var(--space-16);
  font-size: var(--csca-fs-h2);
  line-height: var(--csca-lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--csca-ls-h2);
  color: var(--color-text);
}

.csca-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.csca-lead {
  max-width: 910px;
  margin-top: var(--space-24);

  font-size: var(--fs-h4);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: var(--ls-h4);
  color: var(--color-text);
  opacity: var(--csca-dim);
}

.csca-note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--csca-dim);
}

.csca-blue { color: var(--color-brand); }

/* --- Кнопки: метрики макета (57px, 20/600), цвета — свои ------------------ */

.csca-btn {
  gap: var(--space-4);
  min-height: var(--btn-height);
  padding: var(--btn-padding);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  text-align: center;
}

.csca-btn--fixed { width: var(--btn-w-hero); max-width: 100%; }

.csca-btn--white         { background: var(--color-bg); color: var(--color-text); }
.csca-btn--outline-white { background: transparent; color: var(--color-text-invert); border: 1px solid var(--color-bg); }
.csca-btn--blue          { background: var(--color-brand); color: var(--color-text-invert); }
.csca-btn--outline-blue  { background: transparent; color: var(--color-brand); border: 1px solid var(--color-brand); }

.csca-btn--white:hover         { background: var(--color-blue-pale); }
.csca-btn--outline-white:hover { background: var(--color-white-20); }
.csca-btn--blue:hover          { background: var(--color-brand-hover); }
.csca-btn--outline-blue:hover  { background: var(--color-bg-cold); }

/* --- Плашка с ключевой мыслью -------------------------------------------- */
/*
   Отдельного компонента callout в системе нет. Сделан из того, что есть:
   заливка --color-bg-cold (карточки на синем), радиус 24 как у крупных
   карточек, синяя полоса слева — единственная добавка, она отделяет вывод
   от обычной карточки.
*/
.csca-callout {
  display: flex;
  gap: var(--space-20);
  align-items: flex-start;

  margin-top: var(--space-32);
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-cold);
  border-left: 4px solid var(--color-brand);
}

.csca-callout__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--color-brand);
}

.csca-callout__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.csca-callout--invert {
  background: var(--color-white-20);
  border-left-color: var(--color-bg);
}

.csca-callout--invert .csca-callout__icon { color: var(--color-bg); }

/* ==========================================================================
   ХИРО
   ========================================================================== */

.csca-hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  color: var(--color-text-invert);
  overflow: clip;
}

.csca-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-brand);
}

.csca-hero__inner {
  position: relative;
  max-width: var(--page-width);
  min-height: 860px;
  margin-inline: auto;
  padding: 176px 96px var(--space-64);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-64);
}

.csca-hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.csca-hero__decor img {
  position: absolute;
  max-width: none;
}

.csca-hero__decor img:nth-child(1) { left: 902px; top: -176px; width: 1368px; height: 1368px; }
.csca-hero__decor img:nth-child(2) { left: 948px; top: -130px; width: 1277px; height: 1276px; }
.csca-hero__decor img:nth-child(3) { left: 995px; top: -83px;  width: 1183px; height: 1182px; }

.csca-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: flex-start;
  max-width: 860px;
}

.csca-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-white-20);

  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
  letter-spacing: var(--ls-small);
}

.csca-hero__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 800px;
}

.csca-hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text-invert);
}

.csca-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-lead);
  letter-spacing: var(--ls-lead);
}

.csca-hero__goal {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
}

.csca-hero__hint {
  max-width: 520px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.csca-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* Белая панель справа — приём с AP: ключевые числа в одной плитке. */
.csca-hero__panel {
  position: absolute;
  z-index: 1;
  top: 208px;
  right: var(--side-padding);
  width: 700px;
  max-width: calc(100% - 96px * 2);

  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  color: var(--color-text);
}

.csca-panel__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}

.csca-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.csca-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);

  padding: var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-bg-cold);
}

.csca-tile__icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: var(--csca-box-radius);
  background: var(--color-bg);
  color: var(--color-brand);
}

.csca-tile__num {
  font-size: var(--csca-fs-32);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  /* На --color-bg-cold системный #2597FF даёт 2.7:1 — мимо даже порога
     3:1 для крупного текста. Тот же синий, но глубже. */
  color: var(--csca-link-strong);
}

.csca-tile__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

/* ==========================================================================
   «ЧТО ТАКОЕ CSCA» — карточки-факты
   ========================================================================== */

.csca-about__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.csca-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.csca-card__icon {
  width: var(--csca-box);
  height: var(--csca-box);
  padding: 22px;
  border-radius: var(--csca-box-radius);
  background: var(--color-bg);
  color: var(--color-brand);
}

.csca-card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}

.csca-card__text {
  font-size: var(--fs-small);
  line-height: 1.35;
  letter-spacing: var(--ls-small);
  opacity: var(--csca-dim);
}

/* ==========================================================================
   ФОРМАТ ЭКЗАМЕНА — карточки предметов
   ========================================================================== */

.csca-format__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.csca-subject {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.csca-subject--accent { background: var(--color-brand); color: var(--color-text-invert); }
.csca-subject--accent .csca-subject__meta dt { color: var(--color-text-invert); }
.csca-subject--accent .csca-subject__text { opacity: 1; }

.csca-subject__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-12);
  border-radius: var(--radius-pill);

  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: var(--ls-small);
  color: var(--color-text-invert);
  background: var(--color-brand);
}

.csca-subject--accent .csca-subject__pill { background: var(--color-bg); color: var(--csca-link-strong); }
/* Белый текст держится только на синем и фиолетовом. На жёлтом системном
   #F7A602 он даёт 2.0:1, на мятном — 2.9:1, поэтому там текст тёмный. */
.csca-subject__pill--purple { background: var(--color-purple); }
.csca-subject__pill--mint   { background: var(--color-mint);   color: var(--color-text); }
.csca-subject__pill--yellow { background: var(--color-yellow); color: var(--color-text); }

.csca-subject__title {
  font-size: var(--csca-fs-32);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.csca-subject__text {
  font-size: var(--fs-small);
  line-height: 1.35;
  letter-spacing: var(--ls-small);
  opacity: var(--csca-dim);
}

.csca-subject__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-border);
}

.csca-subject--accent .csca-subject__meta { border-top-color: var(--color-white-20); }
.csca-subject--accent .csca-subject__meta dd { opacity: 1; }

.csca-subject__meta dt {
  font-size: var(--csca-fs-32);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--csca-link-strong);
}

.csca-subject__meta dd {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  opacity: var(--csca-dim);
}

/* ==========================================================================
   ТРЕКИ — какие предметы под какую программу
   ========================================================================== */

.csca-tracks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.csca-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-cold);
}

.csca-track__lang {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--csca-link-strong);
}

.csca-track__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}

.csca-track__subjects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-8);
}

.csca-track__subjects li {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-bg);

  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: var(--ls-small);
}

/* ==========================================================================
   КНИГИ — предметная база через AP (ЭКРАН 12)
   ========================================================================== */

.csca-books__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: start;
  margin-top: var(--space-24);
}

.csca-books__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-48);
}

.csca-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);

  padding: var(--space-32) var(--space-24) var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  text-align: center;
}

.csca-book__cover {
  width: 260px;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-16);
  mix-blend-mode: multiply; /* белый фон снимка сливается с белой карточкой */
}

.csca-book__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
}

.csca-book__sub {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  color: var(--csca-link-strong);
}

.csca-book__text {
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  line-height: 1.4;
  letter-spacing: var(--ls-caption);
  opacity: var(--csca-dim);
}

/* ==========================================================================
   C9 LEAGUE
   ========================================================================== */

.csca-univs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.csca-univ {
  display: flex;
  align-items: center;
  gap: var(--space-16);

  padding: var(--space-20) var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.csca-univ__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--csca-num);
  height: var(--csca-num);
  border-radius: var(--radius-pill);
  background: var(--color-brand);

  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-small);
  color: var(--color-text-invert);
}

.csca-univ__name {
  font-size: var(--fs-small);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: var(--ls-small);
}

.csca-univ__en {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  opacity: var(--csca-dim);
}

/* ==========================================================================
   МАРШРУТ ПОДГОТОВКИ
   ========================================================================== */

.csca-route__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.csca-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.csca-step--accent { background: var(--color-brand); color: var(--color-text-invert); }
.csca-step--accent .csca-step__num { background: var(--color-bg); color: var(--color-brand); }
.csca-step--accent .csca-step__text { opacity: 1; }

.csca-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--csca-num);
  height: var(--csca-num);
  border-radius: var(--radius-pill);
  background: var(--color-brand);

  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-invert);
}

.csca-step__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

.csca-step__text {
  font-size: var(--fs-small);
  line-height: 1.35;
  letter-spacing: var(--ls-small);
  opacity: var(--csca-dim);
}

/* ==========================================================================
   ДАТЫ, РЕГИСТРАЦИЯ, СТОИМОСТЬ
   ========================================================================== */

.csca-org__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-20);
  margin-top: var(--space-48);
  align-items: start;
}

.csca-panelbox {
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.csca-panelbox--blue { background: var(--color-brand); color: var(--color-text-invert); }

.csca-panelbox__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
  letter-spacing: var(--ls-h4);
}

.csca-deflist {
  margin-top: var(--space-24);
  display: grid;
  gap: 0;
}

.csca-deflist__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  padding-block: var(--space-16);
  border-top: 1px solid var(--color-border);

  font-size: var(--fs-small);
  line-height: 1.3;
  letter-spacing: var(--ls-small);
}

.csca-panelbox--blue .csca-deflist__row { border-top-color: var(--color-white-20); }
/* Белый текст на брендовом синем и без того на пределе (3.0:1) —
   дополнительную прозрачность на синем не накладываем. */
.csca-panelbox--blue .csca-deflist__val { opacity: 1; }

.csca-deflist__row:first-child { border-top: 0; padding-top: 0; }

.csca-deflist__key { font-weight: 600; }
.csca-deflist__val { opacity: 0.8; }

.csca-price {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.csca-price__item {
  flex: 1 1 180px;
  padding: var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-white-20);
}

.csca-price__num {
  font-size: var(--csca-fs-32);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.csca-price__text {
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.csca-org__actions { margin-top: var(--space-24); display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Расписание сессии — простой список, не таблица: на 360px таблица
   всё равно превращается в строки, а два столбца читаются хуже. */
.csca-schedule {
  margin-top: var(--space-24);
  display: grid;
  gap: var(--space-8);
}

.csca-schedule li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  background: var(--color-bg);

  font-size: var(--fs-small);
  line-height: 1.2;
  letter-spacing: var(--ls-small);
  color: var(--color-text);
}

.csca-schedule b { font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   ФИНАЛЬНЫЙ CTA + ФОРМА
   ========================================================================== */

.csca-cta {
  position: relative;
  overflow: hidden;

  margin-top: var(--section-gap);
  padding-block: 112px;
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.csca-cta__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: var(--page-width);
  left: 50%;
  transform: translateX(-50%);
}

.csca-cta__decor img {
  position: absolute;
  max-width: none;
  opacity: 0.9;
}

.csca-cta__decor img:nth-child(1) { left: -505px; top: -753px; width: 1090px; height: 1090px; transform: scaleY(-1); }
.csca-cta__decor img:nth-child(2) { left: 1244px; top: 380px;  width: 1090px; height: 1090px; }

.csca-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-64);
  align-items: center;
}

.csca-cta__title {
  font-size: var(--csca-fs-64);
  line-height: 0.95;
  font-weight: var(--fw-h2);
  letter-spacing: -0.03em;
}

.csca-cta__lead {
  max-width: 560px;
  margin-top: var(--space-24);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}

.csca-cta__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-32);
}

.csca-cta__contact {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 48px;
  padding: 0 var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--color-white-20);

  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-small);
  transition: background var(--dur-base) var(--ease-out);
}

.csca-cta__contact:hover { background: var(--color-white-55); color: var(--color-text); }
.csca-cta__contact svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* --- Форма --------------------------------------------------------------- */
/*
   Компонента поля ввода в дизайн-системе нет (см. base.css, блок «Поле
   формы: НЕ СВЁРСТАНО»). Поле собрано из имеющихся токенов: белая карточка
   радиуса 24, инпут высотой 57 как кнопка, радиус pill, граница
   --color-border, фокус — брендовым синим. Согласовать с дизайнером.
*/
.csca-form {
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  color: var(--color-text);
}

.csca-form__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

.csca-form__hint {
  margin-top: var(--space-8);
  font-size: var(--fs-small);
  line-height: 1.3;
  letter-spacing: var(--ls-small);
  opacity: var(--csca-dim);
}

.csca-form__fields { margin-top: var(--space-24); display: grid; gap: var(--space-16); }

/* min-width: 0 — иначе собственная ширина <input> (по умолчанию ~20
   символов) задаёт минимум колонки, и на 320px поле вылезает из карточки. */
.csca-field { display: grid; gap: var(--space-8); min-width: 0; }

.csca-field__label {
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: var(--ls-small);
}

.csca-field__input {
  width: 100%;
  min-width: 0;
  min-height: var(--btn-height);
  padding: 0 var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);

  font-size: var(--fs-small);
  letter-spacing: var(--ls-small);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.csca-field__input::placeholder { color: var(--color-text-muted); }
.csca-field__input:hover { border-color: var(--color-divider); }
.csca-field__input:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; border-color: var(--color-brand); }

.csca-field--invalid .csca-field__input { border-color: var(--color-error); }

.csca-field__error {
  min-height: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--csca-error-text);
}

.csca-field__error:empty { display: none; }

.csca-form__submit { width: 100%; margin-top: var(--space-24); }

.csca-form__consent {
  margin-top: var(--space-16);
  font-size: var(--fs-caption);
  line-height: 1.35;
  letter-spacing: var(--ls-caption);
  color: var(--color-text);
  opacity: var(--csca-dim);
}

.csca-form__consent a { color: var(--color-link); text-decoration: underline; text-underline-position: from-font; }

.csca-form__status {
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--color-bg-cold);

  font-size: var(--fs-small);
  line-height: 1.3;
}

.csca-form__status:empty { display: none; }

/* ==========================================================================
   ВИДЖЕТ WHATSAPP
   Фирменный знак и цвет WhatsApp (#25D366) — так его узнают без подписи.
   ========================================================================== */

.csca-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-overlay);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: #25D366;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .24);

  transition: transform var(--dur-base) var(--ease-out);
}

.csca-wa:hover { transform: scale(1.06); }
.csca-wa svg { width: 34px; height: 34px; }

/* ==========================================================================
   ПОДПИСЬ РАЗРАБОТЧИКА
   ========================================================================== */

.csca-credit {
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-border);
  text-align: center;

  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text);
  opacity: var(--csca-dim);
}

.csca-credit a { color: inherit; text-decoration: underline; text-underline-position: from-font; }
.csca-credit a:hover { color: var(--color-link); }

/* ==========================================================================
   АДАПТИВ

   В макете один размер (1920), мобильных нод под эту страницу нет —
   значения ниже решение верстальщика. Проверено на 360 / 393 / 768 / 1024 /
   1280 / 1440 / 1920: горизонтальной прокрутки нет.
   ========================================================================== */

/* Ноутбук: хиро-панель перестаёт помещаться рядом с текстом. */
@media (max-width: 1430px) {
  .csca-hero__inner { padding: 152px 40px var(--space-48); min-height: 0; }
  .csca-hero__panel {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-32);
  }
  .csca-hero__content { max-width: 100%; }
  .csca-cta__inner { gap: var(--space-32); }
}

@media (max-width: 1280px) {
  .csca-about__grid,
  .csca-format__grid { grid-template-columns: repeat(2, 1fr); }
  .csca-route__grid  { grid-template-columns: repeat(3, 1fr); }
  .csca-cta__title   { font-size: 48px; }
}

@media (max-width: 1024px) {
  .csca-page { --section-gap: 96px; }
  .csca-tracks__grid,
  .csca-univs__grid { grid-template-columns: repeat(2, 1fr); }
  .csca-books__row,
  .csca-org__grid,
  .csca-cta__inner { grid-template-columns: 1fr; }
  .csca-hero__title { font-size: 40px; }
  .csca-cta { padding-block: 72px; }
  .csca-cta__title { font-size: 40px; }
  .csca-books__grid { gap: var(--space-16); }
  .csca-book__cover { width: 200px; }
}

@media (max-width: 768px) {
  .csca-hero__inner { padding: 120px 40px var(--space-48); }
  .csca-panel__grid { grid-template-columns: 1fr 1fr; }
  .csca-route__grid { grid-template-columns: repeat(2, 1fr); }
  .csca-callout { flex-direction: column; gap: var(--space-16); }
}

@media (max-width: 640px) {
  .csca-page { --section-gap: 64px; }

  /* Поля хиро уходят на детей: панель на мобиле стоит в потоке и должна
     иметь собственный внутренний отступ, а не наследовать поле секции.
     Значение — ровно как у .container в mobile.css (20px), иначе текст
     хиро и текст секций стоят на разных вертикалях. */
  .csca-hero__inner { padding: 104px 0 var(--space-32); }
  .csca-hero__inner > * { padding-inline: 20px; }
  .csca-hero__panel { padding: var(--space-24); margin-inline: 20px; width: auto; }

  .csca-cta__contacts { flex-direction: column; align-items: stretch; }
  .csca-cta__contact { justify-content: flex-start; font-size: var(--fs-caption); }
  .csca-hero__title { font-size: 30px; }
  .csca-hero__decor { display: none; }
  .csca-hero__actions .csca-btn { width: 100%; }

  .csca-h2 { font-size: 26px; line-height: 1.05; }
  .csca-lead { font-size: 18px; margin-top: var(--space-16); }

  .csca-about__grid,
  .csca-format__grid,
  .csca-tracks__grid,
  .csca-univs__grid,
  .csca-route__grid,
  .csca-books__grid { grid-template-columns: 1fr; }

  .csca-panel__grid { grid-template-columns: 1fr; }

  .csca-card__icon { width: 64px; height: 64px; padding: 14px; }
  .csca-subject__title { font-size: 26px; }
  .csca-book__cover { width: 180px; }

  .csca-callout,
  .csca-panelbox,
  .csca-form { padding: var(--space-20); }

  .csca-cta { padding-block: 56px; }
  .csca-cta__title { font-size: 32px; }
  .csca-cta__lead { font-size: 17px; }
  .csca-cta__decor { display: none; }

  .csca-deflist__row { grid-template-columns: 1fr; gap: var(--space-4); }
  .csca-schedule li { flex-direction: column; gap: 2px; }

  .csca-wa { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .csca-wa svg { width: 30px; height: 30px; }
}

/* Совсем узкие экраны: поля 16, как у .container в mobile.css. */
@media (max-width: 360px) {
  .csca-hero__inner > * { padding-inline: 16px; }
  .csca-hero__panel { margin-inline: 16px; }
  .csca-hero__title { font-size: 27px; }
  .csca-cta__title { font-size: 29px; }
}