/* «Уютный ремонт» — база, шапка и первый экран.
   Пропорции сняты с эталонного лендинга (шапка 121 + меню 51, герой во всю ширину,
   белый заголовок слева, стеклянные карточки справа, полоса 01/02/03 понизу).
   Отличия сознательные: свой шрифт с чистой лицензией и заливка кнопки,
   проходящая AA (у эталона белый на #e8781f даёт 2,94:1). */

@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/madefor/cyrillic-ext-400.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/madefor/cyrillic-400.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/madefor/latin-ext-400.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:'Wix Madefor Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/madefor/latin-400.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:'Wix Madefor Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/madefor/cyrillic-ext-500.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/madefor/cyrillic-500.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/madefor/latin-ext-500.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:'Wix Madefor Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/madefor/latin-500.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:'Wix Madefor Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/madefor/cyrillic-ext-600.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/madefor/cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/madefor/latin-ext-600.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:'Wix Madefor Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/madefor/latin-600.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:'Wix Madefor Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/madefor/cyrillic-ext-700.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/madefor/cyrillic-700.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/madefor/latin-ext-700.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:'Wix Madefor Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/madefor/latin-700.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}

:root{
  --r-accent:#A4531C;        /* ссылки на белом — 5,48:1 */
  --r-btn:#B45A19;           /* заливка кнопки, белый текст — 4,75:1 */
  --r-btn-h:#9C4E16;
  --r-accent-weak:#E8C29A;
  --r-accent-wash:#F6ECE1;
  --r-head:#2E2620;
  --r-text:#332A22;
  --r-muted:#6E6055;
  --r-line:#E9DFD3;
  --r-soft:#FAF6F1;
  --r-card:#fff;
  --r-deep:#241C16;
  --r-deep-mut:#B9A594;
  --r-font:'Wix Madefor Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r-wrap:1640px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--r-text);font-family:var(--r-font);
  font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--r-accent)}

.rh-in{max-width:var(--r-wrap);margin:0 auto;padding:0 40px}

/* ── верхняя панель ───────────────────────────────────────────── */
.rh-top{background:#fff}
.rh-top .rh-in{display:flex;align-items:center;gap:18px;height:106px}

.rh-lg{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* высоту держим фиксированной, ширина едет по пропорции 680x160 */
.rh-lg img{display:block;height:68px;width:auto}
.rf-brand img{display:block;height:62px;width:auto;margin-bottom:10px}
.rh-ic{width:52px;height:52px;border-radius:14px;background:var(--r-accent-wash);
  border:1px solid var(--r-accent-weak);display:grid;place-items:center;color:var(--r-accent)}
.rh-ic svg{width:26px;height:26px}
.rh-l1{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:700;
  letter-spacing:.02em;color:var(--r-head);line-height:1.1;white-space:nowrap}
.rh-l1 i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--r-btn);
  padding:3px 7px;border-radius:5px}
.rh-l2{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--r-muted);margin-top:3px}

.rh-chips{display:flex;gap:12px;margin-left:14px}
.rh-chip{display:flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--r-soft);border:1px solid var(--r-line);border-radius:13px;
  padding:9px 17px;min-height:56px}
.rh-chip:hover{border-color:var(--r-accent-weak);background:var(--r-accent-wash)}
.rh-chip svg{width:22px;height:22px;color:var(--r-accent);flex:0 0 auto}
.rh-chip b{display:block;font-size:14.5px;font-weight:600;color:var(--r-head);line-height:1.25}
.rh-chip span{display:block;font-size:13px;color:var(--r-muted);line-height:1.25}

.rh-cta{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--r-btn);color:#fff;text-decoration:none;font-size:15.5px;font-weight:600;
  padding:0 30px;height:56px;border-radius:11px;white-space:nowrap;flex:0 0 auto;
  transition:background .15s}
.rh-cta:hover{background:var(--r-btn-h)}
.rh-cta-s{display:none}   /* короткая надпись — только для узкого экрана */

/* ── меню ─────────────────────────────────────────────────────── */
.rh-nav{border-top:1px solid var(--r-line);border-bottom:1px solid var(--r-line);background:#fff}
.rh-nav .rh-in{display:flex;justify-content:center;gap:38px;height:52px;align-items:center}
.rh-nav a{font-size:15.5px;color:var(--r-head);text-decoration:none;white-space:nowrap;
  font-weight:500}
.rh-nav a:hover{color:var(--r-accent)}

/* ── первый экран ─────────────────────────────────────────────────
   Геометрия снята с блока .khero беседок: контейнер 1640 с полями 64/40/40,
   min-height 660, верх сеткой «1fr 330px» с зазором 44, полоса 01/02/03
   внутри того же контейнера. Раньше полоса была отдельной секцией во всю
   ширину экрана — из-за этого и разъезжалось расположение. */
.rhero{position:relative;isolation:isolate;overflow:hidden}
.rhero-bg{position:absolute;inset:0;z-index:-2}
.rhero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* вуаль лёгкая, как у них: кадр не гасим, читаемость держит text-shadow */
.rhero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(112deg,rgba(24,17,12,.80) 0%,rgba(24,17,12,.58) 34%,
      rgba(24,17,12,.16) 58%,rgba(24,17,12,0) 76%),
    linear-gradient(0deg,rgba(24,17,12,.86) 0%,rgba(24,17,12,.62) 15%,
      rgba(24,17,12,.22) 30%,rgba(24,17,12,0) 42%)}

.rhero-in{position:relative;max-width:var(--r-wrap);margin:0 auto;
  padding:64px 40px 40px;display:flex;flex-direction:column;min-height:660px}
.rhero-top{flex:1;display:grid;grid-template-columns:1fr 330px;gap:44px;
  align-items:center}
/* колонка текста уже сетки: правее начинается подсвеченная ниша кадра,
   на ней белый заголовок не читается */
.rhero-txt{max-width:700px}
.rhero h1{margin:0 0 22px;color:#fff;font-weight:600;font-size:50px;line-height:1.1;
  letter-spacing:-.5px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.rhero-lead{margin:0 0 32px;color:#fff;font-size:19px;line-height:1.55;max-width:600px;
  text-shadow:0 1px 12px rgba(0,0,0,.40)}
.rhero-btn{display:inline-flex;align-items:center;gap:10px;background:var(--r-btn);
  color:#fff;text-decoration:none;font-size:18px;font-weight:600;padding:20px 40px;
  border-radius:16px;transition:background .15s;
  box-shadow:0 10px 30px rgba(180,90,25,.35)}
.rhero-btn:hover{background:var(--r-btn-h)}
.rhero-btn i{font-style:normal;font-size:19px;line-height:1}

.rhero-cards{display:flex;flex-direction:column;gap:16px}
/* у беседок две заготовки карточки: светлая и тёмная. Светлая рассчитана на
   тёмный сруб за ней; у нас за карточками закатное окно, там она даёт 2,1:1.
   Поэтому берём их же тёмную — форма, рамка и блюр остаются их. */
.rhero-card{background:rgba(20,14,10,.50);border:1px solid rgba(255,255,255,.30);
  border-radius:18px;padding:20px 24px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rhero-card svg{display:block;width:34px;height:34px;color:#E9A35F;margin-bottom:8px}
.rhero-card b{display:block;color:#fff;font-size:42px;font-weight:600;line-height:1}
.rhero-card span{display:block;color:#fff;font-size:14.5px;line-height:1.3;
  opacity:.92;margin-top:6px}

/* полоса 01 / 02 / 03 — часть первого экрана, не отдельная секция */
.rhero-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  padding-top:26px;margin-top:20px;border-top:1px solid rgba(255,255,255,.28)}
.rhero-step b{display:block;color:#fff;font-size:19px;font-weight:600;margin-bottom:8px}
.rhero-step b i{font-style:normal;color:rgba(255,255,255,.58);font-weight:500;
  margin-right:8px}
.rhero-step span{display:block;color:#fff;font-size:15px;line-height:1.45;
  opacity:.9;max-width:330px}

/* якоря меню не должны прилипать к верхней кромке окна */
[id]{scroll-margin-top:24px}
#rm .rm-lh{font-size:clamp(22px,2.2vw,32px);font-weight:600;color:var(--r-head);
  line-height:1.2;margin:0 0 10px}

/* ── блок заявки ──────────────────────────────────────────────── */
.rlead{background:var(--r-accent-wash);padding:var(--r-gap) 0;
  margin-top:var(--r-gap)}
.rlead h2{margin:0 0 10px;font-size:clamp(24px,2.4vw,34px);font-weight:600;
  color:var(--r-head);line-height:1.2}
.rlead-sub{margin:0 0 28px;color:var(--r-muted);font-size:16.5px;max-width:620px}
.rlead-form{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end;
  max-width:1000px}
.rlead-form label{display:block;font-size:13.5px;color:var(--r-muted);font-weight:500}
.rlead-form input,.rlead-form select{width:100%;margin-top:7px;height:52px;padding:0 15px;
  font:inherit;font-size:16px;color:var(--r-text);background:#fff;
  border:1px solid var(--r-line);border-radius:11px}
.rlead-form input:focus,.rlead-form select:focus{outline:2px solid var(--r-accent);
  outline-offset:-2px;border-color:var(--r-accent)}
.rlead-form button{grid-column:1/-1;justify-self:start;height:56px;padding:0 34px;
  font:inherit;font-size:16.5px;font-weight:600;color:#fff;background:var(--r-btn);
  border:0;border-radius:12px;cursor:pointer}
.rlead-form button:hover:not(:disabled){background:var(--r-btn-h)}
.rlead-form button:disabled{background:#C9B9A9;cursor:not-allowed}
.pg-hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;opacity:0!important}
.rlead-note{margin:18px 0 0;font-size:14px;color:var(--r-muted)}
@media(max-width:900px){.rlead-form{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rlead-form{grid-template-columns:1fr}
  .rlead-form button{width:100%;justify-self:stretch}}

/* ── подвал ───────────────────────────────────────────────────── */
.rf{background:var(--r-deep);color:var(--r-deep-mut);padding:46px 0 40px;
  margin-top:var(--r-gap)}
.rf .rh-in{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;
  align-items:flex-start}
.rf-brand b{display:block;color:#fff;font-size:17px;font-weight:600;margin-bottom:6px}
.rf-nav{display:flex;gap:26px;flex-wrap:wrap}
.rf a{color:var(--r-deep-mut);text-decoration:none;font-size:14.5px}
.rf a:hover{color:#fff}
.rf-note{width:100%;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;
  margin-top:8px;font-size:13px;color:#8A7A6C}

/* заглушка честности — видно, что значение ещё не заполнено */
.pg-stub{background:rgba(180,90,25,.12);border-bottom:1px dashed var(--r-accent);
  padding:0 3px;border-radius:3px}

/* ── мобилка ──────────────────────────────────────────────────── */
@media(max-width:1200px){
  .rh-chip span{display:none}
  .rh-chip{min-height:48px}
}
@media(max-width:1024px){
  .rh-in{padding:0 20px}
  .rh-chips{display:none}
  .rh-top .rh-in{height:78px}
  /* у беседок карточки на мобильной не прячутся, а встают в столбец — так же */
  .rhero-in{padding:40px 20px 30px;min-height:0}
  .rhero-top{grid-template-columns:1fr;gap:26px}
  .rhero h1{font-size:32px;letter-spacing:-.2px}
  .rhero-lead{font-size:16px;max-width:none}
  .rhero-cards{gap:12px}
  .rhero-card b{font-size:34px}
  .rhero-bg img{object-position:50% 50%}
  .rhero::before{background:linear-gradient(180deg,rgba(24,17,12,.62) 0%,
    rgba(24,17,12,.40) 40%,rgba(24,17,12,.56) 72%,rgba(24,17,12,.66) 100%)}
  .rhero-feats{grid-template-columns:1fr;gap:20px;margin-top:24px;padding-top:22px}
  .rhero-step span{max-width:none}
  .rh-nav .rh-in{justify-content:flex-start;gap:24px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:28px}
  .rh-nav .rh-in::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
  /* логотип и кнопка обязаны уместиться в 390px, иначе кнопку срезает краем */
  .rh-lg{min-width:0}
  .rh-lg img{height:46px}
  .rf-brand img{height:44px}
  .rh-l1{font-size:15px}.rh-l1 i{font-size:9px;padding:2px 5px}
  .rh-l2{font-size:9.5px;letter-spacing:.1em}
  .rh-ic{width:40px;height:40px;border-radius:11px}.rh-ic svg{width:21px;height:21px}
  .rh-cta{height:42px;padding:0 16px;font-size:14px;border-radius:9px}
  .rh-cta-l{display:none}
  .rh-cta-s{display:inline}
  .rhero-btn{height:56px;font-size:16px;padding:0 26px;width:100%;justify-content:center}
  .rf{padding:34px 0 30px}
}
@media(max-width:400px){
  .rh-l1 i{display:none}
}

/* ══ блоки главной ═════════════════════════════════════════════════
   Композиция снята с эталонного лендинга: слева заголовок с чипами и кнопкой,
   справа светлая панель со сравнением; каталог карточками 3×2;
   запрос, преимущества, форма. */

:root{ --r-brown:#8B5A2B; --r-panel:#F1EDE8;
  /* линейка артборда эталона: 1/1200 ширины окна. Все его числа сняты
     при базе 1200, поэтому base*var(--z) даёт ровно его размер на любой
     ширине. Замирает на 2568px, чтобы на 4K блок не пух бесконечно. */
  --z:min(0.0833333vw,2.14px);
  /* Линейка КЕГЛЯ. Была поправкой на метрику Golos: он рисовал
     строчные на 5.8% выше эталона, и размеры приходилось множить
     на 0.945. Wix Madefor Text совпадает с эталоном по строчным
     точно (0.510 кегля против 0.510), поэтому поправка убрана.
     Переменную оставляю: она размечает места, где кегль зависит
     от гарнитуры, и вернуть поправку — правка одной строки. */
  --zt:var(--z);
  /* один шаг для всех секций: между блоками ровно два --r-gap */
  /* шаг между блоками тоже едет по линейке артборда: 40 базовых — это ровно
     48px на 1440, как было, и 64 на 1920, 85 на 2560. Единство зазора
     сохраняется, потому что величина одна на все секции */
  --r-gap:calc(var(--z)*40) }

.rs{padding:var(--r-gap) 0}
.rs-in{display:flex;gap:56px;align-items:center}
.rs-in-col{display:block}
.rs h2{margin:0 0 20px;font-size:clamp(25px,2.7vw,38px);font-weight:600;
  color:var(--r-head);line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.rs-lead{margin:0 0 30px;color:var(--r-muted);font-size:17px;max-width:820px}
.rs-note{margin:26px 0 0;color:var(--r-muted);font-size:13.5px;line-height:1.55;max-width:900px}
.rs-note b{color:var(--r-head);font-weight:600}
.rs-btn{display:inline-flex;align-items:center;gap:10px;background:var(--r-btn);color:#fff;
  text-decoration:none;font-size:18px;font-weight:600;padding:21px 42px;
  border-radius:16px;transition:background .15s}
.rs-btn:hover{background:var(--r-btn-h)}
.rs-btn i{font-style:normal;font-size:18px;line-height:1}

/* ── блок 2: сравнение ───────────────────────────────────────────
   Геометрия блока .cmp2 беседок. Главное отличие от прежней вёрстки:
   средняя колонка — не скруглённые крайние ячейки, а ОТДЕЛЬНАЯ подложка
   на всю высоту сетки (grid-row 1/8) с тенью. И колонки идут без зазора:
   воздух даёт padding самих ячеек. */
.rs-cmp{padding:var(--r-gap) 0;background:#fff}
.rc-wrap{max-width:var(--r-wrap);margin:0 auto;padding:0 40px;display:grid;
  grid-template-columns:.78fr 1.22fr;gap:60px;align-items:center}
.rc-left h2{margin:0 0 24px;font-size:47px;font-weight:600;line-height:1.1;
  color:var(--r-head);letter-spacing:-.3px}
.rc-left p{margin:0 0 34px;font-size:19px;line-height:1.55;color:var(--r-muted);
  max-width:490px}

.rc-panel{position:relative;background:var(--r-panel);border-radius:30px;
  padding:26px 30px;display:grid;grid-template-columns:.82fr 1.2fr 1.05fr}
.rc-panel>div{position:relative;z-index:1;padding:0 30px;min-height:70px;
  display:flex;align-items:center;font-size:17.5px;line-height:1.4}
.rc-usbg{z-index:0!important;padding:0!important;min-height:0!important;
  background:linear-gradient(162deg,#9A6330,#7B4E23);border-radius:24px;
  box-shadow:0 16px 36px rgba(123,78,35,.30)}
.rc-hd{font-size:22px;font-weight:600;min-height:66px}
.rc-lab{color:var(--r-muted);font-weight:500}
.rc-them{color:var(--r-muted)}
.rc-them.rc-hd{color:var(--r-muted)}
.rc-us{color:#fff}
.rc-us.rc-hd{color:rgba(255,255,255,.92)}
.rc-us .ck{color:#fff;font-size:15px;margin-right:11px;flex:none;opacity:.95}

/* ── блок 3: каталог ───────────────────────────────────────────── */
.rs-kat{background:var(--r-soft)}
.rk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rk-card{position:relative;background:#fff;border:1px solid var(--r-line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column}
.rk-badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--r-btn);color:#fff;
  font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px}
/* место под фотографию — вставит владелец */
.rk-ph{aspect-ratio:16/10;background:var(--r-accent-wash);display:grid;place-items:center;
  border-bottom:1px solid var(--r-line)}
.rk-ph svg{width:52px;height:52px;color:var(--r-accent-weak)}
.rk-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.rk-body h3{margin:0 0 8px;font-size:19.5px;font-weight:600;color:var(--r-head);line-height:1.25}
.rk-desc{margin:0 0 14px;font-size:14.5px;color:var(--r-muted);line-height:1.5}
.rk-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.rk-chips span{font-size:13px;color:var(--r-muted);background:var(--r-soft);
  border:1px solid var(--r-line);border-radius:7px;padding:5px 10px}
.rk-price{margin:auto 0 15px;padding-top:14px;border-top:1px solid var(--r-line)}
.rk-price b{display:block;font-size:21px;font-weight:600;color:var(--r-head);line-height:1.2}
.rk-price span{display:block;font-size:12.5px;color:var(--r-muted);margin-top:2px}
.rk-more{display:block;text-align:center;border:1px solid var(--r-line);border-radius:11px;
  padding:13px 12px;font-size:14.5px;font-weight:500;color:var(--r-head);text-decoration:none}
.rk-more:hover{border-color:var(--r-accent);color:var(--r-accent);background:var(--r-accent-wash)}

/* ── блок 4: запрос сметы ───────────────────────────────────────────
   Композиция эталонного блока «Получите каталог»:
   секция белая, слева тёмная фотокарточка, справа светлая панель с формой.
   Пропорция колонок 440:682 — у них панель 760 заходит под карточку на 78,
   видимая её часть 682. Скруглены только правые углы панели. */
.rs-req{background:#fff}
.rq-box{max-width:var(--r-wrap);margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:.392fr .608fr;align-items:stretch}
.rq-card{position:relative;overflow:hidden;border-radius:18px;min-height:430px;
  padding:34px 42px;background:linear-gradient(155deg,#3D3128 0%,#2C241C 100%)}
/* фото лежит по низу и растворяется кверху маской — их приём: подпись
   «Внутри сметы:» ложится на чистый тёмный, а не на светлый угол снимка */
.rq-ph{position:absolute;inset:0;z-index:0;background-repeat:no-repeat;
  background-position:left bottom;background-size:cover;
  background-image:url('/images/smeta.jpg?v=55');
  background-image:image-set(url('/images/smeta.webp?v=55') type('image/webp'),
                             url('/images/smeta.jpg?v=55') type('image/jpeg'));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 42px,#000 118px);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 42px,#000 118px)}
.rq-card::before{content:'';position:absolute;inset:0 0 auto 0;height:58%;z-index:1;
  background:linear-gradient(180deg,#2C241C 0%,rgba(44,36,28,.90) 32%,
    rgba(44,36,28,.55) 62%,rgba(44,36,28,0) 100%)}
.rq-card b{position:relative;z-index:2;display:block;margin:0 0 14px;color:#fff;
  font-size:18px;font-weight:400;line-height:1.5}
.rq-list{position:relative;z-index:2;margin:0;padding:0;list-style:none}
.rq-list li{position:relative;padding-left:20px;margin-bottom:9px;
  color:#EFE3D6;font-size:18px;line-height:1.45}
.rq-list li::before{content:'';position:absolute;left:0;top:.58em;
  width:7px;height:7px;border-radius:50%;background:#E9A35F}
.rq-panel{background:#F4F1EC;border-radius:0 18px 18px 0;padding:40px 52px;
  display:flex;flex-direction:column;justify-content:center;min-width:0}
.rq-panel h2{margin:0 0 10px;font-size:29px;line-height:1.22;font-weight:600;
  color:var(--r-head);letter-spacing:-.2px}
.rq-sub{margin:0 0 22px;font-size:16.5px;line-height:1.45;color:var(--r-muted);max-width:660px}
.rq-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.rq-form label{display:block;font-size:13.5px;font-weight:500;color:var(--r-muted)}
.rq-form input,.rq-form select{width:100%;margin-top:6px;height:52px;padding:0 15px;
  border:1px solid #D8D2C9;border-radius:10px;background:#fff;
  font:inherit;font-size:16px;color:var(--r-text)}
.rq-form input:focus,.rq-form select:focus{outline:2px solid var(--r-accent);outline-offset:1px}
.rq-form button{grid-column:1/-1;height:56px;margin-top:4px;border:0;border-radius:12px;
  background:var(--r-btn);color:#fff;font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.rq-form button:hover:not(:disabled){background:var(--r-btn-h)}
.rq-form button:disabled{background:#C9B9A9;cursor:not-allowed}
.rq-note{margin:14px 0 0;font-size:13.5px;line-height:1.45;color:var(--r-muted)}

/* ── блок 5: преимущества ──────────────────────────────────────── */
/* Эталонные плитки: на белой секции тёмные карточки 373x266
   радиусом 18 с зазором 20 и отступом 36, иконка сидит в подложке 52x52
   rgba(255,255,255,.13) радиусом 14. Числа сняты с их контейнера 1200. */
.rs-adv{background:#fff}
/* поля и зазор — числа артборда: поля 20, зазор 20 при базе 1200.
   Ширина карточки получается сама: (100vw - 40z - 40z)/3 = 373z. */
.rs-adv .rh-in{max-width:none;padding:0 calc(var(--z)*20)}
.rs-adv h2{font-size:calc(var(--zt)*34);line-height:1.24;font-weight:500;letter-spacing:normal;max-width:calc(var(--z)*1100);margin-bottom:calc(var(--z)*30)}
.ra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--z)*20)}
.ra-card{background:linear-gradient(155deg,#3D3128 0%,#2C241C 100%);
  border:0;border-radius:18px;aspect-ratio:373/266;padding:9.65% 9.65% 8.5%}
.ra-ic{width:17.27%;aspect-ratio:1;margin-bottom:5.99%;border-radius:14px;
  background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center}
.ra-ic svg{width:56%;height:56%;color:#E9A35F}
.ra-card b{display:block;margin-bottom:4.96%;color:#fff;
  font-size:calc(var(--zt)*17);line-height:calc(var(--z)*22);font-weight:500}
.ra-card p{margin:0;color:#F0E2D1;font-size:calc(var(--zt)*13);line-height:calc(var(--z)*18)}

/* ── адаптив блоков ────────────────────────────────────────────── */
@media(max-width:1100px){
  .rk-grid,.ra-grid{grid-template-columns:repeat(2,1fr)}
}
/* их брейкпоинт: на 1360 сетка ужимается, кегли падают */
@media(max-width:1360px){
  .rc-wrap{gap:44px}
  .rc-left h2{font-size:38px}
  .rc-panel>div{padding:0 20px;font-size:16px}
  .rc-hd{font-size:19px}
}
@media(max-width:980px){
  .rm-box{grid-template-columns:1fr;gap:26px}
  .rs-meet .rh-in{padding:0 16px}
  .rs-meet h2{font-size:26px;line-height:1.2}
  .rm-sub{font-size:15px;line-height:1.45;max-width:none}
  .rm-form input[type=text],.rm-form input[type=tel]{height:50px;font-size:16px;padding:0 16px;margin-bottom:10px}
  .rm-form button{height:52px;font-size:16px}
  .rm-ok{font-size:13px}
  .rm-card{padding:20px 18px 22px;min-height:0}
  .rm-pic{display:none}
  .rm-list li{max-width:none}
  .rm-card-hd{font-size:15px;line-height:1.4;margin-bottom:20px}
  .rm-list li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;margin-bottom:18px}
  .rm-ic{width:40px;height:40px}
  .rm-ic svg{width:18px;height:18px}
  .rm-list b{font-size:12.5px;line-height:1.3}
  .rm-list span{font-size:15px;line-height:1.4}
  .rv-badge{padding:10px 16px;gap:8px;border-radius:14px}
  .rv-star{width:17px;height:17px}
  .rv-num,.rv-site,.rv-badge .pg-stub{font-size:17px}

  /* шаг секций едет через --r-gap, отдельного мобильного padding быть не должно */
  :root{--r-gap:34px}
  .rs-in{flex-direction:column;align-items:stretch;gap:32px}
  .rc-wrap{grid-template-columns:1fr;gap:32px;padding:0 20px}
  .rc-left h2{font-size:30px}
  .rc-left p{max-width:none;font-size:17px}
  /* колонки складываются: фотокарточка сверху, панель снизу,
     скругления перекидываем на общий контур */
  .rq-box{grid-template-columns:1fr;padding:0 20px}
  .rq-card{min-height:390px;border-radius:18px 18px 0 0;padding:28px 24px}
  .rq-card::before{height:74%;background:linear-gradient(180deg,#2C241C 0%,
    rgba(44,36,28,.95) 42%,rgba(44,36,28,.72) 72%,rgba(44,36,28,0) 100%)}
  .rq-card b,.rq-list li{font-size:17px}
  .rq-panel{border-radius:0 0 18px 18px;padding:28px 24px}
  .rq-panel h2{font-size:25px}
  .rq-sub{font-size:16px;max-width:none}
  .rs-adv h2{font-size:28px}
  .ra-card{aspect-ratio:auto;min-height:0;padding:30px 28px 28px}
  .ra-ic{width:58px;margin-bottom:18px}
  .ra-ic svg{width:32px;height:32px}
  /* display:block — иначе инлайновые grid-column из разметки беседок
     оставляют три колонки и рвут страницу по ширине */
  .rc-panel{display:block;padding:18px 14px}
  /* на узком экране таблица разворачивается в карточки: подпись, наше, польза.
     Подложка средней колонки на одну колонку не ложится — прячем, фон уходит
     на сами ячейки */
  .rc-usbg{display:none}
  .rc-panel>div{padding:8px 14px;min-height:0;font-size:15.5px}
  .rc-hd{display:none}
  .rc-lab{font-weight:600;color:var(--r-head);font-size:13px;
    text-transform:uppercase;letter-spacing:.05em;padding-top:16px}
  .rc-us{background:linear-gradient(162deg,#9A6330,#7B4E23);border-radius:14px;
    padding:14px 18px;margin:6px 0}
  .rc-them{padding-bottom:16px}
}
@media(max-width:680px){
  .rk-grid,.ra-grid{grid-template-columns:1fr}
  .rq-form{grid-template-columns:1fr}
  .rs-btn{width:100%;justify-content:center}
  .rc-chip{flex:1 1 100%}
}

/* ── плашки отзывов (блок сравнения) ───────────────────────────────
   Форма снята с эталона: белая пилюля, крупная оценка, звезда, площадка.
   Логотипы площадок не воспроизводим — это чужие товарные знаки,
   название текстом решает ту же задачу. */
.rv-row{display:flex;gap:calc(var(--z)*14);flex-wrap:wrap;margin:0 0 30px}
/* плашка площадки: белая, мягкая тень, число - звезда - название */
.rv-badge{display:inline-flex;align-items:center;gap:calc(var(--z)*10);
  background:#fff;border:1px solid var(--r-line);border-radius:16px;
  padding:calc(var(--z)*12) calc(var(--z)*22);
  box-shadow:0 6px 18px rgba(46,38,32,.07);text-decoration:none}
.rv-num{font-size:calc(var(--zt)*19);font-weight:600;color:var(--r-head);line-height:1.1}
.rv-star{flex:0 0 auto;display:block;width:calc(var(--z)*19);height:calc(var(--z)*19);
  color:var(--r-btn)}
.rv-star svg{display:block;width:100%;height:100%}
.rv-site{font-size:calc(var(--zt)*19);font-weight:600;color:var(--r-head);line-height:1.1}
.rv-badge .pg-stub{font-size:calc(var(--zt)*19);line-height:1.1}

/* ── «Давайте знакомиться»: форма слева, карточка контактов справа ───────
   Дорожки артборда эталона при базе 1200: 38 + 520 + 20 + 582 + 40 = 1200. */
.rs-meet{background:#fff}
.rs-meet .rh-in{max-width:none;padding:0 calc(var(--z)*40) 0 calc(var(--z)*38)}
.rm-box{display:grid;grid-template-columns:520fr 582fr;gap:calc(var(--z)*20);
  align-items:start}
.rs-meet h2{margin:0 0 calc(var(--z)*14);font-size:calc(var(--zt)*32);
  line-height:calc(var(--z)*40);font-weight:500;letter-spacing:normal}
.rm-sub{margin:0 0 calc(var(--z)*16);font-size:calc(var(--zt)*16);
  line-height:calc(var(--z)*22);color:var(--r-muted);max-width:calc(var(--z)*490)}
.rm-form input[type=text],.rm-form input[type=tel]{display:block;width:100%;
  height:calc(var(--z)*52);margin-bottom:calc(var(--z)*12);padding:0 calc(var(--z)*20);
  border:1px solid var(--r-line);border-radius:12px;background:var(--r-soft);
  font:inherit;font-size:calc(var(--zt)*15);color:var(--r-text)}
.rm-form input::placeholder{color:var(--r-muted)}
.rm-ok{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--z)*10);
  align-items:start;margin:calc(var(--z)*4) 0 calc(var(--z)*14);
  font-size:calc(var(--zt)*13);line-height:1.45;color:var(--r-muted)}
.rm-ok input{width:calc(var(--z)*18);height:calc(var(--z)*18);accent-color:var(--r-btn)}
.rm-ok a{color:var(--r-accent)}
.rm-form button{width:100%;height:calc(var(--z)*56);border:0;border-radius:12px;
  background:var(--r-btn);color:#fff;font:inherit;font-size:calc(var(--zt)*15);
  font-weight:600;cursor:pointer}
.rm-form button:disabled{background:var(--r-accent-weak);color:#5A3A1E;cursor:not-allowed}
.rm-note{margin:calc(var(--z)*10) 0 0;font-size:calc(var(--zt)*12.5);color:var(--r-muted)}
.rm-card{position:relative;overflow:hidden;border:2px solid var(--r-btn);border-radius:16px;
  padding:calc(var(--z)*22) calc(var(--z)*36) calc(var(--z)*26);
  min-height:calc(var(--z)*340)}
.rm-card-hd{margin:0 0 calc(var(--z)*26);text-align:center;font-size:calc(var(--zt)*16);
  line-height:calc(var(--z)*22);font-weight:500;color:var(--r-head)}
.rm-list{margin:0;padding:0;list-style:none}
.rm-list li{display:grid;grid-template-columns:calc(var(--z)*36) minmax(0,1fr);
  column-gap:calc(var(--z)*16);align-content:start;margin-bottom:calc(var(--z)*20)}
.rm-list li:last-child{margin-bottom:0}
.rm-ic{grid-column:1;grid-row:1/3;align-self:start;display:grid;place-items:center;
  width:calc(var(--z)*36);height:calc(var(--z)*36);border-radius:50%;
  background:var(--r-btn);color:#fff}
.rm-ic svg{width:calc(var(--z)*16);height:calc(var(--z)*16)}
.rm-list b{grid-column:2;grid-row:1;font-size:calc(var(--zt)*13);
  line-height:calc(var(--z)*17);font-weight:600;color:var(--r-head)}
.rm-list span{grid-column:2;grid-row:2;font-size:calc(var(--zt)*14);
  line-height:calc(var(--z)*19);color:var(--r-text)}
/* свой снимок у правого края карточки; текст живёт левее и его не задевает */
.rm-pic{position:absolute;right:calc(var(--z)*-6);bottom:calc(var(--z)*-10);
  width:calc(var(--z)*168);aspect-ratio:500/900;pointer-events:none;
  background:url('/images/phone.png?v=47') right bottom/contain no-repeat;
  background-image:image-set(url('/images/phone.webp?v=47') type('image/webp'),
                             url('/images/phone.png?v=47') type('image/png'))}
.rm-list li{max-width:calc(var(--z)*344)}


/* ── блок 6: качество работ ──────────────────────────
   Композиция эталонного артборда 1200: слева заголовок 30/38 и пять
   строк «иконка 48 + заголовок 17/22 + описание 13/18», разделитель
   идёт ТОЛЬКО под текстом, под иконку не заходит; справа карточка
   400x706 радиусом 18 с формой. Колонки 646 / зазор 74 / 400 — переносим
   долями: артборд едет от ширины окна, пиксели совпадут только там,
   где снимал. Заливка карточки темнее эталонной: на #96531f подпись
   #edd5c2 даёт 4,0:1 — ниже AA для 13px; на #8E4616 те же 5,08:1. */
.rs-qa{background:#fff}
.rs-qa .rh-in{max-width:none;padding:0 calc(var(--z)*40)}
.rq2-box{display:grid;grid-template-columns:646fr 400fr;gap:0 6.6%;align-items:stretch}
.rq2-left{min-width:0}
.rs-qa h2{margin:0 0 calc(var(--z)*34);font-size:calc(var(--zt)*30);line-height:1.24;font-weight:400;letter-spacing:normal;max-width:820px}
.rs-qa h2 b{font-weight:700}
.rq2-list{margin:0;padding:0;list-style:none}
/* шаг строк у эталона жёсткий: 120 базовых на строку, независимо от того,
   сколько строк занял текст. Отсюда и вся воздушность блока — без этого
   список сбивается в плотную кучу и блок выходит на четверть короче */
.rq2-list li{display:grid;grid-template-columns:calc(var(--z)*48) minmax(0,1fr);column-gap:calc(var(--z)*18);
  min-height:calc(var(--z)*120);align-content:start;margin-bottom:0}
.rq2-list li:last-child{min-height:0}
.rq2-ic{grid-column:1;grid-row:1/3;align-self:start;width:calc(var(--z)*48);height:calc(var(--z)*48);border-radius:14px;
  background:var(--r-btn);color:#fff;display:grid;place-items:center}
.rq2-ic svg{width:calc(var(--z)*26);height:calc(var(--z)*26)}
.rq2-list b{grid-column:2;grid-row:1;font-size:calc(var(--zt)*17);line-height:calc(var(--z)*22);font-weight:500;
  color:var(--r-head)}
.rq2-list p{grid-column:2;grid-row:2;margin:calc(var(--z)*6) 0 0;padding-bottom:calc(var(--z)*14);
  border-bottom:1px solid var(--r-line);font-size:calc(var(--zt)*13);line-height:calc(var(--z)*18);color:var(--r-muted)}
.rq2-list li:last-child p{border-bottom:0;padding-bottom:0}
/* высота карточки взята из кода эталона: элемент объявлен height:706 при
   базе 1200. Без неё карточка жмётся по своему содержимому и блок выходит
   на десятую часть ниже эталонного */
.rq2-card{display:flex;flex-direction:column;min-height:calc(var(--z)*706);border-radius:18px;padding:calc(var(--z)*48) calc(var(--z)*36);
  background:linear-gradient(155deg,#8E4616 0%,#5B2E0E 100%)}
.rq2-card h3{margin:0 0 calc(var(--z)*10);font-size:calc(var(--zt)*20);line-height:1.26;font-weight:600;color:#fff}
.rq2-sub{margin:0 0 calc(var(--z)*30);font-size:calc(var(--zt)*13);line-height:1.45;color:#F0D9C4}
.rq2-form label{display:block;margin-bottom:calc(var(--z)*22);font-size:calc(var(--zt)*13.5);font-weight:500;color:#F0D9C4}
.rq2-form input[type=text],.rq2-form input[type=tel]{width:100%;margin-top:calc(var(--z)*6);height:calc(var(--z)*58);
  padding:0 calc(var(--z)*15);border:0;border-radius:12px;background:#fff;font:inherit;font-size:calc(var(--zt)*15);
  color:var(--r-text)}
.rq2-form input:focus{outline:2px solid #fff;outline-offset:2px}
/* селектор двухклассный специально: «.rq2-form label» выше по весу, чем
   одиночный класс, и его display:block забил бы здешний flex */
.rq2-form .rq2-ok{display:flex;align-items:flex-start;gap:11px;margin:2px 0 22px;
  font-weight:400;font-size:calc(var(--zt)*13);line-height:1.45;color:#F0D9C4}
.rq2-form .rq2-ok input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  accent-color:#46250C}
.rq2-card button{width:100%;height:calc(var(--z)*58);border:1px solid rgba(255,255,255,.22);border-radius:12px;
  background:#46250C;color:#fff;font:inherit;font-size:calc(var(--zt)*16);font-weight:600;cursor:pointer}
.rq2-card button:hover:not(:disabled){background:#5C3110}
.rq2-card button:disabled{color:#E5CDB6;cursor:not-allowed}
.rq2-note{margin:calc(var(--z)*12) 0 0;font-size:calc(var(--zt)*12.5);line-height:1.45;color:#F0D9C4}
.rq2-card .pg-stub{background:rgba(255,255,255,.14);border-bottom-color:#F0D9C4}
@media(max-width:980px){
  .rq2-box{grid-template-columns:1fr;gap:34px 0}
  .rs-qa h2{font-size:28px;margin-bottom:26px}
  .rq2-list li{grid-template-columns:50px minmax(0,1fr);column-gap:18px}
  .rq2-ic{width:50px;height:50px}
  .rq2-ic svg{width:26px;height:26px}
  .rq2-list b{font-size:17px;line-height:23px}
  .rq2-list p{font-size:14px}
  .rq2-card{padding:30px 24px}
}

/* согласие в форме сметы: ряд во всю ширину сетки */
.rq-form .rq-ok{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;margin:2px 0 0;
  font-size:13px;line-height:1.45;font-weight:400;color:var(--r-muted)}
.rq-form .rq-ok input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--r-btn)}
/* ссылка на политику в тёмной карточке: акцент --r-accent на коричневом
   даёт 1,5:1, поэтому свой цвет и подчёркивание */
.rq2-card a{color:#FBEFE4;text-decoration:underline;text-underline-offset:2px}
.rq2-card a:hover{color:#fff}

/* ── блок 7: фиксация цены ─────────────────────────
   Лента едет на -50% при двух одинаковых половинах — стык невидим.
   Фото бумаг прижато к низу и режется сверху: там оно пустое,
   а текст должен ложиться на чистое поле. */
.rtick{overflow:hidden;background:var(--r-btn)}
/* Полоса НЕ на линейке артборда: у эталона это отдельный блок, и он
   держит 70px и кегль 20px на любой ширине окна. */
.rtick-run{display:flex;align-items:center;gap:26px;width:max-content;height:70px;
  animation:rtick 46s linear infinite}
/* у Wix Madefor Text нет веса 300, ближайший — 400 */
.rtick-run span{color:#fff;font-size:20px;font-weight:400;white-space:nowrap}
.rtick-run i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#fff}
@keyframes rtick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rtick-run{animation:none}}

.rs-fix{position:relative;overflow:hidden;background:#fff;
  padding-bottom:calc(var(--r-gap) + calc(var(--z)*40))}
.rs-fix .rh-in{position:relative;z-index:1}
.rs-fix .rh-in{max-width:none;padding:0 calc(var(--z)*40)}
/* У эталона 843, но его шрифт уже нашего: наш заголовок в 843 ломается
   на две строки и уводит колонки вниз. 920 — минимум, при котором строка
   одна, с запасом 45px. */
.rs-fix h2{max-width:calc(var(--z)*880);margin:0 auto calc(var(--z)*70);text-align:center;
  font-size:calc(var(--zt)*32);line-height:1.24;font-weight:500;letter-spacing:normal}
/* Дорожки не равные: у эталона кружки стоят на 40 / 386 / 839 при базе
   1200, то есть 346 / 453 / 321 внутри полей по 40. Средняя колонка
   шире — там самый длинный текст. Сумма дорожек ровно 1120. */
.rfx-cols{display:grid;grid-template-columns:346fr 453fr 321fr;gap:0;
  margin:0 0 calc(var(--z)*48);padding:0;list-style:none}
/* align-content:start обязателен: колонки тянутся по самой высокой, и без
   него лишняя высота растекается по строкам — описание в коротких
   колонках уезжает на строку ниже, чем в длинной */
.rfx-cols li{display:grid;grid-template-columns:calc(var(--z)*26) minmax(0,1fr);column-gap:calc(var(--z)*14);
  align-content:start}
.rfx-n{grid-column:1;grid-row:1/3;align-self:start;width:calc(var(--z)*26);height:calc(var(--z)*26);border-radius:50%;
  background:var(--r-btn);color:#fff;font-size:calc(var(--zt)*11);font-weight:600;display:grid;
  place-items:center}
.rfx-cols b{grid-column:2;font-size:calc(var(--zt)*17);line-height:calc(var(--z)*22);font-weight:500;color:var(--r-head)}
.rfx-cols p{grid-column:2;margin:calc(var(--z)*6) 0 0;font-size:calc(var(--zt)*13);
  line-height:calc(var(--z)*18);color:var(--r-muted);max-width:calc(var(--z)*275)}
/* ширины описаний у эталона свои на каждую колонку */
.rfx-cols li:nth-child(2) p{max-width:calc(var(--z)*350)}
.rfx-cols li:nth-child(3) p{max-width:calc(var(--z)*292)}
.rfx-btn{display:flex;align-items:center;justify-content:center;gap:calc(var(--z)*14);width:max-content;
  margin:0 auto;height:calc(var(--z)*56);padding:0 calc(var(--z)*40);border-radius:14px;
  min-width:calc(var(--z)*345);background:var(--r-btn);
  color:#fff;text-decoration:none;font-size:calc(var(--zt)*16);font-weight:600;transition:background .15s}
.rfx-btn:hover{background:var(--r-btn-h)}
.rfx-btn i{display:grid;place-items:center;width:calc(var(--z)*28);height:calc(var(--z)*28);border-radius:50%;
  border:1.6px solid rgba(255,255,255,.7);font-style:normal;font-size:calc(var(--zt)*15);line-height:1}
/* полоса прижата к низу и режется сверху. Высота едет от ширины окна, как
   и сама картинка, иначе на широком мониторе бумага поднимается на текст;
   потолок 250px держит её ниже колонок на 1920 и шире */
/* полоса шире окна, как у эталона: 1400 при базе 1200. Едет по той же
   линейке, что и всё остальное, поэтому запас до текста не зависит от ширины */
.rfx-pic{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--z)*10);
  width:calc(var(--z)*1400);aspect-ratio:1400/350;z-index:0;pointer-events:none;
  background:url('/images/docs.png') center bottom/cover no-repeat;
  background-image:image-set(url('/images/docs.webp') type('image/webp'),
                             url('/images/docs.png') type('image/png'))}
@media(max-width:980px){
  .rtick-run{height:56px}
  .rtick-run span{font-size:14px}
  .rs-fix h2{font-size:26px;margin-bottom:28px;text-align:left}
  .rfx-cols{grid-template-columns:1fr;gap:22px;margin-bottom:28px}
  .rfx-cols b{font-size:17px;line-height:26px}
  .rfx-btn{width:100%;height:56px;font-size:16px}
  .rfx-pic{height:34%;background-size:170% auto}
}