/* Wepster Pay (/pay/): 4. Калькулятор і графік маржі — розкладка, адаптив, стани й рух. Логіка — js/pay-calc.js.
   Рух: усе, що змінюється від цифр (числа, смуга чека, сітка 10×10, стовпці й вісь графіка, повзунки), веде js однією
   критично згасаючою пружиною: у CSS лише змінні (--cost-f, --s, --t, --pct), без transition на самих значеннях.
   Решта руху — ease-out --py-ease: повзунок під кнопкою (.py-pill) і в перемикачі сітки (.py-seg-pill), каскад у результатах
   сходинкою 60 мс (.is-swap, ставить js лише на клік пресета), поява графіка. Усе гасне при prefers-reduced-motion. */

/* =====================================================================
   4. КАЛЬКУЛЯТОР
   ===================================================================== */

.py-calc-box {
  margin-top: clamp(28px, 5vh, 56px);
  padding: clamp(16px, 2.4vw, 36px);
  border-radius: var(--py-r-card);
  background: var(--c-panel);
  box-shadow: var(--py-shadow);
}

/* ---------- Галузі: кнопки + повзунок-підкладка ---------- */

.py-calc-presets {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(16px, 2.6vh, 28px);
}

.py-calc-presets button,
.py-rates button {
  position: relative;
  z-index: 1;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--py-r-chip);
  background: var(--c-ghost);
  color: var(--c-soft);
  font-size: var(--py-fs-5);
  font-weight: 700;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* від 768px — як було на всіх пристроях; на телефоні лише з мишею: на дотику :hover «залипав» би після тапу */
@media (hover: hover), (min-width: 768px) {
  .py-calc-presets button:hover,
  .py-rates button:hover {
    box-shadow: inset 0 0 0 2px var(--c-ink);
    color: var(--c-ink);
  }
}

/* глобальна жовта «пляма» кнопок сайту (main.css) під повзунком і на чіпах калькулятора зайва */
.py-calc-box button:not(.disabled):hover::before,
.py-calc-box button:not(.disabled):active::before {
  content: none;
}

/* без JS (і до ініціалізації) вибрана кнопка сама м'ятна */
.py-calc-presets button[aria-pressed="true"],
.py-rates button[aria-pressed="true"] {
  background: var(--c-btn-bg);
  color: var(--c-btn-ink);
}

/* js додає .py-pill і клас has-pill: фон вибраної кнопки віддає повзунок, що їде між кнопками */
.py-calc-presets.has-pill button[aria-pressed="true"] {
  background: transparent;
}

.py-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  border-radius: var(--py-r-chip);
  background: var(--c-btn-bg);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--x, 0), var(--y, 0));
  transition: transform .45s var(--py-ease), width .45s var(--py-ease), height .45s var(--py-ease), opacity .2s ease;
}

.py-pill.is-on {
  opacity: 1;
}

/* миттєва постановка (старт, зміна розміру, повернення після ручних цифр) */
.py-pill.is-set {
  transition: none;
}

.py-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 3.6vw, 64px);
  align-items: start;
}

/* ---------- Поля ---------- */

.py-calc-in {
  display: grid;
  align-content: start;
  gap: clamp(12px, 2vh, 20px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.py-field label,
.py-field summary {
  display: block;
  font-size: var(--py-fs-5);
  font-weight: 700;
}

.py-field-hint {
  margin-left: 6px;
  color: var(--c-soft);
  font-size: 13px;
  font-weight: 500;
}

.py-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
}

.py-field input[type="number"] {
  box-sizing: border-box;
  width: 9ch;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--c-field);
  color: var(--c-ink);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  -moz-appearance: textfield;
  appearance: textfield;
}

.py-field input[type="number"]::-webkit-outer-spin-button,
.py-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.py-field input[type="number"]:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 0;
}

.py-unit {
  color: var(--c-soft);
  font-size: var(--py-fs-4);
  font-weight: 600;
}

.py-rates {
  display: inline-flex;
  gap: 6px;
  margin-left: 6px;
}

/* ---------- Повзунки ----------
   Доріжка заповнюється до значення (--pct, 0…1, ставить js), бігунок росте на hover і при перетягуванні з м'яким ореолом,
   над ним під час перетягування (клас is-drag) або з клавіатури стоїть бульбашка зі значенням. Зона дотику — 44px по висоті. */

.py-rg {
  --thumb: 22px;
  --pct: 0;
  --halo: color-mix(in srgb, var(--c-accent) 42%, transparent);

  position: relative;
  display: block;
  flex: 1 1 90px;
  min-width: 90px;
  height: 44px;
  margin: 0 0 0 6px;
}

.py-rg input[type="range"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}

.py-rg input[type="range"]:focus-visible {
  outline: none;
}

.py-rg input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(var(--c-ink), var(--c-ink)) 0 0 / calc(var(--thumb) / 2 + var(--pct) * (100% - var(--thumb))) 100% no-repeat,
    var(--c-cost);
}

.py-rg input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--c-cost);
}

.py-rg input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--c-ink);
}

.py-rg input[type="range"]::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((6px - var(--thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--c-ink);
  transition: transform .22s var(--py-ease), box-shadow .25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.py-rg input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: var(--c-ink);
  transition: transform .22s var(--py-ease), box-shadow .25s ease;
}

@media (hover: hover), (min-width: 768px) {
  .py-rg input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 7px var(--halo);
    transform: scale(1.14);
  }

  .py-rg input[type="range"]:hover::-moz-range-thumb {
    box-shadow: 0 0 0 7px var(--halo);
    transform: scale(1.14);
  }
}

.py-rg.is-drag input[type="range"]::-webkit-slider-thumb,
.py-rg input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px var(--halo);
  transform: scale(1.26);
}

.py-rg.is-drag input[type="range"]::-moz-range-thumb,
.py-rg input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 10px var(--halo);
  transform: scale(1.26);
}

.py-rg input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--c-panel), 0 0 0 5px var(--c-ink);
}

.py-rg input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--c-panel), 0 0 0 5px var(--c-ink);
}

/* бульбашка зі значенням: стоїть над центром бігунка (ті самі --thumb і --pct), з хвостиком */
.py-rg-bub {
  position: absolute;
  bottom: calc(100% - 6px);
  left: calc(var(--thumb) / 2 + var(--pct) * (100% - var(--thumb)));
  z-index: 5;
  padding: 6px 11px 7px;
  border-radius: 11px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(41, 41, 41, .2));
  transform: translate(-50%, 6px) scale(.92);
  transition: opacity .16s ease, transform .22s var(--py-ease);
}

.py-rg-bub::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: var(--c-ink);
  transform: rotate(45deg);
}

.py-rg.is-drag .py-rg-bub,
.py-rg:has(input:focus-visible) .py-rg-bub {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.py-field--more summary {
  color: var(--c-soft);
  cursor: pointer;
}

.py-field--more[open] summary {
  color: var(--c-ink);
}

/* ---------- Результати ---------- */

.py-calc-out {
  position: sticky;
  top: calc(var(--py-stick, 92px) + 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: clamp(10px, 1.9vh, 22px);
  min-width: 0;
}

/* Палітра без помаранчевого: «забирає еквайринг» кодується глибоким графітом, «лишається у вас» — м'ятним.
   Токени --c-loss* перевизначено лише тут, у pay.css вони не змінюються. */
.py-ch.py-calc {
  --c-loss: #292929;
  --c-loss-fill: #292929;
  --c-keep: #5ef2a0;
}

/* велике число й попередження про збиток лежать в одній клітинці: висота картки не стрибає між станами */
.py-calc-big,
.py-calc-warn {
  grid-area: 1 / 1;
}

/* Головне число — одна домінанта блока. Підпис стоїть під ним, а не збоку: число доїжджає до цілі, і сусід по рядку
   не смикався б щоразу, коли воно додає або губить цифру. */
.py-calc-big {
  display: block;
}

.py-calc-share {
  display: block;
  color: var(--c-loss);
  font-size: clamp(48px, 9vh, 88px);
  font-weight: var(--py-h-w);
  line-height: .95;
  letter-spacing: var(--py-h-ls);
}

.py-calc-big-t {
  display: block;
  margin-top: clamp(4px, .8vh, 8px);
  font-size: var(--py-fs-3);
  font-weight: 700;
  line-height: 1.2;
}

.py-calc-warn {
  align-self: start;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--c-ghost);
  color: var(--c-loss);
  font-size: var(--py-fs-3);
  font-weight: 700;
  line-height: 1.3;
}

/* збиток: число й фраза гаснуть, але лишають місце; «−100% прибутку» нічого не пояснює — попередження каже все */
.py-calc-box.is-loss [data-calc-ok] {
  visibility: hidden;
}

/* збиток: підпис сітки, «лишається» й відсотки нічого не пояснюють, попередження вгорі каже все; лишається рядок еквайрингу */
.py-calc-box.is-loss .py-wf-h,
.py-calc-box.is-loss .py-wf-sub,
.py-calc-box.is-loss .py-wf-lg li:not(.is-l),
.py-calc-box.is-loss .py-lg-p {
  visibility: hidden;
}

.py-bars {
  display: grid;
  gap: clamp(10px, 1.8vh, 18px);
}

.py-bar-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  margin-bottom: 6px;
  font-size: var(--py-fs-5);
}

.py-bar-cap > span {
  color: var(--c-soft);
}

/* Смуга чека: нижній шар — прибуток на всю довжину, зверху шар витрат від лівого краю. Довжина шару — scaleX від
   --cost-f (частка 0…1, її веде js пружиною), тож смуга їде transform-ом, а не міняє розкладку. --cost у відсотках
   лишається для тестів і сторонніх читачів. Це контекст: тонша за сітку, яка є доказом. */
.py-bar {
  position: relative;
  height: clamp(20px, 3.4vh, 30px);
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-profit);
}

.py-bar i {
  position: absolute;
  inset: 0;
  display: block;
}

.py-bar-profit {
  background: var(--c-profit);
}

.py-bar-cost {
  z-index: 1;
  background: var(--c-cost);
  transform: scaleX(var(--cost-f, .9));
  transform-origin: left;
}

/* ---------- Сітка 10×10 (П2): клітинка = 1% прибутку з чека ----------
   Графітові клітинки (is-l) — частка, яку забирає еквайринг, решта м'ятні. Їх перефарбовує js: кількість помаранчевих
   завжди дорівнює числу, яке зараз на екрані, тож клітинки міняються по одній, поки число доїжджає до цілі.
   Розмір сітки йде від висоти екрана (--wf), щоб картка вміщалась у вікно ноутбука. */

.py-wf {
  --wf: clamp(116px, 20vh, 216px);
  --wf-gap: clamp(2px, calc(var(--wf) * .02), 4px);

  display: grid;
  grid-template-columns: var(--wf) minmax(0, 1fr);
  column-gap: clamp(16px, 2.4vw, 32px);
  align-items: stretch;
}

.py-wf-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: var(--wf-gap);
  width: var(--wf);
  height: var(--wf);
}

/* Різниця не лише кольором: графітова клітинка стоїть на всю свою комірку, м'ятна трохи менша, тож «з'їдене» читається
   й тоді, коли кольори сусідні за тоном (форма дублює колір). Той самий перехід
   transform дає при перефарбуванні «поштовх»: клітинка, яку забрав еквайринг, виростає, а повернута — вляглась. */
.py-wf-grid i {
  display: block;
  border-radius: max(2px, calc(var(--wf) * .02));
  background: var(--c-keep);
  transform: scale(.86);
  transition: background-color .28s ease, transform .42s cubic-bezier(.34, 1.56, .64, 1);
}

.py-wf-grid i.is-l {
  background: var(--c-loss-fill);
  transform: none;
}

/* стартова постановка без руху (js знімає клас після першого кадра) */
.py-wf-grid.is-still i {
  transition: none;
}

.py-wf-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 22px);
  min-width: 0;
}

/* Перемикач «Еквайринг | З Wepster Pay»: два однакові сегменти, повзунок їде transform-ом від класу на .py-wf */
.py-seg {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: flex-start;
  max-width: 100%;
  padding: 3px;
  border-radius: var(--py-r-chip);
  background: var(--c-ghost);
}

.py-seg button {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 0 clamp(12px, 1.4vw, 22px);
  border-radius: var(--py-r-chip);
  color: var(--c-soft);
  font-size: var(--py-fs-5);
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s ease, box-shadow .2s ease;
}

@media (hover: hover), (min-width: 768px) {
  .py-seg button:hover:not(:disabled, [aria-pressed="true"]) {
    box-shadow: inset 0 0 0 2px var(--c-ink);
    color: var(--c-ink);
  }
}

.py-seg button[aria-pressed="true"] {
  color: var(--c-btn-ink);
}

.py-seg button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.py-seg button:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

.py-seg-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--py-r-chip);
  background: var(--c-btn-bg);
  transition: transform .45s var(--py-ease);
}

.py-wf[data-wf-mode="pay"] .py-seg-pill {
  transform: translateX(100%);
}

/* Підписи двох станів лежать в одній клітинці: висота не змінюється, а видно лише підпис активного стану */
.py-wf-cap {
  display: grid;
  align-items: start;
}

.py-wf-st {
  grid-area: 1 / 1;
  transition: opacity .3s ease .08s, transform .45s var(--py-ease) .08s, visibility 0s;
}

.py-wf[data-wf-mode="acq"] .py-wf-st[data-wf-st="pay"],
.py-wf[data-wf-mode="pay"] .py-wf-st[data-wf-st="acq"] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .3s var(--py-ease), visibility 0s .2s;
  visibility: hidden;
}

.py-wf-h {
  font-size: var(--py-fs-5);
  font-weight: 700;
  line-height: 1.25;
}

.py-wf-sub {
  margin-top: 2px;
  color: var(--c-soft);
  font-size: 14px;
  line-height: 1.3;
}

.py-wf-sub.py-gain-t {
  font-weight: 700;
}

/* легенда — таблиця з чотирьох колонок (позначка, підпис, гроші, відсоток): числа двох рядків стоять рівно одне під одним */
.py-wf-lg {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: start;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
  font-size: var(--py-fs-5);
  line-height: 1.3;
}

.py-wf-lg li,
.py-lg-v {
  display: contents;
}

/* позначка легенди повторює клітинку: графітова ціла, м'ятна трохи менша */
.py-lg-sw {
  align-self: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--c-keep);
  transform: scale(.86);
}

.py-wf-lg li.is-l .py-lg-sw {
  background: var(--c-loss-fill);
  transform: none;
}

.py-lg-t {
  color: var(--c-soft);
}

.py-lg-v b,
.py-lg-p {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.py-lg-w {
  grid-column: span 2;
  color: var(--c-soft);
  white-space: nowrap;
}

.py-lg-p {
  min-width: 5ch;
  color: var(--c-gain);
}

.py-wf-lg li.is-l .py-lg-p {
  color: var(--c-loss);
}

/* ---------- Гроші: «залишається у вас» — другий рівень (мʼятна плитка, велике число), місяць і рік — дрібним рядком збоку ---------- */

.py-calc-nums {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 6px clamp(14px, 2.4vw, 28px);
  align-items: center;
}

.py-calc-nums .py-calc-keep {
  grid-area: 1 / 1 / 3 / 2;
  padding: clamp(10px, 1.5vh, 16px) clamp(14px, 1.3vw, 20px);
  border-radius: 18px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

.py-calc-m {
  grid-area: 1 / 2;
}

.py-calc-y {
  grid-area: 2 / 2;
}

.py-calc-m,
.py-calc-y {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
}

.py-calc-nums dt {
  color: var(--c-soft);
  font-size: 14px;
  line-height: 1.3;
}

.py-calc-nums dd {
  font-size: clamp(16px, 3cqw, 19px);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.py-calc-keep dt {
  color: inherit;
  opacity: .8;
}

/* число в одну строку: розмір іде від ширини колонки результатів (cqw) і довжини числа (--len, ставить js), щоб
   «249 600 грн» не ламалося на ноутбуках, а дуже велике число стискалося, а не вилазило з плитки */
.py-calc-nums .py-calc-keep dd {
  margin-top: 2px;
  font-size: clamp(14px, calc(100cqw / var(--len, 14)), 34px);
  letter-spacing: -.025em;
  line-height: 1.1;
}

/* Фраза: поруч невидима найдовша форма («60 товарів»), тож рядків завжди стільки, скільки треба найдовшій */
.py-calc-phrase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font-size: var(--py-fs-4);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.py-calc-phrase > span {
  grid-area: 1 / 1;
}

.py-calc-phrase b {
  color: var(--c-loss);
}

.py-ghost {
  visibility: hidden;
  pointer-events: none;
}

.py-calc-share-row {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.py-calc-share-row .py-btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: var(--py-fs-5);
}

.py-calc-out .py-actions {
  margin-top: 0;
}

.py-calc-out .py-btn {
  min-height: 52px;
}

.py-calc-copied {
  color: var(--c-soft);
  font-size: var(--py-fs-5);
}

/* ---------- Каскад у результатах: лише при зміні галузі (клас is-swap ставить js на клік пресета) ----------
   Кожен блок м'яко «оновлюється» (легке просідання й зсув), крок між блоками 60 мс; смуга й сітка стартують разом зі своїм
   блоком, числа в js рахуються з тією самою затримкою (CONFIG.stepMs). */

.py-calc-big,
.py-calc-warn {
  --k: 0;
}

.py-bar-row {
  --k: 1;
}

.py-wf {
  --k: 2;
}

.py-calc-keep {
  --k: 3;
}

.py-calc-m {
  --k: 4;
}

.py-calc-y {
  --k: 5;
}

.py-calc-phrase {
  --k: 6;
}

.py-calc-out .py-actions {
  --k: 7;
}

@keyframes py-refresh {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  28% {
    opacity: .6;
    transform: translateY(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.py-calc-box.is-swap .py-calc-big,
.py-calc-box.is-swap .py-calc-warn,
.py-calc-box.is-swap .py-bar-row,
.py-calc-box.is-swap .py-wf,
.py-calc-box.is-swap .py-calc-nums > div,
.py-calc-box.is-swap .py-calc-phrase,
.py-calc-box.is-swap .py-calc-out .py-actions {
  animation: py-refresh .76s var(--py-ease) calc(var(--k, 0) * 60ms) both;
}

/* ---------- Стани ---------- */

.py-calc-box.is-ready [data-out] {
  font-variant-numeric: tabular-nums;
}

.py-calc-presets button:focus-visible,
.py-rates button:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

/* hidden не повинен перебиватися display із pay.css */
[data-calc-copied][hidden] {
  display: none !important;
}

/* Попередження про збиток лежить в одній клітинці з великим числом і навіть сховане займає своє місце: висота картки
   не змінюється, коли цифри йдуть у збиток і назад (на вузькому екрані воно вище за число). */
.py-calc-box .py-calc-warn[hidden] {
  display: block !important;
  visibility: hidden;
}

/* =====================================================================
   4б. ХВИЛЯ МАРЖІ: частка прибутку, яку забирає комісія, за різної маржі
   Окрема секція #margins після калькулятора: біла картка-поле на всю ширину. Угорі ліворуч назва, праворуч велике число
   («частка при вашій маржі»), нижче через усю ширину хвиля-площа в п'яти колонках (маржа 30/20/15/10/5%), під кожною
   колонкою число частки й підпис маржі. Форму хвилі (SVG-шлях) веде js/pay-calc.js пружинами; тут лише вигляд і поява.
   ===================================================================== */

.py-wave-sec {
  padding-top: clamp(24px, 4vh, 48px);
}

.py-margins {
  --plot: clamp(130px, 25vh, 260px);
  --head: 52px;
  --tip-w: min(232px, calc(100vw - 96px));

  /* глибока графітова панель: токени розділу перевернуто лише тут, мʼятний лишається акцентом «лишається у вас» */
  --c-panel: #1b1e1c;
  --c-ink: #fff;
  --c-bg: #1b1e1c;
  --c-soft: rgba(255, 255, 255, .7);
  --c-loss: #fff;
  --c-loss-fill: #fff;

  box-sizing: border-box;
  margin: 0;
  padding: clamp(22px, min(3.2vw, 5vh), 48px) clamp(18px, 3.4vw, 56px) clamp(18px, 2.4vh, 36px);
  border-radius: var(--py-r-card);
  background: var(--c-panel);
  color: var(--c-ink);
}

.py-margins-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px clamp(24px, 4vw, 72px);
  align-items: end;
}

.py-margins figcaption .py-h2 {
  max-width: 12em;
  margin: 0;
}

.py-margins-note {
  margin: 14px 0 0;
  color: var(--c-soft);
  font-size: var(--py-fs-5);
}

.py-margins-now {
  justify-self: end;
  max-width: min(22em, 100%);
}

/* число стоїть угорі, підпис під ним: вузький підпис ніколи не виходить за краї панелі */
.py-now {
  display: block;
  margin: 0;
}

.py-now[hidden] {
  display: none;
}

.py-now-big {
  display: block;
  font-size: clamp(72px, min(8.6vw, 17vh), 150px);
  font-weight: var(--py-h-w);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: .9;
  white-space: nowrap;
}

.py-now-cap {
  display: block;
  max-width: 17em;
  margin-top: clamp(8px, 1.4vh, 14px);
  overflow-wrap: break-word;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

.py-now-cap span {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.py-now-cap--solo {
  grid-column: 1 / -1;
  max-width: 14em;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: var(--py-h-w);
  letter-spacing: var(--py-h-ls);
  line-height: 1.12;
}

/* поле хвилі: SVG лежить за колонками, колонки (li) зверху; угорі запас --head під мітку «ваша маржа» */
.py-mwave {
  position: relative;
  margin-top: clamp(4px, 1.5vh, 20px);
}

.py-wave-svg {
  position: absolute;
  top: var(--head);
  left: 0;
  width: 100%;
  height: var(--plot);
  overflow: visible;
  clip-path: inset(-12px 0 0 0);
  transition: clip-path 1.6s var(--py-ease);
}

.py-wave-area {
  opacity: .96;
}

.py-margins-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.py-margins-bars li {
  --d: 0ms;

  position: relative;
  display: grid;
  grid-template-rows: calc(var(--head) + var(--plot)) auto auto;
  justify-items: center;
  border-radius: 14px;
  font-variant-numeric: tabular-nums;
  outline: 0;
}

/* лише коротка риска на базовій лінії під центром колонки (вертикалей крізь графік нема) */
.py-margins-bars li::before {
  content: "";
  position: absolute;
  top: calc(var(--head) + var(--plot));
  left: 50%;
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, .32);
}

/* підсвітка колонки на наведення/фокус: світла вуаль на хвилі */
.py-margins-bars li::after {
  content: "";
  position: absolute;
  top: var(--head);
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.py-margins-bars li:hover::after,
.py-margins-bars li:focus::after,
.py-margins-bars li.is-open::after {
  opacity: 1;
}

.py-margins-bars li:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

/* число частки під колонкою: велике, лічиться разом із хвилею (у DOM воно перед полем, на екрані в рядку 2) */
.py-margins-bars b {
  grid-row: 2;
  margin-top: clamp(8px, 2vh, 18px);
  color: var(--c-soft);
  font-size: clamp(22px, min(3.1vw, 7vh), 52px);
  font-weight: var(--py-h-w);
  letter-spacing: -.035em;
  line-height: 1.05;
  transition: color .3s ease, opacity .6s ease var(--d), transform .8s var(--py-ease) var(--d);
}

.py-margins-bars li:hover b,
.py-margins-bars li:focus b,
.py-margins-bars li.is-open b {
  color: var(--c-ink);
}

.py-margins-bars li.is-you b {
  color: var(--c-accent);
}

.py-mplot {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  display: block;
  width: 100%;
  height: calc(var(--head) + var(--plot));
}

.py-mlab {
  grid-row: 3;
  margin-top: 6px;
  color: var(--c-soft);
  font-size: var(--py-fs-5);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: color .3s ease, opacity .6s ease var(--d), transform .8s var(--py-ease) var(--d);
}

.py-mv {
  display: block;
}

.py-margins-bars li.is-you .py-mlab {
  color: var(--c-accent);
  font-weight: 700;
}

/* «ваша маржа»: крапка на хвилі (центр крапки рівно на кривій), вертикаль до осі, м'ятна мітка над крапкою */
.py-mdot {
  position: absolute;
  bottom: calc(var(--s, 0) * var(--plot));
  left: 50%;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 3px solid var(--c-panel);
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0;
  transform: translate(-50%, 50%) scale(.4);
  transition: opacity .3s ease, transform .5s var(--py-ease);
}

.py-mplot::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: calc(var(--s, 0) * var(--plot));
  background: var(--c-accent);
  opacity: 0;
  transform: translateX(-50%) scaleY(.2);
  transform-origin: bottom;
  transition: opacity .3s ease, transform .6s var(--py-ease);
}

.py-margins-bars li.is-you .py-mdot {
  opacity: 1;
  transform: translate(-50%, 50%);
}

.py-margins-bars li.is-you .py-mplot::after {
  opacity: .7;
  transform: translateX(-50%);
}

.py-myou {
  position: absolute;
  bottom: calc(var(--s, 0) * var(--plot) + 18px);
  left: 50%;
  box-sizing: border-box;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--py-r-chip);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .35s ease, transform .5s var(--py-ease);
}

.py-margins-bars li.is-you .py-myou {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Підказка: над крапкою своєї колонки (позиція від --s), з хвостиком, що показує на хвилю. Тіло вирівнюється
   по центру або до краю (крайні колонки), тож екран її не обрізає. */
.py-mtip {
  position: absolute;
  right: 0;
  bottom: calc(var(--s, 0) * var(--plot) + 16px);
  left: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4));
  translate: 0 6px;
  transition: opacity .16s ease, translate .16s var(--py-ease);
}

.py-margins-bars li.is-you .py-mtip {
  bottom: calc(var(--s, 0) * var(--plot) + 52px);
}

.py-mtip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 2px;
  background: var(--c-ink);
  transform: rotate(45deg);
}

.py-mtip-box {
  box-sizing: border-box;
  flex: none;
  width: var(--tip-w);
  padding: 10px 14px 12px;
  border-radius: 12px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.py-mtip-h {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.py-mtip-t {
  display: block;
  margin-top: 2px;
  opacity: .84;
}

.py-margins-bars li:first-child .py-mtip {
  justify-content: flex-start;
}

.py-margins-bars li:last-child .py-mtip {
  justify-content: flex-end;
}

.py-margins-bars li:hover .py-mtip,
.py-margins-bars li:focus .py-mtip,
.py-margins-bars li.is-open .py-mtip {
  opacity: 1;
  translate: 0 0;
}

/* Esc прибирає підказку, поки курсор не зайде в колонку знову */
.py-margins.is-quiet .py-margins-bars li .py-mtip {
  opacity: 0;
  translate: 0 6px;
}

/* Поява (один раз, коли блок у кадрі; клас is-pre ставить js, без нього або без руху все стоїть одразу): назва й число
   сходинкою; хвиля «наливається» зліва направо (clip-path), числа колонок спалахують услід за фронтом хвилі (крок
   240 мс), «ваша» крапка й мітка з'являються останніми. is-done знімає затримки, щоб оновлення даних були без черги. */
.py-margins figcaption,
.py-margins-now {
  transition: opacity .7s ease var(--d, 0ms), transform .9s var(--py-ease) var(--d, 0ms);
}

@media (prefers-reduced-motion: no-preference) {
  /* початковий стан ставиться миттєво: без цього js, що додає is-pre вже після першого розрахунку стилів, запустив би
     перехід «видно → сховано» */
  .py-margins.is-pre,
  .py-margins.is-pre *,
  .py-margins.is-pre *::before,
  .py-margins.is-pre *::after {
    transition: none !important;
  }

  .py-margins.is-pre figcaption,
  .py-margins.is-pre .py-margins-now {
    opacity: 0;
    transform: translateY(16px);
  }

  .py-margins.is-pre .py-wave-svg {
    clip-path: inset(-12px 100% 0 0);
  }

  .py-margins.is-pre .py-margins-bars b,
  .py-margins.is-pre .py-mlab {
    opacity: 0;
    transform: translateY(10px);
  }

  .py-margins.is-pre .py-margins-bars li.is-you .py-mdot {
    opacity: 0;
    transform: translate(-50%, 50%) scale(.4);
  }

  .py-margins.is-pre .py-margins-bars li.is-you .py-myou {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  .py-margins.is-pre .py-margins-bars li.is-you .py-mplot::after {
    opacity: 0;
    transform: translateX(-50%) scaleY(.2);
  }

  .py-margins.is-in:not(.is-done) figcaption {
    --d: 0ms;
  }

  .py-margins.is-in:not(.is-done) .py-margins-now {
    --d: 160ms;
  }

  .py-margins.is-in:not(.is-done) .py-margins-bars li {
    --d: calc(380ms + var(--i, 0) * 240ms);
  }

  .py-margins.is-in:not(.is-done) .py-margins-bars li.is-you .py-mdot,
  .py-margins.is-in:not(.is-done) .py-margins-bars li.is-you .py-myou,
  .py-margins.is-in:not(.is-done) .py-margins-bars li.is-you .py-mplot::after {
    transition-delay: 1700ms;
  }
}

/* ---------- Адаптив ---------- */

/* невисокі екрани ноутбуків: картка калькулятора вміщається у висоту вікна */
@media (min-width: 993px) and (max-height: 800px) {
  .py-calc-box {
    margin-top: 24px;
    padding: 16px 24px 20px;
  }

  .py-calc-presets {
    margin-bottom: 14px;
  }

  .py-calc-presets button {
    min-height: 34px;
  }

  .py-field input[type="number"] {
    height: 40px;
    font-size: 20px;
  }

  .py-calc-in {
    gap: 10px;
  }

  .py-calc-big-t {
    font-size: 18px;
  }

  .py-calc-warn {
    padding: 12px 18px;
    font-size: 18px;
  }

  .py-calc-nums dt {
    font-size: 13px;
  }

  .py-calc-nums dd {
    font-size: clamp(15px, 2.8cqw, 18px);
  }

  .py-calc-nums .py-calc-keep dd {
    font-size: clamp(14px, calc(100cqw / var(--len, 14)), 30px);
  }

  .py-calc-phrase {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .py-calc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .py-calc-out {
    position: static;
  }

  .py-margins-top {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .py-margins-now {
    justify-self: start;
  }

}

@media (max-width: 767px) {
  /* попередження займає місце наперед (див. вище), тож на вузькому екрані воно не вище за велике число */
  .py-calc-warn {
    padding: 14px 16px;
    font-size: 17px;
  }

  .py-calc-nums {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 8px;
  }

  .py-calc-nums .py-calc-keep {
    grid-area: auto;
    order: -1;
  }

  .py-calc-m,
  .py-calc-y {
    grid-area: auto;
  }

  .py-calc-nums dd {
    font-size: var(--py-fs-4);
  }

  .py-calc-nums .py-calc-keep dd {
    font-size: clamp(14px, calc(170cqw / var(--len, 14)), 32px);
  }

  /* сітка: перемикач на всю ширину, нижче сітка ліворуч і легенда праворуч */
  .py-wf {
    --wf: min(132px, 36vw);

    grid-template-columns: var(--wf) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
  }

  .py-wf-side {
    display: contents;
  }

  .py-seg {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
  }

  .py-seg button {
    min-height: 40px;
    padding: 0 8px;
  }

  .py-wf-grid {
    grid-row: 2;
    grid-column: 1;
  }

  .py-wf-cap {
    grid-row: 2;
    grid-column: 2;
  }

  .py-wf-h {
    font-size: 14px;
  }

  .py-wf-sub {
    font-size: 13px;
  }

  /* у вузькій колонці кожен рядок легенди — підпис, під ним гроші (без відсотків: їх каже велике число, а клітинок
     стільки ж, скільки відсотків); перенос підпису не залежить від цифр, тож висота не міняється між галузями */
  .py-wf-lg {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
  }

  .py-wf-lg li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 8px;
    align-items: baseline;
  }

  .py-lg-v {
    display: block;
    grid-column: 2;
  }

  .py-lg-p {
    display: none;
  }

  .py-lg-w {
    white-space: normal;
  }

  .py-margins {
    --plot: 140px;
    --head: 46px;

    padding: 24px 14px 18px;
  }

  .py-margins-bars b {
    margin-top: 14px;
    font-size: 21px;
    letter-spacing: -.04em;
  }

  .py-mlab {
    font-size: 12px;
  }

  .py-myou {
    height: 24px;
    padding: 0 9px;
    font-size: 11px;
    line-height: 24px;
  }

  .py-now-big {
    font-size: clamp(64px, 21vw, 96px);
  }

  .py-now-cap {
    font-size: 14px;
  }

  .py-margins-bars li:nth-child(2) .py-mtip {
    justify-content: flex-start;
  }

  .py-margins-bars li:nth-child(4) .py-mtip {
    justify-content: flex-end;
  }

  .py-rg {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* зовсім вузькі екрани: підпис кнопки з числом може лягти в три рядки, тож місце під них резервуємо наперед */
@media (max-width: 340px) {
  .py-calc-out .py-btn {
    min-height: 60px;
  }
}

@media (max-width: 600px) {
  .py-bar-cap {
    flex-direction: column;
    align-items: flex-start;
  }

  .py-bar-part {
    display: block;
  }

  .py-dot {
    display: none;
  }
}

/* режим високого контрасту: клітинки лишають свої кольори (без цього всі стали б однаковими) */
@media (forced-colors: active) {
  .py-wf-grid i,
  .py-lg-sw {
    background: GrayText;
    forced-color-adjust: none;
  }

  .py-wf-grid i.is-l,
  .py-wf-lg li.is-l .py-lg-sw {
    background: Highlight;
  }

  /* мʼятний повзунок під сегментом у цьому режимі зникає: вибраний сегмент позначаємо рамкою */
  .py-seg button[aria-pressed="true"] {
    outline: 2px solid ButtonText;
    outline-offset: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .py-pill,
  .py-calc-presets button,
  .py-rates button,
  .py-seg-pill,
  .py-seg button,
  .py-wf-grid i,
  .py-wf-st,
  .py-rg-bub,
  .py-margins figcaption,
  .py-margins-now,
  .py-wave-svg,
  .py-margins-bars b,
  .py-mlab,
  .py-mdot,
  .py-mplot::after,
  .py-myou,
  .py-mtip,
  .py-margins-bars li::after,
  .py-margins-bars li {
    transition: none !important;
  }

  .py-rg input[type="range"]::-webkit-slider-thumb {
    transition: none !important;
  }

  .py-rg input[type="range"]::-moz-range-thumb {
    transition: none !important;
  }

  .py-calc-box.is-swap .py-calc-big,
  .py-calc-box.is-swap .py-calc-warn,
  .py-calc-box.is-swap .py-bar-row,
  .py-calc-box.is-swap .py-wf,
  .py-calc-box.is-swap .py-calc-nums > div,
  .py-calc-box.is-swap .py-calc-phrase,
  .py-calc-box.is-swap .py-calc-out .py-actions {
    animation: none !important;
  }
}

/* =====================================================================
   ТЕЛЕФОН (до 767px)
   Своя композиція, а не стиснутий десктоп: заголовок (коротший варіант .py-calc-hm, той самий зміст) і лід → галузі
   одним рядком, що гортається → графітова «лупа»: велике число, перемикач, сітка 10×10 на всю ширину, рік →
   картка полів (підпис і значення в рядок, повзунок на всю ширину під ними) → смужка маржі .py-ms (замість секції
   #margins, тут вона схована) → фраза, кнопка, джерело. Смуга чека, місячна сума й довга кнопка «Скопіювати
   посилання» на телефоні не показуються. Липкий рядок результату .py-calc-mini стоїть під шапкою, поки «лупа» поза
   кадром, а поля в кадрі (js/pay-calc.js).
   Розкладка: коробка калькулятора розчиняється, .py-calc-out — display: contents, тож його блоки й поля стають
   рядками однієї сітки .py-calc-grid: 1 число, 2 сітка, 3 рік, 4 поля, 5 смужка маржі, 6 фраза, 7 кнопка. Колонки
   1 і 3 (по 20px) — поля «лупи»; її графітове тло — псевдоелемент сітки на рядках 1–3. Висоти — у px, без vh: адресний
   рядок телефона не смикає розкладку.
   ===================================================================== */

@media (max-width: 767px) {
  /* лід на телефоні не показується: ту саму обіцянку з цифрами дає плитка «лишається у вас» у «лупі» */
  .py-calc > .py-wrap > .py-h2:not(.py-calc-hm),
  .py-calc > .py-wrap > .py-lead {
    display: none;
  }

  .py-wave-sec {
    display: none;
  }

  .py-calc-box {
    margin-top: 28px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent; /* синій прямокутник дотику лягав поверх пілюль і підкладки, що їде */
  }

  /* Жодного жовтого. main.css фарбує будь-яку button:hover жовтим (0,2,1), а на дотику :hover залипає після тапу:
     у :hover кожен елемент керування тримає колір свого стану (специфічність 0,3,1 і 0,4,1). Жовту пляму ::before
     прибирає правило «.py-calc-box button…::before» угорі файла. */
  .py-calc-box .py-calc-presets button:hover,
  .py-calc-box .py-rates button:hover,
  .py-calc-box .py-seg button:hover,
  .py-calc-box .py-ms-col:hover {
    color: var(--c-soft);
  }

  .py-calc-box .py-calc-presets button[aria-pressed="true"]:hover,
  .py-calc-box .py-rates button[aria-pressed="true"]:hover,
  .py-calc-box .py-seg button[aria-pressed="true"]:hover {
    color: var(--c-btn-ink);
  }

  .py-calc-box .py-ms-col[aria-pressed="true"]:hover,
  .py-calc-box .py-calc-share-m:hover {
    color: var(--c-ink);
  }

  .py-calc-box .py-calc-mini-b:hover {
    color: var(--lens-soft);
  }

  /* ---------- Галузі: один рядок на всю ширину екрана, гортається; згасання — з того боку, де ще є кнопки ---------- */

  .py-calc-presets {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 calc(-1 * var(--py-x)) 16px;
    padding: 0 var(--py-x);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--py-x);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
  }

  .py-calc-presets::-webkit-scrollbar {
    display: none;
  }

  .py-calc-presets.is-more-l {
    --fade-l: 32px;
  }

  .py-calc-presets.is-more-r {
    --fade-r: 32px;
  }

  .py-calc-presets button {
    flex: none;
    min-height: var(--py-tap);
    padding: 0 18px;
  }

  /* ---------- Сітка розділу й «лупа» ---------- */

  .py-calc-grid {
    --lens-bg: #292929;
    --lens-ink: #f4f4f1;
    --lens-soft: #bdbdbd;
    --lens-ghost: rgba(255, 255, 255, .08);
    --lens-line: rgba(255, 255, 255, .12);

    position: relative;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    grid-template-rows: repeat(7, auto);
    gap: 0;
  }

  .py-calc-out,
  .py-calc-nums {
    display: contents;
  }

  .py-calc-grid::before {
    content: "";
    grid-row: 1 / 4;
    grid-column: 1 / -1;
    align-self: stretch;
    border-radius: var(--py-r-m);
    background: var(--lens-bg);
  }

  /* блоки «лупи» беруть токени темного поля: світле число й підписи, «забирає» — світлі клітинки, «лишається» — м'ятні */
  .py-calc-big,
  .py-calc-warn,
  .py-wf,
  .py-calc-y,
  .py-calc-keep {
    --c-ink: var(--lens-ink);
    --c-soft: var(--lens-soft);
    --c-loss: var(--lens-ink);
    --c-loss-fill: var(--lens-ink);
    --c-ghost: var(--lens-ghost);
    --c-panel: var(--lens-bg);
    --c-gain: var(--c-accent);

    grid-column: 2;
    color: var(--c-ink);
  }

  .py-calc-big,
  .py-calc-warn,
  .py-calc-y {
    grid-row: 1;
    margin-top: 24px;
  }

  .py-calc-share {
    font-size: 64px;
    line-height: 64px;
    letter-spacing: -.045em;
    white-space: nowrap;
  }

  .py-calc-big-t {
    margin-top: 6px;
    font-size: var(--py-fs-4);
    font-weight: 600;
    line-height: 1.3;
  }

  .py-calc-warn {
    padding: 14px 16px;
    border-radius: 16px;
    font-size: var(--py-fs-4);
  }

  /* смуга чека схована, але лишається в розкладці (нульової висоти): її й далі веде пружина (--cost-f) */
  .py-bars {
    position: absolute;
    grid-row: 1;
    grid-column: 2;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }

  .py-bar {
    height: 20px;
  }

  /* перемикач над сіткою, сітка на всю ширину «лупи» (клітинка ≈ 24–28px), підпис і легенда під нею */
  .py-wf {
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    margin-top: 20px;
  }

  .py-seg {
    grid-row: 1;
    grid-column: 1;
    padding: 0;
  }

  .py-seg button {
    min-height: var(--py-tap);
    padding: 0 8px;
  }

  .py-seg-pill {
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 6px);
  }

  .py-wf[data-wf-mode="pay"] .py-seg-pill {
    transform: translateX(calc(100% + 6px));
  }

  .py-wf-grid {
    grid-row: 2;
    grid-column: 1;
    gap: 4px;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .py-wf-grid i {
    border-radius: 4px;
  }

  .py-wf-cap {
    grid-row: 3;
    grid-column: 1;
  }

  /* Підпис сітки — один рядок легенди в обох станах: «забирає | лишається»; у стані «З Wepster Pay» праворуч від
     «лишається» стоїть «індивідуальні умови, від 0%». Заголовки станів і «1 клітинка = 1%» на телефоні сховані:
     легенда з гривнями (15 + 85 = 100) читає сітку сама. */
  .py-wf-h,
  .py-wf-st[data-wf-st="acq"] .py-wf-sub {
    display: none;
  }

  .py-wf-st[data-wf-st="pay"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-items: start;
  }

  .py-wf-st[data-wf-st="pay"] .py-wf-lg {
    grid-row: 1;
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
  }

  .py-wf-st[data-wf-st="pay"] .py-wf-sub {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
    font-size: var(--py-fs-5);
    line-height: 1.3;
  }

  /* дві колонки за вмістом: від 390px підписи в рядок, на вужчому екрані переносяться (висота стала для ширини) */
  .py-wf-lg {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 0 20px;
    margin-top: 0;
    font-size: var(--py-fs-5);
  }

  .py-wf-lg li {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
  }

  .py-lg-t {
    grid-row: 1;
    grid-column: 2;
    line-height: 1.3;
  }

  .py-lg-v {
    grid-row: 2;
    grid-column: 2;
    font-size: var(--py-fs-4);
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  .py-lg-v b {
    text-align: left;
  }

  .py-lg-w {
    color: var(--c-ink);
    white-space: nowrap;
  }

  /* Гроші за рік. Список .py-calc-nums розчинено (display: contents): «еквайринг за рік» стоїть праворуч від великого
     числа (одна пара «відсоток — гривні»), м'ятна плитка «лишається у вас» закриває «лупу». Місячна сума схована.
     У збитку рядок року ховається: на його місці попередження. */
  .py-calc-m {
    display: none;
  }

  .py-calc-y {
    display: block;
    justify-self: end;
    align-self: start;
    padding-top: 6px;
    text-align: right;
  }

  .py-calc-box.is-loss .py-calc-y {
    visibility: hidden;
  }

  .py-calc-nums dt {
    font-size: var(--py-fs-5);
    line-height: 1.3;
  }

  .py-calc-y dd {
    margin-top: 2px;
    font-size: var(--py-fs-4);
    line-height: 1.3;
  }

  /* order: 0 — без цього плитка (order −1 з розділу вище) малювалась би під графітовим тлом */
  .py-calc-nums .py-calc-keep {
    order: 0;
    grid-row: 3;
    grid-column: 2;
    margin: 20px 0 24px;
    padding: 12px 16px 14px;
    border-radius: 16px;
  }

  /* підпис плитки рівними рядками, назва продукту не рветься */
  .py-calc-nums .py-calc-keep dt {
    text-wrap: balance;
  }

  .py-calc-keep dt .notranslate {
    white-space: nowrap;
  }

  /* число в один рядок; рядок сталої висоти, тож довге число лише дрібнішає, а висота «лупи» не змінюється */
  .py-calc-nums .py-calc-keep dd {
    margin-top: 4px;
    font-size: min(30px, calc(150cqw / var(--len, 14)));
    line-height: 34px;
  }

  /* ---------- Поля: біла картка, підпис і значення в рядок, повзунок на всю ширину під ними ---------- */

  .py-calc-in {
    grid-row: 4;
    grid-column: 1 / -1;
    gap: 0;
    margin-top: 16px;
    padding: 4px 20px 8px;
    border-radius: var(--py-r-m);
    background: var(--c-panel);
  }

  .py-calc-in > .py-field + .py-field,
  .py-calc-in > .py-calc-share-row {
    border-top: 1px solid var(--c-line);
  }

  .py-field:not(.py-field--more) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 10px 0;
  }

  .py-field:not(.py-field--more) > .py-field-row {
    display: contents;
  }

  .py-field:not(.py-field--more) > label {
    grid-row: 1;
    grid-column: 1;
    line-height: 1.3;
  }

  .py-field-hint {
    display: block;
    margin: 2px 0 0;
    font-size: var(--py-fs-5);
  }

  /* значення: поле 44px, число праворуч, одиниця — усередині поля (поверх нього, дотик проходить до поля) */
  .py-field input[type="number"] {
    width: 132px;
    height: var(--py-tap);
    padding: 0 46px 0 12px;
    border-radius: 12px;
    font-size: 20px;
    text-align: right;
    scroll-margin-top: calc(var(--py-top) + 72px);
    scroll-margin-bottom: 24px;
  }

  .py-field:not(.py-field--more) input[type="number"],
  .py-field:not(.py-field--more) .py-unit {
    grid-row: 1;
    grid-column: 2;
  }

  .py-unit {
    justify-self: end;
    box-sizing: border-box;
    width: 42px;
    padding-left: 2px;
    font-size: var(--py-fs-5);
    pointer-events: none;
  }

  /* вузький телефон: поле вужче, щоб підпис «Витрати на одиницю» лишався в один рядок */
  @media (max-width: 374px) {
    .py-field input[type="number"] {
      width: 120px;
      padding: 0 38px 0 8px;
      font-size: 18px;
    }

    .py-unit {
      width: 36px;
    }
  }

  .py-rg {
    --thumb: 28px;

    grid-row: 2;
    grid-column: 1 / -1;
    min-width: 0;
    margin: 6px 0 -4px;
  }

  .py-rg input[type="range"] {
    scroll-margin-top: calc(var(--py-top) + 72px);
  }

  /* тариф: сегменти 1,3 / 1,5 / 2,0 на всю ширину, м'ятна підкладка їде під вибраним (без вибору — ховається) */
  .py-rates {
    position: relative;
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 10px 0 0;
    border-radius: var(--py-r-chip);
    background: var(--c-ghost);
  }

  /* сегменти прозорі: сіра доріжка — сам .py-rates; власний напівпрозорий фон кнопок лягав поверх підкладки, що їде,
     і, згасаючи (.2s), давав на ній темну смугу на межі сегментів */
  .py-rates button {
    min-height: var(--py-tap);
    padding: 0;
    background: transparent;
  }

  /* Підкладка під вибраним тарифом. Номер сегмента (--ri) ставить js лише тоді, коли тариф вибрано: якщо в полі своє
     значення, підкладка гасне на місці (is-on знято), а не їде до краю; коли тариф знову вибрано, вона стає під нього
     без руху (is-snap на один перерахунок стилів) і з'являється. Між тарифами — один рух transform-ом. Без js (немає
     is-js) вибраний сегмент просто м'ятний. */
  .py-rates.is-js::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(100% / 3 - 6px);
    border-radius: var(--py-r-chip);
    background: var(--c-btn-bg);
    opacity: 0;
    transform: translateX(calc(var(--ri, 0) * (100% + 6px)));
    transition: transform .45s var(--py-ease), opacity .2s ease;
  }

  .py-rates.is-js.is-on::before {
    opacity: 1;
  }

  .py-rates.is-js.is-snap::before {
    transition: none;
  }

  .py-rates.is-js button[aria-pressed="true"] {
    background: transparent;
  }

  /* «Детальніше»: рядок 44px зі стрілкою, згорнутий; поле фіксованої плати — під ним */
  .py-field--more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--py-tap);
    padding: 4px 0;
    line-height: 1.3;
    list-style: none;
  }

  .py-field--more summary::-webkit-details-marker {
    display: none;
  }

  .py-field--more summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s var(--py-ease);
  }

  .py-field--more[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .py-field--more .py-field-row {
    display: grid;
    justify-content: start;
    margin: 0 0 12px;
  }

  .py-field--more .py-field-row > * {
    grid-area: 1 / 1;
  }

  /* «Поділитися розрахунком» — невелика текстова кнопка замість довгої «Скопіювати посилання» */
  .py-calc-share-row {
    gap: 0;
  }

  .py-calc-share-row .py-btn {
    display: none;
  }

  .py-calc-share-m {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--py-tap);
    padding: 4px 0;
    font-size: var(--py-fs-5);
    font-weight: 700;
  }

  .py-calc-share-m svg {
    flex: none;
    width: 18px;
    height: 18px;
  }

  .py-calc-copied {
    padding-bottom: 10px;
    line-height: 1.4;
  }

  /* ---------- Смужка маржі (замість секції #margins): п'ять колонок, ваша м'ятна, речення вибраної під ними ---------- */

  .py-ms {
    grid-row: 5;
    grid-column: 1 / -1;
    margin: 32px 0 0;
  }

  .py-ms-h {
    max-width: 15em;
    font-size: var(--py-fs-3);
    line-height: 1.25;
    letter-spacing: -.02em;
  }

  .py-ms-cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 16px -4px 0;
  }

  .py-ms-col {
    --bar: 48px;

    position: relative;
    display: grid;
    grid-template-rows: calc(var(--bar) + 28px) auto;
    min-width: 0;
    min-height: var(--py-tap);
    padding: 4px 4px 10px;
    border-radius: 16px;
    color: var(--c-soft);
    font-variant-numeric: tabular-nums;
    transition: background-color .2s ease, color .2s ease;
  }

  .py-ms-col[aria-pressed="true"] {
    background: var(--c-panel);
    color: var(--c-ink);
  }

  .py-ms-plot {
    position: relative;
    grid-row: 1;
    grid-column: 1;
  }

  /* стовпець росте transform-ом від --s (0…1, веде пружина) */
  .py-ms-bar {
    position: absolute;
    right: 6px;
    bottom: 0;
    left: 6px;
    height: var(--bar);
    border-radius: 4px;
    background: var(--c-cost);
    transform: scaleY(var(--s, 0));
    transform-origin: bottom;
  }

  .py-ms-col[aria-pressed="true"] .py-ms-bar {
    background: var(--c-ink);
  }

  .py-ms-col.is-you .py-ms-bar {
    background: var(--c-accent);
  }

  /* число над стовпцем їде разом із його верхом */
  .py-ms-v {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    font-size: var(--py-fs-4);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
    transform: translateY(calc(var(--s, 0) * var(--bar) * -1 - 6px));
  }

  .py-ms-col[aria-pressed="true"] .py-ms-v,
  .py-ms-col.is-you .py-ms-v {
    color: var(--c-ink);
  }

  .py-ms-l {
    grid-row: 2;
    margin-top: 8px;
    font-size: var(--py-fs-5);
    line-height: 1.25;
    text-align: center;
  }

  .py-ms-w,
  .py-ms-y,
  .py-ms-m {
    display: block;
  }

  .py-ms-y,
  .py-ms-col.is-you .py-ms-w {
    display: none;
  }

  .py-ms-col.is-you .py-ms-y {
    display: block;
    color: var(--c-ink);
    font-weight: 700;
  }

  .py-ms-m {
    color: var(--c-ink);
    font-weight: 700;
    white-space: nowrap;
  }

  .py-ms-say {
    min-height: calc(2em * 1.35);
    margin-top: 12px;
    font-size: var(--py-fs-4);
    line-height: 1.35;
  }

  /* ---------- Фраза, кнопка, джерело ---------- */

  .py-calc-phrase {
    grid-row: 6;
    grid-column: 1 / -1;
    margin-top: 28px;
    font-size: var(--py-fs-4);
  }

  .py-calc-out .py-actions {
    grid-row: 7;
    grid-column: 1 / -1;
    margin-top: 16px;
  }

  /* підпис кнопки в один рядок від 360px навіть із «249 600 грн» */
  .py-calc-out .py-btn {
    gap: 10px;
    min-height: 56px;
    padding-left: 20px;
    letter-spacing: -.02em;
  }

  .py-calc-out .py-btn-dot {
    width: 40px;
    height: 40px;
  }

  .py-calc .py-note {
    margin-top: 24px;
  }

  /* ---------- Липкий рядок результату ----------
     Нульової висоти елемент на всіх рядках сітки, прилипає під шапкою; сам рядок — кнопка поверх, з'являється класом is-on. */
  .py-calc-mini {
    position: sticky;
    top: calc(var(--py-top) + 8px);
    z-index: 6;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    align-self: start;
    height: 0;
  }

  .py-calc-mini-b {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 4px 0 20px;
    border-radius: var(--py-r-chip);
    background: var(--lens-bg);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .55);
    color: var(--lens-soft);
    font-size: var(--py-fs-5);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .35s var(--py-ease), visibility 0s .35s;
  }

  .py-calc-mini.is-on .py-calc-mini-b {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .35s var(--py-ease), visibility 0s;
  }

  .py-calc-mini-b b {
    color: var(--lens-ink);
    font-size: var(--py-fs-4);
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .py-calc-mini-loss {
    display: none;
    color: var(--lens-ink);
  }

  .py-calc-box.is-loss .py-calc-mini-ok {
    display: none;
  }

  .py-calc-box.is-loss .py-calc-mini-loss {
    display: inline;
  }

  .py-calc-mini-up {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-accent-ink);
  }

  .py-calc-mini-up svg {
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
  }

  .py-calc-mini-b:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
  }
}

/* найвужчі телефони (320px): рядок не влазить — слово «прибутку» лишається у великій «лупі», тут лише число */
@media (max-width: 359px) {
  .py-calc-mini-w {
    display: none;
  }
}

/* елементи, які будує лише телефон: на ширших екранах їх немає */
@media (min-width: 768px) {
  .py-calc-hm,
  .py-calc-mini,
  .py-calc-share-m,
  .py-ms {
    display: none;
  }
}

@media (max-width: 767px) and (forced-colors: active) {
  .py-ms-bar {
    background: GrayText;
    forced-color-adjust: none;
  }

  .py-ms-col.is-you .py-ms-bar,
  .py-ms-col[aria-pressed="true"] .py-ms-bar {
    background: Highlight;
  }

  .py-ms-col[aria-pressed="true"],
  .py-rates button[aria-pressed="true"] {
    outline: 2px solid ButtonText;
    outline-offset: -2px;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .py-calc-mini-b,
  .py-ms-col,
  .py-rates.is-js::before,
  .py-field--more summary::after {
    transition: none !important;
  }
}