/* Стиль витрины kkm.1raymedia.ru.
   Один файл на главную и на статьи: правка расходится сразу на обе.
   Манера снята с observIQ - см. память kkm-lending-dizayn-sistema.
   Подключается с версией в адресе, иначе браузеры держат старый файл. */

  /* ── Шрифты ─────────────────────────────────────────────────────── */
  @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('/static/fonts/onest-cyrillic.woff2') format('woff2');
    unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
  @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('/static/fonts/onest-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
  @font-face{font-family:'InterVar';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('/static/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:'InterVar';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('/static/fonts/inter-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}

  :root{
    --font-head:'Onest','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
    --font-body:'InterVar','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
    --font-mono:'Cascadia Mono',Consolas,'Courier New',monospace;

    /* Палитра образца: почти чёрный, белый, серый фон, синий и лимонный. */
    --chern:#17191C; --chern-myagkij:#2C3037;
    --belyj:#FFFFFF; --fon:#F6F6F7; --fon2:#FAFAFA; --fon3:#EFEFF1;
    --tekst:#17191C; --tekst-mut:#5C6370; --tekst-slab:#767D8A;
    --granica:#E9E9EC; --granica-sil:#DCDCE1;
    --siniy:#0068CE; --siniy-temn:#0059B3;
    --limon:#FFF699; --limon-granica:#E8DE7A;
    --zelenyj:#15803D; --zelenyj-fon:#EFFBF3;
    --krasnyj:#C02626; --krasnyj-fon:#FDF2F2;

    --t-12:12px; --t-13:13px; --t-14:14px; --t-15:15px; --t-16:16px;
    --t-18:18px; --t-20:20px; --t-24:24px; --t-30:30px; --t-40:40px;
    --p-4:4px; --p-8:8px; --p-12:12px; --p-16:16px; --p-20:20px; --p-24:24px;
    --p-32:32px; --p-40:40px; --p-56:56px; --p-72:72px; --p-96:96px; --p-120:120px;

    --radius-s:10px; --radius-m:14px; --radius-l:20px; --radius-xl:26px;
    --radius-krug:999px;

    /* Две ступени теней. Первая - для белых панелей внутри карточек,
       вторая - для окна продукта. Обе широкие и почти прозрачные:
       на образце тень чувствуется, но её не видно. */
    --ten-panel:0 1px 2px rgba(23,25,28,.04), 0 10px 26px rgba(23,25,28,.06);
    --ten-okno:0 2px 6px rgba(23,25,28,.05), 0 30px 64px rgba(23,25,28,.10);

    --maxw:1120px;
    --bystro:.18s cubic-bezier(.4,0,.2,1);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--belyj); color:var(--tekst); overflow-x:hidden;
       font-family:var(--font-body); font-size:var(--t-16); line-height:1.6;
       -webkit-font-smoothing:antialiased}
  a{color:inherit; text-decoration:none}
  img,svg{display:block}
  /* Вес заголовков средний - на образце они не жирные, а спокойные. */
  h1,h2,h3,h4{font-family:var(--font-head); font-weight:600; margin:0;
              letter-spacing:-.025em; text-wrap:balance}
  p{margin:0}
  .in{max-width:var(--maxw); margin:0 auto}
  .pad{padding-left:var(--p-24); padding-right:var(--p-24)}
  section[id]{scroll-margin-top:96px}
  a:focus-visible, button:focus-visible, summary:focus-visible{
    outline:3px solid var(--siniy); outline-offset:3px; border-radius:var(--radius-s)}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  }
  .mono{font-family:var(--font-mono); font-size:.93em; letter-spacing:-.01em}

  /* ── Фон с кругами ──────────────────────────────────────────────────
     У образца под первым экраном и финалом лежит светлая текстура:
     редкие концентрические круги и тёплое свечение. Рисуем градиентами,
     маской смягчаем края - иначе круги упираются в границу секции. */
  .krugi{position:relative; background:var(--fon)}
  /* Шапка стоит перед блоком с кругами, чтобы липнуть на всю страницу:
     sticky держится только в пределах родителя, а родитель-блок кончается
     на первом экране. Блок подтягиваем под шапку на её высоту (14 + 58 px)
     и возвращаем эту высоту отступом - фон под стеклом, первый экран на месте. */
  .shapka + .krugi{margin-top:-72px; padding-top:72px}
  .krugi::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      repeating-radial-gradient(circle at 50% 38%,
        rgba(23,25,28,.030) 0 1px, transparent 1px 46px),
      radial-gradient(54% 42% at 50% 32%, rgba(255,246,153,.16), transparent 72%),
      radial-gradient(38% 38% at 4% 28%, rgba(255,246,153,.11), transparent 70%),
      radial-gradient(38% 38% at 96% 28%, rgba(255,246,153,.11), transparent 70%);
    -webkit-mask-image:radial-gradient(82% 74% at 50% 40%, #000 38%, transparent 100%);
            mask-image:radial-gradient(82% 74% at 50% 40%, #000 38%, transparent 100%)}
  .krugi > *{position:relative; z-index:1}

  /* ── Шапка-остров ───────────────────────────────────────────────── */
  /* Сама полоса прозрачная и без границы: стекло и тень живут на .in -
     это и есть «остров», который парит над первым экраном. */
  .shapka{position:sticky; top:0; z-index:50; background:transparent;
          border:0; padding:14px var(--p-24) 0;
          transition:padding var(--bystro)}
  .shapka .in{display:flex; align-items:center; gap:var(--p-16);
          height:58px; padding:0 10px 0 var(--p-20);
          border-radius:var(--radius-krug);
          background:rgba(255,255,255,.78);
          border:1px solid rgba(23,25,28,.09);
          backdrop-filter:blur(20px) saturate(1.35);
          -webkit-backdrop-filter:blur(20px) saturate(1.35);
          box-shadow:0 14px 40px rgba(23,25,28,.10);
          transition:background var(--bystro), box-shadow var(--bystro),
                     border-color var(--bystro)}
  /* При прокрутке остров прижимается к краю и становится плотнее. */
  .shapka.plotno{padding-top:8px}
  .shapka.plotno .in{background:rgba(255,255,255,.95);
          border-color:rgba(23,25,28,.12);
          box-shadow:0 16px 44px rgba(23,25,28,.16)}
  .logo{display:flex; align-items:center; gap:var(--p-8); font-family:var(--font-head);
        font-weight:700; font-size:var(--t-16); white-space:nowrap; padding:7px 0;
        letter-spacing:-.02em}
  .logo svg{width:26px; height:26px; border-radius:7px}
  .menyu{display:flex; gap:var(--p-4); margin:0 auto}
  .menyu a{padding:var(--p-8) var(--p-12); border-radius:var(--radius-krug);
           color:var(--tekst-mut); font-size:var(--t-14); font-weight:500;
           white-space:nowrap;
           transition:background var(--bystro), color var(--bystro)}
  .menyu a:hover{background:rgba(23,25,28,.05); color:var(--tekst)}
  .menyu a.tut{background:rgba(23,25,28,.07); color:var(--tekst)}
  .knopki{display:flex; align-items:center; gap:var(--p-8)}
  .menyu .v-menyu{display:none}
  /* .menyu a задаёт цвет текста и по весу перебивает .k-temnaya:
     без этого кнопка в выпадающем меню чёрная на чёрном. */
  .menyu a.k-temnaya{color:#fff}
  .burger{display:none; width:44px; height:44px; border-radius:var(--radius-krug);
          border:1px solid var(--granica-sil); background:var(--belyj);
          align-items:center; justify-content:center; cursor:pointer}
  .burger svg{width:20px; height:20px; stroke:var(--tekst)}
  #men{position:absolute; opacity:0; pointer-events:none}

  /* ── Кнопки ─────────────────────────────────────────────────────── */
  .knopka{display:inline-flex; align-items:center; justify-content:center;
          gap:var(--p-8); border-radius:var(--radius-krug); padding:13px var(--p-24);
          font-size:var(--t-14); font-weight:500; font-family:var(--font-body);
          border:1px solid transparent; cursor:pointer; white-space:nowrap;
          min-height:46px; transition:background var(--bystro),
          border-color var(--bystro), transform var(--bystro)}
  .knopka:active{transform:translateY(1px)}
  .k-temnaya{background:var(--chern); color:#fff; border-color:var(--chern)}
  .k-temnaya:hover{background:var(--chern-myagkij); border-color:var(--chern-myagkij)}
  .k-beloe{background:var(--belyj); color:var(--tekst); border-color:var(--granica-sil)}
  .k-beloe:hover{background:var(--fon2); border-color:#C9C9D0}
  .k-tihaya{background:none; color:var(--tekst); padding:10px var(--p-12)}
  .k-tihaya:hover{background:rgba(23,25,28,.05)}

  /* ── Первый экран ───────────────────────────────────────────────── */
  .geroy{padding:var(--p-56) var(--p-24) var(--p-96); text-align:center}
  .obyava{display:inline-flex; align-items:center; gap:var(--p-8);
          background:var(--limon); color:var(--chern); font-size:var(--t-13);
          font-weight:500; padding:8px var(--p-16); border-radius:var(--radius-krug);
          margin-bottom:var(--p-32); border:1px solid var(--limon-granica);
          transition:transform var(--bystro)}
  .obyava:hover{transform:translateY(-1px)}
  .obyava svg{width:14px; height:14px}

  .cepochka{font-family:var(--font-head); font-weight:600; color:var(--siniy);
            font-size:var(--t-15); letter-spacing:-.01em; margin-bottom:var(--p-16)}
  .cepochka i{font-style:normal; color:var(--tekst-slab); padding:0 .25em}
  h1.zagolovok{font-size:clamp(34px, 5.2vw, 62px); line-height:1.06; font-weight:600;
               max-width:16ch; margin:0 auto}
  .podzag{font-size:var(--t-16); line-height:1.65; color:var(--tekst-mut);
          max-width:66ch; margin:var(--p-24) auto var(--p-32)}
  .geroy-knopki{display:flex; gap:var(--p-12); justify-content:center; flex-wrap:wrap}

  /* Плашка совместимости: мелкая, но должна быть на первом экране -
     она экономит время тем, чьё оборудование мы не поддерживаем. */
  .sovmestimost{display:flex; gap:var(--p-12); align-items:flex-start;
        max-width:74ch; margin:var(--p-32) auto 0; text-align:left;
        padding:var(--p-12) var(--p-16); background:var(--belyj);
        border:1px solid var(--granica); border-radius:var(--radius-m);
        font-size:var(--t-13); line-height:1.55; color:var(--tekst-mut);
        box-shadow:var(--ten-panel)}
  .sovmestimost svg{width:17px; height:17px; flex:none; margin-top:2px;
        stroke:var(--tekst-mut)}
  .sovmestimost b{color:var(--tekst); font-weight:600}

  /* Окно продукта - главный приём первого экрана у образца. */
  .okno{margin:var(--p-56) auto 0; max-width:900px; text-align:left;
        background:var(--belyj); border:1px solid var(--granica);
        border-radius:var(--radius-xl); box-shadow:var(--ten-okno); overflow:hidden}
  .okno-verh{display:flex; align-items:center; gap:6px; padding:11px var(--p-16);
             border-bottom:1px solid var(--granica); background:var(--fon2)}
  .okno-verh i{width:9px; height:9px; border-radius:50%; background:#D9D9DE; display:block}
  .okno-verh .adres{margin-left:var(--p-12); font-size:var(--t-12);
                    color:var(--tekst-mut); font-family:var(--font-mono);
                    /* Длинный адрес не должен распирать окно на телефоне. */
                    min-width:0; overflow:hidden; text-overflow:ellipsis;
                    white-space:nowrap}
  .okno img{width:100%; height:auto}

  /* Панель точки */
  .panel-verh{display:flex; align-items:center; gap:var(--p-12);
              padding:var(--p-16) var(--p-20); border-bottom:1px solid var(--granica)}
  .panel-verh .imya{font-family:var(--font-head); font-weight:600; font-size:var(--t-16)}
  .panel-verh .gde{font-size:var(--t-12); color:var(--tekst-mut)}
  .panel-verh .sprava{margin-left:auto; text-align:right}
  .bejdzh{display:inline-flex; align-items:center; gap:5px; font-size:var(--t-12);
          font-weight:500; padding:4px var(--p-8); border-radius:var(--radius-krug);
          background:var(--limon); color:var(--chern); border:1px solid var(--limon-granica)}
  .bejdzh.ok{background:var(--zelenyj-fon); color:var(--zelenyj); border-color:#C9EBD6}
  .bejdzh.beda{background:var(--krasnyj-fon); color:var(--krasnyj); border-color:#F3D3D3}
  .kogda{font-size:var(--t-12); color:var(--tekst-mut); margin-top:6px}
  .stroki{display:grid; grid-template-columns:1fr 1fr}
  .stroka{display:flex; align-items:center; gap:var(--p-12); min-width:0;
          padding:12px var(--p-20); border-bottom:1px solid var(--fon3);
          font-size:var(--t-14)}
  .stroka .imya{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
                white-space:nowrap}
  .stroka .znach{color:var(--tekst-mut); font-size:var(--t-13);
                 font-variant-numeric:tabular-nums; white-space:nowrap}
  .ogonek{width:8px; height:8px; border-radius:50%; flex:none; background:var(--zelenyj)}
  .ogonek.krasnyj{background:var(--krasnyj)}
  .ogonek.zheltyj{background:#C2740A}
  .panel-niz{padding:var(--p-12) var(--p-20); background:var(--fon2);
             font-size:var(--t-13); color:var(--tekst-mut); display:flex;
             align-items:center; gap:var(--p-12); flex-wrap:wrap}

  /* ── Макет кабинета ───────────────────────────────────────────────
     Нарисованная копия экрана «Мои кассы»: слева рельс с разделами,
     сверху счётчики, ниже строка на каждую точку. */
  .kab{display:flex; min-height:380px; font-size:var(--t-13)}
  .kab-rels{width:76px; flex:none; background:var(--fon2);
            border-right:1px solid var(--granica); padding:var(--p-12) 0;
            display:flex; flex-direction:column; align-items:center;
            gap:var(--p-4)}
  .kab-rels .znak{width:34px; height:34px; border-radius:9px;
                  margin-bottom:var(--p-12)}
  .kab-rels a, .kab-rels span:not(.znak){display:flex; flex-direction:column; align-items:center; gap:4px;
              padding:8px 6px; border-radius:var(--radius-s); width:60px;
              color:var(--tekst-mut); font-size:11px; text-align:center;
              line-height:1.25}
  .kab-rels a svg, .kab-rels span svg{width:18px; height:18px}
  .kab-rels a.tut, .kab-rels .tut{background:var(--belyj); color:var(--chern);
                  box-shadow:var(--ten-panel)}
  .kab-rels .vniz{margin-top:auto}

  .kab-telo{flex:1; min-width:0; display:flex; flex-direction:column}
  .kab-verh{display:flex; align-items:center; gap:var(--p-12);
            padding:var(--p-16) var(--p-20); border-bottom:1px solid var(--granica);
            flex-wrap:wrap}
  .kab-verh .zagolovok-kab{font-family:var(--font-head); font-weight:600;
            font-size:var(--t-18); letter-spacing:-.02em}
  .kab-verh .sprava{margin-left:auto; display:flex; align-items:center;
            gap:var(--p-8); flex-wrap:wrap}
  .kab-chip{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-12);
            color:var(--tekst-mut); border:1px solid var(--granica);
            border-radius:var(--radius-krug); padding:5px var(--p-12);
            background:var(--belyj); white-space:nowrap}
  .kab-chip .zelenaya{width:7px; height:7px; border-radius:50%;
                      background:var(--zelenyj)}
  .kab-knopka{font-size:var(--t-12); padding:6px var(--p-12);
              border-radius:var(--radius-krug); border:1px solid var(--chern);
              background:var(--chern); color:#fff; white-space:nowrap}

  .kab-schet{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--p-12);
             padding:var(--p-16) var(--p-20)}
  .kab-schet .kletka{border:1px solid var(--granica); border-radius:var(--radius-m);
             padding:var(--p-12) var(--p-16); background:var(--belyj)}
  .kab-schet .chislo{font-family:var(--font-head); font-size:var(--t-24);
             font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums}
  .kab-schet .podpis{font-size:var(--t-12); color:var(--tekst-mut); margin-top:2px}
  .kab-schet .nelzya .chislo{color:var(--krasnyj)}
  .kab-schet .mozhno .chislo{color:var(--zelenyj)}

  .kab-tablica{width:100%; border-collapse:collapse; table-layout:fixed}
  .kab-tablica th:first-child{width:38%}
  .kab-tablica th:nth-child(2){width:136px}
  .kab-tablica th:nth-child(3){width:86px}
  .kab-tablica th:nth-child(4){width:118px}
  .kab-tablica th:nth-child(5){width:84px}
  .kab-tablica th:last-child{width:96px}
  .kab-tablica th{font-size:11px; font-weight:500; color:var(--tekst-mut);
             text-transform:uppercase; letter-spacing:.05em; text-align:left;
             padding:var(--p-8) var(--p-12); border-bottom:1px solid var(--granica);
             white-space:nowrap}
  .kab-tablica th:first-child{padding-left:var(--p-20)}
  .kab-tablica td{padding:11px var(--p-12); border-bottom:1px solid var(--fon3);
             vertical-align:top}
  .kab-tablica td:first-child{padding-left:var(--p-20)}
  .kab-tablica tr:last-child td{border-bottom:none}
  .kab-tablica .tochka{display:flex; gap:var(--p-8); align-items:flex-start}
  .kab-tablica .imya-tochki{font-weight:500; color:var(--siniy-temn)}
  .kab-tablica .adres{color:var(--tekst-mut); font-size:var(--t-12); margin-top:2px}
  .kab-tablica .pochemu{color:var(--krasnyj); font-size:var(--t-12); margin-top:4px}
  .kab-tablica .pochemu.vnimanie{color:#9A6206}
  .kab-tablica .chislo{font-variant-numeric:tabular-nums; font-weight:600}
  .kab-tablica .tiho{color:var(--tekst-mut); font-size:var(--t-12); white-space:nowrap}
  .kab-tablica .marki-po{color:var(--tekst-mut); font-size:var(--t-12)}

  @media (max-width:900px){
    .kab-schet{grid-template-columns:repeat(2,1fr)}
    .kab-tablica .skryt-sredne{display:none}
  }
  @media (max-width:640px){
    .kab-rels{display:none}
    .kab-tablica .skryt-uzko{display:none}
    .kab-schet{padding:var(--p-12)}
  }
  @media (max-width:560px){
    /* Шесть колонок в 375 px не живут: «Точка» ужималась до 77 px,
       и адрес рассыпался по одному слову в строку. Строка таблицы
       становится карточкой: название с адресом сверху, вердикт и
       время последней связи - строкой под ними. */
    .kab-tablica{table-layout:auto}
    .kab-tablica tr:first-child{display:none}
    .kab-tablica tr{display:block; padding:var(--p-12) var(--p-16);
                    border-bottom:1px solid var(--fon3)}
    .kab-tablica tr:last-child{border-bottom:none}
    .kab-tablica td{display:inline-block; border:none; padding:0;
                    vertical-align:middle}
    .kab-tablica td:first-child{display:block; padding:0 0 var(--p-8)}
    .kab-tablica td + td{margin-right:var(--p-12)}
    .kab-tablica .adres, .kab-tablica .pochemu{max-width:none}
  }

  /* Карточка одной точки: вердикт сверху, проверки строками, подсказка. */
  .kartochka .verh{display:flex; align-items:flex-start; gap:var(--p-12);
        padding:var(--p-16) var(--p-20); border-bottom:1px solid var(--granica);
        flex-wrap:wrap}
  .kartochka .imya{font-family:var(--font-head); font-weight:600; font-size:var(--t-18)}
  .kartochka .gde{font-size:var(--t-12); color:var(--tekst-mut); margin-top:2px}
  .kartochka .sprava{margin-left:auto; text-align:right}
  .kartochka .sovet{display:flex; gap:var(--p-12); align-items:flex-start;
        margin:var(--p-16) var(--p-20) 0; padding:var(--p-12) var(--p-16);
        background:var(--krasnyj-fon); border:1px solid #F3D3D3;
        border-radius:var(--radius-m); font-size:var(--t-13); line-height:1.55}
  .kartochka .sovet svg{width:17px; height:17px; flex:none; margin-top:2px;
        color:var(--krasnyj)}
  .kartochka .sovet b{color:var(--tekst)}
  .kartochka .stroki{margin-top:var(--p-16)}
  .kartochka .stroka .podskazka{color:var(--tekst-mut); font-size:var(--t-12);
        margin-top:2px}
  .kartochka .stroka.vazhno{background:#FEF7F7}
  .kartochka .stroka .imya-pr{flex:1; min-width:0}

  /* ── Что в архиве ─────────────────────────────────────────────── */
  .ustanovka{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
             gap:var(--p-24); align-items:start}
  .arhiv{background:var(--belyj); border:1px solid var(--granica);
         border-radius:var(--radius-l); box-shadow:var(--ten-panel); overflow:hidden}
  .arhiv .verh{display:flex; align-items:center; gap:var(--p-8);
        padding:11px var(--p-16); border-bottom:1px solid var(--granica);
        background:var(--fon2); font-family:var(--font-mono); font-size:var(--t-12);
        color:var(--tekst-mut)}
  .arhiv .verh b{color:var(--tekst); font-family:var(--font-body)}
  .arhiv .fajl{display:flex; gap:var(--p-12); align-items:flex-start;
        padding:11px var(--p-16); border-bottom:1px solid var(--fon3)}
  .arhiv .fajl:last-child{border-bottom:none}
  .arhiv .fajl svg{width:17px; height:17px; flex:none; margin-top:2px;
        stroke:var(--tekst-mut); fill:none; stroke-width:1.6; stroke-linecap:round;
        stroke-linejoin:round}
  .arhiv .fajl.glavnyj svg{stroke:var(--chern)}
  .arhiv .imya-f{font-family:var(--font-mono); font-size:var(--t-13);
        font-weight:600; word-break:break-word}
  .arhiv .fajl.glavnyj .imya-f{color:var(--chern)}
  .arhiv .chto-f{font-size:var(--t-13); color:var(--tekst-mut); line-height:1.5;
        margin-top:2px}
  .arhiv .ves{margin-left:auto; font-size:var(--t-12); color:var(--tekst-mut);
        white-space:nowrap; font-variant-numeric:tabular-nums}

  .shagi-ustanovki{list-style:none; margin:0; padding:0; counter-reset:ust}
  .shagi-ustanovki li{display:flex; gap:var(--p-16); padding:0 0 var(--p-20)}
  .shagi-ustanovki li:last-child{padding-bottom:0}
  .shagi-ustanovki .nom{flex:none; width:28px; height:28px; border-radius:50%;
        background:var(--chern); color:#fff; font-size:var(--t-13);
        display:flex; align-items:center; justify-content:center; margin-top:2px}
  .shagi-ustanovki h3{font-size:var(--t-16); margin-bottom:4px}
  .shagi-ustanovki p{color:var(--tekst-mut); font-size:var(--t-14); line-height:1.55}
  .shagi-ustanovki code{font-family:var(--font-mono); font-size:.92em;
        background:var(--fon3); padding:1px 5px; border-radius:6px;
        word-break:break-word}
  .predosterezhenie{display:flex; gap:var(--p-12); align-items:flex-start;
        margin-top:var(--p-16); padding:var(--p-12) var(--p-16);
        background:var(--limon); border:1px solid var(--limon-granica);
        border-radius:var(--radius-m); font-size:var(--t-13); line-height:1.55}
  .predosterezhenie svg{width:17px; height:17px; flex:none; margin-top:2px}

  .dve-karty{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
             gap:var(--p-20); margin-top:var(--p-32)}
  .spisok-da-net{list-style:none; margin:var(--p-12) 0 0; padding:0}
  .spisok-da-net li{display:flex; gap:var(--p-12); align-items:flex-start;
        padding:7px 0; font-size:var(--t-14)}
  .spisok-da-net svg{width:16px; height:16px; flex:none; margin-top:3px;
        fill:none; stroke-width:2.2}
  .spisok-da-net .da svg{stroke:var(--zelenyj)}
  .spisok-da-net .net svg{stroke:var(--krasnyj)}

  @media (max-width:900px){ .ustanovka{grid-template-columns:1fr} }

  /* ── Схема связки ───────────────────────────────────────────────── */
  .shema-obertka{background:var(--belyj); border:1px solid var(--granica);
        border-radius:var(--radius-l); box-shadow:var(--ten-panel);
        padding:var(--p-24); max-width:960px; margin:0 auto}
  .shema-shapochka{font-size:var(--t-12); color:var(--tekst-mut);
        text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--p-16)}
  .shema{width:100%; height:auto; display:block; font-family:var(--font-body)}
  .shema .uzel{fill:var(--fon2); stroke:var(--granica-sil); stroke-width:1}
  .shema .uzel-imya{fill:var(--tekst); font-size:15px; font-weight:600}
  .shema .uzel-po{fill:var(--tekst-mut); font-size:12px}
  .shema .liniya{stroke:#9AA3B0; stroke-width:1.4; fill:none}
  .shema .podpis{fill:var(--tekst-mut); font-size:12px}
  .shema .beda .liniya, .shema line.beda, .shema path.beda{stroke:var(--krasnyj);
        stroke-width:1.8; stroke-dasharray:6 5}
  .shema .podpis.beda{fill:var(--krasnyj); font-weight:600}
  .shema .uzel.beda{fill:var(--krasnyj-fon); stroke:#EBB7B7}
  .shema .znachok{fill:none; stroke:var(--tekst-mut); stroke-width:1.6;
        stroke-linecap:round; stroke-linejoin:round}

  /* Вертикальный путь - для телефона */
  .put{display:none; counter-reset:shagput}
  .put li{display:flex; gap:var(--p-12); padding:var(--p-12) 0;
          border-bottom:1px solid var(--granica); font-size:var(--t-14)}
  .put li:last-child{border-bottom:none}
  .put .nomerok{flex:none; width:26px; height:26px; border-radius:50%;
        background:var(--fon3); color:var(--tekst-mut); font-size:var(--t-12);
        display:flex; align-items:center; justify-content:center; margin-top:1px}
  .put li.beda .nomerok{background:var(--krasnyj-fon); color:var(--krasnyj)}
  .put b{font-weight:600}
  .put .chto{color:var(--tekst-mut); font-size:var(--t-13); margin-top:2px}
  @media (max-width:760px){
    .shema{display:none}
    .put{display:block; list-style:none; margin:0; padding:0}
    .shema-obertka{padding:var(--p-16)}
  }

  /* Лента доверия на месте логотипов клиентов */
  .lenta{padding:var(--p-40) var(--p-24); border-top:1px solid var(--granica)}
  .lenta .in{display:grid; gap:var(--p-24);
             grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
  .lenta .punkt{display:flex; gap:var(--p-12); align-items:flex-start}
  .lenta .punkt svg{width:19px; height:19px; stroke:var(--tekst-mut); flex:none;
                    margin-top:3px}
  .lenta .zn{font-family:var(--font-head); font-weight:600; font-size:var(--t-16)}
  .lenta .po{font-size:var(--t-13); color:var(--tekst-mut); line-height:1.5;
             margin-top:2px}

  /* ── Секции ─────────────────────────────────────────────────────── */
  .sekciya{padding:var(--p-120) var(--p-24)}
  .sekciya.seraya{background:var(--fon)}
  .shapka-sekcii{text-align:center; max-width:64ch; margin:0 auto var(--p-56)}
  .kicker{font-size:var(--t-14); font-weight:500; color:var(--siniy);
          margin-bottom:var(--p-12)}
  h2{font-size:clamp(26px, 3.2vw, var(--t-40)); line-height:1.15}
  .lid{font-size:var(--t-16); line-height:1.65; color:var(--tekst-mut);
       margin-top:var(--p-16)}
  .ogovorka{font-size:var(--t-13); color:var(--tekst-mut); line-height:1.55;
            max-width:76ch; margin:var(--p-32) auto 0; text-align:center}
  .ogovorka a{color:var(--siniy-temn); text-decoration:underline}

  /* Крупная карточка образца: светлая заливка, тонкая граница, без тени,
     а внутри - белая панель с кусочком интерфейса. */
  .karta{background:var(--fon2); border:1px solid var(--granica);
         border-radius:var(--radius-l); padding:var(--p-24);
         transition:border-color var(--bystro), background var(--bystro)}
  .karta:hover{border-color:var(--granica-sil); background:var(--belyj)}
  .karta h3{font-size:var(--t-20); margin-bottom:var(--p-8)}
  .karta p{color:var(--tekst-mut); font-size:var(--t-15); line-height:1.6}
  .setka2{display:grid; gap:var(--p-20);
          grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}

  /* Белая панель внутри карточки */
  .vnutri{background:var(--belyj); border:1px solid var(--granica);
          border-radius:var(--radius-m); box-shadow:var(--ten-panel);
          margin-top:var(--p-20); overflow:hidden}
  .vnutri .shapochka{padding:9px var(--p-16); border-bottom:1px solid var(--granica);
        font-size:var(--t-12); color:var(--tekst-mut); font-family:var(--font-mono)}
  .vnutri .telo{padding:var(--p-8) var(--p-16)}
  .vnutri .ryad{display:flex; align-items:center; gap:var(--p-12);
        padding:9px 0; font-size:var(--t-13); border-bottom:1px solid var(--fon3)}
  .vnutri .ryad:last-child{border-bottom:none}
  .vnutri .ryad .imya{flex:1; min-width:0; overflow:hidden;
        text-overflow:ellipsis; white-space:nowrap}
  .vnutri .ryad .znach{color:var(--tekst-mut); font-variant-numeric:tabular-nums;
        white-space:nowrap}

  /* Ошибки */
  .oshibki{display:grid; gap:var(--p-16);
           grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
  .oshibka{background:var(--fon2); border:1px solid var(--granica);
           border-radius:var(--radius-m); padding:var(--p-20);
           transition:border-color var(--bystro), background var(--bystro)}
  .oshibka:hover{border-color:var(--granica-sil); background:var(--belyj)}
  .oshibka .tekst{font-family:var(--font-mono); font-weight:600; font-size:var(--t-13);
                  margin-bottom:var(--p-8); line-height:1.45; color:var(--krasnyj)}
  .oshibka .prichina{font-size:var(--t-14); color:var(--tekst-mut); line-height:1.55}

  /* Нумерованная линия - приём образца в разделе Usecases */
  .shagi{max-width:940px; margin:0 auto; position:relative}
  .shagi::before{content:""; position:absolute; left:50%; top:20px; bottom:20px;
                 width:1px; background:var(--granica); transform:translateX(-50%)}
  .shag{display:grid; grid-template-columns:1fr 72px 1fr; gap:var(--p-24);
        align-items:center; margin-bottom:var(--p-56)}
  .shag:last-child{margin-bottom:0}
  .shag .nomer{grid-column:2; justify-self:center; width:40px; height:40px;
        border-radius:50%; background:var(--belyj); border:1px solid var(--granica);
        display:flex; align-items:center; justify-content:center;
        font-family:var(--font-head); font-size:var(--t-14); color:var(--tekst-mut);
        position:relative; z-index:1}
  .shag .tekst{grid-column:3}
  .shag:nth-child(even) .tekst{grid-column:1; text-align:right}
  .shag h3{font-size:var(--t-20); margin-bottom:var(--p-8)}
  .shag p{color:var(--tekst-mut); font-size:var(--t-15)}
  .shag .panelka{grid-column:1; background:var(--belyj); border:1px solid var(--granica);
        border-radius:var(--radius-m); box-shadow:var(--ten-panel); overflow:hidden}
  .shag:nth-child(even) .panelka{grid-column:3}
  .panelka .shapochka{padding:9px var(--p-16); border-bottom:1px solid var(--granica);
        font-size:var(--t-12); color:var(--tekst-mut); font-family:var(--font-mono)}
  .panelka .telo{padding:var(--p-16); font-size:var(--t-13); line-height:1.75;
        font-family:var(--font-mono); color:var(--tekst-mut)}
  .panelka .telo b{color:var(--tekst); font-family:var(--font-body); font-weight:600}

  /* 27 проверок */
  .spisok{display:grid; gap:0 var(--p-40); padding:0; list-style:none; margin:0;
          grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
  .spisok li{display:flex; gap:var(--p-12); align-items:flex-start;
             padding:var(--p-12) 0; border-bottom:1px solid var(--granica);
             font-size:var(--t-15)}
  .spisok svg{width:17px; height:17px; stroke:var(--zelenyj); flex:none; margin-top:4px}
  .spisok b{font-weight:600}

  /* ── Цены ───────────────────────────────────────────────────────── */
  .prays{display:flex; align-items:center; gap:var(--p-32); flex-wrap:wrap;
         padding:var(--p-32); background:var(--belyj); border:1px solid var(--granica);
         border-radius:var(--radius-l); box-shadow:var(--ten-panel)}
  .prays .cifra{font-family:var(--font-head); font-size:clamp(38px,4.6vw,56px);
        font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
        letter-spacing:-.04em}
  .prays .cifra small{display:block; font-size:var(--t-13); font-weight:400;
        color:var(--tekst-mut); margin-top:var(--p-8); letter-spacing:0;
        font-family:var(--font-body)}
  .prays .razdel{width:1px; align-self:stretch; background:var(--granica)}
  /* min() - на экране 320 список с отступами карточки не влезал в 280 px
     и расширял страницу на пиксель. */
  .prays .uslovia{flex:1; min-width:min(280px,100%); list-style:none; margin:0; padding:0}
  .prays .uslovia li{display:flex; gap:var(--p-12); align-items:flex-start;
        padding:7px 0; font-size:var(--t-14)}
  .prays .uslovia svg{width:16px; height:16px; stroke:var(--zelenyj); flex:none;
        margin-top:3px}
  .primery{display:grid; gap:var(--p-12); margin-top:var(--p-16);
           grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
  .primer{background:var(--fon2); border:1px solid var(--granica);
          border-radius:var(--radius-m); padding:var(--p-16) var(--p-20)}
  .primer.vydelen{background:var(--limon); border-color:var(--limon-granica)}
  .primer .nz{font-size:var(--t-12); color:var(--tekst-mut)}
  .primer.vydelen .nz{color:var(--chern)}
  .primer .zn{font-family:var(--font-head); font-size:var(--t-24); font-weight:600;
              margin-top:var(--p-4); font-variant-numeric:tabular-nums}
  .primer .zn small{font-size:var(--t-13); font-weight:400; color:var(--tekst-mut);
                    font-family:var(--font-body)}
  .primer.vydelen .zn small{color:var(--chern-myagkij)}
  .snoska{margin-top:var(--p-20); padding:var(--p-20); border-radius:var(--radius-m);
          background:var(--fon2); border:1px solid var(--granica);
          font-size:var(--t-14); color:var(--tekst-mut); line-height:1.6;
          max-width:80ch}
  .snoska b{color:var(--tekst)}
  .snoska a{color:var(--siniy-temn); text-decoration:underline}

  /* Переход к разбору ошибок: должен читаться как дверь, а не как сноска. */
  .perehod{display:flex; gap:var(--p-24); align-items:center; flex-wrap:wrap;
           margin-top:var(--p-32); padding:var(--p-24) var(--p-32);
           background:var(--belyj); border:1px solid var(--granica);
           border-radius:var(--radius-l); box-shadow:var(--ten-panel)}
  .perehod .tekst{flex:1; min-width:min(260px,100%)}
  .perehod h3{font-size:var(--t-20); margin-bottom:6px}
  .perehod p{color:var(--tekst-mut); font-size:var(--t-14); line-height:1.55}
  .perehod .knopka{flex:none}
  @media (max-width:560px){
    /* Надпись на кнопке неразрывна и требует 284 px: вместе с
       отступами блок не влезал в узкий экран и растягивал страницу. */
    .perehod{padding:var(--p-20) var(--p-16); gap:var(--p-16)}
    .perehod .knopka{width:100%; white-space:normal; text-align:center}
  }

  /* Расчёт по лестнице */
  .kalk{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
        gap:var(--p-24); margin-top:var(--p-20); align-items:stretch}
  .kalk-levo{background:var(--belyj); border:1px solid var(--granica);
             border-radius:var(--radius-l); padding:var(--p-32);
             box-shadow:var(--ten-panel)}
  .kalk-podpis{font-size:var(--t-13); color:var(--tekst-mut)}
  .kalk-chislo{display:flex; align-items:baseline; gap:var(--p-12);
               margin:var(--p-8) 0 var(--p-20)}
  .kalk-chislo .kass{font-family:var(--font-head); font-size:44px; font-weight:600;
                     line-height:1; font-variant-numeric:tabular-nums}
  .kalk-chislo .slovo{color:var(--tekst-mut)}
  .kalk input[type=range]{width:100%; accent-color:var(--chern); height:28px;
                          margin:0; display:block; touch-action:pan-y}
  /* На телефоне тянут пальцем: полосе нужна область в высоту пальца. */
  @media (max-width:700px){
    .kalk input[type=range]{height:44px}
  }
  .kalk-shkala{display:flex; justify-content:space-between; font-size:var(--t-12);
               color:var(--tekst-mut); margin-bottom:var(--p-24)}
  .kalk-itog{border-top:1px solid var(--granica); padding-top:var(--p-20);
             display:flex; align-items:flex-end; gap:var(--p-24); flex-wrap:wrap}
  .kalk-itog .summa{font-family:var(--font-head); font-size:34px; font-weight:600;
                    font-variant-numeric:tabular-nums; line-height:1}
  .kalk-itog .v-god{font-size:var(--t-13); color:var(--tekst-mut)}
  .kalk-itog .v-god b{color:var(--tekst); font-variant-numeric:tabular-nums}
  .stupeni{list-style:none; margin:0; padding:0}
  .stupeni li{display:flex; align-items:baseline; gap:var(--p-12);
              padding:var(--p-12) 0; border-bottom:1px solid var(--granica);
              font-size:var(--t-14)}
  .stupeni li:last-child{border-bottom:none}
  .stupeni li.tut{font-weight:600}
  .stupeni .skolko{margin-left:auto; font-variant-numeric:tabular-nums;
                   white-space:nowrap}
  .stupeni li.tut .skolko{color:var(--chern)}
  .stupeni .metka-tut{font-size:var(--t-12); background:var(--limon);
        border:1px solid var(--limon-granica); border-radius:var(--radius-krug);
        padding:2px var(--p-8); margin-left:var(--p-8)}
  @media (max-width:900px){ .kalk{grid-template-columns:1fr} }

  /* Вопросы */
  .voprosy{max-width:820px; margin:0 auto}
  .vopros{background:var(--fon2); border:1px solid var(--granica);
          border-radius:var(--radius-m); padding:0 var(--p-20); margin-bottom:var(--p-12)}
  .vopros summary{cursor:pointer; padding:var(--p-16) 0; font-weight:600;
          font-size:var(--t-16); font-family:var(--font-head); list-style:none;
          display:flex; gap:var(--p-12); align-items:center; justify-content:space-between}
  .vopros summary::-webkit-details-marker{display:none}
  .vopros summary::after{content:"+"; color:var(--tekst-mut); font-size:var(--t-20);
          font-weight:400; flex:none; line-height:1}
  .vopros[open] summary::after{content:"−"}
  .vopros p{margin:0 0 var(--p-16); color:var(--tekst-mut); font-size:var(--t-15)}

  /* ── Финал ──────────────────────────────────────────────────────── */
  .final{padding:var(--p-120) var(--p-24); text-align:center}
  .final h2{max-width:20ch; margin:0 auto}
  .final p{color:var(--tekst-mut); max-width:56ch; margin:var(--p-16) auto var(--p-32)}
  .svechenie{display:inline-block; border-radius:var(--radius-krug);
             box-shadow:0 0 0 12px rgba(255,246,153,.60)}

  /* ── Подвал ─────────────────────────────────────────────────────── */
  .podval{background:var(--fon3); padding:var(--p-56) var(--p-24) var(--p-32)}
  .podval-setka{display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:var(--p-32)}
  .podval p{color:var(--tekst-mut); font-size:var(--t-14); max-width:36ch;
            margin-top:var(--p-12)}
  .podval h3{font-size:var(--t-14); font-weight:600;
             margin-bottom:var(--p-12); font-family:var(--font-head)}
  .podval ul{list-style:none; margin:0; padding:0}
  .podval li{margin-bottom:var(--p-8)}
  .podval li a{color:var(--tekst-mut); font-size:var(--t-14)}
  .podval li a:hover{color:var(--tekst)}
  .polosa{margin-top:var(--p-40); color:var(--tekst-mut); font-size:var(--t-13);
          line-height:1.6}


  /* ── Экраны ─────────────────────────────────────────────────────── */
  @media (max-width:1100px){
    .shapka{padding:10px var(--p-16) 0}
    .shapka + .krugi{margin-top:-68px; padding-top:68px}
    .shapka.plotno{padding-top:6px}
    .menyu{display:none; position:absolute; top:calc(100% + 8px);
           left:var(--p-16); right:var(--p-16);
           flex-direction:column; gap:0; background:var(--belyj);
           border:1px solid rgba(23,25,28,.09); border-radius:var(--radius-l);
           padding:var(--p-8); box-shadow:0 16px 44px rgba(23,25,28,.16)}
    #men:checked ~ .in .menyu{display:flex}
    .menyu a{padding:var(--p-12); font-size:var(--t-16); border-radius:var(--radius-s)}
    .burger{display:flex}
    .knopki{margin-left:auto}
    .knopki .k-tihaya{display:none}
    .menyu .v-menyu{display:none}
    .stroki{grid-template-columns:1fr}
    .podval-setka{grid-template-columns:1fr 1fr}
    .sekciya{padding:var(--p-96) var(--p-24)}
  }
  @media (max-width:700px){
    .shagi::before{display:none}
    .shag{grid-template-columns:1fr; gap:var(--p-12)}
    .shag .tekst, .shag:nth-child(even) .tekst{grid-column:1; text-align:left}
    .shag .nomer{grid-column:1; justify-self:start}
    .shag .panelka, .shag:nth-child(even) .panelka{grid-column:1}
    .sekciya{padding:var(--p-72) var(--p-16)}
    .geroy{padding:var(--p-40) var(--p-16) var(--p-72)}
    .final{padding:var(--p-72) var(--p-16)}
    .pad{padding-left:var(--p-16); padding-right:var(--p-16)}
    .prays{padding:var(--p-24)}
    .prays .razdel{display:none}
    .podval-setka{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .knopki .k-temnaya{display:none}
    .menyu .v-menyu{display:inline-flex; margin-top:var(--p-8)}
  }