/* ---------- токены ----------
   Копия блока из критических стилей документа. Копия, а не перенос:
   main.css подключён отложенно, и без токенов в документе первый экран
   отрисовался бы без размеров и цветов. Здесь они нужны для страниц,
   которые подключают main.css со своим набором критических стилей.
   При правке токенов меняйте оба места — сборка это проверяет. */
:root{--ink:#14161C;--ink-70:#6B7280;--steel:#6B7280;--faint:#C9CCD3;
  --bg:#F4F5F7;--paper:#FFF;--mist:#F2F3F6;--mist-2:#F7F8FA;--line:#E7E9ED;--line-2:#EDEFF2;
  --signal:#D93A2E;--signal-2:#B8332A;--signal-soft:#FDECE9;--signal-line:#F0A79F;
  --ok:#1F7A52;--ok-soft:#E6F4EC;--ok-dark:#7BE0A8;--on-dark:rgba(255,255,255,.92);--on-dark-2:rgba(255,255,255,.6);--warn:#7A5710;--warn-soft:#FBF3E2;
  --brand:#2F4C8C;--brand-soft:#EAF0FB;
  --dark:#131415;--tray:#E9EBEF;--tray-2:#DFE2E8;
  --r-xs:4px;--r-ctl:6px;--r-mark:8px;--r-card:12px;--r-blk:18px;--r-pill:999px;
  --pad:clamp(16px,4vw,40px);--gap-sec:clamp(50px,4.6vw,76px);--gap-card:12px;
  /* высота шапки: во втором состоянии она сжимается, рельса категорий встаёт под неё */
  --header-h:68px;
  /* шкала слоёв: правишь здесь, а не в правилах */
  --z-rail:38;--z-menu:60;--z-header:70;--z-top:80;--z-toast:90;--z-nav:95;--z-drawer:120;
  --sh:0 1px 2px rgba(16,20,28,.04),0 12px 32px -20px rgba(16,20,28,.18);
  /* карточка в покое: белое на #F4F5F7 само по себе почти не отделяется */
  --sh-rest:0 1px 1px rgba(16,20,28,.04),0 4px 14px -8px rgba(16,20,28,.14);
  --sh2:0 28px 70px -22px rgba(20,22,26,.3);
  --e:cubic-bezier(.22,.61,.36,1);--t:.16s var(--e);
  --fs-h1:clamp(25px,2.9vw,34px);--fs-h2:clamp(21px,2.4vw,28px);--fs-xl:17px;--fs-num:clamp(28px,3vw,32px);
  --fs-lead:16px;--fs-body:14.5px;--fs-sub:13.5px;--fs-xs:12.5px;--fs-micro:11.5px}

/* ---------- крошки: низ страницы, в критических не нужны ---------- */
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs__sep{color:var(--faint)}

/* ============================================================
   main.css — единственный подключаемый стиль страницы
   «Промокоды — главная». Критические стили первого экрана
   (токены, сброс, шапка, хиро, лид) остаются в <style> документа,
   поэтому здесь они не повторяются.
   Порядок: шрифты → секции → рельсы → табы категорий → карточка →
   сервисы → подборки → почему мы → как пользоваться → FAQ →
   футер → панель сохранённых → служебные слои.
   ============================================================ */
/* ---------- шрифты: файлами, не base64 ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/template/yookey/fonts/manrope-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/template/yookey/fonts/manrope-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 500 — навигация: 700 перетягивал внимание с бренда */
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/template/yookey/fonts/manrope-500-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/template/yookey/fonts/manrope-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/template/yookey/fonts/manrope-700-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/template/yookey/fonts/manrope-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/template/yookey/fonts/unbounded-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/template/yookey/fonts/unbounded-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/template/yookey/fonts/unbounded-600-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/template/yookey/fonts/unbounded-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ---------- блок лучших промокодов на первом экране ---------- */
/* заливка — приглушённый янтарный, границу держит обводка цвета песка */
/* ---------- секции и панели ---------- */
section{padding:var(--gap-sec) 0 0}
.panel{background:var(--paper);border-radius:var(--r-blk);padding:clamp(20px,3vw,34px)}



/* широкая кнопка всегда отбита от содержимого на 20; пара кнопок держится через 8 */
.btn-wide{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin-top:20px;padding:13px 22px;border:0;border-radius:var(--r-ctl);background:var(--tray);font-size:var(--fs-body);font-weight:700;color:var(--ink);text-decoration:none;transition:var(--t)}
.btn-wide:hover{background:var(--tray-2);color:var(--ink)}
.btn-wide b{font-weight:700;color:var(--steel)}
.btn-wide__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- ссылки-теги ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-ctl);font-size:var(--fs-xs);font-weight:700;white-space:nowrap;transition:var(--t)}
.chip--tag{border:1px solid var(--line);background:var(--paper)}
/* секцию подборок можно выключить свойством компонента */
.page--no-collections .collections{display:none}
/* подборки укладываются в две строки, дальше — прокрутка вправо */
/* плашка остаётся — она общая с разделом помощи; сжимается только по высоте,
   а чипсы вместо горизонтальной дорожки переносятся по ширине */
.collections .panel{padding:clamp(16px,2vw,22px)}
.collections .compare-row{padding:0}
.collections .scroller__inner{display:flex;flex-wrap:wrap;overflow:visible;gap:8px}
.collections .scroller::after,.collections .scroller::before{display:none}
.collections .scroller__btn{display:none}
.chip--tag:hover{border-color:var(--signal-line);background:var(--signal-soft);color:var(--signal)}
.chip--tag .icon{stroke:var(--faint)}
.chip--tag:hover .icon{stroke:var(--signal);transform:translate(1px,-1px)}
/* ---------- строка с рельсой внутри панели ---------- */
.compare-row{padding:10px 0}
.compare-row:first-child{padding-top:0}
.compare-row:last-child{padding-bottom:0}
.compare-row__h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.compare-row__title{font-size:var(--fs-body);font-weight:500}
.compare-row__h a{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:500;color:var(--signal);white-space:nowrap}
.compare-row__h a .icon{stroke:var(--signal)}
/* ---------- горизонтальные рельсы ---------- */
.scroller{position:relative;min-width:0}
/* кнопка-шеврон стоит поверх дорожки: без поля и растушёвки она режет последний чипс */
.scroller--right .scroller__inner{padding-right:46px}
.scroller--right::after{content:"";position:absolute;right:0;top:0;bottom:0;width:48px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg) 72%)}
.scroller--left .scroller__inner{padding-left:46px}
.scroller--left::before{content:"";position:absolute;left:0;top:0;bottom:0;width:48px;pointer-events:none;z-index:1;background:linear-gradient(270deg,transparent,var(--bg) 72%)}
.scroller__inner{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:2px 0}
.scroller__inner::-webkit-scrollbar{display:none}
.scroller__inner>:where(*){flex:0 0 auto}
.scroller__fade{position:absolute;top:0;bottom:0;right:0;width:96px;background:linear-gradient(90deg,rgba(244,245,247,0),var(--bg) 62%);pointer-events:none;opacity:0;transition:var(--t)}
/* внутри белой панели градиент гаснет в белый */
.panel .scroller__fade{background:linear-gradient(90deg,rgba(255,255,255,0),var(--paper) 62%)}
.scroller__fade--left{right:auto;left:0;transform:scaleX(-1)}
.scroller--right .scroller__fade:not(.scroller__fade--left){opacity:1}
.scroller--left .scroller__fade--left{opacity:1}
.scroller__btn{position:absolute;right:0;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--sh);opacity:0;visibility:hidden;transition:var(--t);z-index:2}
.scroller__btn:hover{border-color:var(--ink)}
.scroller__btn svg{stroke:var(--ink)}
.scroller__btn--left{right:auto;left:0}
.scroller__btn--left svg{transform:scaleX(-1)}
.scroller--right .scroller__btn:not(.scroller__btn--left){opacity:1;visibility:visible}
.scroller--left .scroller__btn--left{opacity:1;visibility:visible}
/* ---------- табы категорий ---------- */
.tabs__row{display:flex;align-items:center;gap:14px;position:sticky;top:var(--header-h);z-index:var(--z-rail);padding:8px 0;background:var(--bg);transition:box-shadow var(--t),top .26s var(--e)}
.tabs__row--stuck{box-shadow:0 10px 24px -20px rgba(20,22,26,.55)}
.tabs__row .scroller{flex:1 1 auto;min-width:0}
.tabs__row .scroller__inner{gap:8px;padding:3px 0;align-items:center}
.tabs__row .scroller__fade{width:72px}
.filter-chip{display:inline-flex;align-items:center;min-height:38px;padding:9px 15px;border:1px solid transparent;border-radius:var(--r-ctl);background:var(--tray);font-size:var(--fs-xs);font-weight:700;color:var(--ink);white-space:nowrap;text-decoration:none;cursor:pointer;transition:var(--t)}
.filter-chip:hover{background:var(--tray-2);color:var(--ink)}
.filter-chip__count{margin-left:6px;font-weight:500;color:var(--steel)}
.filter-chip--on,.filter-chip--on:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-chip--on .filter-chip__count{color:rgba(255,255,255,.6)}
/* ---------- переключатель типа выгоды ---------- */
.picker{position:relative;flex:none}
/* фильтр и сортировка живут на своей строке — она не залипает под шапкой */
.filters-row{position:static;display:flex;align-items:center;gap:12px;padding:12px 0 0}
.filters-row__n{flex:none;font-size:var(--fs-body);font-weight:500;color:var(--steel);white-space:nowrap}
.filters-row__tools{display:flex;align-items:center;gap:14px;margin-left:auto}
.picker__button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:9px 15px;border:1px solid transparent;border-radius:var(--r-ctl);background:var(--tray);font-size:var(--fs-xs);font-weight:700;white-space:nowrap;transition:var(--t)}
.picker__button:hover{background:var(--tray-2)}
.picker__label{color:var(--steel)}
.picker__label::after{content:":"}
.picker__value{color:var(--ink)}
.picker__button .icon{stroke:var(--ink);transition:transform .2s var(--e)}
.picker__button[aria-expanded="true"] .icon{transform:rotate(180deg)}
.picker__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:36;width:224px;padding:6px;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:var(--t)}
.picker__menu--open{opacity:1;visibility:visible;transform:none}
.picker__item{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:9px 10px;border-radius:var(--r-ctl);font-size:var(--fs-body);text-align:left;color:var(--ink);transition:var(--t)}
.picker__item:hover{background:var(--mist-2)}
.picker__item[aria-checked="true"]{color:var(--signal);font-weight:500}
.picker__tick{display:grid;place-items:center;width:14px;opacity:0}
.picker__item[aria-checked="true"] .picker__tick{opacity:1}
.picker__tick .icon{stroke:currentColor}
.tab-panel__empty{margin:0;padding:34px 24px;text-align:center;font-size:var(--fs-sub);color:var(--steel);background:var(--paper);border-radius:var(--r-blk)}
.tab-panel{padding-top:16px}
.tab-panel[hidden]{display:none}
.tab-panel--off{display:none}
.tab-panel--in{animation:ykPanelIn .24s var(--e) both}
@keyframes ykPanelIn{from{opacity:0;transform:translateY(6px)}}
.promo-list>.promo-card--more,.shop-grid>.shop-tile--more{display:none}
.btn-wide--more .icon{stroke:var(--steel)}
.btn-wide--more+.tab-panel__all{margin-top:8px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.btn-wide--more+.tab-panel__all:hover{background:var(--paper)}
/* панель без своей страницы категории: список замыкает сама рельса табов */
.tab-panel__note{margin:12px 0 0;font-size:var(--fs-sub);color:var(--steel)}
/* ---------- карточка предложения: три в строке ---------- */
.promo-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card);align-items:stretch}
.page--cols-2 .promo-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.promo-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px 22px;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-rest);transition:var(--t)}
.promo-card:hover{box-shadow:var(--sh)}
.promo-card--dead{opacity:.55}
.promo-card--dead .promo-link{pointer-events:none;filter:grayscale(1)}
@keyframes ykPop{from{opacity:0;transform:scale(.94)}}
@keyframes ykCheck{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.16)}100%{transform:scale(1);opacity:1}}
/* шапка карточки: марка магазина, название, тип предложения */
/* иконки берутся из спрайта в начале разметки */
.page__sprite{display:none}
/* марка сервиса: логотип картинкой, буква видна, если картинки нет */
/* буквенная марка: видна, пока нет логотипа */
/* имя сервиса может занять две строки — шапка держит высоту,
   иначе низ карточки прыгает от длины названия */
.promo-kind{display:flex;align-items:center;gap:10px;min-height:52px;font-size:var(--fs-sub);font-weight:500;color:var(--steel)}
/* тип предложения — подпись, а не второе имя: мельче и тише */
.promo-kind__type{flex:none;font-size:var(--fs-xs);font-weight:500;color:var(--faint)}
.promo-kind__sep{flex:none;font-style:normal;color:var(--faint)}
.promo-brand{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;font-size:var(--fs-body);font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink);transition:var(--t)}
.promo-brand:hover{color:var(--signal)}
/* оффер */
.promo-card__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.promo-offer{margin:0;font-size:var(--fs-lead);font-weight:700;letter-spacing:-.02em;line-height:1.3;text-wrap:pretty}
/* действие и нижняя строка */
.promo-card__act{display:grid;gap:12px;margin-top:auto;padding-top:2px}
.promo-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.promo-expiry{font-size:var(--fs-micro);color:var(--steel)}
.promo-expiry:empty{display:none}
.promo-expiry--soon{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:2px 8px;border-radius:var(--r-ctl);background:var(--signal-soft);color:var(--signal-2);font-weight:500}
.promo-expiry--soon::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.promo-expiry--dead{justify-self:start;padding:2px 7px;border-radius:var(--r-ctl);background:var(--tray);color:var(--steel);font-weight:500}
/* главное действие первого экрана — сплошная кнопка */
.promo-save{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-9px -10px -9px auto;border-radius:var(--r-ctl);color:var(--faint);transition:var(--t)}
/* на десктопе закладка появляется по наведению, чтобы не спорить со ссылкой на сервис */
@media (hover:hover){
.promo-card .promo-save{opacity:0}
.promo-card:hover .promo-save,.promo-card:focus-within .promo-save,.promo-card .promo-save--on{opacity:1}
}
.promo-save:hover{background:var(--mist-2);color:var(--ink)}
.promo-save--on{color:var(--signal)}
.promo-save--on svg{fill:currentColor}
/* ---------- популярные сервисы ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-card)}
.shop-tile{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-rest);transition:var(--t)}
.shop-tile:hover{background:var(--mist-2);color:var(--ink)}
.shop-tile__name{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.shop-tile__caption{font-size:var(--fs-xs);color:var(--steel)}
.shop-tile__best{margin-top:auto;font-size:var(--fs-xs);font-weight:700;color:var(--ok)}
/* ---------- почему выгодно экономить с нами: тёмная плашка ---------- */
.why{position:relative;display:block;gap:28px 44px;align-items:start;padding:clamp(28px,3.6vw,48px);border-radius:var(--r-blk);background:radial-gradient(78% 64% at 12% 4%,rgba(46,180,110,.34),transparent 62%),radial-gradient(66% 54% at 96% 96%,rgba(47,76,140,.32),transparent 66%),var(--dark);color:#fff}
.why__head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:26px 48px;align-items:start}
.why__text{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:16px}
.why__head h2{grid-column:1;grid-row:1;margin:0;line-height:1.22;color:#fff}
.why-mark{display:flex;flex:none;align-items:center;gap:12px;min-height:0;margin:0;padding:0;white-space:nowrap}
.why-mark b{font-family:Unbounded,sans-serif;font-size:var(--fs-num);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ok-dark);font-variant-numeric:tabular-nums}
.why-mark__t{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sub);line-height:1.3;color:#fff}
.why-mark__note{font-size:var(--fs-micro);color:var(--faint)}
.why__head p{margin:0;max-width:56ch;font-size:var(--fs-body);line-height:1.6;color:var(--faint);text-wrap:pretty}
.why__ctl{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0}
.why__ctl-hint{margin-top:4px;font-size:var(--fs-xs);line-height:1.35;color:var(--faint)}
.why__cta{display:inline-flex;align-items:center;gap:10px;min-height:54px;margin-top:32px;padding:0 30px;border-radius:var(--r-ctl);background:var(--signal);color:#fff;font-size:var(--fs-lead);font-weight:700;letter-spacing:-.01em;transition:var(--t)}
.why__cta .icon{stroke:currentColor;transition:var(--t)}
.why__cta:hover{background:var(--signal-2);color:#fff}
.why__cta:hover .icon{transform:translateX(2px)}

/* что можно найти в разделе */

/* напрямую или через Yookey: блок на всю ширину, сервис — мини-карточка */
.why-buy__switch{flex:0 0 auto;display:inline-flex;width:max-content;max-width:100%;gap:4px;padding:4px;border-radius:var(--r-card);background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.why-buy__switch .filter-chip{flex:0 0 auto;gap:8px;min-height:42px;padding:10px 20px;border:0;border-radius:var(--r-mark);background:transparent;font-size:var(--fs-sub);font-weight:700;color:var(--faint);white-space:nowrap}
#whyBuy .why-buy__switch .filter-chip .icon,#whyBuy:not(.why-buy--yookey) .why-buy__switch .filter-chip .icon{stroke:#FFC44D;fill:#FFC44D}
#whyBuy.why-buy--yookey .why-buy__switch .filter-chip--on .icon{stroke:#fff;fill:#fff;filter:none}
.why-buy__switch .filter-chip:hover{background:rgba(255,255,255,.1);color:#fff}
.why-buy__switch .filter-chip--on,.why-buy__switch .filter-chip--on:hover{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.why-buy--yookey .why-buy__switch .filter-chip--on,.why-buy--yookey .why-buy__switch .filter-chip--on:hover{background:var(--brand);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.buy-marquee{display:grid;gap:8px;margin-top:24px}
.buy-marquee__row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
/* дорожку двигает JS: карточка, ушедшая за край, переносится в конец.
   дублей в разметке нет — 12 карточек, 12 ссылок */
.buy-marquee__track{display:flex;align-items:stretch;gap:8px;width:max-content}
.buy-marquee .buy-card{min-height:96px;flex:0 0 clamp(212px,calc((100vw - 2*var(--pad) - 2*clamp(24px,3.4vw,40px) - 25px)/3.5),286px)}
/* карточка держится на просвет: градиенты плашки читаются сквозь неё,
   backdrop-filter отделяет её от фона размытием, а не заливкой */
.buy-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:var(--r-card);background:rgba(255,255,255,.018);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);transition:background .22s var(--e),box-shadow .22s var(--e)}
.buy-card:hover{background:rgba(255,255,255,.07)}
.buy-card__svc{display:flex;align-items:center;gap:10px;min-width:0}
.buy-card__name{display:block;min-width:0}
/* пунктир под именем — тихий признак ссылки, работает и без наведения, и на тач-устройствах */
.buy-card__svc b{text-decoration:underline dotted;text-decoration-color:rgba(255,255,255,.38);text-underline-offset:3px;text-decoration-thickness:1px}
.buy-card:hover .buy-card__svc b{text-decoration-color:rgba(255,255,255,.85)}
.buy-card:hover .buy-card__svc b{color:#fff}
.buy-card__svc b{display:inline;min-width:0;overflow-wrap:anywhere;font-size:var(--fs-body);line-height:1.2;font-weight:700;color:#fff}
/* .shop-mark img[src]:not([data-ph]) выше по специфичности — здесь бьём его точно тем же весом,
   иначе на тёмной плашке под лого остаётся белая подложка var(--paper) с рамкой */
.buy-card__svc .shop-mark:has(img[src]:not([data-ph])){flex:none;width:40px;height:40px;border-radius:var(--r-mark);background:rgba(255,255,255,.15);box-shadow:none;color:#fff}
/* подложка тише некуда: на светлых иконках не читается, тёмным (AdminVPS, Яндекс Директ) даёт кромку */
.buy-card__svc .shop-mark img[src]:not([data-ph]){padding:3px;object-fit:contain;background:transparent;border-radius:var(--r-ctl)}
/* одно значение на карточку: текст подменяет переключатель через data-direct / data-yookey */
.buy-card__val{margin-top:auto;font-size:var(--fs-lead);font-weight:700;letter-spacing:-.015em;color:var(--faint);white-space:nowrap;transition:color .22s var(--e)}
.why-buy--yookey .buy-card__val{color:var(--ok-dark)}
/* уточнение под значением: «на что» — в режиме без промокода пустеет */
.buy-card__note{margin-top:4px;font-size:var(--fs-xs);line-height:1.3;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buy-card__note:empty{margin-top:0}
/* узкие экраны: шапка блока в одну колонку, метка следом за текстом */
@media (max-width:900px){
.why__head{grid-template-columns:minmax(0,1fr);gap:18px}
.why__head h2{grid-column:1;grid-row:auto;max-width:none}
.why__text{grid-column:1;grid-row:auto}
.why__ctl{grid-column:1;grid-row:auto}
.why-buy__switch{width:100%}
/* flex:1 1 auto — ширина по содержимому: «С промокодом yookey» длиннее соседа
   и при делении поровну упиралась текстом в края капсулы */
.why-buy__switch .filter-chip{flex:1 1 auto;min-width:0;justify-content:center;padding:12px 14px;text-align:center}
}
@media (max-width:700px){
.why__cta{width:100%;justify-content:center;padding:0 20px}
}
/* на телефоне блок — витрина: заголовок, метка, одна лента, кнопка.
   абзац сворачиваем до трёх строк, вторую ленту убираем совсем */
@media (max-width:700px){
.buy-marquee{margin-top:24px}
}
/* ---------- как пользоваться купоном и вопросы: один блок ---------- */
.help{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px 56px;align-items:start;background:var(--paper);border-radius:var(--r-blk);padding:clamp(20px,3vw,34px)}
.help h2{margin:0;font-size:var(--fs-h2)}
.help__lead{margin:12px 0 16px;max-width:52ch;font-size:var(--fs-body);line-height:1.55;color:var(--steel);text-wrap:pretty}
@media (max-width:900px){
.help{grid-template-columns:minmax(0,1fr);gap:40px}
}
.help__how .how-steps{display:grid;gap:12px;counter-reset:how}
.how-step{counter-increment:how;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:12px;align-items:start;padding:16px;border-radius:var(--r-card);background:var(--mist-2)}
.how-step::before{content:counter(how);grid-row:1/span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums}
/* заголовок шага — ступень над текстом шага, иначе читается как обычный абзац */
.how-step__heading{grid-column:2;margin:0 0 4px;font-size:var(--fs-lead);font-weight:700;line-height:1.3}
.how-step p{grid-column:2;margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--steel);text-wrap:pretty}
.how-step p a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--faint)}
.how-step p a:hover{color:var(--signal);border-color:var(--signal)}
/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;align-items:center;gap:16px;min-height:44px;padding:16px 0;font-size:var(--fs-lead);font-weight:600;cursor:pointer;list-style:none;transition:var(--t)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--signal)}
.faq__mark{margin-left:auto;font-size:var(--fs-xl);color:var(--steel);transition:var(--t)}
.faq details[open] .faq__mark{transform:rotate(45deg)}
.faq p{margin:0 0 16px;max-width:76ch;font-size:var(--fs-body);color:var(--ink-70)}
.faq p a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--faint)}
.faq p a:hover{color:var(--signal);border-color:var(--signal)}
/* ---------- мегаменю ---------- */
/* закрытое мегаменю не растягивает раскладку по ширине */
.nav__item:not(.nav__item--open) .mega-menu{contain:paint}
.mega-menu .mega-menu__heading,.mega-menu .mega-menu__heading{margin:0 0 12px;font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:500}
.mega-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-menu ul a{display:flex;align-items:center;gap:8px;padding:9px 10px;margin:0 -10px;border-radius:var(--r-ctl);font-size:var(--fs-body);color:var(--ink);transition:var(--t)}
.mega-menu ul a:hover{background:var(--mist-2);color:var(--ink)}
.mega-menu__all{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700}
.mega-menu__all .icon{stroke:var(--steel)}
.mega-menu__all:hover .icon{stroke:var(--signal)}
.mega-menu__store{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--paper);font-size:var(--fs-xs);font-weight:700;color:var(--ink);white-space:nowrap;transition:var(--t)}
.mega-menu__store:hover{border-color:var(--signal-line);background:var(--signal-soft);color:var(--signal)}
.mega-menu__store-name{font-size:var(--fs-xs);font-weight:700;color:inherit}
.mega-menu__store .icon{stroke:var(--faint)}
.mega-menu__store:hover .icon{stroke:var(--signal);transform:translate(1px,-1px)}
.mega-menu__strip{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.mega-menu--p{display:grid;grid-template-columns:280px 320px;grid-template-rows:minmax(0,1fr) auto;gap:14px 26px;width:max-content;max-width:calc(100vw - 40px);height:min(68vh,480px);overflow:hidden}
.mega-menu--p .mega-menu__column{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.mega-menu--p .mega-menu__column>.mega-menu__heading{flex:none}
.mega-menu--p .mega-menu__column>.mega-menu__all{flex:none;margin-top:16px;padding-top:13px;border-top:1px solid var(--line-2);font-size:var(--fs-sub);transition:var(--t)}
.mega-menu--p .mega-menu__column>.mega-menu__all:hover{color:var(--signal)}
.mega-menu--p .mega-menu__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:12px;scrollbar-gutter:stable}
.mega-menu--p .mega-menu__scroll::-webkit-scrollbar{width:6px}
.mega-menu--p .mega-menu__scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-xs)}
.mega-menu--p .mega-menu__column--stores{padding-left:26px;margin-left:-13px}
.mega-menu--p .mega-menu__strip{margin-top:0;padding-top:14px;border-top:1px solid var(--line-2);flex:none}
.mega-menu--p .mega-menu__list>li>a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;margin:0;border-radius:var(--r-ctl);font-size:var(--fs-sub);font-weight:400;color:var(--ink);transition:var(--t)}
.mega-menu__categories{display:grid;gap:2px}
.mega-menu__category{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--r-ctl);font-size:var(--fs-body);font-weight:500;color:var(--ink);transition:var(--t)}
.mega-menu__category:hover,.mega-category--on{background:var(--mist-2);color:var(--ink)}
.mega-menu__group{display:none}
.mega-menu__group--on{display:block;animation:ykPop .18s var(--e)}
.mega-menu__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-menu__group-stores{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mega-menu__group-stores--top{margin-top:8px}
.mega-menu--s{width:max-content;max-width:calc(100vw - 40px)}
.mega-menu__row{display:grid;grid-template-columns:1fr 1fr;gap:1px 14px}
.mega-menu__row a{padding:9px 10px;margin:0 -10px;border-radius:var(--r-ctl);font-size:var(--fs-body);color:var(--ink);white-space:nowrap;transition:var(--t)}
.mega-menu__row a:hover{background:var(--mist-2);color:var(--ink)}
.mega-menu.mega-menu--dir{display:grid;gap:2px;width:max-content;min-width:180px;margin-top:12px;left:-20px;padding:4px;overflow:visible;transform:translate(0,-8px)}
.direction-switch--open .mega-menu.mega-menu--dir{transform:translate(0,0)}
.mega-menu.mega-menu--dir a{display:block;padding:8px 10px;border-radius:var(--r-mark);font-family:Unbounded,sans-serif;font-size:var(--fs-lead);font-weight:400;letter-spacing:-.03em;white-space:nowrap;color:var(--steel);transition:var(--t)}
.mega-menu--dir a:hover{background:var(--mist-2);color:var(--ink)}
.only-mobile{display:none}
/* ---------- футер ---------- */
.footer{position:relative;padding:56px 0 0;background:var(--dark);color:#fff;border-radius:30px 30px 0 0;overflow:hidden}
.footer>.container{display:flex;flex-direction:column}
.footer__heading{margin:0 0 16px;font-size:var(--fs-micro);letter-spacing:.09em;text-transform:lowercase;color:var(--steel);font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer li{display:flex;align-items:center;gap:8px}
.footer a{font-size:var(--fs-sub);color:var(--faint);transition:var(--t)}
.footer a:hover{color:#fff}
.footer__wm{order:6;position:relative;z-index:1;margin:24px 0 -96px;display:flex;justify-content:center;pointer-events:none}
.footer__wm svg{width:100%;height:auto}
.footer__top{order:1;position:relative;z-index:2;padding-bottom:28px}
@media (max-width:700px){.footer__top{padding-bottom:12px}}
/* текст заходит на водяной знак и набран приглушённым белым */
.footer__about p{margin:0;max-width:860px;font-size:max(14px,var(--fs-xs));line-height:1.6;color:var(--on-dark-2)}
.footer__cols{order:2;position:relative;z-index:2;display:grid;grid-template-columns:2.4fr 1fr 1fr 1fr;gap:28px 48px;padding-top:32px}
.footer-column summary{list-style:none;cursor:default}
.footer-column summary::-webkit-details-marker{display:none}
.footer-column__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(9,auto);gap:10px 24px}
.footer-column__all{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:var(--fs-sub);font-weight:600;color:#fff}
.footer-column__all .icon{stroke:var(--signal)}
.footer__pair{order:4;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 28px;margin-top:32px}
.footer__row{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:var(--fs-sub);white-space:nowrap}
.footer__bot{order:7;position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:24px;padding:20px 0 24px;font-size:var(--fs-xs);color:var(--faint)}
.footer__bot a{font-size:var(--fs-xs)}
.footer__cp{margin-left:auto}
/* самый мелкий текст страницы, но не мельче 13px */
.footer__dis{order:8;position:relative;z-index:2;padding-bottom:16px;font-size:max(13px,var(--fs-micro));line-height:1.6;color:var(--steel)}
/* ---------- выдвижная панель сохранённых ---------- */
/* закрытое состояние держит модификатор, а не атрибут hidden */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none;transition:visibility .26s linear}
.drawer--on{visibility:visible;pointer-events:auto;transition:visibility 0s}
.drawer__overlay{position:absolute;inset:0;background:rgba(16,18,24,.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .24s var(--e)}
.drawer--on .drawer__overlay{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);display:flex;flex-direction:column;background:var(--paper);box-shadow:-24px 0 60px -30px rgba(16,18,24,.4);transform:translateX(100%);transition:transform .26s var(--e)}
.drawer--on .drawer__panel{transform:none}
.drawer__top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer__top b{display:flex;align-items:center;gap:10px;font-size:var(--fs-lead);font-weight:700;letter-spacing:-.02em}
.drawer__count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:700}
.drawer__close{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border-radius:var(--r-ctl);color:var(--steel);transition:var(--t)}
.drawer__close:hover{background:var(--mist-2);color:var(--ink)}
.drawer__close svg{stroke:currentColor;fill:none}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 20px}
.drawer__empty{margin:24px 0 0;font-size:var(--fs-sub);line-height:1.6;color:var(--steel);text-wrap:pretty}
.drawer__foot{flex:none;padding:14px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.drawer__share{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--paper);font-size:var(--fs-sub);font-weight:600;color:var(--ink);transition:var(--t)}
.drawer__share:hover{border-color:var(--ink)}
.drawer__share svg{stroke:currentColor;fill:none}
.fav-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.fav-item:last-child{border-bottom:0}
.fav-item__value{align-self:start;min-width:54px;padding-top:1px;font-size:var(--fs-xl);font-weight:700;letter-spacing:-.03em;color:var(--signal);white-space:nowrap;font-variant-numeric:tabular-nums}
.fav-item__title{display:block;font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--ink);text-wrap:pretty;transition:var(--t)}
.fav-item__title:hover{color:var(--signal)}
.fav-item__expiry{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--steel)}
.fav-item__actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.fav-item__code{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-mark);background:var(--paper);font-size:var(--fs-sub);font-weight:700;color:var(--ink);white-space:nowrap;transition:var(--t)}
.fav-item__code:hover{border-color:var(--ink)}
.fav-item__delete{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;margin-right:-10px;border-radius:var(--r-ctl);color:var(--faint);transition:var(--t)}
.fav-item__delete:hover{background:var(--mist-2);color:var(--signal)}
.fav-item__delete svg{stroke:currentColor;fill:none}
/* ---------- тост и кнопка «наверх» ---------- */
/* тост держит одну строку и не меняет высоту между сообщениями:
   «Предложение сохранено» и «Убрали из сохранённых» — разной длины */
.toast{position:fixed;left:50%;bottom:clamp(20px,3vw,32px);z-index:var(--z-toast);display:flex;align-items:center;gap:10px;min-height:48px;max-width:calc(100vw - 24px);padding:0 20px;border-radius:var(--r-pill);background:var(--ok);color:#fff;font-size:var(--fs-sub);font-weight:600;white-space:nowrap;box-shadow:var(--sh2);opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:var(--t)}
#toastT{overflow:hidden;text-overflow:ellipsis}
.toast--on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast svg{stroke:#fff}
.toast__a{margin-left:4px;padding:0;background:none;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* пока виден тост, кнопка «наверх» поднимается над ним */
.page--toast .to-top{bottom:calc(clamp(20px,3vw,32px) + 58px)}
.to-top{position:fixed;right:var(--pad);bottom:clamp(20px,3vw,32px);z-index:var(--z-top);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh2);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--t)}
.to-top--on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.to-top svg{stroke:currentColor}
/* ---------- счётчик сохранённых ---------- */
@keyframes ykBump{0%,100%{transform:scale(1)}40%{transform:scale(1.28)}}
.service-compare__n--bump{animation:ykBump .3s var(--e)}
/* ---------- служебное ---------- */
.nav__anchor,.page__end{display:none}
/* ---------- крошки перед футером ---------- */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0 32px;font-size:var(--fs-xs);color:var(--steel)}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs__sep{color:var(--faint)}
/* ---------- адаптив ---------- */
@media (max-width:1180px){
.mega-menu--p{grid-template-columns:minmax(0,1fr) 260px;width:min(720px,calc(100vw - 40px))}
.mega-menu{max-height:calc(100vh - 96px);overflow:auto;overscroll-behavior:contain}
}
@media (max-width:1180px){
.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1180px){
.promo-list,.page--cols-2 .promo-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
.footer__pair{grid-template-columns:minmax(0,1fr);gap:22px}
.footer__row{flex-wrap:wrap}
}
@media (max-width:900px){
/* шапка на телефоне не залипает — рельса держится у верхнего края */
.tabs__row{top:0}
.promo-card .promo-save{opacity:1}
.footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.footer-column--wide{grid-column:span 2}
/* меню и переключатель направления переезжают в шторку */
.nav-mobile .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;width:100%;font-size:inherit}
.nav-mobile .nav__item{position:static}
.nav-mobile .nav__item .nav__link{justify-content:space-between;padding:17px 0;font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;color:var(--ink);border-bottom:1px solid var(--line-2)}
.nav-mobile .nav__item--open>.nav__link{border-bottom-color:transparent}
.nav-mobile .nav__link .chevron{width:11px;height:7px;color:var(--steel)}
.nav-mobile .nav__item .mega-menu{position:static;display:none;width:auto;min-width:0;max-width:none;height:auto;max-height:none;margin:0;padding:0 0 14px;border-radius:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;overflow:visible;border-bottom:1px solid var(--line-2)}
.nav-mobile .nav__item .nav__item--open .mega-menu,
.nav-mobile .nav__item--open .mega-menu{display:block}
.nav-mobile .mega-menu .mega-menu__heading{margin:16px 0 8px}
.nav-mobile .mega-menu--p .mega-menu__column{display:block;min-height:0;padding:0;margin:0}
.nav-mobile .mega-menu--p .mega-menu__column--stores{padding-left:0;margin-left:0}
.nav-mobile .mega-menu__scroll{max-height:none;overflow:visible;padding-right:0}
.nav-mobile .mega-menu__category,.nav-mobile .mega-menu--p .mega-menu__list>li>a,.nav-mobile .mega-menu__row a{min-height:44px;align-items:center;font-size:var(--fs-lead)}
.nav-mobile .mega-menu__row{grid-template-columns:1fr;gap:0}
.nav-mobile .mega-menu__row a{display:flex;white-space:normal}
.nav-mobile .mega-menu__store{min-height:40px;padding:0 14px}
.nav-mobile .only-mobile{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line-2);font-size:var(--fs-sub)}
}
@media (max-width:900px){
.footer{padding-top:32px}
/* текст о проекте слегка заходит на водяной знак */
.footer__wm{order:0;position:static;margin:0 calc(-50vw + 50%) -16px;width:auto}
.footer__cols{grid-template-columns:minmax(0,1fr);gap:0;padding-top:8px}
.footer-column--wide{grid-column:auto}
.footer-column__g{grid-template-rows:none;grid-auto-flow:row}
.footer-column ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;padding-bottom:4px}
.footer-column li{min-height:40px}
.footer-column li a{flex:1;padding:8px 0;font-size:var(--fs-body)}
.footer-column summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 0;cursor:pointer}
/* пункты меню — обычный читаемый текст, а не микроподпись */
.footer-column summary .footer__heading{font-size:var(--fs-body);letter-spacing:0;text-transform:none;color:#fff;font-weight:500}
.footer-column summary .footer__heading{margin:0}
.footer-column summary::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:translateY(-2px) rotate(45deg);transition:var(--t)}
.footer-column[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.footer-column__all{margin:4px 0 6px;min-height:44px}
.footer__bot{margin-top:24px}
.footer__dis{padding-bottom:14px}
}
@media (max-width:700px){
.promo-list,.page--cols-2 .promo-list{grid-template-columns:minmax(0,1fr)}
.why{margin:0 calc(var(--pad)*-1);padding:32px var(--pad);border-radius:var(--r-blk)}
.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
.tabs__row{flex-wrap:wrap}
.filters-row__n{display:none}
.filters-row__tools{margin-left:0;width:100%;justify-content:space-between;gap:10px}
.tabs__row .picker{flex:none}
section{padding-top:50px}
.promo-card{padding:16px}
/* крошки стоят между последней секцией и подвалом — им нужен воздух с обеих сторон */
.breadcrumbs{margin:32px 0 40px}
}
@media (max-width:480px){
.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.buy-marquee__track{animation:none!important;transform:none}
.buy-marquee__row{overflow-x:auto}
}
/* ---------- «если скидка не применилась»: причина и выход ---------- */
.fix{margin-top:24px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
/* причины разделены линией: иначе три абзаца со ссылками сливаются в один */
.fix__list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.fix__item{font-size:var(--fs-body);line-height:1.55;color:var(--steel)}
.fix__item+.fix__item{padding-top:16px;border-top:1px solid var(--line-2)}
/* три уровня: причина крупнее текста, действие тем же кеглем, но цветом и весом */
.fix__item b{display:block;margin-bottom:4px;font-size:var(--fs-lead);font-weight:700;color:var(--ink)}
/* действие всегда с новой строки, иначе оно тонет в конце абзаца */
/* действие всегда отдельной строкой, а не хвостом абзаца */
.fix__act{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:8px;font-size:var(--fs-body);font-weight:700;color:var(--signal)}
.fix__act .icon{stroke:currentColor;fill:none;transition:var(--t)}
.fix__act:hover .icon{transform:translateX(2px)}
/* ---------- мобильные доводки ---------- */
@media (max-width:700px){
/* подборки: на телефоне вертикальный список из десяти чипсов занимал экран целиком —
     возвращаем горизонтальную прокрутку в два ряда */
.collections .scroller__inner{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,auto));
    grid-auto-columns:max-content;justify-content:start;overflow-x:auto;scrollbar-width:none;gap:8px}
.collections .scroller__inner::-webkit-scrollbar{display:none}
.collections .compare-row__h{margin-bottom:16px}
/* стрелки скроллера на тач-экране только мешают: перекрывают чипсы, а листают пальцем */
.scroller__btn{display:none}
/* «Промокоды по категориям» → чипсы → счётчик и фильтры одним блоком */
.tabs__row{padding:10px 0 6px}
.filters-row{padding:10px 0 0}
}
@media (max-width:700px){
/* на узком экране плашка внутри плашки съедала ширину: снимаем поля и обводку,
     блок живёт прямо в контентной области белого блока помощи */
.fix{margin-top:24px;padding:0;border:0;background:none;border-radius:0}
}
@media (max-width:700px){
/* «99%» слева, обе строки подписи — напротив него, а не под ним */
/* число и подпись строго рядом: перенос запрещён, число не сжимается */
/* сетка вместо флекса: две колонки гарантируют, что число и подпись рядом */
.why-mark{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;width:100%;white-space:normal}
.why-mark b{font-size:clamp(26px,7vw,30px)}
.why-mark__t{flex-direction:column;gap:2px;min-width:0}
}
@media (max-width:480px){
/* на самых узких экранах подписи тумблера не влезают даже по содержимому */
.why-buy__switch .filter-chip{gap:6px;padding:12px 10px;font-size:var(--fs-xs)}
}
/* ---------- мобильные доводки шапки и меню ---------- */
@media (max-width:700px){
  /* кнопка в карточке дотягивается до пальцевого размера */
  .promo-link.promo-link{min-height:50px}
  .mega-menu__store{min-height:44px}

  /* выпадашка направления: на телефоне 24px полей вокруг двух пунктов — перебор */
  .mega-menu.mega-menu--dir{min-width:0;margin-top:8px;padding:4px}
  .mega-menu.mega-menu--dir a{padding:10px 12px}


  /* тост на узком экране: одна строка, но с местом под самое длинное сообщение */
  .toast{left:12px;right:12px;transform:translate(0,16px);max-width:none;justify-content:center;padding:0 16px}
  .toast--on{transform:translate(0,0)}
}

@media (max-width:700px){
  /* на телефоне растушёвка съедала треть ширины ряда */
  /* на телефоне растушёвка мешала понять, что ряд листается:
   ряд выходит за поля контейнера и обрезается краем экрана */
.scroller--right::after,.scroller--left::before{display:none}
/* ряд выходит за поля контейнера и обрезается краем экрана; селектор перечислен
   вместе с --right/--left, иначе они перебивают паддинг своей специфичностью */
/* ряд выходит за поля контейнера и обрезается краем экрана.
   .tabs__row .scroller__inner весит два класса и обнуляет боковые поля,
   поэтому перечисляем селекторы того же веса — иначе строка липнет к краю,
   когда прокрутки нет и JS ещё не повесил --right/--left */
.scroller .scroller__inner,
.tabs__row .scroller__inner,
.scroller--right .scroller__inner,
.scroller--left .scroller__inner{margin:0 calc(var(--pad)*-1);padding:3px var(--pad);scroll-padding-left:var(--pad)}
/* растушёвка — отдельный элемент в разметке, а не псевдоэлемент */
.scroller__fade{display:none}

  /* поля «Выгода» и «Сортировка» делят строку поровну и не меняют ширину
     от длины выбранного значения — оно обрезается многоточием */
  .filters-row__tools .picker{flex:1 1 0;min-width:0}
  .filters-row__tools .picker__button{width:100%;justify-content:space-between;padding:9px 12px}
  .filters-row__tools .picker__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .filters-row__tools .picker__label{flex:none}
  .filters-row__tools .picker__button .icon{flex:none}

  /* меню пикера прижималось правым краем к кнопке и уезжало за левый край экрана */
  .picker__menu{width:min(224px,calc(100vw - 24px))}
  .filters-row__tools .picker:first-child .picker__menu{left:0;right:auto}
}

/* ---------- мобильная типографика ----------
   на телефоне вся проза поднимается на ступень: основной текст 16,
   вспомогательный 15, подписи в одно-два слова 13.5 и 12 */
@media (max-width:700px){
  /* проза не мельче 16; 14 и 13 остаются подсказкам и уточнениям */
:root{--fs-xl:19px;--fs-lead:17px;--fs-body:16px;--fs-sub:16px;--fs-xs:14px;--fs-micro:13px}
}

@media (max-width:700px){
  /* лента едет сама, но палец её перехватывает: touch-action оставляет
     вертикальную прокрутку странице, горизонталь забирает скрипт */
  .buy-marquee__row{touch-action:pan-y;mask-image:none;-webkit-mask-image:none}
  .buy-marquee__track{cursor:grab}
  .buy-marquee__row--drag .buy-marquee__track{cursor:grabbing}
}

/* ---------- бургер: диапазон правок совпадает с диапазоном самого бургера ---------- */
@media (max-width:900px){
  /* overflow-y:auto превращает overflow-x в auto, и широкий потомок
     открывает горизонтальную прокрутку — панель уезжает вбок */
  .nav-mobile__b{overflow-x:hidden}
  .nav-mobile .mega-menu{left:auto;right:auto;top:auto}
  .nav-mobile .mega-menu,.nav-mobile .mega-menu *{max-width:100%;min-width:0}
  .nav-mobile .mega-menu__category,
  .nav-mobile .mega-menu__list>li>a,
  .nav-mobile .mega-menu__row a{white-space:normal;margin:0;padding:12px 10px}
  .nav-mobile .mega-menu ul a{margin:0}
  .nav-mobile .mega-menu__strip,
  .nav-mobile .mega-menu__group-stores{flex-wrap:wrap;max-width:100%}
}

/* ---------- блок «дешевле» на телефоне: воздух и ритм ---------- */
@media (max-width:700px){
  /* шапка блока дышит: заголовок → текст → метка → переключатель */
  .why__head{gap:24px}
  .why__text{gap:20px}
  .why__ctl-hint{margin-top:10px}

  /* ленты отодвинуты от переключателя и разведены между собой */
  .buy-marquee{margin-top:28px;gap:12px}

  /* внутри карточки два уровня: сервис отдельно, значение с уточнением вместе */
  .buy-marquee .buy-card{min-height:0;padding:16px;gap:0}
  .buy-card__svc{gap:12px}
  .buy-card__val{margin-top:16px}
  .buy-card__note{margin-top:4px}

  /* карточка по ширине содержимого: справа не остаётся пустоты,
     а обрезанный край следующей подсказывает, что ряд листается */
  .buy-marquee .buy-card{flex:0 0 auto;width:max-content;min-width:196px;max-width:calc(100vw - 3*var(--pad))}
}

/* ---------- «если скидка не применилась»: правая колонка инструкции ---------- */
.help__fix{min-width:0}
.fix{margin:0;padding:0;border:0;background:none}
.fix__h{margin:0 0 6px;font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.fix__lead{margin:0 0 20px;font-size:var(--fs-sub);line-height:1.55;color:var(--steel)}
.fix__list{list-style:none;margin:0;padding:0;display:grid;gap:24px}
/* причина: кружок с крестиком, заголовок, пояснение, действие */
.fix__item{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px 12px;padding:0;border:0;font-size:inherit;color:inherit}
.fix__item+.fix__item{padding-top:0;border-top:0}
.fix__ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--signal);color:#fff}
.fix__ic .icon{stroke:currentColor;fill:none;top:0}
.fix__body{min-width:0}
.fix__t{display:block;margin:2px 0 6px;font-size:var(--fs-lead);font-weight:700;line-height:1.3;color:var(--ink)}
.fix__p{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--steel)}
.fix__act{display:inline-flex;width:fit-content;align-items:center;gap:6px;margin-top:10px;font-size:var(--fs-body);font-weight:700;color:var(--signal)}
.fix__act .icon{stroke:currentColor;fill:none;transition:var(--t)}
.fix__act:hover{color:var(--signal-2)}
.fix__act:hover .icon{transform:translateX(2px)}

/* ---------- FAQ отдельной секцией ---------- */
.faq-panel{padding:clamp(20px,3vw,34px);background:var(--paper);border-radius:var(--r-blk)}
.faq-panel .faq{max-width:none}


/* ---------- на узких экранах карточка внутри плашки лишняя ----------
   поля плашки и поля карточки складывались, съедая ширину строки; убираем
   подложку и поля, разделение оставляем на расстоянии */
@media (max-width:900px){
  .help__how .how-step,
  .how-steps--cols .how-step,
  .fix__list--cols .fix__item{padding:0;border-radius:0;background:none}
  .help__how .how-steps,
  .how-steps--cols,
  .fix__list--cols{gap:24px}
}

/* ---------- служебные страницы: сотрудничество ----------
   собрано на существующих компонентах; своего здесь только карточка формата
   и строка контакта */
.coop-card{display:flex;flex-direction:column;gap:10px}
.coop-card__tag{display:inline-flex;align-items:center;align-self:flex-start;min-height:24px;padding:2px 10px;
  border-radius:var(--r-pill);background:var(--signal-soft);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.02em;color:var(--signal)}
.coop-card--ad .coop-card__tag{background:var(--brand-soft);color:var(--brand)}
.coop-card__h{margin:0;font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.coop-card__p{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--steel);text-wrap:pretty}
.coop-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.coop-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;
  font-size:var(--fs-body);line-height:1.55;color:var(--steel)}
.coop-list .icon{margin-top:4px;stroke:var(--ok);fill:none}
/* контактная строка внизу страницы: одна плашка, одно действие */
.coop-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.coop-cta__t{margin:0;font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em}
.coop-cta__p{margin:6px 0 0;font-size:var(--fs-body);line-height:1.55;color:var(--steel);max-width:60ch}
.coop-cta__act{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;
  border-radius:var(--r-ctl);background:var(--tray);font-size:var(--fs-body);font-weight:700;color:var(--ink);
  transition:var(--t)}
.coop-cta__act:hover{background:var(--tray-2);color:var(--ink)}
.coop-mail{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.coop-mail:hover{color:var(--signal)}
@media (max-width:700px){
  .coop-cta{flex-direction:column;align-items:stretch}
  .coop-cta__act{justify-content:center}
}

/* ---------- мини-макеты в инструкции ----------
   не скриншоты, а живые кусочки интерфейса: не устареют при редизайне
   и весят ноль, в отличие от картинок */
.demo{margin-top:14px;padding:14px;border-radius:var(--r-card);background:var(--mist-2)}
.demo__cap{display:block;margin-top:10px;font-size:var(--fs-micro);line-height:1.4;color:var(--faint)}
.demo .promo-code{pointer-events:none;max-width:300px}
.demo-field{display:flex;align-items:center;gap:8px}
.demo-field__in{flex:1 1 auto;display:flex;align-items:center;min-height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--paper);
  font-size:var(--fs-sub);font-weight:700;letter-spacing:.06em;color:var(--ink)}
.demo-field__in span{animation:ykBlink 1.6s steps(1,end) infinite}
@keyframes ykBlink{0%,50%{opacity:1}51%,100%{opacity:.25}}
.demo-field__btn{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
  border-radius:var(--r-ctl);background:var(--ink);color:#fff;font-size:var(--fs-micro);font-weight:700}
/* выбор срока в первом шаге */
.demo-opt{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);
  border-radius:var(--r-ctl);background:var(--paper);font-size:var(--fs-sub);font-weight:700;color:var(--steel)}
.demo-opt--on{border-color:var(--signal-line);background:var(--signal-soft);color:var(--signal)}
.demo-total{display:grid;gap:7px;font-size:var(--fs-sub)}
.demo-total__r{display:flex;justify-content:space-between;gap:12px;color:var(--steel)}
.demo-total__r--off{color:var(--ok);font-weight:700}
.demo-total__r--sum{padding-top:8px;border-top:1px solid var(--line);
  font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.demo-total__old{color:var(--faint);text-decoration:line-through}
/* ---------- шаги вне блока «Как применить» ----------
   сетка, зазор и обнуление счётчика жили только в .help__how — на служебных
   страницах шаги оказывались без них: слипались и продолжали чужую нумерацию */
.how-steps{display:grid;gap:var(--gap-card);counter-reset:how}
.how-steps--cols{grid-template-columns:repeat(2,minmax(0,1fr))}
/* на узком экране две колонки шагов не помещаются: карточка сжимается до
   ширины, на которой мини-макет с полем ввода уже не читается */
@media (max-width:900px){
  .how-steps--cols{grid-template-columns:minmax(0,1fr)}
  /* макет разворачиваем на обе колонки: сдвиг под номер съедал 38px,
     а поле ввода и строка итога и без того упираются в края */
  .how-step>.demo{grid-column:1/-1}
}
/* у шага две колонки: номер и текст. третий элемент (мини-макет) без явной
   колонки уезжал под номер, ломая выравнивание */
.how-step::before{grid-row:1/-1}
.how-step>h3,.how-step>p,.how-step>.demo{grid-column:2}
/* макеты выравниваются по нижнему краю: абзацы разной длины иначе
   расставляют их по разной высоте и ряд выглядит рваным */
.how-step{grid-template-rows:auto 1fr auto}
.how-step>.demo{align-self:end}

/* смысловая часть внутри общей плашки: отделяем расстоянием, без линии */
.panel__h{margin:0 0 6px;scroll-margin-top:calc(var(--header-h) + 16px);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em}
.how-steps+.panel__h{margin-top:34px}
/* нижний отступ снимаем только у лида, который реально последний в плашке */
.panel>.panel__lead:last-child{margin-bottom:0}
.panel__lead+.panel__lead{margin-top:0}
.panel__lead{margin:0 0 18px;font-size:var(--fs-body);line-height:1.55;color:var(--steel);max-width:70ch}
/* на телефоне интерфейсные примеры ужимаем, а не переносим: перенос
   разрывает связку «поле — кнопка», ради которой макет и нужен */
@media (max-width:700px){
  .demo{padding:12px}
  .demo-field{flex-wrap:nowrap;gap:6px}
  .demo-field__in,.demo-field__btn,.demo-opt{min-height:36px;font-size:var(--fs-micro);padding:0 10px}
  .demo-field__in{letter-spacing:.04em}
  .demo .promo-code{max-width:100%}
  .demo .promo-code__tail{min-height:42px;font-size:var(--fs-micro)}
  .demo .promo-code__btn{right:46px;padding:0 12px;font-size:var(--fs-micro)}
  .demo-total{font-size:var(--fs-micro)}
  .demo-total__r--sum{font-size:var(--fs-sub)}
  .demo__cap{margin-top:8px}
}

/* ---------- оглавление инструкции ----------
   якоря на первом экране: за одним пунктом приходят чаще, чем за всей страницей */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
/* якорь не должен уезжать под фиксированную шапку */
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---------- развилка в конце инструкции ---------- */
.forks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card)}
/* ряд категорий живёт в той же плашке, что и варианты: отделяем расстоянием */
.forks+.compare-row{margin-top:26px}
.fork{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:var(--r-card);background:var(--mist-2)}
.fork__h{margin:0;font-size:var(--fs-lead);font-weight:700;line-height:1.3}
.fork__p{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--steel)}
.fork__act{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-top:4px;
  font-size:var(--fs-body);font-weight:700;color:var(--signal)}
.fork__act .icon{stroke:currentColor;fill:none;transition:var(--t)}
.fork__act:hover .icon{transform:translateX(2px)}
/* ссылка после абзацев внутри плашки — своя отбивка */
.fork__act--gap{margin-top:18px}
@media (max-width:1000px){
  .forks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* та же логика, что у шагов и чек-листа: на телефоне поля плашки и карточки
   складывались, поэтому подложку снимаем, разделяем расстоянием */
@media (max-width:900px){
  .forks{gap:24px}
  .fork{padding:0;border-radius:0;background:none}
}
@media (max-width:700px){
  .forks{grid-template-columns:minmax(0,1fr)}
}

/* ---------- строка «что делать» внутри шага ----------
   диагностика: сначала описание причины, затем действие — его отделяем
   и цветом, и подложкой, чтобы взгляд находил его без чтения абзаца */
/* .how-step p обнуляет margin — поэтому отступ задаём тем же весом.
   размер как у основного текста: это ответ на вопрос страницы, а не сноска */
.how-step .how-step__act{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-card);
  background:var(--ok-soft);font-size:var(--fs-body);line-height:1.55;color:var(--ok)}
/* плашка прижата к низу карточки: причины разной длины, иначе ряд рваный.
   колонка всегда вторая — по вертикали текста, чтобы читалось как часть
   этого пункта, а не как отдельный блок под ним */
.how-step>.how-step__act{grid-column:2;align-self:end}

/* компактный список без карточек: там, где хватает пары строк на пункт.
   размеры те же, что у пункта чек-листа, — это его облегчённая версия */
.mini-list{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.mini-list li{font-size:var(--fs-body);line-height:1.55;color:var(--steel);text-wrap:pretty}
.mini-list b{display:block;margin:2px 0 6px;font-size:var(--fs-lead);font-weight:700;
  line-height:1.3;color:var(--ink)}
@media (min-width:701px){
  .mini-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}
}

/* ---------- кто проверяет: подпись редакции ----------
   лицо и должность рядом с процедурой — то, чем страница доверия
   отличается от страницы с обещаниями */
.editor{display:flex;align-items:center;gap:16px}
.editor__ph{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px var(--line)}
.editor__n{margin:0;font-size:var(--fs-lead);font-weight:700;line-height:1.3;color:var(--ink)}
.editor__r{margin:2px 0 0;font-size:var(--fs-sub);line-height:1.4;color:var(--steel)}
.editor__q{margin:16px 0 0;padding:0 0 0 16px;border-left:2px solid var(--signal-line);
  font-size:var(--fs-lead);line-height:1.5;color:var(--ink);text-wrap:pretty}
.editor__p{margin:14px 0 0;font-size:var(--fs-body);line-height:1.55;color:var(--steel);max-width:70ch}
@media (max-width:520px){
  .editor{gap:14px}
  .editor__ph{width:56px;height:56px}
}

/* ---------- первый экран страницы о проекте ----------
   лендинговая раскладка: текст по центру, по краям плитки-иллюстрации.
   до 1100px плитки уходят под текст обычной сеткой */
.lp{display:grid;gap:22px;align-items:center;grid-template-columns:minmax(0,1fr)}
.lp__c{text-align:center;max-width:60ch;margin-inline:auto}
.lp__c .toc{justify-content:center;margin-top:24px}
.lp__h{margin:0;font-size:var(--fs-h1);font-weight:600;letter-spacing:-.04em;line-height:1.08}
.lp__sub{margin:14px 0 0;font-size:var(--fs-lead);line-height:1.5;color:var(--steel);text-wrap:pretty}
.lp__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;justify-items:center}
.lp__list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;text-align:left;justify-self:center;
  max-width:46ch;font-size:var(--fs-body);line-height:1.5;color:var(--ink-70)}
.lp__list .icon{margin-top:4px;stroke:var(--ok);fill:none}
.lp__side{display:grid;gap:var(--gap-card);grid-template-columns:repeat(2,minmax(0,1fr))}
.lp__tile{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r-card);
  background:var(--paper);box-shadow:var(--sh-rest)}
.lp__tile b{font-family:Unbounded,sans-serif;font-size:var(--fs-lead);font-weight:600;
  letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.lp__tile span{font-size:var(--fs-sub);line-height:1.45;color:var(--steel)}
@media (min-width:1100px){
  .lp{grid-template-columns:210px minmax(0,1fr) 210px;gap:32px}
  .lp__side{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .lp__side{grid-template-columns:minmax(0,1fr)}
}

/* цитата в тёмной плашке: прямая речь крупнее и белым, подпись — ниже отдельным блоком.
   :last-child здесь бы перекрасил саму цитату, когда абзац в блоке один */
.why__text>p{font-size:var(--fs-lead);line-height:1.5;color:#fff}
/* подпись под цитатой: лицо рядом с именем */
.why__by{display:flex;align-items:center;gap:12px}
.why__ph{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.why__by span{display:flex;flex-direction:column;gap:1px;font-size:var(--fs-sub);
  line-height:1.35;color:var(--faint)}
.why__by b{font-weight:700;color:#fff}
/* сноска под чек-листом: ссылка внутри серого текста без подчёркивания
   не читалась как ссылка */
.fix__note a{color:var(--ink);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--line)}
.fix__note a:hover{color:var(--signal);text-decoration-color:var(--signal-line)}

/* первый экран без подзаголовка и оглавления: между h1 и первой секцией
   оставался полный межсекционный отступ и заголовок повисал */
.hero--bare+section{padding-top:clamp(18px,2vw,26px)}

/* тихая ссылка внутри абзаца: цвет текста, подчёркивание тонкой линией */
.link-quiet{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:var(--line);transition:var(--t)}
.link-quiet:hover{color:var(--signal);text-decoration-color:var(--signal-line)}

/* ---------- принципы + иллюстрация ----------
   список в одну колонку с крупным заголовком пункта, справа — мини-карточка
   каталога: принцип и его след в интерфейсе рядом */
.about-grid{display:grid;gap:28px 44px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .about-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
}
.fix__list--wide{grid-template-columns:minmax(0,1fr);gap:22px}
/* иллюстрация начинается вровень с первым пунктом и едет вместе со списком */
/* высота шапки меняется на прокрутке (--header-h: 68 → 48), и sticky, завязанный
   на переменную, прыгал в момент переключения. Здесь фиксированное значение,
   рассчитанное под сжатую шапку */
.about-grid>.demo{margin-top:0;position:sticky;top:70px}
@media (max-width:999px){
  .about-grid>.demo{position:static}
}
.fix__list--wide .fix__t{font-size:var(--fs-xl);line-height:1.25}
.fix__list--wide .fix__p{margin-top:4px}

/* мини-карточка каталога как иллюстрация */
.demo-card{display:flex;flex-direction:column;gap:12px;padding:20px 22px;border-radius:var(--r-card);
  background:var(--paper);box-shadow:var(--sh-rest)}
.demo-card__top{display:flex;align-items:center;gap:10px;font-size:var(--fs-sub);color:var(--steel)}
.demo-card__logo{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--mist-2);overflow:hidden}
.demo-card__logo img{width:22px;height:22px;object-fit:contain}
.demo-card__brand{font-size:var(--fs-lead);font-weight:700;color:var(--ink)}
.demo-card__val{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
/* в узкой колонке кегль каталога (--fs-num) рвал строку — на ступень мельче */
.demo-card__val b{font-family:Unbounded,sans-serif;font-size:var(--fs-h2);font-weight:600;
  letter-spacing:-.03em;line-height:1.05;color:var(--ok)}
/* валюта — часть числа: тем же цветом, мельче и с воздухом слева */
.demo-card__val b span{margin-left:5px;font-size:.5em;letter-spacing:0;color:inherit;
  text-transform:none;font-weight:600}
.demo-card__val>span{font-size:var(--fs-sub);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--steel)}
.demo-card__offer{margin:0;font-size:var(--fs-body);font-weight:700;line-height:1.35;color:var(--ink)}
.demo-card__meta{margin:0;font-size:var(--fs-sub);color:var(--faint)}
/* дата проверки — служебная подпись, а не акцент: нейтральная подложка */
.demo-card__meta mark{padding:2px 7px;border-radius:var(--r-xs);background:var(--mist-2);
  color:var(--steel);font-weight:600}

/* главное действие в блоке вариантов */
.fork--main{background:var(--tray)}
@media (max-width:900px){
  /* на телефоне подложки у вариантов сняты — серый прямоугольник выпадал из ряда */
  .fork--main{background:none}
  .fork--main .fork__act{width:100%;justify-content:center}
}
.fork--main .fork__act{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;
  padding:0 18px;border-radius:var(--r-ctl);background:var(--signal);color:#fff}
.fork--main .fork__act:hover{background:var(--signal-2);color:#fff}

/* ведущая фраза абзаца: якорь для взгляда в длинном тексте */
.panel__lead b{font-weight:700;color:var(--ink)}
/* пометка «только на Yookey» — фирменный синий, отличается от зелёной проверки */
.demo-card__only{display:inline-flex;align-items:center;align-self:flex-start;min-height:24px;
  padding:2px 10px;border-radius:var(--r-pill);background:var(--brand-soft);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;color:var(--brand)}
@media (max-width:700px){
  .demo-card{padding:18px;gap:10px}
  .demo-card__val b{font-size:var(--fs-h2)}
  .demo-card__logo{width:32px;height:32px}
  .demo-card__logo img{width:20px;height:20px}
  .demo-card__offer{font-size:var(--fs-lead);line-height:1.3}
  .demo-card__meta{font-size:var(--fs-xs)}
}
/* ---------- критерии «как сэкономить»: аккордеон на компоненте FAQ ----------
   все девять пунктов — один и тот же кусок разметки: маркер, заголовок, абзац.
   номер рисует счётчик CSS, в админке его руками не проставляют */
.faq--criteria{counter-reset:crit}
.faq--criteria details{counter-increment:crit}
/* заголовок и сводка — две строки, поэтому номер и плюс держим у первой из них */
.faq--criteria summary{gap:12px;align-items:flex-start}
.faq--criteria .save__ic{flex:none;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--ink);color:#fff;
  font-family:Unbounded,sans-serif;font-size:var(--fs-micro);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;transition:var(--t)}
.faq--criteria .save__ic::before{content:counter(crit)}
.faq--criteria summary:hover .save__ic,
.faq--criteria details[open] .save__ic{background:var(--signal)}
.faq--criteria .save__ic{margin-top:-1px}
.faq--criteria .faq__mark{align-self:flex-start;margin-top:-2px}
.faq--criteria .faq__t{flex:1 1 auto;min-width:0}
/* вывод пункта виден в свёрнутом состоянии: ответ читается без раскрытия,
   в раскрытом абзац продолжает эту же мысль */
.faq--criteria .save__lead{display:block;margin-top:4px;max-width:76ch;
  font-size:var(--fs-sub);font-weight:400;line-height:1.5;color:var(--steel);text-wrap:pretty}
.faq--criteria summary:hover .save__lead{color:var(--steel)}
/* абзац выравниваем по тексту заголовка, а не по кружку */
.faq--criteria p{padding-left:38px}
.faq--criteria p b{font-weight:700;color:var(--ink)}
/* на узком экране заголовок занимает две-три строки: номер прижимаем к первой,
   иначе кружок уезжает в середину блока и перестаёт читаться как нумерация */
@media (max-width:700px){
  .faq--criteria .save__ic{margin-top:1px}
}

/* ---------- «что проверить перед оплатой»: чек-лист карточками ----------
   базового правила для --cols не было: четыре пункта стояли в один
   столбец на всю ширину плашки и читались как продолжение аккордеона */
/* две белые плашки подряд сливались в одну: разводим их тем же зазором,
   каким на странице разделены карточки */
.faq-panel+.panel{margin-top:var(--gap-card)}
.fix__list--cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card)}
.fix__list--cols .fix__item{align-content:start;padding:20px;border-radius:var(--r-card);background:var(--mist-2);
  transition:background .16s var(--e)}
/* галочка отличается от крестика в блоке «скидка не применилась»: там причина, здесь проверка */
.fix__ic--ok{background:var(--ok)}
.fix--check .fix__note{margin:20px 0 0;padding-top:0;border-top:0;
  font-size:var(--fs-sub);line-height:1.6;color:var(--steel);text-wrap:pretty}
/* мобильное правило .fix даёт 24px сверху — оно для соседа по колонке
   в «Если промокод не сработал»; здесь блок первый в своей плашке */
.fix--check{margin-top:0}
/* подсветка карточки — только там, где есть курсор: на тач-экране
   :hover залипает после нажатия и карточка остаётся серой */
@media (hover:hover){
  .fix__list--cols .fix__item:hover{background:var(--tray)}
}
/* поля плашки и поля карточки складывались и съедали ширину строки:
   на узком экране подложку и внутренние отступы убираем, контент идёт
   по ширине белого блока, пункты разделяет только расстояние */
@media (max-width:900px){
  .fix--check .fix__list--cols{grid-template-columns:minmax(0,1fr);gap:24px}
  .fix--check .fix__list--cols .fix__item{padding:0;border-radius:0;background:none}
  .fix--check .fix__list--cols .fix__item:hover{background:none}
}

/* ---------- промокод в карточке ----------
   купон: красная кнопка со срезанным уголком лежит поверх пунктирной
   подложки, из-под неё торчит хвост кода — обещание, а не сам код */
.promo-code{position:relative;display:block;width:100%;min-height:48px;border-radius:var(--r-ctl)}
.promo-code__tail{display:flex;align-items:center;justify-content:flex-end;min-height:48px;padding:0 14px;
  border:1px dashed var(--faint);border-radius:var(--r-ctl);background:var(--mist-2);
  font-size:var(--fs-sub);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;overflow:hidden}
/* ширина кнопки оставляет ровно на два-три знака хвоста */
.promo-code__btn{position:absolute;top:0;bottom:0;left:0;right:52px;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;
  border-radius:var(--r-ctl);background:var(--signal);color:#fff;
  font-size:var(--fs-sub);font-weight:700;line-height:1.2;text-align:center;
  box-shadow:0 6px 16px -10px rgba(217,58,46,.7);
  /* уголок живёт в переменной: ховер меняет одно число, а не всю фигуру */
  --fold:14px;
  clip-path:polygon(0 0,calc(100% - var(--fold)) 0,100% var(--fold),100% 100%,0 100%);
  transition:clip-path .22s var(--e),filter .22s var(--e),box-shadow .22s var(--e)}
/* изнанка отогнутого угла: без неё срез читается как ошибка вёрстки */
.promo-code__btn::after{content:"";position:absolute;top:0;right:0;
  width:var(--fold);height:var(--fold);background:rgba(20,22,26,.26);
  clip-path:polygon(0 0,100% 100%,0 100%);
  transition:width .22s var(--e),height .22s var(--e)}
/* ховер: уголок отгибается сильнее — жест «сорвать листок»,
   а подложка под ним розовеет, показывая, что там код */
.promo-code:hover .promo-code__btn{--fold:22px;filter:brightness(1.04);
  box-shadow:0 10px 22px -12px rgba(217,58,46,.8)}
.promo-code:active .promo-code__btn{filter:brightness(.98)}
.promo-code:hover .promo-code__tail{border-color:var(--signal-line);background:var(--signal-soft);color:var(--signal-line)}
.promo-card--dead .promo-code{pointer-events:none;filter:grayscale(1)}
/* ссылка на все коды бренда: вторичное действие, поэтому не кнопка */
.promo-code__all{display:inline-flex;align-items:center;align-self:start;justify-self:center;
  font-size:var(--fs-xs);font-weight:500;color:var(--steel);
  border-bottom:1px solid var(--line);transition:var(--t)}
.promo-code__all:hover{color:var(--signal);border-color:transparent}

/* тот же код в шторке сохранённых */
.fav-item__copy{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 4px 0 10px;
  border:1px dashed var(--signal-line);border-radius:var(--r-mark);background:var(--signal-soft);
  color:var(--signal);cursor:pointer;transition:var(--t)}
.fav-item__copy:hover{border-style:solid;background:var(--paper)}
.fav-item__copy-val{font-size:var(--fs-sub);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fav-item__copy-hint{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;
  border-radius:var(--r-xs);background:var(--signal);color:#fff;font-size:var(--fs-micro);font-weight:700}
.fav-item__copy.is-copied{border-style:solid;border-color:var(--ok)}
.fav-item__copy.is-copied .fav-item__copy-hint{background:var(--ok)}
@media (max-width:520px){
  .fav-item__actions{flex-wrap:wrap}
}

/* ---------- размеры и отступы по образцу «Если промокод не сработал» ----------
   меняется только типографика; подложки, цвета и шаг сетки у блоков свои */
.how-step__heading{margin:2px 0 6px}
.how-step p{line-height:1.55}
.faq--criteria summary{font-weight:700}
.faq--criteria .save__lead{margin-top:6px;font-size:var(--fs-body);line-height:1.55}

/* ---------- один язык нумерации на странице ----------
   шаги «Как применить» и критерии «Как сэкономить» — два нумерованных
   списка на одном экране; знак у них теперь общий */
.how-step::before{background:var(--ink);color:#fff;
  font-family:Unbounded,sans-serif;font-size:var(--fs-micro);font-weight:600;line-height:1}

/* ---------- имя сервиса в карточке ----------
   на узком экране метка типа выдавливала имя на вторую строку и рвала
   слово посередине; теперь имя всегда целиком, а ужимается метка */
@media (max-width:700px){
  .promo-brand{display:block;-webkit-line-clamp:none;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}
  .promo-kind__type{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}

/* ---------- лучшие промокоды: та же рельса, что у фильтров ----------
   градиент по краю гаснет, когда листать больше некуда */
.best-block{--best-bg:color-mix(in oklab,var(--warn-soft) 45%,var(--paper))}
.best-block .scroller__inner.best-block__grid{gap:var(--gap-card);scroll-snap-type:x proximity}
/* .scroller__inner>:where(*) обнуляет рост — карточкам он здесь нужен */
.best-block .best-block__grid>*{flex:1 1 300px;min-width:300px;scroll-snap-align:start}
.best-block .scroller__fade{background:linear-gradient(90deg,rgba(255,255,255,0),var(--best-bg) 62%)}
/* рельса табов держит место под круглые кнопки и добавляет боковые поля
   тремя разными правилами — здесь кнопок нет, поле задаём сами одним местом.
   вес селектора выше их всех, иначе они его перебивают */
.best-block .scroller .scroller__inner.best-block__grid{padding:2px 0}
.best-block .scroller--right::after,.best-block .scroller--left::before{display:none}
.best-block .scroller__btn{display:none}
@media (max-width:700px){
  /* плашка во всю ширину экрана: гасим поле .container */
  .best-block{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:18px 0}
  /* контентная линия — одно поле: секции ниже стоят на нём, у .hero просто
     есть своё дополнительное, и равняться надо не на него */
  .best-block__heading{padding:0 var(--pad)}
  /* поле только слева и только внутри прокрутки: первая карточка начинается
     с контентной линии, при листании уезжает под край вместе с полем.
     справа поля нет — ряд уходит за экран.
     margin гасим: общее правило рельс растягивает её шире плашки */
  .best-block .scroller .scroller__inner.best-block__grid{margin:0;
    padding:2px 0 2px var(--pad)}
  /* последняя карточка не липнет к краю: распорка держит такое же поле */
  .best-block .best-block__grid::after{content:"";flex:0 0 calc(var(--pad) - var(--gap-card))}
}


/* ---------- один размер поля у карточек ----------
   .promo-card и .best-card держат 20/22 — это и есть норма страницы.
   Шаг «Как применить» жил на 16, плитка провайдера на 18, пункт чек-листа
   на 20: три разных поля у карточек одного уровня */
/* ---------- нижняя перелинковка ----------
   один ряд соседних категорий: заголовок секции говорит, что это за ссылки,
   поэтому подпись внутри ряда была бы повтором */
.collections .compare-row__h{justify-content:flex-end;margin-bottom:14px}
@media (max-width:700px){
  /* один ряд с прокруткой: вторая строка сетки рвала порядок ссылок */
  .collections .scroller__inner{grid-template-rows:minmax(0,auto)}
}

/* строка табов с единственным чипсом не прилипает — липнуть незачем */
.tabs__row--flat{position:static;box-shadow:none}

.how-step{padding:20px 22px}
.shop-tile{padding:20px 22px}
.fix__list--cols .fix__item{padding:20px 22px}

/* ---------- жёлтая плашка на мобильном ----------
   .hero и .container дают по полю каждый, а компенсировалось только одно —
   отсюда и оставался внешний отступ; скругление и рамку возвращаем */