/* ============================================================
   Участок «.perk» — ЗАДАЁТСЯ ТОЛЬКО ЗДЕСЬ.

   Сведено 2026-08-10 из файлов:
   storefront.v3.css, design-lab.v1.css, design-lab-flagship.v2.css, design-lab-review-fixes.v4.2.css, mobile-layout.v2.css.

   Значения не подбирались заново — перенесено ровно то, что фактически
   доезжало до покупателя. Правила, не выигрывавшие нигде, исчезли сами:
   переносить было нечего. Совпадение доказано расчётом по всей витрине,
   на 19 ширинах экрана от телефона до большого монитора.

   Правишь этот участок — правь здесь, включая телефон и тёмную тему.
   Новый слой поверх не заводи: npm run verify это ловит.
   Что где выигрывает: npm run who-wins .perk
   ============================================================ */
.perk{align-items:flex-start;border:1px solid var(--fl-line,#e6ecf4);border-color:var(--fl-line);border-radius:22px;box-shadow:var(--fl-shadow-1) !important;display:flex;flex-direction:column;gap:14px;min-height:296px;overflow:hidden;padding:28px 26px 30px;position:relative;text-align:left;transition:transform .3s cubic-bezier(.22,.8,.32,1),box-shadow .3s;z-index:1}
.perk:hover{box-shadow:var(--fl-shadow-2) !important;transform:translateY(-4px)}
.perk .ico{align-items:center;background:var(--pk-tint);border-radius:50%;display:inline-flex;flex-shrink:0;font-size:22px;height:66px;justify-content:center;margin-bottom:26px;transition:transform .3s cubic-bezier(.22,.8,.32,1);width:66px}
.perk:hover .ico{transform:none}
.perk b{color:var(--fl-ink,#12243b);display:block;font-size:17px;line-height:1.3;margin:0;margin-bottom:3px}
.perk span{color:var(--muted);font-size:13px}
.perk > div{align-content:start;display:block;gap:8px;grid-template-rows:minmax(42px,auto) 1fr}
.perk span:not(.ico){color:var(--fl-muted,#6b7c93);display:block;font-size:14px;line-height:1.6;max-width:230px}
.perk .ico .svg-ico{color:var(--pk);height:30px;width:30px}
html[data-theme="dark"] .perk{background:var(--card-bg) !important;border-color:var(--dl-line,#26394e) !important}
.perk b::after{background:var(--pk);border-radius:2px;content:"";display:block;height:3px;margin:14px 0 16px;width:34px}
.perk::after{bottom:12px;color:var(--pk);font-family:'Unbounded',sans-serif;font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1;opacity:.13;position:absolute;right:22px}
.perk::before{background:var(--pk-tint);border-radius:0 76px 0 0;bottom:0;content:"";height:76px;left:0;opacity:.7;pointer-events:none;position:absolute;width:76px}
.perk:nth-child(1){--pk:#2f6bff;--pk-tint:rgba(47,107,255,.12)}
.perk:nth-child(2){--pk:#23c16b;--pk-tint:rgba(35,193,107,.14)}
.perk:nth-child(3){--pk:#f5a623;--pk-tint:rgba(245,166,35,.16)}
.perk:nth-child(4){--pk:#7c5cff;--pk-tint:rgba(124,92,255,.13)}
.perk:nth-child(1)::after{content:"01"}
.perk:nth-child(2)::after{content:"02"}
.perk:nth-child(3)::after{content:"03"}
.perk:nth-child(4)::after{content:"04"}
@media(max-width:680px){
  .perk{min-height:0;width:100%}
  .perk p{font-size:12.5px}
  .perk > div{grid-template-rows:auto 1fr}
}