/* ═══════════════════════════════════════════════════════════════════════
   LANDING.CSS — только главная страница.
   Всё общее (кнопки, карточки, шапка, подвал, типографика) лежит в
   base.css и здесь не переопределяется.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── ГЕРОЙ ─────────────────────────── */
.hero { position: relative; overflow: hidden; padding-block: calc(var(--nav-h) + var(--s8)) var(--s9); }
.hero > .wrap { position: relative; z-index: 1; }
.hero__copy { max-width: 860px; margin-inline: auto; text-align: center; }
.hero h1 { margin-block: var(--s5) var(--s5); font-size: var(--fs-display); line-height: .92; letter-spacing: -.075em; }
/* Вторая строка заголовка — только цветом, без плашки. Плашка под «в одной
   системе» была лишним прямоугольником в самом верху страницы: она спорила
   с мокапом, который начинается сразу под ней, и разрывала одну фразу на
   две разные поверхности. */
.hero h1 mark { background: none; color: var(--accent); }
/* ═══ .hero__copy p, А НЕ .hero p ═══
   Сначала было написано `.hero p`. Мокап лежит внутри того же `.hero`, и
   правило доставало до КАЖДОГО абзаца внутри мокапа: подсказка и описания
   вакансий получали max-width: 650px и margin-inline: auto и съезжали на
   двести пикселей вправо от своей карточки. Снаружи это выглядит как
   «текст почему-то не на месте», а причина — слишком широкий селектор.
   Поэтому во всём файле правила привязаны к своему блоку, а не к секции. */
.hero__copy p { max-width: 650px; margin-inline: auto; font-size: var(--fs-lead); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s6); }
.hero__actions .btn { min-width: 220px; min-height: 52px; }

/* Мокап — это боковая панель браузера, а не широкий экран. На всю ширину
   контейнера он и выглядит неправдой, и строки внутри разъезжаются пустотой. */
.hero__mock { margin-top: var(--s9); position: relative; z-index: 1; }

/* ═══ ПОДСКАЗКА «НАЖМИ» ═══
   Вкладки мокапа переключаются по-настоящему, но снаружи панель выглядит
   картинкой, и никто на неё не нажимает. Подпись со стрелкой — это голос
   САЙТА, а не продукта, поэтому она стоит снаружи карточки и набрана
   моноширинным сайта: внутри панели такой надписи в расширении нет, и
   выглядеть частью интерфейса она не должна. */
.mock__call {
  display: flex; align-items: flex-end; gap: var(--s3);
  margin-bottom: calc(var(--s2) * -1);
  /* Остриё стрелки приходится ровно на ряд вкладок: отступ слева тот же,
     что внутреннее поле мокапа, поэтому подсказка указывает на «Гайд», а
     не в пустоту рядом с карточкой. */
  padding-inline-start: var(--s5);
  color: var(--ink-dim);
  font: 500 var(--fs-sm) var(--mono); letter-spacing: .04em;
}
.mock__call span { padding-bottom: var(--s5); }
.mock__call svg { flex: none; color: var(--ink-dim); }
@media (max-width: 640px) {
  .mock__call { gap: var(--s2); padding-inline-start: var(--s3); font-size: var(--fs-xs); }
  .mock__call svg { width: 42px; height: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   МОКАП РАСШИРЕНИЯ
   Не «похоже на расширение», а оно само: те же вкладки в том же порядке,
   те же кнопки с теми же подписями, те же карточки, тот же ритм.
   Значения ниже взяты прямо из popup.css расширения — поэтому они здесь
   объявлены своими токенами, а не подтянуты из системы сайта: у сайта
   кнопка ростом 46px и скругление 12, у расширения — 36 и 10, и мокап
   обязан показывать расширение, а не сайт.

   Вкладки переключаются по-настоящему. Всё внутри панели нарисовано и не
   нажимается: pointer-events здесь, aria-hidden — в скрипте.
   ═══════════════════════════════════════════════════════════════════════ */
.mock {
  --m-h: 36px;        /* высота кнопки в расширении */
  --m-h-sm: 30px;     /* плотный ряд действий в карточке */
  --m-r-sm: 10px;     /* кнопки, поля, чипы */
  --m-r-md: 16px;     /* панели и карточки */
  --m-line: rgba(255,255,255,.10);
  --m-input: #343D48; /* фон поля и дорожки — замерен в расширении */
  /* Тень карточки — из расширения (--card-shadow на тёмной теме). Без неё
     панели в мокапе плоские, а в самом расширении они приподняты. */
  --m-shadow: 0 10px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.16);
  --m-pane: 460px;    /* одна высота на все шесть вкладок, см. .mock__pane */
  padding: var(--s5) var(--s5) var(--s4);
  text-align: start;
  /* Мокап набран шрифтом РАСШИРЕНИЯ, а не сайта. Сайт — Inter, продукт —
     IBM Plex; мокап показывает продукт. */
  font-family: var(--sans-app);
}

/* ─── шапка панели: ● Job Huntly и кнопка «открыть в окне» ─── */
.mock__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.mock__head i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--accent); }
.mock__head b { font: 700 20px var(--mono-app); letter-spacing: .04em; }
.mock__head svg { color: var(--ink-dim); margin-inline-start: 2px; }

/* ─── вкладки ─── */
.mock__tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: var(--s4); border-bottom: 1px solid var(--m-line); }
.mock__tab {
  flex: 0 0 auto; padding: var(--s2) var(--s3);
  border: none; border-bottom: 3px solid transparent; border-radius: var(--m-r-sm);
  background: none; color: var(--ink-dim);
  font: 400 var(--fs-xs) var(--mono-app); letter-spacing: .5px; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: color .15s;
}
.mock__tab:hover { color: var(--ink); }
.mock__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Панель вкладки — РОВНО одной высоты у всех шести. Не min-height: при нём
   «Вакансии» вырастали до 740px, остальные оставались 420, и карточка
   прыгала на треть экрана при каждом клике. Настоящая панель расширения —
   окно постоянной высоты: короткие вкладки оставляют пустое место внизу,
   длинные прокручиваются. Это и показываем: срез по --m-pane плюс мягкое
   затухание последних 28px. У коротких вкладок в этой зоне уже пусто,
   поэтому затухание на них не видно вовсе. */
.mock__pane {
  display: none;
  height: var(--m-pane);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.mock__pane[data-active] { display: block; }
.mock__pane * { pointer-events: none; }

/* ─── общее для панелей: подсказка, ряд кнопок, кнопка, панель, поле ─── */
.mock__hint { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-dim); margin-bottom: var(--s3); }
.mock__hint + .mock__hint { margin-top: -4px; }
.mock__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }

.m-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--m-h); padding-inline: var(--s4);
  border: 1px solid var(--m-line); border-radius: var(--m-r-sm);
  background: transparent; color: var(--ink-dim);
  font: 400 var(--fs-md) var(--sans-app); line-height: 1.2; white-space: nowrap;
}
/* Ровно как button.primary в расширении: вес 600 (не 700) и своё свечение —
   тугое кольцо плюс короткая тень. Сайтовый --glow (0 10px 26px) для кнопки
   внутри панели слишком широкий: вокруг неё расплывалось лаймовое облако,
   какого в самом расширении нет. */
.m-btn--accent {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(225,255,77,.26), 0 4px 16px rgba(225,255,77,.26);
}
.m-btn--sm { min-height: var(--m-h-sm); padding-inline: var(--s3); font-size: var(--fs-sm); }
.m-btn--icon { width: var(--m-h); min-height: var(--m-h); flex: none; padding: 0; margin-inline-start: auto; }

.m-field {
  flex: 1 1 180px; min-width: 0; min-height: var(--m-h);
  display: flex; align-items: center; padding-inline: var(--s3);
  border: 1px solid var(--m-line); border-radius: var(--m-r-sm);
  background: var(--m-input); color: var(--ink-dim); font-size: var(--fs-md);
}

.m-panel { padding: var(--s4); margin-bottom: var(--s4); border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--bg-raised); box-shadow: var(--m-shadow); }
.m-panel:last-child { margin-bottom: 0; }
.m-panelTitle { font: 500 var(--fs-xs) var(--mono-app); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--s3); line-height: 1.3; }
.m-panelHead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.m-panelHead .m-panelTitle { margin-bottom: 0; }

/* ─── ВАКАНСИИ ─── */
.m-day { display: flex; align-items: center; gap: var(--s2); padding-block: var(--s1); margin-bottom: 6px;
         font: 500 var(--fs-xs) var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); line-height: 1.3; }
.m-day i { width: 7px; height: 7px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); }
.m-day b { margin-inline-start: auto; font-weight: 500; }

.m-card { position: relative; padding: var(--s3) var(--s4); margin-bottom: var(--s3);
          border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--bg-raised); font-size: var(--fs-md);
          box-shadow: var(--m-shadow); }
.m-card__co { font-size: 15px; font-weight: 700; padding-inline-end: 36px; }
.m-card__meta { margin-top: var(--s1); color: var(--ink-dim); line-height: 1.45; }
.m-card__flag { position: absolute; top: var(--s3); inset-inline-end: var(--s4); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--m-line); }

.m-match { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.m-match span { padding: 4px var(--s2); border-radius: var(--r-pill);
                background: var(--accent-soft);
                font: 700 var(--fs-sm) var(--mono-app); line-height: 1.2; white-space: nowrap; }
.m-match div { flex: 1 1 70px; min-width: 50px; height: 5px; border-radius: var(--r-pill); background: var(--m-input); overflow: hidden; }
.m-match div i { display: block; height: 100%; background: var(--accent); }

.m-select { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
            min-height: var(--m-h-sm); margin-top: var(--s2); padding: 0 var(--s3);
            border: 1px solid var(--m-line); border-radius: var(--m-r-sm); background: var(--m-input);
            color: var(--ink-dim); font-size: var(--fs-sm); }
.m-select::after { content: ''; width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--ink-dim); margin-top: 4px; }

.m-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* ─── КОНТАКТЫ ─── */
.m-contact { padding: var(--s3) var(--s4); margin-bottom: var(--s3); border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--bg-raised); box-shadow: var(--m-shadow); }
.m-contact b { display: block; font-size: 15px; font-weight: 700; }
.m-contact p { margin-top: var(--s1); font-size: var(--fs-md); color: var(--ink-dim); }

/* ─── КАЛЕНДАРЬ ─── */
.m-calHead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.m-calHead b { font: 500 var(--fs-xs) var(--mono-app); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); }
.m-calHead span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--m-line); border-radius: var(--m-r-sm); color: var(--ink-dim); font-size: var(--fs-md); }
.m-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.m-cal .dow { text-align: center; padding-bottom: var(--s1); font: 500 var(--fs-micro) var(--mono-app); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); }
/* Ячейка ниже, чем была (52 → 40): сетка занимала всю панель, и под ней
   не оставалось места для самого важного — карточки записи на собес.
   В расширении под сеткой всегда открывается день, а не пустота. */
.m-cal .cell { min-height: 34px; padding: 3px 6px; border: 1px solid var(--m-line); border-radius: var(--m-r-sm); font-size: var(--fs-xs); color: var(--ink-dim); }
.m-cal .cell.empty { border-color: transparent; }
.m-cal .cell.has { color: var(--ink); font-weight: 700; }
.m-cal .cell.selected { border-color: var(--accent); }
.m-cal .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-inline-start: 4px; vertical-align: middle; }
/* Метка дня — значок, а не полоса. В расширении ячейка шириной около
   пятидесяти пикселей, и метка занимает её целиком; в мокапе ячейка втрое
   шире, и та же метка растягивалась в лаймовую ленту через весь день.
   Ограничиваем ширину — пропорция становится та же, что в продукте. */
.m-cal .pill { display: block; width: 100%; max-width: 46px; margin: 2px auto 0; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: 700 var(--fs-micro) var(--mono-app); text-align: center; }
.m-cal .pill--out { background: transparent; border: 1px solid var(--accent); color: var(--accent); overflow: hidden; }

/* ─── день под сеткой: строка дня и карточка записи ─── */
.m-agendaDay { margin-top: var(--s3); }
.m-agenda { padding: var(--s3) var(--s4); border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--bg-raised); box-shadow: var(--m-shadow); }
.m-agenda__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.m-agenda__top b { font-size: 15px; font-weight: 700; }
.m-agenda__time { font: 400 var(--fs-md) var(--mono-app); color: var(--accent); }
.m-agenda__with { margin-top: var(--s1); font-size: var(--fs-md); color: var(--ink-dim); }

/* ─── АНАЛИТИКА ─── */
.m-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s4); }
.m-stat { padding: var(--s4); border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--bg-raised); box-shadow: var(--m-shadow); }
.m-stat span { display: block; font: 500 var(--fs-xs) var(--mono-app); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); }
.m-stat strong { display: block; margin-top: var(--s2); font-size: var(--fs-h3); font-weight: 700; }
.m-stat strong[data-accent] { color: var(--accent); }
.m-funnel { display: grid; gap: 6px; }
.m-funnelRow { display: grid; grid-template-columns: 104px 1fr 20px; align-items: center; gap: var(--s2); font-size: var(--fs-md); color: var(--ink-dim); }
.m-funnelRow div { height: 14px; border-radius: var(--r-pill); background: var(--m-input); overflow: hidden; }
.m-funnelRow div i { display: block; height: 100%; background: var(--accent); }
.m-funnelRow b { text-align: end; font-weight: 400; }

/* ─── НАСТРОЙКИ ─── */

/* ─── ГАЙД ─── */
.m-guideKicker { font: 500 var(--fs-xs) var(--mono-app); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); }
.m-guideTitle { margin-top: 6px; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; }
.m-guideLead { margin-top: var(--s2); font-size: var(--fs-md); color: var(--ink-dim); line-height: 1.5; }
.m-guideProgress { display: flex; align-items: center; gap: var(--s3); margin-block: var(--s4); }
.m-guideProgress div { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--m-input); }
.m-guideProgress b { font: 400 var(--fs-md) var(--mono-app); color: var(--ink-dim); letter-spacing: .1em; }
.m-stage { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s2);
           border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--bg-raised); box-shadow: var(--m-shadow); }
.m-stage i { width: 18px; height: 18px; flex: none; border: 1px solid var(--line-strong); border-radius: 4px; }
.m-stage span { font-size: 15px; font-weight: 600; }
.m-stage b { margin-inline-start: auto; font-weight: 400; font-size: var(--fs-h4); color: var(--ink-dim); }

/* ═══ ПОЧЕМУ ДОЛЯ ЗАДАНА АТРИБУТОМ, А НЕ style="width:87%" ═══
   Боевой nginx отдаёт строгую политику безопасности (CSP): чужих скриптов
   и стилей на сайте нет, и это запрещено в принципе. Запрет распространяется
   и на атрибут style прямо в разметке — браузер молча его не применяет.
   Проверили под настоящими заголовками: все полосы воронки и все кружки
   цвета теряли оформление, и на локальной машине этого было не видно.
   Значений всего девять, они не меняются — поэтому не «ослабить политику»,
   а назвать каждое значение здесь. */
.analytics__row i[data-fill="100"], .m-match i[data-fill="100"] { width: 100%; }
.analytics__row i[data-fill="72"]  { width: 72%; }
.analytics__row i[data-fill="48"]  { width: 48%; }
.analytics__row i[data-fill="28"]  { width: 28%; }
.m-match i[data-fill="87"]         { width: 87%; }
.m-match i[data-fill="54"]         { width: 54%; }
.m-match i[data-fill="31"]         { width: 31%; }
.m-funnelRow i[data-fill="33"]     { width: 33%; }

/* Кружки цвета в «Настройках» мокапа: фон панели и акцент. */

/* ═══════════════════════════════════════════════════════════════════════
   БЛОКИ ВОЗМОЖНОСТЕЙ
   ═══════════════════════════════════════════════════════════════════════ */
/* Раскладка блоков возможностей — ровно та же, что была: колонки 0.8fr и
   1.2fr, зазор 72px, зеркальные блоки переставляются через order, высота
   сцены 460px. Ничего из этого не трогалось. */
.feature { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.feature--flip .feature__copy { order: 2; }
.feature--flip .scene { order: 1; }
.feature__copy { max-width: 500px; }
.feature__copy h2 { margin-block: var(--s4) var(--s4); }
.feature__copy p { font-size: var(--fs-body); }
.scene { display: grid; align-content: center; justify-items: center; gap: var(--s4); width: 100%; min-height: 460px; }
.scene > * { width: 100%; max-width: 620px; }

/* ─── сцена: список вакансий ─── */
.tracker { display: grid; gap: var(--s3); }
.tracker__card { position: relative; padding: var(--s4); }
.tracker__num { font: 500 var(--fs-xs) var(--mono); color: var(--ink-dim); }
.tracker__card h3 { margin-top: 6px; font-size: var(--fs-h4); }
.tracker__co { margin-top: var(--s1); font-size: var(--fs-md); color: var(--ink-dim); }
.tracker__meta { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-dim); }
.tracker__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-top: var(--s3); }
.match { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-md); font-weight: 700; }
.match span { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-dim); }
.match i { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 3px solid var(--accent); border-right-color: var(--line-strong); box-shadow: 0 0 10px rgba(225,255,77,.38); }
.tracker__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tracker__actions .btn { box-shadow: none; }
.tracker__actions .btn--accent { background: transparent; border-color: var(--accent); color: var(--accent); }
.tracker__plus { position: absolute; top: var(--s4); inset-inline-end: var(--s4); color: var(--ink-dim); }

/* ─── сцена: ATS ───
   Без карточки и рамки — как было: строка с баллом, подпись и чипы лежат
   прямо на фоне секции. */
.ats { display: grid; gap: 28px; justify-items: center; padding: 38px 20px; max-width: 660px; }
.ats__row { display: flex; align-items: center; gap: var(--s4); width: 100%; }
.ats__score { flex: none; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-raised); font-size: 14px; font-weight: 700; }
.ats__bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--line-strong); overflow: hidden; }
.ats__bar i { display: block; height: 100%; width: 72%; background: var(--accent); box-shadow: 0 0 14px rgba(225,255,77,.55); }
.ats__label { font: 500 var(--fs-sm)/1.3 var(--mono); letter-spacing: .045em; text-transform: uppercase; color: var(--ink-dim); text-align: center; }
.ats__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.ats__keys span { padding: var(--s3) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-raised); font: 500 var(--fs-xs) var(--mono); }
.ats__keys span:last-child { color: var(--ink-dim); }

/* ─── сцена: контакты ─── */
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.contacts__found { grid-column: 1 / -1; justify-self: center; }
/* Третья карточка одна во втором ряду. Растянуть её на всю ширину — она
   станет вдвое больше соседей; оставить в колонке — ряд повиснет пустой
   половиной. Поэтому: занимает обе колонки, но шириной с одну и по центру. */
.contacts .card:last-child { grid-column: 1 / -1; width: calc(50% - var(--s2)); justify-self: center; }
.contacts .card { padding: var(--s4); }
.contacts h3 { font-size: var(--fs-h4); }
.contacts__links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.contacts__links a { padding-bottom: 4px; border-bottom: 2px solid var(--accent); font-size: var(--fs-xs); font-weight: 700; }

/* ─── сцена: календарь ─── */
.calendar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr); gap: var(--s4); align-items: center; }
.calendar__month { padding: var(--s5); }
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s5); font-size: 14px; font-weight: 700; }
.calendar__head span { color: var(--ink-dim); font-size: var(--fs-h4); font-weight: 400; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s3) 6px; text-align: center; }
.calendar__grid span { display: grid; place-items: center; min-height: 28px; font-size: var(--fs-sm); color: var(--ink-dim); }
.calendar__grid .dow { font: 500 var(--fs-micro) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.calendar__grid .on { width: 28px; height: 28px; margin-inline: auto; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: 0 0 14px rgba(225,255,77,.55); }
.calendar__event { padding: var(--s4); }
.calendar__event h3 { font-size: var(--fs-h4); }
.calendar__event p { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-dim); line-height: 1.5; }
.calendar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s4); }
.calendar__actions .btn { box-shadow: none; }

/* ─── сцена: аналитика ─── */
.analytics { display: grid; gap: var(--s3); }
.analytics__board { padding: var(--s5); }
.analytics__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.analytics__head h3 { margin-top: var(--s2); font-size: var(--fs-h3); }
.analytics__total { display: grid; justify-items: end; text-align: end; }
.analytics__total strong { font-size: var(--fs-num); line-height: 1; letter-spacing: -.05em; }
.analytics__total small { margin-top: var(--s1); font: 500 var(--fs-micro) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.analytics__funnel { display: grid; gap: var(--s3); margin-top: var(--s5); }
/* Строка воронки в сцене «Аналитика». Своя, не общая с мокапом: в мокапе
   воронка расширения (подпись, дорожка, число справа), здесь — рисунок с
   подписью, числом и полосой. Один раз они уже были одним классом, класс
   переехал вместе с мокапом — и в сцене остались «Отклик24», «Скрининг9»:
   сетка пропала, слова слиплись с числами. */
.analytics__row { display: grid; grid-template-columns: 118px 28px 1fr; align-items: center; gap: var(--s2); }
.analytics__row span { font-size: var(--fs-sm); color: var(--ink-dim); }
.analytics__row b { font: 700 var(--fs-md) var(--mono); }
.analytics__row i { display: block; height: 10px; border-radius: var(--r-pill);
                    background: var(--accent); box-shadow: 0 0 10px rgba(225,255,77,.42); }
.analytics__row:nth-child(2) i { opacity: .78; }
.analytics__row:nth-child(3) i { opacity: .58; }
.analytics__row:nth-child(4) i { opacity: .4; }
.analytics__outcomes { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-dim); }
.analytics__outcomes span { display: inline-flex; align-items: center; gap: 6px; }
.analytics__outcomes i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.analytics__outcomes span:last-child i { background: var(--accent); }
.analytics__outcomes b { color: var(--ink); font: 700 var(--fs-xs) var(--mono); }
.analytics__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.analytics__kpis .card { padding: var(--s4) var(--s3); text-align: center; }
.analytics__kpis span { font-size: var(--fs-xs); color: var(--ink-dim); }
.analytics__kpis strong { display: block; margin-top: var(--s2); font-size: var(--fs-h3); }

/* ─── сцена: гайд ─── */
.guide { display: grid; grid-template-columns: 1fr 110px 1.08fr; gap: var(--s4); align-items: center; }
.guide .card { padding: var(--s4); }
.guide__vac h3 { margin-top: var(--s2); font-size: var(--fs-h4); }
.guide__vac p { margin-top: var(--s1); font-size: var(--fs-md); color: var(--ink-dim); }
.guide__bars { display: grid; gap: 6px; margin-top: var(--s4); }
.guide__bars i { display: block; height: 4px; border-radius: var(--r-pill); background: var(--line-strong); }
.guide__bars i:first-child { width: 82%; background: var(--accent); }
.guide__bars i:last-child { width: 55%; }
.guide__hub { display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.guide__hub i { width: 18px; height: 18px; border-radius: 50%; border: 7px solid rgba(225,255,77,.38); background: var(--accent); box-shadow: 0 0 14px rgba(225,255,77,.55); }
.guide__hub span { font: 500 var(--fs-micro) var(--mono); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.guide__opts { display: grid; gap: var(--s3); }
.guide__opts b { display: block; font: 500 var(--fs-micro) var(--mono); color: var(--ink-dim); }
.guide__opts h4 { margin-top: 6px; font-size: 14px; }
.guide__opts p { margin-top: var(--s1); font-size: var(--fs-sm); color: var(--ink-dim); }
.guide__opts small { display: inline-block; margin-top: var(--s2); padding: 4px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font: 500 var(--fs-micro) var(--mono); }

/* ═══════════════════════════════════════════════════════════════════════
   ТАРИФЫ
   ═══════════════════════════════════════════════════════════════════════ */
.pricing__head { max-width: 620px; margin-inline: auto; text-align: center; }
.pricing__head h2 { margin-block: var(--s4) var(--s3); }
.pricing__head p { font-size: var(--fs-body); }

/* Переключатель периода. Две кнопки в одной плашке — та же «пилюля»,
   что у шапки, только маленькая. */
.period { display: flex; justify-content: center; margin-top: var(--s5); }
.period__group { display: inline-flex; gap: var(--s1); padding: var(--s1); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-raised); }
.period__btn {
  min-height: var(--control-h-sm); padding-inline: var(--s4); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-dim);
  font: 600 var(--fs-sm) var(--sans); cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
/* Выбранный период отмечаем приглушённой подложкой и акцентным текстом,
   а не сплошной заливкой: сплошного лайма на странице и без того хватает —
   шапка, кнопка героя, «Рекомендуем», рекомендованный тариф. */
.period__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.period__save { margin-inline-start: 6px; font: 500 var(--fs-micro) var(--mono); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); align-items: stretch; margin-top: var(--s7); }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--s6) var(--s5); }
/* Тариф поднимается выше обычной плашки: его выбирают, а не читают. */
.plan:hover { transform: translateY(-4px); }
.plan--best { border-color: var(--accent); border-width: 2px; }
.plan__badge { position: absolute; inset-inline-start: var(--s5); top: -13px; padding: 6px var(--s3); border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: 700 var(--fs-micro) var(--mono); letter-spacing: .06em; box-shadow: 0 0 16px rgba(225,255,77,.45); }
.plan__label { font: 500 var(--fs-micro) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.plan h3 { margin-top: var(--s2); font-size: var(--fs-h3); }
.plan__for { margin-top: var(--s1); font-size: var(--fs-md); color: var(--ink-dim); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-block: var(--s5) var(--s5); }
.plan__price strong { font-size: var(--fs-num); letter-spacing: -.04em; line-height: 1; }
.plan__price span { font-size: var(--fs-sm); color: var(--ink-dim); }
.plan__list { display: grid; gap: var(--s3); list-style: none; margin-bottom: var(--s5); }
.plan__list li { display: flex; gap: var(--s2); font-size: var(--fs-md); line-height: 1.4; color: var(--ink-dim); }
.plan__list li::before { content: ''; width: 6px; height: 6px; margin-top: 7px; flex: none; border-radius: 50%; background: var(--accent); }
.plan__list b { color: var(--ink); }
.plan__list li[data-off] { color: var(--ink-faint); }
.plan__list li[data-off]::before { background: var(--line-strong); }
.plan .btn { width: 100%; margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   ВОПРОСЫ
   ═══════════════════════════════════════════════════════════════════════ */
.faq__panel { padding: var(--s6) var(--s6) var(--s5); }
.faq__head { max-width: 680px; margin-bottom: var(--s5); }
.faq__head h2 { margin-block: var(--s4) var(--s3); }
.faq__head p { font-size: var(--fs-body); }
.faq__groups { display: grid; gap: var(--s2); }
.faq__group { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: rgba(255,255,255,.02); overflow: hidden; }
.faq__title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; padding: var(--s3) var(--s4); border: 0; background: none;
  font-size: var(--fs-base); font-weight: 700; color: var(--ink); text-align: start; cursor: pointer;
  transition: background .18s ease;
}
.faq__title:hover { background: rgba(255,255,255,.03); }
.faq__title::after { content: '+'; flex: none; font-size: var(--fs-h4); font-weight: 400; color: var(--ink-dim); transition: transform .25s ease, color .25s ease; }
.faq__title[aria-expanded="true"]::after { transform: rotate(45deg); color: var(--accent); }
.faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq__title[aria-expanded="true"] + .faq__body { grid-template-rows: 1fr; }
.faq__body > div { overflow: hidden; }
.faq__inner { padding: 0 var(--s4) var(--s4); }
.faq__item { padding-block: var(--s3); border-top: 1px solid var(--line); }
.faq__item:first-child { border-top: 0; }
.faq__q { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--s1); }
.faq__a { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-dim); }
/* Ссылка внутри абзаца — цветом текста, акцент только в подчёркивании и при
   наведении. Лаймовым текстом ссылка читается как ещё одна кнопка: на
   странице их и так четыре, а таких ссылок в тексте шесть. */
.faq__a a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.faq__a a:hover, .faq__a a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }

.support { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); margin-top: var(--s4); padding: var(--s5); }
.support h3 { margin-top: var(--s2); font-size: var(--fs-h4); }
.support p { margin-top: var(--s1); font-size: var(--fs-md); color: var(--ink-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   ОКНО ОПЛАТЫ
   Открывается с любой кнопки «Выбрать» и «Оформить подписку».
   Три вещи, без которых нельзя принимать деньги: почта (на неё уходит ключ
   и чек), отметка согласия на обработку данных и отметка принятия оферты.
   Ни одна не проставлена заранее — этого прямо требует 152-ФЗ.
   ═══════════════════════════════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(20,26,33,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal__card { width: min(100%, 460px); max-height: calc(100dvh - var(--s7)); overflow-y: auto; padding: var(--s5); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.modal__head h2 { font-size: var(--fs-h3); }
.modal__close {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: transparent; color: var(--ink-dim); font-size: var(--fs-h4); line-height: 1; cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.modal__close:hover { color: var(--ink); border-color: var(--ink-dim); }

.field { display: grid; gap: 6px; margin-bottom: var(--s4); }
.field > label { font: 500 var(--fs-micro) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.field input[type="email"] {
  min-height: var(--control-h); padding-inline: var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: rgba(0,0,0,.18); color: var(--ink); font-size: var(--fs-base);
}
.field input::placeholder { color: var(--ink-dim); }
.field input:focus-visible { border-color: var(--accent); }

.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.choice--two { grid-template-columns: repeat(2, 1fr); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: grid; gap: 2px; padding: var(--s3) var(--s2); text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 600; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.choice label small { font: 400 var(--fs-xs) var(--mono); color: var(--ink-dim); }
.choice input:checked + label { border-color: var(--accent); background: var(--accent-soft); }
.choice input:checked + label small { color: var(--accent); }
.choice input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.total span { font-size: var(--fs-md); color: var(--ink-dim); }
.total strong { font-size: var(--fs-h3); letter-spacing: -.03em; }

.agree { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.agree label { display: grid; grid-template-columns: 18px 1fr; gap: var(--s3); align-items: start; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-dim); cursor: pointer; }
.agree input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.agree a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.agree a:hover, .agree a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }

.modal__note { margin-top: var(--s3); font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-dim); text-align: center; }
.modal__error { margin-bottom: var(--s3); padding: var(--s3); border: 1px solid rgba(255,120,120,.45); border-radius: var(--r-xs); font-size: var(--fs-sm); color: #FFB4B4; }
.modal__error[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   СТРАНИЦА «СПАСИБО»
   ═══════════════════════════════════════════════════════════════════════ */
.thanks { display: grid; place-items: center; min-height: 100dvh; padding-block: calc(var(--nav-h) + var(--s8)) var(--s8); }
.thanks__card { width: min(100%, 560px); padding: var(--s7) var(--s6); text-align: center; }
.thanks__mark { width: 56px; height: 56px; margin: 0 auto var(--s5); display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.thanks h1 { font-size: var(--fs-h2); }
.thanks p { margin-top: var(--s4); font-size: var(--fs-base); color: var(--ink-dim); }
.thanks__steps { display: grid; gap: var(--s3); margin-top: var(--s6); text-align: start; }
.thanks__step { display: grid; grid-template-columns: 26px 1fr; gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); }
.thanks__step b { font: 700 var(--fs-xs) var(--mono); color: var(--accent); padding-top: 2px; }
.thanks__step p { margin: 0; font-size: var(--fs-md); color: var(--ink); }
.thanks__step small { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-dim); }
.thanks .btn { margin-top: var(--s6); }

/* ═══════════════════════════════════════════════════════════════════════
   АДАПТИВ
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  /* Одна колонка — значит явные номера колонок надо снять, иначе
     grid-column: 2 создаёт ВТОРУЮ колонку из воздуха и блок уезжает вбок. */
  .feature, .feature--flip { grid-template-columns: 1fr; gap: var(--s6); }
  .feature--flip .feature__copy, .feature--flip .scene { order: initial; }
  .feature__copy { max-width: 640px; }
  .scene { min-height: 0; }
  .scene { min-height: 0; }
  .plans { grid-template-columns: 1fr; }
  .guide { grid-template-columns: 1fr; }
  .hero__copy p { font-size: var(--fs-base); }
  .hero__mock { margin-top: var(--s7); }
}

@media (max-width: 640px) {
  .hero { padding-top: calc(var(--nav-h) + var(--s6)); }
  .hero__actions .btn { width: 100%; min-width: 0; }
  .mock { padding: var(--s4) var(--s3) var(--s3); --m-pane: 440px; }
  /* Панель на телефоне ниже, а календарю ещё надо оставить место карточке
     дня под сеткой — иначе она уходит под срез. */
  .m-cal .cell { min-height: 28px; }
  .calendar { grid-template-columns: 1fr; }
  .contacts { grid-template-columns: 1fr; }
  .contacts .card:last-child { width: 100%; }
  .analytics__kpis { grid-template-columns: 1fr; }
  .ats__row { flex-wrap: wrap; }
  .ats__bar { min-width: 140px; }
  .support { flex-direction: column; align-items: flex-start; }
  .support .btn { width: 100%; }
  .faq__panel { padding: var(--s5) var(--s4) var(--s4); }
  .choice { grid-template-columns: 1fr; }
  .tracker__actions .btn { flex: 1 1 calc(50% - 3px); }
}