:root{
  --bg:#ffffff; --paper:#f7f6f5; --paper2:#f1efee;
  --ink:#19171a; --ink2:#4a4548; --muted:#797276;
  --red:#c8102e; --red-d:#9d0c24; --graphite:#2c2a2d; --sand:#d9a441; --ok:#1d7a52;
  --line:#e6e2e1; --line2:#d3cdcc;
  --r:6px; --wrap:1060px;
  --sh:0 1px 2px rgba(25,23,26,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Archivo,Rubik,sans-serif; font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:0 0 .55em}
h1{font-size:clamp(30px,4.6vw,46px)}
h2{font-size:clamp(23px,3vw,31px); margin-top:0}
h3{font-size:clamp(18px,2vw,21px); font-weight:700}
p{margin:0 0 1.1em; max-width:70ch}
ul,ol{margin:0 0 1.2em; padding-left:1.2em; max-width:70ch}
li{margin:.4em 0}
a{color:var(--red-d)}
small{font-size:14px; color:var(--muted)}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:10px 16px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}

header.top{border-bottom:2px solid var(--ink); background:var(--bg); position:sticky; top:0; z-index:40}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:18px; height:58px}
.brand{display:inline-flex; align-items:center; gap:9px; font-family:Archivo; font-weight:800; font-size:16px; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.brand i{width:22px; height:22px; background:var(--red); display:inline-block; clip-path:polygon(50% 100%, 0 12%, 100% 12%)}
.top nav{display:none; gap:20px; font-size:15px}
.top nav a{color:var(--ink2); text-decoration:none}
.top nav a:hover{color:var(--red-d)}
@media(min-width:820px){.top nav{display:flex}}

section{padding:clamp(34px,4vw,54px) 0}
section + section{border-top:1px solid var(--line)}
.kicker{font-family:Archivo; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:0 0 12px}

.hero{padding-top:clamp(26px,3vw,40px)}
.hero-in{display:grid; gap:28px}
@media(min-width:980px){.hero-in{grid-template-columns:1.02fr .98fr; gap:44px; align-items:start}}
.hero p.lead{font-size:clamp(17px,2vw,19px); color:var(--ink2)}

.conv{border:2px solid var(--ink); border-radius:var(--r); padding:20px; background:var(--bg)}
.conv h2{font-size:17px; font-family:Archivo; margin:0 0 4px}
.conv .sub{font-size:14px; color:var(--muted); margin:0 0 16px}
.row{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:1px solid var(--line2); border-radius:var(--r); padding:11px 13px; background:var(--paper)}
.row + .row{margin-top:10px}
.row label{grid-column:1/-1; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.row input{border:0; background:transparent; font-family:Archivo; font-weight:800; font-size:23px; color:var(--ink); width:100%; min-width:0; padding:0}
.row input:focus{outline:0}
.row select{border:1px solid var(--line2); background:var(--bg); border-radius:4px; padding:8px 10px; font-family:Rubik; font-weight:600; font-size:14.5px; color:var(--ink); cursor:pointer}
@media(max-width:540px){.row{grid-template-columns:1fr} .row select{width:100%}}
.flip{display:flex; justify-content:center; margin:8px 0}
.flip button{border:1px solid var(--line2); background:var(--bg); border-radius:999px; width:34px; height:34px; cursor:pointer; color:var(--red-d); font-size:15px; line-height:1}
.flip button:hover{border-color:var(--red)}
.conv .note{font-size:13px; color:var(--muted); margin:14px 0 0}
.btn{display:inline-flex; align-items:center; justify-content:center; font-family:Archivo; font-weight:700; font-size:16px; padding:14px 22px;
  border:2px solid var(--ink); border-radius:var(--r); background:var(--red); color:#fff; text-decoration:none; width:100%; margin-top:16px}
.btn:hover{background:var(--red-d)}
.btn-line{background:var(--bg); color:var(--ink); width:auto; padding:12px 20px; font-size:15px}
.btn-line:hover{background:var(--paper)}

.strip{margin:26px 0 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.strip img{width:100%; height:clamp(150px,20vw,230px); object-fit:cover}

.steps{counter-reset:s; list-style:none; padding:0; margin:0; max-width:none}
.steps li{counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); margin:0}
.steps li:first-child{border-top:1px solid var(--line)}
.steps li::before{content:counter(s); font-family:Archivo; font-weight:800; font-size:15px; color:#fff; background:var(--ink); width:26px; height:26px; border-radius:4px; display:grid; place-items:center; margin-top:3px}
.steps h3{margin:0 0 4px}
.steps p{margin:0; color:var(--ink2); font-size:16.5px}

.tbl{overflow-x:auto; border:1px solid var(--line2); border-radius:var(--r); background:var(--bg)}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:16px}
caption{text-align:left; padding:13px 15px 0; font-size:13.5px; color:var(--muted)}
th,td{padding:11px 15px; text-align:left; border-bottom:1px solid var(--line)}
thead th{background:var(--paper2); font-family:Archivo; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); font-weight:700}
tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums}

.split{display:grid; gap:26px}
@media(min-width:860px){.split{grid-template-columns:1fr 340px; gap:36px; align-items:start}}
.split figure{margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.split figure img{width:100%; aspect-ratio:4/3; object-fit:cover}
.split figcaption{padding:10px 13px; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line)}


.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer; list-style:none; padding:15px 32px 15px 0; font-family:Archivo; font-weight:700; font-size:17px; position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); color:var(--red); font-size:19px}
.qa details[open] summary::after{content:"–"}
.qa .a{padding:0 0 16px; color:var(--ink2)}
.qa .a p{margin:0 0 .8em} .qa .a p:last-child{margin:0}

footer{border-top:2px solid var(--ink); background:var(--paper); padding:30px 0 40px; font-size:15px; color:var(--ink2)}
footer nav{display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 16px}
footer a{color:var(--ink2)}
footer .fine{font-size:13.5px; color:var(--muted); max-width:72ch}
footer .fine p{margin:0 0 .7em}

/* ── оформление ── */
.hero{position:relative}
.hero::before{content:""; position:absolute; inset:0 0 auto; height:210px; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(200,16,46,.05) 0 2px, transparent 2px 9px)}
h2{position:relative; padding-bottom:10px}
h2::after{content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; background:var(--red)}
.kicker{display:inline-block; border:1px solid var(--line2); border-radius:2px; padding:4px 9px; background:var(--bg)}

.facts{display:grid; gap:0; border:2px solid var(--ink); border-radius:var(--r); overflow:hidden; margin:22px 0 0}
@media(min-width:680px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts div{padding:15px 18px; border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
@media(min-width:680px){
  .facts div{border-bottom:0; border-right:1px solid var(--line)}
  .facts div:last-child{border-right:0}
}
.facts b{display:block; font-family:Archivo; font-weight:800; font-size:clamp(20px,2.4vw,26px); line-height:1.1; color:var(--red-d)}
.facts span{font-size:13.5px; color:var(--muted)}

.pull{border-left:4px solid var(--red); background:var(--paper); padding:16px 20px; margin:22px 0; max-width:70ch}
.pull p{margin:0; font-size:17.5px}

tbody tr:nth-child(odd){background:var(--paper)}
tbody tr:hover{background:#fdf1f3}
.tbl a{font-weight:500}

.crumbs{font-size:13.5px; color:var(--muted); padding:14px 0 0}
.crumbs ol{display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0; max-width:none}
.crumbs li + li::before{content:"/"; margin-right:7px; color:var(--line2)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red-d)}

.btn{transition:transform .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px)}
.qa summary:hover{color:var(--red-d)}
a:hover{text-decoration-thickness:2px}

@media(min-width:980px){
  .hero-in{align-items:center}
}

@media(min-width:980px){
  .hero-in{align-items:start}
  .hero-in > div:first-child{grid-column:1; grid-row:1}
  .hero-in .conv{grid-column:2; grid-row:1 / span 2}
  .hero-in .facts{grid-column:1; grid-row:2; margin-top:4px}
}

/* широкий баннер вместо боковой картинки там, где текст короткий */
figure.banner{margin:22px 0 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
figure.banner img{width:100%; height:clamp(160px,20vw,240px); object-fit:cover; object-position:center 55%}
figure.banner figcaption{padding:10px 14px; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); background:var(--bg)}

/* боковая картинка: фиксированная пропорция, прижата к верху, ниже текста не уезжает */
@media(min-width:860px){
  .split{align-items:start}
  .split figure{position:sticky; top:74px}
  .split figure img{aspect-ratio:4/3; height:auto; object-fit:cover}
}