/* Оформление контентных страниц сайта bsh24.ru.
   Токены namеренно вынесены наверх и совпадают по смыслу с doc.css:
   когда появится брендбук, меняются только они, разметка страниц не трогается. */

:root{
  --bg:#f7f5f0;
  --surface:#ffffff;
  --surface-2:#f1ede4;
  --ink:#1c1b18;
  --ink-soft:#57534b;
  --ink-mute:#8a857a;
  --line:#e2ddd2;
  --accent:#1f5c46;
  --accent-soft:#eaf1ed;
  --accent-ink:#ffffff;
  --warm:#b4762a;
  --warm-soft:#fbf2e4;
  --danger:#c0392b;
  --shadow-s:0 1px 2px rgba(28,27,24,.05), 0 6px 16px rgba(28,27,24,.05);
  --shadow-m:0 1px 2px rgba(28,27,24,.05), 0 16px 40px rgba(28,27,24,.09);
  --r:14px;
  --maxw:64rem;
  --text:64ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14151a; --surface:#1c1e24; --surface-2:#22252c;
    --ink:#e9e7e2; --ink-soft:#b0aca4; --ink-mute:#837f77;
    --line:#31343c; --accent:#6fbf9c; --accent-soft:#1d2a26; --accent-ink:#10231b;
    --warm:#d9a05b; --warm-soft:#2a2117; --danger:#ff7d6b;
    --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.25);
    --shadow-m:0 1px 2px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#14151a; --surface:#1c1e24; --surface-2:#22252c;
  --ink:#e9e7e2; --ink-soft:#b0aca4; --ink-mute:#837f77;
  --line:#31343c; --accent:#6fbf9c; --accent-soft:#1d2a26; --accent-ink:#10231b;
  --warm:#d9a05b; --warm-soft:#2a2117; --danger:#ff7d6b;
  --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.25);
  --shadow-m:0 1px 2px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(16px,1rem + .2vw,18px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent)}

/* padding-inline, а НЕ сокращённая запись padding: класс .wrap висит на самих
   секциях, и `padding:0 1.15rem` обнулял их вертикальные отступы. */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:1.15rem}
.narrow{max-width:var(--text)}

/* ── Шапка ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:-.01em}
/* Знак без подложки — как иконка сайта: сам логотип акцентным цветом. */
.brand .mark{
  width:1.75rem; height:1.75rem; flex:none;
  display:grid; place-items:center; color:var(--accent);
}
.brand .mark svg{width:100%; height:100%; display:block}
.topbar nav{display:flex; gap:1.1rem; font-size:.88rem}
.topbar nav a{color:var(--ink-soft); text-decoration:none; white-space:nowrap}
.topbar nav a:hover{color:var(--accent)}
@media (max-width:36rem){ .topbar nav{display:none} }

/* ── Первый экран ──────────────────────────────────────── */
.hero{padding-block:clamp(2.5rem,7vw,4.5rem) clamp(1.5rem,4vw,2.5rem)}
.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); padding:.35rem .7rem; border-radius:100px; margin:0 0 1.1rem;
}
h1{
  font-size:clamp(1.85rem,1.2rem + 3.4vw,3.2rem); line-height:1.1;
  letter-spacing:-.025em; margin:0 0 1rem; font-weight:800;
}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem); color:var(--ink-soft); margin:0 0 1.2rem; max-width:var(--text)}

/* ── Секции и заголовки ────────────────────────────────── */
/* Один общий вертикальный ритм: отступы задаются только здесь,
   чтобы блоки не слипались и не разъезжались по-разному. */
section{padding:clamp(2.25rem,5vw,3.5rem) 0}
section > h2:first-child,
section > .split:first-child,
section > .notice:first-child,
section > .cards:first-child,
section > .pricelist:first-child{margin-top:0}
h2{
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); line-height:1.2;
  letter-spacing:-.02em; margin:0 0 .8rem; font-weight:800;
}
h3{font-size:1.15rem; line-height:1.3; margin:0 0 .5rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1rem; max-width:var(--text)}
.section-intro{color:var(--ink-soft); margin-bottom:2rem}

/* ── Выключка по формату ───────────────────────────────── */
/* hyphens:auto здесь обязателен, а не украшение: без переносов выключка
   в русском тексте разрывает строки огромными пробелами — на узкой колонке
   телефона это выглядит хуже, чем обычное выравнивание по левому краю.
   Работает благодаря lang="ru" в <html>. */
main p,
main li,
.lead,
.section-intro{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

/* Короткие служебные строки выключке не подлежат: растягивать в них нечего,
   а результат — рваные пробелы в две-три дырки. */
.price, .price *,
.btns, .btn,
.price-note,
.eyebrow,
.pricelist .row, .pricelist .name, .pricelist .val, .pricelist small,
footer.site p,
footer.site a{
  text-align:left;
  hyphens:manual;
}

/* ── Выделенная плашка ─────────────────────────────────── */
.notice{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; padding:1.3rem 1.5rem; box-shadow:var(--shadow-s);
  margin:0 0 1.5rem;
}
.notice.warm{border-left-color:var(--warm); background:var(--warm-soft)}
/* Плашка с текстом того же кегля, что в карточках рядом: отдельный класс,
   потому что обычные .notice на других страницах должны остаться крупными. */
.notice.sm p{font-size:.94rem}
/* Предупреждение, мимо которого нельзя пройти глазами: до него родители
   доходили только в FAQ и успевали заказать три носителя, думая, что все
   три заработают. Полоса толще, заголовок в цвет — это единственная плашка
   на странице, которая должна перебивать карточки товаров. */
.notice.alarm{border-left-width:6px}
/* Плашка после сетки карточек: у .cards нет нижнего отступа, а у .notice —
   верхнего, поэтому без этого правила блоки слипаются. */
.cards + .notice{margin-top:clamp(1.6rem,3.5vw,2.6rem)}
.notice.alarm h3{
  margin:0 0 .5rem; font-size:1.06rem; color:var(--warm);
  display:flex; align-items:center; gap:.55rem;
}
.notice.alarm h3::before{
  content:"!"; flex:none;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--warm); color:var(--accent-ink);
  display:grid; place-items:center; font-size:.95rem; font-weight:800;
}
.notice.alarm strong{color:var(--ink)}
.notice p:last-child{margin-bottom:0}
.notice strong{font-weight:800}

/* ── Карточки видов пропуска ───────────────────────────── */
.cards{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
/* Ровно две колонки — для чётного числа карточек. Автоподбор при четырёх
   давал ряд из трёх и одинокую карточку внизу; четыре в ряд не годятся:
   при ширине контента 64rem карточка ужимается до 232 px и текст расползается
   на шесть строк. */
.cards.cards-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:44rem){ .cards.cards-2{grid-template-columns:1fr} }
/* В двух колонках поле под картинкой вдвое шире, поэтому прежние ограничения
   высоты делали предметы мелкими — поднимаем и поле, и потолок картинки. */
.cards-2 .card figure{height:15rem}
.cards-2 .card figure img{max-height:12rem}
.cards-2 .card figure img.compact{max-height:8.6rem}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-s); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
/* flex, а не grid: у grid строка подстраивается под содержимое, и процентная
   max-height у картинки резолвится в auto — изображение вылезало на заголовок.
   У flex-контейнера высота определённая, проценты считаются от неё. */
.card figure{
  margin:0; padding:1.5rem 1.2rem .6rem;
  display:flex; align-items:center; justify-content:center;
  height:13rem; overflow:hidden;
}
/* Изображения товаров — с прозрачным фоном, поэтому лежат прямо на карточке.
   Тень даёт силуэт: без неё чёрный браслет и чёрный брелок сливались бы
   с тёмной темой, а белый брелок — со светлой. */
.card figure img{
  max-height:10.4rem; max-width:100%; width:auto; height:auto; object-fit:contain;
}
.split figure img{
  max-height:22rem; max-width:100%; width:auto; height:auto; object-fit:contain;
}
.card figure img,
.split figure img{
  filter:drop-shadow(0 3px 8px rgba(28,27,24,.18));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card figure img,
  :root:not([data-theme="light"]) .split figure img{
    filter:drop-shadow(0 3px 10px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.28));
  }
}
:root[data-theme="dark"] .card figure img,
:root[data-theme="dark"] .split figure img{
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.28));
}
.card .body{padding:1.2rem 1.35rem 1.4rem; display:flex; flex-direction:column; flex:1}
.card p{font-size:.95rem; color:var(--ink-soft); margin-bottom:.9rem}
.card .price{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
/* Действие в карточке — строкой со стрелкой, а не кнопкой: карточки стоят
   в сетке сравнения, и кнопка перетягивала бы внимание с самого сравнения.
   Стрелка уезжает вправо при наведении — тот же приём, что у карточек
   на главной. */
.card .go{
  margin-top:.9rem; display:inline-flex; align-items:center; gap:.4rem;
  color:var(--accent); font-weight:700; font-size:.92rem; text-decoration:none;
}
.card .go svg{width:1.05rem; height:1.05rem; transition:transform .3s}
.card .go:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){ .card .go svg{transition:none} }
.price .amount{font-size:1.35rem; font-weight:800; letter-spacing:-.02em}
.price .free{color:var(--accent)}
.price .note{font-size:.85rem; color:var(--ink-mute)}
.price .sub{flex:1 1 100%; font-size:.88rem; color:var(--ink-soft); margin-top:.1rem}

/* Платное условие рядом с бесплатной ценой легко проскочить взглядом,
   поэтому оно вынесено в отдельную плашку, а не в мелкую серую строку. */
.tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .6rem; border-radius:100px;
  font-size:.8rem; font-weight:700; line-height:1.2;
  background:var(--warm-soft); color:var(--warm);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warm) 30%, transparent);
}
.tag.ok{background:var(--accent-soft); color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent)}

/* ── Список преимуществ ────────────────────────────────── */
/* Галочка нарисована одной SVG-маской, а не кружком с псевдоэлементом внутри:
   так она всегда по центру и не разъезжается при смене кегля. */
ul.checks{
  list-style:none; margin:0 0 1.2rem; padding:0; max-width:var(--text);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.95 7.34-6.02 6.02a1 1 0 0 1-1.42 0l-2.46-2.46a1 1 0 1 1 1.42-1.42l1.75 1.75 5.31-5.31a1 1 0 1 1 1.42 1.42Z'/%3E%3C/svg%3E");
}
ul.checks li{position:relative; padding:.35rem 0 .35rem 1.95rem}
ul.checks li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:1.2rem; height:1.2rem; transform:translateY(-50%);
  background:var(--accent);
  -webkit-mask:var(--check) center/contain no-repeat;
  mask:var(--check) center/contain no-repeat;
}

/* ── Двухколоночный блок с картинкой ───────────────────── */
.split{display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; grid-template-columns:1fr}
@media (max-width:51.99rem){ .split > figure{order:-1} }
@media (min-width:52rem){ .split{grid-template-columns:1.05fr .95fr} .split.rev > figure{order:-1} }
.split figure{margin:0; padding:1rem; display:grid; place-items:center}
.split figure img{max-height:20rem}

/* ── Кнопки ────────────────────────────────────────────── */
.btns{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0 0}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.3rem; border-radius:100px; text-decoration:none; font-weight:700;
  font-size:.95rem; border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-s)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-m)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
@media (prefers-reduced-motion: reduce){ .btn:hover, .card:hover{transform:none} }

.btn svg{width:1.2rem; height:1.2rem; flex:none}
/* Фирменный жёлтый Т-Банка. Текст всегда тёмный — жёлтый светлый в обеих темах,
   поэтому цвет здесь задан жёстко, а не через переменную. */
.btn-tbank{background:#FFDD2D; color:#1c1b18}
.btn-tbank:hover{background:#F5D000; transform:translateY(-2px); box-shadow:var(--shadow-m)}
/* Второстепенная кнопка: в покое только жёлтый контур и жёлтый текст,
   при наведении становится такой же, как основная. */
.btn-tbank-outline{background:transparent; color:var(--ink); border-color:#FFDD2D}
.btn-tbank-outline:hover{
  background:#FFDD2D; color:#1c1b18; border-color:#FFDD2D;
  transform:translateY(-2px); box-shadow:var(--shadow-m);
}
/* Кнопки мессенджеров — в их собственных цветах, чтобы узнавались с одного взгляда */
.btn-tg{background:#2AABEE; color:#fff}
.btn-tg:hover{background:#1e97d6; transform:translateY(-2px); box-shadow:var(--shadow-m)}
.btn-max{background:#5B34EA; color:#fff}
.btn-max:hover{background:#4a29c9; transform:translateY(-2px); box-shadow:var(--shadow-m)}
.btn-max .wordmark{
  font-weight:800; font-size:.72rem; letter-spacing:.02em; line-height:1;
  background:#fff; color:#5B34EA; border-radius:5px; padding:.22rem .3rem; flex:none;
}

/* ── Первый экран: оформить пропуск ────────────────────── */
.cta-hero{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-m); padding:clamp(1.4rem,4vw,2.2rem);
  margin:0 0 .5rem;
}
.cta-hero h2{margin-bottom:.4rem}
.cta-hero p{color:var(--ink-soft); margin-bottom:.2rem}
.cta-hero .btns{gap:.6rem}
.cta-hero .btn{flex:1 1 15rem; justify-content:center; text-align:center}
/* Второй уровень блока заказа: подпись отделена воздухом, а кнопка не тянется
   на всю ширину - иначе одиночная кнопка выглядит важнее пары над ней.
   Кегль тот же, что у абзацев выше: мельче она читалась как сноска. */
.cta-hero .cta-second{margin:1.1rem 0 .5rem}
.cta-hero .btns-one .btn{flex:0 1 20rem}

/* ── Прайс-лист ────────────────────────────────────────── */
/* Не таблица: на телефоне таблица из двух колонок либо сжимается
   в нечитаемый столбик, либо требует горизонтальной прокрутки.
   Строка на flex переносит цену под название сама. */
.pricelist{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-s); overflow:hidden; margin:0;
}
.pricelist .row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1rem;
  padding:.95rem 1.3rem; border-bottom:1px solid var(--line);
}
.pricelist .row:last-child{border-bottom:none}
.pricelist .row.head{
  background:var(--surface-2); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute); font-weight:700; padding-block:.7rem;
}
.pricelist .name{flex:1 1 12rem; min-width:0}
.pricelist .name small{display:block; color:var(--ink-mute); font-size:.84rem; margin-top:.15rem}
.pricelist .val{flex:0 0 auto; font-weight:700; white-space:nowrap}
.pricelist .val.free{color:var(--accent)}

/* ── Вопросы и ответы ──────────────────────────────────── */
/* На нативных <details>: работает без JavaScript, открывается с клавиатуры,
   находится встроенным поиском по странице и печатается развёрнутым. */
.faq{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-s); overflow:hidden;
}
.faq + .faq{margin-top:1.5rem}
.faq > .group{
  padding:.85rem 1.4rem; background:var(--surface-2);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:700; margin:0;
}
.faq details{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.05rem 3rem 1.05rem 1.4rem;
  font-weight:700; line-height:1.4;
  transition:background .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--accent-soft)}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.faq summary::after{
  content:""; position:absolute; right:1.5rem; top:1.35rem;
  width:.5rem; height:.5rem; border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(45deg);
  transition:transform .25s ease;
}
.faq details[open] > summary::after{transform:rotate(-135deg); top:1.5rem}
.faq .answer{padding:0 1.4rem 1.25rem; animation:faqOpen .28s ease}
.faq .answer > :last-child{margin-bottom:0}
.faq .answer p{font-size:.97rem; color:var(--ink-soft)}
@keyframes faqOpen{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .faq .answer{animation:none}
  .faq summary::after{transition:none}
}
@media print{
  .faq details{display:block}
  .faq .answer{display:block !important; animation:none}
}

/* ── Пометка рекламы ───────────────────────────────────── */
.price-note{
  font-size:.74rem; color:var(--ink-mute); margin:.8rem 0 0; line-height:1.45;
  padding-top:.6rem; border-top:1px dashed var(--line); max-width:var(--text);
}

/* ── Подвал ────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--line); margin-top:2rem; padding:2.5rem 0 3rem; color:var(--ink-soft); font-size:.9rem}
footer.site .cols{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.5rem 1.6rem; justify-content:space-between;
}
footer.site a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent}
footer.site a:hover{color:var(--accent); border-bottom-color:var(--accent)}
/* align-items:flex-start обязателен: в колонке ссылки растягиваются на всю
   ширину, и подчёркивание при наведении уезжает далеко за текст. */
footer.site .docs{display:flex; flex-direction:column; align-items:flex-start; gap:.4rem}
footer.site .docs a{width:fit-content}
footer.site .legal{margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-mute)}
/* Строка маркировки рекламы. Мельче остального подвала и без верхней черты —
   она служебная и не должна конкурировать с реквизитами. Но не мельче 11 px:
   пометка обязана оставаться читаемой, иначе теряет смысл как маркировка. */
footer.site .disclaimer{
  margin-top:.5rem; padding-top:0; border-top:none;
  font-size:.7rem; line-height:1.4; color:var(--ink-mute); opacity:.75;
}

/* ── Появление при прокрутке ───────────────────────────── */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ── Выделение в тексте ────────────────────────────────── */
/* Красным, а не жирным: полужирный на тёмном фоне выглядит тяжело,
   а смысловой акцент нужен точечный. */
.hl{color:var(--danger); font-weight:700}

/* ── Группы вопросов ───────────────────────────────────── */
.faq > details.grp{border-top:none}
.faq > details.grp + details.grp{border-top:1px solid var(--line)}
.faq > details.grp > summary{
  background:var(--surface-2); font-size:inherit; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink); font-weight:400;
  padding-block:1rem;
}
.faq > details.grp > summary::after{top:1.15rem}
.faq > details.grp[open] > summary::after{top:1.3rem}
.faq > details.grp > details:first-of-type{border-top:1px solid var(--line)}

/* ── Подвал в одну строку ──────────────────────────────── */
footer.site .docs{flex-direction:row; flex-wrap:wrap; gap:.3rem .9rem; align-items:baseline}
footer.site .cols p{margin:0; max-width:none}
footer.site .legal{margin-top:1rem; padding-top:.9rem}

/* Логотип мессенджера — картинкой, чтобы не плодить одинаковые id градиентов */
.btn img.ico{width:1.35rem; height:1.35rem; flex:none}
.btn img.ico.rounded{border-radius:5px}

/* ── Развилка на две аудитории ─────────────────────────── */
.fork{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.fork a{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.7rem 1.5rem; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-s); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.fork a:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--accent)}
.fork .who{
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.fork .what{font-size:1.35rem; font-weight:800; letter-spacing:-.02em; line-height:1.2}
.fork p{color:var(--ink-soft); font-size:.95rem; margin:0; max-width:none}
.fork .go{margin-top:.4rem; color:var(--accent); font-weight:700; font-size:.95rem}

/* ── Требование → решение ──────────────────────────────── */
.reqmap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-s); overflow:hidden;
}
.reqmap .row{
  display:flex; flex-wrap:wrap; gap:.35rem 1.2rem; align-items:baseline;
  padding:1rem 1.35rem; border-bottom:1px solid var(--line);
}
.reqmap .row:last-child{border-bottom:none}
.reqmap .need{flex:1 1 17rem; color:var(--ink-soft); min-width:0}
.reqmap .sol{flex:1 1 13rem; font-weight:700; min-width:0}

/* ── Плитка направлений ────────────────────────────────── */
.tiles{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.15rem 1.3rem; box-shadow:var(--shadow-s);
}
.tile h3{margin:0 0 .35rem; font-size:1.02rem}
.tile p{margin:0; font-size:.92rem; color:var(--ink-soft); max-width:none}

/* ── Цифры ─────────────────────────────────────────────── */
.stats{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow-s);
}
.stat .num{font-size:2.1rem; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--accent)}
.stat p{margin:.5rem 0 0; font-size:.93rem; color:var(--ink-soft); max-width:none}

/* ── Схема «как это работает» ──────────────────────────── */
.steps{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); counter-reset:step}
.step{
  position:relative; counter-increment:step;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.35rem 1.3rem; box-shadow:var(--shadow-s);
}
.step::before{
  content:counter(step);
  position:absolute; top:-.75rem; left:1.25rem;
  width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
  box-shadow:var(--shadow-s);
}
.step h3{margin:.25rem 0 .4rem; font-size:1.05rem}
.step p{margin:0; font-size:.94rem; color:var(--ink-soft); max-width:none}

/* ── Пошаговая инструкция ──────────────────────────────────
   Лента сверху вниз, а не сетка карточек: у порядка действий есть
   направление, и вертикаль читается как последовательность. */
.flow{counter-reset:fstep; list-style:none; margin:1.6rem 0 0; padding:0}
.flow > li{
  position:relative; counter-increment:fstep;
  padding:0 0 1.5rem 3.6rem; max-width:var(--text);
}
.flow > li::before{
  content:counter(fstep);
  position:absolute; left:0; top:-.15rem;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:800; font-size:1.05rem;
}
/* соединитель: тянется от кружка до следующего шага */
.flow > li::after{
  content:""; position:absolute; left:1.15rem; top:2.55rem; bottom:.35rem;
  width:2px; background:var(--line);
}
.flow > li:last-child{padding-bottom:0}
.flow > li:last-child::after{display:none}
.flow h3{margin:.3rem 0 .35rem; font-size:1.05rem}
.flow p{margin:0 0 .5rem; font-size:.96rem; color:var(--ink-soft); max-width:none}
.flow p:last-child{margin-bottom:0}

/* Два способа получить UID равнозначны, поэтому стоят рядом, а не друг за другом */
.ways{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); margin-top:1.2rem}
.way{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow-s);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, background .35s;
}
.way:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); background:var(--surface-2)}
.way .when{
  display:inline-block; margin-bottom:.7rem; padding:.28rem .7rem;
  border-radius:100px; font-size:.74rem; font-weight:700; letter-spacing:.04em;
  background:var(--accent-soft); color:var(--accent);
}
.way.alt .when{background:var(--warm-soft); color:var(--warm)}
/* Во второй карточке вместо списка шагов обычный текст — она объясняет
   условие, а не даёт инструкцию. */
.way .wp{margin:0 0 .7rem; font-size:.94rem; color:var(--ink-soft); max-width:none}
.way .wp:last-child{margin-bottom:0}
.way h3{margin:0 0 .6rem; font-size:1.05rem}
.way ol{margin:0; padding-left:1.15rem; color:var(--ink-soft); font-size:.94rem}
.way ol li{padding:.22rem 0}
.way ol li::marker{color:var(--accent); font-weight:700}
.way.alt ol li::marker{color:var(--warm)}
.way .note{margin:.8rem 0 0; font-size:.88rem; color:var(--ink-mute)}
/* Фразу для чата поддержки человек перепечатывает в чужое приложение —
   даём скопировать одним нажатием. Плашкой и на своей строке: в потоке
   абзаца она рвала бы строку в непредсказуемом месте, а по виду должно быть
   понятно, что это нажимается, ещё до наведения.
   width:fit-content — плашка по ширине текста, а не во всю колонку;
   max-width страхует длинную фразу на узком экране: она переносится внутри. */
.copy{
  display:flex; align-items:center; gap:.6rem;
  width:fit-content; max-width:100%; margin:.35rem 0 .15rem;
  padding:.45rem .7rem; border-radius:.7rem;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink); font-weight:700; text-align:left; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.copy:hover{border-color:var(--accent); color:var(--accent)}
.copy:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.copy svg{width:1.05em; height:1.05em; flex:none; color:var(--accent)}
.copy .ic-ok{display:none}
/* Скопировано: плашка на секунду зеленеет, иконка меняется на галочку —
   подтверждение видно, даже если человек смотрел в другое место экрана. */
.copy.done{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.copy.done .ic-copy{display:none}
.copy.done .ic-ok{display:block}
@media (prefers-reduced-motion: reduce){ .copy{transition:none} }
/* Текст только для скринридера: сообщение «Скопировано» видящий пользователь
   получает галочкой, незрячий — этой строкой через aria-live. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){ .way:hover{transform:none} }

/* ── Выбор носителя с раскрытием формы (страница персонала) ─
   Переключение на скрытых radio и :checked, без JavaScript: форма должна
   открываться даже если скрипт не загрузился, иначе заявку не отправить.
   Radio лежат перед .picks и .formbox, чтобы работал соседний селектор. */
.pick-in{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
/* Карточки и формы лежат в одной сетке. В разметке форма идёт сразу за своей
   карточкой — так на узком экране она раскрывается под нажатой. На широком
   раскладываем явно: карточки в первую строку, формы во вторую, на всю ширину. */
.picker{display:grid; gap:1.1rem; grid-template-columns:repeat(2,1fr); margin-top:1.4rem}
.picker > .pick:nth-of-type(1){grid-row:1; grid-column:1}
.picker > .pick:nth-of-type(2){grid-row:1; grid-column:2}
.picker > .formbox{grid-row:2; grid-column:1 / -1; margin-top:0}
/* Сброс повторяет селекторы с :nth-of-type один в один: медиазапрос
   специфичности не добавляет, и более короткий селектор проигрывал —
   вторая карточка продолжала требовать вторую колонку, а грид послушно
   создавал её неявной, из-за чего на телефоне оставалось две колонки. */
@media (max-width:44rem){
  .picker{grid-template-columns:1fr}
  .picker > .pick:nth-of-type(1),
  .picker > .pick:nth-of-type(2),
  .picker > .formbox{grid-row:auto; grid-column:auto}
}
.pick{
  display:flex; flex-direction:column; gap:.4rem; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.5rem 1.3rem; box-shadow:var(--shadow-s);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s, background .3s;
}
/* Фон при наведении, а не только рамка: у карточки выбора нет иконки и
   стрелки-подсказки, поэтому одной рамки мало, чтобы читаться как кликабельная.
   Оттенок мягче, чем у выбранной, — чтобы наведение не спорило с выбором. */
.pick:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-m);
  border-color:var(--accent); background:var(--surface-2);
}
/* Цена набрана теми же классами, что в карточках носителей (.price .amount
   и .tag), чтобы «Бесплатно» и «600 ₽» выглядели на странице одинаково,
   где бы ни встретились. Здесь только раскладка — оформление наследуется. */
.pick .price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem;
  margin-bottom:.35rem;
}
.pick-h{font-weight:800; font-size:1.06rem; line-height:1.3}
.pick-p{font-size:.94rem; color:var(--ink-soft)}
.pick-go{
  margin-top:.6rem; font-weight:700; color:var(--accent);
  display:inline-flex; align-items:center; gap:.4rem;
}
.pick-go::after{content:"→"; transition:transform .3s}
.pick:hover .pick-go::after{transform:translateX(4px)}

/* Выбранная карточка помечается классом из скрипта, а не через :checked:
   формы всё равно раскрывает он же, зато состояние остаётся одно и не зависит
   от того, как браузер разрешает соседний селектор со скрытым radio. */
.pick.is-on{
  border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--shadow-m);
}
.pick.is-on .pick-go::after{content:"✓"}

/* Платный вариант ведём в тёплом цвете — том же, которым на сайте помечено
   всё платное: маркеры ₽, суммы в панели «Платно», ярлыки перевыпуска.
   Цвет несёт смысл, поэтому и рамка, и «Выбрать», и выбранное состояние
   переключаются целиком, а не только цифра. */
.pick.paid .price .amount{color:var(--warm)}
.pick.paid .pick-go{color:var(--warm)}
.pick.paid:hover{border-color:var(--warm)}
.pick.paid.is-on{border-color:var(--warm); background:var(--warm-soft)}
/* radio скрыт, поэтому рамку фокуса показываем на самой карточке */
.pick-in:focus-visible + .pick{outline:2px solid var(--accent); outline-offset:3px}

.formbox{
  display:none; margin-top:1.6rem;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; padding:1.6rem 1.7rem; box-shadow:var(--shadow-s);
  animation:formIn .3s ease;
}
.formbox.open{display:block}
/* Форма платного варианта — с тёплой полосой, в тон своей карточке выбора */
.formbox.paid{border-left-color:var(--warm)}
.formbox h3{margin:0 0 .8rem; font-size:1.1rem}
.formstub{margin:0; color:var(--ink-mute); font-size:.94rem}
@keyframes formIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .pick:hover{transform:none}
  .formbox{animation:none}
}

/* ── Что бесплатно, что платно ─────────────────────────── */
.split2{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow-s);
}
.panel.free{border-left:4px solid var(--accent)}
.panel.paid{border-left:4px solid var(--warm)}
.panel h3{margin:0 0 .7rem; font-size:1.05rem}
.panel ul{list-style:none; margin:0; padding:0}
.panel li{padding:.3rem 0 .3rem 1.3rem; position:relative; font-size:.95rem; color:var(--ink-soft)}
.panel.free li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800}
.panel.paid li::before{content:"₽"; position:absolute; left:0; color:var(--warm); font-weight:800}
.panel li b{color:var(--ink); font-weight:700}
/* Суммы в платной панели — тем же цветом, что и маркер ₽ перед пунктом:
   глаз собирает их в один ряд и цена читается до того, как прочитан текст. */
.panel.paid .sum{color:var(--warm); font-weight:700}

/* Вложенный список внутри пункта панели: маркер обычный, а не ₽ */
.panel .sub{margin:.4rem 0 .5rem; padding:0; list-style:none}
.panel .sub li{padding:.16rem 0 .16rem 1.05rem; font-size:.95rem}
.panel.free .sub li::before,
.panel.paid .sub li::before{content:"•"; color:var(--ink-mute); font-weight:700}

/* ── Крупная развилка на главной ───────────────────────── */
/* minmax(21rem) держал ровно две карточки: при трёх третья уходила во второй
   ряд одна. Порог опущен, чтобы три вставали в ряд при ширине контента 64rem,
   а на узких экранах сетка по-прежнему сворачивалась в колонку. */
.forkbig{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}

/* Заглушка на месте будущей картинки — только для черновиков */
.imgstub{
  margin:0; align-self:center; font-size:.9rem; color:var(--ink-mute);
  border:1px dashed var(--line); border-radius:var(--r);
  padding:2.2rem 1.4rem; text-align:center; width:100%;
}
.fcard{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-s); text-decoration:none; color:var(--ink);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s;
}
a.fcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--accent)}
.fcard figure{
  /* по низу, а не по центру: так нижние кромки самих изображений
     оказываются на одной линии, хотя высота у них разная */
  /* Высота подогнана под самый высокий из снимков плюс поля: при 14rem
     над низкими картинками зависало полтора сантиметра пустоты. */
  margin:0; height:11.5rem; display:flex; align-items:flex-end; justify-content:center;
  padding:1.1rem 1.6rem; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, var(--surface-2) 0%, transparent 70%);
}
/* Потолки высоты разные, потому что предметы разной формы, а глаз сравнивает
   не высоту, а занятую площадь. Единый лимит в 11rem делал знак «Директору»
   вдвое выше широкого снимка рядом, и блок казался огромным. */
.fcard figure img,
.fcard figure svg{
  height:auto; width:auto; max-width:100%; object-fit:contain;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.fcard figure img{max-height:8.5rem}   /* снимки предметов — шире, чем выше */
.fcard figure svg{max-height:7rem}     /* знак плотный, ему нужно меньше */
a.fcard:hover figure img,
a.fcard:hover figure svg{transform:scale(1.05)}
.fcard .body{padding:0 1.7rem 1.7rem; display:flex; flex-direction:column; flex:1; gap:.55rem}
/* Подпись вынесена в шапку карточки: читатель должен понять, ему ли этот
   блок, ещё до того как рассмотрит картинку. */
.fcard > .who{
  display:block; padding:1.2rem 1.7rem .3rem;
  font-size:clamp(1.15rem,1rem + .7vw,1.45rem); font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  line-height:1.2;
}
.fcard h2{margin:0; font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem)}
.fcard p{margin:0; color:var(--ink-soft); font-size:.97rem; max-width:none}
/* Карточка с длинным текстом: кегль мельче, иначе она вытягивает
   по высоте весь ряд — в сетке карточки выравниваются по самой высокой. */
.fcard.dense p{font-size:.9rem; line-height:1.5}
.fcard .go{
  margin-top:auto; padding-top:.9rem; color:var(--accent); font-weight:700;
  display:inline-flex; align-items:center; gap:.4rem;
}
.fcard .go svg{width:1.05rem; height:1.05rem; transition:transform .3s}
a.fcard:hover .go svg{transform:translateX(4px)}
.fcard .soon{
  margin-top:auto; padding-top:.9rem;
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--ink-mute); font-weight:700; font-size:.92rem;
}
.fcard .soon::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--warm); box-shadow:0 0 0 4px color-mix(in srgb, var(--warm) 22%, transparent);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in srgb, var(--warm) 22%, transparent)}
  50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--warm) 0%, transparent)}
}
@media (prefers-reduced-motion: reduce){
  .fcard, .fcard figure img, .fcard figure svg, .fcard .go svg{transition:none}
  a.fcard:hover{transform:none}
  .fcard .soon::before{animation:none}
}

/* Ступенчатое появление: вторая карточка чуть позже первой */
.reveal .fcard:nth-child(2){transition-delay:.12s}

/* Почти квадратный снимок в ряду с широкими «полосками» выглядит вдвое
   крупнее при одинаковой высоте — уравниваем по зрительному весу, а не по цифре. */
.card figure img.compact{max-height:7.2rem}

/* ── Отклик на наведение у остальных блоков ────────────────
   Карточки видов пропуска (.card) реагировали, а соседние блоки — нет,
   и страница ощущалась наполовину живой. Движение везде одно и то же:
   подъём на 2-3 px плюс тень поглубже. */

/* Плашки «Уважаемые родители!» и «…работает бесплатно». Подъём меньше,
   чем у карточек: плашка широкая и низкая, при -3 px она заметно «прыгает». */
.notice{transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s}
.notice:hover{transform:translateY(-2px); box-shadow:var(--shadow-m)}

/* Панели «Бесплатно» и «Платно». Цветную левую границу не трогаем — она
   различает панели по смыслу; подсвечиваем фон на один шаг. */
.panel{transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, background .35s}
.panel:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); background:var(--surface-2)}

/* Иллюстрации в блоках «Подробнее о карте „Джуниор“» и «Уведомления о проходах».
   Только само изображение чуть наезжает на зрителя и возвращается обратно.
   Подложку под картинкой намеренно не подсвечиваем: figure шире изображения,
   и её фон вспыхивал прямоугольником вокруг — это бросалось в глаза сильнее,
   чем сам эффект. */
.split figure img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.split figure:hover img{transform:scale(1.04)}

/* Как и у .card выше: снимаем только движение, а подсветку фона и тень
   оставляем — без них блок вообще перестал бы отзываться на наведение. */
@media (prefers-reduced-motion: reduce){
  .notice:hover, .panel:hover{transform:none}
  .split figure img{transition:none}
  .split figure:hover img{transform:none}
}