/* Блок хаба праздников: pz-why - "Зачем это школе".
   Макет: секция O7rkt (десктоп) и DnIKF (телефон). Весь блок по центру -
   выравнивание делается шириной текста и margin-inline:auto, а не
   отступами (ширины в макете заданы жёстко: заголовок 920, абзац 820).

   Цвета своими токенами --ink/--muted/--magenta - на хабе нет
   data-holiday, голидей-токены --text/--accent тут не заданы. */

[data-section="why"] {
  padding-block: 100px;   /* мерки: 467 - (15+26+104+26+96) = 200 */
  /* Белый, а не бумажный: в эталонах O7rkt и DnIKF заливка секции #FFFFFF,
     бумага стоит у соседнего блока how. Было --paper, и пиксельная сверка
     этого не показывала - 0,482 % и 0,878 % спокойно проходят планку, потому
     что pixelmatch по порогу не различает близкие цвета (#F7F4EE против
     #FFFFFF - это 8-17 из 255). Нашлось отдельной сверкой самого частого
     цвета кадра, когда наборы научились на ней падать (16.10.2026). */
  background: var(--white);
  text-align: center;
}

@media (max-width: 860px) {
  [data-section="why"] { padding-block: 52px; }   /* мерки: 465 - (13+26+93+26+203) = 104 */
}

/* .hw-kicker уже центрируется текстом родителя и даёт нужный размер на
   обоих брейкпоинтах - перебиваем только цвет (--accent на хабе не задан). */
.pz-why__kicker {
  color: var(--magenta-text);
}

.pz-why__h2 {
  max-width: 920px;
  margin: 26px auto 0;   /* гэп от кикера: мерки 26, на обоих брейкпоинтах одинаковый */
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 46px;
  line-height: 52px;   /* 46 x 1.14 */
  letter-spacing: -1.7px;
  color: var(--ink);
}

.pz-why__text {
  max-width: 820px;
  margin: 26px auto 0;   /* гэп от заголовка: мерки 26, тоже одинаковый на обоих брейкпоинтах */
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 32px;   /* 17 x 1.9 */
  color: var(--muted);
}

@media (max-width: 860px) {
  /* Ширины 920/820 на телефоне не давят - контейнер уже их (350px), текст
     и так на всю ширину wrap, менять max-width не нужно. */
  .pz-why__h2 {
    font-size: 27px;
    line-height: 31px;   /* 27 x 1.14 */
    letter-spacing: -0.8px;
  }
  .pz-why__text {
    font-size: 15px;
    line-height: 29px;   /* 15 x 1.9 */
  }
}