/* ─────────────────────────────────────────
   AVTOKREDO · editorial-modern car-credit
   Base + tokens + layout
   ───────────────────────────────────────── */

/* Design tokens live in ONE :root (the "FINTECH POLISH" block lower in this file).
   The old base :root here was fully overridden by it (same specificity, later wins);
   its only unique vars (--emerald/-soft, --maxw, --pad) were merged into that block. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,0,0,0.025), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(0,0,0,0.02), transparent 60%);
  /* CRO #7: sticky footer — pin footer to viewport bottom on short pages
     (favorites/compare/404/apply/empty results) so they no longer look "broken" */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > .siteFooter { margin-top: auto; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* R31: prices/numerals were JetBrains Mono (a coder face) — clashed with the Manrope system and
   the bank positioning v2 already abandoned. .mono now means "tabular sans" (digit alignment
   without the terminal look). The --mono variable stays for any intentional technical accent. */
.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.ital { font-family: var(--display); font-style: italic; font-weight: 400; }
/* R31: the favourites empty-state heart was fully inert — one gentle entrance beat (reduced-motion safe). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pbHeartIn { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
  #favEmpty svg { animation: pbHeartIn .5s cubic-bezier(.22,1,.32,1) both; }
}
/* R31: pages author their intro as `.lead` but prod had no matching rule (only .seo-page .lead),
   so the apply-page value-prop collapsed into body text. Elevate it site-wide on prod. */
.entry-content .lead, .page-main .lead { font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}
.eyebrow--light { color: rgba(244,241,234,.7); }
.eyebrow--light .eyebrow__dot { background: var(--accent); }

.sec__head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 48px);
}
.sec__head--vert { display: block; max-width: 880px; }
.sec__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 14px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
.sec__title--light { color: var(--on-dark); }
.sec__aside p {
  font-size: 16px;
  color: var(--ink-3);
  margin: 0 0 12px;
  max-width: 36ch;
}
.link {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.link:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform .15s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space: nowrap;
}
/* R19 (#22): press-feedback unified to scale(0.97) site-wide (the canonical rule at the
   bottom of this file) — the old translateY(1px) was a second, different idiom. */
.btn--sm { padding: 9px 14px; font-size: 13.5px; }
.btn--lg { padding: 15px 22px; font-size: 15.5px; }
.btn--xl { padding: 19px 28px; font-size: 17px; border-radius: 999px; }
.btn--block { width: 100%; }
/* .btn--primary colour is defined once, in the "Buttons polished" layer below
   (var(--cta) brand green). The earlier --accent declaration here was dead (overridden
   by that later rule) and contradicted the single-CTA colour — removed. */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghostLight {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(244,241,234,.35);
}
.btn--ghostLight:hover { border-color: var(--on-dark); }
.btn--dark {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
}
.btn--dark small { opacity: .6; font-weight: 400; }
.btn--dark:hover { background: var(--accent-deep); border-color: var(--accent-deep); }


/* ─── Announce strip ─── */
.announce {
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.announce__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  flex-wrap: wrap;
}
.announce__inner b { color: var(--accent-soft); font-weight: 500; }
.announce__sep { opacity: .4; }
.announce__inner a {
  margin-left: auto;
  color: var(--on-dark);
  border-bottom: 1px solid rgba(244,241,234,.4);
  padding-bottom: 1px;
}
.announce .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* ─── Nav ─── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brand--light { color: var(--on-dark); }
.brand__mark { display: inline-flex; }
.brand__word {
  font-size: 17px;
  letter-spacing: 0.04em;
  white-space: nowrap; /* R19 #25: «Авто в кредит» wrapped to two lines on 390px — the
                          first thing every mobile visitor sees */
}
.brand__word em {
  font-style: normal;
  color: var(--accent);
  margin: 0 1px;
  font-weight: 400;
}
.nav__menu {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}
.nav__menu a {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink-3);
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.nav__menu a:hover { background: var(--bg-2); color: var(--ink); }
.nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* R30: when the desktop menu is hidden (≤1080px) the flex spacer is gone, so on a tight row
   the favourites heart could glue to the «…кредит» wordmark. A brand margin-right guarantees a
   gap (padding-style — survives even when margin-left:auto collapses on overflow). */
@media (max-width: 1080px) { .brand { margin-right: 14px; } }
.nav__phone {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.15;
}
.nav__phoneLabel {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.nav__phoneNum {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* ─── HERO ─── */
.hero {
  position: relative;
  padding-top: clamp(32px, 6vw, 64px);
  padding-bottom: 0;
  overflow: hidden;
  /* R31: was a flat image-less field that read templated/cheap next to v2. Add the showroom
     photo with a light 90deg wash — opaque left keeps the H1/form readable, photo reveals right. */
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(247,248,244,.93) 44%, rgba(247,248,244,.55) 100%),
    center right / cover no-repeat url("img/home-hero.webp");
}
@media (max-width: 760px) {
  /* mobile: keep it mostly light for the stacked centered content, faint photo at the bottom */
  .hero { background: linear-gradient(180deg, var(--bg) 0%, rgba(247,248,244,.9) 60%, rgba(247,248,244,.55) 100%), center bottom / cover no-repeat url("img/home-hero.webp"); }
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  /* R16: 138px max was past the 96px display ceiling (shouting, not designing);
     unified hero scale token, balance for even line lengths */
  font-size: var(--h1-hero, clamp(44px, 6.5vw, 88px));
  text-wrap: balance;
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 22px 0 26px;
  color: var(--ink);
}
.hero__title em {
  font-style: italic;
  color: var(--accent-deep);
}
.hero__title .under {
  background-image: linear-gradient(transparent 86%, var(--accent) 86%, var(--accent) 98%, transparent 98%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
}
.hero__lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 48ch;
  margin: 0 0 28px;
}
.hero__lead b { color: var(--ink); font-weight: 600; }
.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero__trust {
  list-style: none;
  padding: 22px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  border-top: 1px solid var(--line);
  max-width: 540px;
}
.hero__trust li b {
  display: block;
  font-family: var(--display);
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 6px;
}
.hero__trust li span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.3;
  display: block;
}

/* ─── Hero calc card ─── */
.heroCalc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px 28px 24px;
  box-shadow: var(--sh-2);
  position: relative;
  isolation: isolate;
}
.heroCalc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  padding: 1px;
  background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 40%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.heroCalc__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.heroCalc__badge {
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 6px;
}
.heroCalc__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.heroCalc__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
}
.heroCalc__field { margin-bottom: 16px; }
.heroCalc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.heroCalc__row label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.heroCalc__row output {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.heroCalc__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.heroCalc__result {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-md);
  padding: 18px 18px 16px;
  margin: 18px 0 14px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: end;
}
.heroCalc__resLabel {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 6px;
}
.heroCalc__resBig {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.heroCalc__resAside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.heroCalc__resAside div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.heroCalc__resAside span { opacity: .65; }
.heroCalc__resAside b { font-weight: 500; }
.heroCalc__foot {
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* ─── Range input ─── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--line-2);
  border-radius: 999px;
}
input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--line-2);
  border-radius: 999px;
}
/* R22: the slider thumb (calculator down-payment, home budget) is the main interactive
   control on the calc — paint it brand-green so it reads as draggable + on-brand, not a
   neutral black dot. */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--cta, #16a34a);
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cta, #16a34a);
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
}

/* ─── Segmented ─── */
.seg {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 999px;
}
.seg button {
  background: transparent;
  border: 0;
  padding: 8px 4px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button.is-on {
  background: var(--ink);
  color: var(--on-dark);
}
.seg--wide button { padding: 11px 4px; font-size: 14px; }

/* ─── Ticker ─── */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  padding: 16px 0;
}
.ticker__track {
  display: flex;
  gap: 28px;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  animation: tick 60s linear infinite;
  will-change: transform;
}
.ticker__track span:nth-child(even) { color: var(--accent); }
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── KPI strip ─── */
.kpi { background: var(--bg); }
.kpi__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kpi__cell {
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 36px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kpi__cell:last-child { border-right: 0; }
.kpi__num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kpi__num .kpi__sup {
  font-family: var(--mono);
  font-size: 14px;
  margin-left: 6px;
  vertical-align: top;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kpi__lbl {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.4;
  max-width: 20ch;
}


/* ─── Catalog ─── */
.cat { padding: 0 0 clamp(60px, 8vw, 100px); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line-2);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-3);
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip span {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.chip.is-on {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
}
.chip.is-on span { color: rgba(244,241,234,.6); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .2s;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--line-2);
}
.card--wide { grid-column: span 2; }
.card--wide .card__media { aspect-ratio: 1.9 / 1; }
.card--wide .card__title { font-size: clamp(24px, 2.4vw, 32px); }
.card--dark {
  background: var(--dark);
  color: var(--on-dark);
  border-color: var(--dark-2);
}
.card--dark .card__title { color: var(--on-dark); }
.card--dark .card__meta { color: rgba(244,241,234,.55); }
.card--dark .card__priceLbl { color: rgba(244,241,234,.5); }
.card--dark .card__price { color: var(--on-dark); }
.card--dark .card__sub { color: rgba(244,241,234,.5); }
.card--dark .card__brand { color: rgba(244,241,234,.55); }
.card--dark .card__cta { background: rgba(244,241,234,.08); color: var(--on-dark); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  overflow: hidden;
}
.card__media--accent { background: linear-gradient(160deg, var(--accent-soft), #ede2c8); }
.card__media--dark { background: var(--dark-2); }
.card__mediaSvg, .card__media svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.card__pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.card__pill--ghost {
  left: auto;
  right: 14px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
}
.card__pill--accent {
  background: var(--accent);
  color: var(--ink);
  border-color: transparent;
}

.card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.card__brand {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card__model {
  font-size: 13px;
  color: var(--ink-3);
}
.card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.card__title .mono { font-family: var(--mono); font-size: 0.78em; font-weight: 500; background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; }
.card__per { font-family: var(--mono); font-size: 0.55em; color: var(--ink-soft); margin-left: 4px; letter-spacing: 0.04em; }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.card__priceRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  /* R30: match the listing card's SOLID divider + tighter label tracking so the home strip and
     /poisk/ grid read as one system (they render the same cars). Title scale stays context-
     driven (editorial hero vs dense grid) — that hierarchy is intentional, not drift. */
  border-top: 1px solid var(--line);
}
.card__priceLbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.card__price {
  /* R31: unified to tabular SANS (was JetBrains Mono on /poisk/, Manrope here — R30 wrongly
     unified toward mono; the right direction is the premium tabular-sans v2 uses). */
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.card__price small { font-size: 0.6em; font-weight: 400; color: var(--ink-soft); margin-left: 2px; }
.card__sub {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.card__cta {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--ink);
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.card__cta:hover { background: var(--accent); transform: translateX(2px); }

.cat__more {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex;
  justify-content: center;
}

/* ─── How it works ─── */
.how { background: var(--bg-2); padding: 0 0 clamp(60px, 8vw, 100px); margin-top: clamp(40px, 6vw, 60px); }
.how__inner { padding-top: 0; }
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.steps li {
  background: var(--bg-2);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.steps li:hover { background: var(--paper); }
.steps__num {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.steps li h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1;
  margin: 6px 0 4px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.steps li p {
  margin: 0;
  color: var(--ink-3);
  font-size: 15px;
  max-width: 38ch;
  line-height: 1.5;
}
.steps__tag {
  margin-top: auto;
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  align-self: flex-start;
  width: max-content;
}

/* ─── Big Calculator section ─── */
.bigCalc {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(56px, 8vw, 110px) 0;
  position: relative;
  overflow: hidden;
}
.bigCalc::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 90% 110%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(600px 400px at -10% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%);
  pointer-events: none;
}
.bigCalc__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  position: relative;
  z-index: 1;
}
.bigCalc__copy { padding-top: 8px; }
.bigCalc__copy .sec__title { margin-top: 18px; margin-bottom: 22px; }
.bigCalc__copy .sec__title .ital { color: color-mix(in oklab, var(--accent) 80%, var(--on-dark)); }
.bigCalc__lead {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(244,241,234,.7);
  margin: 0 0 26px;
  max-width: 40ch;
}
.bigCalc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: rgba(244,241,234,.1);
  border-top: 1px solid rgba(244,241,234,.1);
  border-bottom: 1px solid rgba(244,241,234,.1);
}
.bigCalc__list li {
  background: var(--ink);
  padding: 16px 0;
  font-size: 16px;
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.bigCalc__list li span {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(244,241,234,.4);
}

.bigCalc__card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.6);
}
.bigCalc__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}
.bigCalc__tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 999px;
}
.bigCalc__tabs button {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.bigCalc__tabs button.is-on {
  background: var(--ink);
  color: var(--on-dark);
}
.bigCalc__live {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cta);
  animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--cta);
}

.bigCalc__field { margin-bottom: 22px; }
.bigCalc__field label {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 500;
}
.bigCalc__field label span { color: var(--ink); font-weight: 600; margin-left: 6px; }
.bigCalc__inputRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  transition: border-color .15s;
}
.bigCalc__inputRow:focus-within { border-color: var(--ink); }
.bigCalc__inputRow input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  width: 100%;
  letter-spacing: -0.01em;
}
.bigCalc__inputRow input::-webkit-outer-spin-button,
.bigCalc__inputRow input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.bigCalc__unit {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink-soft);
}

.bigCalc__result {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin: 28px 0 22px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: center;
}
.bigCalc__resLbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 8px;
}
.bigCalc__resVal {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bigCalc__resSub {
  font-size: 12px;
  opacity: .5;
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.bigCalc__resSide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  border-left: 1px solid rgba(244,241,234,.15);
  font-size: 13px;
}
.bigCalc__resSide div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.bigCalc__resSide span { opacity: .6; }
.bigCalc__resSide b { font-weight: 500; }

.bigCalc__cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.bigCalc__phone {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 0 18px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.bigCalc__phone:focus { border-color: var(--ink); }
.bigCalc__phone::placeholder { color: var(--ink-soft); }
.bigCalc__fine {
  font-size: 11.5px;
  color: var(--ink-soft);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}


/* ─── Brands ─── */
.brands { padding-bottom: clamp(60px, 8vw, 100px); }
.brandsGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.brandCell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .15s, color .15s;
}
.brandCell b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brandCell span {
  font-size: 11.5px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.brandCell:hover {
  background: var(--ink);
  color: var(--on-dark);
}
.brandCell:hover b, .brandCell:hover span { color: var(--on-dark); }
.brandCell--all { background: var(--bg-2); }
.brandCell--all b { font-style: italic; font-family: var(--display); }
.brandCell--all span { font-size: 18px; color: var(--ink); }

/* ─── Geo ─── */
.geo { padding-bottom: clamp(60px, 8vw, 100px); }
.geo__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 5vw, 64px);
}
.geo__copy .sec__title { margin: 16px 0 22px; }
.geo__lead {
  font-size: 16px;
  color: var(--ink-3);
  max-width: 44ch;
  margin: 0 0 28px;
}
.geo__topcities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.geo__city {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: var(--bg);
  padding: 12px 16px;
  transition: background .15s;
}
.geo__city:hover { background: var(--bg-2); }
.geo__city b { font-weight: 500; font-size: 15px; }
.geo__city span { font-size: 12px; color: var(--ink-soft); }

.geo__map {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 40px);
  position: relative;
}
.geoDot circle { fill: var(--accent); }
.geoDot text { font-weight: 500; }

/* ─── Quotes ─── */
.quotes { padding-bottom: clamp(60px, 8vw, 100px); background: var(--bg-2); }
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  position: relative;
}
.quote__mark {
  color: var(--accent-text);
  font-size: 1.6em;
  line-height: 0;
  margin-right: 6px;
  vertical-align: -0.1em;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  color: var(--ink-3);
}
.quote figcaption b { color: var(--ink); font-weight: 600; }
.quote figcaption span { font-size: 13px; color: var(--ink-soft); }
.quote__stars {
  margin-left: auto;
  color: var(--accent-text);
  letter-spacing: 0.04em;
}

/* ─── FAQ ─── */
.faq { padding-bottom: clamp(60px, 8vw, 100px); }
.faq__inner { max-width: 920px; margin: 0 auto; }
.faq__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: transparent;
  border: 0;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq__q:hover { color: var(--accent-deep); }
.faq__plus {
  width: 26px; height: 26px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: transform .25s, border-color .2s, background .2s;
}
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.faq__plus::before { top: 50%; left: 25%; right: 25%; height: 1.5px; transform: translateY(-50%); }
.faq__plus::after  { left: 50%; top: 25%; bottom: 25%; width: 1.5px; transform: translateX(-50%); transition: opacity .2s; }
.faq__item.is-open .faq__plus { background: var(--ink); border-color: var(--ink); transform: rotate(90deg); }
.faq__item.is-open .faq__plus::before,
.faq__item.is-open .faq__plus::after { background: var(--on-dark); }
.faq__item.is-open .faq__plus::after { opacity: 0; }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq__a > p {
  overflow: hidden;
  margin: 0;
  padding: 0 4px 0;
  color: var(--ink-3);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 72ch;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a > p { padding-bottom: 24px; }

/* ─── Final CTA ─── */
.finalCta {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(64px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.finalCta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 500px at 80% 50%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 60%);
  pointer-events: none;
}
.finalCta__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: end;
  position: relative;
  z-index: 1;
}
.finalCta__copy h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.finalCta__copy .ital { color: color-mix(in oklab, var(--accent) 75%, var(--on-dark)); }
.finalCta__copy p {
  margin: 0;
  font-size: 18px;
  color: rgba(244,241,234,.7);
}
/* The markup emits .finalCta__h / .finalCta__sub DIRECTLY (no .finalCta__copy wrapper),
   so every .finalCta__copy rule above is inert and the closing headline rendered at the
   browser-default ~24px. Style the real classes (one block; nothing later overrides them
   because the later .finalCta__copy selectors match no element). */
.finalCta__inner { text-align: center; }
.finalCta__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  overflow-wrap: break-word;
}
.finalCta__sub {
  margin: 0 0 26px;
  font-size: 18px;
  color: rgba(244,241,234,.72);
}
.finalCta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.finalCta__actions .btn { justify-content: space-between; }
.finalCta__mini {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(244,241,234,.65);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.04em;
}

/* ─── SEO long-form ─── */
.seo { background: var(--bg); padding: clamp(60px, 8vw, 100px) 0; }
.seo__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 6vw, 80px);
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.seo__toc {
  position: sticky;
  top: 80px;
  align-self: start;
  font-size: 13px;
}
.seo__tocTitle {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.seo__toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.seo__toc li {
  counter-increment: toc;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  position: relative;
  padding-left: 30px;
}
.seo__toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
/* R31: TOC links were ink-3 (≈body colour) with no underline → indistinguishable from text
   (WCAG 1.4.1 use-of-color). Match the in-content link treatment: green + underline. */
.seo__toc a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.seo__toc a:hover { color: var(--ink); }

.seo__body {
  max-width: 65ch;
}
.seo__head { margin-bottom: 32px; }
.seo__body h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--ink);
}
.seo__lede {
  font-size: 19px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 52ch;
}
.seo__body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 32px);
  margin: 40px 0 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.seo__body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.seo__ol {
  padding-left: 1.2em;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
.seo__ol li { margin-bottom: 6px; }
.seo__cta {
  margin-top: 32px !important;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.seo__cta a {
  color: var(--accent-deep);
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: 1px;
}

/* ─── Footer ─── */
.foot {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(56px, 7vw, 96px) 0 32px;
}
.foot__inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: clamp(36px, 5vw, 80px);
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(244,241,234,.12);
}
.foot__brand { display: flex; flex-direction: column; gap: 22px; }
.foot__brand p {
  font-size: 14.5px;
  color: rgba(244,241,234,.6);
  line-height: 1.55;
  max-width: 30ch;
  margin: 0;
}
.foot__phones { display: flex; flex-direction: column; gap: 4px; }
.foot__phones a { font-family: var(--display); font-size: 28px; letter-spacing: -0.01em; }
.foot__phones span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,241,234,.45); }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.foot__cols > div { display: flex; flex-direction: column; gap: 8px; }
.foot__cols h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.45);
  margin: 0 0 8px;
  font-weight: 400;
}
.foot__cols a {
  font-size: 14px;
  color: var(--on-dark);
  opacity: .8;
  transition: opacity .15s, color .15s;
}
.foot__cols a:hover { opacity: 1; color: var(--accent); }
.foot__bottom {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 22px;
  font-size: 11px;
  color: rgba(244,241,234,.5);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}

/* ─── Sticky CTA (mobile) ─── */
.stickyCta {
  position: fixed;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: 12px 12px 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 60;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.4);
}
.stickyCta__num { font-size: 13px; }
.stickyCta__num b { font-weight: 500; font-size: 15px; color: var(--accent); }

/* ─── Responsive ─── */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  /* CRO: let the single-column grid track shrink below children min-content
     so the large hero H1 wraps instead of overflowing the right edge on phones */
  .hero__inner > * { min-width: 0; }
  /* R16: mobile hero inherits the fluid --h1-hero token (12vw/96px override removed) */
  .heroCalc { max-width: 560px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card--wide { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; }
  .bigCalc__inner { grid-template-columns: 1fr; }
  .geo__inner { grid-template-columns: 1fr; }
  .quotes__grid { grid-template-columns: 1fr; }
  .brandsGrid { grid-template-columns: repeat(3, 1fr); }
  /* R32-27: 19 brands + the "Всі N марок" tile = 20 cells; at 3-col that leaves one empty bordered
     cell hanging off the last row. Span the closing tile across the two trailing columns so the row
     closes flush (count is fixed at LIMIT 19, so the tile always lands in col 2 of the final row). */
  .brandsGrid .brandCell--all { grid-column: span 2; }
  .seo__inner { grid-template-columns: 1fr; }
  .seo__toc { position: static; }
  .seo__toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
  .finalCta__inner { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .nav__menu { display: none; }
  .nav__phone { display: none; }
  .kpi__inner { grid-template-columns: repeat(2, 1fr); }
  .kpi__cell:nth-child(2) { border-right: 0; }
  .kpi__cell:nth-child(1), .kpi__cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  .sec__head { grid-template-columns: 1fr; }
  .sec__aside { max-width: 480px; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .brandsGrid { grid-template-columns: repeat(2, 1fr); }
  .hero__trust { grid-template-columns: 1fr; gap: 12px; }
  .hero__trust li { display: flex; align-items: baseline; gap: 16px; }
  .hero__trust li b { font-size: 28px; margin: 0; }
  .bigCalc__result { grid-template-columns: 1fr; }
  .bigCalc__resSide { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid rgba(244,241,234,.15); }
  .bigCalc__cta { grid-template-columns: 1fr; }
  .heroCalc__result { grid-template-columns: 1fr; gap: 12px; }
  .geo__topcities { grid-template-columns: 1fr; }
  .nav__inner { gap: 12px; }
  .quote blockquote { font-size: 19px; }
}
@media (max-width: 480px) {
  .kpi__inner { grid-template-columns: 1fr; }
  .kpi__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi__cell:last-child { border-bottom: 0; }
  .heroCalc { padding: 22px 18px 18px; }
  .heroCalc__title { font-size: 24px; }
  .foot__cols { grid-template-columns: 1fr; }
}


/* ────────── HERO v2 (search-first) ────────── */
.hero__inner {
  display: block !important;
  padding-bottom: clamp(40px, 6vw, 64px);
}
.hero__head {
  max-width: 980px;
  margin: 0 auto clamp(28px, 4vw, 40px);
  text-align: center;
}
.hero__title {
  /* R19: font-size !important removed — it out-ranked the --h1-hero token (110px > 88px) */
  margin: 18px 0 22px !important;
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--accent-deep); }
.hero__lead {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-3);
  max-width: 56ch;
  margin: 0 auto !important;
}
.hero__lead b { color: var(--ink); font-weight: 600; }

/* Big search widget */
.search {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 30px 60px -32px rgba(20,40,28,.18), 0 1px 0 rgba(0,0,0,.02);
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
.search__fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr auto;
  gap: 8px;
  align-items: stretch;
}
.search__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
  cursor: pointer;
  min-width: 0;
}
.search__field:hover { background: var(--bg-2); }
.search__field:focus-within { background: var(--accent-tint); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.search__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.search__lbl output { font-family: var(--mono); font-size: 13px; letter-spacing: -0.01em; color: var(--ink); text-transform: none; }
.search__field input[type="search"] {
  border: 0;
  background: transparent;
  font: 500 16px/1.2 var(--sans);
  color: var(--ink);
  outline: none;
  padding: 4px 0;
  width: 100%;
  min-width: 0;
}
.search__field input[type="search"]::placeholder { color: var(--ink-soft); font-weight: 400; }
.search__field--q { cursor: text; }
.search__field select {
  border: 0;
  background: transparent;
  font: 500 16px/1.2 var(--sans);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  padding: 4px 18px 4px 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a7570' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.search__field--budget { padding-bottom: 8px; }
.search__field--budget input[type="range"] { margin-top: 6px; }
.search__budgetTicks {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.search__submit {
  /* Colour (background/border/text) is set once in the "Buttons polished" layer below
     (var(--cta) brand green) — kept here are only layout props. */
  padding: 0 24px !important;
  border-radius: var(--r-md);
  white-space: nowrap;
  font-weight: 600;
  height: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px !important;
}
.search__submit b { font-weight: 700; }

.search__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  align-items: center;
}
.search__qLbl {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 4px;
}
.search__qChip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-3);
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.search__qChip:hover {
  background: var(--accent-soft);
  color: var(--accent-darker);
  border-color: var(--accent);
}

/* Hero trust strip (revamped, icons) */
.hero__trust {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 4vw, 40px) auto 0 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 22px);
  max-width: 980px !important;
  border-top: 0 !important;
}
.hero__trust li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.hero__trustIco {
  width: 28px; height: 28px;
  flex-shrink: 0;
  color: var(--accent-deep);
}
.hero__trust li > div { display: flex; flex-direction: column; gap: 2px; }
.hero__trust li b {
  display: inline !important;
  font-family: var(--display) !important;
  font-size: 22px !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-weight: 400;
  color: var(--ink) !important;
}
.hero__trust li span {
  font-size: 12px !important;
  color: var(--ink-soft) !important;
  line-height: 1.25 !important;
}

/* Nav link beside primary */
.nav__link {
  font-size: 14px;
  color: var(--ink-3);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.nav__link:hover { background: var(--bg-2); color: var(--ink); }

/* ────────── Brand cells with logos ────────── */
.brandCell {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 18px !important;
}
.brandCell__logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bLogo, var(--ink));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px -2px rgba(0,0,0,.18);
}
.brandCell__txt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.brandCell__txt > b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.brandCell__txt > span {
  font-size: 11.5px;
  color: var(--ink-soft);
}
.brandCell:hover .brandCell__txt > b,
.brandCell:hover .brandCell__txt > span { color: var(--on-dark); }
.brandCell--all .brandCell__txt > b { font-style: italic; }
.brandCell--all .brandCell__txt > span { font-size: 18px; color: var(--ink); }

/* ────────── YouTube reviews ────────── */
.yt { padding-bottom: clamp(60px, 8vw, 100px); background: var(--bg-2); }
.yt__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 22px);
}
.ytCard {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.ytCard:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.ytCard__thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--dark);
  overflow: hidden;
}
.ytCard__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ytCard__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ytCard__play svg {
  background: #ff0033;
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px 10px 16px;
  box-sizing: content-box;
  width: 24px; height: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .2s;
}
.ytCard:hover .ytCard__play svg { transform: scale(1.08); }
.ytCard__dur {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.ytCard__yt {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff0033;
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.ytCard__body { padding: 18px 22px 22px; }
.ytCard__body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.ytCard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.ytCard__meta b { color: var(--ink); font-weight: 600; }
.yt__counter {
  margin-top: 22px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.yt__counter b { color: var(--accent-darker); }

/* ────────── Footer social ────────── */
.foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.foot__sBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(244,248,238,.06);
  border: 1px solid rgba(244,248,238,.12);
  border-radius: 999px;
  font-size: 13px;
  color: var(--on-dark);
  opacity: .85;
  transition: opacity .15s, background .15s, border-color .15s;
}
.foot__sBtn:hover {
  opacity: 1;
  background: rgba(244,248,238,.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* ────────── Sticky CTA v2 ────────── */
.stickyCta__alt {
  font-size: 14px;
  color: var(--on-dark);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244,248,238,.18);
}

/* ────────── Responsive — search ────────── */
@media (max-width: 1080px) {
  .search__fields { grid-template-columns: 1fr 1fr; }
  .search__submit { grid-column: span 2; padding: 14px 24px !important; }
  .hero__trust { grid-template-columns: repeat(2, 1fr); }
  .yt__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .search__fields { grid-template-columns: 1fr; }
  .search__submit { grid-column: auto; }
  .hero__trust { grid-template-columns: 1fr; }
  .hero__trust li b { font-size: 20px !important; }
  .nav__link { display: none; }
}


/* ────────── Type tuning for Bricolage + Manrope ────────── */
.hero__title {
  /* R19: font-size !important removed — let the --h1-hero token rule */
  letter-spacing: -0.025em !important;
  line-height: 0.98 !important;
  font-weight: 500;
}
.hero__title em,
.hero__title .ital {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-deep);
}
.sec__title {
  letter-spacing: -0.025em;
  font-weight: 500;
  font-size: clamp(36px, 5.6vw, 72px);
  line-height: 1;
}
.sec__title .ital,
.ital { font-style: italic; font-weight: 500; }
.heroCalc__title,
.card__title,
.steps li h3,
.faq__q,
.quote blockquote,
.ytCard__body h3,
.carTitle h1,
.specs li b,
.apply__h,
.apply__priceBig,
.apply__monthlyBig,
.apply__trust b,
.kpi__num,
.hero__trust li b,
.brandCell__txt > b,
.brandCell--all .brandCell__txt > b,
.catModels__head h2,
.srchH1,
.srchH2,
.catHero__h1,
.catBody__h2,
.catHero__kpis b,
.finalCta__copy h2,
.foot__phones a,
.seo__body h2,
.seo__body h3,
.catSeo h2,
.carText h2,
.carSec__title,
.filt__head h2 {
  letter-spacing: -0.02em;
  font-weight: 500;
}
.finalCta__copy h2 { letter-spacing: -0.03em; font-weight: 600; }

/* Body font weight bump */
body { font-weight: 400; }
.hero__lead, .srchLede, .catHero__lede, .bigCalc__lead { font-weight: 400; }
.btn { letter-spacing: -0.005em; }


/* ═══════════════════════════════════════════════════════
   FINTECH POLISH — premium minimalism overrides
   ═══════════════════════════════════════════════════════ */

:root {
  /* Neutrals — graphite + warm off-white */
  --bg:        #f6f6f4;
  --bg-2:      #efefec;
  --bg-3:      #e6e6e2;
  --paper:     #ffffff;
  --surface:   #ffffff; /* R21: was referenced 19× (chips/facets) but never defined, so all
                           surfaces silently used their hardcoded fallback and couldn't be themed. */
  --ink:       #0c0d0e;
  --ink-2:     #1c1e21;
  --ink-3:     #3a3d42;
  --ink-soft:  #5f636a; /* R20 a11y: was #6a6e75 (~4.77:1 on white, dipped below AA on the
                           green-tinted .quickFilters / .accent-soft surfaces). ~5.3:1 now. */
  --line:      #e6e6e3;
  --line-2:    #d3d3cf;

  /* Greens — vibrant fintech */
  --accent:        oklch(0.70 0.20 152);
  --accent-deep:   oklch(0.56 0.18 152);
  /* R29 a11y: the bright --accent as TEXT/icon on light bg is only ~2.43:1 (fails WCAG AA).
     Use --accent-text for green text/meaningful icons on white; keep --accent for fills only. */
  --accent-text:   oklch(0.47 0.16 152);
  --accent-darker: oklch(0.36 0.12 152);
  --accent-soft:   oklch(0.94 0.06 152);
  --accent-tint:   oklch(0.975 0.03 152);
  /* Single CTA green — ONE token for every primary conversion button (main CTA, card
     "Заявка", modal submit, calculator) so the brand green is identical everywhere. */
  /* a11y CTA contrast: white text needs ≥4.5:1. The R13 value 0.55 was still only 4.24:1
     (the "passes AA" comment was wrong); 0.52 computes to ~4.8:1 and clears AA while staying
     the same brand green. Hover a touch darker for clear feedback. */
  --cta:           oklch(0.52 0.20 150);
  --cta-hover:     oklch(0.46 0.19 150);

  /* Pastels */
  --mint:      oklch(0.93 0.06 160);
  --lavender:  oklch(0.92 0.06 290);
  --peach:     oklch(0.94 0.05 50);

  /* Dark — unify with --ink (deep forest) — was #0e1014, now match site footer */
  --dark:      #0c1f14;
  --dark-2:    #18301f;
  --on-dark:   #f5f8f4;

  /* Typography — Bricolage display + Manrope body (per AVTOKREDO design system) */
  --display:   "Bricolage Grotesque", "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --font-display: var(--display);  /* alias — parser.css/inline H2 use --font-display */
  --sans:      "Manrope", "Inter", -apple-system, "Helvetica Neue", "Arial", sans-serif;
  --mono:      "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* Larger radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* R16 (impeccable typeset): TWO H1 sizes site-wide. hero = home/poisk/katalog heroes,
     page = landings/detail/static pages. Before this there were 5 competing scales
     (38/52/60/84/138px) and the most important keyword pages had the smallest H1. */
  --h1-hero: clamp(44px, 6.5vw, 88px);
  --h1-page: clamp(32px, 4.5vw, 52px);
  /* R19 (#17): TWO H2 tokens consolidate the 6 competing H2 scales. --h2-display for
     section headings (catalog/detail), --h2-body for in-article landing H2s. The home
     `.sec__title` stays a deliberate editorial outlier (large hero-section headings). */
  --h2-display: clamp(26px, 2.8vw, 36px);
  --h2-body: clamp(22px, 2.2vw, 28px);

  /* R16 (emil-design-eng): motion tokens. UI under 300ms, strong ease-out for
     enter/feedback, ease-in-out for on-screen movement. Never ease-in, never bounce. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms;
  --dur-ui: 200ms;

  /* Softer shadows */
  --sh-1: 0 1px 2px rgba(12,13,14,.04), 0 8px 24px -8px rgba(12,13,14,.07);
  --sh-2: 0 2px 4px rgba(12,13,14,.04), 0 24px 48px -16px rgba(12,13,14,.10);
  --sh-card: 0 1px 0 rgba(12,13,14,.02), 0 1px 3px rgba(12,13,14,.05);

  /* Merged from the old base :root (the only vars it defined that aren't above) */
  --maxw: 1360px;
  --pad:  clamp(20px, 4vw, 56px);
}

body {
  font-family: var(--sans);
  font-weight: 400;
  background:
    radial-gradient(900px 600px at 75% -10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

/* Typography overrides */
.hero__title,
.sec__title,
.heroCalc__title,
.faq__q,
.quote blockquote,
.ytCard__body h3,
.carTitle h1,
.apply__h,
.kpi__num,
.hero__trust li b,
.brandCell__txt > b,
.catModels__head h2,
.srchH1, .srchH2,
.catHero__h1,
.catBody__h2,
.catHero__kpis b,
.finalCta__copy h2,
.foot__phones a,
.seo__body h2,
.seo__body h3,
.catSeo h2,
.carText h2,
.carSec__title,
.filt__head h2,
.card__title,
.steps li h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
}
/* Unify landing-page H1: bare <h1> (vykup/konfiskat) fell back to the parent-theme
   default (different font/size, sometimes lighter than the page's own H2 → inverted
   hierarchy). One strong rule so every page H1 is the display font, heaviest on page. */
/* R19 CRIT: `:where()` zeroes the wrapper specificity so a CLASSED hero H1 inside
   .page-main (.srchH1 on /poisk/, /favorites/, /compare/) wins again — the old
   `.page-main h1` (0-1-1) out-specified `.srchH1` (0-1-0) and pinned the flagship
   funnel page to the 52px page token instead of the 88px hero token. */
:where(.page-main) h1, :where(.page-main) > .wrap > h1, .page-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--h1-page, clamp(32px, 4.5vw, 52px)); /* R16: unified page-H1 token */
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.sec__title, .hero__title, .finalCta__copy h2, .srchH1, .catHero__h1 {
  font-weight: 700;
  letter-spacing: -0.035em;
  /* CRO: prevent long non-breaking phrases clipping past the right edge on ≤360px */
  overflow-wrap: break-word;
}
.hero__title em, .ital, .sec__title .ital, .hero__title .ital, .srchH1 .ital, .catHero__h1 .ital, .finalCta__copy .ital, .seo__body .ital, .catSeo .ital, .quote blockquote::first-line {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-deep);
}
.ital { font-style: normal; font-weight: 700; color: var(--accent-deep); }

/* Card refinements */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .15s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: var(--line-2);
}

/* Buttons polished */
.btn {
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
}
.btn--primary {
  /* R32-2 (a11y): white-on---cta (oklch .52 → ~4.2:1) failed WCAG AA for button text. The resting
     fill now uses the AA-safe deep green #067835 (white = 5.6:1), matching v2; hover goes darker.
     This is the funnel's primary CTA sitewide (incl. /favorites/ + /podat-zayavku/ submit). */
  background: #067835;
  border-color: #067835;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -6px color-mix(in oklab, #067835 50%, transparent);
}
.btn--primary:hover {
  background: #04602a;
  border-color: #04602a;
}

/* R32-24: lead-form benefit bullets used a ✅ emoji that read like a checkbox control. Replace it
   with a crisp AA-green check drawn as a CSS marker — premium + consistent across devices. */
.pb-checklist li { display: flex; gap: 9px; align-items: flex-start; }
.pb-checklist li::before {
  content: ""; flex: none; width: 17px; height: 17px; margin-top: 1px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067835' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.btn--ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--sh-card);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--bg-2); }

/* ---- Accessibility (R12 H15) ---- */
/* Global keyboard-focus ring — the theme had none, so keyboard users had no visible
   focus indicator anywhere. Only shows for keyboard nav (:focus-visible), not mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[data-quick-apply]:focus-visible {
  outline: 3px solid var(--accent-deep, #1f7a46);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Skip-to-content link — visually hidden until focused. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 9999;
  background: var(--ink, #0c1f14);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* M3: catalog (/katalog/, seo.php → body.parser-fullwidth) renders its own proper
   breadcrumb (.crumbs: Головна › Каталог › …) AND the handcrafted article injects a
   second .breadcrumbs trail — two stacked breadcrumbs. Hide the article one ONLY on the
   catalog (the brand/city WP landings have no .crumbs, so their .breadcrumbs is kept). */
.parser-fullwidth .breadcrumbs { display: none; }

/* iOS Safari zooms the whole page when a focused form control has font-size < 16px
   (hero select, apply/search fields, comment were 14–15px). Force 16px on phones to
   stop the disorienting auto-zoom on every field tap. */
@media (max-width: 600px) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]),
  select,
  textarea { font-size: 16px; }
}

/* Nav */
.nav {
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.brand__word em { color: var(--accent-deep); }

/* Announce */
.announce {
  background: var(--ink);
  font-weight: 500;
  font-family: var(--sans);
}
.announce__inner { font-family: var(--sans); font-size: 13px; }

/* Eyebrow */
.eyebrow {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: var(--sh-card);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.eyebrow--light {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}

/* Search widget — fintech card */
.search {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  border-radius: clamp(20px, 2.4vw, 32px);
}
.search__field {
  background: var(--bg);
  border-radius: var(--r-md);
}
.search__field:focus-within {
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.search__submit {
  /* Single brand-green CTA — identical to main CTA / card "Заявка" / modal submit. */
  background: var(--cta);
  color: #fff;
  border-color: var(--cta);
  border-radius: var(--r-md);
  font-weight: 700;
}
.search__submit:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.search__qChip {
  background: var(--bg-2);
  color: var(--ink-3);
  font-weight: 500;
}
.search__qChip:hover {
  background: var(--accent-soft);
  color: var(--accent-darker);
  border-color: transparent;
}

/* Hero trust strip — softer */
.hero__trust li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.hero__trustIco { color: var(--accent-deep); }

/* KPI strip — bigger numbers, lighter */
.kpi { background: var(--paper); }
.kpi__inner { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kpi__cell { border-right: 1px solid var(--line); }
.kpi__num { font-weight: 700; color: var(--ink); }

/* How steps cards */
.how { background: var(--bg); }
.steps {
  background: transparent;
  border: 0;
  gap: 16px;
  border-radius: 0;
  overflow: visible;
}
.steps li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

/* Brands grid */
.brandsGrid {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-card);
}
.brandCell { transition: background .15s, color .15s; }
.brandCell:hover { background: var(--accent-soft); }
.brandCell:hover .brandCell__txt > b,
.brandCell:hover .brandCell__txt > span { color: var(--accent-darker); }
.brandCell--all { background: var(--ink); color: var(--on-dark); }
.brandCell--all .brandCell__txt > b,
.brandCell--all .brandCell__txt > span { color: var(--on-dark); }
.brandCell--all:hover { background: var(--ink-2); }
.brandCell--all:hover .brandCell__txt > b,
.brandCell--all:hover .brandCell__txt > span { color: var(--on-dark); }

/* Geo card */
.geo { background: var(--bg); }
.geo__map {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}
.geo__topcities { border-radius: var(--r-md); }

/* YT */
.yt { background: var(--bg); }
.ytCard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

/* FAQ */
.faq { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

/* Final CTA */
.finalCta { background: var(--dark); color: var(--on-dark); }
.finalCta::before {
  background:
    radial-gradient(900px 500px at 80% 50%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 60%);
}
.finalCta__copy .ital { color: var(--accent); }

/* SEO blocks */
.seo { background: var(--paper); border-top: 1px solid var(--line); }
.seo__cta {
  background: var(--bg-2);
  border: 1px solid var(--line);
}

/* Footer */
.foot { background: var(--ink); }

/* Sticky CTA — full-width bottom bar on mobile */
.stickyCta {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 -8px 40px rgba(12,13,14,.10), var(--sh-1);
  padding: 10px 12px 10px 18px;
}
.stickyCta__num { color: var(--ink); font-weight: 500; }
.stickyCta__num b { color: var(--accent-deep); font-weight: 700; }
.stickyCta__alt { color: var(--ink-3); border-color: var(--line); }

/* ─── Mobile-first polish ─── */
@media (max-width: 760px) {
  /* R17: the !important mobile override of .hero__title is GONE — it pinned 42.9px
     (below the token floor) and blocked any token change. The fluid token rules. */
  .sec__title { font-size: clamp(30px, 9vw, 44px); }
  .hero__lead { font-size: 15px; max-width: 100% !important; }

  /* Compact hero on mobile */
  .hero { padding-top: 16px !important; }
  .hero__inner { padding-bottom: 28px !important; }
  .hero__head { margin-bottom: 22px !important; }

  /* Search becomes a single stacked column */
  .search { padding: 12px !important; border-radius: 22px !important; }
  .search__field { padding: 12px 14px !important; }
  .search__lbl { font-size: 10px !important; }
  .search__field select { font-size: 15px !important; }
  .search__quick { gap: 4px !important; margin-top: 10px !important; padding-top: 10px !important; }
  .search__qChip { padding: 7px 11px !important; font-size: 12.5px !important; }
  .search__qLbl { display: none; }

  .hero__trust { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .hero__trust li { padding: 10px 12px !important; gap: 10px !important; }
  .hero__trust li b { font-size: 16px !important; }
  .hero__trust li span { font-size: 11px !important; }
  .hero__trustIco { width: 22px; height: 22px; }

  /* KPI — 2x2 */
  .kpi__inner { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi__cell { padding: 24px 18px !important; }
  .kpi__cell:nth-child(1), .kpi__cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  .kpi__cell:nth-child(2), .kpi__cell:nth-child(4) { border-right: 0 !important; }
  .kpi__num { font-size: 38px !important; }

  /* Grids → single column */
  .grid, .srchGrid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .card--wide { grid-column: auto !important; }

  /* Sticky CTA — full bottom bar */
  .stickyCta {
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
  }

  /* Add room for sticky CTA at bottom — R16 (backlog M3): only when a sticky bar
     actually exists; the unconditional rule left an 88px void above the footer on
     every page without one */
  body:has(.stickyCta), body.has-sticky-cta { padding-bottom: 88px; }

  /* Final CTA actions stack tight */
  .finalCta__inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .finalCta__actions { gap: 8px !important; }

  /* Section heads */
  .sec__head { gap: 14px !important; margin-top: clamp(32px, 6vw, 56px) !important; }

  /* Brands — 1 column */
  .brandsGrid { grid-template-columns: 1fr !important; }
  /* R33: the R32-27 "brandCell--all spans 2 cols" rule lives in @media(max-width:1080px),
     so it also fired here at ≤760 where the grid is 1-col — the span-2 forced the grid to
     create an IMPLICIT 2nd column, dragging all 20 cells into a 2-col layout whose right
     column (long brand names) overflowed and was clipped by overflow:hidden. Reset it so
     the single-column layout actually holds on phones. */
  .brandsGrid .brandCell--all { grid-column: auto !important; }
  .brandCell { padding: 16px !important; }

  /* SEO TOC inline */
  .seo__inner { gap: 24px !important; padding-left: var(--pad) !important; padding-right: var(--pad) !important; }
  .seo__toc { display: none; }

  /* Quotes/YT single col */
  .quotes__grid, .yt__grid { grid-template-columns: 1fr !important; }

  /* Footer */
  .foot__cols { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 16px !important; }

  /* Bigger tap targets */
  .btn { min-height: 48px; }
  .btn--sm { min-height: 40px; }
}

/* ─── Sitemap-style SEO Mega Footer (cross-links) ─── */
.megaSeo {
  background: var(--bg-2);
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.megaSeo__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 32px;
}
.megaSeo__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 8px 0 0;
}
.megaSeo__sub {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 32ch;
}
.megaSeo__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
}
.megaSeo__col h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.megaSeo__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.megaSeo__col li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
}
.megaSeo__col a {
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: color .15s;
  text-decoration: none;
}
.megaSeo__col a:hover { color: var(--accent-deep); }
.megaSeo__col li span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.megaSeo__moreBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  transition: background .15s, border-color .15s;
}
.megaSeo__moreBtn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-darker); }

@media (max-width: 1080px) { .megaSeo__cols { grid-template-columns: repeat(3, 1fr); } .megaSeo__head { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .megaSeo__cols { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } }
@media (max-width: 460px)  { .megaSeo__cols { grid-template-columns: 1fr; } }

/* Banking-card-style hero promo (optional) */
.heroPromo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
}
.promoCard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--sh-card);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.promoCard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.promoCard--mint { background: linear-gradient(140deg, var(--mint), var(--paper) 65%); }
.promoCard--lavender { background: linear-gradient(140deg, var(--lavender), var(--paper) 65%); }
.promoCard--peach { background: linear-gradient(140deg, var(--peach), var(--paper) 65%); }
.promoCard__ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  flex-shrink: 0;
}
.promoCard__body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
}
.promoCard__body p {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 760px) { .heroPromo { grid-template-columns: 1fr; } }

/* ============================================================
   THEME EXTENSIONS — header/footer/parser-content layout
   ============================================================ */

/* Site footer */
.siteFooter {
  background: #0c1f14;
  color: #f5f8f4;
  padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 6vw, 80px);
}
.siteFooter__inner { display: grid; gap: 32px; }
.siteFooter__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}
.siteFooter h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
  opacity: 0.6;
  color: #f5f8f4;
  font-family: inherit;
}
.siteFooter a {
  display: block;
  color: #f5f8f4;
  opacity: 0.85;
  text-decoration: none;
  padding: 4px 0;
  font-size: 14px;
}
.siteFooter a:hover { opacity: 1; color: var(--cta); }
/* R31: on phones each footer section (10-12 stacked links) became a long dead-scroll dump.
   Flow the links into 2 columns to roughly halve the height; the h4 spans both. */
@media (max-width: 600px) {
  .siteFooter__cols--seo > div { column-count: 2; column-gap: 20px; }
  .siteFooter__cols--seo > div h4 { column-span: all; }
  .siteFooter__cols--seo > div a { break-inside: avoid; }
}
.siteFooter p {
  color: #f5f8f4;
  opacity: 0.75;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.siteFooter__copy {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
}

/* Page-main wrapper for generic /info/, etc. */
.page-main { padding: clamp(24px, 4vw, 60px) 0; }
/* R17: font-size removed — this legacy rule out-specified the --h1-page token on
   apply/calculator/regions/usloviya (a third H1 scale R16 was meant to kill) */
.page-main .page-title { font-family: var(--display); margin: 0 0 24px; }

/* Hide WP plugin junk that doesn't belong on AVTOKREDO pages */
.trp-floater-ls,
#trp-floater-ls,
#toc_container,
.ez-toc-container { display: none !important; }

/* WP comments form — keep but style */
.entry-content { font-size: 16px; line-height: 1.7; max-width: 760px; }
.entry-content h2 { font-family: var(--display); font-size: 28px; margin: 32px 0 16px; }
.entry-content p { margin: 0 0 16px; }

/* ============================================================
   Articles / Archive / Search / Single-post styles
   ============================================================ */

/* Override .entry-content (from previous block) with stronger spec */
.entry-content { font-size: 16px; line-height: 1.7; max-width: 760px; margin: 0 auto; color: var(--ink, #0c1f14); }
.entry-content h2 { font-family: var(--display), Inter, system-ui; font-size: 28px; margin: 32px 0 16px; font-weight: 700; }
.entry-content h3 { font-family: var(--display), Inter, system-ui; font-size: 22px; margin: 28px 0 14px; font-weight: 600; }
.entry-content p { margin: 0 0 16px; }
.entry-content ul, .entry-content ol { margin: 0 0 16px; padding-left: 24px; }
.entry-content li { margin: 0 0 8px; }
/* R16: side-stripe border is an impeccable absolute ban — tinted surface instead */
.entry-content blockquote { background: var(--accent-tint, oklch(0.975 0.03 152)); border-radius: var(--r-sm, 12px); padding: 14px 18px; margin: 24px 0; font-style: italic; color: #2f4538; }
.entry-content img { max-width: 100%; height: auto; border-radius: 12px; }
.entry-content a:not(.btn):not(.chip):not(.car-card__quick) { color: oklch(0.46 0.16 150); text-decoration: underline; }
.entry-content a:not(.btn):not(.chip):not(.car-card__quick):hover { color: var(--cta); }
/* R19: don't let the prose link rule underline/recolor BUTTONS inside .entry-content
   (EV-landing / banner CTAs rendered as dark-green underlined text on a green pill) */
.entry-content a.btn { color: #fff; text-decoration: none; }

/* Post card (archive + search) */
.postGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; padding-top: 16px; }
.postCard { background: var(--surface, #fff); border: 1px solid var(--line, #d8e0d3); border-radius: 18px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.postCard:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(15,26,20,0.18); }
.postCard__media { display: block; aspect-ratio: 16/10; background: #e6e1d6; position: relative; }
.postCard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postCard__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.postCard__body { padding: 18px 20px; }
.postCard__meta { font-size: 12px; color: var(--ink-soft, #6a7570); margin-bottom: 8px; }
.postCard__title { font-family: var(--display, Inter), system-ui; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 10px; }
.postCard__title a { color: var(--ink, #0c1f14); text-decoration: none; }
.postCard__title a:hover { color: oklch(0.46 0.16 150); }
.postCard__excerpt { font-size: 14px; color: var(--ink-soft, #6a7570); line-height: 1.5; margin: 0 0 14px; }
.postCard__more { display: inline-block; font-size: 13px; font-weight: 600; color: oklch(0.46 0.16 150); text-decoration: none; }
.postCard__more:hover { color: var(--cta); }

/* Pager */
.postPager { display: flex; justify-content: center; gap: 6px; margin: 40px 0; flex-wrap: wrap; }
.postPager .page-numbers { padding: 10px 14px; border: 1px solid var(--line, #d8e0d3); border-radius: 10px; text-decoration: none; color: var(--ink, #0c1f14); font-weight: 500; font-size: 14px; background: var(--surface, #fff); transition: background .15s; }
.postPager .page-numbers:hover { background: var(--line-soft, #ebf1e8); border-color: var(--line-2, #bcc7b6); }
.postPager .page-numbers.current { background: var(--ink, #0c1f14); color: var(--bg, #f5f8f4); border-color: var(--ink); }
.postPager .dots { border: none; background: transparent; }

/* Single post */
.singlePost { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 60px) 0; }
.singlePost__head { margin-bottom: 24px; }
.singlePost__title { font-family: var(--display, Inter); font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.025em; line-height: 1.15; font-weight: 700; margin: 8px 0 16px; }
.singlePost__meta { font-size: 13px; color: var(--ink-soft, #6a7570); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.singlePost__cover { margin: 0 0 32px; border-radius: 18px; overflow: hidden; }
.singlePost__cover img { width: 100%; height: auto; display: block; }
.singlePost__nav { display: flex; justify-content: space-between; gap: 16px; margin: 48px 0; padding: 24px 0; border-top: 1px solid var(--line, #d8e0d3); border-bottom: 1px solid var(--line, #d8e0d3); }
.singlePost__nav a { color: oklch(0.46 0.16 150); text-decoration: none; font-weight: 500; font-size: 14px; }
.singlePost__nav a:hover { color: var(--cta); }

/* Search form */
.searchForm { display: flex; gap: 12px; margin-top: 16px; max-width: 520px; }
.searchForm__field { flex: 1; }
.searchForm__input { width: 100%; height: 44px; padding: 0 16px; border: 1.5px solid var(--line, #d8e0d3); border-radius: 12px; font-size: 15px; font-family: inherit; background: var(--surface, #fff); box-sizing: border-box; }
/* R30 (a11y): outline:none stripped the keyboard ring with only a faint border change left.
   Add an explicit focus ring so keyboard users see the focused field. */
.searchForm__input:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 25%, transparent); }
.searchForm__input:focus:not(:focus-visible) { box-shadow: none; }
.searchForm__submit { white-space: nowrap; }

/* Comments */
.comments { padding: 40px 0; background: var(--bg-2, #ebf1e8); margin-top: 60px; }
.commentsHead { font-family: var(--display); font-size: 22px; margin: 0 0 20px; font-weight: 700; }
.commentsList { list-style: none; padding: 0; margin: 0 0 32px; }
.commentsList .comment { margin: 0 0 24px; padding: 16px; background: var(--surface, #fff); border-radius: 12px; border: 1px solid var(--line, #d8e0d3); }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--line, #d8e0d3); border-radius: 10px; font-family: inherit; font-size: 14px; margin-bottom: 12px; background: var(--surface, #fff); box-sizing: border-box; }
.commentForm__field label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }

/* ============================================================
   Brand logos + SEO article + facets (additions)
   ============================================================ */

/* Brand logo as image (replaces text-abbreviation) */
.brandCell__logo--img {
  background: var(--surface, #fff) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid var(--line, #d8e0d3) !important;
}
.brandCell__logo--img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* SEO article block (catalog-level) */
.seoBlock {
  background: var(--bg-2, #ebf1e8);
  padding: clamp(40px, 6vw, 80px) 0;
}
.seoBlock__inner { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; }
/* R29 #5: collapsible SEO prose — clamp the wall with a fade + «Показати більше» toggle. */
.seoBlock__clip { position: relative; max-height: 420px; overflow: hidden; transition: max-height .45s ease; }
.seoBlock__clip.is-open { max-height: none; }
.seoBlock__clip:not(.is-open)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(235,241,232,0), var(--bg-2, #ebf1e8));
}
.seoBlock__toggle {
  display: inline-flex; align-self: center; align-items: center; gap: 8px; margin: 20px auto 0;
  padding: 10px 22px; border: 1px solid var(--line-2, #cdd8c7); border-radius: 999px;
  background: var(--surface, #fff); color: var(--accent-text, #0a7a32); font: inherit;
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s;
}
.seoBlock__toggle:hover { border-color: var(--accent-deep, #0a8f42); }
.seoBlock .seo-article h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 32px 0 14px;
  color: var(--ink);
}
.seoBlock .seo-article h2:first-child { margin-top: 0; }
.seoBlock .seo-article h3 {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  margin: 24px 0 10px;
  color: var(--ink-2, #18301f);
}
.seoBlock .seo-article p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-3, #2f4538);
  margin: 0 0 14px;
  /* R33: the inner is 1040px wide, so prose ran ~115ch at ≥1440 — well over the readable max.
     Cap the measure to ~68ch (headings/lists keep their own widths). */
  max-width: 42rem;
}
.seoBlock .seo-article ul,
.seoBlock .seo-article ol {
  margin: 0 0 16px;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 42rem;
}
.seoBlock .seo-article li { margin-bottom: 6px; }
.seoBlock .seo-article strong { color: var(--ink); }

/* Map dots hover */
.geoDot { cursor: pointer; transition: filter .15s; }
.geoDot:hover { filter: brightness(1.2) drop-shadow(0 0 6px var(--cta)); }
.geoDot text { pointer-events: none; user-select: none; }

/* Facet chip pills (multi-select filter) */
.facetChips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.facetChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--line, #d8e0d3);
  border-radius: 999px;
  background: var(--surface, #fff);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #0c1f14);
  cursor: pointer;
  transition: transform var(--dur-press, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; /* R16: no transition:all (emil) */
}
.facetChip:hover { border-color: var(--line-2, #bcc7b6); background: var(--bg-2, #ebf1e8); }
.facetChip.is-on {
  background: var(--ink, #0c1f14);
  color: var(--bg, #f5f8f4);
  border-color: var(--ink, #0c1f14);
}
.facetChip .count { opacity: .65; font-family: var(--mono); font-size: 11px; }
.facetChip.is-on .count { opacity: .8; }

/* Active filter chips with × */
.activeChips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.activeChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--ink, #0c1f14);
  color: var(--bg, #f5f8f4);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.activeChip__x {
  background: transparent;
  border: none;
  color: var(--bg);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 4px;
  opacity: 0.7;
}
.activeChip__x:hover { opacity: 1; }

/* ── CRO 2026-06-02: mobile hero overflow hard-fix (end-of-file = wins source order) ──
   Hero was a CSS grid whose 1fr track couldn't shrink below the huge H1 min-content,
   so the headline overflowed the right edge on phones. Stack to block + force wrap. */
/* Some section overflows the viewport on phones and stretches <body> wider than
   the screen, which made the hero (clipped to body width) look cut off. Contain at
   the root — overflow-x:clip does not break the sticky header (unlike overflow:hidden). */
@media (max-width: 700px) {
  html, body { overflow-x: clip; max-width: 100%; }
  .hero__inner { display: block !important; }
  .hero__head  { min-width: 0 !important; max-width: 100% !important; margin-bottom: 32px; }
  .hero__title {
    /* R19: font-size !important removed — pinned 33px (8.5vw@390), below the token
       floor, and blocked the unified hero scale on home mobile */
    line-height: 1.04 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  .hero__title .under, .hero__title .ital { white-space: normal !important; }
  .hero { overflow-x: clip; }
}

/* ── Mobile burger + off-canvas drawer (nav was unreachable ≤1080px) ── */
.nav__burger { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px; align-items: center; }
@media (max-width: 1080px) { .nav__burger { display: inline-flex; } }
.navDrawer { position: fixed; inset: 0; z-index: 9998; }
.navDrawer[hidden] { display: none; }
.navDrawer__backdrop { position: absolute; inset: 0; background: rgba(15,26,20,0.5); }
.navDrawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(82vw, 320px); background: #fff; box-shadow: -12px 0 40px -8px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 2px; padding: 64px 22px 24px; overflow-y: auto; animation: nd-in .22s ease; }
@keyframes nd-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.navDrawer__panel a { padding: 13px 6px; font-size: 17px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line, #d8e0d3); }
.navDrawer__panel a.btn { border: 0; margin-top: 14px; color: #fff; text-align: center; }
.navDrawer__close { position: absolute; top: 14px; right: 16px; background: var(--bg-2,#ecf0e8); border: 0; width: 36px; height: 36px; border-radius: 10px; font-size: 22px; cursor: pointer; line-height: 1; color: var(--ink,#0c1f14); }

/* SEO landing: hero car grid lifted above the fold */
.lp-hero { margin: 16px 0 30px; }
.lp-hero__lead { font-size: 15px; color: var(--ink-soft,#4a5d4f); margin: 0 0 14px; font-weight: 500; }

/* R15 a11y: respect the OS "reduce motion" preference — kill decorative transitions,
   the ticker and smooth-scroll for users who get motion-sick (was 0 coverage). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════ R16 craft pass (impeccable + emil-design-eng skills) ════════ */

/* Numbers: money/counters align digit-for-digit (emil: unseen details compound) */
.mono { font-variant-numeric: tabular-nums; }

/* Headings wrap evenly; long prose avoids orphans (impeccable typography) */
h2, h3 { text-wrap: balance; }
.seo-page p, .entry-content p { text-wrap: pretty; }

/* Press feedback (emil): every pressable acknowledges the tap. Uniform superset
   transition keeps existing hover behaviors while adding the transform channel. */
.btn, .chip, .facetChip, .car-card__quick, .filterTrigger, .sortDropdown__btn, .qaModal__close {
  transition: transform var(--dur-press, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:active, .chip:active, .facetChip:active, .car-card__quick:active,
.filterTrigger:active, .sortDropdown__btn:active { transform: scale(0.97); }

/* Hover lifts are desktop-pointer-only (emil: touch fires :hover on tap → false states) */
@media (hover: none), (pointer: coarse) {
  .car-card:hover { transform: none; box-shadow: none; }
  .car-card:hover .car-card__media img { transform: none; }
}

/* Card grid entrance: short stagger, decorative, never gates visibility
   (backwards-fill keyframe FROM offset → settles at natural state) */
@media (prefers-reduced-motion: no-preference) {
  .srchGrid .car-card { animation: pbCardIn 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) backwards; }
  .srchGrid .car-card:nth-child(2) { animation-delay: 40ms; }
  .srchGrid .car-card:nth-child(3) { animation-delay: 80ms; }
  .srchGrid .car-card:nth-child(4) { animation-delay: 120ms; }
  .srchGrid .car-card:nth-child(5) { animation-delay: 160ms; }
  .srchGrid .car-card:nth-child(6) { animation-delay: 200ms; }
  .srchGrid .car-card:nth-child(n+7) { animation: none; }
  /* Mobile filter sheet enters from below (display flip → animation, not transition) */
  .filt.is-mobile-open { animation: pbSheetIn 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
}
@keyframes pbCardIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes pbSheetIn { from { opacity: 0.5; transform: translateY(24px); } }

/* iOS: inputs under 16px zoom the page on focus (impeccable audit / backlog M1-M2) */
@media (max-width: 768px) {
  .filt select, .filt input, input.filt__rangeInput, select.facetSelect,
  .apply__field input, .apply__field select, .ccalc input, .ccalc select,
  .hero select, .hero input, .heroSearch select, .heroSearch input {
    font-size: 16px !important;
  }
}

/* Calculator result: the single most important trust number on the page */
.ccalc__big b { font-size: 34px; letter-spacing: -0.02em; }

/* R20: the sticky CTA is a MOBILE-ONLY conversion bar (markup now emitted on the car
   detail page). Hidden on desktop where the apply form is already beside the gallery;
   shown ≤760px where the form would otherwise be a long scroll away. Pairs with the
   existing `body:has(.stickyCta){padding-bottom:88px}` rule in the 760px block above. */
.stickyCta { display: none; }
@media (max-width: 760px) { .stickyCta { display: flex; } }

/* R20 a11y: icon-only controls must meet the 44px minimum tap target on touch devices
   (WCAG 2.5.5). Additive, coarse-pointer only — no desktop visual change. */
@media (pointer: coarse) {
  .nav__fav,
  .nav__burger,
  .sortDropdown__btn,
  .filt__reset { min-height: 44px; }
  .nav__fav { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}