@charset "UTF-8";
/* Витрина — перенос прототипа «Магеря. Научное исследование».

   Редакция 25 (08.09.2026), архив `magerya-research-approved-v25.zip`,
   файл `site/app/globals.css`, коммит 0b6057a. Прежняя редакция 11 (коммит
   80a40b1) заменена целиком по слову владельца «сделал один в один, поменяй
   дизайн лендинга». Эталон — https://magerya-research-prototype.
   natali-dudiy.chatgpt.site/. Владелец просил перенести один в один, поэтому
   середина этого файла — ТОЧНАЯ копия прототипного `globals.css` со строки 21
   («:root») и до конца. Порядок правил в ней не менять и ничего из нее
   не выбрасывать: файл собран из двадцати пяти правок подряд, и поздние
   уточнения намеренно перебивают ранние (об этом сказано в передаче).

   Своего у нас три куска, и все три стоят СНАРУЖИ копии:

   1. Шрифты. У прототипа они лежат в `public/fonts` и подключаются через
      `app/fonts.css`; у нас — `/статика/шрифты/`, файлы те же побайтно.
   2. Сброс. Прототип — Tailwind, и часть основы ему давал preflight, которого
      у нас нет: списки без маркеров, заголовки без своего кегля, картинки
      блоком, кнопки без рамки и подложки. Без этого куска страница
      разъезжается, а в копии причины не видно — она там просто не написана.
   3. Приспособление в самом конце файла: у нас серверная верстка без React,
      и три места прототипа собраны нативной разметкой — раскрытие вопросов
      на `<details>`, флажки согласий на `<input type=checkbox>`, окно
      пояснения на `<dialog>`. Правила там повторяют вид прототипа, а не
      меняют его; замер обоих экранов лежит в `docs/перенос-витрины.md`.

   Буква «е» с точками в копии заменена на «е» (правило владельца от 05.09,
   оно накрывает все, что читает человек). Других правок текста нет. */

/* ═══ 1. Шрифты прототипа ══════════════════════════════════════════════════
   Montserrat — весь текст, Unbounded — заголовки и номера групп. Начертания
   те же, что в архиве, но переупакованы из TTF в woff2 (решение владельца
   07.09 «ужимать однозначно»): 2061 КБ против 621 КБ, буквы те же — woff2
   это тот же шрифт в другой обертке, а не пересборка. `font-display: swap`:
   пока лицо грузится, текст виден шрифтом системы, а не пустотой. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/статика/шрифты/montserrat/montserrat-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/статика/шрифты/montserrat/montserrat-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/статика/шрифты/montserrat/montserrat-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/статика/шрифты/montserrat/montserrat-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/статика/шрифты/unbounded/unbounded-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/статика/шрифты/unbounded/unbounded-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/статика/шрифты/unbounded/unbounded-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/статика/шрифты/unbounded/unbounded-700.woff2) format('woff2');
}

/* ═══ 2. Сброс вместо Tailwind preflight ═══════════════════════════════════
   Ровно те правила прототипной основы, на которые копия ниже опирается
   молча. Больше не берем: лишний сброс перекрасил бы то, чего прототип
   не трогал. */

*,
*::before,
*::after {
  /* Прототипу это нужно, чтобы `border-bottom: 1px` у элемента вопроса дал
     сплошную линию: ширину задает правило, стиль приходит отсюда. */
  border: 0 solid;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
blockquote,
figure,
h4,
h5,
h6 {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  /* Кегль заголовка приходит от класса карточки, а не от браузера: иначе
     h3 в карточках разъедутся по трем разным размерам. */
  font-size: inherit;
  font-weight: inherit;
}
img,
svg,
video,
canvas {
  display: block;
  vertical-align: middle;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}
button,
input[type='button'],
input[type='submit'] {
  appearance: button;
}
::placeholder {
  opacity: 1;
}
/* Правило `img { display: block }` выше — авторское, и оно перебивает
   браузерное `[hidden] { display: none }`: спрятанная картинка осталась бы
   на экране пустым прямоугольником в свои `width`/`height`. Поймано замером:
   окно пояснения было 612 px вместо 287. */
[hidden] {
  display: none !important;
}

/* ═══ 3. Копия `globals.css` прототипа ═════════════════════════════════════
   Дальше и до пометки «конец копии» — чужой файл. Не переставлять. */

:root {
  --background: #fff;
  --foreground: #263440;
  --primary: #f58220;
  --primary-foreground: #fff;
  --popover: #fff;
  --muted-foreground: #687984;
  --border: #dce8ee;
  --accent: #44a8cb;
  --pale: #ebf8fc;
  --navy: #122544;
  --blue: #237b9b;
  --card-radius: 28px;
  --section-space: 88px;
  --benefit-rose: #f4e5ee;
  --benefit-lilac: #eceafa;
  --benefit-peach: #fcebdc;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--foreground);
  background: var(--background);
  font-family: 'Montserrat', Arial, sans-serif;
  line-height: 1.5;
}
button,
input {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
img {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h2 {
  color: var(--navy);
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.5rem, 2.25vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h3 {
  text-wrap: pretty;
}
.shell {
  width: min(1200px, calc(100% - 80px));
  margin-inline: auto;
}
.header {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header img {
  width: 190px;
  height: auto;
}
.header-actions {
  display: flex;
  gap: 28px;
  align-items: center;
}
.header-phone {
  color: var(--primary);
  font-size: 22px;
  font-weight: 600;
}
.account {
  min-height: 50px;
  padding: 10px 24px;
  border: 1px solid #87c9de;
  border-radius: 99px;
  background: #fff;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
}
.hero {
  position: relative;
  min-height: 580px;
  background: var(--pale);
  border-radius: 32px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 82px 0 70px 56px;
}
.hero h1 {
  max-width: 590px;
  color: var(--navy);
  font-family: 'Unbounded', sans-serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.025em;
}
.hero p {
  max-width: 525px;
  margin-top: 38px;
  color: #526873;
  font-size: 18px;
  line-height: 1.5;
}
.enrollment {
  display: block;
  margin: 26px 0 20px;
  color: #48616e;
  font-size: 16px;
  font-weight: 600;
}
.primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  border: 0;
  border-radius: 99px;
  padding: 13px 24px;
  color: #fff;
  background: var(--primary);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.hero-cta {
  width: 340px;
}
.doctor {
  position: absolute;
  right: -45px;
  bottom: 0;
  width: 800px;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.eligibility {
  padding-top: var(--section-space);
}
.section-intro {
  margin-top: 16px;
  color: var(--muted-foreground);
  font-size: 18px;
}
.eligibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.eligibility-grid[data-count='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.eligibility-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #f7fbfd;
}
.group-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.line-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: #e4f4f9;
  border-radius: 18px;
  flex-shrink: 0;
}
.line-icon svg {
  width: 29px;
  height: 29px;
}
.group-number {
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #87a5b3;
}
.eligibility-card h3 {
  max-width: 430px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.eligibility-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.video {
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 44px;
  padding: 36px;
  border-radius: 32px;
  background: #263849;
}
.video-play {
  min-height: 70px;
  gap: 18px;
  padding: 8px 28px 8px 10px;
  font-size: 14px;
}
.play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffa654;
  flex-shrink: 0;
}
.benefits {
  padding-top: var(--section-space);
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}
.benefit-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #fff;
  box-shadow: 0 4px 18px #24445905;
}
.benefit-card .line-icon {
  margin-bottom: 24px;
}
.benefit-card h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.benefit-card p {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 12px;
  color: var(--muted-foreground);
}
.process {
  margin-top: var(--section-space);
  padding: 64px 0;
  background: var(--pale);
  border-radius: 32px;
}
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}
.step-grid li {
  position: relative;
  padding-right: 28px;
}
.step-grid li:last-child {
  padding-right: 0;
}
.step-grid li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 80px;
  right: 16px;
  top: 38px;
  height: 1px;
  background: #b4dce9;
}
.step-node {
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 76px;
  width: 76px;
  color: var(--blue);
  border: 1px solid #b4dce9;
  background: #fff;
  border-radius: 24px;
}
.step-node > svg {
  height: 29px;
  width: 29px;
}
.step-number {
  position: absolute;
  top: -11px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding-inline: 5px;
  border: 3px solid var(--pale);
  border-radius: 10px;
  color: #fff;
  background: var(--primary);
  font-size: 12px;
  font-weight: 600;
}
.step-grid p {
  margin-top: 26px;
  max-width: 255px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--navy);
}
.faq {
  padding-top: 56px;
}
.wide-cta {
  width: 100%;
}
.faq h2 {
  margin-top: 56px;
}
.questions {
  margin-top: 30px;
  border-top: 1px solid var(--border);
}
.questions [data-slot='accordion-item'] {
  border-bottom: 1px solid var(--border);
}
.question {
  align-items: center;
  min-height: 76px;
  padding: 20px 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 12px;
  gap: 24px;
}
.question svg {
  display: none !important;
}
.question:hover {
  text-decoration: none;
}
.question-sign {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}
.question-sign::before,
.question-sign::after {
  position: absolute;
  content: '';
  width: 26px;
  height: 1.5px;
  background: currentColor;
  left: 2px;
  top: 14px;
}
.question-sign::after {
  transform: rotate(90deg);
  transition: transform 0.2s;
}
.question[aria-expanded='true'] {
  color: var(--blue);
}
.question[aria-expanded='true'] .question-sign::after {
  transform: rotate(0);
}
.answer {
  padding: 0 54px 22px 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.answer p + p {
  margin-top: 14px;
}
.contact {
  position: relative;
  padding-top: 32px;
  margin-top: 32px;
  border-radius: 32px;
  scroll-margin-top: 24px;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  inset: 32px 0 0;
  background: var(--pale);
  border-radius: inherit;
  pointer-events: none;
}
.contact-inner {
  position: relative;
  min-height: 520px;
}
.contact-copy {
  position: relative;
  z-index: 2;
  width: 54%;
  padding-block: 62px;
}
.contact h2 {
  max-width: 600px;
}
.contact-intro {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin-top: 22px;
}
.contact-form {
  margin-top: 32px;
  max-width: 535px;
}
.form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-fields input {
  min-width: 0;
  width: 100%;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 14px 21px;
  background: #fff;
  color: var(--foreground);
  font-size: 16px;
}
.form-fields input::placeholder {
  color: #657984;
}
.consents {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.consents label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #5c7683;
}
.consents button[data-slot='checkbox'] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #72b8cf;
}
.consents button[data-checked] {
  background: #379bc0;
  border-color: #379bc0;
}
.consents button svg {
  color: #fff;
  width: 12px;
  height: 12px;
}
.consents span button {
  display: inline;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.submit {
  min-width: 257px;
  margin-top: 26px;
}
.phone-art {
  position: absolute;
  right: -88px;
  bottom: 0;
  width: 585px;
  height: 543px;
  pointer-events: none;
}
.phone-hand {
  position: absolute;
  inset: 0;
  width: 585px;
  height: 543px;
  max-width: none;
}
.phone-screen {
  position: absolute;
  top: 5px;
  left: 29px;
  width: 205px;
  height: 367px;
  max-width: none;
}
.news {
  padding-top: var(--section-space);
}
.news-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 64px;
}
.eyebrow {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.news h2 {
  max-width: 580px;
}
.news-description {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.news-description > p {
  max-width: 490px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.news-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.all-articles {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  color: var(--blue);
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 600;
}
.news-controls {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.news-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--blue);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #f5fafc;
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  align-items: stretch;
  margin-top: 36px;
}
.article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #fff;
  overflow: hidden;
}
.article-media {
  aspect-ratio: 391/223;
  overflow: hidden;
  background: #f2f5fa;
  flex-shrink: 0;
}
.article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 22px;
  gap: 16px;
}
.article h3 {
  font-size: 20px;
  line-height: 1.4;
  color: var(--navy);
  font-weight: 600;
}
.article p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  width: 100%;
  gap: 12px;
  margin-top: auto;
  padding: 8px 0 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.circle-arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--blue);
  background: #eaf5f9;
}
@supports (grid-template-rows: subgrid) {
  .article {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
  .article-body {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 16px;
  }
  .article-link {
    margin-top: 10px;
    align-self: end;
  }
}
.footer {
  position: relative;
  overflow: hidden;
  margin-top: var(--section-space);
  padding: 48px 0 260px;
  background: #0d1b3b;
  color: #fff;
}
.footer-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 80px));
  margin-inline: auto;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.footer-top > a {
  flex-shrink: 0;
}
.footer-top img {
  width: 197px;
  height: auto;
}
.footer-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}
.contact-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 18px 7px 9px;
  border: 1px solid #2b4263;
  border-radius: 99px;
  background: #132649;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.contact-pill small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: #c2cddd;
}
.pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0c1c38;
}
.messenger-0 .pill-icon {
  color: #b9a3ff;
}
.messenger-1 .pill-icon {
  color: #06cb70;
}
.messenger-2 .pill-icon {
  color: #34a5ed;
}
.footer-heading {
  margin-top: 46px;
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.035em;
}
.footer-heading span {
  color: #a3b3ca;
}
.medical-note {
  margin-top: 62px;
  font-size: 13px;
  line-height: 1.6;
  color: #adbbcd;
}
.footer-wordmark {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
}
.notice {
  max-width: min(600px, calc(100% - 32px));
  padding: 36px;
  gap: 24px;
  border-radius: 28px;
}
.notice-title {
  padding-right: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy);
}
.notice-description {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.notice-image {
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.notice-close {
  width: 180px;
  font-size: 16px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Surface feedback is restrained, with no layout shifts or false click targets. */
.primary,
.account,
.header-phone,
.line-icon,
.eligibility-card,
.benefit-card,
.step-node,
.step-grid p,
.article,
.article-media img,
.circle-arrow,
.all-articles,
.news-controls button,
.contact-pill,
.form-fields input,
.question {
  transition:
    transform 200ms ease,
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}
.article:focus-within {
  border-color: #78b7cb;
  box-shadow: 0 12px 32px #234b6110;
}
.article-link:focus-visible .circle-arrow {
  background: var(--blue);
  color: #fff;
}
.form-fields input:focus {
  border-color: #6bb9d1;
  box-shadow: 0 0 0 4px #4baac015;
}
@media (hover: hover) {
  .primary:not(:disabled):hover {
    background: #e87513;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px #f5822030;
  }
  .account:hover {
    color: #176887;
    background: #eaf7fb;
    border-color: #54a9c5;
  }
  .header-phone:hover {
    color: #d5680e;
  }
  .eligibility-card:hover,
  .benefit-card:hover {
    transform: translateY(-4px);
    background: #f3fafd;
    border-color: #8cc5d7;
    box-shadow: 0 12px 32px #234b6110;
  }
  .eligibility-card:hover .line-icon,
  .benefit-card:hover .line-icon {
    background: #d8eef5;
    transform: translateY(-2px);
  }
  .step-grid li:hover .step-node {
    transform: translateY(-3px);
    border-color: #55a8c2;
    box-shadow: 0 8px 20px #23597515;
  }
  .step-grid li:hover p {
    color: var(--blue);
  }
  .question:hover {
    background: #f3f9fc;
    color: var(--blue);
  }
  .article:hover {
    border-color: #78b7cb;
    box-shadow: 0 14px 34px #234b6115;
    transform: translateY(-4px);
  }
  .article:hover .article-media img {
    transform: scale(1.025);
  }
  .article-link:hover .circle-arrow,
  .news-controls button:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
  }
  .all-articles:hover {
    color: #155872;
  }
  .contact-pill:hover {
    background: #1e3a62;
    border-color: #557396;
    transform: translateY(-2px);
  }
}
.primary:active:not(:disabled),
.news-controls button:active {
  transform: translateY(1px);
}
@media (max-width: 1150px) {
  .hero-copy {
    padding-left: 40px;
  }
  .hero h1 {
    max-width: 550px;
    font-size: 24px;
  }
  .hero p {
    max-width: 470px;
    font-size: 16px;
  }
  .desktop-break {
    display: none;
  }
  .doctor {
    width: 720px;
    right: -65px;
  }
  .contact-copy {
    width: 53%;
  }
  .phone-art {
    transform: scale(0.85);
    transform-origin: bottom right;
    right: -35px;
  }
  .footer-top {
    align-items: flex-start;
  }
  .footer-contacts {
    gap: 12px;
  }
}
@media (max-width: 900px) {
  :root {
    --section-space: 64px;
  }
  .shell,
  .footer-inner {
    width: calc(100% - 40px);
  }
  .header {
    min-height: 96px;
  }
  .header img {
    width: 155px;
  }
  .header-actions {
    gap: 16px;
  }
  .header-phone {
    font-size: 18px;
  }
  .account {
    min-height: 44px;
    font-size: 14px;
    padding-inline: 18px;
  }
  .hero {
    overflow: hidden;
    min-height: 0;
  }
  .hero-copy {
    padding: 42px 34px 380px;
  }
  .hero h1 {
    max-width: 650px;
    font-size: 26px;
  }
  .hero h1 br {
    display: none;
  }
  .hero p {
    max-width: 560px;
    font-size: 17px;
    margin-top: 26px;
  }
  .doctor {
    width: 580px;
    right: -40px;
  }
  .eligibility-grid {
    gap: 20px;
  }
  .eligibility-grid[data-count='3'] {
    grid-template-columns: 1fr;
  }
  .eligibility-grid[data-count='3'] .eligibility-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    column-gap: 22px;
  }
  .eligibility-grid[data-count='3'] .group-top {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: flex-start;
  }
  .eligibility-card {
    padding: 26px;
  }
  .eligibility-card h3 {
    font-size: 18px;
  }
  .eligibility-card p {
    font-size: 15px;
  }
  .video {
    min-height: 380px;
  }
  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .benefit-card {
    padding: 26px;
  }
  .process {
    padding-block: 48px;
  }
  .step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 24px;
  }
  .step-grid li {
    padding-right: 0;
  }
  .step-grid li:nth-child(2)::after {
    display: none;
  }
  .contact-copy {
    width: 55%;
    padding-block: 44px;
  }
  .form-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .phone-art {
    transform: scale(0.73);
    right: -35px;
  }
  .contact h2 {
    font-size: 25px;
  }
  .news-heading {
    gap: 32px;
  }
  .news-description > p {
    font-size: 15px;
  }
  .article-grid {
    gap: 0 18px;
  }
  .article-body {
    padding: 22px 18px 18px;
  }
  .article h3 {
    font-size: 17px;
  }
  .article p {
    font-size: 14px;
  }
  .article-link {
    font-size: 14px;
  }
  .circle-arrow {
    width: 36px;
    height: 36px;
  }
  .footer {
    padding-bottom: 190px;
  }
  .footer-contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-heading {
    font-size: 31px;
  }
}
@media (max-width: 600px) {
  :root {
    --section-space: 48px;
    --card-radius: 24px;
  }
  .shell,
  .footer-inner {
    width: calc(100% - 32px);
  }
  .header {
    min-height: 92px;
    gap: 12px;
  }
  .header img {
    width: 126px;
  }
  .header-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .header-phone {
    font-size: 14px;
  }
  .account {
    font-size: 12px;
    min-height: 31px;
    padding: 5px 13px;
  }
  h2 {
    font-size: 23px;
    line-height: 1.4;
  }
  .hero {
    border-radius: 26px;
  }
  .hero-copy {
    padding: 32px 24px 335px;
  }
  .hero h1 {
    font-size: 21px;
    line-height: 1.4;
  }
  .hero p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 22px;
  }
  .enrollment {
    font-size: 14px;
    margin-top: 22px;
  }
  .hero-cta {
    width: 100%;
    font-size: 16px;
  }
  .doctor {
    width: 490px;
    right: calc(50% - 288px);
  }
  .section-intro {
    font-size: 16px;
  }
  .eligibility-grid,
  .eligibility-grid[data-count='3'] {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 26px;
  }
  .eligibility-grid[data-count='3'] .eligibility-card {
    display: flex;
  }
  .eligibility-grid[data-count='3'] .group-top {
    flex-direction: row;
    justify-content: space-between;
  }
  .eligibility-card {
    padding: 26px;
    gap: 16px;
  }
  .eligibility-card h3 {
    font-size: 20px;
  }
  .eligibility-card p {
    font-size: 16px;
  }
  .video {
    margin-top: 28px;
    min-height: 285px;
    padding: 24px 16px;
    border-radius: 26px;
  }
  .video-play {
    min-height: 64px;
    gap: 12px;
    font-size: 12px;
    text-align: left;
    padding-right: 18px;
  }
  .play-icon {
    width: 44px;
    height: 44px;
  }
  .benefit-grid {
    gap: 16px;
    margin-top: 26px;
  }
  .benefit-card {
    padding: 22px 18px;
  }
  .benefit-card .line-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    margin-bottom: 18px;
  }
  .benefit-card h3 {
    font-size: 16px;
    line-height: 1.45;
    overflow-wrap: break-word;
  }
  .benefit-card p {
    font-size: 14px;
    line-height: 1.6;
  }
  .process {
    border-radius: 26px;
    padding-block: 36px;
  }
  .step-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 34px;
  }
  .step-grid li {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 24px;
    padding-bottom: 32px;
  }
  .step-grid li:last-child {
    padding-bottom: 0;
  }
  .step-node {
    width: 68px;
    height: 68px;
    border-radius: 20px;
  }
  .step-grid li:not(:last-child)::after {
    display: block;
    top: 72px;
    bottom: 5px;
    left: 34px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .step-grid p {
    margin: 5px 0 0;
    max-width: none;
    font-size: 16px;
  }
  .faq {
    padding-top: 36px;
  }
  .faq h2 {
    margin-top: 42px;
  }
  .questions {
    margin-top: 22px;
  }
  .question {
    font-size: 15px;
    padding: 18px 4px;
    min-height: 70px;
  }
  .answer {
    padding-left: 4px;
    padding-right: 34px;
    font-size: 14px;
  }
  .question-sign {
    width: 24px;
  }
  .question-sign::before,
  .question-sign::after {
    width: 24px;
    left: 0;
  }
  .contact {
    margin-top: 12px;
    border-radius: 26px;
  }
  .contact-inner {
    width: calc(100% - 48px);
  }
  .contact-copy {
    width: 100%;
    padding: 36px 0 366px;
  }
  .contact h2 {
    font-size: 23px;
  }
  .contact-intro {
    font-size: 16px;
  }
  .contact-form {
    margin-top: 26px;
  }
  .form-fields {
    grid-template-columns: 1fr;
  }
  .form-fields input {
    font-size: 16px;
  }
  .consents label {
    font-size: 12px;
  }
  .submit {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
  .phone-art {
    transform: scale(0.6);
    right: -48px;
  }
  .news-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .news h2 {
    max-width: 440px;
  }
  .eyebrow {
    font-size: 11px;
    margin-bottom: 12px;
  }
  .news-description {
    gap: 18px;
  }
  .news-description > p {
    font-size: 16px;
  }
  .article-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 28px;
  }
  .article,
  .article-body {
    display: flex;
    grid-row: auto;
  }
  .article-body {
    padding: 24px;
    gap: 14px;
  }
  .article h3 {
    font-size: 21px;
  }
  .article p {
    font-size: 16px;
  }
  .article-link {
    font-size: 15px;
    margin-top: 8px;
  }
  .circle-arrow {
    width: 42px;
    height: 42px;
  }
  .footer {
    padding-top: 38px;
    padding-bottom: 135px;
  }
  .footer-inner {
    width: calc(100% - 48px);
  }
  .footer-top {
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }
  .footer-top img {
    width: 180px;
  }
  .footer-contacts {
    gap: 12px;
  }
  .contact-pill {
    padding-right: 10px;
    font-size: 12px;
    gap: 6px;
  }
  .footer-heading {
    font-size: 26px;
    margin-top: 36px;
  }
  .medical-note {
    margin-top: 36px;
    font-size: 12px;
  }
  .footer-wordmark {
    width: 120%;
    left: -10%;
  }
  .notice {
    padding: 30px 24px;
  }
  .notice-title {
    font-size: 21px;
  }
  .notice-description {
    font-size: 15px;
  }
}
@media (max-width: 380px) {
  .benefit-grid {
    grid-template-columns: 1fr;
  }
  .benefit-card {
    padding: 26px;
  }
  .benefit-card h3 {
    font-size: 18px;
  }
  .benefit-card p {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Original supplied mark, with the research label beneath the wordmark. */
.header img,
.footer-top img {
  width: 215px;
  height: auto;
}
.doctor {
  width: 670px;
  right: -80px;
  bottom: 0;
}
@media (max-width: 1150px) and (min-width: 901px) {
  .hero-copy {
    padding-right: 0;
  }
  .hero h1 {
    max-width: 54%;
    font-size: 23px;
  }
  .hero h1 br {
    display: none;
  }
  .hero p {
    max-width: 50%;
  }
  .doctor {
    width: 560px;
    right: -100px;
  }
}
@media (max-width: 900px) {
  .header img {
    width: 180px;
  }
  .doctor {
    width: 475px;
    right: -70px;
  }
  .hero-copy {
    padding-bottom: 430px;
  }
}
@media (max-width: 600px) {
  .header img {
    width: 152px;
  }
  .footer-top img {
    width: 205px;
  }
  .doctor {
    width: 440px;
    right: calc(50% - 232px);
  }
  .hero-copy {
    padding-bottom: 395px;
  }
}

/* Wider desktop composition requested after the first preview. */
@media (min-width: 901px) {
  .shell,
  .footer-inner {
    width: min(1480px, calc(100% - 80px));
  }
  .header {
    min-height: 126px;
  }
  .hero-copy {
    padding-left: clamp(40px, 4.4vw, 76px);
  }
}
@media (min-width: 1200px) {
  .hero {
    min-height: 640px;
  }
  .hero-copy {
    padding-top: 88px;
    padding-bottom: 82px;
  }
  .hero h1 {
    max-width: 67%;
    font-size: clamp(27px, 2.15vw, 34px);
    line-height: 1.35;
  }
  .hero p {
    max-width: 610px;
    font-size: clamp(18px, 1.3vw, 20px);
    line-height: 1.55;
    margin-top: 32px;
  }
  .doctor {
    width: clamp(670px, 47vw, 780px);
    right: -70px;
  }
  .hero-cta {
    width: 360px;
    min-height: 58px;
  }
  .news-heading {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
  }
  .news-description > p {
    max-width: 590px;
  }
  .article-grid,
  .benefit-grid,
  .eligibility-grid {
    column-gap: 28px;
  }
}
@media (min-width: 1600px) {
  h2 {
    font-size: 34px;
  }
  .hero {
    min-height: 680px;
  }
  .hero-copy {
    padding-top: 102px;
  }
  .hero h1 {
    max-width: 760px;
  }
  .doctor {
    width: 810px;
    right: -65px;
  }
  .article-body {
    padding: 30px 30px 26px;
  }
  .article h3 {
    font-size: 22px;
  }
  .article p {
    font-size: 16px;
  }
  .benefit-card,
  .eligibility-card {
    padding: 34px;
  }
}

/* Match the wide 1200:567 reference proportions across desktop widths. */
@media (min-width: 901px) {
  .hero {
    container-type: inline-size;
    aspect-ratio: 1200 / 567;
    min-height: 0;
  }
  .doctor {
    width: min(52cqw, 770px);
    right: 0;
  }
  .hero-copy {
    padding-top: 54px;
    padding-bottom: 48px;
  }
  .hero p {
    margin-top: 28px;
  }
  .enrollment {
    margin-top: 22px;
    margin-bottom: 18px;
  }
}
@media (min-width: 1200px) {
  .hero-copy {
    padding-top: 76px;
    padding-bottom: 68px;
  }
  .hero p {
    margin-top: 32px;
  }
}
@media (min-width: 1600px) {
  .hero-copy {
    padding-top: 94px;
    padding-bottom: 78px;
  }
}
.hero-art {
  position: absolute;
  inset: 0 0 0 45%;
  overflow: hidden;
  border-radius: 0 32px 32px 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero-art {
    inset: 0;
    border-radius: 32px;
  }
  .hero-art .doctor {
    right: 50%;
    transform: translateX(50%);
  }
}

/* Copy and navigation adapted from the author's research website. */
section[id] {
  scroll-margin-top: 28px;
}
.header {
  gap: 24px;
}
.header > a {
  flex-shrink: 0;
}
.header img {
  width: 180px;
}
.section-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 30px);
}
.section-nav a {
  position: relative;
  flex-shrink: 0;
  padding-block: 12px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  transition: color 180ms ease;
}
.section-nav a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.section-nav a:hover,
.section-nav a:focus-visible {
  color: var(--primary);
}
.section-nav a:hover::after,
.section-nav a:focus-visible::after {
  transform: scaleX(1);
}
.header-actions {
  gap: 20px;
}
.header-phone {
  white-space: nowrap;
  font-size: 17px;
}
.header .account {
  white-space: nowrap;
  font-size: 13px;
  padding-inline: 18px;
}
.hero-copy {
  width: 64%;
  padding: clamp(36px, 3.8vw, 60px) 0 clamp(36px, 3.8vw, 60px)
    clamp(36px, 4.4vw, 76px);
}
.hero .hero-eyebrow {
  max-width: none;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--blue);
}
.hero h1 {
  max-width: 760px;
  font-size: clamp(23px, 2.3vw, 35px);
  line-height: 1.35;
  text-wrap: balance;
}
.hero-quote {
  max-width: 88%;
  margin: 24px 0;
}
.hero-quote p {
  max-width: 570px;
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
}
.hero-quote cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  font-size: 13px;
  font-style: normal;
  color: var(--muted-foreground);
}
.hero-quote cite strong {
  color: var(--navy);
  font-weight: 600;
}
.hero-cta {
  width: 320px;
  max-width: 100%;
}
.hero .hero-note {
  max-width: 360px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
.participation-facts {
  display: flex;
  justify-content: space-between;
  gap: 16px 30px;
  margin-top: 26px;
  margin-bottom: 0;
  padding: 0 12px;
  list-style: none;
}
.participation-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.participation-facts svg {
  flex-shrink: 0;
  color: var(--blue);
}
.eyebrow + h2 {
  margin-top: 12px;
}
.section-intro {
  max-width: 1000px;
  line-height: 1.75;
}
/* НОМЕР ГРУППЫ НАД НАЗВАНИЕМ (решение владельца 18.09). Кегль 13 при
   основном 16: подпись обязана читаться, но не спорить с названием плашки,
   за которым женщина и приходит. Синий дает 4.61:1 на подложке плашки
   #f7fbfd — норму держит; прототипный серый номера (#87a5b3) дал бы 2.5
   и на этом экране не годится.
 */
.eligibility-card .group-label {
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.eligibility-card h3 {
  font-size: 19px;
}
@supports (grid-template-rows: subgrid) {
  .eligibility-grid[data-count='3'] .eligibility-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 16px;
  }
}
.screening-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 1000px;
  margin-top: 26px;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.75;
}
.screening-note svg {
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--blue);
}
.research-about {
  padding-top: var(--section-space);
}
.research-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(32px, 4vw, 64px);
  margin-top: 38px;
  align-items: stretch;
}
.principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
}
.principle-card {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px 36px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #f7fbfd;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}
.principle-card .line-icon {
  width: 64px;
  height: 64px;
  margin: 0;
}
.principle-card h3 {
  font-size: clamp(19px, 1.6vw, 23px);
  color: var(--navy);
  line-height: 1.5;
  font-weight: 600;
}
.principle-card p {
  max-width: 610px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.leader {
  min-width: 0;
  padding: 0;
}
.leader-video {
  position: relative;
  height: 100%;
  min-height: 640px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #d9eaf0;
  border-radius: 32px;
  background: linear-gradient(150deg, #f1fafd, #d7edf5 62%, #bddde9);
}
.leader-video::before {
  content: '';
  position: absolute;
  width: 115%;
  aspect-ratio: 1;
  border: 1px solid #ffffff90;
  border-radius: 50%;
  top: 9%;
  left: -8%;
  box-shadow: 0 0 0 40px #ffffff25;
  z-index: -1;
}
.leader-eyebrow {
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue);
}
.leader-portrait {
  position: absolute;
  width: 158%;
  max-width: none;
  height: auto;
  left: 48%;
  bottom: 88px;
  transform: translateX(-50%);
}
.leader-play {
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: max-content;
  max-width: calc(100% - 40px);
  border: 0;
  padding: 10px;
  background: transparent;
  color: var(--navy);
  font-size: 11px;
  font-weight: 500;
  z-index: 2;
}
.leader-play > span:last-child {
  padding: 6px 12px;
  border-radius: 20px;
  background: #fffffff0;
}
.leader-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  box-shadow:
    0 0 0 10px #ffffff55,
    0 6px 24px #183d5430;
  transition:
    transform 200ms ease,
    background-color 200ms ease;
}
.leader-play-icon svg {
  margin-left: 4px;
}
.doctor-credentials {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 23px 24px;
  color: var(--navy);
  background: #ffffffed;
  border: 1px solid #fff;
  border-radius: 22px;
  box-shadow: 0 10px 30px #1f4c6610;
  backdrop-filter: blur(12px);
}
.doctor-role {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.doctor-credentials strong {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
}
.doctor-position {
  font-size: 12px;
  line-height: 1.65;
  color: #526873;
}
.leader-video .doctor-credentials {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 3;
}
.hero-credentials {
  position: absolute;
  z-index: 3;
  right: 28px;
  bottom: 28px;
  width: 30%;
  max-width: 360px;
}
.leader-context {
  max-width: 1000px;
  margin-top: 28px;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.8;
}
@media (hover: hover) {
  .principle-card:hover {
    border-color: #9dccdc;
    background: #edf8fc;
    transform: translateX(4px);
  }
  .leader-play:hover .leader-play-icon {
    transform: scale(1.08);
  }
}
.step-copy {
  margin-top: 26px;
}
.step-copy h3 {
  font-size: 18px;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 600;
}
.step-copy p {
  margin-top: 12px;
  max-width: none;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--muted-foreground);
}
@media (max-width: 1250px) {
  .header-phone {
    display: none;
  }
}
@media (max-width: 900px) {
  .header {
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-block: 20px 16px;
  }
  .section-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 26px;
    scrollbar-width: thin;
  }
  .hero-copy {
    width: 100%;
    padding: 36px 34px 430px;
  }
  .hero h1 {
    max-width: 650px;
    font-size: 28px;
  }
  .hero-quote {
    max-width: 570px;
  }
  .hero-quote p {
    font-size: 17px;
  }
  .participation-facts {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px 26px;
  }
  .eligibility-grid[data-count='3'] .eligibility-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto auto;
    grid-row: auto;
  }
  .eligibility-grid[data-count='3'] .group-top {
    grid-row: span 3;
  }
  .eligibility-card h3 {
    max-width: none;
  }
}
@media (max-width: 600px) {
  .header img {
    width: 152px;
  }
  .header .account {
    font-size: 12px;
    padding: 8px 12px;
  }
  .section-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
    overflow: visible;
  }
  .section-nav a {
    font-size: 12px;
    padding-block: 7px;
  }
  .hero-copy {
    padding: 32px 24px 395px;
  }
  .hero .hero-eyebrow {
    font-size: 11px;
    margin-bottom: 16px;
  }
  .hero h1 {
    font-size: 23px;
    line-height: 1.4;
    text-wrap: pretty;
  }
  .hero-quote {
    margin-block: 22px;
  }
  .hero-quote p {
    font-size: 15px;
  }
  .hero-quote cite {
    font-size: 12px;
  }
  .hero-cta {
    width: 100%;
  }
  .participation-facts {
    display: grid;
    gap: 14px;
    padding-inline: 8px;
  }
  .participation-facts li {
    font-size: 12px;
  }
  .eligibility-grid[data-count='3'] .eligibility-card {
    display: flex;
  }
  .eligibility-card h3 {
    font-size: 20px;
  }
  .screening-note {
    font-size: 13px;
  }
  .step-copy {
    margin-top: 3px;
  }
  .step-copy h3 {
    font-size: 17px;
  }
  .step-copy p {
    font-size: 14px;
    margin-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-nav a,
  .section-nav a::after {
    transition: none;
  }
}

/* Center the complete participation sequence, including its connecting line. */
.process {
  text-align: center;
}
.process h2 {
  max-width: 1000px;
  margin-inline: auto;
}
.process .section-intro {
  max-width: 850px;
  margin-inline: auto;
}
.step-grid li,
.step-grid li:last-child {
  padding-inline: 20px;
}
.step-grid li:not(:last-child)::after {
  left: calc(50% + 48px);
  right: auto;
  width: calc(100% - 96px);
}
.step-copy {
  max-width: 285px;
  margin-inline: auto;
}
.step-copy h3 {
  min-height: 54px;
}
@media (max-width: 1150px) and (min-width: 901px) {
  .research-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
  }
  .principle-card {
    padding: 28px;
    gap: 22px;
  }
  .principle-card p {
    font-size: 15px;
  }
  .leader-video {
    min-height: 0;
  }
  .hero-credentials {
    padding: 18px;
    width: 31%;
    right: 20px;
    bottom: 20px;
    gap: 7px;
  }
  .hero-credentials strong {
    font-size: 15px;
  }
  .hero-credentials .doctor-position {
    font-size: 11px;
  }
}
@media (max-width: 900px) {
  .research-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .principle-grid {
    grid-template-rows: none;
    gap: 16px;
  }
  .principle-card {
    padding: 28px;
    gap: 24px;
  }
  .leader {
    width: min(100%, 420px);
    justify-self: center;
  }
  .leader-video {
    height: auto;
    min-height: 0;
  }
  .hero-credentials {
    width: 340px;
    right: 22px;
    bottom: 22px;
  }
  .step-grid li:not(:last-child)::after {
    width: calc(100% - 72px);
  }
}
@media (max-width: 600px) {
  .hero-credentials {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    padding: 18px;
    gap: 7px;
  }
  .hero-credentials strong {
    font-size: 15px;
  }
  .hero-credentials .doctor-position {
    font-size: 11px;
  }
  .research-layout {
    margin-top: 28px;
  }
  .principle-card {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
    gap: 18px;
  }
  .principle-card .line-icon {
    width: 50px;
    height: 50px;
  }
  .principle-card h3 {
    font-size: 19px;
  }
  .principle-card p {
    font-size: 15px;
    margin-top: 10px;
  }
  .leader-video {
    border-radius: 26px;
  }
  .leader-video .doctor-credentials {
    bottom: 16px;
    left: 16px;
    right: 16px;
    padding: 20px;
  }
  .leader-eyebrow {
    top: 22px;
    left: 22px;
  }
  .leader-portrait {
    bottom: 84px;
  }
  .leader-context {
    margin-top: 22px;
    font-size: 13px;
  }
  .step-grid {
    max-width: 420px;
    margin-inline: auto;
  }
  .step-grid li,
  .step-grid li:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-inline: 16px;
  }
  .step-grid li:not(:last-child) {
    padding-bottom: 56px;
  }
  .step-copy {
    margin: 0;
    max-width: 290px;
  }
  .step-copy h3 {
    min-height: 0;
  }
  .step-grid li:not(:last-child)::after {
    display: block;
    width: 1px;
    height: 28px;
    left: 50%;
    top: auto;
    bottom: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .principle-card,
  .leader-play-icon {
    transition: none;
  }
}

/* Curator review: open doctor's coat, two invitations and landscape address. */
.hero-copy {
  width: 58%;
  padding: clamp(36px, 4.2vw, 64px);
  padding-right: 0;
}
.hero h1 {
  max-width: 100%;
  font-size: clamp(25px, 2.25vw, 34px);
  text-wrap: pretty;
}
.hero .hero-description {
  max-width: 610px;
  margin: 28px 0 32px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--muted-foreground);
}
.hero-credentials {
  width: 31%;
  max-width: 390px;
  padding: 22px 24px;
}
.hero-credentials .doctor-position {
  font-size: 13px;
  line-height: 1.65;
}
.doctor-role {
  font-size: 12px;
}
.participation-facts li {
  font-size: 14px;
}
.eligibility-grid[data-count='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.eligibility-grid[data-count='2'] .eligibility-card {
  padding: clamp(28px, 3vw, 44px);
  gap: 22px;
}
.eligibility-grid[data-count='2'] h3 {
  max-width: 480px;
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.45;
}
.eligibility-grid[data-count='2'] p {
  font-size: 17px;
  line-height: 1.75;
}
.group-invitation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  text-align: center;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.75;
}
.group-invitation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  border: 1px solid #bfdfe9;
  border-radius: 99px;
  background: #d9f0f7;
  color: #25657c;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}
.group-invitation a:hover {
  background: #c3e7f3;
  border-color: #95c8dc;
  color: #155872;
}
.research-about h2.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--blue);
}
.research-intro {
  margin: 26px 40px 0;
  padding-left: 28px;
  border-left: 3px solid var(--blue);
}
.research-intro p {
  margin: 0;
  color: #526873;
  font-size: 18px;
  line-height: 1.75;
  text-wrap: pretty;
}
.research-intro .research-lead {
  margin-bottom: 24px;
  color: var(--navy);
  font-size: clamp(21px, 1.85vw, 26px);
  font-weight: 600;
  line-height: 1.5;
}
.research-intro .research-outcome {
  margin-top: 8px;
}
.research-outcome strong {
  color: var(--navy);
  font-weight: 600;
}
@media (max-width: 800px) {
  .research-intro {
    margin: 24px 0 0;
    padding-left: 20px;
  }
  .research-intro p {
    font-size: 17px;
  }
  .research-intro .research-lead {
    margin-bottom: 18px;
    font-size: 21px;
  }
}
@media (max-width: 600px) {
  .research-intro p {
    font-size: 16px;
  }
  .research-intro .research-lead {
    font-size: 20px;
  }
}
.research-layout {
  display: block;
  margin-top: 36px;
}
.research-layout .leader {
  width: min(100%, 1040px);
  margin-inline: auto;
}
.leader-video {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}
.leader-frame {
  position: relative;
  aspect-ratio: 16 / 9;
}
.leader-video::before {
  width: 67%;
  left: 17%;
  top: 13%;
  box-shadow: 0 0 0 60px #ffffff25;
}
.leader-portrait {
  width: auto;
  height: 96%;
  left: 33%;
  bottom: 0;
  transform: translateX(-50%);
}
.leader-eyebrow {
  font-size: 13px;
  top: 30px;
  left: 32px;
}
.leader-play {
  left: 33%;
  top: 53%;
  font-size: 13px;
}
.leader-credentials {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
  gap: 6px 40px;
  padding: 26px 32px;
  margin-top: 18px;
  background: #f7fbfd;
  border-color: var(--border);
  box-shadow: none;
}
.leader-credentials .doctor-role {
  grid-column: 1;
  grid-row: 1;
}
.leader-credentials strong {
  grid-column: 1;
  grid-row: 2;
  font-size: 20px;
}
.leader-credentials .doctor-position {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 15px;
  line-height: 1.75;
}
.leader-context {
  max-width: none;
  padding: 30px 34px;
  margin-top: 24px;
  border-radius: var(--card-radius);
  background: var(--pale);
  border: 1px solid #d9eaf0;
  font-size: 16px;
  line-height: 1.8;
}
.benefit-card {
  min-height: 240px;
  padding: 34px;
  border-color: transparent;
  box-shadow: none;
}
.benefit-card:nth-child(1),
.benefit-card:nth-child(5) {
  background: var(--benefit-rose);
}
.benefit-card:nth-child(2),
.benefit-card:nth-child(6) {
  background: var(--benefit-lilac);
}
.benefit-card:nth-child(3),
.benefit-card:nth-child(4) {
  background: var(--benefit-peach);
}
.benefit-card h3 {
  min-height: 58px;
  font-size: 21px;
  line-height: 1.4;
}
.benefit-card p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: #52616f;
}
@media (hover: hover) {
  .benefit-card:hover {
    border-color: #c6a7be;
    box-shadow: 0 12px 28px #26344010;
  }
}
@media (min-width: 901px) {
  .hero {
    min-height: 560px;
  }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .hero-copy {
    width: 60%;
    padding: 38px 0 38px 40px;
  }
  .hero h1 {
    max-width: 100%;
    font-size: 25px;
  }
  .hero .hero-description {
    max-width: 94%;
    font-size: 16px;
    margin-block: 24px 28px;
  }
  .hero-credentials {
    width: 32%;
    padding: 18px;
  }
  .hero-credentials strong {
    font-size: 16px;
  }
  .hero-credentials .doctor-position {
    font-size: 13px;
  }
}
@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
  }
  .hero-copy {
    width: 100%;
    padding: 36px 34px 0;
  }
  .hero h1 {
    max-width: 680px;
    font-size: 28px;
  }
  .hero .hero-description {
    max-width: 650px;
    font-size: 17px;
  }
  .hero-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: 470px;
    margin-top: 24px;
    border-radius: 0;
  }
  .hero-art .doctor {
    width: auto;
    height: 100%;
    bottom: 0;
  }
  .hero-credentials {
    position: relative;
    inset: auto;
    width: calc(100% - 48px);
    max-width: 600px;
    margin: -74px auto 24px;
    padding: 22px 24px;
  }
  .hero-credentials strong {
    font-size: 18px;
  }
  .hero-credentials .doctor-position {
    font-size: 14px;
  }
  .benefit-card {
    min-height: 0;
    padding: 28px;
  }
  .benefit-card h3 {
    font-size: 20px;
    min-height: 56px;
  }
  .leader-credentials {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px;
  }
  .leader-credentials .doctor-role,
  .leader-credentials strong,
  .leader-credentials .doctor-position {
    grid-column: 1;
    grid-row: auto;
  }
  .leader-credentials .doctor-position {
    margin-top: 6px;
  }
}
@media (max-width: 600px) {
  .hero-copy {
    padding: 30px 24px 0;
  }
  .hero h1 {
    font-size: 23px;
  }
  .hero .hero-description {
    font-size: 16px;
    margin-block: 22px 26px;
  }
  .hero-art {
    height: 400px;
    margin-top: 22px;
  }
  .hero-credentials {
    width: calc(100% - 32px);
    margin-bottom: 16px;
    padding: 20px;
  }
  .participation-facts {
    padding-inline: 4px;
  }
  .participation-facts li {
    align-items: flex-start;
    font-size: 13px;
  }
  .participation-facts svg {
    margin-top: 2px;
  }
  .eligibility-grid[data-count='2'] {
    grid-template-columns: 1fr;
  }
  .eligibility-grid[data-count='2'] .eligibility-card {
    padding: 26px;
    gap: 18px;
  }
  .eligibility-grid[data-count='2'] h3 {
    font-size: 21px;
  }
  .eligibility-grid[data-count='2'] p {
    font-size: 16px;
  }
  .group-invitation {
    font-size: 16px;
    margin-top: 24px;
  }
  .leader-eyebrow {
    font-size: 10px;
    left: 16px;
    top: 14px;
  }
  .leader-play {
    gap: 8px;
    font-size: 10px;
    top: 56%;
  }
  .leader-play-icon {
    width: 48px;
    height: 48px;
    box-shadow:
      0 0 0 6px #ffffff55,
      0 4px 16px #183d5430;
  }
  .leader-play-icon svg {
    width: 20px;
    height: 20px;
  }
  .leader-play > span:last-child {
    padding: 4px 9px;
  }
  .leader-credentials {
    margin-top: 14px;
    padding: 22px;
  }
  .leader-credentials strong {
    font-size: 18px;
  }
  .leader-credentials .doctor-position {
    font-size: 14px;
  }
  .leader-context {
    padding: 24px;
    font-size: 15px;
  }
  .benefit-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .benefit-card {
    padding: 28px;
  }
  .benefit-card h3 {
    font-size: 21px;
    min-height: 0;
  }
  .benefit-card p {
    margin-top: 14px;
    font-size: 16px;
  }
}

/* Credentials stay attached to the portrait, with a readable role hierarchy. */
.doctor-credentials .doctor-position {
  display: grid;
  gap: 9px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 380px) {
  .hero-copy {
    padding-inline: 20px;
  }
  .hero h1 {
    font-size: 21px;
  }
}
.leader-video .leader-credentials {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 35%;
  max-width: 365px;
  left: auto;
  right: 24px;
  bottom: 24px;
  margin: 0;
  padding: 22px 24px;
  background: #fffffff2;
  border-color: #fff;
  box-shadow: 0 10px 30px #1f4c6610;
}
.leader-credentials strong {
  font-size: 18px;
}
.leader-credentials .doctor-position {
  align-self: stretch;
  font-size: 13px;
  line-height: 1.65;
}
@media (min-width: 701px) and (max-width: 900px) {
  .leader-video .leader-credentials {
    width: 40%;
    right: 18px;
    bottom: 18px;
    padding: 18px;
  }
  .leader-credentials strong {
    font-size: 16px;
  }
  .leader-credentials .doctor-position {
    font-size: 12px;
    line-height: 1.55;
  }
  .leader-credentials .doctor-position {
    gap: 7px;
  }
  .leader-portrait,
  .leader-play {
    left: 29%;
  }
}
@media (max-width: 700px) {
  .leader-video .leader-credentials {
    position: relative;
    inset: auto;
    width: calc(100% - 32px);
    max-width: none;
    margin: 0 16px 16px;
    padding: 22px;
  }
  .leader-portrait,
  .leader-play {
    left: 50%;
  }
  .leader-credentials .doctor-position {
    font-size: 14px;
  }
  .leader-credentials strong {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .group-invitation a {
    transition: none;
  }
}

/* The phone header and portrait order are independent of the desktop layout. */
.mobile-menu-trigger {
  display: none;
}
.mobile-navigation-panel {
  padding: 20px 24px 28px;
  gap: 12px;
  border-radius: 0 0 28px 28px;
  background: #fff;
  color: #172b3d;
  max-height: 100svh;
  overflow-y: auto;
}
.mobile-navigation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mobile-navigation-heading h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}
.mobile-menu-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #edf7fa;
  color: #367d8d;
}
.mobile-navigation-links {
  display: grid;
}
.mobile-navigation-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #e2edf0;
  color: #172b3d;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.mobile-navigation-links svg {
  color: #438a99;
}
.mobile-menu-account {
  min-height: 48px;
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: 24px;
  background: #eaf6fa;
  color: #367d8d;
  font-size: 15px;
  font-weight: 600;
}
.mobile-navigation-links a:focus-visible,
.mobile-menu-trigger:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu-account:focus-visible {
  outline: 2px solid #438a99;
  outline-offset: 4px;
}
@media (max-width: 600px) {
  .header {
    min-height: 84px;
    padding-block: 16px;
    flex-wrap: nowrap;
  }
  .header .section-nav,
  .header-actions > .account {
    display: none;
  }
  .header-actions {
    flex-direction: row;
  }
  .mobile-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid #c9e3e9;
    border-radius: 24px;
    background: #f1f9fb;
    color: #367d8d;
    font-size: 13px;
    font-weight: 600;
  }
  .hero-art {
    order: 0;
    height: 330px;
    margin-top: 12px;
  }
  .hero-credentials {
    order: 1;
    margin-top: -48px;
    margin-bottom: 0;
  }
  .hero-copy {
    order: 2;
    padding: 28px 24px 32px;
  }
}
@media (max-width: 380px) {
  .hero-copy {
    padding-inline: 20px;
  }
}

/* Closer framing uses the approved portrait without changing the image. */
.hero-credentials .doctor-position {
  max-width: none;
}
.hero-art .doctor {
  top: 12px;
  bottom: auto;
  left: 54%;
  right: auto;
  width: auto;
  height: 115%;
  transform: translateX(-50%);
}
@media (max-width: 900px) {
  .hero-art .doctor {
    top: 6px;
    left: 50%;
    height: 125%;
  }
}
@media (max-width: 600px) {
  .hero-art .doctor {
    height: 140%;
  }
}


/* ═══ Конец копии `globals.css` прототипа ══════════════════════════════════ */

/* ═══ 4. Приспособление под серверную верстку ══════════════════════════════
   У прототипа React и три готовых компонента (Accordion, Checkbox, Dialog).
   У нас страницу отдает сервер, а CSP не пускает инлайн, поэтому те же три
   места собраны нативной разметкой. Правила ниже ПОВТОРЯЮТ вид прототипа
   и не спорят с копией: они дают ровно то, что там приходило из Tailwind. */

/* --- Ссылка «к содержимому»: общая для всех экранов площадки. Витрина
   не берет `основа.css`, поэтому свой экземпляр правила нужен здесь. --- */
.к-содержимому {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
}
.к-содержимому:focus {
  left: 0;
}

/* --- Зов и кабинет — ссылки, а не кнопки (решение владельца 07.09).
   У прототипа обе кнопки работали скриптом; у нас за ними настоящие адреса
   `/заявка` и `/вход`. Вид обязан остаться прежним, а у ссылки нет ни
   центровки текста, ни выравнивания по середине — кнопке их дает браузер.
   Замер после правки: ни одного расхождения с эталоном. --- */
a.primary,
a.account,
a.mobile-menu-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
a.account,
a.mobile-menu-account {
  box-sizing: border-box;
  /* Кнопке центровку текста дает браузер, ссылке — нет. Единственное, что
     после этого расходится с эталоном, — вычисленный `display` (flex вместо
     block): иначе надпись не встанет по середине по высоте. На снимке
     это ноль пикселей. */
  text-align: center;
}

/* --- Раскрытие вопросов: `<details>` вместо Accordion.
   `.question` в копии выше кегль, отступы и зазор задает, а раскладку
   получал из Tailwind-классов кнопки (`flex flex-1 justify-between
   text-left border border-transparent`). Здесь они выписаны словами. --- */
.questions {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.questions > details {
  /* В прототипе линия стоит у КАЖДОГО элемента, включая последний:
     `[data-slot='accordion-item']` без `:not(:last-child)`. */
  border-bottom: 1px solid var(--border);
}
.question {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: space-between;
  text-align: left;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  /* Треугольник браузера снят: знак раскрытия рисует `.question-sign`. */
  list-style: none;
}
.question::-webkit-details-marker {
  display: none;
}
.question::marker {
  content: '';
}
/* Заголовок вопроса остается заголовком для читалки, но не приносит своего
   кегля: у прототипа текст лежал в `<span>` внутри `<h3 class="flex">`. */
.question > h3 {
  margin: 0;
  font: inherit;
  color: inherit;
}
/* У прототипа состояние приходило атрибутом `aria-expanded` на кнопке;
   у `<details>` его ставит сам браузер — здесь это `[open]`. */
.questions details[open] > .question {
  color: var(--blue);
}
.questions details[open] > .question .question-sign::after {
  transform: rotate(0);
}
.question:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

/* --- Флажки согласий: нативный `input` вместо Checkbox.

   Внимание, замер: правила `.consents button[data-slot='checkbox']` в копии
   выше НЕ РАБОТАЮТ. Компонент прототипа рисует флажок не кнопкой, а `<span
   role="checkbox">`, и селектор по `button` мимо. Поэтому вид флажка на
   отданной странице задает только Tailwind: рамка цвета границы, отмеченный —
   ОРАНЖЕВЫЙ цветом действия, галочка белая 14 px. Синий `#379bc0` из копии
   на экране не появляется никогда.

   Числа сняты с эталона браузером: 16x16, радиус 4, рамка 1 px, без своего
   отступа сверху (плашку по верху равняет `align-items: flex-start` метки).
   Ставить синий «как написано в файле» нельзя — разошлось бы с эталоном
   на два цвета и на два пикселя по вертикали. --- */
.consents input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent no-repeat center / 14px 14px;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}
.consents input[type='checkbox']:checked {
  border-color: var(--primary);
  background-color: var(--primary);
  /* Та же галочка lucide `check`, что и в прототипе, тем же белым и той же
     толщиной линии. Картинкой, а не значком в разметке: у флажка нет детей. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- Окно пояснения: нативный `<dialog>` вместо Dialog.
   Копия выше задает `.notice` ширину, отступы, зазор и радиус; сюда вынесено
   то, что приходило из Tailwind: сетка, подложка, кольцо и затемнение. --- */
.notice {
  display: grid;
  position: fixed;
  inset: 0;
  margin: auto;
  height: max-content;
  border: 0;
  background: var(--popover);
  color: var(--foreground);
  box-shadow: 0 0 0 1px #2634401a;
}
/* Браузер прячет `<dialog>` без `[open]` правилом `display: none`, но наш
   `.notice { display: grid }` весит больше и снял бы его: окно висело бы
   на странице всегда. Возвращаем явно. */
.notice:not([open]) {
  display: none;
}
.notice::backdrop {
  background: #0000001a;
  backdrop-filter: blur(2px);
}
.notice-close-x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted-foreground);
}
.notice-close-x svg {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  .notice-close-x:hover {
    background: #eef5f8;
    color: var(--navy);
  }
}

/* Появление окна — то же короткое проявление, что у прототипа
   (`data-open:animate-in fade-in zoom-in-95`, 100 мс). */
.notice[open] {
  animation: витрина-окно 120ms ease-out;
}
@keyframes витрина-окно {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  .notice[open] {
    animation: none;
  }
}

/* --- Меню разделов на телефоне: `<dialog>` вместо Sheet.
   Панель прототипа — компонент Sheet со `side="top"`: он выезжает сверху
   поверх затемнения, закрывается по Esc и по щелчку мимо. Раскладку ему
   давали классы Tailwind на самом компоненте, а `.mobile-navigation-panel`
   в копии выше задает только вид (поля, зазор, радиус, фон, прокрутку).
   Поэтому раскладка выписана здесь — теми же значениями, что у Sheet:
   `fixed inset-x-0 top-0 h-auto z-50 flex flex-col`, затемнение `black/10`,
   появление 200 ms со сдвигом на 2.5rem вверх, затемнение 150 ms.

   Почему `<dialog>`, а не раскрытие на `<details>`: модальность, затемнение,
   Esc и возврат фокуса браузер дает сам, а у `<details>` их нет ни одного. --- */
dialog.mobile-navigation-panel {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  max-width: none;
  max-height: 100svh;
  height: auto;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  /* Поля, зазор, радиус, фон и прокрутку задает копия выше — здесь только
     то, чего у прототипа не было в CSS, потому что приходило из Tailwind. */
  display: flex;
  flex-direction: column;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
  /* Кегль панели у прототипа задает Tailwind-класс `text-sm` на самом
     компоненте, а не CSS, — в копии выше его поэтому нет. Без него панель
     наследует 16/24 от `body` и вырастает: замер показал 425 px против
     эталонных 420, и разошлись все четыре ссылки разделов.

     Интервал ОТНОШЕНИЕМ, а не числом пикселей: у Tailwind `text-sm` это
     `calc(1.25 / 0.875)`, то есть 1.42857, и потомки с иным кеглем берут
     его множителем — ссылка в 17 px получает 24.29, кнопка кабинета
     в 15 px получает 21.43. Написанные вместо этого 20 px пришли бы
     к ним как есть, и панель стала бы 403 px против эталонных 420. */
  font-size: 14px;
  line-height: calc(1.25 / 0.875);
}
/* Браузер прячет `<dialog>` без `[open]` правилом `display: none`, а наша
   `display: flex` его снимет — окно осталось бы на экране навсегда. Тот же
   камень, что у окна пояснения. */
dialog.mobile-navigation-panel:not([open]) {
  display: none;
}
dialog.mobile-navigation-panel::backdrop {
  background: rgb(0 0 0 / 0.1);
  backdrop-filter: blur(2px);
  animation: витрина-затемнение 150ms ease-in-out;
}
@keyframes витрина-затемнение {
  from {
    opacity: 0;
  }
}
@starting-style {
  dialog.mobile-navigation-panel[open] {
    opacity: 0;
    transform: translateY(-2.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog.mobile-navigation-panel {
    transition: none;
  }
  dialog.mobile-navigation-panel::backdrop {
    animation: none;
  }
}

/* Заголовок панели у прототипа рисует SheetTitle — обычный h2 без своего
   кегля; наш сброс кегль заголовкам тоже не задает, но `margin` браузера
   остается. Копия выше его снимает правилом `.mobile-navigation-heading h2`,
   так что здесь ничего не нужно. */

/* --- Экран телефона: маска по прозрачности.
   У прототипа это атрибут `style="mask-type: alpha"` прямо на `<mask>`,
   а CSP без `unsafe-inline` инлайновый стиль не применяет — маска считалась
   бы по яркости. На этой картинке (белый силуэт на прозрачном) разница
   вышла бы только на сглаженных краях, но угадывать нечего: правило
   переносится как есть, просто файлом. --- */
#cabinet-screen-mask {
  mask-type: alpha;
}

/* --- Плашка демонстрационных данных. Общий каркас берет ее из `основа.css`,
   витрина ту основу не подключает — свой экземпляр нужен здесь. --- */
.плашка-демо {
  padding: 8px 16px;
  background: #fdf1e3;
  color: #7a4a12;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* --- Текст занимает всю отведенную ширину. Замечание владельца 10.09:
   «текст расположен не по ширине, а по левому краю, и очень много остается
   справа, это смотрится некрасиво».

   Беда не в ширине блока — он и так во всю карточку (замерено: абзац 304 px
   из 304 доступных). Беда в ДЛИННЫХ РУССКИХ СЛОВАХ в узкой колонке телефона:
   строка «У вас нет нарушений» занимала 177 px из 304, справа пусто 127.

   Половины лечения работают только вместе: одна выключка по ширине убирает
   дыру справа, но раздвигает пробелы внутри строки до 105 px; переносы
   по слогам роняют самый широкий пробел до 39 px и заодно укорачивают
   витрину на 106 px. Переносы работают от `lang="ru"` на `<html>`.

   Правило стоит В НАШЕМ ХВОСТЕ файла, а не в копии прототипного `globals.css`:
   порядок правил копии не трогаем. Специфичность у него наименьшая (один тег),
   поэтому любой класс прототипа по-прежнему сильнее.

   ЭТО ОТСТУПЛЕНИЕ ОТ ПРОТОТИПА, и оно сделано по прямой просьбе владельца:
   витрина больше не совпадает с архивом редакции 25 попиксельно. --- */
/* --- ПЕРЕНОСОВ НЕТ ВОВСЕ, И ВЫКЛЮЧКИ ПО ШИРИНЕ ТОЖЕ (решение владельца 17.09)

   Дословно: «везде убрать переносы, чтобы переносов вообще не было. Только
   цельные слова, переносы как-то смотрятся не очень».

   ЭТО ОТМЕНЯЕТ ПАРУ, ЗАВЕДЕННУЮ 10.09, И СНИМАТЬ ЕЕ НАДО ЦЕЛИКОМ. Выключка
   и переносы там работали вместе и лечили одно: дыру справа от коротких
   строк. Убери одни переносы — выключка останется, и та же дыра переедет
   ИЗ КОНЦА СТРОКИ В СЕРЕДИНУ, раздвинув пробелы между словами. Это
   не рассуждение: на 390 px замерено 39 px самого широкого пробела
   на витрине и 147 px на странице согласий еще ДО снятия переносов.

   Поэтому оба свойства возвращаются к обычному виду: строки идут по левому
   краю, слова остаются целыми, правый край рваный. Прежний текст правила
   и его доводы — в истории git, коммит с датой 10.09. --- */
p {
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Исключения — там, где выключка приходит НАСЛЕДОВАНИЕМ от секции, а правило
   выше наследование перебивает: шаги маршрута, надзаголовки и подводки.
   `inherit` возвращает ровно то, что было: по центру в центрованной секции
   и по левому краю в левой.

   Первая редакция этого исключения перечисляла еще три класса — и сделала
   хуже: у прототипа они выключены СВОИМ правилом (класс сильнее одиночного
   тега), моего вмешательства им не требовалось вовсе, а `inherit`
   с двумя классами перебил их собственную выключку и развернул по левому
   краю. Замерено: центрованных абзацев стало шесть вместо семи, а по левому
   краю — три вместо нуля. Правило класса и так сильнее — трогать нечего. */
.step-copy p,
p.eyebrow,
p.section-intro {
  text-align: inherit;
}

/* --- ПЕРЕНОСОВ СЛОВ В ЗАГОЛОВКАХ НЕТ — решение владельца 14.09. Оно
   ОТМЕНЯЕТ правку 10.09, которая стояла здесь до него.

   Его слова 14.09, с телефона: «на лендинге заголовки части блоков они
   с переносами стоят... как-то вроде это не очень смотрится. Можем мы
   сделать, чтобы переноса в заголовках именно в заголовках не было».

   ЧТО БЫЛО 10.09 И ПОЧЕМУ СНЯТО. Тогда он же жаловался, что «Есть трудности
   с репродуктивным здоровьем» встает тремя короткими строками, и лечением
   стали ДВЕ вещи разом: переносы по слогам (`hyphens: auto`) и отмена
   прототипного равнения строк (`text-wrap: wrap`). Переносы заголовок
   и укладывали в две строки.

   ЦЕНА СНЯТИЯ НАЗВАНА ЧИСЛОМ И ВЛАДЕЛЬЦУ СКАЗАНА: тот самый заголовок
   вернулся к трем строкам, и витрина на 390 px выросла с 9653 до 9712 px
   (+59). Это плата ровно за то, о чем он попросил: разорванных слов
   на экране больше нет ни одного.

   ВТОРАЯ ПОЛОВИНА ПРАВКИ 10.09 ТОЖЕ СНЯТА, и это улучшение, а не откат:
   с возвращенным прототипным `balance` ушли ДВЕ сироты — «Что вы получаете /
   за участие» вместо «Что вы получаете за / участие» и «От заявки до /
   завершения — один / понятный маршрут» вместо оторванного «маршрут».
   Замерено на 390 px. Заголовку про трудности `balance` не мешает: он
   и с ним, и без него идет в три строки.

   Только ниже 720 px: выше витрина не тронута вовсе — 0 расхождений
   геометрии и 0 несовпавших точек на 1440, 1920, 1280, 1088 и 768. --- */
@media (max-width: 720px) {
  h1, h2, h3 {
    /* ПЕРЕНОСОВ В ЗАГОЛОВКАХ НЕТ — решение владельца 14.09, и оно ОТМЕНЯЕТ
       половину правки 10.09. Тогда переносы по слогам поставили сюда, чтобы
       «Есть трудности с репродуктивным здоровьем» уложилось в две строки
       вместо трех. Владелец посмотрел это на телефоне и сказал: «заголовки
       с переносами... как-то не очень смотрится, можем сделать, чтобы
       переноса в заголовках именно в заголовках не было».

       Вторая половина правки 10.09 ОСТАЕТСЯ: `text-wrap: wrap` снимает
       прототипный `balance`, который нарочно равняет строки и на узкой
       колонке делает их все короткими. Без него заголовок разъезжается
       рваной лесенкой — это другая беда, и владелец на нее не жаловался.

       Цена названа числом в `docs/перенос-витрины.md`: высота витрины
       на 390 px выросла, и сторож неподвижности знает новое число. */
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* --- подпись под именем врача: без переносов (правка владельца 11.09) ------

   «Основатель и главный врач клиники гормонального здоровья доктора Магеря»:
   владелец увидел на компьютере, что «гормонального» идет С ПЕРЕНОСОМ,
   и попросил слово целиком на новой строке.

   Причина не в прототипе, а в НАШЕМ общем правиле абзаца (решение 10.09):
   оно выключает текст по ширине и разрешает переносить слова. Для широких
   абзацев это верно, но здесь блок узкий — 340 px при кегле 12, и в него
   попадает самое длинное слово подписи. Замерено на 1440 ДО правки: строки
   выходили 335, ПЯТЬ и 210 px — посреди подписи висел огрызок в один слог.
   После: две строки, 251 и 284, без переносов.

   Правило стоит В НАШЕМ ХВОСТЕ файла, а не в копии прототипного
   `globals.css`: копию не трогаем — она сверена с эталоном побайтно.
   Тот же случай, что с заголовком вопроса и строкой даты 10.09: короткая
   строка не терпит ни выключки, ни переносов. */
.doctor-position {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ═══ 5. Статьи: своя страница и список (12.09) ════════════════════════════
   Решение владельца: статья открывается СВОЕЙ СТРАНИЦЕЙ, а не окном поверх
   витрины. Экрана два — `/статьи/<ключ>` и список `/статьи`.

   ВСЕ ЭТИ ПРАВИЛА СТОЯТ В ХВОСТЕ, после пометки «Конец копии `globals.css`»:
   середина файла — чужой файл, порядок правил в ней не трогают, и добавлять
   туда свой селектор нельзя. Отсюда же следует, что каждое правило ниже
   весит не меньше прототипного: они идут позже, а специфичность равная.

   Экраны берут словарь прототипа как есть — карточка статьи в списке это
   те же `.article`, `.article-link`, `.circle-arrow`, что на витрине.
   Своего заведено ровно то, чего у прототипа нет вовсе: полоса текста,
   картинка статьи и дорога назад. */

.статья,
.статьи {
  padding-top: 40px;
  padding-bottom: var(--section-space);
}

/* --- «Все статьи» на витрине стало ССЫЛКОЙ на список (было кнопкой, которая
   возвращала карточкам исходный порядок). Кнопке центровку текста дает
   браузер, ссылке — нет: это тот же камень, за который 07.09 заплатили
   зовом «Принять участие» и «Личным кабинетом», и лечится он так же.

   Замер до и после правки: геометрия витрины совпала на всех трех ширинах
   до сотой доли пикселя, разошлось ровно одно вычисленное свойство —
   `text-align` (center у кнопки, start у ссылки). Правило возвращает его
   на место, и расхождений не остается ни одного. --- */
a.all-articles {
  text-align: center;
}

/* --- Дорога назад ведет на витрину, К БЛОКУ СТАТЕЙ. Тап-зона 44 px: это
   наша планка, и на нее прощения владельца нет — оно дано только тому,
   что пришло из прототипа. --- */
.статья__назад {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
}
.статья__назад svg {
  flex-shrink: 0;
}

/* --- Полоса статьи — полоса витрины целиком (решение владельца 13.09,
   раздел 6 ниже по файлу). До 13.09 здесь стояло `min(820px, 100%)` — наш
   предел длины строки, решение 19; теперь ширину держит не полоса, а сам
   текст, и сужать ее тут больше незачем. Ниже 1200 px полоса возвращается
   к 820 px — там колонок больше нет, и лишней ширине взяться не от чего. --- */
.статья__полоса {
  width: 100%;
  margin-inline: auto;
  margin-top: 24px;
}
.статья__имя {
  color: var(--navy);
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.5rem, 2.25vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* --- Подпись под заголовком. ВЫКЛЮЧКА ПО ЛЕВОМУ КРАЮ И БЕЗ ПЕРЕНОСОВ,
   как у тела статьи: общее правило `p` витрины (`text-align: justify` плюс
   `hyphens: auto`) досталось подписи наследованием, и на 1440 она ломала слово
   пополам — «подготовиться к счаст-ливому родительству». Переносов у нас нет
   нигде, кроме самой витрины (решение владельца 12.09: «я бы вообще эти
   переносы запретил»), и подпись тут была единственным местом страницы
   статьи, куда правило не дописали 12.09. Найдено снимком 13.09. --- */
.статья__подпись {
  margin-top: 14px;
  color: var(--muted-foreground);
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.статья__образ {
  width: 100%;
  height: auto;
  margin-top: 28px;
  border-radius: var(--card-radius);
}
/* --- Заголовок, которым назвал статью сам куратор: первая строка ВНУТРИ
   статьи (решение владельца). Крупным именем идет заголовок с карточки
   витрины, и эти два у первой статьи разные. --- */
.статья__заголовок-автора {
  margin-top: 36px;
  color: var(--navy);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

/* --- Тело статьи.

   ВЫКЛЮЧКА ПО ЛЕВОМУ КРАЮ И БЕЗ ПЕРЕНОСОВ — это решение владельца 12.09
   («я бы вообще эти переносы запретил»). Общее правило `p` у витрины
   выключает текст по ширине и переносит по слогам; оно осталось за самой
   витриной, потому что ее высота сверена с эталоном до пикселя и трогать
   ее нельзя. У страницы статьи такого обязательства нет, а текста на ней
   в разы больше — и выключка без переносов раздвигала бы пробелы внутри
   строки, то есть переносила бы дыру из конца строки в середину. --- */
.статья__текст {
  margin-top: 20px;
}
.статья__текст p,
.статья__текст li {
  color: var(--foreground);
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.статья__текст p + p {
  margin-top: 18px;
}
/* Абзац ПОСЛЕ СПИСКА тоже отбивается. Правило выше знает только пару
   «абзац после абзаца», у списка задан лишь отступ сверху — и текст,
   идущий за списком, прилипал к последнему пункту вплотную: замерено
   0 px против 18 у обычной пары. Видно на статье про психоэмоциональное
   состояние, абзац «Например: …» после трех вопросов. */
.статья__текст ul + p {
  margin-top: 18px;
}
.статья__текст h3 {
  margin-top: 40px;
  margin-bottom: 14px;
  color: var(--navy);
  font-family: 'Unbounded', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.статья__текст h4 {
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
/* Маркеры списка рисуем сами: сброс витрины снял `list-style` у всех списков
   (у прототипа это делал Tailwind preflight), и без своей метки пункты
   читались бы сплошным текстом. */
.статья__текст ul {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.статья__текст li {
  position: relative;
  padding-left: 26px;
}
.статья__текст li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* --- Подножие статьи: назад к витрине и ко всему списку. --- */
.статья__подножие {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  width: 100%;
  margin-inline: auto;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* --- Список статей. Карточки те же, что на витрине; свое — только шапка
   экрана и строка о ненайденной статье. --- */
.статьи__шапка {
  margin-top: 24px;
  max-width: 820px;
}
.статьи__шапка h1 {
  color: var(--navy);
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.5rem, 2.25vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.статьи__подводка {
  margin-top: 14px;
  color: var(--muted-foreground);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Заголовок карточки: на витрине он `h3`, в списке `h2` — уровень выбирает
   страница (на списке над карточками стоит `h1`, и прыжок `h1 → h3` читалка
   считает дырой), а вид у карточки один на оба экрана. Значения повторяют
   правило `.article h3` из копии прототипа; что они не разъехались,
   сторожит `test_заголовок_карточки_в_списке_выглядит_как_на_витрине`. */
.статьи .article h2 {
  font-size: 20px;
  line-height: 1.4;
  color: var(--navy);
  font-weight: 600;
}
/* Ответ на незнакомый ключ: список плюс строка словами. Статус у ответа 404,
   и человек обязан прочесть об этом, а не догадаться по тому, что открылся
   список. */
.статьи__не-найдена {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--pale);
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

@media (max-width: 720px) {
  .статья__полоса,
  .статья__подножие {
    margin-top: 20px;
  }
  .статья__подпись {
    font-size: 16px;
  }
  .статья__текст p,
  .статья__текст li {
    font-size: 16px;
  }
  .статья__образ {
    border-radius: 18px;
  }
  /* Две ссылки подножия на телефоне встают в столбик: рядом они занимают
     больше ширины, чем есть, и «Все статьи» уезжает за край. */
  .статья__подножие {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Две наши планки, которых прототип не держит, и которые страницы статей
   держать ОБЯЗАНЫ.

   Витрине их простил владелец: вопрос 43 закрыт 07.09 словами «оставить
   как есть», и трогать ее нельзя — ее высота сверена с эталоном до пикселя.
   Но прощение дано ЕЙ, а не всему, что похоже на нее, и правило площадки
   на этот счет прямое: прощение узкое, а не пропуск экрана целиком
   (`tests/test_лендинг.py`: пропускается ровно один экран — витрина).

   Поэтому оба правила висят на классе `страница-статьи`, который ставит
   только тело этих двух страниц. Витрина отдает `<body>` без класса,
   побайтно как раньше, и ни одно правило ниже до нее не достает. --- */

/* 1. Контур фокуса. У прототипа он бирюзовый (`--accent`) и дает на белом
      2.72:1 при норме 3:1. Здесь он чернильный — 15.29:1 на белом, — а белая
      кромка вокруг держит темный фон подвала (#0d1b3b): одного цвета
      не хватает, потому что контур обязан быть виден и на белой странице,
      и на чернильной ленте подвала. Это общее правило площадки: контур
      фокуса двухцветный. */
.страница-статьи button:focus-visible,
.страница-статьи a:focus-visible,
.страница-статьи input:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 5px;
  box-shadow: 0 0 0 3px #fff;
}

/* 2. Знак марки в шапке на телефоне. Картинка 215x61 ужимается по ширине
      экрана, и ссылка вокруг нее выходит 152x43 px при нашей норме 44.
      Один пиксель, но это наша планка, и на странице статьи она держится:
      ссылка получает 44 px под палец, а картинка внутри остается на месте
      (шапка и так выше — 120 px на столе, и высоту ей эти 44 не меняют). */
.страница-статьи .header > a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* 3. Переносы в заголовках статей. У витрины ниже 720 px заголовки нарочно
      переносятся по слогам — правка 10.09 по замечанию владельца про узкую
      колонку карточек. Заголовкам статей это не годится: решение того же
      владельца 12.09 — «я бы вообще эти переносы запретил», — а строки тут
      длинные, и слово целиком в них помещается. Замерено на 390 px:
      «психоэмоциональное» встает целиком, за край не уходит ничего. */
.страница-статьи .статья__имя,
.страница-статьи .статья__заголовок-автора,
.страница-статьи .статьи__шапка h1,
.страница-статьи .статья__текст h3,
.страница-статьи .статья__текст h4 {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ═══ 6. Ширина статьи: полоса витрины и оглавление сбоку (13.09) ══════════
   РЕШЕНИЕ ВЛАДЕЛЬЦА 13.09, дословно: «мне бы хотелось, чтобы статья была
   такая же, как ширина в сайте — вот она соблюдена для остальных блоков,
   чтобы вот здесь было так». Вид «В2» из пробы `stati-vidy`, показан
   и выбран им же.

   ЧТО ИМЕННО ПОМЕНЯЛОСЬ, А ЧТО НЕТ. Полоса статьи занимает ВСЮ полосу
   витрины (1360 px на окне 1440, 1480 на 1920), картинка идет во всю эту
   ширину. СТРОКА ТЕКСТА при этом остается 820 px — это предел читаемости
   площадки (`tests/ширины/стенд.py`, `ПРЕДЕЛ_СТРОКИ`, решение 19), и правка
   его не трогает: занимается то, что ВОКРУГ строки. Пустовавший левый край
   отдан оглавлению, и оно держится на виду, пока читают.

   СКРИПТА У ЭТОГО НЕТ ВОВСЕ: прилипание дает `position: sticky`, переходы
   по разделам — обычные якоря. Это тот же выбор, что у отбора на телефоне
   и у ответов анкеты: свое решение на скрипте пришлось бы проверять
   в Safari, а Safari нам мерить нечем.

   ПРАВИЛА СТОЯТ В ХВОСТЕ, после пометки «Конец копии `globals.css`»: середину
   файла — чужую копию — не трогают ни строкой. */

/* --- Полоса во всю ширину стоит теперь у ЛЮБОЙ статьи, и задает ее базовое
   правило `.статья__полоса` выше по файлу. Класс `статья--во-всю` остался
   ровно за одним — за сеткой с оглавлением: его ставит шаблон там, где
   разделов от двух.

   Прежде широкая полоса шла только с оглавлением, потому что текст в ней
   держал 820 px, и без соседа слева справа оставалось 540 px пустоты.
   С 13.09 текст занимает колонку целиком, пустоте взяться неоткуда,
   и оговорка снята (решение владельца, дословно ниже). --- */

/* Подпись под заголовком — короткая строка-подводка, не основной текст,
   и предел 820 px на ней ОСТАЕТСЯ. Владелец просил «основной текст»,
   а растянутая на 1360 px подводка в две строки дала бы вверху страницы
   две длинные нитки подряд. Если попросит и ее — снимать здесь. */
.статья__подпись {
  max-width: 820px;
}

/* --- Две колонки: оглавление и текст. Сетка открывается СРАЗУ ПОД КАРТИНКОЙ,
   потому что картинка обязана идти во всю полосу.

   `align-items` НЕ ставим: колонке оглавления нужна полная высота ряда, иначе
   прилипанию некуда двигаться. Прилипает не сама колонка, а `nav` внутри нее —
   короткий элемент в высоком предке. Это общий камень `sticky` в сетке:
   растянутый на весь ряд блок не прилипает никогда. --- */
/* ВТОРАЯ ДОЛЯ — `1fr`, А НЕ 820 px. Решение владельца 13.09, дословно:
   «я хотел бы попросить, чтобы основной текст был по ширине везде сделан,
   в статьях». До правки текст держал 820 px и справа от него оставалось
   пустое место — 164 px на окне 1440 и 284 px на 1920. Теперь колонка
   забирает все, что осталось от полосы: 984 px и 1104 px соответственно.

   ЭТО ВЫШЕ НАШЕГО ПРЕДЕЛА В 820 px (решение 19), и пропуск на это стоит
   поименно: `tests/ширины/экраны.py`, `ОТСТУПЛЕНИЯ`, ключ «статья» —
   прощается ровно длина строки и ровно как решение владельца. */
.статья--во-всю .статья__низ {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
}

/* --- Оглавление. Своего словаря у витрины на него нет: цвета и радиусы
   берутся ее же переменными. --- */
.статья__оглавление {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--pale);
}
/* Заголовок оглавления. С 14.09 это `summary` складки, а не абзац: на столе
   он обязан выглядеть ровно как прежний абзац (вид утвержден 13.09), поэтому
   значок складки убран, курсор обычный и нажатие мышью не проходит — иначе
   утвержденная колонка складывалась бы от случайного щелчка. Клавиатурой
   складка по-прежнему открывается и закрывается: это раскрывающийся блок,
   и отнимать у него управление незачем. */
.статья__оглавление-имя {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  list-style: none;
  cursor: default;
  pointer-events: none;
}

/* Значок складки браузеры рисуют по-разному (треугольник, стрелка), и убрать
   его надо ОБОИМИ способами: `list-style` у самой summary и `::-webkit-details-
   marker` у Safari и старых Chromium. */
.статья__оглавление-имя::-webkit-details-marker { display: none; }

/* Своя стрелка нужна только телефону — там складка закрыта, и без нее
   строка читается как заголовок, а не как то, что можно раскрыть. */
.статья__оглавление-стрелка { display: none; }

/* ПОДПИСЬ «ВЫ ЧИТАЕТЕ: …» СПРЯТАНА ПО УМОЛЧАНИЮ, а не только на столе.
   Правило объявлено СНАРУЖИ медиазапроса нарочно: объяви его внутри —
   и на настольной ширине подпись оказалась бы обычным видимым текстом
   рядом с «В материале», потому что скрипт пишет ее независимо от ширины.
   Тот же класс беды, что «медиазапрос не снимает атрибут `hidden`». */
.статья__оглавление-имя .подпись-раздела { display: none; }
.статья__оглавление ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
/* ЦВЕТ ССЫЛКИ — СИНИЙ СТУПЕНЬЮ ГЛУБЖЕ, И ЭТО ЗАМЕР. Обычный `--blue` (#237b9b)
   на заливке `--pale` дает 4.42:1 при норме 4.5 — на белом фоне он проходит
   (4.80), а на светло-голубой подложке нет. Взят тот же синий ступенью глубже,
   #155872, которым витрина уже красит «Все статьи» под курсором: на подложке
   он дает 7.25:1. Прощение владельца (вопрос 43) дано ВИТРИНЕ, а страницам
   статей нет, и держать планку им положено самим. */
.статья__оглавление a {
  display: flex;
  align-items: flex-start;
  /* Поля СВОИ, а не от `min-height`: высота 44 px раздвигает только
     односложные пункты («3. Двигайтесь»), а у пунктов в две строки остается
     ровно зазор сетки — список читался рваным, 29 px против 8. */
  min-height: 44px;
  padding-block: 6px;
  color: #155872;
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Якорь не должен вставать вплотную к верхней кромке окна: заголовок раздела
   упирался бы в край. */
.статья__текст h3[id] {
  scroll-margin-top: 24px;
}

/* --- Колонка оглавления держится на виду, пока читают. --- */
.статья--во-всю .статья__оглавление--сбоку {
  position: sticky;
  top: 24px;
  /* На низком окне длинное оглавление не должно уезжать за кромку. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

/* --- Ниже 1200 px колонка складывается: оглавление возвращается наверх
   строкой, текст занимает всю доступную ширину.

   ЧИСЛО 1200, А НЕ 900, И ЭТО ЗАМЕР. Сбоку колонке нужно 320 px, зазору 56,
   тексту 820 — это 1196 плюс поля полосы. На окне 900 текст в двух колонках
   сжимался до 484 px: строка становилась вдвое короче предела, то есть беда
   выходила ровно обратная той, с которой пришел владелец. --- */
@media (max-width: 1199.98px) {
  /* ПОЛОСА ВОЗВРАЩАЕТСЯ К 820 px, И ЭТО НЕ МЕЛОЧЬ. Сложить колонки мало:
     полоса осталась бы во всю ширину окна, и текст, которому больше не с кем
     ее делить, растянулся бы на всю. Замерено на живой странице: на окне 1199
     строка выходила 1109.6 px и 120 знаков при пределе 820 px и 88 знаках,
     на окне 900 — 853 px. Ровно та беда, с которой пришел владелец, только
     наизнанку. В пробе этого не было видно: виды в ней стоят на 1440 и на 390,
     а ширины между 900 и 1200 не смотрел никто. */
  .статья__полоса,
  .статья__подножие {
    width: min(820px, 100%);
  }
  .статья--во-всю .статья__низ {
    display: block;
    margin-top: 0;
  }
  /* Прежнее «прилипание снять» (до 14.09) отменено просьбой владельца:
     на телефоне оглавление как раз и обязано оставаться на виду. Правило
     ниже в этом же запросе включает его заново. */
  .статья__оглавление {
    margin-top: 28px;
  }

  /* ─── ОГЛАВЛЕНИЕ ПРИЛИПАЕТ СВЕРХУ (просьба владельца 14.09) ──────────────
     Дословно: «в мобильной версии, когда ты начинаешь статью прокручивать,
     содержание теряется. Надо сверху, чтобы содержание было, ты мог в любой
     момент развернуть и перейти по навигации».

     Прилипает САМА складка, и потому ей нужны плотный фон и кромка: под ней
     проезжает текст статьи. Отступ сверху нулевой — строка встает к самой
     кромке окна, как панель.

     Место, которое складка занимает в потоке, когда закрыта, — это высота
     одной строки, около 60 px. Открытая не растет выше 60vh: длинное
     оглавление на телефоне иначе накрыло бы экран целиком. */
  /* ОБЕРТКА РАСТВОРЯЕТСЯ, ИНАЧЕ ПРИЛИПАТЬ НЕКУДА. `position: sticky`
     двигается только внутри коробки СВОЕГО РОДИТЕЛЯ, а `.статья__колонка-
     оглавления` ровно такой же высоты, как само оглавление, — двигаться
     ему было некуда, и `sticky` не делал ничего (замерено: верх уезжал
     в -1546 при прокрутке). На столе этой беды нет: там колонка — доля
     сетки и растянута на всю высоту ряда.

     `display: contents` убирает коробку обертки, и родителем складки
     становится `.статья__низ` — он высотой во всю статью. */
  .статья--во-всю .статья__колонка-оглавления { display: contents; }

  /* СЕЛЕКТОР ИЗ ДВУХ КЛАССОВ ОБЯЗАТЕЛЕН. Строкой выше в этом же запросе
     стоит `.статья--во-всю .статья__оглавление--сбоку { position: static }`,
     и одиночный класс ему проигрывает по специфичности — прилипание молча
     не включалось вовсе (замерено: `position` оставался `static`). Тот же
     камень, что с `.знак-шага` и `.ячейка-плашки`. */
  .статья--во-всю .статья__оглавление--сбоку {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-top: 20px;
    padding: 14px 16px;
    max-height: none;
    background: var(--pale);
  }

  /* Строка «В материале» на телефоне НАЖИМАЕТСЯ: складка закрыта, и это
     единственный способ ее раскрыть. `pointer-events` возвращаем, тап-зона
     от 44 px, стрелка появляется и поворачивается на раскрытии. */
  .статья__оглавление-имя {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    font-size: 16px;
  }

  .статья__оглавление[open] .статья__оглавление-имя {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  /* Стрелка собрана двумя гранями рамки: ради одного значка заводить файл
     незачем. Тот же прием, что у «Назад» в кабинете куратора. */
  .статья__оглавление-стрелка {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-right: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    transform: rotate(45deg);
  }

  .статья__оглавление[open] .статья__оглавление-стрелка {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  .статья__оглавление[open] ol {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* ─── ГДЕ Я СЕЙЧАС (вид «В», выбран владельцем 14.09) ────────────────────
     Свернутая строка называет не «В материале», а раздел, который читают.
     В статье на восемь разделов этот вопрос задают чаще, чем «куда пойти»:
     по содержанию прыгают раз-два за чтение, а место в тексте теряют
     постоянно.

     Меняются подписи ТОЛЬКО в свернутой строке и только когда раздел уже
     известен (`[data-раздел]` ставит скрипт). Раскрытая снова говорит
     «В материале»: список под ней и так виден, а место под длинное имя
     там занято. */
  .статья__оглавление-имя .подпись-раздела {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--navy);
    font-weight: 600;
  }

  .статья__оглавление:not([open])[data-раздел] .подпись-раздела { display: block; }
  .статья__оглавление:not([open])[data-раздел] .подпись-обычная { display: none; }

  /* Раздел, в котором стоим, отмечен в списке ВЕСОМ И ЦВЕТОМ, а не только
     цветом: цвета читалка не видит, и `aria-current` тут не для вида. */
  .статья__оглавление a[aria-current="true"] {
    color: var(--navy);
    font-weight: 700;
  }

  /* ЯКОРЬ УЕЗЖАЕТ ПОД ПРИЛИПШУЮ СТРОКУ, если не отодвинуть его явно:
     заголовок раздела встает ровно под ней и его не видно. Число — высота
     закрытой складки (около 60 px) плюс воздух. */
  .статья__текст h3[id] {
    scroll-margin-top: 84px;
  }
}

/* ═══ 7. Карточка статьи нажимается целиком (13.09) ════════════════════════
   РЕШЕНИЕ ВЛАДЕЛЬЦА 13.09, дословно: «когда я подвожу к этой статье,
   к этой картинке, чтобы она была активная, то есть чтобы мне не приходилось
   искать, где открыть статью, а чтобы я нажимал на картинку и статья
   открывалась».

   Правка утвержденного вида, и владелец попросил ее сам. В ПОКОЕ карточка
   обязана выглядеть ТОЧНО как прежде — доказано двумя замерами: высота
   витрины та же до пикселя на трех ширинах (6673 / 6541 / 9685), и вычитание
   точек полных снимков дает ноль несовпавших. Новое видно только под курсором
   и под фокусом.

   ЧЕМ НАКРЫВАЕТСЯ. Ссылкой на заголовке с растянутой подложкой
   (`::after { inset: 0 }`). Новой разметки под это не заводится и ни один блок
   не двигается: подложка — псевдоэлемент, и место она не занимает. */

/* Подложке нужен позиционированный предок: `inset: 0` меряется по нему.
   Геометрия от `position: relative` без смещений не меняется — сверено
   вычитанием точек. */
.article {
  position: relative;
}
/* Ссылка заголовка не должна менять вид заголовка: кегль, цвет и вес
   у карточки задает `.article h3` (копия прототипа), и трогать их нельзя. */
.вход-в-статью {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.вход-в-статью::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* КНОПКА ВНУТРИ НАЖИМАЕМОЙ КАРТОЧКИ ОБЯЗАНА ИМЕТЬ СВОЙ СЛОЙ. Камень, за
   который площадка платила 11.09: растянутая подложка накрыла кнопку
   «Заполнить» на маршруте, и у четырех участниц из пяти она не нажималась
   вовсе — а размеры, тап-зона и вид у нее были правильные, и ни один замер
   этого не показывал. «Подробнее» ведет туда же, куда карточка, но ссылкой
   она остается настоящей: свой слой, свой фокус, свое подсвечивание.
   Проверяется не рассуждением, а замером «кто под пальцем в центре». */
.article-link {
  position: relative;
  z-index: 1;
}

/* --- ВИДНО, ЧТО КАРТОЧКА ЖИВАЯ. Подъем, кромка, тень и приближение картинки
   у карточки под курсором прототип держал и раньше (`@media (hover: hover)`
   в копии) — но раньше это было обещание без действия: нажималась одна строка
   «Подробнее». Теперь нажимается вся карточка, и к подъему добавлены два
   знака того же смысла: кружок со стрелкой загорается синим, как будто курсор
   стоит на «Подробнее», и заголовок становится синим — цветом ссылки.
   Своих цветов правило не заводит: и то и другое уже есть у прототипа
   в `.article-link:hover .circle-arrow`. --- */
@media (hover: hover) {
  .article:hover .circle-arrow {
    background: var(--blue);
    color: #fff;
  }
  .article:hover .вход-в-статью {
    color: var(--blue);
  }
}

/* --- КОНТУР ФОКУСА РИСУЕТСЯ НА КАРТОЧКЕ. У ссылки заголовка он обвел бы
   строку текста, а нажимается вся карточка — человек увидел бы одно,
   а нажал другое. Прием площадки, тот же, что у карточки входа в кабинете:
   контур гасится у ссылки и рисуется на предке.

   `:has()`, а не `:focus-within`: `:focus-within` сработал бы и на «Подробнее»,
   и контуров стало бы два — на кнопке и вокруг карточки. Все правило стоит
   под `@supports`: движок без `:has()` оставит ссылке ее собственный контур,
   и без индикатора не останется никто. --- */
@supports selector(:has(*)) {
  /* Второй селектор нужен из-за ВЕСА, а не для порядка: общее правило страниц
     статей `.страница-статьи a:focus-visible` весит три класса и тип, а один
     класс с псевдоклассом — два, и одного правила не хватало. Замерено:
     на `/статьи` контуров выходило ДВА — вокруг строки заголовка и вокруг
     карточки. */
  .вход-в-статью:focus-visible,
  .страница-статьи .вход-в-статью:focus-visible {
    outline: none;
  }
  .article:has(.вход-в-статью:focus) {
    outline: 3px solid var(--accent);
    outline-offset: 5px;
  }
  /* На страницах статей контур чернильный: прощение владельца (вопрос 43,
     бирюзовый 2.72:1) дано ВИТРИНЕ, а не всему, что на нее похоже. Те же
     значения, что у общего правила `.страница-статьи a:focus-visible`
     выше по файлу — 15.29:1 на белом плюс белая кромка под темный фон. */
  .страница-статьи .article:has(.вход-в-статью:focus) {
    outline-color: var(--navy);
    box-shadow: 0 0 0 3px #fff;
  }
}


/* ═══ 8. Пятый раздел в шапке: «Полезные материалы» (13.09) ════════════════
   РЕШЕНИЕ ВЛАДЕЛЬЦА 13.09, дословно: «наверху сделать еще один раздел, может,
   так и назвать его „Полезные материалы"… вверху эти разделы тоже как-то надо
   на эту ссылку сделать». Пункт ведет на список `/статьи`.

   ШАПКА ПРОТОТИПА ТЕСНАЯ, И ЭТО ЗАМЕР, А НЕ ОПАСЕНИЕ. Пункт «Полезные
   материалы» занимает 152.6 px. На широком окне он входит с запасом: между
   ним и «Личным кабинетом» остается 239 px на 1920, 187 на 1440, 113 на 1280,
   76 на 1200 и 24.1 на 1088. Ниже 1088 ряду разделов уже не хватает места:
   на 1087 он не влезает в свою коробку на 1 px, на 1081 — на 6, а на 1060
   последний пункт налезает на «Личный кабинет» (−1.8 px) и на 1024 уходит
   за его край на 59. Своих правил шапке прототипа при этом не добавлено
   ни одного: она просто перестает вмещать пятое слово.

   ПОРОГ 1087.98 px, И ОН ВЗЯТ ЗАМЕРОМ, А НЕ КРУГЛОСТЬЮ. Ряд перестает
   помещаться в свою коробку ровно на 1088: там разница нулевая, на 1087 уже
   1 px. Кромку и поставили туда — как `1199.98` у складывания колонок
   в статье. Круглые 1080 тоже держались бы (на 1081 остается 17.7 px
   до «Личного кабинета», больше нашего минимума в 8), но коробка ряда там
   уже поджата, а поджатая коробка — это то, что ломается от первой же
   правки соседа.

   НИЖЕ ПОРОГА разделы уходят СВОИМ РЯДОМ под знак и «Личный кабинет» —
   ровно так же, как это делает сам прототип ниже 900 px. Своего приема
   здесь не выдумано: взяты те же свойства, которыми прототип разворачивает
   шапку.

   ЧТО ЭТО СТОИЛО ВИТРИНЕ. На 1440, 1088 и 390 — ничего вовсе: на первых двух
   пункт входит в ряд (шапка те же 126 px), на третьей разделы и так живут
   в меню «Разделы». Двумя ярусами шапка идет на 901–1087 px, и там страница
   становится выше на 16.14 px. Это цена пятого пункта, и другой у нее нет:
   слово в шапку не помещается. */
@media (min-width: 901px) and (max-width: 1087.98px) {
  .header {
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-block: 20px 16px;
  }
  .section-nav {
    order: 3;
    width: 100%;
    gap: 26px;
  }
}

/* --- РЯД РАЗДЕЛОВ ПЕРЕНОСИТСЯ, А НЕ УЕЗЖАЕТ ВБОК. Ниже 900 px прототип
   кладет разделы своим рядом и разрешает ему горизонтальную прокрутку
   (`overflow-x: auto`). С четырьмя пунктами она не включалась никогда;
   с пятым ряду нужно 650 px, и ниже окна в 690 px последний пункт начинал
   уезжать за край — на 640 px за краем оставалось 50 px, на 601 px — 89.

   Правило площадки на этот счет прямое (10.09): ряд, съезжающий вправо,
   на телефоне никуда не годится. Перенос его снимает и НИЧЕГО не меняет
   там, где ряд и так помещался: `flex-wrap` виден только тогда, когда
   содержимое шире строки. Ниже 600 px разделы уходят в меню «Разделы»
   списком, и этого правила уже не касается. --- */
@media (max-width: 900px) {
  .section-nav {
    flex-wrap: wrap;
  }
}

/* ═══ Правовые документы: политика и согласия ══════════════════════════════
   Заведены 14.09 по требованию юристов заказчика: политика обработки данных
   публикуется со свободным доступом, к тексту согласия человек доходит,
   не проходя воронку.

   СТРОКА ТУТ 820 px, И ЭТО НАРОЧНО. У статей владелец 13.09 попросил текст
   во всю ширину полосы — там материал, который листают. Юридический документ
   читают иначе: внимательно и до конца, — и предел читаемости площадки
   (решение 19, 88 знаков в строке) заведен ровно для такого случая.
   Без этого правила строка вышла 1360 px — замерено. */
.документ {
  padding-bottom: 72px;
}

.документ__полоса {
  max-width: 820px;
  margin: 0 auto 48px;
}

.документ__имя {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: var(--navy);
}

.документ__подпись {
  margin: 0 0 4px;
  color: var(--navy);
  opacity: 0.75;
}

.документ__редакция {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--navy);
  opacity: 0.6;
}

.документ__текст {
  font-size: 17px;
  line-height: 1.7;
  color: var(--navy);
}

/* Подзаголовки приходят h3, а не h2: так их отдает наш разбор разметки
   (`app/разметка_текста.py`, «##» -> h3). Целился в h2 — и подзаголовки
   на первом снимке остались обычным текстом. Правило берет оба. */
.документ__текст h2,
.документ__текст h3 {
  margin: 32px 0 12px;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.25;
}

/* Переносов слов в документе нет: правило площадки от 12.09. На витрине
   они включены своим файлом, и без этой строки юридический текст рвался
   посреди слова («от-ветит» на первом снимке). */
.документ__текст,
.документ__текст p,
.документ__текст li {
  hyphens: manual;
  -webkit-hyphens: manual;
}

.документ__текст p,
.документ__текст li {
  margin: 0 0 14px;
}

.документ__текст ul,
.документ__текст ol {
  margin: 0 0 14px;
  padding-left: 22px;
  list-style: disc;
}

/* Пункты юриста — С НОМЕРАМИ (правка 25.09). Правило выше красило точкой
   и нумерованный список: пункты 1-7 согласия на обработку данных стояли
   на странице «Согласия» точками с 14.09, хотя разметка нарочно отдает их
   тегом `ol` — на «пункт 5» ссылаются и документ, и переписка с юристами
   (`app/разметка_текста.py`). Вскрылось, когда пришло согласие на участие
   с пунктами 1-3. Сторож — `tests/ширины/test_пункты_согласий.py`. */
.документ__текст ol {
  list-style: decimal;
}

.документ__текст a {
  color: var(--primary);
  text-decoration: underline;
}

.документ__рядом {
  max-width: 820px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(11, 54, 84, 0.12);
}

/* Перекрестная ссылка держит палец: 44 px (решение 20). Замерено 21.09 —
   было 19 px. Эти страницы прототип не рисовал, занижать на них норму
   не за чем, и подчеркивание с цветом при этом не трогаются. */
.документ__рядом a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--primary);
  text-decoration: underline;
}

/* КОНТУР ФОКУСА НА ПРАВОВЫХ СТРАНИЦАХ ДЕРЖИТ НОРМУ, в отличие от витрины.
   У витрины контур прототипа дает 2.72:1 при норме 3 — это известное
   отступление, закрытое решением владельца 07.09 («оставить как есть»,
   вопрос 43). Но эти страницы прототип не рисовал: они заведены 14.09
   по требованию юристов, и занижать на них доступность не за чем.

   Контур чернильный с белым кольцом — тот же прием, что в кабинете:
   светлая кромка держит темный фон, темная светлый. */
.страница-документа a:focus-visible,
.страница-документа button:focus-visible,
.страница-документа summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95);
  border-radius: 4px;
}

/* Правовые ссылки в подвале витрины (требование юристов, 14.09). Набраны
   средствами самого подвала: цвет и кегль его, своя только строка. */
.footer-legal {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.footer-legal a {
  color: inherit;
  text-decoration: underline;
}

.footer-legal a:hover {
  color: #ffffff;
}

/* ПРАВОВЫЕ ДОКУМЕНТЫ В ПОДВАЛЕ ВИТРИНЫ — три отдельные строки (15.09).

   Решение владельца: «чтобы у нас было три строчки... прямо тремя отдельными
   строками», «без подчеркивания, когда ты подносишь — просто идет какое-то
   выделение», «цвет текста сделать такой же, как цвет фразы здоровья».

   ЦВЕТ ВЗЯТ У СЛОВА «ЗДОРОВЬЮ» в том же подвале — `#a3b3ca` (правило
   `.footer-heading span` выше по файлу, копия прототипа). Он назван им прямо,
   и он же проходит контраст: 7.97:1 на фоне подвала `#0d1b3b` при норме 4.5
   для мелкого текста. Наведение высветляет до белого — 16.98:1.

   ПОДЧЕРКИВАНИЯ НЕТ, и различает ссылку цвет: рядом в подвале текста нет
   вовсе, путать не с чем. Правило СВОЕ и стоит ПОСЛЕ копии прототипного
   `globals.css`: середину файла не трогаем, она чужая. */
/* ПРАВОВЫЕ ССЫЛКИ ПРИЖАТЫ К НИЗУ ПОДВАЛА (решение владельца 15.09).

   Дословно: «прям спустить к нижней границе, ну там отступ от нее сделать,
   не знаю, полсантиметра, чтобы это было просто внизу... выравнивание
   по линии надписи про комплексное здоровье».

   ПОЛСАНТИМЕТРА ЗАПИСАНО САНТИМЕТРАМИ, а не переведено в 19 px: через
   полгода «19» пришлось бы расшифровывать, а `0.5cm` читается как сказано.
   В CSS сантиметр равен 37.8 px, так что это 18.9 px.

   ЛЕВЫЙ КРАЙ — по той же вертикали, что знак и фраза о здоровье. Поля
   полосы задает копия прототипа (40 px на столе, 24 px ниже 768 px),
   и повторять их числом нельзя — разъедутся при первой же правке чужого
   файла. Поэтому блок растянут на всю ширину подвала, а поля берет
   из своей переменной, объявленной рядом с медиазапросом прототипа.

   БЛОК ОДИН НА ТРИ СТРОКИ. Первая редакция прижимала каждую строку
   отдельным `bottom` со своим слагаемым — три числа, которые обязаны
   сойтись с высотой строки: выросла бы строка, и они наехали бы друг
   на друга молча.

   Низ подвала занят декоративной надписью-картинкой, ссылки ложатся
   ПОВЕРХ нее — контраст проверен пиксельно, а не на глаз. */
.footer-legal {
  position: absolute;
  right: 0;
  bottom: 0.5cm;
  left: 0;
  z-index: 2;
  /* ШИРИНА ПОВТОРЯЕТ ЛЕСЕНКУ `.footer-inner` ИЗ КОПИИ ПРОТОТИПА.

     Владелец просил выравнивание «по линии надписи про комплексное
     здоровье», то есть по левому краю полосы подвала. Полоса меняет ширину
     ЧЕТЫРЕЖДЫ, и одной формулой это не выражается:

       базовое             min(1200px, 100% - 80px)
       min-width: 901px    min(1480px, 100% - 80px)
       max-width: 900px    100% - 40px
       max-width: 600px    100% - 48px   (второе правило перебивает первое)

     Копии чисел — плохо, и обычно их заводят переменной. Здесь нельзя:
     переменную пришлось бы объявить ВНУТРИ копии прототипного `globals.css`,
     а середину того файла не трогаем — она чужая и переносится один в один.
     Поэтому лесенка повторена, а сходство краев проверяется замером:
     `test_правовые_ссылки_под_фразой_о_здоровье` меряет обе координаты
     на шести ширинах и краснеет при расхождении хоть на пиксель. */
  width: min(1200px, calc(100% - 80px));
  margin-inline: auto;
}

@media (min-width: 901px) {
  .footer-legal {
    width: min(1480px, calc(100% - 80px));
  }
}

@media (max-width: 900px) {
  .footer-legal {
    width: calc(100% - 40px);
  }
}

@media (max-width: 600px) {
  .footer-legal {
    width: calc(100% - 48px);
  }
}

.footer-legal p {
  margin: 0;
}

.footer-legal p + p {
  margin-top: 4px;
}

.footer-legal a {
  color: #a3b3ca;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: #ffffff;
}

/* ССЫЛКИ В ОТМЕТКЕ СОГЛАСИЯ НА ГЛАВНОЙ — просьба владельца 14.09:
   «согласие на обработку данных почему-то не выделил, но ты выдели».

   Вид взят у прототипа, а не придуман: ровно так выглядела ссылка
   «Пользовательского соглашения», которую он видел на своем снимке, —
   подчеркивание с отступом в 3 px. Правило прототипа написано на `button`
   (`.consents span button`), а у нас теперь настоящая ссылка: кнопка,
   не ведущая никуда, была уместна в макете без документов, а на живой
   площадке документ есть, и открывать его должна ссылка. */
.consents span a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consents span a:hover {
  color: #0b3654;
}

/* ПРАВОВАЯ СТРОКА НЕ ВЫКЛЮЧАЕТСЯ ПО ШИРИНЕ И НЕ ПЕРЕНОСИТ СЛОВА.

   Общее правило витрины дает абзацам `text-align: justify` и `hyphens: auto`
   (решение владельца 10.09, оно про длинные абзацы). Подвал унаследовал его
   вместе со всем прочим, и на 390 px вышло сразу две беды: слово рвалось
   пополам прямо внутри ссылки («на обработку персональных дан-ных»)
   и пробелы между словами разъезжались, чтобы добить строку до края.

   Здесь ни то, ни другое не нужно: строка короткая, документов три,
   и читают ее не как текст, а как перечень. Тот же прием уже применен
   к заголовкам и подписям витрины. */
.footer-legal {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* --- видеообращение руководителя (16.09) ---------------------------------- */

/* Видео встает на место прежней обложки-заглушки и берет ту же рамку:
   размеры, радиус и тень задает `.leader-frame` из копии прототипа. */
.leader-video-player {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  background-color: #0d1b3b;
  /* РАЗМЫТАЯ ОБЛОЖКА В ПЕРВУЮ СЕКУНДУ — она и есть ответ на «черный экран».
  
     Владелец 16.09: «на телефоне ролик то проигрывается, то не проигрывается.
     Сейчас просто черный экран». Пока обложка не загрузилась, элемент `video`
     прозрачен, и виден только фон рамки — темно-синий, на телефоне он читается
     как черный прямоугольник. Ждать приходилось 2.5 секунды на среднем 4G
     и 7 на 3G даже после того, как обложку пережали с 798 КБ до 130.
  
     Здесь та же обложка шириной 48 px, размытая и встроенная строкой прямо
     в стиль: она приезжает ВМЕСТЕ с этим файлом, то есть до всякой картинки,
     и весит 0.9 КБ. Настоящая обложка ложится поверх нее в тот же
     прямоугольник — подмены не видно.

     ПОДКЛАДЫВАТЬ ПОД ПРОЗРАЧНЫЙ СИЛУЭТ НЕЛЬЗЯ, и это выяснилось снимком:
     первая редакция клала размытый ВЫРЕЗАННЫЙ портрет, настоящая обложка
     ложилась поверх — и сквозь ее прозрачные места просвечивал размытый
     низ, давая оранжевый ореол вокруг силуэта. Поэтому у обложки видео
     фон рамки теперь ЗАПЕЧЕН в сам файл: она 16:9, непрозрачна и закрывает
     подложку целиком. На экране это тот же кадр — портрет по центру
     на темно-синем, как его рисовал `contain`.
  
     Строкой `data:` а не файлом: отдельный файл — это отдельный запрос,
     и он встал бы в ту же очередь, из-за которой беда и случилась.
     CSP это пропускает: `img-src` у нас объявлен с `data:`. */
  background-image: url("data:image/webp;base64,UklGRqQCAABXRUJQVlA4WAoAAAAgAAAALwAAGgAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggtgAAADAHAJ0BKjAAGwA+iTqYSCUjoqE1W/wAoBEJaAC7M7SCyLDzFAsCWT+AwuFeyl8jLsYDDzZj49vG6KqbenKEIjIuYAD+/ZmQSqP8W/ncyMQUPLRBsODc8AhIQHYDbe+a67y3pmmo1oS3TqXxcIwejy5iI8mvIvXKctgGpSmIeBFZ+/GgYOgpn3SKt0Jvb+tCD7Pqw/2eclUKEjISvk/F747F1xVXY1GwPgj03uNK32/upbEW/wAA");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* `contain`, А НЕ `cover`, И ЭТО НЕ ВКУС. Видео 16:9 стоит в кадре 16:9 —
     для него оба значения дают ОДНО И ТО ЖЕ, кадр заполняется точно. А вот
     обложка — вырезанный портрет 1338x1176, почти квадрат: `cover` срезал
     ему голову сверху, и первое, что человек видел до запуска, был врач
     без макушки. `contain` показывает портрет целиком по центру, поля
     по бокам закрывает та же темная подложка кадра. */
  object-fit: contain;
  /* СООТНОШЕНИЕ ЗАДАНО ЯВНО, И БЕЗ ЭТОГО КАДР ЕДЕТ. Пока видео не пошло,
     браузер берет размеры у ОБЛОЖКИ, а не у самого видео (так в спецификации:
     пока показан poster, его размеры и есть собственные размеры элемента).
     Обложка — вырезанный портрет 1338x1176, то есть почти квадрат: кадр
     вытягивался до 912 px вместо 584 при ширине 1038, `object-fit: cover`
     срезал у видео бока, а в миг запуска страница прыгала на 329 px под
     руками читающего. Замерено 16.09 на живом стенде: 7000 px до запуска,
     6671 px после. С объявленным соотношением высота одна и та же всегда. */
  aspect-ratio: 16 / 9;
}

/* КНОПКА ЗВУКА. Автозапуск возможен только беззвучным — это политика всех
   браузеров, а не наш выбор, — поэтому кнопка обязана быть заметной:
   человек должен понять, что звук есть, и включить его одним нажатием. */
/* КНОПКА СТОИТ В ПРАВОМ ВЕРХНЕМ УГЛУ КАДРА, и это не вкус.

   В правом НИЖНЕМ она лежала под блоком регалий врача: тот `position:
   absolute` с `z-index: 3` и накрывает низ рамки. Нажать кнопку было
   нельзя — браузер отказывался, сообщая «doctor-credentials intercepts
   pointer events». Замерено сразу после сборки, 16.09.

   Поднимать слой выше регалий значило бы закрыть кнопкой их текст.
   Верхний правый угол свободен на всех ширинах — проверено
   `elementFromPoint` на 1440 и 390: там сам кадр видео.

   Слева вверху стояла метка «Личное обращение» — поэтому выбран был
   правый угол. Метку владелец снял 17.09 («мне кажется, она не нужна»),
   но кнопка остается справа: левый верхний угол кадра — это лицо
   говорящего на всех ширинах, и класть туда плашку незачем. */
.leader-sound {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44 px под палец — правило §17.2. */
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(13, 27, 59, 0.82);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.leader-sound:hover {
  background: rgba(13, 27, 59, 0.94);
}

.leader-sound-icon {
  width: 18px;
  height: 18px;
  /* Значок маской: форма из файла, цвет от текста — прием площадки. */
  background: currentColor;
  mask: url("/статика/иконки/звук-выкл.svg") center / contain no-repeat;
  -webkit-mask: url("/статика/иконки/звук-выкл.svg") center / contain no-repeat;
}

.leader-sound--вкл .leader-sound-icon {
  mask-image: url("/статика/иконки/звук-вкл.svg");
  -webkit-mask-image: url("/статика/иконки/звук-вкл.svg");
}

@media (max-width: 600px) {
  .leader-sound {
    top: 10px;
    right: 10px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* --- ВИД «В»: ВИДЕО СЛЕВА, ПОДПИСЬ СПРАВА ОТДЕЛЬНОЙ КАРТОЧКОЙ (16.09) ------

   Решение владельца 16.09 по пробе `/статика/proby/video-vidy.html`:
   «нравится вариант В». Видео слева и крупнее, подпись врача справа узкой
   карточкой, кадр не закрыт ничем.

   ПОЧЕМУ ЭТО ВОСЕМЬ СТРОК, А НЕ ПЕРЕСБОРКА БЛОКА. Прототип объявляет
   `.research-layout` двумя долями еще в копии `globals.css` и тут же, ниже
   по файлу, гасит сетку (`display: block`) — колонка справа объявлена
   и пустует. Здесь она включается обратно, а доли, зазор и порог 900 px
   остаются прототипными: своих чисел не заводим.

   Порог — `min-width: 901px`, тот самый, на котором прототип сам складывает
   `.research-layout` в одну долю. Ниже него колонка одна, и подпись идет
   строкой под видео. */
@media (min-width: 901px) {
  .research-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    /* Доли растягиваются на высоту ряда (`stretch` из копии прототипа),
       и это здесь нужно: колонка справа обязана дотянуться до низа кадра,
       иначе рассказу не к чему прижиматься. */
    align-items: stretch;
  }

  /* ВИДЕО ПРИЖАТО К ЛЕВОМУ КРАЮ ПОЛОСЫ НА ЛЮБОЙ ШИРИНЕ.

     Просьба владельца 16.09, дословно: «очень важно, чтобы было видео
     по левому краю». Копия прототипа держит `width: min(100%, 1040px)`
     с автополями, и на широком экране доля шире 1040 px — лишнее
     расходится поровну. Замерено на живом стенде: на 1728 и на 1920 px
     видео стояло в 18 px от левого края полосы. */
  .research-layout .leader {
    width: 100%;
    margin-inline: 0;
  }
}

/* КОЛОННА СПРАВА ЗАМКНУТА СВЕРХУ И СНИЗУ — вид «В», выбор владельца 16.09
   по пробе `/статика/proby/video-vidy-2.html`.

   Подпись прижата к верху кадра, рассказ о враче — к низу. До этого справа
   стояла одна подпись в 147 px, а под ней пустота во всю оставшуюся высоту
   кадра, и росла она вместе с экраном: 176 px на 1024, 309 на 1280,
   395 на 1440, 438 на 1920. Владелец назвал это «справа съезжает».

   Ниже 901 px колонка одна, и `space-between` там ничего не значит:
   высоту задает само содержимое, разводить нечего. */
.leader-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.leader-side .leader-context {
  margin: 0;
  max-width: none;
  padding: 22px 24px;
  /* ПЕРЕНОСОВ СЛОВ НЕТ, И ВЫКЛЮЧКИ ПО ШИРИНЕ ТОЖЕ (правило владельца 12.09:
     «я бы вообще эти переносы запретил... лучше следующие строки»).
     Общее правило витрины дает абзацам `justify` и `hyphens: auto`; на полосе
     во всю ширину это незаметно, а в колонке 340 px дает сразу обе беды —
     слова рвутся пополам («бере-менность») и пробелы разъезжаются, чтобы
     добить строку до края. */
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* КАРТОЧКА ПОДПИСИ В УЗКОЙ КОЛОНКЕ — ОДНИМ СТОЛБИКОМ.

   ЗА ЭТО ЗАПЛАЧЕНО ДВАЖДЫ. `.leader-credentials` в копии прототипа — сетка
   В ДВЕ КОЛОНКИ (`minmax(220px, 0.8fr) minmax(0, 2fr)`): слева роль и имя,
   справа должность. На прежнем месте — поверх кадра во всю его ширину —
   двум колонкам хватало места. В боковой колонке 340 px они не помещаются:
   «Врач-эндокринолог» ломался на ЧЕТЫРЕ строки, имя на три, должность
   вставала колонкой в 71 px семью строками по одному-два слова. Это и есть
   то, что владелец увидел 16.09 и назвал «подпись сделана коряво, все
   съехало».

   ПЕРВАЯ ПОЧИНКА (в пробе) СВОДИЛА СЕТКУ В ОДНУ КОЛОНКУ — И ЭТОГО МАЛО.
   У детей карточки в копии проставлены НЕ ТОЛЬКО колонки, но и СТРОКИ:
   роль в строке 1, имя в строке 2, должность на обе (`grid-row: 1 / 3`).
   Схлопни колонки — и должность ложится теми же строками, что роль и имя,
   то есть ПЕЧАТАЕТСЯ ПОВЕРХ ИМЕНИ. В пробе так и вышло, и замер этого
   не показал: он считал строки текста, а строк было по одной у каждого.
   Поэтому здесь не сетка в одну колонку, а `flex` — у него ни строк,
   ни колонок нет вовсе, и спорить нечему. */
.leader-side .leader-credentials {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px;
  /* Верх карточки вровень с верхом кадра: 18 px отступа из копии сдвигали
     ее вниз, и разнобой по верхней кромке — первое, что заметно глазом. */
  margin-top: 0;
}

/* НИЖЕ 901 px КОЛОНКА ОДНА, и подпись идет строкой под видео. Карточка
   остается той же самой — бледной, с рамкой, одним столбиком: два вида
   одной карточки разъехались бы молча. */
@media (max-width: 900px) {
  .leader-side .leader-credentials {
    margin-top: 16px;
    padding: 22px 24px;
  }
}

/* ЗОВ РАЗДЕЛА «КОМУ ПОДХОДИТ» — КНОПКА ПО ЦЕНТРУ ПОЛОСЫ (17.09).

   Раздел стал приглашением из трех плашек, и текст владельца называет зов
   кнопкой: «Заполнить короткую анкету». Прежняя строка со ссылкой
   (`.group-invitation`) работала, пока карточек было две и они описывали
   ситуации; ее правила остаются в копии прототипа нетронутыми — просто
   больше некому их применять.

   Флексбокс, а не `text-align: center`: ссылка-кнопка `.primary` —
   строчно-блочная, и центровать надо саму коробку, иначе она растянется
   по ширине полосы. */
.зов-раздела {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* ПЛАШКИ «КОМУ ПОДХОДИТ» НА ПЛАНШЕТЕ: КОЛОНКА ПОД ЗНАЧОК, КОТОРОГО У НАС НЕТ.

   ЗА ЭТО ЗАПЛАЧЕНО СРАЗУ, 17.09. Как только плашек стало три, включилось
   прототипное правило `[data-count='3'] .eligibility-card` из медиазапроса
   601-900 px: оно делит карточку на две колонки — 70 px и остаток. Семьдесят
   пикселей там отведены ЗНАЧКУ (у прототипа в трех карточках стоял блок
   `.group-top`), а редакция 25 значки сняла. В итоге в колонку 70 px попадал
   ЗАГОЛОВОК, и его слова вылезали за нее на 41-52 px — буквы налезали
   на буквы соседнего абзаца.

   Замерено на живом стенде: поломка ровно на 601-900 px включительно
   (на 600 и на 901 все цело), коробка `h3` 70 px при тексте до 122 px,
   пересечение слов «нарушения,» и «поставлен» 29.5 x 17.4 px.

   Правило прототипа не трогаем — оно в копии `globals.css`; отменяем его
   своим, в хвосте и в том же медиазапросе. Одна колонка: значку места
   не нужно, потому что значка нет. */
@media (min-width: 601px) and (max-width: 900px) {
  .eligibility-grid[data-count='3'] .eligibility-card {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
}

/* РАЗДЕЛ «ЧТО ВЫ ПОЛУЧАЕТЕ»: ЧЕТЫРЕ ПЛАШКИ И СНОСКА (17.09).

   Решение владельца, вид «В» пробы `/статика/proby/vygody-vidy.html`.
   Прежде плашек было шесть, и они ложились в прототипную сетку из ТРЕХ
   колонок двумя ровными рядами. Четыре в ту же сетку дают ряд из трех
   и одинокую четвертую с дырой справа — поэтому раскладка своя, две доли.

   Ниже 901 px правило не действует вовсе: там прототип и так ставит один
   столбик, а перебей мы его — карточки встали бы по 171 px в два столбца
   на экране 390. Это не догадка, а замер: ровно так и вышло в первой
   редакции пробы. */
@media (min-width: 901px) {
  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ЦВЕТ ЧЕТВЕРТОЙ ПЛАШКИ — РОЗОВЫЙ, А НЕ СИРЕНЕВЫЙ.

   Цветов у прототипа три, плашек теперь четыре, значит один цвет неизбежно
   повторится — важно, ГДЕ. Прототипная раздача (`nth-child(2), nth-child(6)`
   сиреневые) при четырех ставит обе сиреневые друг под другом в правой
   колонке. Видно это только на экране: счет «соседи в списке» такого
   не ловит, вторая и четвертая в списке не рядом. С розовой четвертой
   повтор уходит на диагональ, и ни одна пара соседей — ни по строке,
   ни по столбцу — не совпадает. Проверено замером на трех ширинах. */
.benefit-card:nth-child(4) {
  background: var(--benefit-rose);
}

/* СНОСКА ЛЕЖИТ ВНУТРИ СВОЕЙ ПЛАШКИ, за тонкой линией: звездочка в тексте
   и пояснение к ней оказываются рядом. В видах, где сноска шла под всей
   сеткой, между ними проходил весь раздел — на телефоне 505 px прокрутки
   против 14 здесь.

   Линия белая с прозрачностью: подложки у плашек разные (розовая, сиреневая,
   персиковая), и своего цвета линии пришлось бы держать три. */
/* СЕЛЕКТОР ИЗ ДВУХ КЛАССОВ, А НЕ ОДНОГО, И ЭТО НЕ ПЕРЕСТРАХОВКА.

   В копии прототипа стоит `.benefit-card p { font-size: 16px }` — класс плюс
   тег. Одиночный `.benefit-note` весит меньше и кегль НЕ МЕНЯЕТ: сноска
   осталась бы ростом с основной текст, а на глаз это почти незаметно.
   Поймано сторожем `test_сноска_стоит_в_одной_плашке_со_своей_звездочкой`,
   который меряет вычисленный кегль: «сноска набрана кеглем 16 при тексте 16».

   Это пятый случай того же камня на проекте (`.знак-шага`, `.ячейка-плашки`,
   `.км-дело-имя`, оглавление статьи). Правило прототипа при этом не тронуто —
   оно в копии, а наше стоит ниже и весит больше. */
.benefit-card .benefit-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ffffff9c;
  font-size: 14px;
  line-height: 1.7;
  color: #687984;
}

/* РАЗДЕЛ «КАК ПРОХОДИТ УЧАСТИЕ»: КРУПНЫЙ ЗНАЧОК БЕЗ ПЛАШКИ (17.09).

   Вид «Б» пробы `/статика/proby/etapy-vidy.html`, выбор владельца: «значки
   увеличить... главное, чтобы тех линий не было».

   ЛИНИЙ МЕЖДУ ШАГАМИ БОЛЬШЕ НЕТ, и это его слово. У прототипа они связывали
   плашки в один путь и шли МЕЖДУ ними, не касаясь. Значок без плашки стоит
   иначе, и линия пошла НАСКВОЗЬ через него и через цифру — замерено:
   линия на x=168 при значке 159-231 и цифре 245-261. Владелец увидел это
   на пробе сразу: «что это за линии перечеркнутые?». Порядок шагов и так
   назван цифрами 1-4, связка ничего не добавляла.

   Правило прототипа не тронуто — оно в копии `globals.css`; здесь оно
   отменяется своим, и отменяется ЦЕЛИКОМ, во всех медиазапросах разом:
   копия задает эту линию трижды (общая, 601-900, до 600). */
.step-grid li:not(:last-child)::after {
  content: none;
}

/* ЗНАЧОК ВТРОЕ КРУПНЕЕ И БЕЗ ПЛАШКИ. Рамка, белая подложка и скругление
   были нужны значку в 29 px — он тонул без них. Значку в 72 px подложка
   не нужна: он сам держит пятно. */
.step-node {
  height: auto;
  width: auto;
  border: 0;
  background: none;
  border-radius: 0;
  gap: 14px;
}

.step-node > svg {
  height: 72px;
  width: 72px;
}

/* НОМЕР — КРУПНАЯ ЦИФРА РЯДОМ СО ЗНАЧКОМ, А НЕ БЕЙДЖ В УГЛУ.
   Бейдж висел на углу плашки; плашки нет, и вешать его стало не на что.
   Цифру видно издалека, а оранжевый — цвет действия площадки. */
.step-number {
  position: static;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

/* Название встает ближе к значку: пояснения под ним больше нет, и прежний
   отступ в 26 px оставлял дыру. */
.step-copy h3 {
  margin-top: 20px;
}

/* ЛОВУШКА ДЛЯ БОТОВ (19.09). Поле, которого человек не видит и не заполняет
   никогда: бот заполняет все поля подряд, и заполненное — его подпись.

   Прячем НЕ через `display: none` и не `hidden`: часть ботов такие поля
   пропускает именно потому, что они спрятаны очевидно. Уводим за экран,
   оставляя поле в потоке формы. От клавиатуры и читалки его убирают
   `tabindex="-1"` и `aria-hidden` в разметке — для человека его нет.

   Высоты странице это не добавляет: поле вынесено абсолютом. */
.contact-form .ловушка {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Ответ на отправку формы (19.09). Показывается ТОЛЬКО после отправки —
   метка приходит в адресе, и без нее блока в разметке нет вовсе. Поэтому
   высота витрины, которая сторожится до пикселя, не меняется. */
.contact-done {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #E7F4EC;
  border-left: 4px solid #2E7D50;
  color: #12331F;
  font-weight: 500;
}

.contact-done--беда {
  background: #FDEEEA;
  border-left-color: #B3400E;
  color: #3A1206;
}