/* «Получка 2026» и Новый год — слой поверх landing.css и цветов клиента (App\Support\Sites\Season,
   resources/seasons/poluchka-2026.php), владелец 29.10.2026. Вид — по макетам Codex на key visual клиента (Figma
   «Получка 2026»). Файл подключается, только пока сезон включён; страницы помечает шаблон: body[data-page] = home, city,
   vacancy, result, not-found. Цвета кампании у всех брендов X5 одни: ночной зелёный, салатовый, светлый текст.
   Картинки — /brands/seasons/poluchka-2026, в стилях — переменными var(--sn-img-<имя файла>) с версией по времени файла
   (Season::inlineCss в <head>): заменили картинку — браузеры берут новую сразу, ручных ?v= нет; шрифт Onest — там же.
   Разделы: 1 — вся страница (фон, украшения по углам, подвал); 2 — кнопки; 3 — первый экран и шапка города;
   4 — страницы города и вакансии; 5 — анкета-подарок; 6 — телефон и планшет (до 960 px); 7 — компьютер (от 960 px). */
:root {
  --sn-night: #06220E;
  --sn-lime: #91D85A;
  --sn-cream: #EFFFDB;
  /* Кнопки — салатовые с тёмным текстом, как на макетах (контраст 9:1); значки и ссылки на белом — тёмно-зелёные (5:1) */
  --btn-bg: #91D85A;
  --btn-ink: #05320A;
  --brand: #5FAF2D;
  --brand-strong: #2F7D1E;
  --brand-soft: #E9F6DF;
  --brand-hl: rgba(145, 216, 90, .45);
  --bg: #F1F6F2;
  --line: #DFE8E1;
  /* тёмное стекло вместо белых карточек — как плашки первого экрана */
  --sn-glass: linear-gradient(160deg, rgba(145, 216, 90, .16), rgba(6, 34, 14, .62) 70%);
  --sn-glass-line: rgba(239, 255, 219, .2);
  --sn-glass-shadow: 0 22px 44px -26px rgba(0, 0, 0, .7);
}

/* 1. Вся страница. Фон — только код (картинок на фоне нет, полос быть не может): ровный зелёный, сверху свет из Figma
   («Свет» key visual: #FCFA97 → #0F4B23, слой 50 %) за логотипом акции, по всей длине — мягкие тёплые пятна (справа,
   слева, справа), снизу чуть темнее, к сугробам. #093111 — цвет, на котором модель рисовала украшения (владелец, 29.10.2026) */
body[data-page] {
  position: relative; isolation: isolate;
  --sn-light: radial-gradient(circle 440px at 50% -30px, rgba(252, 250, 151, .42), rgba(252, 250, 151, .16) 38%, rgba(15, 75, 35, 0) 78%);
  background:
    var(--sn-light),
    radial-gradient(60% 900px at 92% 32%, rgba(252, 250, 151, .10), rgba(252, 250, 151, 0) 70%),
    radial-gradient(60% 900px at 6% 60%, rgba(252, 250, 151, .09), rgba(252, 250, 151, 0) 70%),
    radial-gradient(60% 900px at 90% 86%, rgba(252, 250, 151, .08), rgba(252, 250, 151, 0) 70%),
    linear-gradient(#0A3712, #093111 40%, #072A0D),
    #093111;
}
/* Украшения — четыре вырезанные композиции без фона (Nano Banana Pro 4K, в стиле логотипа «Получки»: вязаные подарки, дом,
   машина, смартфоны, золото, ветки с шишками и огоньками, снег): гроздья сверху слева и справа, сугробы с призами в нижних
   углах. Прибиты к верху и низу страницы (от её длины не зависят, ничего не тянется), под содержимым (z-index −1).
   Блок не выходит за край экрана (иначе прокрутка вбок): ширина блока — видимая часть картинки (--deco-w + сдвиг
   --deco-off ≤ 0), картинка прижата к внутреннему краю, лишнее снаружи режет сам блок. Размеры — в разделах 6 и 7 */
body[data-page]::before, body[data-page]::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  --deco-w: 130px; --deco-off: -70px; width: max(0px, calc(var(--deco-w) + var(--deco-off)));
}
body[data-page]::before {
  left: 0;
  background: var(--sn-img-deco-tl) right top / var(--deco-w) auto no-repeat,
              var(--sn-img-deco-bl) right bottom / var(--deco-w) auto no-repeat;
}
body[data-page]::after {
  right: 0;
  background: var(--sn-img-deco-tr) left top / var(--deco-w) auto no-repeat,
              var(--sn-img-deco-br) left bottom / var(--deco-w) auto no-repeat;
}
body[data-page] .section > h2 { color: #fff; }
body[data-page] .empty { color: rgba(239, 255, 219, .75); }
/* рамка фокуса с клавиатуры: тёмно-зелёная на тёмном не видна — салатовая; на белом (анкета, окна, плашка cookie) салатовая
   не видна (1,7:1) — там своя тёмно-зелёная (ревью 29.10.2026) */
body[data-page] :focus-visible { outline-color: var(--sn-lime); }
body[data-page] :is(.card.apply, .dialog, .cookie) :focus-visible { outline-color: var(--brand-strong); }

/* Подвал (season::foot) — на общем фоне, без плашек: мелкий шрифт акции, под ним в ряд знак «X5 · 20 лет» (Figma),
   крестик «партнёры» и логотип агентства — векторный, как на evoprod.team: слово «evoprod.» шрифтом Onest, точка — синий
   квадратик; растровый /lp/evoprod.png на тёмном не читался — подвал сезона заменяет шаблонный. Логотипы — по центру
   строки, на одной высоте (владелец, 29.10.2026) */
body[data-page] .foot { border-top-color: rgba(239, 255, 219, .14); }
.foot .wrap { flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.sn-legal { flex: 0 0 100%; padding: 0 max(0px, calc((100% - 760px) / 2)); text-align: center; font-size: 11px; line-height: 1.5; color: rgba(239, 255, 219, .72); }
.sn-x5 { display: block; height: 22px; width: auto; margin-top: 3px; opacity: .88; }
.sn-x { display: block; color: rgba(239, 255, 219, .55); font: 500 18px/1 Onest, system-ui, sans-serif; margin: 0 -6px; }
.sn-evo { display: inline-flex; align-items: baseline; color: #fff; font: 700 20px/1 Onest, system-ui, sans-serif; letter-spacing: -.02em; text-decoration: none; opacity: .9; }
.sn-evo-dot { display: inline-block; width: .2em; height: .2em; margin-left: .1em; border-radius: .05em; background: #3641F5; }

/* 2. Кнопки: снежная шапка на залитых (на маленькой «Принять» в плашке cookie — нет) */
.btn-primary { position: relative; box-shadow: 0 10px 26px -10px rgba(76, 150, 40, .75); }
.btn-primary::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: -9px; height: 19px; pointer-events: none;
  background: var(--sn-img-snowcap) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(5, 50, 10, .14));
}
.cookie .btn-primary::before { display: none; }

/* 3. Первый экран (season::hero-home, season::hero-vacancy; на страницах «Спасибо» и 404 — шаблонный) и шапка города —
   без карточки шаблона, прямо на фоне страницы: логотип акции вместо логотипа бренда (season::logo), светлый текст,
   зарплата салатовым, слова акции вместо описания (season::tagline), человек из кампании (season::person) */
.hero, .intro { position: relative; isolation: isolate; color: #fff; }
body[data-page] .hero { background: none; box-shadow: none; overflow: visible; }
.hero h1, .intro h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.hero .lead, .intro .lead { color: rgba(239, 255, 219, .86); }
.hero .salary { color: var(--sn-lime); }
.hero .salary mark { background: none; color: inherit; padding: 0; }
.hero .salary small { color: rgba(239, 255, 219, .78); }
.hero .chips li, body[data-page="city"] .vcard .tags li { background: rgba(6, 34, 14, .55); border: 1px solid rgba(239, 255, 219, .26); color: var(--sn-cream); }
.hero .chips svg { color: var(--sn-lime); }
.hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.logo .sn-logo { display: block; width: min(100%, 300px); height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .4)); }

/* Сетка первого экрана: на телефоне сверху вниз — логотип, человек, текст, плашки, кнопка; на компьютере — всё слева,
   человек справа (раздел 7). По одной левой линии с карточками ниже — без боковых отступов */
.sn-hero { gap: 0 6px; padding-block: 16px 46px; }
body[data-page] .sn-hero { padding-inline: 0; }
.sn-head { grid-area: head; display: flex; justify-content: center; margin-bottom: 4px; }
.sn-body { grid-area: body; position: relative; z-index: 4; align-self: center; padding: 6px 0 10px; }
.sn-hero h1 { font-size: clamp(30px, 8.4vw, 58px); margin: 0 0 10px; text-wrap: balance; }
.sn-hero .salary { font-size: clamp(22px, 6.2vw, 40px); }
.sn-hero .salary small { display: block; margin-top: 2px; font-size: 15px; }
.sn-hero .lead { margin-top: 10px; font-size: 16px; }
.sn-hero .chips { grid-area: chips; position: relative; z-index: 4; margin-top: 12px; }
.sn-hero .cta { grid-area: cta; position: relative; z-index: 4; margin-top: 22px; }
/* Слова акции — на месте описания под зарплатой; последнее слово и метка срока — одной строкой */
.sn-hero .sn-tagline { color: var(--sn-cream); font-weight: 600; text-wrap: balance; }
/* Адрес РЦ или базы (address у вакансии или её города) — под словами акции, мельче */
.sn-hero .sn-where { margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(239, 255, 219, .78); }
.sn-tagline .sn-nw { white-space: nowrap; }
.sn-tagline .sn-until {
  display: inline-block; margin: 0; padding: 2px 10px; border: 0; border-radius: 999px; white-space: nowrap;
  background: var(--sn-lime); color: var(--sn-night); font-size: 13px; font-weight: 700; vertical-align: 1px;
} /* отступ слева — пробел в разметке: без него дикторы и копирование читали «машинудо 31.12» */
/* Человек из кампании; тёплый свет за ним — на компьютере */
.sn-person { grid-area: person; position: relative; z-index: 1; }
.sn-person::before { content: ""; position: absolute; background: radial-gradient(closest-side, rgba(252, 236, 160, .28), transparent); }
.sn-person img { position: absolute; object-position: 50% 0; }

/* 4. Страницы города и вакансии — в том же виде, что главная. Шапка города — без карточки шаблона, по одной линии
   с карточками вакансий; «назад» и шаги «Как устроиться» — светлым (владелец, 29.10.2026) */
body[data-page="city"] .intro { margin-bottom: 24px; }
body[data-page="city"] .intro .logo .sn-logo { width: min(calc(100vw - 120px), 300px); }
body:is([data-page="city"], [data-page="vacancy"]) .back { color: rgba(239, 255, 219, .75); }
body:is([data-page="city"], [data-page="vacancy"]) .back:hover { color: #fff; }
body:is([data-page="city"], [data-page="vacancy"]) .steps b { color: #fff; }
body:is([data-page="city"], [data-page="vacancy"]) .steps span { color: rgba(239, 255, 219, .8); }
body:is([data-page="city"], [data-page="vacancy"]) .steps li::after { background: rgba(239, 255, 219, .2); }
body:is([data-page="city"], [data-page="vacancy"]) .steps li.has-art::before { box-shadow: 0 0 0 3px #093111; }

/* Без белых карточек шаблона — белой остаётся только анкета в подарке (владелец, 29.10.2026).
   Шары: «Почему у нас хорошо» на вакансии и три факта на главной — вязаные ёлочные шары со значками (Codex;
   baubles/<значок>.webp — по значку пункта: адрес шара даёт шаблон, --bauble у плитки (Site::bauble); шара нет — свой
   вязаный значок) висят на золотых нитях на заснеженной ветке
   с огоньками (garland.webp, у каждого пункта свой кусок — ряд сплошной при любом числе колонок); текст светлым, по центру.
   Ветка прячет и низ человека с первого экрана (раздел 7) */
body[data-page="vacancy"] .benefit, body[data-page="home"] .facts.with-art .fact {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px; text-align: center;
  background: none; box-shadow: none; border-radius: 0;
}
body[data-page="vacancy"] .benefit::before, body[data-page="home"] .facts.with-art .fact::before {
  content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 46px; z-index: 2; pointer-events: none;
  background: var(--sn-img-garland) 0 0 / auto 100% repeat-x;
}
body[data-page="vacancy"] .benefit .tile, body[data-page="home"] .facts.with-art .fact .tile {
  width: 96px; height: 178px; margin-top: 10px; border-radius: 0; box-shadow: none;
  background: var(--bauble, none) 50% 100% / contain no-repeat; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45));
}
body[data-page="vacancy"] .benefit .tile img, body[data-page="home"] .facts.with-art .fact .tile img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; } /* значок без шара */
/* концы ветки растворяются, а не обрываются в воздухе — у крайних в ряду (вакансия: 2 в ряд на телефоне, 4 на компьютере —
   раздел 7; факты главной — 3 в ряд) */
body[data-page="vacancy"] .benefit:nth-child(odd)::before, body[data-page="home"] .facts.with-art .fact:nth-child(3n+1)::before {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px);
}
body[data-page="vacancy"] .benefit:nth-child(even)::before, body[data-page="home"] .facts.with-art .fact:nth-child(3n)::before {
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 56px); mask-image: linear-gradient(270deg, transparent, #000 56px);
}
body[data-page="vacancy"] .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
body[data-page="vacancy"] .benefit h3, body[data-page="home"] .facts.with-art .fact b { color: #fff; }
body[data-page="vacancy"] .benefit p { color: rgba(239, 255, 219, .8); max-width: 30ch; }
body[data-page="home"] .facts.with-art { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
body[data-page="home"] .facts.with-art .fact { gap: 6px; padding: 0 2px; }
body[data-page="home"] .facts.with-art .fact .tile { width: 80px; height: 150px; }
body[data-page="home"] .facts.with-art .fact b { font-size: 20px; letter-spacing: -.02em; white-space: nowrap; } /* цифры — главные доводы: крупно, одной строкой; подпись мелко */
body[data-page="home"] .facts.with-art .fact span:not(.tile) { color: rgba(239, 255, 219, .8); }

/* Тёмное стекло (--sn-glass…) — «Чем заниматься», «Условия», «Частые вопросы» на вакансии, поиск и список городов
   на главной, карточки вакансий на странице города: спокойно, как плашки первого экрана; галочки, плюс и зарплата —
   салатовые; при наведении — салатовая кромка */
body[data-page="vacancy"] .lists .card, body[data-page] .faq details, body[data-page="home"] :is(.row, .search input), body[data-page="city"] .vcard {
  background: var(--sn-glass); border: 1px solid var(--sn-glass-line); border-radius: 22px; box-shadow: var(--sn-glass-shadow);
} /* без размытия под стеклом (backdrop-filter): под ним ровный фон — разницы не видно, а слабые телефоны тормозят при прокрутке */
body:is([data-page="home"], [data-page="city"]) :is(.row, .vcard):hover { border-color: rgba(145, 216, 90, .6); box-shadow: var(--sn-glass-shadow); }
body[data-page="vacancy"] .lists .card h3, body[data-page] .faq summary, body[data-page="home"] .row b, body[data-page="city"] .vcard h3 { color: #fff; }
body[data-page="vacancy"] .checks li, body[data-page] .faq details p { color: rgba(239, 255, 219, .82); }
body[data-page="home"] .row small, body[data-page="city"] .vcard .pay small { color: rgba(239, 255, 219, .75); }
body[data-page="vacancy"] .checks svg, body[data-page] .faq summary svg, body[data-page="city"] .vcard .pay { color: var(--sn-lime); }
/* Списки вакансии: слева от заголовка крупный вязаный значок выходит за верхний край — над «Чем заниматься» значок вакансии
   (корзина, коробка, грузовик…), над «Условиями» подарок: адреса картинок даёт шаблон (--art-duties, --art-terms на .lists,
   Site::art — сезон поверх бренда), под бренд в стилях ничего не прописано (ревью 29.10.2026) */
body[data-page="vacancy"] .lists { row-gap: 46px; padding-top: 26px; }
body[data-page="vacancy"] .lists .card { position: relative; }
body[data-page="vacancy"] .lists .card h3 { padding-left: 92px; }
body[data-page="vacancy"] .lists .card::before {
  content: ""; position: absolute; left: 6px; top: -40px; width: 100px; height: 100px; pointer-events: none;
  background: 50% 50% / contain no-repeat; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45));
}
body[data-page="vacancy"] .lists .card:first-child::before { background-image: var(--art-duties, none); }
body[data-page="vacancy"] .lists .card:last-child::before { background-image: var(--art-terms, none); }
/* «Акция «Получка»» (season::promo) — «гармошка» как «Частые вопросы»; ссылки на правила — салатовые, под ответом */
.sn-promo .faq-links { display: grid; gap: 8px; margin: -8px 0 0; padding: 0 0 18px; list-style: none; }
.sn-promo .faq-links a { color: var(--sn-lime); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sn-promo .faq-links a:hover { color: #fff; }
/* Поиск города */
body[data-page="home"] .search input { border-radius: 16px; color: #fff; }
body[data-page="home"] .search input::placeholder { color: rgba(239, 255, 219, .55); }
body[data-page="home"] .search input:focus { border-color: var(--sn-lime); box-shadow: 0 0 0 4px rgba(145, 216, 90, .3); }
body[data-page="home"] .search svg { z-index: 1; color: rgba(239, 255, 219, .7); } /* над стеклом поля — иначе размыт под ним */
/* Карточки вакансий города: значок вакансии крупно выходит за верхний край, метки — плашками первого экрана */
body[data-page="city"] .rows.vacancies { row-gap: 40px; padding-top: 24px; }
body[data-page="city"] .vcard { grid-template-columns: 76px minmax(0, 1fr) 40px; }
body[data-page="city"] .vcard .tile { width: 92px; height: 92px; margin: -34px 0 -4px -14px; align-self: start; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }

/* «Анкета не отправлена» и 404 — первый экран шаблона без картинки: одна колонка, на телефоне логотип по центру, между
   гроздьями (раздел 6) */
body:is([data-page="result"], [data-page="not-found"]) .hero { grid-template-columns: minmax(0, 1fr); }

/* 5. Анкета — подарок, вариант 4 из десяти (владелец, 29.10.2026): без блока шаблона, на общем фоне страницы; вязаная
   коробка с бантом, белая карточка формы заткнута под золотую ленту, уголки держат её углы, вокруг огоньки. Nano Banana Pro
   дорисовал подарок вокруг карточки в пропорциях формы, фон вырезан: gift4-d.webp (2000×2679, компьютер), gift5-m.webp
   (792×1426, телефон и планшет — тот же подарок, боковины плавно сжаты к внешнему краю, без вырезов и швов; середина боковин
   бесшовная по высоте и повторяется — round, вязка везде одной плотности). Растягивается по 9 частям (border-image): бант,
   крышка, уголки, бока и низ — в своих пропорциях (масштаб --k), по высоте формы тянется только белая середина, поэтому
   подходит к форме любой длины (лишние поля — город, права). «Откликнуться» и подпись — внутри карточки (сетка
   с подсеткой), подняты вровень с правой лентой; согласие под кнопкой опущено к нижней ленте.
   Фон анкеты бренда сезон не грузит (look.art_off в файле сезона) — у блока нет has-art и картинки.
   Только где есть подсетка, cqw и round() (Chrome 125+, Safari 16+, Firefox 118+): без подсетки заголовок ложился на поле
   «Пол» и анкету было не отправить, без round() рамка схлопывалась, а сдвинутые заголовок и согласие уезжали на тёмный фон
   (ревью 29.10.2026) — там анкета шаблона. «Откликнуться» вверху страницы прокручивает к заголовку анкеты, а не к банту
   (scroll-margin-top: заголовок — на 24 px ниже обычного места; ноутбук 1366×768 видел только бант и крышку). Верх картинки
   (--gift-top, px картинки) и подъём заголовка и формы (--lift) — в одном месте: от них срез и толщина рамки, сдвиги
   и прокрутка. Условие @supports — то же у запасной анкеты ниже */
@supports (grid-template-rows: subgrid) and (width: 1cqw) and (border-width: round(1px, 1px)) {
  .vf { container-type: inline-size; }
  .apply-zone {
    --k: min(calc(100cqw / 792), calc(560px / 683)); /* белая середина — не шире 560 px (планшет), как на компьютере */
    --gift-top: 537; --lift: 125;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
    width: calc(var(--k) * 792); margin-inline: auto; padding: 0;
    color: var(--ink); background: none; border-radius: 0; box-shadow: none; overflow: visible;
    border-style: solid; border-color: transparent;
    border-width: round(calc(var(--k) * var(--gift-top)), 1px) round(calc(var(--k) * 68), 1px) round(calc(var(--k) * 359), 1px) round(calc(var(--k) * 67), 1px);
    border-image: var(--sn-img-gift5-m) var(--gift-top) 68 359 67 fill / 1 / 0 stretch round;
    scroll-margin-top: calc(24px - var(--k) * (var(--gift-top) - var(--lift)));
  }
  .apply-zone::before, .apply-zone .apply-mark { display: none; }
  .apply-zone .apply-head { grid-row: 1; grid-column: 1; z-index: 3; position: relative; top: calc(var(--k) * var(--lift) * -1); width: 100%; max-width: none; margin: 0; padding: 4px 4px 6px; }
  .apply-zone .card.apply { grid-row: 1 / 3; grid-column: 1; display: grid; grid-template-rows: subgrid; width: 100%; max-width: none; margin: 0;
    padding: 0 2px 4px; background: #fff; box-shadow: 0 0 0 4px #fff; border-radius: 0; position: relative; z-index: 2; } /* белая подложка с кольцом 4 px закрывает волосяные стыки частей картинки */
  .apply-zone .card.apply > form { grid-row: 2; position: relative; top: calc(var(--k) * var(--lift) * -1); }
  .apply-head h2 { color: var(--ink); text-shadow: none; }
  .apply-head .sub { color: var(--ink-2); font-weight: 500; text-shadow: none; }

  /* Телефон и планшет: заголовок и форма сдвинуты вверх вместе (top) — «Откликнуться» вровень с лентой справа, подпись не
     заходит под неё; низ блока поднят на сдвиг + 118 px картинки: согласие у нижней ленты. Отступы до и после подарка — меньше */
  @media (max-width: 959.98px) {
    .apply-zone .apply-head { padding-inline: calc(var(--k) * 16); }
    .apply-zone .card.apply > form { margin-bottom: calc(var(--k) * -243); }
    .vf { margin-top: 24px; }
    .vf + .vb > .section:first-child { margin-top: 24px; }
  }
  @media (min-width: 640px) and (max-width: 959.98px) {
    /* планшет: согласие в 3 длинные строки — опускаем чуть меньше, чтобы предпоследняя не задевала нижнюю ленту */
    .apply-zone .card.apply > form { margin-bottom: calc(var(--k) * -213); }
  }

  /* Компьютер: анкета не мельчает вместе с центром («он и так маленький»): белая середина всегда 560 px, подарок может быть
     шире центра — по бокам анкеты пусто; уже — только если не хватает окна. Заголовок и форма сдвинуты вверх вместе (top) —
     «Откликнуться» вровень с лентой справа; низ блока поднят на сдвиг + 88 px картинки — согласие у нижней ленты; в картинке
     пусто 194 px сверху и 176 снизу — отступы до и после подарка меньше (владелец, 29.10.2026) */
  @media (min-width: 960px) {
    body[data-page="vacancy"] .apply-head h2 { font-size: 34px; }
    body[data-page="vacancy"] .apply-head .sub { font-size: 16px; }
    .apply-zone {
      --k: min(calc(560px / 1080), calc((100vw - 48px) / 2000));
      --gift-top: 1055; --lift: 240;
      width: calc(var(--k) * 2000); margin-inline: calc((100cqw - var(--k) * 2000) / 2);
      margin-block: calc(var(--k) * -174) calc(var(--k) * -156);
      border-width: round(calc(var(--k) * var(--gift-top)), 1px) round(calc(var(--k) * 460), 1px) round(calc(var(--k) * 675), 1px) round(calc(var(--k) * 460), 1px);
      border-image: var(--sn-img-gift4-d) var(--gift-top) 460 675 460 fill / 1 / 0 stretch;
    }
    .apply-zone .apply-head { padding: 8px; }
    .apply-zone .card.apply { padding: 0 8px 8px; }
    .apply-zone .card.apply > form { margin-bottom: calc(var(--k) * -328); }
  }
}
/* Обычный монитор (плотность 1) — лёгкие копии: украшения по углам 640 px вместо 1000 (показываются не шире 640 px,
   −270 КБ), подарок 1040 px вместо 2000 (показывается не шире 1037 px, 548 → 228 КБ; срезы — те же × 0,52) */
@media (min-width: 960px) and (max-resolution: 1.1dppx), (min-width: 960px) and (-webkit-max-device-pixel-ratio: 1.1) {
  body[data-page]::before { background-image: var(--sn-img-deco-tl-d1), var(--sn-img-deco-bl-d1); }
  body[data-page]::after { background-image: var(--sn-img-deco-tr-d1), var(--sn-img-deco-br-d1); }
  @supports (grid-template-rows: subgrid) and (width: 1cqw) and (border-width: round(1px, 1px)) {
    .apply-zone { border-image: var(--sn-img-gift4-d1) calc(var(--gift-top) * .52) 239.2 351 239.2 fill / 1 / 0 stretch; }
  }
}
/* Где подарка нет (старые браузеры) — анкета шаблона ровным салатовым цветом кнопок сезона, без точек и знаков: тёмные
   заголовок и подпись сезона на тёмной картинке perekrestok и x5-transport не читались (≈2:1, ревью 30.10.2026) */
@supports not ((grid-template-rows: subgrid) and (width: 1cqw) and (border-width: round(1px, 1px))) {
  .apply-zone { background: var(--btn-bg); }
  .apply-zone::before, .apply-zone .apply-mark { display: none; }
}

/* 6. Телефон и планшет (до 960 px) */
@media (min-width: 640px) {
  .sn-hero { padding-block: 24px 50px; }
  .sn-hero .chips { flex-direction: row; }
  .sn-hero .cta { grid-template-columns: auto auto; justify-content: start; }
}
@media (max-width: 959.98px) {
  /* Первый экран: человек над текстом (как фото в шаблоне), текст на всю ширину — рядом с ним колонка была узкой,
     заголовок и акция рвались на 5 строк (ревью по frontend-design, владелец 29.10.2026) */
  body[data-page] .sn-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "person" "body" "chips" "cta"; }
  body[data-page] .sn-head .logo .sn-logo, body:is([data-page="result"], [data-page="not-found"]) .hero .logo .sn-logo { width: min(calc(100vw - 120px), 300px); } /* уже — между гроздьями по углам */
  /* видна доля фото --show (photo.phone в файле сезона; по умолчанию 0,375 — до груди), низ растворяется */
  body[data-page] .sn-person { min-height: 0; height: 270px; margin: 2px 0 0; overflow: hidden; }
  body[data-page] .sn-person img {
    left: 50%; right: auto; top: 0; bottom: auto; width: auto; height: calc(270px / var(--show, .375)); transform: translateX(-50%); object-fit: contain;
    -webkit-mask-image: linear-gradient(#000 calc(var(--show, .375) * 100% - 7.5%), transparent calc(var(--show, .375) * 100%));
    mask-image: linear-gradient(#000 calc(var(--show, .375) * 100% - 7.5%), transparent calc(var(--show, .375) * 100%));
  }
  /* Гроздья с шишками — крупнее, по верхним углам за краями логотипа (были видны краешки по 15 px); снаружи их режет край
     экрана. Нижние — как были (130 px, видны внутренние 60 px), иначе закрывают подвал (владелец, 29.10.2026) */
  body[data-page]::before, body[data-page]::after { --deco-w: clamp(170px, 46vw, 320px); }
  body[data-page]::before {
    --deco-off: calc(var(--deco-w) * -.3);
    /* свои копии украшений: верх показывается не шире 320 px, низ — 130 px; при плотности экрана до 3 хватает 640 и 400 px
       (−0,33 МБ на каждой странице) */
    background-image: var(--sn-img-deco-tl-m), var(--sn-img-deco-bl-m);
    background-size: var(--deco-w) auto, 130px auto; background-position: right top, right calc(var(--deco-w) * .7 - 60px) bottom;
  }
  body[data-page]::after {
    --deco-off: calc(var(--deco-w) * -.28);
    background-image: var(--sn-img-deco-tr-m), var(--sn-img-deco-br-m);
    background-size: var(--deco-w) auto, 130px auto; background-position: left top, left calc(var(--deco-w) * .72 - 60px) bottom;
  }
  /* «Получка» и ссылка «назад» над ней — по центру, между гроздьями, как на главной (слева налезали на шишки); текст ниже —
     по левой линии с карточками (владелец, 29.10.2026) */
  body:is([data-page="city"], [data-page="vacancy"]) .back { display: flex; width: fit-content; margin-inline: auto; font-size: 14px; text-shadow: 0 1px 8px rgba(5, 30, 10, .9); }
  body[data-page="city"] .intro .logo, body:is([data-page="result"], [data-page="not-found"]) .hero .logo { display: flex; justify-content: center; }
}

/* 7. Компьютер (от 960 px) — всё плавно от ширины экрана, без ступенек (владелец, 29.10.2026: «соразмерно уменьшать
   и увеличивать от экрана»). --c = 75vw − 360px в пределах 720–1120 px (до 1440 → 720, 1600 → 840, 1920 → 1080, шире
   1973 → 1120): от него шрифты, логотип, колонка и ширина человека, украшения. Сам центр — не уже 870 px (три города в ряд
   с «Ленинградской областью» одной строкой), украшения и шрифты при этом от --c: на ноутбуке центр просто ближе к шишкам.
   Текст ниже первого экрана — от --c в тех же пропорциях, что в шаблоне при 1120 px (заголовок раздела 32, цифра факта 20,
   подпись 14, город 18, «N вакансий» 14, поиск 16): на ноутбуке всё мельче одинаково, без разнобоя шрифтов. Пределы снизу
   (ревью 29.10): заголовки разделов 26, основной текст 15, цифры фактов 26 — светлое мелкое на тёмном читается хуже;
   название города — 14: «Ленинградская область» одной строкой в три колонки */
@media (min-width: 960px) {
  body[data-page] {
    --c: clamp(720px, calc(75vw - 360px), 1120px);
    /* свет — слева сверху, за логотипом, как на плакате (остальной фон — раздел 1) */
    --sn-light: radial-gradient(circle 760px at 24% -40px, rgba(252, 250, 151, .42), rgba(252, 250, 151, .16) 35%, rgba(15, 75, 35, 0) 75%);
  }
  body[data-page] .wrap { max-width: max(var(--c), 870px); }
  /* Украшения: ширина --deco-w по боковому полю (240–640 px); гроздья (≤ 89 % ширины картинки слева, ≤ 76 % справа)
     кончаются на 16 px левее логотипа «Получки» (край центра − 8 px), лишнее уходит за край экрана; расчёты — в vw */
  body[data-page]::before, body[data-page]::after { --deco-w: clamp(240px, calc((50vw - var(--c) / 2 - 8px) * 1.12), 640px); }
  body[data-page]::before { --deco-off: min(0px, calc(50vw - var(--c) / 2 - 8px - .89 * var(--deco-w))); }
  body[data-page]::after { --deco-off: min(0px, calc(50vw - var(--c) / 2 - 8px - .76 * var(--deco-w))); }

  /* Первый экран: текст слева, человек справа во всю высоту. Человек — макушка вровень с логотипом (отступ первого экрана
     36 px), правый край — по краю центра, низ — за белыми карточками, срез посередине их (как люди за краем кадра на макетах
     клиента, без размытия); ширина — по пропорциям картинки от высоты, без обрезки по бокам */
  .sn-hero {
    grid-template-areas: "head person" "body person" "chips person" "cta person" ". person";
    grid-template-rows: auto auto auto auto 1fr;
    padding-block: 36px 60px;
  }
  /* колонка человека — по пропорциям его фото (--ratio из файла сезона): у женщины 5ka (0,318) — четверть --c, мужчины
     шире — колонка шире, плашки и текст не заходят им на руки (раскатка 30.10.2026) */
  body[data-page] .sn-hero { grid-template-columns: minmax(0, 1fr) calc(var(--c) * .785 * var(--ratio)); column-gap: 8px; }
  body[data-page] .sn-hero.sn-nophoto { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "chips" "cta"; }
  .sn-head { justify-content: flex-start; }
  .sn-head .logo .sn-logo { margin-left: -8px; }
  body[data-page] .sn-head .logo .sn-logo { width: calc(var(--c) * .34); }
  body[data-page] .sn-hero h1 { font-size: calc(var(--c) * .044); }
  body[data-page] .sn-hero .salary { font-size: calc(var(--c) * .035); }
  .sn-hero .salary small { display: inline; font-size: 17px; }
  body[data-page] .sn-hero .sn-tagline { font-size: max(15px, calc(var(--c) * .0165)); }
  body[data-page] .sn-hero .sn-where { font-size: max(15px, calc(var(--c) * .0143)); max-width: 60ch; }
  .sn-person { min-height: 520px; margin: -36px 0 -60px 0; }
  .sn-person::before { inset: 10% 0 0; }
  body[data-page] .sn-person img {
    left: auto; right: 0; top: 36px; bottom: auto; width: auto; max-width: none;
    height: calc(100% - 4px); /* низ — за веткой с шарами (она на 12 px ниже первого экрана): у картинки «auto» = по ширине, bottom не работает */
    transform: none; object-fit: cover; object-position: 50% 0; -webkit-mask-image: none; mask-image: none;
  }

  /* Главная: факты — шары крупнее, цифра и подпись от --c; города — по три в ряд,
     сетка не распирается вправо за край центра (владелец: «СПб и Казань вылезают справа») */
  body[data-page] .facts { position: relative; z-index: 1; }
  body[data-page] .section > h2 { font-size: max(26px, calc(var(--c) * .0286)); }
  body[data-page] .facts.with-art .fact b { font-size: max(26px, calc(var(--c) * .025)); }
  body[data-page] .facts.with-art .fact span:not(.tile) { font-size: max(13px, calc(var(--c) * .0125)); }
  body[data-page="home"] .facts.with-art .fact .tile { width: 100px; height: 186px; }
  body[data-page] .row { padding: 12px 14px 12px 18px; min-height: 64px; }
  body[data-page] .row b { font-size: max(14px, calc(var(--c) * .0161)); white-space: nowrap; }
  body[data-page] .row small { font-size: max(13px, calc(var(--c) * .0125)); }
  body[data-page] .search input { font-size: max(15px, calc(var(--c) * .0143)); }
  body[data-page="home"] .rows.cities { grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); }

  /* Город: шапка и карточки вакансий — в тех же пропорциях, что первый экран и карточки городов на главной («шрифт как на
     главной, не вразнобой»): название и зарплата — как название города, «в месяц» и метки — как «N вакансий»; значок
     и отступы тоже от --c — в две колонки на ноутбуке метки не переносятся */
  body[data-page="city"] .intro .logo .sn-logo { width: calc(var(--c) * .34); margin-left: -8px; }
  body[data-page="city"] .intro h1 { font-size: calc(var(--c) * .044); }
  body[data-page="city"] .intro .lead { font-size: max(15px, calc(var(--c) * .0165)); }
  body[data-page="city"] .vcard { gap: 12px; padding: 14px 14px 14px 16px; }
  body[data-page="city"] .vcard h3 { font-size: max(16px, calc(var(--c) * .0161)); }
  body[data-page="city"] .vcard .pay { font-size: max(16px, calc(var(--c) * .0161)); }
  body[data-page="city"] .vcard .pay small { font-size: max(13px, calc(var(--c) * .0125)); }
  body[data-page="city"] .vcard .tags li { font-size: max(12px, calc(var(--c) * .0112)); }
  body:is([data-page="city"], [data-page="vacancy"]) .steps b { font-size: max(16px, calc(var(--c) * .0152)); }
  body:is([data-page="city"], [data-page="vacancy"]) .steps span { font-size: max(15px, calc(var(--c) * .0134)); }

  /* Вакансия: шары «Почему у нас хорошо» — все четыре в ряд; низ человека кончается за веткой (ветка — на 54 px + --c/30
     ниже первого экрана: заголовок раздела растёт с --c; срез — на 20 px ниже её верха) */
  body[data-page="vacancy"] .sn-person img { height: calc(100% + 38px + var(--c) / 30); }
  body[data-page="vacancy"] .benefits { position: relative; z-index: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-page="vacancy"] .benefit .tile { width: 110px; height: 200px; }
  body[data-page="vacancy"] .benefit:nth-child(n)::before { -webkit-mask-image: none; mask-image: none; }
  body[data-page="vacancy"] .benefit:nth-child(4n+1)::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
  body[data-page="vacancy"] .benefit:nth-child(4n)::before { -webkit-mask-image: linear-gradient(270deg, transparent, #000 56px); mask-image: linear-gradient(270deg, transparent, #000 56px); }
  body[data-page="vacancy"] .benefit h3 { font-size: max(16px, calc(var(--c) * .0152)); }
  body[data-page="vacancy"] .benefit p { font-size: max(15px, calc(var(--c) * .0134)); }
  body[data-page="vacancy"] .lists .card h3 { font-size: max(18px, calc(var(--c) * .0179)); }
  body[data-page="vacancy"] .checks li { font-size: max(15px, calc(var(--c) * .0143)); }
  body[data-page] .faq summary { font-size: max(16px, calc(var(--c) * .0152)); }
  body[data-page] .faq details p { font-size: max(15px, calc(var(--c) * .0143)); }
}