/* self-hosted fonts (OFL): 9 faces, 265 KB */
/* Oswald = swap (font-fix 14.10): with optional a late face was dropped for the whole view (the old heavy fallback on file:// demos and pages
   without the preload, the rouble sign from the unpreloaded latin-ext face always); measured CLS with swap <= the optional one */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:optional;src:url(../fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:optional;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:optional;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:optional;src:url(../fonts/jetbrains-mono-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:optional;src:url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:optional;src:url(../fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/oswald-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/oswald-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/oswald-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* AUTOBOSS design system — tokens and components.
   Source: proto/sborka-r2/client/k1.html («Кино»), approved by Alexander 2026-09-05.
   Rule: nothing here is invented beyond k1; extend only when a page needs it (marked NEW). */

/* ---------- 1. Tokens ---------- */
:root{
  /* graphite scale (dark bands) */
  --bg:#101215;        /* page background, hero fade-out */
  --bg2:#16191e;       /* alternate band */
  --bg3:#1c2026;       /* cards / raised surfaces */
  --deep:#0b0c0e;      /* final CTA band, sticky bar */
  /* light band (SEO text, prices) */
  --paper:#efedea;
  --ink:#14161a;
  --ink-muted:#5c6169;
  --ink-line:rgba(20,22,26,.18);
  /* text on dark */
  --txt:#e9eaec;
  --txt-soft:#c3c8ce;
  --muted:#9aa0a8;
  --dim:#787e86;
  --line:rgba(255,255,255,.10);
  /* brand */
  --red:#e52b32;                 /* CTA, numbers, accents only; <= 5-8 % of screen */
  --red-glow:rgba(229,43,50,.28);
  --blue:rgba(64,124,255,.30);   /* hero radial glow, Alexander's palette 14 */
  /* type */
  /* fallback until Oswald arrives (or for good if it fails): narrow faces measured closest to
     Oswald (Bahnschrift SemiCondensed ships with Windows 10/11; width x0.95-0.99, has the rouble sign); never the old single heavy
     condensed face (one weight, the browser faked bold on it: smeared headings and prices, Mikhail 14.10) */
  --f-disp:'Oswald','Bahnschrift SemiCondensed','Arial Narrow','Roboto Condensed',sans-serif-condensed,'Helvetica Neue',Arial,sans-serif;
  --f-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  /* spacing (8 px grid) */
  --sp:8px;
  --gutter:20px;       /* 40px from 760px */
  /* vertical rhythm between bands: the ONE place (W-0071, Mikhail 13.10 «между блоками слишком пусто»); desktop values
     at «wide screens» below */
  --band-y:44px;       /* band padding (top = bottom) */
  --band-y-final:48px; /* the final request band */
  --band-y-m:32px;     /* phone-only home sections (.m-sec) */
  --max:1200px;
  /* shape */
  --r-btn:2px;
  --r-pill:100px;
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.4s;
}
@media (min-width:760px){:root{--gutter:40px}}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden}                 /* NOT on body: body overflow-x kills position:sticky in Chrome */
html{font-synthesis-weight:none}        /* no fake bold when a fallback face stands in for Oswald/Inter (inherited) */
html,body{margin:0;padding:0;max-width:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--f-text);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.disp{font-family:var(--f-disp);font-weight:600;text-transform:uppercase;line-height:1.12;letter-spacing:.01em}   /* room for Й/Ё marks between lines */
.mono{font-family:var(--f-mono)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- 3. Type scale ---------- */
h1,.h1{margin:0 0 16px;font-size:clamp(38px,10.5vw,86px);max-width:15ch}   /* .h1: looks like h1, is not one (home desktop, W-0069) */
@media (min-width:1000px){h1,.h1{font-size:92px}}
h1 em,.h1 em{font-style:normal;color:var(--red)}          /* one red word max */
.hero.short h1{font-size:clamp(34px,8vw,64px)}     /* NEW: inner pages */
.btitle{font-family:var(--f-disp);text-transform:uppercase;font-weight:500;font-size:clamp(24px,6vw,40px);line-height:1.15;letter-spacing:.01em;margin:0}
.kicker{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#c9ced5;margin-bottom:16px}
.kicker::before{content:"";width:40px;height:2px;background:var(--red);flex:0 0 auto}
.sub{margin:0 0 24px;max-width:52ch;color:var(--txt-soft);font-size:15px;line-height:1.6}
@media (min-width:1000px){.sub{font-size:17px}}
.blead{color:var(--muted);max-width:56ch;margin:-16px 0 32px;font-size:14px}
.note{font-size:11px;color:#7d838b;letter-spacing:.04em;margin-top:12px}

/* ---------- 4. Buttons ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#d6262d;   /* --red a touch darker: white text 5:1 (was 4.45) */color:#fff;font-weight:600;font-size:16px;
  padding:16px 28px;border-radius:var(--r-btn);letter-spacing:.01em;box-shadow:0 8px 32px var(--red-glow);border:0;cursor:pointer;font-family:var(--f-text)}
.cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pill);
  padding:8px 16px;font-size:13px;font-weight:500;letter-spacing:.02em;background:rgba(16,18,21,.35);backdrop-filter:blur(8px)}
.band.light .cta{box-shadow:none}

/* ---------- 5. Header (over hero) ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gutter)}
@media (min-width:760px){.hdr{padding:24px var(--gutter)}}
.hdr img{height:26px;width:auto}
.hdr nav{display:none;gap:24px;font-size:14px;color:var(--txt-soft);margin-left:auto;margin-right:24px}   /* NEW */
@media (min-width:760px){.hdr nav{display:flex}}
.hdr nav a[aria-current]{color:#fff;border-bottom:2px solid var(--red);padding-bottom:2px}

/* ---------- 6. Hero — full (home) and short (inner pages) ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero.short{min-height:min(72svh,640px)}          /* NEW: inner pages, same scene, less height */
.hero-scene{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 70% at 78% 22%,var(--blue) 0%,rgba(64,124,255,0) 58%),
  radial-gradient(90% 55% at 22% 78%,rgba(229,43,50,.16) 0%,rgba(229,43,50,0) 62%),
  linear-gradient(180deg,#1b2027 0%,#141317 46%,#0c0d10 100%)}
.hero-scene::after{content:"";position:absolute;inset:0;opacity:.7;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,rgba(255,255,255,0) 1px 4px)}
.hero img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.85}
.hero-veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,11,13,.55) 0%,rgba(10,11,13,.18) 32%,rgba(10,11,13,.82) 74%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:3;padding:0 var(--gutter) 32px;width:100%;max-width:var(--max);margin:0 auto}
@media (min-width:760px){.hero-inner{padding-bottom:48px}}
.crumbs{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:16px}   /* NEW */
.crumbs a{color:var(--txt-soft)}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:rgba(16,18,21,.55);padding:16px 14px}
@media (min-width:760px){.fact{padding:20px 18px}}
.fact b{display:block;font-family:var(--f-disp);font-weight:500;font-size:30px;line-height:1;letter-spacing:.01em}
.fact span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ---------- 7. Bands (numbered sections) ---------- */
.band{padding:var(--band-y) 0;border-top:1px solid var(--line);position:relative}
.band.alt{background:var(--bg2)}
.band.deep{background:var(--deep)}
.band.light{background:var(--paper);color:var(--ink);border-top:none}
.bhead{display:flex;align-items:baseline;gap:16px;margin-bottom:32px}
.bnum{font-family:var(--f-disp);font-size:56px;font-weight:700;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22)}
@media (min-width:760px){.bnum{font-size:80px}}
.band.light .bnum{-webkit-text-stroke:1px rgba(20,22,26,.25)}
.band.light .blead{color:var(--ink-muted)}
.band.light p{color:#3a3f46}

/* ---------- 8. Components ---------- */
/* chips (brands) */
.marks{display:flex;flex-wrap:wrap;gap:8px}
.mark{border:1px solid var(--line);padding:12px 18px;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.06em;font-size:15px;font-weight:400;color:#dfe2e6}
.mark.all{border-color:rgba(229,43,50,.55);color:#fff}
/* before / after screens */
.ba{display:grid;gap:8px}
@media (min-width:760px){.ba{grid-template-columns:1fr 1fr;gap:16px}}
.screen{border:1px solid var(--line);background:#0e0f12;padding:20px 16px}
.screen.after{background:linear-gradient(180deg,#15181d,#0f1114);border-color:rgba(229,43,50,.35)}
.screen h4{margin:0 0 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.screen.after h4{color:var(--red)}
.screen ul{list-style:none;margin:0;padding:0}
.screen li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.screen li:last-child{border-bottom:none}
.screen li small{font-size:11px;color:#6d737b;letter-spacing:.08em;text-transform:uppercase}
.screen.old li{color:#8c9198}
.ba-note{margin-top:24px;font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(16px,4vw,22px);letter-spacing:.02em;color:#fff;font-weight:400}
/* numbered steps */
.steps{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.step{background:var(--bg);padding:24px 0;display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:start}
@media (min-width:760px){.step{grid-template-columns:96px 1fr;padding:28px 0}}
.band.alt .step{background:var(--bg2)}
.step .n{font-family:var(--f-disp);font-size:34px;font-weight:600;line-height:.9;color:var(--red)}
@media (min-width:760px){.step .n{font-size:44px}}
.step p{margin:0;font-size:16px;color:#dcdfe3;max-width:44ch}
/* trust cards */
.trust{display:grid;gap:8px}
@media (min-width:760px){.trust{grid-template-columns:1fr 1fr;gap:16px}}
.tcard{border:1px solid var(--line);padding:24px 20px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.tcard .bar{width:32px;height:3px;background:var(--red);margin-bottom:16px}
.tcard h4{margin:0 0 8px;font-family:var(--f-disp);text-transform:uppercase;font-size:17px;font-weight:500;letter-spacing:.03em}
.tcard p{margin:0;color:var(--muted);font-size:14px}
/* price rows (light band) */
.prices{border-top:1px solid var(--ink-line)}
.price{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--ink-line)}
.price .car{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(20px,5.5vw,30px);font-weight:500;letter-spacing:.01em}
.price .val{font-family:var(--f-disp);font-size:clamp(22px,6vw,34px);font-weight:600;color:var(--red);white-space:nowrap}
.price .time{grid-column:1/-1;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b7078}
.fix{margin-top:24px;font-size:14px;color:#4d525a}
/* reviews */
.revs{display:grid;gap:8px}
@media (min-width:760px){.revs{grid-template-columns:repeat(3,1fr);gap:32px}}
.rev{border-left:2px solid var(--red);padding:8px 0 8px 20px}
.rev p{margin:0 0 12px;font-size:clamp(17px,4.6vw,21px);line-height:1.4;color:#eceef0}
.rev cite{font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* master / photo block */
.master{display:grid;gap:24px}
@media (min-width:760px){.master{grid-template-columns:5fr 7fr;align-items:center;gap:48px}}
.mphoto{position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:linear-gradient(140deg,#22262d,#101215 70%)}
.mphoto::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;background:var(--red)}
.mphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mname{font-family:var(--f-disp);text-transform:uppercase;font-size:26px;font-weight:500;margin:0 0 4px}
.maddr{color:var(--muted);font-size:14px;margin:0 0 20px}
.cities{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--f-disp);text-transform:uppercase;font-size:15px;letter-spacing:.06em;color:#cfd3d8;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partner{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;border:1px solid rgba(229,43,50,.4);padding:16px 20px}
.partner span{font-size:14px;color:#dcdfe3}
.partner a{font-family:var(--f-disp);text-transform:uppercase;color:var(--red);letter-spacing:.06em;font-size:15px}
/* FAQ */
.faq{border-top:1px solid var(--line)}
@media (min-width:760px){.faq{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}}
.qa{border-bottom:1px solid var(--line);padding:20px 0}
.qa h3,.qa h4{margin:0 0 8px;font-family:var(--f-disp);text-transform:uppercase;font-size:17px;font-weight:500;letter-spacing:.03em}
.qa p{margin:0;color:var(--muted);font-size:14px;max-width:60ch}
/* NEW: link list (brand catalog, footer sitemap) */
.linklist{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:760px){.linklist{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.linklist{grid-template-columns:1fr 1fr 1fr}}
/* last item fills the row, so the grid never shows an empty grey cell */
@media (min-width:760px) and (max-width:1023px){.linklist a:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1024px){.linklist a:last-child:nth-child(3n+1){grid-column:1/-1}.linklist a:last-child:nth-child(3n+2){grid-column:span 2}}
.linklist a{background:var(--bg);padding:20px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--f-disp);text-transform:uppercase;font-size:20px;letter-spacing:.03em}
@media (min-width:760px){.linklist a{padding:20px 16px}}   /* columns: keep text off the dividers */
.linklist a small{font-family:var(--f-text);text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted)}
/* NEW: text page (policy, SEO paragraphs on light band) */
.prose{max-width:68ch}
.prose h3{font-family:var(--f-disp);text-transform:uppercase;font-weight:500;font-size:22px;margin:32px 0 8px}
.prose p,.prose li{font-size:16px;line-height:1.65}

/* ---------- 9. NEW: forms (lead: VIN + city -> Telegram / MAX bot, spec item 4) ---------- */
.form{display:grid;gap:12px;max-width:520px}
.field{display:grid;gap:6px}
.field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);color:var(--txt);
  font-family:var(--f-text);font-size:16px;padding:14px 16px;border-radius:var(--r-btn);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,43,50,.18)}
.field select option{color:#111;background:#fff}
.field .hint{font-size:12px;color:var(--dim)}
.consent{font-size:12px;color:var(--dim);max-width:52ch}
.consent a{text-decoration:underline}

/* ---------- 10. Final CTA + footer + sticky ---------- */
.final{position:relative;padding:var(--band-y-final) 0;background:var(--deep);border-top:1px solid var(--line);overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 0%,rgba(229,43,50,.16),rgba(229,43,50,0) 70%)}
.final .wrap{position:relative}
.final h2{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(28px,8vw,56px);line-height:1.2;margin:0 0 16px;max-width:16ch;font-weight:600}
.final p{color:var(--muted);max-width:46ch;margin:0 0 32px}
footer{padding:40px 0 104px;border-top:1px solid var(--line);background:var(--bg)}
@media (min-width:760px){footer{padding:56px 0}}
footer img{height:24px;width:auto;margin-bottom:16px}
footer p{margin:0;color:var(--dim);font-size:13px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0;font-size:13px;color:var(--txt-soft)}   /* NEW */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,12,14,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;gap:12px;align-items:center}
.sticky .cta{flex:1;padding:14px 16px;font-size:15px;box-shadow:none}
@media (min-width:760px){.sticky{display:none}}

/* ---------- 11. NEW (2026-09-05, build of the remaining Queue 1 pages) ---------- */
/* Test badge: was page-local on rusifikaciya, shared now that every page carries one. */
.badge{position:fixed;top:8px;left:8px;z-index:90;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:#cfd3d8;
  background:rgba(16,18,21,.72);border:1px solid var(--line);padding:4px 8px;border-radius:4px}
/* Header right group: phone (tel: link, Metrika goal "call") + "Написать" pill */
.hdr .right{display:flex;align-items:center;gap:12px}
.hdr .tel{font-family:var(--f-disp);font-size:18px;letter-spacing:.03em;color:#fff;white-space:nowrap}
.hdr .tel small{display:block;font-family:var(--f-text);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
@media (max-width:759px){.hdr .tel small{display:none}.hdr .tel{font-size:15px}}
/* 3-column card grid (apps / "what is included") */
.apps{display:grid;gap:8px}
@media (min-width:760px){.apps{grid-template-columns:repeat(3,1fr);gap:16px}}
/* form layout */
.form-row{display:grid;gap:12px}
@media (min-width:760px){.form-row{grid-template-columns:1fr 1fr}}
.form .cta{width:100%}
.form-actions{display:grid;gap:10px}
@media (min-width:760px){.form-actions{grid-template-columns:1fr auto auto;align-items:center}}
.form-actions .cta.ghost{padding:14px 20px;font-size:15px}
.sticky .cta.ghost{flex:0 0 auto;padding:14px 18px}
.city-stub[hidden]{display:none}
/* price rows outside the light band (chip-tuning ranges on /ceny/) */
.band:not(.light) .prices,.band:not(.light) .price{border-color:var(--line)}
.band:not(.light) .price .car{color:var(--txt)}
.band:not(.light) .price .time{color:var(--dim)}
.band:not(.light) .fix{color:var(--muted)}
/* several .master blocks stacked (contacts: one per city) */
.master + .master{margin-top:48px;padding-top:48px;border-top:1px solid var(--line)}
/* brand chips as links (catalog: a chip is not a dead end) */
a.mark{transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
a.mark:hover{border-color:rgba(229,43,50,.55);color:#fff}
/* light band: link colour inside prose/prices */
.band.light a{color:var(--ink)}
.prose a{text-decoration:underline}
/* review index (_pages.html) */
.pgrid{display:grid;gap:24px}
@media (min-width:760px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{border:1px solid var(--line);background:var(--bg2);padding:12px;min-width:0}
.pcard h4{margin:0 0 4px;font-family:var(--f-disp);text-transform:uppercase;font-size:16px;font-weight:500}
.pcard .u{font-family:var(--f-mono);font-size:11px;color:var(--muted);word-break:break-all}
.pcard iframe{width:390px;height:520px;border:1px solid var(--line);background:#000;margin-top:12px;
  transform:scale(.72);transform-origin:top left;display:block}
/* the iframe keeps its 390 px layout width, so the wrapper must clip it (no page-wide scroll at 390) */
.pcard .frame{height:378px;overflow:hidden;min-width:0;width:100%}

/* ---- 02 model tiles (home) — desktop: brand filter + grid; mobile: one shelf per brand, horizontal scroll ---- */
.mchips{display:none;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.mchip{border:1px solid var(--line);background:transparent;color:#dfe2e6;padding:10px 16px;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.06em;font-size:14px;cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.mchip:hover{border-color:rgba(255,255,255,.35);color:#fff}
.mchip.is-on{border-color:var(--red);color:#fff}
.mrow{margin:0 0 28px}
.mrow-h{display:flex;align-items:baseline;gap:10px;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.04em;font-size:20px;color:#fff;margin:0 0 12px;text-decoration:none}
.mrow-h span{font-family:var(--f-text);text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted)}
.mrow-t{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 14px;margin:0 calc(-1*var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);scrollbar-width:none}
.mrow-t::-webkit-scrollbar{display:none}
.mt{flex:0 0 72%;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:16px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#dfe2e6;text-decoration:none;position:relative;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.mt::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--red);transition:height var(--dur) var(--ease)}
.mt:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.mt:hover::before{height:100%}
.mt-brand{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mt-name{font-family:var(--f-disp);font-weight:500;font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:.01em;color:#fff}
.mt-meta{font-size:12px;color:var(--muted)}
.mt-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.mt-foot b{font-family:var(--f-disp);font-weight:500;font-size:17px;color:#fff;letter-spacing:.02em}
.mt-foot i{font-style:normal;font-size:12px;color:var(--muted)}
.mt.is-linked .mt-foot i{color:#dfe2e6}
@media (min-width:760px){
  .mchips{display:flex}
  .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .mrow{display:contents}
  .mrow[hidden]{display:none}
  .mrow-h{display:none}
  .mrow-t{display:contents}
  .mt{flex:none;min-height:180px;padding:20px}
  .mt-name{font-size:30px}
}
@media (min-width:1000px){
  .mgrid{grid-template-columns:repeat(4,1fr);gap:14px}
  .mt-name{font-size:32px}
}

/* 02 model cards (home, 2026-09-14, W-0021 per Astra): one markup, two layouts.
   <640 = compact recognition rows (3 visible + «Ещё 9»), 640-899 = 3-col tiles, >=900 = 4-col tiles */
.mc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mc-card{min-width:0;background:var(--bg3);border:1px solid var(--line);transition:border-color var(--dur) var(--ease)}
.mc-a{display:flex;align-items:center;gap:14px;min-height:110px;padding:12px 14px;color:inherit;text-decoration:none}
.mc-img{position:relative;display:block;flex:0 0 96px;width:96px;aspect-ratio:4/3;overflow:hidden;background:#0e0f12}
.mc-img img{display:block;width:100%;height:100%;object-fit:cover}
.mc-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;gap:2px}
.mc-name{margin:0;font-family:var(--f-disp);font-weight:500;font-size:22px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;color:#fff}
.mc-years{font-size:13px;color:var(--muted)}
.mc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.mc-price{font-family:var(--f-disp);font-weight:600;font-size:18px;color:#fff;letter-spacing:.02em;white-space:nowrap}
.mc-badge{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-soft);border:1px solid var(--line);padding:2px 6px;white-space:nowrap}
.mc-chev{font-size:24px;line-height:1;color:var(--muted)}
.mc-more{display:none}
.mc-list.is-open .mc-more{display:block}
.mc-toggle{display:flex;width:100%;min-height:48px;margin:12px 0 0;align-items:center;justify-content:center;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-btn);font-family:var(--f-text);font-weight:600;font-size:15px;cursor:pointer}
.mc-cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 0 0}
.mc-cta .cta{width:100%;min-height:48px}
.mc-cta-note{font-size:13px;color:var(--muted)}
.mc-also{margin:24px 0 0;font-size:14px;color:var(--muted);max-width:70ch}
.mc-also a{color:#fff;white-space:nowrap}
@media (hover:hover){
  .mc-card:hover{border-color:rgba(255,255,255,.3)}
  .mc-card:hover .mc-chev{color:#fff}
}
/* tablet: 3-col tiles, everything visible */
@media (min-width:640px){
  .mc-list{grid-template-columns:repeat(3,1fr);gap:12px}
  .mc-more{display:block}
  .mc-toggle{display:none}
  .mc-card{display:flex;flex-direction:column}
  .mc-a{flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:0;height:100%}
  .mc-img{flex:none;width:100%}
  .mc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,18,0) 60%,rgba(14,15,18,.5) 100%);pointer-events:none}
  .mc-body{padding:14px 16px 16px;gap:4px}
  .mc-name{font-size:24px}
  .mc-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
  .mc-cta{flex-direction:row;justify-content:center;gap:16px;margin-top:32px}
  .mc-cta .cta{width:auto}
}
/* desktop: 4-col tiles */
@media (min-width:900px){
  .mc-list{grid-template-columns:repeat(4,1fr);gap:14px}
  .mc-name{font-size:26px}
}

/* model page (2026-09-14, W-0022 step 2): hero with model image, spec rail, before/after rows, feature callout */
.mhero-inner{display:grid;gap:24px;padding-top:96px}   /* header is absolute: keep the image out from under it */
.mhero-img{position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:linear-gradient(140deg,#22262d,#101215 70%);max-width:460px}
.mhero-img::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;background:var(--red)}
.mhero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mhero-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:24px;font-family:var(--f-disp);text-transform:uppercase;line-height:1;letter-spacing:.02em}
.mhero-fallback span:first-child{font-size:14px;letter-spacing:.18em;color:var(--muted);margin-bottom:8px}
.mhero-fallback span:last-child{font-size:clamp(34px,9vw,56px);font-weight:600;color:#fff}
.mrail{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mrail li{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:#dfe2e6;border:1px solid rgba(255,255,255,.22);padding:8px 12px;background:rgba(16,18,21,.45)}
.mrail li:first-child{color:#fff;border-color:rgba(229,43,50,.6)}
.mhero .cta-row{margin-bottom:0}
.mhero .cta{min-height:48px}
@media (min-width:760px){
  .mhero-inner{grid-template-columns:7fr 5fr;align-items:end;gap:48px}
  .mhero-img{max-width:none}
}
@media (max-width:759px){.mhero-inner{grid-template-areas:"img" "text"}.mhero-img{grid-area:img;max-width:300px}.mhero-text{grid-area:text}}
/* before / after rows: axis / было / стало */
.bs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bs-head{display:none}
.bs-row{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.bs-axis{font-family:var(--f-disp);text-transform:uppercase;font-size:17px;font-weight:500;letter-spacing:.03em;color:#fff}
.bs-old{font-size:14px;color:#8c9198}
.bs-old::before{content:"было: ";color:#6d737b;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.bs-new{font-size:15px;color:#eceef0}
.bs-new::before{content:"стало: ";color:var(--red);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:760px){
  .bs-head{display:grid;grid-template-columns:200px 1fr 1fr;gap:24px;padding:0 0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .bs-head span:last-child{color:var(--red)}
  .bs-row{grid-template-columns:200px 1fr 1fr;gap:24px;align-items:baseline;padding:20px 0}
  .bs-old::before,.bs-new::before{content:none}
  .bs-old{font-size:15px}.bs-new{font-size:17px}
}
/* feature callout (one per page, only when facts give one) */
.feat{border:1px solid rgba(229,43,50,.4);padding:24px 20px;max-width:760px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.feat .bar{width:32px;height:3px;background:var(--red);margin-bottom:16px}
.feat h3{margin:0 0 8px;font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(18px,4.6vw,24px);font-weight:500;letter-spacing:.03em}
.feat p{margin:0;color:#dcdfe3;font-size:15px;max-width:60ch}
@media (min-width:760px){.feat{padding:32px}}
/* versions paragraph, «what is included» list on the light band, model price row as a link on brand pages */
.vers{margin:0;font-size:17px;color:#dcdfe3;max-width:60ch}
.incl{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
.incl li{padding-left:20px;position:relative;font-size:15px;color:#3a3f46}
.incl li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:2px;background:var(--red)}
@media (min-width:760px){.incl{grid-template-columns:1fr 1fr;gap:8px 32px}}
.band.light .mc-cta{margin-top:28px;align-items:flex-start}
.band.light .mc-cta-note{color:var(--ink-muted)}
a.price{transition:background var(--dur) var(--ease)}
a.price .time{color:var(--ink)}
@media (hover:hover){a.price:hover{background:rgba(20,22,26,.05)}}

/* ---- messenger buttons instead of the lead form (W-0024, 2026-09-30): MAX first, Telegram second,
   official logos (site/assets/img/logo-max.svg, logo-telegram.svg) ---- */
.msgr{display:grid;gap:12px;max-width:760px}
@media (min-width:760px){.msgr{grid-template-columns:1fr 1fr}}
.msgr .cta{width:100%;min-height:62px;font-size:17px;gap:12px;padding:14px 20px}
.cta img{flex:0 0 auto;display:block;border-radius:22%}
.cta.msgr-tg{background:#229ed9;box-shadow:0 10px 28px rgba(34,158,217,.22)}
.cta.msgr-tg:hover{background:#2ab0ee}
.msgr-note{font-size:13px;color:var(--dim);margin:14px 0 0}
.msgr-note a{color:inherit;text-decoration:underline}
.sticky .cta{gap:8px}
.sticky .cta.msgr-tg{box-shadow:none}
/* camry variant A (2026-09-30): the messenger buttons inside the first screen and the price band */
.msgr-hero{margin:4px 0 8px;max-width:620px}
.msgr-hero .cta{min-height:56px;font-size:16px}
.msgr-price{margin-top:24px}
.msgr-price .cta{min-height:56px}
.msgr-hero-note{font-size:14px;color:var(--muted);max-width:52ch;margin:6px 0 0}
.msgr-steps{margin:0 0 28px}
/* steps in the final block sit on a darker panel: give them inner padding and drop the .final p bottom margin */
.final .step{padding-left:20px;padding-right:20px}
@media (min-width:760px){.final .step{padding-left:32px;padding-right:32px}}
.final .step p{margin:0}

/* ---- messenger buttons v2 (W-0024, 2026-09-30): Mikhail picked style 7.2 from _lab/knopki-7 ----
   dark fill + soft shadow, red bar left, caption under the label, arrow; MAX first */
.msgr7{display:grid;gap:10px;max-width:640px}
@media (min-width:760px){.msgr7{grid-template-columns:1fr 1fr}}
.msgr7 .cta{justify-content:flex-start;text-align:left;gap:12px;width:100%;min-height:66px;padding:12px 16px;font-size:16px;
  background:var(--bg3);color:#fff;border:1px solid rgba(255,255,255,.2);border-left:3px solid var(--red);
  box-shadow:0 12px 28px rgba(0,0,0,.45);border-radius:var(--r-btn)}
.msgr7 .cta:hover{background:#232830}
.msgr7 .cta img{width:28px;height:28px;border-radius:0}
.msgr7 .cta span{display:block;min-width:0}
.msgr7 .cta small{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-top:2px}
.msgr7 .cta::after{content:"→";margin-left:auto;color:var(--red);font-size:20px;transition:transform .15s}
.msgr7 .cta:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.msgr7 .cta::after{transition:none}}
.band.light .msgr7 .cta{box-shadow:0 10px 24px rgba(0,0,0,.25)}
.msgr-pre{max-width:56ch;margin:0 0 14px;color:var(--txt-soft);font-size:15px;line-height:1.5}
.msgr-pre b{color:#fff;font-weight:600}
.msgr-free{margin:10px 0 0;font-size:13px;color:var(--dim)}
.msgr-top{margin-bottom:4px}
.msgr-mid{margin-top:20px}

/* ---- brand pages as a model catalog (W-0026, 2026-10-01) ----
   no poster photo behind the text; hero clears the absolute header; big cards on phones */
.brand-hero{min-height:0;justify-content:flex-start}
.brand-hero .hero-inner{padding-top:96px;padding-bottom:40px}
@media (min-width:760px){.brand-hero .hero-inner{padding-top:132px;padding-bottom:56px}}
.brand-hero .hero-inner>*{max-width:680px}
.brand-models .mc-a{flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:0;height:100%}
.brand-models .mc-img{flex:none;width:100%}
.brand-models .mc-body{padding:14px 16px 16px;gap:4px}
.brand-models .mc-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
@media (min-width:640px){.brand-models{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (min-width:900px){.brand-models{grid-template-columns:repeat(3,1fr)}}
.mc-empty{display:flex;flex-direction:column;justify-content:center;padding:0 20px;background:linear-gradient(140deg,var(--bg3),var(--bg));border-left:3px solid var(--red)}
.mc-empty-name{font-family:var(--f-disp);font-weight:500;font-size:30px;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.85)}
.mc-empty small{margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mc-ph .mc-img::after{display:none}
.mc-ph .mc-price{color:var(--txt-soft);font-weight:500}
.mc-ask{font-size:14px;font-weight:600;color:#fff;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px;white-space:nowrap}
.brand-page .sticky{display:none}
.brand-page #modeli{padding-top:40px}
@media (min-width:760px){.brand-hero .hero-inner{padding-bottom:40px}.brand-page #modeli{padding-top:48px}}
/* every page, phones: the header keeps only the logo - the buttons are right below in the first screen.
   The demo badge sits bottom-left everywhere so it never covers the logo or the breadcrumb */
@media (max-width:759px){.hdr .right{display:none}}
.badge{top:auto;bottom:8px;left:8px;opacity:.75}
/* phones: the absolute header never covers the first line of any hero */
@media (max-width:759px){.hero-inner{padding-top:84px}}
@media (min-width:760px){.hero-inner{padding-top:116px}}
/* buttons inside light bands: the generic ".band.light a{color:ink}" made the label dark on the dark button */
.band.light .msgr7 .cta{color:#fff}
.band.light .msgr7 .cta small{color:var(--muted)}
/* readability pass 2026-10-01 (contrast_check.py, WCAG AA 4.5:1): same hues, nudged lightness only */
.screen.after h4,.bs-head span:last-child,.partner a{color:#ff5a60}
.screen li small{color:#8a9099}
.price .time{color:#5c6169}
.band:not(.light) .price .time{color:#8b919a}
.cta.msgr-tg{background:#1a75a8}
.cta.msgr-tg:hover{background:#1d82bb}
.sticky .cta.msgr-max{background:#d4252c}
/* production look (Mikhail 2026-10-01): no messenger links in the header (not part of the design - the buttons live in the page), no demo badges */
.hdr .right{display:none}
.badge{display:none}
/* phones (Mikhail 2026-10-01): content starts right under the logo, the photo behind the copy is dimmed so the text reads */
@media (max-width:759px){.hero{justify-content:flex-start;min-height:0}.hero img.shot{opacity:.16}.hero-veil{background:linear-gradient(180deg,rgba(10,11,13,.6),rgba(10,11,13,.85) 60%,var(--bg))}}
/* catalog rows: one model + its price never breaks inside the number */
.linklist small .nw{display:block;white-space:nowrap}
.linklist small .nw{display:inline-block;margin-right:10px}

/* catalog model page (W-0041) */
.gtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px}
.gtable{width:100%;border-collapse:collapse;font-size:14px;min-width:0}
.gtable th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8c9198;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.gtable td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);color:#dcdfe3;vertical-align:top;overflow-wrap:anywhere}
.gtable td:first-child{white-space:nowrap;font-family:var(--f-disp);font-size:16px;color:#fff}
.where{margin-top:20px;font-size:14px;color:#4d525a}
.where a{text-decoration:underline}
.dash-pair{margin:24px 0 0;display:grid;grid-template-columns:1fr;gap:8px}
.dash-pair div{position:relative}
.dash-pair img{display:block;width:100%;height:auto}
.dash-pair span{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px}
.dash-pair figcaption{grid-column:1/-1;font-size:12px;color:#8c9198}
@media (min-width:760px){.dash-pair{grid-template-columns:1fr 1fr}}
/* before/after slider (W-0041): no JS = only the «after» picture */
.ba{margin:0 0 24px;max-width:720px}
.ba-title{font-family:var(--f-disp);text-transform:uppercase;font-size:15px;letter-spacing:.06em;color:#dcdfe3;margin:0 0 8px}
.ba-box{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0d0f12;--p:50%}
.ba-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-clip,.ba-range,.ba-lab{display:none}
.ba-on .ba-clip{display:block;position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-on .ba-box::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.ba-on .ba-lab{display:block;position:absolute;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;pointer-events:none}
.ba-lab-l{left:8px}.ba-lab-r{right:8px}
.ba-on .ba-range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba figcaption{font-size:12px;color:#8c9198;margin-top:8px}
.card-t th{width:38%;text-transform:none;letter-spacing:0;font-size:13px;color:#8c9198;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}
.card-t td:first-child{white-space:normal;font-family:var(--f-text);font-size:14px;color:#dcdfe3}
.incl .src{color:#8c9198;font-size:12px}
/* a11y (W-0041, Lighthouse 08.10): lists on dark bands, links in text not by colour only, card headings h3 */
.band:not(.light) .incl li{color:#dcdfe3}
.mc-also a,.vers a,.note a,.fix a{text-decoration:underline}
.tcard h3{margin:0 0 8px;font-family:var(--f-disp);text-transform:uppercase;font-size:17px;font-weight:500;letter-spacing:.03em}
/* compatibility check by photo (W-0041, window 3 compat.js): selects full width, same height as the messenger buttons */
.compat .step p{max-width:none}
.compat select{width:100%;min-height:62px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);color:var(--txt);
  font-family:var(--f-text);font-size:16px;padding:14px 16px;border-radius:var(--r-btn);outline:none}
.compat select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,43,50,.18)}
.compat select:disabled{opacity:.55}
.compat select option{color:#111;background:#fff}
.compat .msgr{margin-top:24px}
/* home catalog (W-0041, Mikhail 08.10 16:00): popular models, all brands, link to all models; hub search */
.mc-sub{margin:28px 0 12px;font-family:var(--f-disp);text-transform:uppercase;font-size:18px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.mc-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:6px;text-align:center;
  background:radial-gradient(circle at 50% 35%,#2a2d33 0,#121317 75%);font-family:var(--f-disp);text-transform:uppercase;font-size:15px;letter-spacing:.06em;color:#c9ccd1}
@media (min-width:640px){.mc-ph{font-size:28px}}
.mc-all{margin:20px 0 0}
.mc-all .cta{width:100%;min-height:56px;font-size:17px}
@media (min-width:760px){.mc-all .cta{width:auto;padding:16px 40px}}
.brandgrid a{font-size:18px}
.cat-search{margin:0 0 16px}
.cat-search input{width:100%;min-height:52px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);color:var(--txt);
  font-family:var(--f-text);font-size:16px;padding:12px 16px;border-radius:var(--r-btn);outline:none}
.cat-search input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,43,50,.18)}
/* engine block, commercial wording (W-0041, Mikhail 08.10 16:35) */
.chip-lines{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chip-lines li{background:var(--bg2);padding:16px 0;font-size:17px;color:#dcdfe3}
.chip-lines b{font-family:var(--f-disp);font-weight:600;font-size:20px;color:#fff;margin-right:10px;letter-spacing:.02em}

/* ---------- B layer: concept B «Подбор» (Mikhail 08.10 18:00; docs/design/RECIPE-concept-B-2026-10-08.md) ----------
   Model pages carry body.pb. Light paper page, white cards, Oswald sentence case, red ONLY on the main action. */
.pb{--paper:#efedea;--card:#fff;--ink:#14161a;--ink2:#3a3f46;--muted:#5c6169;--hair:rgba(20,22,26,.12);--dark:#101215;
  background:var(--paper);color:var(--ink)}
.pb a{color:inherit}
.pb :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pb h1,.pb h2,.pb h3{font-family:var(--f-disp);font-weight:500;text-transform:none;letter-spacing:0;line-height:1.12;margin:0;color:var(--ink)}
/* header: a calm dark bar; on phones the menu is a scrollable row (SOL §6: menu must be reachable) */
.pb .hdr{position:static;background:var(--dark);flex-wrap:wrap;padding:12px var(--gutter);gap:8px 16px}
.pb .hdr nav{display:flex;margin:0 0 0 auto;gap:22px;color:#c3c8ce}
.pb .hdr .right{display:flex}
.pb .hdr .tel small{font-size:10px}
@media (max-width:899px){
  .pb .hdr .right{display:none}
  .pb .hdr nav{order:3;flex:1 0 100%;margin:0;overflow-x:auto;white-space:nowrap;gap:18px;padding:2px 0 4px;scrollbar-width:none;font-size:15px}
  .pb .hdr nav::-webkit-scrollbar{display:none}
}
.pb .btn-main,.pb .btn-sec{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:600;border-radius:8px;text-align:center}
.pb .btn-main{background:var(--red);color:#fff;font-size:19px;min-height:62px;padding:12px 22px}
.pb .btn-main:hover{background:#c41f26}
.pb .btn-sec{background:var(--card);border:1.5px solid var(--ink);color:var(--ink);font-size:16px;min-height:52px;padding:10px 18px;margin-top:10px}
.pb-page{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start;padding-top:36px;padding-bottom:80px;max-width:1240px}
.pb-main{min-width:0}
.pb .crumbs{font-family:var(--f-text);font-size:13px;letter-spacing:0;color:var(--muted);margin-bottom:14px}
.pb .crumbs a{color:var(--muted)}
.pb-intro{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;margin-bottom:40px}
.pb-intro.pb-has-photo{grid-template-columns:1fr 1fr}
.pb-intro h1{font-size:clamp(34px,4vw,52px)}
.pb-sub{font-size:17px;color:var(--muted);margin:10px 0 0}
.pb-lede{font-size:19px;line-height:1.55;margin:18px 0 0;max-width:34em;color:var(--ink)}
.pb-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.pb-mcta{display:none}
.pb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:56px}
.pb-fact{background:var(--card);border-radius:14px;padding:20px 22px}
.pb-fact b{display:block;font-family:var(--f-disp);font-weight:500;font-size:36px;line-height:1;white-space:nowrap}
.pb-fact span{display:block;font-size:15px;color:var(--muted);margin-top:8px}
.pb-block{margin-bottom:var(--band-y)}
.pb-block h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:10px}
.pb-block h2.pb-h3{font-size:24px;margin:32px 0 10px}
.pb-note{font-size:17px;color:var(--muted);margin:0 0 22px;max-width:38em}
/* before / after */
.pb-ba-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start}
.pb-ba-wrap:not(:has(.pb-figs)){grid-template-columns:1fr}
.pb-ba-two{grid-template-columns:1fr}
.pb-ba-two .pb-figs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pb-ba-two .pb-done{display:grid;grid-template-columns:1fr 1fr}
.pb .ba{display:block;max-width:none;margin:0 0 12px}
.pb .hdr a{color:#e9eaec}
.pb .hdr img{height:34px}
.pb .ba-title{font-family:var(--f-text);text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--ink);margin:0 0 8px}
.pb .ba-box{border-radius:14px}
.pb .ba figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.pb-done{list-style:none;margin:0;padding:0;background:var(--card);border-radius:14px}
.pb-done li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:15px 20px;border-bottom:1px solid var(--hair)}
.pb-done li:last-child{border-bottom:0}
.pb-done li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:2px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.pb-done b{display:block}
.pb-done span{font-size:15px;color:var(--muted)}
/* generations */
.pb-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.pb-pick button{font:inherit;cursor:pointer;text-align:left;background:var(--card);border:2px solid transparent;border-radius:14px;padding:16px 18px;color:var(--ink)}
.pb-pick button b{display:block;font-family:var(--f-disp);font-weight:500;font-size:26px;line-height:1.15}
.pb-pick button span{font-size:14px;color:var(--muted)}
.pb-pick button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pb-gen{display:none;background:var(--dark);color:#e9eaec;border-radius:14px;padding:26px;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
.pb-gen.on{display:grid}
.pb-gen:not(:has(.pb-schema)){grid-template-columns:1fr}
.pb-schema{width:100%;height:auto}
.pb-gen-y{font-family:var(--f-disp);font-size:26px;margin-bottom:12px}
.pb-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.pb-pills li{background:rgba(255,255,255,.1);border-radius:100px;padding:6px 12px;font-size:14px}
.pb-gen p{font-size:18px;margin:0 0 14px;color:#e9eaec}
.pb-gen details{border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
.pb-gen summary{cursor:pointer;font-weight:600;font-size:15px;color:#c3c8ce}
.pb-gen details ul{margin:10px 0 0;padding-left:18px;color:#c3c8ce;font-size:15px}
.pb-unsure{font-size:15px;color:var(--muted);margin:14px 0 0}
.pb-unsure a{color:var(--ink);font-weight:600}
/* engine */
.pb-card{background:var(--card);border-radius:14px;padding:24px}
.pb .chip-lines{background:none;border:0;gap:0}
.pb .chip-lines li{background:none;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--hair);font-size:17px}
.pb .chip-lines li:last-child{border-bottom:0}
.pb .chip-lines b{color:var(--ink);font-size:20px}
.pb-card p{color:var(--ink2)}
.pb-small{font-size:15px;margin:12px 0 0}
/* steps + guarantee */
.pb-steplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.pb-steplist li{counter-increment:s;background:var(--card);border-radius:14px;padding:18px 16px;font-size:15px}
.pb-steplist li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--f-disp);font-size:18px;margin-bottom:12px}
.pb-safe{display:flex;gap:16px;align-items:center;background:var(--dark);color:#e9eaec;border-radius:14px;padding:20px 24px;margin-top:12px}
.pb-safe svg{flex:0 0 40px}
.pb-safe p{margin:0;font-size:16px;line-height:1.55;color:#e9eaec}
.pb-safe b{color:#fff}
/* faq */
.pb-faq details{background:var(--card);border-radius:12px;padding:18px 22px;margin-bottom:8px}
.pb-faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.pb-faq summary::-webkit-details-marker{display:none}
.pb-faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--muted)}
.pb-faq details[open] summary::after{content:"–"}
.pb-faq details p{margin:10px 0 0;color:var(--ink2)}
.pb-chips{display:flex;flex-wrap:wrap;gap:8px}
.pb-chips a{text-decoration:none;font-size:15px;background:var(--card);border:1px solid var(--hair);padding:8px 14px;border-radius:100px}
/* request panel */
.pb-panel{position:sticky;top:20px;background:var(--card);border-radius:14px;padding:26px;box-shadow:0 1px 0 var(--hair),0 12px 40px rgba(20,22,26,.08)}
.pb-panel-car{font-size:14px;color:var(--muted)}
.pb-panel-car b{color:var(--ink)}
.pb-panel-price{font-family:var(--f-disp);font-size:34px;font-weight:500;line-height:1.1;margin:8px 0 4px}
.pb-panel-hint{font-size:14px;color:var(--muted);margin:0 0 18px}
.pb-panel h3{font-family:var(--f-text);font-size:14px;font-weight:600;margin:20px 0 10px}
.pb-need{list-style:none;margin:0;padding:0;font-size:15px}
.pb-need li{display:flex;gap:10px;padding:6px 0}
.pb-need li::before{content:"";flex:0 0 18px;height:18px;margin-top:3px;border-radius:5px;border:1.5px solid var(--ink2)}
.pb-free{font-size:13px;color:var(--muted);margin:12px 0 0;text-align:center}
.pb footer{background:var(--dark)}
.pb-sticky{display:none}
@media (max-width:899px){
  .pb{padding-bottom:88px}
  .pb-page{display:flex;flex-direction:column;gap:0;padding-top:0;padding-bottom:32px}
  .pb-main{display:contents}
  .pb-intro{display:block;position:relative;margin:0 0 32px;order:1}
  .pb-summary{order:1}
  .pb-intro .crumbs{display:none}
  .pb-intro-text{padding-top:22px}
  .pb-photo{position:absolute;top:22px;right:0;width:124px}
  .pb-photo img{aspect-ratio:1/1;border-radius:10px;object-position:60% 75%}
  .pb-has-photo h1,.pb-has-photo .pb-sub{padding-right:136px}
  .pb-intro h1{font-size:32px}
  .pb-sub{font-size:15px;margin-top:6px}
  .pb-lede{font-size:17px;margin-top:12px}
  .pb-mcta{display:block;margin-top:18px}
  .pb-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
  .pb-row b{font-family:var(--f-disp);font-weight:500;font-size:26px;white-space:nowrap}
  .pb-row span{font-size:13px;color:var(--muted);text-align:right;line-height:1.3}
  .pb-ba{order:2}.pb-gens{order:3}.pb-facts{order:4}.pb-engine{order:5}.pb-steps{order:6}.pb-faq{order:7}.pb-addons{order:7}
  .pb-panel{order:8;position:static;margin-bottom:40px}
  .pb-more{order:9}
  .pb-facts{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:48px}
  .pb-fact{padding:14px 12px}
  .pb-fact b{font-size:22px;white-space:normal}
  .pb-fact span{font-size:12px;line-height:1.35}
  .pb-block{margin-bottom:48px}
  .pb-note{font-size:16px;margin-bottom:16px}
  .pb-ba-wrap,.pb-ba-two .pb-figs,.pb-ba-two .pb-done{display:block}
  .pb-done{margin-top:12px}
  .pb-pick{grid-template-columns:1fr 1fr}
  .pb-pick button{padding:14px}
  .pb-pick button b{font-size:22px}
  .pb-gen{padding:20px;gap:16px}
  .pb-gen.on{display:flex;flex-direction:column;align-items:stretch}
  .pb-gen p{font-size:16px}
  .pb-steplist{grid-template-columns:1fr;gap:8px}
  .pb-steplist li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:14px 16px}
  .pb-steplist li::before{margin:0}
  .pb-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;align-items:center;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--card);box-shadow:0 -6px 24px rgba(20,22,26,.14);transform:translateY(110%);transition:transform .25s}
  .pb-sticky.show{transform:none}
  .pb-sp{font-size:12px;color:var(--muted);line-height:1.25}
  .pb-sp b{display:block;font-family:var(--f-disp);font-weight:500;font-size:19px;color:var(--ink);white-space:nowrap}
  .pb-sticky .btn-main{flex:1;min-height:56px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){.pb-sticky{transition:none}}

/* ---------- B site layer: every other page in the concept-B look (Mikhail 08.10 18:10 «сделай все страницы») ----------
   Paper bands and white cards; the photo hero and the final band stay dark; red only on the main action;
   section numbers hidden (not a sequence, SOL §2); headings in sentence case. Model pages (body.pb) have their own layer. */
body:not(.pb){background:#efedea;color:#14161a}
body:not(.pb) .disp{text-transform:none;font-weight:500;letter-spacing:0}
body:not(.pb) .hero .disp em{color:inherit;font-style:normal}
body:not(.pb) .kicker{font-size:14px;letter-spacing:0;text-transform:none;color:#d6d9dd}
body:not(.pb) .kicker::before{display:none}
body:not(.pb) .crumbs{font-family:var(--f-text);font-size:13px;letter-spacing:0}
body:not(.pb) .hero .sub{color:#e3e5e8}
body:not(.pb) .msgr-pre{color:#d6d9dd}
body:not(.pb) .msgr-free{color:#b5bac1}
.band,.band.alt,.band.deep,.band.light{background:#efedea;color:#14161a;border-top:0}
.band.alt{background:#e7e5e1}
.bnum{display:none}
.bhead{display:block;margin-bottom:28px}
.btitle{text-transform:none;letter-spacing:0;color:#14161a;font-size:clamp(28px,3.2vw,40px);line-height:1.15}
.blead,.band.light .blead{color:#5c6169;font-size:16px;margin:-12px 0 28px}
.band p,.band.light p{color:#3a3f46}
.note{font-size:13px;color:#5c6169;letter-spacing:0}
.band a{color:#14161a}
/* buttons: MAX = the main action (red), Telegram = white outline; no arrows or mono labels */
.msgr7 .cta,.band.light .msgr7 .cta{box-shadow:none;border-radius:8px;font-weight:600}
.msgr7 .cta.max7{background:#d6262d;color:#fff}
.msgr7 .cta.max7:hover{background:#c41f26}
.msgr7 .cta.tg7{background:#fff;color:#14161a;border:1.5px solid #14161a}
.msgr7 .cta.tg7:hover{background:#f4f4f2}
.msgr7 .cta small,.band.light .msgr7 .cta small{font-family:var(--f-text);font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;color:inherit;opacity:.8}
.msgr7 .cta.max7 small,.band.light .msgr7 .cta.max7 small{opacity:1}   /* W-0069: «ответит мастер» on red: white .8 gave 3.67:1, full white 5:1 */
.msgr7 .cta::after{display:none}
.msgr-note{color:#5c6169}
.hero .msgr-note,.final .msgr-note{color:#b5bac1}
/* model cards */
.mc-card{background:#fff;border:0;border-radius:14px;overflow:hidden}
.mc-name{text-transform:none;letter-spacing:0;color:#14161a;font-size:20px}
.mc-years{color:#5c6169}
.mc-price{color:#14161a}
.mc-ph .mc-price{color:#3a3f46}
.mc-chev{color:#5c6169}
.mc-img{background:#e7e5e1;border-radius:10px}
.mc-empty{background:#e7e5e1}
.mc-empty-name{color:#5c6169;text-transform:none;font-size:22px}
.mc-ph{color:#5c6169}
.mc-also,.mc-cta-note{color:#5c6169}
.mc-also a{color:#14161a}
.mc-sub{text-transform:none;letter-spacing:0;color:#5c6169}
.mc-toggle{color:#14161a;border-color:rgba(20,22,26,.25)}
.mc-all .cta,.mc-cta .cta{border-radius:8px}
/* steps, trust, faq, prices, lists */
.steps{background:none;border:0;gap:8px}
.step,.band.alt .step{background:#fff;border-radius:14px;padding:18px 20px;grid-template-columns:48px 1fr;align-items:center}
.step .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#14161a;color:#fff;font-size:18px;line-height:1}
.step p{color:#14161a;font-size:16px}
.tcard{background:#fff;border:0;border-radius:14px;padding:22px}
.tcard .bar{display:none}
.tcard h3,.tcard h4{text-transform:none;letter-spacing:0;font-size:20px;color:#14161a}
.tcard p{color:#3a3f46;font-size:16px;line-height:1.55}
.faq{border:0}
.qa{background:#fff;border:0;border-radius:12px;padding:18px 22px;margin-bottom:8px}
.qa h3,.qa h4{text-transform:none;letter-spacing:0;font-size:18px;color:#14161a}
.qa p{color:#3a3f46;font-size:16px}
.prices{border-top:0}
.price{background:#fff;border-radius:12px;padding:16px 20px;margin-bottom:8px;border-bottom:0}
.price .car,.band:not(.light) .price .car{text-transform:none;letter-spacing:0;color:#14161a}
.price .val{color:#14161a}
.price .time,.band:not(.light) .price .time{color:#5c6169;letter-spacing:0;text-transform:none;font-size:13px}
.band:not(.light) .fix{color:#3a3f46}
.linklist{background:none;border:0;gap:8px}
.linklist a{background:#fff;border-radius:12px;text-transform:none;letter-spacing:0;color:#14161a}
.linklist a small{color:#5c6169}
.gtable th{color:#5c6169;letter-spacing:0;text-transform:none;font-size:13px;border-color:rgba(20,22,26,.15)}
.gtable td{color:#14161a;border-color:rgba(20,22,26,.12)}
.gtable td:first-child{color:#14161a}
.band:not(.light) .incl li{color:#14161a}
.compat select,.cat-search input{background:#fff;border:1.5px solid rgba(20,22,26,.25);color:#14161a;border-radius:8px}
.compat select:focus,.cat-search input:focus{border-color:#14161a;box-shadow:0 0 0 3px rgba(20,22,26,.12)}
/* the final band stays dark: one calm call to action */
.final{background:#101215}
.final::before{display:none}
.final h2{text-transform:none;letter-spacing:0;font-weight:500;color:#fff}
.final p{color:#c3c8ce}
.final .step{background:rgba(255,255,255,.06)}
.final .step p{color:#e9eaec}
.final .step .n{background:#e9eaec;color:#14161a}
footer{background:#101215}
.sticky{background:#fff;box-shadow:0 -6px 24px rgba(20,22,26,.14);border-top:0}
.sticky .cta.msgr-tg{background:#fff;color:#14161a;border:1.5px solid #14161a}
body:not(.pb) .hero{color:#fff}
body:not(.pb) .hero h1,body:not(.pb) .hero .disp{color:#fff}
.mc-ph{background:#e7e5e1;color:#5c6169}
.mc-empty{border-left:0}
/* contrast pass 08.10 (contrast_check.py, all pages): hero paints its own dark base; white on red >= 5:1; link colour never on buttons */
body:not(.pb) .hero{background-color:#101215}
.pb .btn-main,.btn-main{background:#d6262d}
.pb .hdr .tel small{color:#a7adb5}
.band a.cta,.band.light a.cta,.band a.cta:visited{color:#fff}
.partner{background:#fff;border-radius:14px;border:0}
.partner span{color:#14161a}
.partner a{color:#14161a}
.pb-done small{display:block;font-size:13px;color:#5c6169;margin-top:3px}
.pb-vers{font-size:16px;line-height:1.55;color:#3a3f46;margin:16px 0 0;max-width:42em}
/* readability pass (Mikhail 08.10 19:15): captions >= 13px, phone paragraphs >= 16px, line-height 1.5+ */
.msgr7 .cta small,.band.light .msgr7 .cta small{font-size:13px}
.hdr .tel small,.pb .hdr .tel small{font-size:12px;letter-spacing:.02em}
.ba-on .ba-lab,.pb .ba-lab{font-size:13px;letter-spacing:.02em}
.note,.msgr-note,.pb .ba figcaption{font-size:14px;line-height:1.5}
@media (max-width:899px){
  body:not(.pb) .hero .sub,body:not(.pb) .msgr-pre{font-size:16px;line-height:1.55}
  .mc-also{font-size:16px;line-height:1.55}
  .pb-done span{font-size:16px}
  .pb-fact span,.pb-sp{font-size:13px}
}
.hdr .tel small,.pb .hdr .tel small{font-size:13px}
@media (max-width:899px){.pb-need li,.pb .incl li{font-size:16px}}

/* ---------- v1 «Чередование» (Mikhail 08.10 20:10; Astra low): dark first screen, dark before/after, dark final call;
   generations, steps, FAQ and the request panel stay light. Dark #101215 / #16191e, footer #0b0c0e, text #f4f3f0, notes #b8bdc7. */
.pb{--band:#101215}
.pb .pb-intro,.pb .pb-ba{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);color:#f4f3f0;padding:36px 0}
.pb .pb-intro h1,.pb .pb-ba h2,.pb-final h2{color:#f4f3f0;text-transform:uppercase;letter-spacing:.01em}
.pb .pb-intro .crumbs,.pb .pb-intro .crumbs a,.pb .pb-sub,.pb .pb-ba .pb-note,.pb .pb-ba figcaption,.pb .pb-row span{color:#b8bdc7}
.pb .pb-lede,.pb .pb-row b,.pb .pb-ba .ba-title{color:#f4f3f0}
.pb .pb-done{background:#16191e}
.pb .pb-done li{border-color:rgba(255,255,255,.1)}
.pb .pb-done b{color:#f4f3f0}
.pb .pb-done span,.pb .pb-done small{color:#b8bdc7}
.pb .pb-done li::before{background-color:#f4f3f0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23101215' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pb .pb-gen{background:#fff;color:#14161a}
.pb .pb-gen p,.pb .pb-gen-y{color:#14161a}
.pb .pb-gen summary,.pb .pb-gen details ul{color:#555b64}
.pb .pb-gen details{border-color:rgba(20,22,26,.12)}
.pb .pb-pills li{background:#efedea}
.pb .pb-schema rect:first-of-type{fill:#14161a}
.pb .pb-schema text:first-of-type{fill:#fff}
.pb-final{background:#101215;color:#f4f3f0;padding:var(--band-y-final) 0}
.pb-final p{color:#b8bdc7;max-width:40em;margin:14px 0 24px;font-size:17px}
.pb-final .btn-main{display:inline-flex;max-width:420px;width:100%}
.pb footer,body:not(.pb) footer{background:#0b0c0e}
@media (max-width:899px){.pb .pb-intro{padding:22px 0 28px}.pb .pb-intro-text{padding-top:0}.pb .pb-photo{top:0}.pb .pb-ba{padding:32px 0}}
/* other pages: the old site's dark bands come back on their «alt»/«deep» sections, cards stay white */
.band.alt,.band.deep{background:#16191e;color:#f4f3f0}
.band.alt .btitle,.band.deep .btitle{color:#f4f3f0;text-transform:uppercase;letter-spacing:.01em}
.band.alt .blead,.band.deep .blead,.band.alt>.wrap>p,.band.deep>.wrap>p,.band.alt .note,.band.deep .note,.band.alt .mc-also,.band.deep .mc-also{color:#b8bdc7}
.band.alt>.wrap>p a,.band.deep>.wrap>p a,.band.alt .note a,.band.deep .note a,.band.alt .mc-also a,.band.deep .mc-also a{color:#f4f3f0}
.band.alt .msgr-note,.band.deep .msgr-note,.band.alt .mc-cta-note,.band.deep .mc-cta-note,.band.alt .mc-sub,.band.deep .mc-sub{color:#b8bdc7}
.band.alt .step,.band.deep .step{background:#fff}
/* «Шкала мощности» (Mikhail 08.10 20:10): a dark card, not a stripe; colour only on the gain */
.sc{position:relative;overflow:hidden;background:#16191e;color:#f4f3f0;border-radius:14px;padding:30px 30px 24px}
.sc-arc{position:absolute;right:-40px;top:-10px;width:420px;max-width:80%;color:rgba(255,255,255,.07);pointer-events:none}
.sc-row{position:relative;margin-bottom:22px}
.sc-eng{font-size:14px;color:#b8bdc7;margin-bottom:4px}
.sc-num{display:flex;align-items:baseline;gap:14px;font-family:var(--f-disp);font-weight:500;line-height:1}
.sc-num span{font-size:clamp(44px,6vw,72px);color:#b8bdc7}
.sc-num i{font-style:normal;font-size:clamp(26px,3vw,36px);color:#b8bdc7}
.sc-num b{font-size:clamp(52px,7vw,88px);font-weight:500;color:#f4f3f0}
.sc-num small{font-family:var(--f-text);font-size:18px;color:#b8bdc7}
.sc-bar{display:flex;height:10px;border-radius:5px;background:rgba(255,255,255,.08);margin:18px 0 10px;overflow:hidden}
.sc-stock{background:#c3c8ce}
.sc-gain{background:#e52b32}
.sc-cap{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#b8bdc7}
.sc-cap b{color:#ff8a8f;font-weight:600}
.sc-small{position:relative;font-size:14px;line-height:1.5;color:#b8bdc7;margin:6px 0 0;max-width:46em}
.sc-small a{color:#f4f3f0}
@media (max-width:899px){.sc{padding:22px 20px 18px}.sc-cap{flex-direction:column;gap:2px}}
/* W-0055: shift-lights scale (pb.js adds .sc-anim and the .sc-leds lamps only when it will play; no JS = static bar above) */
.sc-leds{display:none}
.sc-anim .sc-leds{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;margin:18px 0 10px}
.sc-anim .sc-bar{display:none}
.sc-leds i{height:22px;border-radius:3px;background:rgba(255,255,255,.07);transition:background .08s,box-shadow .08s}
.sc-leds i.w{background:#c3c8ce}
.sc-leds i.r{background:#e52b32;box-shadow:0 0 10px rgba(229,43,50,.7)}
.sc-leds i.off{background:rgba(255,255,255,.07);box-shadow:none}
@media (max-width:520px){.sc-anim .sc-leds{gap:3px}.sc-leds i{height:18px}}
.sc-anim .sc-num i,.sc-anim .sc-num b,.sc-anim .sc-cap b{opacity:0;transition:opacity .3s}
.sc-anim.sc-rev .sc-num i,.sc-anim.sc-rev .sc-num b,.sc-anim.sc-end .sc-cap b{opacity:1}
@keyframes sc-shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,0)}80%{transform:translate(1px,1px)}}
.sc-shake{animation:sc-shake .09s linear 6}
@keyframes sc-flash{0%{color:#ff5a60;text-shadow:0 0 24px rgba(229,43,50,.9)}100%{color:#f4f3f0;text-shadow:none}}
.sc-num b.sc-flash{animation:sc-flash .9s ease-out}
.sc-num b.sc-lim{color:#ff5a60;text-shadow:0 0 24px rgba(229,43,50,.9);animation:none}
/* W-0061 step 4: «Что ещё можно сделать с этим авто» (blocks/model/addons.html, Alexander 12.10). Phone first. Tap cards: front =
   icon, title, price; assets/js/addons.js adds .ad-js and flips a tapped card to its dark side («что даёт» + button), with a score
   «Открыто N из M» (Mikhail 11.10: game feel, no sound). Without JS every card shows both sides. */
.pb-terms{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;padding:0}
.pb-terms span{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1.2;font-weight:600;padding:6px 10px;border-radius:100px;background:#efedea;color:#14161a}
.pb-terms span::before{content:"";width:7px;height:7px;border-radius:50%;background:#e52b32}
.pb .pb-intro .pb-terms span{background:rgba(255,255,255,.1);color:#f4f3f0}
.ad-power{margin:0 0 14px}
.ad-power-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 10px}
.ad-power-h h3{flex:1 1 auto;font-size:24px}
.ad-power-h .ad-ico,.ad-front .ad-ico{flex:0 0 auto;color:#e52b32}
.ad-price{display:inline-block;font-size:14px;line-height:1.2;font-weight:600;padding:5px 10px;border-radius:100px;background:#efedea;color:#3a3f46}
.ad-price.ad-num{background:#14161a;color:#fff;font-size:16px}
.ad-score{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px;font-size:15px;color:#3a3f46}
.ad-score[hidden]{display:none}
.ad-dots{display:inline-flex;gap:5px}
.ad-dots i{width:12px;height:12px;border-radius:50%;background:rgba(20,22,26,.14);transition:background .2s,transform .2s}
.ad-dots i.on{background:#e52b32;transform:scale(1.15)}
.ad-all .ad-dots i{animation:ad-pop .5s ease-out}
.ad-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ad-card{min-width:0;background:#fff;border-radius:14px;color:#14161a;transform-origin:50% 50%}
.ad-front{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;min-height:136px;margin:0;padding:16px 14px 14px;
  background:none;border:0;border-radius:14px;font:inherit;text-align:left;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the title starts under the icon row, the plus (top right) sits beside the icon: no right padding needed; with it
   «Разблокировка» (128 px at 17 px) broke inside the word at 390 px (merge W-0075); 16 px below 370 px keeps it whole at 360 */
.ad-front b{display:block;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
@media (max-width:370px){.ad-front b{font-size:16px}}
.ad-front .ad-price{margin-top:auto}
.ad-plus{display:none;position:absolute;top:14px;right:12px;width:28px;height:28px;border-radius:50%;border:2px solid currentColor;transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.ad-plus::before,.ad-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;border-radius:1px}
.ad-plus::after{transform:rotate(90deg)}
.ad-back{padding:0 14px 16px}
.ad-back p{margin:0 0 12px;font-size:15px;line-height:1.45;color:#3a3f46}
.pb .ad-ask{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 14px;border-radius:10px;border:2px solid #14161a;font-size:16px;font-weight:600;text-decoration:none;color:#14161a}
.ad-js .ad-card:not(.on) .ad-back{display:none}
.ad-js .ad-plus{display:block;transform:rotate(45deg)}
.ad-js .ad-card:not(.on) .ad-plus{transform:none}
.ad-js .ad-card.on{grid-column:1/-1;background:#14161a;color:#f4f3f0}
.ad-js .ad-card.on .ad-back p{color:#c3c8ce}
.ad-js .ad-card.on .ad-price{background:rgba(255,255,255,.12);color:#f4f3f0}
.ad-js .ad-card.on .ad-price.ad-num{background:#e52b32;color:#fff}
.pb .ad-js .ad-card.on .ad-ask{background:#e52b32;border-color:#e52b32;color:#fff}
.ad-js .ad-card.on .ad-ico{animation:ad-wig .6s ease-out}
.ad-front:focus-visible{outline:3px solid #14161a;outline-offset:2px}
.ad-js .ad-card.on .ad-front:focus-visible{outline-color:#fff}
.ad-card.ad-out{animation:ad-out .14s ease-in forwards}
.ad-card.ad-in{animation:ad-in .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes ad-out{to{transform:perspective(800px) rotateY(90deg)}}
@keyframes ad-in{from{transform:perspective(800px) rotateY(-90deg)}to{transform:none}}
@keyframes ad-wig{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.2)}50%{transform:rotate(10deg) scale(1.2)}75%{transform:rotate(-5deg)}}
@keyframes ad-pop{50%{transform:scale(1.5)}}
/* W-0061 step 9 (Mikhail 12.10): tap hint. Cue on every closed card, a call in the score line, and (pb.js, while no card was opened) a peek on
   the first card + a glow/shine wave over the others on each entry to the viewport, then a soft pulse of one random card every ~5.5 s. */
.ad-card{position:relative;transition:transform .18s ease-out,box-shadow .18s ease-out}
.ad-card::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 30%,rgba(229,43,50,.2) 46%,rgba(255,170,120,.32) 52%,transparent 68%);background-size:260% 100%;background-position:92% 0}
.ad-tap{display:none;align-items:center;gap:6px;font-size:13px;line-height:1.2;font-weight:600;color:#c8202a}
.ad-tap::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#e52b32;box-shadow:0 0 0 3px rgba(229,43,50,.2)}
.ad-js .ad-card:not(.on) .ad-tap{display:inline-flex}
.ad-txt{flex:1 1 180px;min-width:0}
.ad-cta{font-style:normal;font-weight:600;color:#14161a}
.ad-all .ad-cta{display:none}
.ad-card.ad-pulse{animation:ad-pulse .85s ease-in-out}
.ad-card.ad-pulse.ad-soft{animation-name:ad-pulse-soft}
.ad-card.ad-peek{transform-origin:0 50%;animation:ad-peek 1s ease-in-out}
.ad-card.ad-pulse::after,.ad-card.ad-peek::after{animation:ad-shine .9s ease-in-out}
@keyframes ad-pulse{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(229,43,50,0)}40%{transform:scale(1.045);box-shadow:0 0 0 2px rgba(229,43,50,.55),0 8px 24px rgba(229,43,50,.28)}}
@keyframes ad-pulse-soft{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(229,43,50,0)}40%{transform:scale(1.03);box-shadow:0 0 0 2px rgba(229,43,50,.4),0 6px 18px rgba(229,43,50,.2)}}
@keyframes ad-peek{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(229,43,50,0)}35%,55%{transform:perspective(800px) rotateY(-30deg);box-shadow:0 0 0 2px rgba(229,43,50,.5),0 8px 24px rgba(229,43,50,.25)}}
@keyframes ad-shine{0%{opacity:0;background-position:92% 0}15%,85%{opacity:1}100%{opacity:0;background-position:4% 0}}
@media (hover:hover){.ad-js .ad-card:not(.on):hover{transform:translateY(-3px);box-shadow:0 0 0 2px #14161a,0 10px 22px rgba(20,22,26,.16)}}
@media (prefers-reduced-motion:reduce){.ad-card{transition:none}.ad-card.ad-pulse,.ad-card.ad-peek,.ad-card.ad-pulse::after,.ad-card.ad-peek::after{animation:none}}
@media (hover:hover){.ad-js .ad-card:not(.on):hover{box-shadow:0 0 0 2px #14161a}.ad-js .ad-card:not(.on):hover .ad-plus{transform:rotate(90deg)}}
@media (min-width:760px){.ad-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ad-front{min-height:150px;padding:18px 16px 16px}.ad-back{padding:0 16px 18px}
  .ad-js .ad-card.on .ad-back{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}.ad-js .ad-card.on .ad-back p{margin:0}}
@media (prefers-reduced-motion:reduce){.ad-card.ad-out,.ad-card.ad-in,.ad-js .ad-card.on .ad-ico,.ad-all .ad-dots i{animation:none}}
.band.alt ul:not(.mc-list)>li,.band.deep ul:not(.mc-list)>li,.band.alt ol>li,.band.deep ol>li{color:#f4f3f0}
.band.alt .mark,.band.deep .mark{color:#f4f3f0;border-color:rgba(255,255,255,.3)}
/* bigger screen schematics (Mikhail 08.10 21:05): the drawing on top, full card width */
.pb .pb-gen.on{grid-template-columns:1fr;gap:18px}
.pb-schema{display:block;width:100%;margin:0 auto}
@media (max-width:899px){.pb-schema text.r{font-size:27px}.pb-schema text.s{font-size:30px}}
@media (max-width:899px){.pb-schema text.r{display:none}.pb-schema{margin-bottom:-14px}}

/* fact strip (Mikhail 08.10 21:50 «висят», Sol low): one white strip right under the dark first screen, three columns with hairlines */
.pb .pb-intro{margin-bottom:0}
.pb .pb-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 56px;padding:26px 0;background:#fff;
  box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
.pb .pb-fact{padding:0 22px;background:none;border-radius:0}
.pb .pb-fact:first-child{padding-left:0}
.pb .pb-fact+.pb-fact{border-left:1px solid #dedbd6}
.pb .pb-fact b{font-size:26px;font-weight:500;line-height:1.2;white-space:normal;color:#14161a}
.pb .pb-fact span{margin-top:8px;font-size:15px;line-height:1.5;color:#555b64}
@media (max-width:899px){
  .pb .pb-facts{order:2;grid-template-columns:1fr;padding:4px 0;margin:0 0 36px}
  .pb .pb-fact,.pb .pb-fact:first-child{padding:16px 0}
  .pb .pb-fact+.pb-fact{border-left:0;border-top:1px solid #dedbd6}
  .pb .pb-fact b{font-size:24px}
  .pb .pb-fact span{font-size:16px;margin-top:4px}
  .pb .pb-ba{order:3}.pb .pb-gens{order:4}
}
/* strip polish (Mikhail 08.10 22:00: side padding, centring, no gaps): intro starts under the header; strip sits between dark bands */
.pb .pb-page{padding-top:0}
.pb .pb-intro{padding-top:44px}
.pb .pb-panel{margin-top:28px}
.pb .pb-facts{margin-bottom:0;padding:30px 0}
.pb .pb-fact,.pb .pb-fact:first-child{padding:4px 28px;text-align:center}
.pb .pb-ba{margin-top:0}
@media (max-width:899px){.pb .pb-intro{padding-top:22px}.pb .pb-panel{margin-top:0}.pb .pb-facts{margin-bottom:0;padding:6px 0}.pb .pb-fact,.pb .pb-fact:first-child{padding:18px 12px;text-align:center}}
@media (min-width:900px){.pb .pb-fact b{font-size:23px;white-space:nowrap}.pb .pb-fact,.pb .pb-fact:first-child{padding:4px 16px}}

/* wide screens (Mikhail 08.10 22:00: «много пустоты» on a big monitor): wider container, band padding capped,
   short lists laid out in columns instead of long thin rows; the compat form keeps its rows */
@media (min-width:1440px){:root{--max:1320px}.pb-page{max-width:1320px}}
@media (min-width:760px){:root{--band-y:clamp(48px,4vw,60px);--band-y-final:clamp(56px,5vw,72px)}}
@media (min-width:1100px){
  .band .steps:not(.compat .steps){grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
  .band .steps:not(.compat .steps) .step{display:block;padding:20px}
  .band .steps:not(.compat .steps) .step .n{margin-bottom:12px}
  .final .msgr-steps{grid-template-columns:repeat(3,1fr);gap:12px}
  .final .msgr-steps .step{display:block;padding:20px}
  .final .msgr-steps .step .n{margin-bottom:12px}
  .trust{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .prices{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  .faq{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:stretch} /* W-0074: equal-height cards per row */
}

/* car field with suggestions (Mikhail 08.10 22:30, W-0045): big touch targets, no dropdown lists */
.cmp-fields{display:grid;grid-template-columns:2fr 1fr;gap:16px;max-width:880px;margin-bottom:14px}
.cmp-l{display:block;font-size:15px;font-weight:600;margin-bottom:8px;color:#f4f3f0}
.band.light .cmp-l,.band:not(.alt):not(.deep) .cmp-l{color:#14161a}
.cmp-box{position:relative}
.cmp-in{width:100%;min-height:58px;padding:0 18px;font:inherit;font-size:18px;color:#14161a;background:#fff;border:2px solid #fff;border-radius:10px;outline:none}
.cmp-in:focus{border-color:#d6262d}
.cmp-in::placeholder{color:#6b7078}
.cmp-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;list-style:none;margin:0;padding:6px;background:#fff;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.cmp-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:10px 14px;border-radius:8px;cursor:pointer;color:#14161a;font-size:17px}
.cmp-opt span{font-size:14px;color:#555b64}
.cmp-opt.on,.cmp-opt:hover{background:#efedea}
.cmp-pop{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cmp-chip{font:inherit;font-size:15px;min-height:42px;padding:8px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#f4f3f0;cursor:pointer}
.cmp-chip:hover,.cmp-chip:focus-visible{background:rgba(255,255,255,.1)}
.cmp-next{color:#b8bdc7;font-size:16px;line-height:1.55;max-width:46em;margin:6px 0 18px}
@media (max-width:759px){.cmp-fields{grid-template-columns:1fr}.cmp-in{font-size:17px}}
.band.alt .compat ul.cmp-list>li.cmp-opt,.band.deep .compat ul.cmp-list>li.cmp-opt,.compat ul.cmp-list>li.cmp-opt{color:#14161a}
.band .compat .cmp-next{color:#b8bdc7}

/* home first screen (W-0046, Mikhail 08.10 22:45 «плотнее, как модели»): dark band with title + silent hero loop (09.10, video window; was a 2x2 car collage), then a white
   fact strip like .pb-facts; everything within ~700 px on 1366/1920. The full-bleed photo hero stays on other pages. */
.hero-home{min-height:0;display:block;background:#101215}
.hero-home .hdr{position:static;background:#101215;padding:12px var(--gutter);max-width:none}
.hero-home .hdr img{height:34px}
.hero-home .hh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:36px;padding-bottom:44px}
.hero-home .disp{font-size:clamp(40px,4.4vw,60px);margin:10px 0 16px}
.hero-home .sub{margin-bottom:22px;max-width:46ch}
.hero-home .msgr-free{margin-top:10px}
.hh-video{border-radius:12px;overflow:hidden;background:#16191e;aspect-ratio:4/3}
.hh-video video{display:block;width:100%;height:100%;object-fit:cover}
.hfacts{background:#fff}
.hfacts .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:28px;padding-bottom:28px}
.hfact{padding:4px 22px;text-align:center}
.hfact+.hfact{border-left:1px solid #dedbd6}
.hfact b{display:block;font-family:var(--f-disp);font-weight:500;font-size:23px;line-height:1.2;color:#14161a}
.hfact span{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:#555b64}
@media (max-width:899px){
  .hero-home .hh-grid{grid-template-columns:1fr;gap:24px;padding-top:22px;padding-bottom:28px}
  .hero-home .disp{font-size:clamp(34px,9vw,44px)}
  .hfacts .wrap{grid-template-columns:1fr;padding-top:6px;padding-bottom:6px}
  .hfact{padding:16px 0}
  .hfact+.hfact{border-left:0;border-top:1px solid #dedbd6}
  .hfact span{font-size:16px;margin-top:4px}
}
@media (min-width:900px){.hero-home .hdr .right{display:flex}}
/* home bands: the site rhythm (--band-y, --band-y-final; W-0071) */
.home .final h2{max-width:24ch}
/* before/after knob (W-0046): round handle with arrows on the split line; labels «До» / «После» at the edges */
.ba-knob{display:none}
.ba-on .ba-knob{display:grid;place-items:center;position:absolute;top:50%;left:var(--p);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:#fff;color:#14161a;box-shadow:0 2px 10px rgba(0,0,0,.4);pointer-events:none;z-index:2}
.ba-on .ba-knob::before{content:"";width:22px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M6 1L1 6l5 5M16 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M6 1L1 6l5 5M16 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ba-on .ba-lab,.pb .ba-on .ba-lab{text-transform:none;top:auto;bottom:10px;border-radius:6px;font-size:14px;font-weight:600;padding:4px 10px;z-index:1}
.ba-on .ba-lab-l{left:10px}.ba-on .ba-lab-r{right:10px}
/* lazy pictures (W-0046): a calm placeholder of the same size shows until the photo arrives (width/height reserve the box) */
img[loading="lazy"][src$=".webp"]{background-color:#e7e5e1}
.hero img[loading="lazy"][src$=".webp"],.band.alt img[loading="lazy"][src$=".webp"],.band.deep img[loading="lazy"][src$=".webp"],.pb-ba img[loading="lazy"][src$=".webp"],.ba-box img[loading="lazy"]{background-color:#16191e}
/* transparent logos (messengers in buttons, site logo in the footer) get no placeholder (Mikhail 10.10: light box around them) */
a.cta img[loading="lazy"][src$=".webp"][width],img[loading="lazy"][src*="img/logo"][src$=".webp"][width]{background-color:transparent}
/* «Мастер Александр» (W-0046): photo (placeholder until it arrives) + name, role, facts from the «Обучение» page */
/* horizontal 4:3 photo large on the left (Mikhail 08.10, W-0047: the workshop and the school must stay visible) */
.master{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;background:#fff;border-radius:14px;padding:24px}
.ms-photo svg,.ms-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:10px;object-fit:cover}
.ms-text .btitle{margin:0}
.ms-role{font-size:18px;color:#3a3f46;margin:6px 0 16px}
.ms-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 24px}
.ms-facts li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:#14161a}
.ms-facts li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:#14161a}
.ms-more{margin:18px 0 0;font-weight:600}
.pb-master{font-size:16px;line-height:1.55;color:#3a3f46;margin:14px 0 0}
.pb-master a{font-weight:600;color:#14161a}
@media (max-width:899px){.master{grid-template-columns:1fr;gap:18px;padding:14px 14px 22px}.ms-text{padding:0 8px}}
.cmp-opt.cmp-none{cursor:default;color:#555b64;font-size:15px}
.cmp-opt.cmp-none:hover{background:none}
/* articles /stati/ (W-0155, 09.10): markdown prose inside the numbered bands */
.art{max-width:72ch}
.art p,.art li{font-size:17px;line-height:1.65;color:inherit}
.art p{margin:0 0 14px}
.art ul,.art ol{margin:0 0 16px;padding-left:22px}
.art li{margin-bottom:6px}
.art a{text-decoration:underline}
.art-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.art-list a{font-family:var(--f-disp);font-size:21px;line-height:1.3;text-decoration:underline}
.art-list p{margin:6px 0 0;font-size:15px;line-height:1.5;color:#555b64}
.art table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:16px}
.art th,.art td{border-bottom:1px solid #dedbd6;padding:10px 12px;text-align:left;vertical-align:top}
.art th{font-weight:600}
@media (max-width:599px){.art table{display:block;overflow-x:auto}}
/* new logo (Alexander's pick 09.10, W-0050): near-square badge with the car, so it needs real height to read; heroes under the
   absolute header already clear 60/80 px (24+80=104) (hero-inner 84/116, mhero 96, brand-hero 96/132) */
.hdr img,.pb .hdr img,.hero-home .hdr img{height:60px;width:auto}
@media (min-width:760px){.hdr img,.pb .hdr img,.hero-home .hdr img{height:80px}.mhero-inner{padding-top:116px}}
footer img{height:72px;width:auto}
/* visual balance (W-0074, docs/design/AESTHETICS.md): no ragged card rows, no half-empty last rows */
@media (min-width:760px){
  /* brand -> models lists (/rusifikaciya/ #modeli, /chip-tuning/): cards of very different length, alphabetical order;
     two balanced columns instead of rows, so a short brand never stands next to a tall one with a hole under it */
  .faq.brand-list{display:block;column-count:2;column-gap:12px}
  .faq.brand-list .qa{break-inside:avoid}
  /* an odd question left alone in the last row sits in the middle, not under the left column */
  .faq:not(.brand-list) .qa:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}
  /* add-on tiles: 3 columns drawn on a 6-column grid, so the 1 or 2 tiles of an incomplete last row are centred */
  .ad-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ad-card{grid-column:span 2}
  .ad-card:not(.on):last-child:nth-child(3n+1){grid-column:3/5}
  .ad-card:not(.on):nth-last-child(2):nth-child(3n+1){grid-column:2/4}
  .ad-card:not(.on):last-child:nth-child(3n+2){grid-column:4/6}
}
@media (max-width:759px){.ad-card:not(.on):last-child:nth-child(odd){grid-column:1/-1}}