/* Блок Pricing — «самодостатні картки»: таби категорій, перемикач періоду,
   список фіч у два рівні. Токени :root, .wrap, .h2/.h3, .btn*, .rv,
   .screen-reader-text — глобальні (assets/css/style.css), тут лише своє.
   Власні класи блоку — з префіксом p-; класи теми (.pv/.pv-old/.pd/.ptag/
   .price-mascot/.price-trust/.btn*) лишаються 1:1. */

.price{
  padding-top:var(--section-gap);
  text-align:center;
  position:relative;

  /* токени, специфічні для блоку */
  --accent:#6D28D9;                                  /* іконки й пілюля; 5.8:1 на --lime-soft */
  --p-div:1px solid rgba(var(--ink-rgb),.07);        /* розділювач фіч */
  --p-div-hot:1px solid rgba(255,255,255,.1);        /* те саме на темній картці */
}
.price .h3{max-width:52ch;margin-left:auto;margin-right:auto}

/* .price.wrap (0-3-0) перекриває wp-admin .wrap h2:first-child{font-size:23px} (0-2-1),
   яке інакше зменшує заголовок у редакторі (колізія класу .wrap з адмінським wrapper). */
.price.wrap>.h2{font-size:clamp(30px,3.8vw,52px);font-weight:800;line-height:1.1;letter-spacing:-.02em}

/* ---------- мітка «Тарифи» ----------
   Той самий .tagline, що в решті секцій (глобальний стиль). Тут лише
   центрування: .tagline — flex, тож text-align секції на нього не діє. */
.price .tagline{justify-content:center}

/* ---------- таби «Для фізичних осіб / Для бізнесу» ---------- */
.p-tabs{
  position:relative;
  display:inline-flex;gap:14px;margin:30px 0 6px;
  background:var(--mint);border:1px solid var(--line);border-radius:999px;padding:6px;
}
/* Біла плашка активного табу — окремий рухливий елемент, а не фон кнопки:
   так вона ковзає між табами. Позицію/ширину рахує JS за активним табом. */
.p-tab-ind{
  position:absolute;top:6px;bottom:6px;left:0;width:0;
  background:#fff;border-radius:999px;
  box-shadow:0 8px 22px rgba(var(--ink-rgb),.1);
  transition:transform .34s var(--ease), width .34s var(--ease);
  pointer-events:none;z-index:0;
}
@media (prefers-reduced-motion:reduce){ .p-tab-ind{transition:none} }
.p-tab{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:999px;
  font:inherit;font-size:15.5px;font-weight:700;color:var(--muted);
  border:0;background:transparent;cursor:pointer;
  transition:color .25s ease;
}
.p-tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.p-tab:hover{color:var(--ink)}
/* фон і тінь малює .p-tab-ind — тут лишається тільки колір тексту */
.p-tab[aria-selected="true"],
.p-tab[aria-selected="true"]:hover{color:var(--accent)}
.p-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.p-panel[hidden]{display:none}

/* ---------- ряд карток ----------
   Ніякого overflow на десктопі — інакше зріже маскот, бейдж «Популярний»
   і збільшену темну картку. padding-top тримає місце під ці виступи. */
.p-cards{
  display:flex;gap:18px;align-items:stretch;justify-content:center;
  margin-top:clamp(24px,3.4vw,38px);
  padding-top:22px;                  /* бейдж виступає на -13px */
  text-align:left;
}
.p-card{flex:1 1 0;min-width:0}

/* дві картки в панелі — по центру, НЕ розтягнуті на всю ширину */
.p-cards-2 .p-card{flex:0 1 372px;max-width:372px}

@media (min-width:1024px){
  /* темна картка збільшена на 4.5%: ~21px виступу вгору й вниз плюс бейдж */
  .p-cards{padding-top:40px;padding-bottom:26px}
}

/* ---------- картка тарифу ---------- */
.p-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px 24px 26px;
  /* без тіні у спокої — картку тримає рамка; тінь лишається тільки в темної
     («популярний» акцент) і на ховері */
  box-shadow:none;
  transform-origin:center;
  transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
/* контент над радіальним сяйвом темної картки */
.p-card>*{position:relative;z-index:1}

/* ---------- популярна картка — темна ---------- */
.p-card.p-hot{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  box-shadow:0 32px 68px rgba(var(--ink-rgb),.28);
  z-index:1;
}
/* Сяйво: зміщення по вертикалі в px, а не у %. Причина: ця картка ~втричі вища
   за .pcard теми, тож -14% відкинуло б центр градієнта на 140px вище. */
.p-card.p-hot::before{
  content:"";position:absolute;inset:0;border-radius:var(--r);
  background:radial-gradient(440px 240px at 50% -60px, rgba(var(--lime-rgb),.42), transparent 62%);
  pointer-events:none;
}

/* ---------- шапка картки ---------- */
.p-head{align-self:stretch;display:flex;flex-direction:column;align-items:center}

/* Перемикач періоду — один на секцію, під табами (керує цінами всіх карток). */
.p-period{display:flex;justify-content:center;margin-top:18px}

/* назва тарифу — дрібний капс */
.pname{margin:0;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.p-card.p-hot .pname{color:var(--lime)}

/* ціна: слот фіксованої висоти, щоб перемикач і опис стояли на одній лінії
   в усіх картках, навіть де замість числа «Індивідуально» */
.pv{
  display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:12px 0 2px;min-height:44px;
  font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.pv small{font-size:15px;font-weight:700;color:var(--muted)}
.p-card.p-hot .pv small{color:rgba(255,255,255,.6)}
.pv-old{font-size:20px;font-weight:700;color:var(--muted);text-decoration:line-through;opacity:.75}
.p-card.p-hot .pv-old{color:rgba(255,255,255,.55)}
/* «Індивідуально» замість числа — менший кегль, слот тієї ж висоти */
.pv.p-solo{font-size:26px;letter-spacing:-.01em;align-items:center}

/* ---------- підпис акції ----------
   Порожній слот стоїть у КОЖНІЙ картці секції з акцією і тримає висоту в
   обох режимах — інакше поява підпису зсувала б списки фіч сусідніх карток.
   Текст вписує view.js, у річному режимі слот порожній. */
.p-promo{margin:2px 0 0;min-height:1.3em;font-size:12px;font-weight:700;line-height:1.3;color:var(--muted)}
/* на темній картці --muted не читається */
.p-card.p-hot .p-promo{color:rgba(255,255,255,.7)}

/* ---------- опис ---------- */
.pd{
  font-size:13.5px;color:var(--muted);font-weight:600;line-height:1.35;
  margin:10px 0 4px;max-width:26ch;
  min-height:2.7em;                  /* 1- і 2-рядкові описи однакової висоти */
}
.p-card.p-hot .pd{color:rgba(255,255,255,.68)}

/* ---------- перемикач «Місячний / Річний» ---------- */
.p-sw{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;
  margin-top:8px;max-width:100%;
  font-family:inherit;font-size:12.5px;font-weight:700;
  border:0;background:transparent;padding:0;cursor:pointer;
}
/* тач-зона 45px замість 23px (патерн .pdot::after з теми) */
.p-sw::after{content:"";position:absolute;inset:-11px -6px}
.p-sw .p-off,.p-sw .p-on{transition:color .25s ease}
.p-sw .p-off{color:var(--muted)}
.p-sw .p-on{color:var(--ink)}
.p-sw[aria-pressed="false"] .p-off{color:var(--ink)}
.p-sw[aria-pressed="false"] .p-on{color:var(--muted)}
.p-sw .p-track{
  position:relative;width:40px;height:23px;border-radius:999px;background:var(--lime);
  box-shadow:inset 0 1px 3px rgba(var(--ink-rgb),.2);flex:none;
}
.p-sw .p-knob{
  position:absolute;top:3px;left:20px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(var(--ink-rgb),.35);transition:left .25s var(--ease);
}
.p-sw[aria-pressed="false"] .p-knob{left:3px}
.p-sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:999px}
/* єдиний контрол періоду на секцію — трохи крупніший кегль */
.p-period .p-sw{font-size:14px;gap:11px}

/* ---------- список фіч ----------
   [плитка]  назва фічі
             значення
   Значення сидить у тій самій колонці ґрида, що й назва, тож автоматично
   вирівняне під її текстом. */
.p-feats{
  list-style:none;margin:18px 0 24px;padding:0;
  align-self:stretch;text-align:left;
  position:relative;overflow:hidden;transition:max-height .42s var(--ease);
}
@media (prefers-reduced-motion:reduce){ .p-feats{transition:none} }
.p-feat{
  display:grid;
  grid-template-columns:29px minmax(0,1fr);
  column-gap:10px;row-gap:3px;
  padding:10px 0;
}
.p-feat+.p-feat{border-top:var(--p-div)}
.p-card.p-hot .p-feat+.p-feat{border-top:var(--p-div-hot)}

.p-feat .p-ic{grid-column:1;grid-row:1 / span 2;align-self:start}
.p-fname{
  grid-column:2;grid-row:1;
  font-size:12.6px;font-weight:600;line-height:1.3;color:var(--muted);
  overflow-wrap:break-word;
}
.p-val{
  grid-column:2;grid-row:2;
  font-size:15.5px;font-weight:800;line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
/* текстові значення (перелік каналів, «без обмежень», CRM, SLA) — спокійніші
   за числові, інакше два рядки 15.5px/800 перебивають ціну картки */
.p-val.p-sm{font-size:13.6px;font-weight:700;line-height:1.35;letter-spacing:0}
.p-card.p-hot .p-fname{color:rgba(255,255,255,.72)}
.p-card.p-hot .p-val{color:#fff}

/* булева фіча (значення порожнє) — один рядок без значення */
.p-feat.p-bool{grid-template-columns:29px minmax(0,1fr) auto;row-gap:0;align-items:center}
.p-feat.p-bool .p-ic{grid-row:1;align-self:center}
.p-feat.p-bool .p-fname{font-size:13.4px;color:var(--ink)}
.p-card.p-hot .p-feat.p-bool .p-fname{color:#fff}

/* ---------- плитка іконки (фічі + рядок довіри) ----------
   Фірмовий зрізаний кут (патерн 7px 7px 7px 2px з .tagline i)
   і stroke-width:2 — товщина ліній як у решті теми. */
.p-ic{
  flex:none;width:29px;height:29px;border-radius:10px 10px 10px 3px;
  background:var(--lime-soft);display:grid;place-items:center;color:var(--accent);
}
.p-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-card.p-hot .p-ic{background:rgba(255,255,255,.14);color:#fff}

/* ---------- кнопка картки ---------- */
.p-card .btn{margin-top:auto;width:100%}
/* на темній картці лишається .btn-lime, але фокус мусить бути видимим */
.p-card.p-hot .btn:focus-visible{outline:2px solid #fff}

/* ---------- бейдж «Популярний» ---------- */
.ptag{
  position:absolute;top:-13px;left:50%;right:auto;transform:translateX(-50%);width:auto;
  background:var(--lime);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:6px 14px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(var(--lime-rgb),.55);z-index:3;
}

/* ---------- рядок довіри ---------- */
.price-trust{
  display:inline-flex;align-items:flex-start;gap:12px;
  margin-top:clamp(28px,4vw,40px);
  color:var(--muted);font-size:14.5px;font-weight:600;line-height:1.45;text-align:left;
}
.price-trust .p-ic{width:34px;height:34px}
.price-trust .p-ic svg{width:19px;height:19px}

/* ---------- згортання списку фіч ----------
   Клас-перемикач висить на СЕКЦІЇ, тому розгортаються всі картки разом:
   інакше одна картка стала б вищою і зламала б вирівнювання ряду. Класи ставить
   JS — без нього видно повний список (progressive enhancement).
   .p-feats-clip — список довший за згорнуту висоту, тобто є що розгортати. */
.p-feats-collapsed .p-feats.p-feats-clip::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card) 78%);
  pointer-events:none;
}
/* на темній картці затухання йде до --ink, інакше вийшла б біла пляма */
.p-feats-collapsed .p-card.p-hot .p-feats.p-feats-clip::after{
  background:linear-gradient(to bottom, rgba(23,18,51,0), var(--ink) 78%);
}

/* Планшет і мобільний: без затухання. Замість обрізання по висоті ховаємо
   зайві пункти цілком — інакше без градієнта на межі лишався б розрізаний
   навпіл рядок. max-height перебиваємо, бо його виставляє JS інлайном. */
@media (max-width:1023px){
  .p-feats-collapsed .p-feats.p-feats-clip::after{content:none}
  .p-feats-collapsed .p-feats{max-height:none !important}
  .p-feats-collapsed .p-feat:nth-child(n+7){display:none}

  /* Без тіней на планшеті й мобільному — і в звичайних карток, і у виділеної:
     у горизонтальній доріжці вони накладались на сусідню картку. */
  .p-card.p-hot{box-shadow:none}
}

/* Тригер усередині картки — не кнопка-плашка, а виділений текст зі стрілкою. */
.p-more-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin:14px auto 18px;padding:6px 4px;
  font:inherit;font-size:13.5px;font-weight:700;
  color:var(--accent);background:none;border:0;cursor:pointer;
  border-radius:8px;
}
.p-more-btn:hover .p-more-tx{text-decoration:underline}
.p-more-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.p-card.p-hot .p-more-btn{color:var(--lime)}
.p-card.p-hot .p-more-btn:focus-visible{outline-color:#fff}
.p-more-ic{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.p-more-btn[aria-expanded="true"] .p-more-ic{transform:rotate(180deg)}
/* короткий список нема куди розгортати — кнопка зайва */
.p-feats:not(.p-feats-clip)+.p-more-btn{display:none}

/* ---------- маскот Марічки ----------
   Живе всередині картки панелі, тож підіймається разом з нею на ховері:
   ліворуч від першої (фіз. особи) або праворуч від останньої (бізнес). */
.price-mascot{display:none}
@media (min-width:1360px){
  .p-card .price-mascot{
    display:block;position:absolute;left:-169px;bottom:0;width:200px;height:auto;
    z-index:2;pointer-events:none;
    filter:drop-shadow(0 26px 34px rgba(var(--ink-rgb),.24));
  }
  /* Бізнес: поза «спирається», тож маскот стоїть праворуч і частиною руки
     заходить на картку (звідси right менший за ширину). Дзеркально не
     відображаємо — на одязі маскота є напис. */
  .p-card .price-mascot-right{left:auto;right:-245px;width:250px}
}
@media (min-width:1360px) and (prefers-reduced-motion:no-preference){
  .p-card .price-mascot{animation:mascotPop .34s cubic-bezier(.22,1,.36,1)}
}
@keyframes mascotPop{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:none}
}

/* ---------- reveal + трансформи ----------
   .rv / .rv.on з теми керують transform напряму, тож масштаб темної картки
   треба вписати в ті самі правила — інакше .rv.on{transform:none} його з'їсть.
   --p-scale тримає масштаб в одному місці. */
.p-card{--p-scale:scale(1)}
.p-card.p-hot{--p-scale:scale(1.045)}
.p-card.rv{transform:translateY(24px) var(--p-scale)}
.p-card.rv.on{transform:var(--p-scale)}

/* ---------- ховери карток ---------- */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .p-card.rv.on:hover{
    transform:var(--p-scale) translateY(-6px);
    border-color:rgba(var(--lime-rgb),.55);
    box-shadow:0 26px 54px rgba(var(--ink-rgb),.15);
  }
  .p-card.p-hot.rv.on:hover{
    border-color:var(--ink);
    box-shadow:0 36px 74px rgba(var(--ink-rgb),.32);
  }
}

/* ---------- планшет 769..1023px ---------- */
@media (max-width:1023px){
  /* масштаб геть: інакше картка лізе на сусідню. Селектор мусить бути саме
     .p-card.p-hot — медіа-запит не додає специфічності, тож .p-card (0,1,0)
     програв би базовому .p-card.p-hot (0,2,0) і scale лишився б живим. */
  .p-card.p-hot{--p-scale:scale(1)}
  .p-cards{gap:12px}
  .p-card{padding:26px 18px 22px}
  .p-cards-2 .p-card{flex:0 1 340px;max-width:340px}
  .pv{font-size:36px;min-height:36px}
  .pv small{font-size:13.5px}
  .pv-old{font-size:17px}
  .pv.p-solo{font-size:23px}
  .p-promo{font-size:11.6px}
  .pd{font-size:12.6px}
  .p-sw{font-size:11.5px;gap:7px}
  .p-feats{margin:14px 0 20px}
  .p-feat{grid-template-columns:27px minmax(0,1fr);column-gap:9px;padding:9px 0}
  .p-feat.p-bool{grid-template-columns:27px minmax(0,1fr) auto}
  .p-feat .p-ic{width:27px;height:27px}
  .p-val{font-size:14.5px}
  .p-val.p-sm{font-size:12.8px}
  .p-fname{font-size:12.2px}
  .p-feat.p-bool .p-fname{font-size:12.8px}
  .p-card .btn{padding:12px 16px;font-size:14.5px}
}

/* ---------- мобільний ≤768px: горизонтальний скрол зі snap ---------- */
@media (max-width:768px){
  /* таби на всю ширину, порівну */
  .p-tabs{display:flex;width:100%;max-width:100%}
  .p-tab{flex:1 1 0;min-width:0;justify-content:center;padding:11px 12px;font-size:14px;gap:8px}
  .p-tab svg{width:18px;height:18px}

  /* доріжка на всю ширину екрана; padding-top лишає місце бейджу «Популярний» */
  .p-cards{
    gap:14px;margin-top:30px;
    width:100vw;margin-left:calc(50% - 50vw);
    padding:22px clamp(18px,4vw,44px) 10px;
    justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:clamp(18px,4vw,44px);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Краї доріжки згасають, щоб обрізана сусідня картка не виглядала
       «відрізаною» рамкою екрана. Маска замість псевдоелементів: доріжка
       розтягнута на 100vw, і накладка мусила б повторювати той самий трюк. */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .p-cards::-webkit-scrollbar{display:none}
  /* специфічність (0,2,0) — щоб перебити .p-cards-2 .p-card у панелі бізнесу */
  .p-cards .p-card{flex:0 0 86%;max-width:360px;scroll-snap-align:center;padding:28px 20px 24px}

  /* картки живуть у горизонтальному скролі, тож поелементний reveal лишав би
     сусідню картку порожньою до свайпу — на мобільному вимикаємо його */
  .p-cards .p-card.rv{opacity:1;transform:none}

  /* крупна мобільна ціна */
  .pv{font-size:46px;min-height:46px}
  .pv small{font-size:14px}
  .pv-old{font-size:20px}
  .pv.p-solo{font-size:28px}
  .p-promo{font-size:12.5px}
  .pd{font-size:13.4px;max-width:30ch}
  .p-sw{font-size:12.5px;gap:9px}
  .p-feats{margin:16px 0 22px}
  .p-feat{grid-template-columns:29px minmax(0,1fr);column-gap:10px;padding:10px 0}
  .p-feat.p-bool{grid-template-columns:29px minmax(0,1fr) auto}
  .p-feat .p-ic{width:29px;height:29px}
  .p-val{font-size:15.5px}
  .p-val.p-sm{font-size:13.4px}
  .p-fname{font-size:12.6px}
  .p-feat.p-bool .p-fname{font-size:13.4px}
  .p-card .btn{padding:14px 22px;font-size:15px}
}
/* Таби: на вузьких екранах підпис «Для фізичних осіб» не влазив у половину
   ширини і ламався на два рядки — тиснемо кегль, відступи й іконку. */
@media (max-width:560px){
  .p-tab{padding:10px 10px;font-size:13px;gap:6px}
  .p-tab svg{width:16px;height:16px}
}

/* Найвужчі екрани: іконка йде геть — текст важливіший за декор. */
@media (max-width:430px){
  .p-tab svg{display:none}
  .p-tab{gap:0;padding:10px 8px;font-size:12.6px}
}

@media (max-width:400px){
  .p-cards .p-card{flex:0 0 88%;padding:26px 17px 22px}
  .p-fname{font-size:12.2px}
  .p-val{font-size:14.8px}
  .p-val.p-sm{font-size:12.9px}
  .p-feat{grid-template-columns:27px minmax(0,1fr);column-gap:9px}
  .p-feat.p-bool{grid-template-columns:27px minmax(0,1fr) auto}
  .p-feat .p-ic{width:27px;height:27px}
}

/* масштаб темної картки лишається і при reduced motion (глобальне правило
   .rv{transform:none} його б зняло) */
@media (prefers-reduced-motion:reduce){
  .p-card.rv{transform:var(--p-scale)}
}