/* ==========================================================================
   credcalco.ru — стили (макет v1, тема «банковский документ»)
   --------------------------------------------------------------------------
   Бумага, бутылочно-зелёный, золото и гильош как на банкнотах.
   Результат — чек с печатью «Переплата». Один файл на сайт.

     1. Шрифты      5. Первый экран      9. Контентные блоки
     2. Токены      6. Формы            10. Сеть, купон, подвал
     3. База        7. Калькулятор      11. Плашка, тост, печать
     4. Шапка       8. Чек и график     12. Адаптив
   ========================================================================== */

/* ---------- 1. Шрифты ---------- */
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/commissioner-cyrillic.woff2') format('woff2-variations'), url('../fonts/commissioner-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/commissioner-latin-ext.woff2') format('woff2-variations'), url('../fonts/commissioner-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/commissioner-latin.woff2') format('woff2-variations'), url('../fonts/commissioner-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/playfair-display-cyrillic.woff2') format('woff2-variations'), url('../fonts/playfair-display-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2-variations'), url('../fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2-variations'), url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2-variations'), url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2-variations'), url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 2. Токены ---------- */
:root {
  color-scheme: light;

  --green: #0e4b36;           /* бутылочный — основной цвет домена */
  --green-2: #186649;
  --green-deep: #0a2f22;
  --green-soft: color-mix(in srgb, #186649 12%, transparent);
  --gold: #b8862f;
  --gold-2: #d9ae5c;
  --gold-soft: #efe0bd;
  --stamp: #b3362a;
  --principal: #186649;       /* график: основной долг */
  --interest: #d2a24c;        /* график: проценты */

  --bg: #f3efe4;
  --bg-alt: #ebe5d6;
  --surface: #fffcf4;
  --surface-2: #f8f3e7;
  --surface-3: #ede6d5;
  --line: #ddd3bf;
  --line-strong: #c3b79f;
  --text: #13241c;
  --text-2: #4c5a52;
  --text-3: #858f88;

  --primary: var(--green);    /* кнопки и активные элементы */
  --primary-ink: #f4ecd8;
  --accent-text: var(--green-2);

  /* Чек — всегда бумажный */
  --paper: #fffdf6;
  --paper-ink: #1b2a22;
  --paper-dim: #6c766f;

  --font: 'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Playfair Display', 'Commissioner', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --radius-lg: 10px;
  --radius: 6px;
  --container: 1200px;
  --gutter: 16px;
  --header-h: 70px;
  --focus: 0 0 0 3px color-mix(in srgb, var(--gold-2) 55%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1411; --bg-alt: #111a16; --surface: #131c18; --surface-2: #18231e; --surface-3: #1f2c26;
    --line: #24332c; --line-strong: #36493f; --text: #ebe7da; --text-2: #a9b3ab; --text-3: #75817a;
    --primary: var(--gold-2); --primary-ink: #13241c; --accent-text: var(--gold-2);
    --green-soft: color-mix(in srgb, #d9ae5c 12%, transparent); --principal: #3a9b74;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1411; --bg-alt: #111a16; --surface: #131c18; --surface-2: #18231e; --surface-3: #1f2c26;
  --line: #24332c; --line-strong: #36493f; --text: #ebe7da; --text-2: #a9b3ab; --text-3: #75817a;
  --primary: var(--gold-2); --primary-ink: #13241c; --accent-text: var(--gold-2);
  --green-soft: color-mix(in srgb, #d9ae5c 12%, transparent); --principal: #3a9b74;
}

/* ---------- 3. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, .tip__num, .stamp__value, .coupon__title { font-variant-numeric: lining-nums; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--text); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--gold-soft); color: #13241c; }
[hidden] { display: none !important; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--primary); color: var(--primary-ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }
.section { padding-block: 72px; }
.section--alt { background: var(--bg-alt); }
.section__head { max-width: 780px; margin-bottom: 34px; }
.eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  font: 500 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--gold);
}
.eyebrow::before { content: ''; width: 32px; height: 1px; background: currentColor; }
.section__title { font: 500 clamp(30px, 4.4vw, 50px)/1.08 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--radius);
  font-weight: 600; font-size: 15px; line-height: 1; transition: background-color .2s, color .2s, border-color .2s;
}
.btn--block { width: 100%; }
.btn--gold { background: var(--gold-2); color: #13241c; }
.btn--gold:hover { background: #e7c27a; color: #13241c; }
.btn--ghost-light { color: #f4ecd8; border: 1px solid rgb(244 236 216 / .35); }
.btn--ghost-light:hover { border-color: #f4ecd8; color: #fff; }
.btn--outline { border: 1px dashed var(--line-strong); color: var(--text-2); }
.btn--outline:hover { border-color: var(--text); color: var(--text); border-style: solid; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); color: var(--text-2); }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn .icon { width: 22px; height: 22px; }

/* ---------- 4. Шапка ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--bg);
  padding-top: env(safe-area-inset-top);
  border-bottom: 3px double transparent; transition: border-color .25s;
}
.site-header.is-scrolled { border-bottom-color: var(--line-strong); }
.site-header__inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.site-header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); flex: none; }
.logo:hover { color: var(--text); }
.logo__mark { width: 40px; height: 40px; }
.logo__text { font: 600 25px/1 var(--font-display); letter-spacing: -.01em; }
.logo__text i { color: var(--gold); }
.logo__text small { font: 500 12px/1 var(--font-mono); color: var(--text-3); margin-left: 3px; }
.logo--light { color: #f4ecd8; }
.logo--light:hover { color: #fff; }
.nav { margin-left: 30px; }
.nav__list { display: flex; gap: 4px; }
.nav__link { display: block; padding: 10px 12px; color: var(--text-2); font-weight: 500; font-size: 15px; position: relative; }
.nav__link:hover { color: var(--text); }
.nav__link.is-current { color: var(--text); }
.nav__link.is-current::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold); }
/* Переключатель темы: капсула «солнце | луна», иконки встроены в кнопку */
.theme-switch {
  --sw-border: var(--text-2); --sw-bg: var(--surface); --sw-knob: var(--gold-2);
  --sw-icon: var(--text-3); --sw-icon-on: #13241c;
  display: inline-grid; place-items: center; height: 44px; padding: 0 4px; flex: none;
}
.theme-switch__track {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 62px; height: 32px; padding: 0 7px;
  border: 1.5px solid var(--sw-border); border-radius: 16px; background: var(--sw-bg);
  transition: border-color .2s;
}
.theme-switch:hover .theme-switch__track { border-color: var(--text); }
.theme-switch:focus-visible { box-shadow: none; }
.theme-switch:focus-visible .theme-switch__track { box-shadow: var(--focus); }
.theme-switch__knob {
  position: absolute; left: 2px; top: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sw-knob); box-shadow: 0 1px 3px rgb(0 0 0 / .3);
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1);
}
.theme-switch__icon {
  position: relative; z-index: 1; width: 16px; height: 16px;
  fill: none; stroke: var(--sw-icon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .3s;
}
.theme-switch__icon--sun { stroke: var(--sw-icon-on); }
:root[data-theme="dark"] .theme-switch__knob { transform: translateX(29px); }
:root[data-theme="dark"] .theme-switch__icon--sun { stroke: var(--sw-icon); }
:root[data-theme="dark"] .theme-switch__icon--moon { stroke: var(--sw-icon-on); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-switch__knob { transform: translateX(29px); }
  :root:not([data-theme="light"]) .theme-switch__icon--sun { stroke: var(--sw-icon); }
  :root:not([data-theme="light"]) .theme-switch__icon--moon { stroke: var(--sw-icon-on); }
}
.nav-toggle { display: none; }

/* ---------- 5. Первый экран ---------- */
.hero { padding: 26px 0 40px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text-3); margin-bottom: 20px; }
.crumbs a { color: var(--text-2); }
.hero__kicker { font: 500 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--gold); margin-bottom: 16px; }
.hero__title { font: 500 clamp(40px, 6.6vw, 80px)/1.02 var(--font-display); letter-spacing: -.025em; max-width: 13ch; text-wrap: balance; }
.hero__title em { font-style: italic; color: var(--green-2); text-decoration: underline; text-decoration-color: var(--gold-2); text-decoration-thickness: .06em; text-underline-offset: .12em; }
:root[data-theme="dark"] .hero__title em { color: var(--gold-2); text-decoration-color: var(--green-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__title em { color: var(--gold-2); text-decoration-color: var(--green-2); } }
.hero__lead { max-width: 620px; margin-top: 22px; font-size: clamp(16px, 2vw, 19px); color: var(--text-2); }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; font: 500 14px/1.3 var(--font-mono); }
.hero__facts li::before { content: '✓ '; color: var(--gold); }

.rosette {
  position: relative; display: grid; place-items: center; align-content: center;
  width: clamp(240px, 26vw, 340px); aspect-ratio: 1; border-radius: 50%;
  background: url('../img/guilloche.svg') center / 100% no-repeat, radial-gradient(circle, var(--surface) 0 52%, transparent 53%);
}
.rosette__num {
  display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: var(--green); color: var(--gold-2); border: 3px solid var(--gold-2); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--gold);
  font: 500 clamp(56px, 6vw, 80px)/1 var(--font-display);
}
.rosette__cap { position: absolute; bottom: 4%; font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--text-3); background: var(--bg); padding: 4px 8px; }

/* ---------- 6. Формы ---------- */
.field { display: grid; gap: 8px; min-width: 0; }
.field + .field, .field-row + .field, .field + .field-row, .field + .early { margin-top: 26px; }
.field__label { font: 500 12px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }
.field__note { font-size: 13px; color: var(--text-3); line-height: 1.45; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.field-row .field + .field { margin-top: 0; }

.money { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--text); transition: border-color .2s; }
.money:focus-within { border-color: var(--gold); }
.money__input {
  width: 100%; min-width: 0; padding: 4px 0 6px; border: 0; background: none; outline: none;
  font: 500 clamp(36px, 4vw, 46px)/1.1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
}
.money__unit { font: 400 28px/1 var(--font); color: var(--text-3); }

.line-input { display: grid; gap: 6px; }
.line-input__row { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--text); padding-bottom: 4px; transition: border-color .2s; }
.line-input__row:focus-within { border-color: var(--gold); }
.line-input__input {
  width: 100%; min-width: 0; height: 46px; border: 0; background: none; outline: none;
  font: 500 30px/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.line-input__input::-webkit-outer-spin-button, .line-input__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.line-input__unit { font-size: 22px; color: var(--text-3); }

.input {
  width: 100%; height: 50px; padding: 0 2px; border: 0; border-bottom: 2px solid var(--text); border-radius: 0;
  background: none; font: 500 20px/1 var(--font); appearance: none; -webkit-appearance: none;
}
.input:focus { outline: none; border-color: var(--gold); }
.input::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
:root[data-theme="dark"] .input::-webkit-calendar-picker-indicator { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .input::-webkit-calendar-picker-indicator { filter: invert(1); } }

/* Ползунок: тонкая линия и золотой «ромб» */
.range { --p: 50%; width: 100%; height: 26px; margin: 4px 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--gold) var(--p), var(--line-strong) var(--p)); }
.range::-moz-range-track { height: 2px; background: var(--line-strong); }
.range::-moz-range-progress { height: 2px; background: var(--gold); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px;
  background: var(--gold-2); border: 2px solid var(--green); border-radius: 3px; transform: rotate(45deg);
  transition: transform .15s;
}
.range::-moz-range-thumb { width: 14px; height: 14px; background: var(--gold-2); border: 2px solid var(--green); border-radius: 3px; transform: rotate(45deg); }
.range:active::-webkit-slider-thumb { transform: rotate(45deg) scale(1.2); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }

.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.quick button { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 13px/1 var(--font-mono); color: var(--text-2); }
.quick button:hover { border-color: var(--text); color: var(--text); }
.quick button.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.seg__btn { border-radius: var(--radius); transition: background-color .2s, color .2s, border-color .2s; }
.seg--mini { flex: none; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; }
.seg--mini .seg__btn { padding: 6px 12px; border-radius: 999px; font: 500 13px/1 var(--font-mono); color: var(--text-3); }
.seg--mini .seg__btn[aria-checked="true"] { background: var(--primary); color: var(--primary-ink); }
.seg--cards { gap: 10px; }
.seg--cards .seg__btn {
  display: grid; justify-items: start; gap: 4px; padding: 16px; text-align: left;
  border: 1.5px solid var(--line); background: var(--surface);
}
.seg--cards .seg__btn:hover { border-color: var(--line-strong); }
.seg--cards .seg__btn b { font-size: 16px; }
.seg--cards .seg__btn small { font-size: 13px; color: var(--text-3); line-height: 1.3; }
.seg--cards .seg__btn[aria-checked="true"] { border-color: var(--primary); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--primary); }

/* Мини-диаграммы платежей */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-bottom: 6px; }
.bars i { width: 7px; background: linear-gradient(to top, var(--principal) 0 55%, var(--interest) 55%); border-radius: 1px; }
.bars--flat i { height: 100%; }
.bars--flat i:nth-child(1) { background: linear-gradient(to top, var(--principal) 0 30%, var(--interest) 30%); }
.bars--flat i:nth-child(2) { background: linear-gradient(to top, var(--principal) 0 45%, var(--interest) 45%); }
.bars--flat i:nth-child(3) { background: linear-gradient(to top, var(--principal) 0 60%, var(--interest) 60%); }
.bars--flat i:nth-child(4) { background: linear-gradient(to top, var(--principal) 0 75%, var(--interest) 75%); }
.bars--flat i:nth-child(n + 5) { background: linear-gradient(to top, var(--principal) 0 88%, var(--interest) 88%); }
.bars--down i { background: linear-gradient(to top, var(--principal) 0 62%, var(--interest) 62%); }
.bars--down i:nth-child(1) { height: 100%; } .bars--down i:nth-child(2) { height: 88%; } .bars--down i:nth-child(3) { height: 77%; }
.bars--down i:nth-child(4) { height: 66%; } .bars--down i:nth-child(5) { height: 56%; } .bars--down i:nth-child(6) { height: 48%; }
.bars--down i:nth-child(7) { height: 42%; } .bars--down i:nth-child(8) { height: 37%; }
.bars--lg { height: 110px; gap: 8px; margin-bottom: 18px; }
.bars--lg i { flex: 1; width: auto; border-radius: 2px 2px 0 0; }

/* Досрочные погашения */
.early { margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--line-strong); }
.early__title { font: 500 22px/1.2 var(--font-display); margin-bottom: 14px; }
.early__hint { font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-left: 8px; }
.early__list { display: grid; gap: 10px; margin-bottom: 12px; }
.early__list:empty { display: none; }
.early-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 36px; align-items: center; gap: 10px 14px;
  padding: 12px 12px 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius);
  background: var(--surface-2); animation: slide-in .3s var(--ease);
}
.early-row__month { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.early-row input {
  width: 100%; min-width: 0; border: 0; border-bottom: 1.5px solid var(--line-strong); background: none; outline: none;
  font: 600 18px/1.4 var(--font); font-variant-numeric: tabular-nums; padding: 2px 0;
  -moz-appearance: textfield; appearance: textfield;
}
.early-row input:focus { border-color: var(--gold); }
.early-row input::-webkit-outer-spin-button, .early-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.early-row__monthnum { width: 48px !important; text-align: center; }
.early-row__sum { display: flex; align-items: baseline; gap: 4px; }
.early-row__sum span { color: var(--text-3); }
.early-row__remove { width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-3); border-radius: var(--radius); }
.early-row__remove:hover { color: var(--stamp); background: color-mix(in srgb, var(--stamp) 10%, transparent); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 7. Калькулятор ---------- */
.calc-section { padding-bottom: 24px; }
.calc {
  background: var(--surface); border: 1px solid var(--text);
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--line-strong), 0 30px 60px -30px rgb(19 36 28 / .35);
  border-radius: 2px; overflow: clip;
}
.calc__docline {
  display: flex; justify-content: space-between; gap: 12px; padding: 16px 30px 14px;
  font: 500 12px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-3);
  border-bottom: 1px dashed var(--line-strong); margin: 6px 6px 0;
}
.calc__body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.calc__form { padding: 26px 36px 36px; min-width: 0; }
.calc__result {
  position: relative; margin: 0 6px 0 0; padding: 34px 30px 30px; min-width: 0;
  background: url('../img/guilloche.svg') right -160px top -140px / 520px no-repeat, linear-gradient(160deg, #12573f, var(--green-deep));
  color: #f4ecd8;
}
.calc__note { display: flex; gap: 10px; margin: 0; padding: 18px 36px 26px; font-size: 13px; line-height: 1.5; color: var(--text-3); border-top: 1px dashed var(--line-strong); }
.calc__note .icon { width: 18px; height: 18px; margin-top: 1px; }

.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.tabs__btn { padding: 10px 0 12px; margin-bottom: -1px; font: 500 22px/1.2 var(--font-display); color: var(--text-3); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.tabs__btn:hover { color: var(--text); }
.tabs__btn[aria-selected="true"] { color: var(--text); border-bottom-color: var(--gold); }
.tabs__short { display: none; }

/* ---------- 8. Чек и график ---------- */
.receipt-wrap { filter: drop-shadow(0 18px 24px rgb(0 0 0 / .35)); max-width: 420px; margin: 0 auto; }
.receipt {
  position: relative; padding: 26px 26px 40px;
  background: var(--paper); color: var(--paper-ink); font-family: var(--font-mono);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
.receipt__head { display: grid; justify-items: center; gap: 4px; padding-bottom: 14px; border-bottom: 1.5px dashed #b9b2a2; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--paper-dim); }
.receipt__head b { font-size: 14px; letter-spacing: .32em; color: var(--paper-ink); }
.receipt__main { display: grid; justify-items: center; gap: 6px; padding: 20px 0 18px; text-align: center; }
.receipt__label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--paper-dim); }
.receipt__big { font: 500 clamp(40px, 4.4vw, 54px)/1 var(--font-display); color: #0e4b36; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.receipt__big small { font: 400 .55em/1 var(--font); color: var(--paper-dim); }
.receipt__sub { font-size: 12px; color: var(--paper-dim); }
.receipt__sub:empty { display: none; }
.receipt__rows { display: grid; gap: 9px; font-size: 13px; }
.receipt__rows div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  background: radial-gradient(circle, #a8a190 .8px, transparent 1.2px) left bottom 4px / 6px 3px repeat-x;
}
.receipt__rows dt, .receipt__rows dd { background: var(--paper); }
.receipt__rows dt { padding-right: 6px; color: var(--paper-dim); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.receipt__rows dd { padding-left: 6px; font-weight: 600; white-space: nowrap; text-align: right; }
.receipt__rows .is-red dd { color: var(--stamp); }
.receipt__rows .is-green dd { color: #186649; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed #b9b2a2; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.receipt__total b { font-size: 18px; letter-spacing: 0; white-space: nowrap; }
.receipt__split { display: flex; height: 8px; margin-top: 16px; background: #e8e2d3; }
.receipt__split-p { background: #186649; transition: width .5s var(--ease); }
.receipt__split-i { background: #d2a24c; transition: width .5s var(--ease); }
.receipt__legend { display: flex; gap: 16px; margin-top: 6px; font-size: 11px; color: var(--paper-dim); text-transform: uppercase; letter-spacing: .06em; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: 0; }
.dot--p { background: var(--principal); }
.dot--i { background: var(--interest); }
.receipt .dot--p { background: #186649; }
.receipt .dot--i { background: #d2a24c; }
.receipt__barcode {
  height: 42px; margin-top: 20px; margin-right: 128px;
  background: repeating-linear-gradient(90deg, #1b2a22 0 2px, transparent 2px 4px, #1b2a22 4px 5px, transparent 5px 8px, #1b2a22 8px 11px, transparent 11px 13px, #1b2a22 13px 14px, transparent 14px 17px);
}
.receipt__no { margin-top: 6px; margin-right: 128px; text-align: center; font-size: 11px; letter-spacing: .2em; color: var(--paper-dim); }

/* Печать «Переплата» */
.stamp {
  position: absolute; right: 14px; bottom: 26px;
  display: grid; place-items: center; align-content: center; gap: 2px;
  width: 124px; height: 124px; border-radius: 50%;
  color: var(--stamp); border: 3px double var(--stamp);
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px var(--stamp);
  transform: rotate(-14deg); opacity: .86; mix-blend-mode: multiply; pointer-events: none;
  text-transform: uppercase; text-align: center;
}
.stamp__top, .stamp__bottom { font: 600 10px/1 var(--font-mono); letter-spacing: .16em; }
.stamp__value { font: 600 30px/1 var(--font-display); }
.stamp.is-hit { animation: stamp .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes stamp { from { transform: rotate(-14deg) scale(1.6); opacity: 0; } }

.result-actions { display: flex; gap: 10px; justify-content: center; max-width: 420px; margin: 26px auto 0; }
.result-actions .btn { flex: 1; }

.calc__bottom { padding: 34px 36px 8px; border-top: 1px solid var(--line); margin: 0 6px; }
.chart-card__head, .schedule__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: 14px; }
.chart-card__title { font: 500 26px/1.15 var(--font-display); }
.chart-card__canvas { position: relative; height: 300px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; }
.legend__line { width: 20px; margin-right: 6px; border-top: 2px dashed var(--text-3); }

/* График платежей по годам */
.schedule { margin-top: 40px; }
.schedule__meta { font: 500 13px/1.2 var(--font-mono); color: var(--text-3); }
.schedule__years { border-top: 2px solid var(--text); }
.year { border-bottom: 1px solid var(--line); }
.year summary, .sched-head {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr 24px; align-items: center; gap: 12px;
  padding: 14px 4px; list-style: none; cursor: pointer;
  font: 500 14px/1.2 var(--font-mono); font-variant-numeric: tabular-nums;
}
.sched-head { cursor: default; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding-block: 10px; border-bottom: 1px solid var(--line); }
.year summary::-webkit-details-marker { display: none; }
.year summary:hover { background: var(--surface-2); }
.year summary b { font: 600 18px/1 var(--font-display); font-variant-numeric: lining-nums; }
.year summary .icon { width: 18px; height: 18px; color: var(--text-3); transition: rotate .2s; }
.year[open] summary .icon { rotate: 180deg; }
.year summary span:nth-child(n + 2), .sched-head span:nth-child(n + 2) { text-align: right; }
.months { margin-bottom: 12px; }
.month {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr 24px; gap: 12px; padding: 8px 4px;
  border-top: 1px dotted var(--line); font: 400 13px/1.3 var(--font-mono); font-variant-numeric: tabular-nums;
}
.month span { text-align: right; }
.month span:first-child { text-align: left; color: var(--text-3); }
.month small { font-size: 11px; color: var(--gold); }
.month.is-early { background: color-mix(in srgb, var(--gold-2) 18%, transparent); }
.month.is-early span:first-child { color: var(--text); font-weight: 600; }
.cell-interest { color: var(--gold); }
:root[data-theme="dark"] .cell-interest { color: var(--gold-2); }

/* ---------- 9. Контентные блоки ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; align-items: stretch; }
.compare__card { padding: 26px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); }
.compare__title { font: 500 26px/1.15 var(--font-display); margin-bottom: 10px; }
.compare__card p { color: var(--text-2); }
.compare__fact { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-strong); font-size: 14px; }
.compare__fact span { display: block; font: 500 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.formula {
  display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 28px;
  border-radius: var(--radius-lg); color: #f4ecd8;
  background: url('../img/guilloche.svg') right -120px bottom -140px / 380px no-repeat, var(--green);
}
.formula__cap { font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--gold-2); }
.formula__expr { display: flex; align-items: center; gap: 14px; font: 500 clamp(30px, 3.6vw, 40px)/1 var(--font-display); }
.frac { display: inline-grid; text-align: center; font-size: .72em; }
.frac span:first-child { padding: 0 8px 8px; border-bottom: 2px solid currentColor; }
.frac span:last-child { padding: 8px 8px 0; }
.frac sup { font-size: .6em; }
.formula__legend { display: grid; gap: 6px; font-size: 14px; }
.formula__legend div { display: flex; gap: 10px; }
.formula__legend dt { width: 16px; font: italic 600 17px/1.2 var(--font-display); color: var(--gold-2); }
.formula__legend dd { opacity: .85; }

.tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--text); }
.tip { padding: 26px 22px 10px 0; }
.tip + .tip { padding-left: 22px; border-left: 1px solid var(--line); }
.tip__num { display: block; font: italic 500 46px/1 var(--font-display); color: var(--gold); margin-bottom: 14px; }
.tip h3 { font-size: 18px; line-height: 1.3; margin-bottom: 8px; }
.tip p { color: var(--text-2); font-size: 15px; }

.faq { display: grid; border-top: 2px solid var(--text); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 2px; cursor: pointer; list-style: none; font: 500 21px/1.3 var(--font-display); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 30px; height: 30px; padding: 6px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); transition: rotate .25s var(--ease); }
.faq__item[open] summary .icon { rotate: 45deg; }
.faq__body { padding: 0 2px 22px; color: var(--text-2); max-width: 720px; }

/* ---------- 10. Сеть, купон, подвал ---------- */
.network { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ncard { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto auto; gap: 14px; min-height: 236px; height: 100%; padding: 22px; border-radius: 16px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.ncard:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -16px rgb(0 0 0 / .45); }
.ncard__body { display: grid; gap: 4px; }
.ncard__title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.ncard__text { font-size: 14px; line-height: 1.4; opacity: .8; }
.ncard__domain { justify-self: start; }
.ncard__here { position: absolute; right: 22px; top: 22px; padding: 4px 10px; border-radius: 3px; background: #d9ae5c; color: #13241c; font: 600 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; }
.ncard--alco { background: #1f1e1b; color: #efe8d9; }
.ncard--alco::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 46%; height: 4px; background: repeating-linear-gradient(90deg, #f6be00 0 34px, transparent 34px 58px); }
.ncard--alco .ncard__art { justify-self: end; }
.ncard__sign { width: 72px; height: 72px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .4)); }
.ncard--alco .ncard__title { font-family: 'Oswald', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.ncard--alco .ncard__domain { padding: 3px 10px; border: 2px solid #1d1c1a; border-radius: 5px; background: #fff; color: #1d1c1a; font: 600 14px/1.2 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.ncard--cred { grid-template-rows: auto auto 1fr auto; color: #f4ecd8; background: linear-gradient(90deg, #0e4633 30%, rgb(14 70 51 / 0) 72%), url('../img/guilloche.svg') right -90px top -80px / 300px no-repeat, linear-gradient(135deg, #12573f 0%, #0b3a2b 100%); }
.ncard--cred.is-current { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-2); }
.ncard__chip { width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(90deg, transparent 30%, rgb(0 0 0 / .25) 30% 33%, transparent 33% 67%, rgb(0 0 0 / .25) 67% 70%, transparent 70%), linear-gradient(0deg, transparent 45%, rgb(0 0 0 / .25) 45% 55%, transparent 55%), linear-gradient(135deg, #f0d48e, #b8862f); }
.ncard__number { font: 500 15px/1 var(--font-mono); letter-spacing: .14em; opacity: .85; }
.ncard--cred .ncard__title { font-family: var(--font-display); font-weight: 600; font-size: 23px; }
.ncard--cred .ncard__domain { font: 600 14px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: #e2c47c; }
.ncard--ipot { color: #2b211b; background: linear-gradient(0deg, #eadbc2 40%, rgb(234 219 194 / 0) 72%), url('../img/plan.svg') right -40px top -26px / 250px no-repeat, #eadbc2; }
.ncard__key { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #b5552e; color: #fff4e6; }
.ncard__key .icon { width: 26px; height: 26px; stroke-width: 2; }
.ncard--ipot .ncard__domain { padding: 4px 10px; border-radius: 3px; background: #b5552e; color: #fff4e6; font: 600 13px/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .14em; }

/* Купон со ссылками на основной сайт */
.partner { background: var(--green-deep); padding: 64px 0 0; }
.coupon {
  position: relative; display: grid; grid-template-columns: 300px 1fr;
  background: #f6efdc; color: #13241c; border-radius: 8px;
}
.coupon::before, .coupon::after {
  content: ''; position: absolute; left: 300px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--green-deep);
}
.coupon::before { top: -13px; }
.coupon::after { bottom: -13px; }
.coupon__stub {
  display: grid; align-content: center; gap: 8px; padding: 30px;
  border-right: 2px dashed #c8bb9a;
  background: url('../img/guilloche.svg') left -120px center / 300px no-repeat;
}
.coupon__kicker { font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .18em; color: #8a6a2a; }
.coupon__title { font: 500 30px/1.05 var(--font-display); }
.coupon__domain { justify-self: start; margin-top: 6px; padding: 5px 12px; border-radius: 3px; background: #0e4b36; color: #f0d48e; font: 600 14px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.coupon__domain:hover { color: #fff; }
.coupon__links { display: grid; grid-template-columns: repeat(4, 1fr); align-content: center; gap: 2px 24px; padding: 26px 30px; }
.coupon__links a { display: block; padding: 9px 0; color: #13241c; font-weight: 500; font-size: 15px; border-bottom: 1px dotted #c8bb9a; }
.coupon__links a::before { content: '→ '; font-family: var(--font-mono); color: #b8862f; }
.coupon__links a:hover { color: #0e4b36; }

.site-footer { padding: 52px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--green-deep); color: #a7b6ad; font-size: 14px; }
.partner + .site-footer { padding-top: 56px; }
.site-footer__inner { display: grid; gap: 24px; grid-template-columns: 1.4fr 1fr auto; align-items: start; padding-top: 28px; border-top: 1px solid rgb(244 236 216 / .15); }
.site-footer__brand p { margin-top: 12px; max-width: 420px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__nav a { color: #f4ecd8; }
.site-footer__nav a:hover { color: var(--gold-2); }
.site-footer__copy { font-family: var(--font-mono); font-size: 12px; }

/* ---------- 11. Плашка, тост, печать ---------- */
.sticky-result {
  position: fixed; z-index: 40; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px;
  background: var(--green-deep); color: #f4ecd8; border: 1px solid #d9ae5c;
  box-shadow: 0 14px 30px -10px rgb(0 0 0 / .45); text-align: left;
  transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform .35s var(--ease), opacity .35s;
}
.sticky-result.is-visible { transform: none; opacity: 1; }
.sticky-result__label { flex: 1; font: 500 12px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: #d9ae5c; }
.sticky-result__value { font: 500 24px/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.sticky-result .icon { rotate: 90deg; opacity: .6; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); padding: 12px 18px; border-radius: 6px; background: #13241c; color: #f4ecd8; border: 1px solid #d9ae5c; font-weight: 500; translate: -50% 20px; opacity: 0; pointer-events: none; transition: translate .3s var(--ease), opacity .3s; }
.toast.is-visible { translate: -50% 0; opacity: 1; }

@media print {
  .site-header, .hero, .calc__form, .result-actions, .chart-card, .section, .partner, .site-footer, .sticky-result, .toast, .calc__docline { display: none !important; }
  body { background: #fff; }
  .calc { border: 0; box-shadow: none; }
  .calc__body { display: block; }
  .calc__result { background: none; padding: 0; }
  .receipt-wrap { filter: none; }
  .year > *:not(summary) { display: block !important; }
}

/* ---------- 12. Адаптив ---------- */
@media (max-width: 1080px) {
  .compare { grid-template-columns: 1fr 1fr; }
  .formula { grid-column: 1 / -1; }
  .tips { grid-template-columns: 1fr 1fr; }
  .tip:nth-child(3) { padding-left: 0; border-left: 0; }
  .tip:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .coupon { grid-template-columns: 260px 1fr; }
  .coupon::before, .coupon::after { left: 260px; }
  .coupon__links { grid-template-columns: repeat(2, 1fr); }
  .network { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-grid; }
  .site-header.is-open .nav { display: block; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px var(--gutter) 16px; background: var(--bg); border-bottom: 3px double var(--line-strong); }
  .site-header.is-open .nav__list { flex-direction: column; gap: 0; }
  .site-header.is-open .nav__link { padding: 14px 2px; font: 500 20px/1.2 var(--font-display); border-bottom: 1px solid var(--line); }
  .site-header.is-open .nav__link.is-current::after { left: 2px; right: auto; width: 40px; bottom: -1px; }
  .hero__grid { grid-template-columns: 1fr; }
  .rosette { display: none; }
  .calc__body { grid-template-columns: 1fr; }
  .calc__result { margin: 0 6px; }
  .site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  :root { --header-h: 60px; }
  .section { padding-block: 52px; }
  .logo__text { font-size: 22px; }
  .logo__mark { width: 34px; height: 34px; }
  .calc-section .container { padding-inline: 8px; }
  .calc__docline { padding: 14px 16px 12px; font-size: 10px; letter-spacing: .1em; }
  .calc__form { padding: 18px 16px 28px; }
  .tabs { gap: 18px; }
  .tabs__btn { font-size: 20px; }
  .tabs__long { display: none; }
  .tabs__short { display: inline; }
  .field-row { grid-template-columns: 1fr; }
  .seg--cards { grid-auto-flow: row; }
  .calc__result { padding: 26px 14px 24px; }
  .receipt { padding: 22px 18px 36px; }
  .stamp { width: 100px; height: 100px; right: 8px; bottom: 24px; }
  .receipt__barcode, .receipt__no { margin-right: 108px; }
  .stamp__value { font-size: 24px; }
  .calc__bottom { padding: 26px 12px 8px; }
  .chart-card__canvas { height: 240px; }
  .calc__note { padding: 16px; }
  .year summary, .sched-head { grid-template-columns: 1fr 1.2fr 1.2fr 20px; font-size: 12px; gap: 8px; }
  .year summary span:nth-child(3), .year summary span:nth-child(4), .sched-head span:nth-child(3), .sched-head span:nth-child(4) { display: none; }
  .month { grid-template-columns: 1fr 1.2fr 1.2fr 20px; gap: 8px; font-size: 11px; }
  .month span:nth-child(3), .month span:nth-child(4) { display: none; }
  .early-row { grid-template-columns: 1fr 36px; }
  .early-row__month { grid-column: 1; }
  .early-row__remove { grid-column: 2; grid-row: 1; }
  .early-row__sum, .early-row .seg { grid-column: 1 / -1; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .formula__expr { font-size: 26px; gap: 10px; }
  .tips { grid-template-columns: 1fr; }
  .tip, .tip + .tip { padding: 22px 0 10px; border-left: 0; }
  .tip + .tip { border-top: 1px solid var(--line); }
  .faq__item summary { font-size: 18px; }
  .network { grid-template-columns: 1fr; }
  .coupon { grid-template-columns: 1fr; }
  .coupon::before, .coupon::after { display: none; }
  .coupon__stub { border-right: 0; border-bottom: 2px dashed #c8bb9a; padding: 24px 20px; }
  .coupon__links { grid-template-columns: 1fr 1fr; padding: 18px 20px 22px; gap: 0 16px; }
  .coupon__links a { font-size: 14px; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 901px) { .sticky-result { display: none; } }
@media (pointer: coarse) {
  .range { height: 34px; }
  .range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   13. Страницы сайта: блог, статьи, словарь
   ========================================================================== */
.container--article { max-width: calc(880px + var(--gutter) * 2); }
.section--tight { padding-block: 48px; }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: none; }
.more-link { display: inline-flex; align-items: center; gap: 8px; flex: none; padding-bottom: 3px; color: var(--text); font-weight: 600; border-bottom: 1px solid var(--gold); }
.more-link .icon { width: 18px; height: 18px; color: var(--gold); transition: translate .2s; }
.more-link:hover { color: var(--text); }
.more-link:hover .icon { translate: 4px 0; }

.page-hero { padding: 26px 0 40px; border-bottom: 3px double var(--line-strong); }
.page-hero__title { font: 500 clamp(38px, 6vw, 70px)/1.04 var(--font-display); letter-spacing: -.02em; max-width: 16ch; }
.page-hero__lead { max-width: 680px; margin-top: 18px; font-size: clamp(16px, 2vw, 19px); color: var(--text-2); }
.tags, .alphabet { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 12px/1 var(--font-mono); color: var(--text-2); }
.tags a:hover { border-color: var(--text); color: var(--text); }
.tags a.is-current { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }

/* Карточки статей */
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.posts--3 { grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.post { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.post:hover { border-color: var(--gold); box-shadow: 0 18px 34px -24px rgb(19 36 28 / .45); }
.post__body { display: grid; align-content: start; gap: 10px; flex: 1; padding: 22px 24px 24px; }
.post__tag { justify-self: start; font: 500 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.post__title { font: 500 24px/1.2 var(--font-display); }
.post__title a { color: var(--text); background: linear-gradient(var(--gold-2), var(--gold-2)) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.post__title a:hover { color: var(--text); background-size: 100% 1px; }
.post__text { color: var(--text-2); font-size: 15px; }
.post__meta { margin-top: auto; padding-top: 6px; font: 500 12px/1 var(--font-mono); color: var(--text-3); }
.post--featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.post--featured .post__cover { aspect-ratio: auto; min-height: 340px; }
.post--featured .post__body { padding: 36px; align-content: center; }
.post--featured .post__title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; }
.post--soon { opacity: .72; }
.post--soon .post__meta { text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.post--row { display: grid; grid-template-columns: 150px 1fr; }
.post--row .post__cover { aspect-ratio: auto; min-height: 140px; }
.post--row .post__body { padding: 18px 20px; }
.post--row .post__title { font-size: 20px; }

/* Обложки */
.cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; padding: 18px; }
.cover--saving, .cover--history { background: url('../img/guilloche.svg') center / 120% no-repeat, linear-gradient(150deg, #12573f, #0a2f22); }
.mini-receipt {
  display: grid; justify-items: center; gap: 6px; min-width: 190px; padding: 18px 20px 26px;
  background: var(--paper); color: var(--paper-ink); font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / .35)); rotate: -3deg;
}
.mini-receipt span { color: var(--paper-dim); }
.mini-receipt b { font: 500 34px/1 var(--font-display); letter-spacing: -.01em; color: #186649; text-transform: none; }
.mini-receipt--lg { padding: 26px 34px 36px; }
.mini-receipt--lg b { font-size: clamp(44px, 7vw, 74px); }
.cover--psk { background: var(--paper); background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgb(19 36 28 / .07) 22px 23px); }
.psk-box { display: grid; justify-items: center; gap: 4px; padding: 14px 22px; border: 3px solid #13241c; background: var(--paper); color: #13241c; font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; box-shadow: 6px 6px 0 var(--gold-2); }
.psk-box b { font: 500 40px/1 var(--font-display); color: var(--stamp); letter-spacing: -.01em; text-transform: none; }
.psk-box--lg { padding: 22px 40px; }
.psk-box--lg b { font-size: clamp(54px, 8vw, 84px); }
.cover--history { color: #f4ecd8; }
.cover--grace { background: var(--gold-soft); color: #13241c; }
.cover__word { font: italic 500 30px/1.1 var(--font-display); text-align: center; }
.cover--dict { background: var(--green); color: var(--gold-2); }
.cover__letter { font: italic 500 40px/1 var(--font-display); }
.post--row .psk-box { padding: 8px 10px; box-shadow: 3px 3px 0 var(--gold-2); }
.post--row .psk-box b { font-size: 24px; }
.post--row .mini-receipt { min-width: 0; padding: 10px 10px 18px; }
.post--row .mini-receipt b { font-size: 20px; }
.cover--hero { aspect-ratio: 21 / 8; margin-top: 30px; border-radius: var(--radius-lg); }

/* Статья */
.article__head { padding-top: 26px; }
.article__head .post__tag { display: inline-block; margin-bottom: 14px; }
.article__title { font: 500 clamp(34px, 5.4vw, 60px)/1.06 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.article__meta { margin-top: 16px; font: 500 12px/1 var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.article__lead { margin-top: 20px; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.6; color: var(--text-2); }
.article__layout { display: grid; grid-template-columns: 220px minmax(0, 740px); gap: 52px; justify-content: center; padding-block: 44px 72px; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.toc__title { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--gold); margin-bottom: 14px; }
.toc ol { display: grid; gap: 2px; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: flex; gap: 10px; padding: 6px 0; color: var(--text-2); font-size: 14px; line-height: 1.35; border-bottom: 1px dotted var(--line-strong); }
.toc a::before { content: counter(t, upper-roman); min-width: 22px; font: italic 500 14px/1.35 var(--font-display); color: var(--gold); }
.toc a:hover { color: var(--text); }

.prose { font-size: 18px; line-height: 1.7; min-width: 0; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 46px; font: 500 clamp(26px, 3vw, 34px)/1.15 var(--font-display); scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h2 + * { margin-top: 14px; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.prose ul:not(.checks) { display: grid; gap: 10px; }
.prose ul:not(.checks) li { position: relative; padding-left: 24px; }
.prose ul:not(.checks) li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }

.ledger { overflow-x: auto; border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); }
.ledger table { width: 100%; border-collapse: collapse; font: 400 14px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: 12px 12px; text-align: right; white-space: nowrap; border-bottom: 1px dotted var(--line-strong); }
.ledger thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 500; }
.ledger th:first-child { text-align: left; font-family: var(--font); font-size: 15px; font-weight: 600; }
.ledger tbody tr:last-child > * { border-bottom: 0; }
.ledger .is-best > * { background: color-mix(in srgb, var(--gold-2) 20%, transparent); }
.ledger .is-best td:last-child { color: var(--green-2); font-weight: 700; }
:root[data-theme="dark"] .ledger .is-best td:last-child { color: var(--gold-2); }

.receipt-note {
  display: grid; gap: 8px; max-width: 460px; padding: 20px 22px 30px; background: var(--paper); color: var(--paper-ink);
  font: 500 13px/1.3 var(--font-mono); box-shadow: 0 14px 30px -20px rgb(0 0 0 / .45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.receipt-note div { display: flex; justify-content: space-between; gap: 6px; background: radial-gradient(circle, #a8a190 .8px, transparent 1.2px) left bottom 4px / 6px 3px repeat-x; }
.receipt-note span, .receipt-note b { background: var(--paper); }
.receipt-note span { padding-right: 6px; color: var(--paper-dim); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.receipt-note b { padding-left: 6px; color: #186649; }

.note { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; border-left: 3px solid var(--gold); background: var(--surface-2); }
.note__mark { font: italic 500 40px/1 var(--font-display); color: var(--gold); }
.note p { margin: 0; font-size: 16px; }

.steps-list { display: grid; gap: 12px; counter-reset: s; }
.steps-list li { position: relative; padding-left: 52px; counter-increment: s; }
.steps-list li::before { content: counter(s); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font: italic 500 18px/1 var(--font-display); }
.checks { display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before { content: '✓'; position: absolute; left: 0; top: 0; font: 600 16px/1.7 var(--font-mono); color: var(--gold); }

/* Первая страница договора с рамкой ПСК */
.contract { position: relative; max-width: 420px; aspect-ratio: 1 / 1.1; padding: 26px; background: var(--paper); color: var(--paper-ink); box-shadow: 0 20px 40px -24px rgb(0 0 0 / .45); }
.contract__psk { position: absolute; right: 22px; top: 22px; display: grid; justify-items: center; gap: 2px; padding: 10px 14px; border: 3px solid #13241c; font: 500 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.contract__psk b { font: 500 26px/1 var(--font-display); color: var(--stamp); text-transform: none; }
.contract__lines { display: grid; gap: 14px; margin-top: 130px; }
.contract__lines i { display: block; height: 6px; background: #e3ddcd; }
.contract__lines i:nth-child(odd) { width: 86%; }
.contract__lines i:nth-child(3n) { width: 64%; }
.contract__cap { position: absolute; left: 26px; top: 30px; max-width: 46%; font: 500 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--paper-dim); }

.cta-box {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 40px !important; padding: 26px 28px; border-radius: var(--radius-lg); color: #f4ecd8;
  background: url('../img/guilloche.svg') right -80px center / 280px no-repeat, var(--green);
}
.cta-box__title { font: 500 26px/1.15 var(--font-display); }
.cta-box p { margin: 6px 0 0; font-size: 15px; opacity: .8; line-height: 1.5; }
.cta-box .btn { flex: none; text-decoration: none; color: #13241c; }

/* Словарь */
.alphabet a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; font: italic 500 20px/1 var(--font-display); color: var(--text); }
.alphabet a:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.dict { display: grid; border-top: 2px solid var(--text); }
.dict__group { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.dict__letter { font: italic 500 72px/.9 var(--font-display); color: var(--gold); }
.dict dl { display: grid; gap: 22px; }
.term dt { font: 500 24px/1.2 var(--font-display); }
.term dd { margin-top: 6px; color: var(--text-2); max-width: 720px; }
.term dd a { display: inline-block; margin-left: 4px; color: var(--accent-text); font: 500 13px/1.4 var(--font-mono); border-bottom: 1px solid currentColor; }

@media (max-width: 1080px) {
  .article__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; margin-bottom: 30px; padding: 18px 20px; background: var(--surface-2); border: 1px solid var(--line); }
  .toc ol { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
@media (max-width: 900px) {
  .posts--3 { grid-template-columns: 1fr 1fr; }
  .post--featured { grid-template-columns: 1fr; }
  .post--featured .post__cover { min-height: 0; aspect-ratio: 16 / 9; }
  .post--featured .post__body { padding: 24px; }
}
@media (max-width: 639px) {
  .section__head--row { flex-direction: column; align-items: flex-start; }
  .posts, .posts--3 { grid-template-columns: 1fr; }
  .post--row { grid-template-columns: 110px 1fr; }
  .post--row .post__title { font-size: 18px; }
  .post--row .mini-receipt b, .post--row .psk-box b { font-size: 17px; }
  .cover--hero { aspect-ratio: 4 / 3; }
  .toc ol { grid-template-columns: 1fr; }
  .prose { font-size: 17px; }
  .ledger table { font-size: 12px; }
  .ledger th, .ledger td { padding: 10px 8px; }
  .cta-box { flex-direction: column; align-items: stretch; }
  .dict__group { grid-template-columns: 1fr; gap: 8px; }
  .dict__letter { font-size: 52px; }
  .alphabet a { width: 38px; height: 38px; font-size: 17px; }
  .contract { padding: 18px; }
  .contract__psk { right: 14px; top: 14px; }
  .contract__lines { margin-top: 110px; }
}