/* Aroken — /web, #installment «Как работает рассрочка» (визуал 22.09; логика — js/installment.js, математика — js/plan-math.js).
   Вместо трёх плоских карточек — предметы на графитовом столе:
   (а) чековый принтер: графитовая планка с кнопками срока 12/18/24 и лаймовым индикатором, из-под неё «печатается» бумажный чек — моноширинные строки
       с точечными отбивками (Стоимость · Рассрочка · 1-й месяц · Далее · Переплата), зубчатый край; оба «0 ₽» после печати обводит лаймовый маркер;
       ссылка в оформление — последней строкой. Смена срока: строки срока и платежа печатаются заново слева направо;
   (б) лента платежей: term + 1 ячеек одной высоты — «0 ₽», два белых платежа за учёбу из своих, дальше месяцы работы по очереди наливаются лаймом:
       в каждую падает «монета» заказа, скорость налива — от дохода месяца (20–30 → 40–50 → 70–100 тыс.); подробный график дохода — в #calc ниже;
   (в) банки: пять бумажных карт стопкой, как в кошельке — Т-Банк спереди (через него уходит заявка), у остальных виден край с логотипом;
       Яндекс Сплит — отдельной картой рядом: это другой путь, «или частями».
   Движение: печать — clip-path шагами (как термопринтер), клетки и стопки — с задержками по --i / --k, карты выезжают из-за передней;
   всё гаснет при prefers-reduced-motion (чек напечатан целиком). Без JS класс .is-armed не ставится — всё видно сразу. Размеры карт — в em от --fk. */

.installment__desk { margin-top: 40px; display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
@media (min-width: 1800px) { .installment__desk { gap: 40px 96px; } }
@media (max-width: 1279px) { .installment__desk { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 32px 40px; } }
@media (max-width: 1023px) { .installment__desk { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 28px 32px; } }

/* ---------- (а) Принтер: планка с кнопками срока, щель, из которой выходит чек ---------- */
.installment__printer { position: relative; min-width: 0; }
.installment__slot { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px 10px 20px; border-radius: 20px 20px 8px 8px; background: linear-gradient(180deg, #202229 0%, #15161A 60%, #0C0D10 100%); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 30px -14px rgba(0, 0, 0, .7); }
/* щель принтера — тёмная полоса под планкой, бумага выходит из-под неё */
.installment__slot::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -5px; height: 5px; border-radius: 0 0 4px 4px; background: #050506; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9); }
.installment__terms-label { font-size: 13px; line-height: 16px; font-weight: 500; color: rgba(255, 255, 255, .56); white-space: nowrap; }
.installment__terms { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.installment__term { min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .72); font: 500 14px/20px var(--font); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.installment__term:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.installment__term[aria-pressed="true"] { background: var(--paper-1); color: var(--ink); font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.installment__term:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 999px; }
/* индикатор принтера: горит лаймом, во время печати мигает */
.installment__led { margin-left: auto; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(199, 255, 46, .8), 0 0 2px rgba(199, 255, 46, 1); }
.installment__desk.is-printing .installment__led { animation: inst-led .32s steps(2, end) infinite; }
@keyframes inst-led { to { opacity: .25; } }

/* бумага: обёртка держит тень (drop-shadow повторяет зубчатый край), сам чек — маска с зубцами внизу */
.installment__paper { position: relative; z-index: 1; margin: -6px 12px 0; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)) drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.receipt { position: relative; padding: 32px 26px 26px; color: var(--ink); font: 400 14px/20px var(--mono); background: var(--paper); border-radius: 2px 2px 0 0;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / 18px 9px repeat-x; }
.receipt__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px dashed rgba(23, 24, 28, .3); }
.receipt__logo { width: 22px; height: 22px; flex: none; filter: brightness(0); opacity: .86; } /* логотип белый — на бумаге печатаем его чёрным */
.receipt__brand { font-weight: 500; letter-spacing: .02em; }
.receipt__kind { margin-left: auto; font-size: 11px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: rgba(23, 24, 28, .55); }
.receipt__title { margin-top: 18px; font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.receipt__sub { margin-top: 2px; font-size: 12px; line-height: 18px; color: rgba(23, 24, 28, .58); }
.receipt__rows { margin: 16px 0 0; display: grid; gap: 8px; }
.receipt__row { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.receipt__row dt { flex: 1 1 auto; display: flex; align-items: baseline; gap: 6px; min-width: 0; color: rgba(23, 24, 28, .72); white-space: nowrap; }
.receipt__row dt::after { content: ""; flex: 1 1 12px; min-width: 12px; border-bottom: 2px dotted rgba(23, 24, 28, .3); transform: translateY(-4px); }
.receipt__row dd { margin: 0; flex: none; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt__row--pay dd { font-size: 16px; }
.receipt__row--pay dd small { font-size: 14px; font-weight: 400; color: rgba(23, 24, 28, .7); }
/* лаймовый маркер по «0 ₽»: неровная полоса наискось под цифрой, как от руки */
.receipt__row--mark dd { position: relative; isolation: isolate; font-weight: 600; }
.receipt__row--mark dd::before { content: ""; position: absolute; z-index: -1; left: -.35em; right: -.35em; top: .16em; bottom: -.1em; border-radius: .12em .4em .18em .3em / .3em .14em .35em .12em; background: rgba(199, 255, 46, .92); transform: rotate(var(--mr, -1.6deg)); transform-origin: 0 50%; }
.receipt__row--mark + .receipt__row--pay + .receipt__row--mark dd { --mr: 1.2deg; } /* второй штрих — с другим наклоном */
.receipt__foot { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(23, 24, 28, .3); }
/* заявка — текстовой ссылкой, не кнопкой: главная кнопка экрана — «Оформить онлайн» в карточке цены выше */
/* «Оформить рассрочку на 24 месяца» — Primary экрана решения (CRO-аудит 22.09, п. 2): лаймовая кнопка во всю ширину чека; ведёт в модалку заявки
   с курсом, рассрочкой и сроком (js/main.js guessPlan), потом в оформление. Док акции над #installment уходит сам — одна Primary на экран */
.installment__cta { position: relative; display: block; width: 100%; height: auto; min-height: 56px; padding: 16px 60px 16px 19px; font-family: var(--font); line-height: 24px; text-align: left; white-space: normal; } /* текст одной строкой с числом срока (оно отдельным span), стрелка справа */
.installment__cta .btn__arrow { position: absolute; right: 9px; top: 50%; margin-top: -19px; }
.installment__cta:hover .btn__arrow { transform: translateX(3px); }
.installment__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- (б) Лента платежей: ячейки одной высоты — платежи равные; «0 ₽», белые — из своих за учёбу, лаймовые — налиты заказами.
   Налив — ::after снизу вверх, перед ним в ячейку падает «монета» заказа (::before); скорость налива задаёт скрипт по доходу месяца (--pd / --pt, с) ---------- */
.installment__strip { --g: 4px; --cell-h: clamp(44px, calc(3.6vw / var(--z, 1)), 68px); position: relative; display: grid; grid-template-columns: 2.4fr repeat(var(--n1, 24), minmax(0, 1fr)); grid-template-rows: auto var(--cell-h) auto; gap: 8px var(--g); align-items: end; }
.strip__cell { grid-row: 2; position: relative; align-self: stretch; border-radius: 4px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.strip__cell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 100%; }
.strip__cell--study::after { background: linear-gradient(180deg, #FEFDF9, #E4DED2); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.strip__cell--work::after { background: linear-gradient(180deg, #D9FF6B 0%, var(--lime) 55%, #A9DD14 100%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), 0 0 12px rgba(199, 255, 46, .3); }
.strip__cell--free { display: grid; place-items: center; background: none; box-shadow: inset 0 0 0 1.5px var(--lime); color: var(--lime); font: 500 13px/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.strip__cell--free::after { content: none; }
.strip__income { grid-row: 1; align-self: end; font: 500 12px/16px var(--mono); color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__cap { grid-row: 3; align-self: start; font: 500 12px/16px var(--font); color: rgba(255, 255, 255, .56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__cap--work { color: rgba(199, 255, 46, .82); }

/* ---------- (в) Банки: подпись и кошелёк — пять карт стопкой (Т-Банк спереди), Сплит — отдельной картой ---------- */
.installment__banks { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.installment__banks-note { max-width: 400px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .62); text-wrap: pretty; }
.installment__banks-note b { display: block; margin-bottom: 6px; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.015em; color: #fff; }
/* --p — место в стопке: 0 — самая дальняя (выше всех), 4 — передняя (Т-Банк); у дальних карт виден верхний край с логотипом */
.installment__logos { --fk: clamp(12px, calc(.95vw / var(--z, 1)), 16px); --peek: 1.9em; position: relative; margin: 0; padding: 0; list-style: none; width: 25.4em; height: calc(var(--peek) * 4 + 8.8em); font-size: var(--fk); justify-self: end; }
.installment__logo { position: absolute; left: 0; top: calc(var(--p) * var(--peek)); z-index: calc(var(--p) + 1); width: 14em; height: 8.8em; padding: .42em 1em; border-radius: .8em; background: linear-gradient(135deg, #FEFDF9 0%, #F5F1E8 60%, #ECE6DB 100%); box-shadow: 0 -.1em .5em rgba(0, 0, 0, .28), 0 .9em 1.4em -.7em rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(23, 24, 28, .06); transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); transition: transform .45s var(--spring); }
.installment__logo img { display: block; width: auto; height: 1.05em; max-width: 9em; object-fit: contain; object-position: left center; }
.installment__logo:nth-child(1) { --p: 4; padding: 1em 1.1em; }
.installment__logo:nth-child(1) img { height: 2.1em; max-width: 8em; }
/* передняя карта — Т-Банк: чип внизу слева, чтобы стопка читалась как кошелёк с картами */
.installment__logo:nth-child(1)::after { content: ""; position: absolute; left: 1.1em; bottom: 1.1em; width: 2.1em; height: 1.6em; border-radius: .32em; background: linear-gradient(90deg, transparent 32%, rgba(23, 24, 28, .16) 32% 36%, transparent 36% 64%, rgba(23, 24, 28, .16) 64% 68%, transparent 68%), linear-gradient(180deg, transparent 46%, rgba(23, 24, 28, .16) 46% 54%, transparent 54%), linear-gradient(135deg, #E9DFC7, #D6C8A6); box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .12); }
.installment__logo:nth-child(2) { --p: 3; }
/* у МТС в png белый фон и широкие поля: крупнее, со сдвигом на поля, белое «пропадает» в бумаге через multiply */
.installment__logo:nth-child(2) img { height: 1.75em; max-width: none; margin: -.34em 0 0 -.4em; mix-blend-mode: multiply; }
.installment__logo:nth-child(3) { --p: 2; }
.installment__logo:nth-child(4) { --p: 1; }
.installment__logo:nth-child(5) { --p: 0; }
/* Сплит — отдельно от стопки, чуть повёрнут: «или частями» — другой путь */
.installment__logo:nth-child(6) { --p: 5; --r: 6deg; left: 15.6em; top: calc(var(--peek) * 4 + 1.2em); width: 9.4em; height: 5.9em; display: grid; place-items: center; padding: 0; }
.installment__logo:nth-child(6) img { height: 1.6em; max-width: 6.6em; object-position: center; }
@media (hover: hover) {
  .installment__logo:nth-child(n+2):nth-child(-n+5):hover { --y: -.7em; }
  .installment__logo:nth-child(6):hover { --r: 2deg; --y: -.3em; }
}

/* оговорка: одна строка мелко, с меткой «!» */
.installment__fine { position: relative; max-width: 940px; margin-top: 28px; padding-left: 26px; font-size: 13px; line-height: 19px; color: var(--muted); text-wrap: pretty; }
.installment__fine::before { content: "!"; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 11px; line-height: 1; font-weight: 700; }

/* ---------- Движение. .is-armed ставит скрипт до появления в зоне видимости — предметы спрятаны; .is-on — сцена пошла:
   чек печатается шагами сверху вниз, маркер проходит по «0 ₽», ячейки ленты появляются, месяцы работы по очереди наливаются заказами
   (первый — медленнее всех: доход ещё 20–30 тыс.); карты выезжают из-за передней. Смена срока (.is-reprint): изменившиеся строки чека
   допечатываются слева направо (чек целиком не прячется — ссылка кликабельна), лента — те же кадры короче.
   Тайминги — переменные сцены: --c0/--ci ячейки, --l0 строка дохода, --p0 начало налива, --ps его скорость, --m0 маркер ---------- */
@media (prefers-reduced-motion: no-preference) {
  .installment__desk.is-on { --c0: .2s; --ci: 28ms; --l0: .9s; --p0: 1.2s; --ps: 1; --m0: 1.35s; }
  .installment__desk.is-reprint { --c0: .05s; --ci: 12ms; --l0: .2s; --p0: .5s; --ps: .6; }
  .installment__desk.is-armed .installment__paper { clip-path: inset(0 0 100% 0); }
  .installment__desk.is-on .installment__paper { animation: inst-print 1.3s steps(24, end) both; }
  /* перепечатка: строка «Рассрочка», строка платежа и срок в ссылке — clip слева направо шагами, как печатающая головка */
  .installment__desk.is-reprint .receipt__row:has([data-plan-term-text]), .installment__desk.is-reprint .receipt__row--pay, .installment__desk.is-reprint [data-plan-buy-term] { animation: inst-type .42s steps(12, end) both; }
  .installment__desk.is-reprint .receipt__row--pay { animation-delay: .14s; }
  .installment__desk.is-reprint [data-plan-buy-term] { display: inline-block; animation-delay: .3s; }
  .installment__desk.is-armed .receipt__row--mark dd::before { transform: rotate(var(--mr, -1.6deg)) scaleX(0); }
  .installment__desk.is-on .receipt__row--mark dd::before { animation: inst-mark .3s cubic-bezier(.5, 0, .2, 1) var(--m0) both; }
  .installment__desk.is-on .receipt__row--mark + .receipt__row--pay + .receipt__row--mark dd::before { animation-delay: calc(var(--m0) + .22s); }
  /* ячейки: появляются по одной пустыми, учебные сразу белые; рабочие по очереди наливаются лаймом — после «монеты» заказа */
  .installment__desk.is-armed .strip__cell, .installment__desk.is-armed .strip__income { opacity: 0; }
  .installment__desk.is-on .strip__cell, .installment__desk.is-reprint .strip__cell { animation: inst-cell .4s var(--spring) calc(var(--c0) + var(--i, 0) * var(--ci)) both; }
  .installment__desk.is-on .strip__income, .installment__desk.is-reprint .strip__income { animation: inst-fade .5s var(--ease) var(--l0) both; }
  .installment__desk.is-armed .strip__cell--work::after { transform: scaleY(0); }
  .installment__desk.is-on .strip__cell--work::after, .installment__desk.is-reprint .strip__cell--work::after { animation: inst-fill calc(var(--pt, .1) * var(--ps) * 1s) cubic-bezier(.3, 0, .45, 1) calc(var(--p0) + var(--pd, 0) * var(--ps) * 1s) both; }
  .installment__desk.is-on .strip__cell--work::before, .installment__desk.is-reprint .strip__cell--work::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(199, 255, 46, .9); opacity: 0; animation: inst-coin .32s cubic-bezier(.5, 0, .9, .6) calc(var(--p0) + var(--pd, 0) * var(--ps) * 1s - .26s) both; }
  /* карты: передняя поднимается первой, остальные выезжают из-за неё вверх на свои места; Сплит ложится рядом последним */
  .installment__desk.is-armed .installment__logo { opacity: 0; }
  .installment__desk.is-on .installment__logo { animation: inst-deal .7s var(--spring) calc(.6s + (4 - var(--p)) * .12s) both; }
  .installment__desk.is-on .installment__logo:nth-child(1) { animation-name: inst-front; animation-delay: .45s; }
  .installment__desk.is-on .installment__logo:nth-child(6) { animation-name: inst-aside; animation-delay: 1.35s; }
  /* после раздачи — обычные переходы на наведение */
  .installment__desk.is-done .installment__logo { animation: none; }
}
@keyframes inst-print { from { clip-path: inset(0 -40px 100% -40px); } to { clip-path: inset(0 -40px -40px -40px); } }
@keyframes inst-type { from { clip-path: inset(-4px 100% -4px 0); } to { clip-path: inset(-4px -4px -4px 0); } }
@keyframes inst-mark { from { transform: rotate(var(--mr, -1.6deg)) scaleX(0); } to { transform: rotate(var(--mr, -1.6deg)) scaleX(1); } }
@keyframes inst-cell { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes inst-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes inst-coin { 0% { opacity: 0; transform: translateY(-26px); } 30% { opacity: 1; } 90% { opacity: 1; transform: translateY(calc(var(--cell-h) - 10px)); } 100% { opacity: 0; transform: translateY(calc(var(--cell-h) - 10px)); } }
@keyframes inst-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes inst-front { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } }
@keyframes inst-deal { from { opacity: 0; transform: translateY(calc((4 - var(--p)) * var(--peek))); } 20% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes inst-aside { from { opacity: 0; transform: translate(3em, .6em) rotate(18deg); } to { opacity: 1; transform: rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) {
  .installment__term, .installment__cta, .installment__logo { transition: none; }
  .installment__desk.is-printing .installment__led { animation: none; }
}

/* ---------- Ноутбук, планшет и телефон ---------- */
@media (max-width: 1279px) {
  .installment__banks { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
  .installment__logos { justify-self: start; --fk: clamp(12px, 1.2vw, 14px); }
}
@media (max-width: 1023px) {
}
@media (max-width: 767px) {
  .installment__desk { margin-top: 28px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .installment__printer { max-width: 440px; }
  .installment__slot { min-height: 60px; padding: 8px 12px 8px 16px; gap: 10px; }
  .installment__terms { flex: 1 1 auto; }
  .installment__term { flex: 1 1 0; min-height: 44px; padding: 0 8px; }
  .installment__led { display: none; } /* на телефоне место кнопкам срока: по 44 px каждой */
  .installment__paper { margin: -6px 8px 0; }
  .receipt { padding: 26px 20px 22px; font-size: 13px; line-height: 19px; }
  .receipt__title { font-size: 15px; line-height: 21px; }
  .receipt__rows { gap: 7px; }
  .receipt__row--pay dd { font-size: 15px; }
  .receipt__row--pay dd small { font-size: 13px; }
  /* «Оформить рассрочку» — кнопкой 48 px (тап-зона, мобильный аудит 19.09) */
  .installment__cta { font-size: 15px; line-height: 20px; }
  /* лента: клетки мельче, подписи мельче */
  .installment__strip { --g: 2px; --cell-h: 36px; gap: 6px var(--g); grid-template-columns: 3fr repeat(var(--n1, 24), minmax(0, 1fr)); }
  .strip__cell { border-radius: 2px; }
  .strip__cell--free { font-size: 10px; }
  .strip__income { font-size: 11px; line-height: 14px; white-space: normal; } /* «заказы в среднем» — строкой выше цифр: вместе на 390 не влезали */
  .strip__income-lead { display: block; }
  .strip__cap { font-size: 11px; line-height: 14px; }
  .installment__desk.is-on .strip__cell--work::before, .installment__desk.is-reprint .strip__cell--work::before { width: 5px; height: 5px; margin-left: -2.5px; }
  .installment__banks { margin-top: 32px; }
  .installment__banks-note b { font-size: 18px; line-height: 24px; }
  .installment__logos { --fk: clamp(10px, 3.3vw, 13px); }
  .installment__fine { margin-top: 24px; }
}

/* ---------- Экран «Учись сейчас — плати потом» (владелец, 22.09: «один экран — один смысл», текста минимум, визуал крупно):
   на широких чек, лента и карты крупнее; подпись к банкам — одна строка («Одна заявка — пять банков. Или частями через Яндекс Сплит»),
   названия банков — на самих картах ---------- */
.installment__banks-note b { font-size: 24px; line-height: 30px; }
.installment__banks-note { font-size: 16px; line-height: 22px; }
@media (min-width: 1440px) {
  .installment__desk { margin-top: 48px; grid-template-columns: minmax(400px, 500px) minmax(0, 1fr); }
  .installment__slot { min-height: 70px; }
  .installment__term { min-height: 40px; padding: 0 16px; font-size: 15px; }
  .receipt { padding: 36px 30px 30px; font-size: 15px; line-height: 22px; }
  .receipt__title { font-size: 18px; line-height: 24px; }
  .receipt__sub { font-size: 13px; }
  .receipt__rows { margin-top: 18px; gap: 10px; }
  .receipt__row--pay dd { font-size: 18px; }
  .installment__cta { font-size: 16px; }
  .installment__strip { --cell-h: clamp(56px, calc(4.4vw / var(--z, 1)), 88px); }
  .strip__cell--free { font-size: 15px; }
  .strip__income, .strip__cap { font-size: 13px; line-height: 18px; }
  .installment__banks { margin-top: 56px; }
  .installment__logos { --fk: clamp(14px, calc(1.08vw / var(--z, 1)), 19px); }
}
/* карта Сплита влетает справа (inst-aside, +3em) — на 1536 это шире поля контейнера: режем по краю секции, прокрутки вбок нет */
.installment { overflow-x: clip; }
/* ритм (css/main.css): секция и так не меньше кадра — поле меньше, чтобы чек, лента и карты вставали в один кадр на 1536 × 864 */
@media (min-width: 1024px) { .installment { --section-pad: clamp(48px, calc(var(--screen-h) * .06), 88px); } }