@layer components, layout;

@layer components{
/* ============================================================
   ВНЕДРЕНО — минимализм на белом
   ============================================================ */

   :root{
    --ink:#0a0a0a; --ink-70:#4a4a4a; --ink-45:#8a8a8a; --ink-25:#c4c4c4;
    --line:#e9e9e7; --line-2:#d8d8d5; --paper:#fff; --paper-2:#fafaf9;
    --ok:#1c6b45; --warn:#8a6a20; --bad:#9b2f2f;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    --mono:"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
    --gap:clamp(22px,5vw,64px); --max:1320px; --hdr:68px;
    --e:cubic-bezier(.22,1,.36,1);
  }
  
  *,*::before,*::after{box-sizing:border-box}
  
  /* защита от горизонтального выезда — корень всех бед */
  html,body{max-width:100%;overflow-x:clip}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 20px);-webkit-text-size-adjust:100%}
  
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
    font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
    font-feature-settings:"liga" 1,"kern" 1;text-rendering:optimizeLegibility}
  body.lock{overflow:hidden}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--ink);color:#fff}
  
  /* ---------- сетка ---------- */
  
  .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gap)}
  .section{padding:clamp(56px,10vw,156px) 0;border-top:1px solid var(--line)}
  .section--tight{padding:clamp(44px,7vw,104px) 0}
  
  .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
  .grid > *{min-width:0}
  
  /* span пишем в END, иначе .off* затирает ширину */
  .sp3{grid-column-end:span 3}
  .sp4{grid-column-end:span 4}
  .sp5{grid-column-end:span 5}
  .sp6{grid-column-end:span 6}
  .sp7{grid-column-end:span 7}
  .sp8{grid-column-end:span 8}
  .off2{grid-column-start:2}
  .off6{grid-column-start:6}
  .off7{grid-column-start:7}
  .off8{grid-column-start:8}
  
  /* ---------- типографика ---------- */
  
  .display{font-size:clamp(38px,7.6vw,118px);line-height:.96;letter-spacing:-.042em;
    font-weight:500;margin:0;overflow-wrap:break-word;hyphens:manual}
  .display--s{font-size:clamp(34px,6vw,86px)}
  h2.title{font-size:clamp(26px,4vw,52px);line-height:1.06;letter-spacing:-.033em;
    font-weight:500;margin:0 0 26px;text-wrap:balance;overflow-wrap:break-word}
  h3{font-size:19px;letter-spacing:-.02em;font-weight:550;margin:0 0 10px;text-wrap:balance}
  .lead{font-size:clamp(17px,1.7vw,22px);line-height:1.5;letter-spacing:-.015em;color:var(--ink-70);margin:0}
  p{margin:0 0 16px;text-wrap:pretty}
  .muted{color:var(--ink-70)}
  .small{font-size:13.5px;color:var(--ink-45)}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-45);margin:0 0 22px;display:flex;align-items:center;gap:12px}
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
  .mark{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45)}
  .mark--live{display:inline-flex;align-items:center;gap:9px}
  .mark--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2.4s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
  
  /* ---------- шапка ---------- */
  
  .hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
    backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .35s var(--e)}
  .hdr.scrolled{border-bottom-color:var(--line)}
  .hdr__in{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:20px}
  .logo{font-size:17px;font-weight:600;letter-spacing:-.035em;display:flex;align-items:baseline;gap:9px;white-space:nowrap}
  .logo span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-45);text-transform:uppercase}
  .nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px)}
  .nav a{font-size:14.5px;color:var(--ink-70);position:relative;padding:4px 0;white-space:nowrap;transition:color .25s var(--e)}
  .nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
    transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e)}
  .nav a:hover{color:var(--ink)}
  .nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav a.on{color:var(--ink)}
  .nav a.on::after{transform:scaleX(1)}
  .nav .ext{color:var(--ink-45)}
  .nav .ext sup{font-size:9px;margin-left:3px}
  .burger{display:none;background:none;border:0;padding:8px;margin-right:-8px;cursor:pointer}
  .burger i{display:block;width:20px;height:1.5px;background:var(--ink);margin:4px 0}
  
  /* ---------- герой ---------- */
  
  .hero{padding-block:clamp(44px,9vw,168px) clamp(36px,6vw,92px)}
  .hero .mark{margin-bottom:clamp(22px,4vw,54px)}
  .hero__sub{margin-top:clamp(22px,3.4vw,46px);max-width:660px}
  
  /* ---------- кнопки ---------- */
  
  .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 24px;
    border:1px solid var(--ink);border-radius:999px;font-size:14.5px;letter-spacing:-.01em;
    background:transparent;color:var(--ink);cursor:pointer;font-family:var(--sans);white-space:nowrap;
    transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e)}
  .btn:hover{background:var(--ink);color:#fff}
  .btn--fill{background:var(--ink);color:#fff}
  .btn--fill:hover{background:#2b2b2b;border-color:#2b2b2b}
  .btn--ghost{border-color:var(--line-2);color:var(--ink-70)}
  .btn--ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
  .btn i{font-style:normal;transition:transform .35s var(--e)}
  .btn:hover i{transform:translateX(3px)}
  .go{font-size:13.5px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap;cursor:pointer}
  .go::after{content:"→";transition:transform .35s var(--e)}
  .go:hover::after{transform:translateX(4px)}
  
  /* ---------- счётчики ---------- */
  
  .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
  .stat{padding:30px 28px 0 0;min-width:0}
  .stat + .stat{border-left:1px solid var(--line);padding-left:28px}
  .stat__n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(28px,4.2vw,52px);
    letter-spacing:-.045em;line-height:1;display:block}
  .stat__l{font-size:12.5px;color:var(--ink-45);margin-top:10px;max-width:180px}
  .stat--ok .stat__n{color:var(--ok)}
  .stat--bad .stat__n{color:var(--bad)}
  
  /* ---------- направления ---------- */
  
  .dirs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
  .dir{padding:34px 30px 34px 0;min-width:0;transition:background .4s var(--e)}
  .dir + .dir{border-left:1px solid var(--line);padding-left:30px}
  .dir:hover{background:var(--paper-2)}
  .dir__i{font-family:var(--mono);font-size:11px;color:var(--ink-25);display:block;margin-bottom:44px}
  .dir p{font-size:14.5px;color:var(--ink-70);margin:0 0 18px}
  
  /* ---------- легенда статусов ---------- */
  
  .legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
  .legend > div{padding:28px 32px 30px 0;min-width:0;display:flex;flex-direction:column;gap:14px}
  .legend > div + div{border-left:1px solid var(--line);padding-left:32px}
  .legend > div .pill{align-self:flex-start}
  .legend p{font-size:13.5px;line-height:1.5;color:var(--ink-70);margin:0}
  
  /* ---------- таблица ---------- */
  
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gap) * -1);padding-inline:var(--gap)}
  table.tbl{width:100%;border-collapse:collapse;min-width:900px}
  .tbl thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ink-45);font-weight:400;text-align:left;padding:0 18px 14px 0;
    border-bottom:1px solid var(--ink);white-space:nowrap}
  .tbl tbody td{padding:20px 18px 20px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:14.5px}
  .tbl tbody tr{transition:background .25s var(--e)}
  .tbl tbody tr:hover{background:var(--paper-2)}
  .c-co{font-weight:550;letter-spacing:-.015em;width:21%}
  .c-pr{color:var(--ink-70);width:27%}
  .c-yr{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-45);width:9%}
  .c-ef{width:24%}
  .c-st{width:16%}
  .sub{display:block;font-size:12.5px;color:var(--ink-45);margin-top:5px}
  .pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap;line-height:1.2}
  .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
  .pill.ok{color:var(--ok)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}.pill.gray{color:var(--ink-45)}
  .strike{text-decoration:line-through;color:var(--ink-45)}
  .tbl-note{margin-top:22px;font-size:12.5px;color:var(--ink-45);display:flex;
    justify-content:space-between;gap:16px;flex-wrap:wrap}
  
  .fade{position:relative}
  .fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 82%)}
  
  /* ---------- вкладки ---------- */
  
  .tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:32px;flex-wrap:wrap}
  .tabs button{background:none;border:0;padding:0 0 15px;font-family:var(--sans);font-size:15px;
    color:var(--ink-45);border-bottom:1px solid transparent;margin-bottom:-1px;cursor:pointer;
    white-space:nowrap;transition:.3s var(--e)}
  .tabs button.on,.tabs button:hover{color:var(--ink);border-bottom-color:var(--ink)}
  
  /* ---------- тариф ---------- */
  
  .plan{border:1px solid var(--line);padding:clamp(24px,3.4vw,44px);margin-top:32px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:end;
    transition:border-color .45s var(--e)}
  .plan:hover{border-color:var(--ink)}
  .plan h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.03em;font-weight:500;margin:14px 0 12px}
  .plan ul{list-style:none;padding:0;margin:0;max-width:560px}
  .plan li{font-size:14px;color:var(--ink-70);padding:7px 0 7px 18px;position:relative}
  .plan li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--ink-25)}
  .plan__r{text-align:right}
  .plan__p{font-family:var(--mono);font-variant-numeric:tabular-nums;
    font-size:clamp(26px,3.4vw,46px);letter-spacing:-.045em;line-height:1;white-space:nowrap}
  .plan__u{font-size:12.5px;color:var(--ink-45);margin:10px 0 20px}
  
  /* ---------- обложка ---------- */
  
  .report{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,6vw,96px);align-items:start}
  .cover{aspect-ratio:3/4;border:1px solid var(--line);padding:clamp(22px,3.2vw,44px);
    display:flex;flex-direction:column;justify-content:space-between;background:#fff;
    transition:box-shadow .5s var(--e),transform .5s var(--e)}
  .cover:hover{box-shadow:0 26px 70px -28px rgba(0,0,0,.2);transform:translateY(-4px)}
  .cover--soon{border-style:dashed;color:var(--ink-45)}
  .cover__t{font-size:clamp(21px,2.6vw,36px);line-height:1.05;letter-spacing:-.035em;font-weight:500}
  .cover__b{font-size:12.5px;color:var(--ink-45);display:flex;justify-content:space-between;
    border-top:1px solid var(--line);padding-top:16px}
  .toc{list-style:none;padding:0;margin:0 0 30px}
  .toc li{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-70)}
  .toc li b{font-family:var(--mono);font-size:11px;color:var(--ink-25);padding-top:3px;font-weight:400}
  
  /* ---------- видео ---------- */
  
  .vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,32px)}
  .vids > *{min-width:0}
  .vid__th{aspect-ratio:16/10;background:var(--paper-2);border:1px solid var(--line);
    position:relative;overflow:hidden;transition:border-color .4s var(--e)}
  .vid:hover .vid__th{border-color:var(--ink)}
  .vid__th::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
    border:1px solid var(--ink-25);border-radius:50%;transition:.45s var(--e)}
  .vid__th::before{content:"";position:absolute;left:50%;top:50%;margin:-5px 0 0 -3px;z-index:2;
    border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
  .vid:hover .vid__th::after{border-color:var(--ink);transform:scale(1.12)}
  .vid__n{font-family:var(--mono);font-size:10.5px;color:var(--ink-45);letter-spacing:.1em;margin:18px 0 8px}
  .vid__t{font-size:17.5px;letter-spacing:-.02em;font-weight:500;line-height:1.25;margin:0 0 8px;overflow-wrap:break-word}
  .vid__m{font-size:13px;color:var(--ink-45)}
  
  /* ---------- услуги ---------- */
  
  .srv{border-top:1px solid var(--line)}
  .srv__row{display:grid;grid-template-columns:56px minmax(0,1.05fr) minmax(0,1.7fr) auto;
    gap:28px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--line);transition:.4s var(--e)}
  .srv__row:hover{padding-left:10px;background:linear-gradient(90deg,var(--paper-2),transparent 70%)}
  .srv__i{font-family:var(--mono);font-size:11px;color:var(--ink-25)}
  .srv__t{font-size:clamp(19px,2vw,26px);letter-spacing:-.028em;font-weight:500}
  .srv__d{font-size:14.5px;color:var(--ink-70)}
  .srv__p{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(17px,1.7vw,21px);
    letter-spacing:-.035em;white-space:nowrap;text-align:right}
  .srv__p span{display:block;font-size:11.5px;letter-spacing:.08em;color:var(--ink-45);
    margin-top:6px;text-transform:uppercase}
  
  /* ---------- шаги ---------- */
  
  .steps{border-top:1px solid var(--line)}
  .step{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.6fr);gap:28px;
    padding:28px 0;border-bottom:1px solid var(--line)}
  .step__i{font-family:var(--mono);font-size:11px;color:var(--ink-25)}
  .step__t{font-size:17px;letter-spacing:-.02em;font-weight:550}
  .step__d{font-size:14.5px;color:var(--ink-70)}
  
  /* ---------- цитата ---------- */
  
  .quote{font-size:clamp(21px,3vw,40px);line-height:1.2;letter-spacing:-.032em;
    font-weight:400;max-width:18ch;margin:0;text-wrap:balance}
  
  /* ---------- баннер Вестника ---------- */
  
  .vestnik{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center;
    padding:28px 32px;border:1px solid var(--line);transition:.45s var(--e)}
  .vestnik:hover{border-color:var(--ink)}
  .vestnik__t{font-size:17px;letter-spacing:-.02em}
  .vestnik__t span{color:var(--ink-45)}
  
  /* ---------- формы ---------- */
  
  .inp{height:46px;border:1px solid var(--line-2);border-radius:999px;padding:0 20px;font-family:var(--sans);
    font-size:16px;color:var(--ink);background:#fff;outline:none;width:100%;transition:border-color .3s var(--e)}
  .inp:focus{border-color:var(--ink)}
  select.inp{cursor:pointer;appearance:none;padding-right:44px;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-45) 50%),linear-gradient(135deg,var(--ink-45) 50%,transparent 50%);
    background-position:calc(100% - 22px) 21px,calc(100% - 17px) 21px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .f-stack{display:flex;flex-direction:column;gap:10px}
  .form{display:flex;gap:10px;flex-wrap:wrap}
  .form .inp{flex:1 1 230px;min-width:0}
  .form__note{font-size:12.5px;color:var(--ink-45);margin-top:14px}
  .form__ok{font-size:14.5px;color:var(--ok);margin-top:14px;display:none}
  
  /* ---------- попап ---------- */
  
  .modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
    padding:20px;opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility .35s}
  .modal.open{opacity:1;visibility:visible}
  .modal__bg{position:absolute;inset:0;background:rgba(10,10,10,.32);backdrop-filter:blur(3px)}
  .modal__box{position:relative;background:#fff;border:1px solid var(--line);width:100%;max-width:520px;
    padding:clamp(26px,4vw,48px);transform:translateY(14px) scale(.985);
    transition:transform .45s var(--e);max-height:90vh;overflow:auto}
  .modal.open .modal__box{transform:none}
  .modal__x{position:absolute;top:16px;right:18px;background:none;border:0;font-size:24px;line-height:1;
    color:var(--ink-45);cursor:pointer;padding:8px;transition:color .25s var(--e)}
  .modal__x:hover{color:var(--ink)}
  .modal h3{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.03em;font-weight:500;margin:16px 0 10px}
  .modal .req{font-size:13px;color:var(--ink-45);margin:0 0 22px}
  .modal .btn{width:100%;margin-top:6px}
  
  /* ---------- появление ---------- */
  
  .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e),transform .9s var(--e)}
  .rv.in{opacity:1;transform:none}
  .rv[data-d="1"]{transition-delay:.07s}
  .rv[data-d="2"]{transition-delay:.14s}
  .rv[data-d="3"]{transition-delay:.21s}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
  
  /* ---------- подвал ---------- */
  
  .ftr{border-top:1px solid var(--ink);padding:clamp(44px,6vw,84px) 0 32px}
  .ftr__grid{display:grid;grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    gap:32px;margin-bottom:56px}
  .ftr__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-45);margin-bottom:18px}
  .ftr__l{list-style:none;padding:0;margin:0}
  .ftr__l li{margin-bottom:11px}
  .ftr__l a{font-size:14.5px;color:var(--ink-70);transition:color .25s var(--e)}
  .ftr__l a:hover{color:var(--ink)}
  .ftr__big{font-size:clamp(28px,4.6vw,62px);letter-spacing:-.045em;font-weight:500;line-height:1}
  .ftr__bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;
    border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-45);margin-top:32px}
  
  /* ============================================================
     АДАПТИВ
     ============================================================ */
  
  @media (max-width:1180px){
    .stat__l{max-width:none}
    .legend > div{padding-right:24px}
    .legend > div + div{padding-left:24px}
  }
  
  /* планшет и узкий ноутбук */
  @media (max-width:1024px){
    /* сначала сброс сдвигов, потом ширина — порядок критичен */
    .off2,.off6,.off7,.off8{grid-column-start:auto}
    .sp3,.sp4,.sp5,.sp6,.sp7,.sp8{grid-column:1 / -1}
  
    /* инлайновые max-width из HTML не должны оставлять пустоту справа */
    .lead[style],.hero__sub{max-width:74ch !important}
  
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .stat{padding:26px 24px 26px 0;border-top:1px solid var(--line)}
    .stat:nth-child(-n+2){border-top:0}
    .stat + .stat{border-left:0;padding-left:0}
    .stat:nth-child(2n){padding-left:24px;border-left:1px solid var(--line)}
  
    .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
    .legend > div{padding:26px 26px 28px 0;border-top:1px solid var(--line)}
    .legend > div:nth-child(-n+2){border-top:0}
    .legend > div + div{border-left:0;padding-left:0}
    .legend > div:nth-child(2n){padding-left:26px;border-left:1px solid var(--line)}
  
    .dirs{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dir{border-top:1px solid var(--line);padding-right:26px}
    .dir:nth-child(-n+2){border-top:0}
    .dir + .dir{border-left:0;padding-left:0}
    .dir:nth-child(2n){padding-left:26px;border-left:1px solid var(--line)}
  
    .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
    .report{grid-template-columns:1fr}
    .cover{max-width:360px}
    .ftr__grid{grid-template-columns:1fr 1fr}
  
    .plan{grid-template-columns:1fr;gap:26px;align-items:start}
    .plan__r{text-align:left}
  
    .srv__row,.step{grid-template-columns:40px minmax(0,1fr);gap:12px 16px}
    .srv__d,.step__d{grid-column:2}
    .srv__p{grid-column:2;text-align:left;margin-top:2px}
    .srv__p span{display:inline;margin-left:10px;text-transform:none;letter-spacing:0}
  }
  
  /* мобильный: главный набор правок */
  @media (max-width:720px){
    :root{--gap:22px}
  
    .nav{display:none}
    .nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:20px;position:absolute;
      top:var(--hdr);left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
      padding:24px var(--gap) 30px}
    .burger{display:block}
  
    /* меньше мёртвого воздуха под липкой шапкой */
    .hero{padding-block:36px 32px}
    .section{padding:52px 0}
    .section--tight{padding:42px 0}
    .wrap[style]{padding-top:36px !important;padding-bottom:52px !important}
  
    .lead[style],.hero__sub,.small[style]{max-width:none !important}
  
    /* кнопки: главная во всю ширину, остальные ровной парой */
    .cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
    .cta > *{width:100%;padding:0 14px}
    .cta > *:first-child{grid-column:1 / -1}
    .cta > *:only-child{grid-column:1 / -1}
  
    /* всё в одну колонку, разделители только сверху */
    .stats,.legend,.dirs,.vids,.ftr__grid{grid-template-columns:1fr}
    .stat,.legend > div,.dir{border-left:0 !important;padding-left:0 ;
      padding-right:0;border-top:1px solid var(--line)}
    .stat:first-child,.legend > div:first-child,.dir:first-child{border-top:0}
    .stat{padding-top:22px;padding-bottom:22px}
    .dir{padding:28px 0}
    .dir__i{margin-bottom:22px}
  
    .tabs{gap:18px}
    .tbl-note{flex-direction:column;gap:10px}
    .vestnik{grid-template-columns:1fr;gap:14px;padding:22px}
    .quote{max-width:none}
    .cover{max-width:none}
    .step{grid-template-columns:32px minmax(0,1fr);gap:8px 12px;padding:22px 0}
    .plan{padding:24px 20px}
    .form .inp{flex:1 1 100%}
    .ftr__bot{flex-direction:column;gap:8px}
  }
  
  @media (max-width:380px){
    .cta{grid-template-columns:1fr}
    .cta > *{grid-column:auto !important}
  }


/* ============================================================
   ЖИВЫЕ ДАННЫЕ: скелетоны, пустые состояния, ошибки формы
   ============================================================ */

.skel{display:block;height:14px;width:100%;border-radius:3px;
  background:linear-gradient(90deg,#f2f2f0 25%,#e9e9e7 37%,#f2f2f0 63%);
  background-size:400% 100%;animation:shine 1.4s ease infinite}
.skel-card{aspect-ratio:16/10;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(90deg,#fafaf9 25%,#f2f2f0 37%,#fafaf9 63%);
  background-size:400% 100%;animation:shine 1.4s ease infinite}
.skel-cover{aspect-ratio:3/4;border:1px solid var(--line);
  background:linear-gradient(90deg,#fafaf9 25%,#f2f2f0 37%,#fafaf9 63%);
  background-size:400% 100%;animation:shine 1.4s ease infinite}
@keyframes shine{0%{background-position:100% 50%}100%{background-position:0 50%}}

.empty{color:var(--ink-45);font-size:14.5px;padding:26px 0;text-align:left}
.empty--box{border:1px dashed var(--line-2);padding:34px 26px;
  text-align:center;grid-column:1 / -1}

.src{font-family:var(--mono);font-size:11px;color:#1e4f8a;
  border-bottom:1px solid #cddcec}
.src:hover{color:var(--ink);border-bottom-color:var(--ink)}

.form__err{font-size:13.5px;color:var(--bad);margin-top:12px;display:none}

.tbl tbody td .muted{color:var(--ink-25)}

@media (prefers-reduced-motion:reduce){
  .skel,.skel-card,.skel-cover{animation:none;background:var(--paper-2)}
}
/* ============================================================
   МОБИЛЬНЫЕ ФИКСЫ: overflow, воздух, таблица → карточки
   ============================================================ */

/* overflow-x:clip не везде работает — дублируем hidden и 100vw */
html,body{overflow-x:clip;max-width:100%}#hdr,.hdr,.section,.grid,.stats,.dirs,.vids,.srv,.steps,.plan,.ftr__grid{
  max-width:100%}

/* ---------- до 1024px: убрать мёртвый воздух от инлайновых padding ---------- */
@media (max-width:1024px){
  .wrap[style*="clamp(56px"],
  .wrap[style*="clamp(60px"],
  .wrap[style*="clamp(70px"]{
    padding-top:32px !important;
    padding-bottom:44px !important;
  }
  .hero{padding-top:32px !important}
  .lead[style],.small[style],.hero__sub{max-width:100% !important}
  h1.display,h1.display--s{margin-top:14px !important}
}

/* ---------- до 900px: таблица становится карточками ---------- */
@media (max-width:900px){
  .tbl-wrap{overflow:visible;margin-inline:0;padding-inline:0}
  .fade::after{display:none}

  table.tbl{min-width:0;width:100%;display:block;border-collapse:separate}
  .tbl thead{display:none}
  .tbl tbody{display:block}

  .tbl tbody tr{
    display:block;
    border:1px solid var(--line);
    border-radius:2px;
    padding:18px 18px 8px;
    margin-bottom:12px;
    background:#fff;
  }
  .tbl tbody tr:hover{background:#fff}

  .tbl tbody td{
    display:block;
    width:auto !important;
    border:0;
    padding:0 0 12px;
    font-size:15px;
    max-width:none;
  }
  .tbl tbody td:empty{display:none}

  /* подпись поля из data-label */
  .tbl tbody td[data-label]::before{
    content:attr(data-label);
    display:block;
    font:400 9.5px var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-45);
    margin-bottom:5px;
  }

  /* компания — заголовок карточки, без подписи */
  .tbl tbody td.c-co{
    font-size:17px;
    font-weight:600;
    letter-spacing:-.02em;
    padding-bottom:14px;
    margin-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .tbl tbody td.c-co::before{display:none}

  /* год и статус в одну строку внизу */
  .tbl tbody td.c-yr,.tbl tbody td.c-st{
    display:inline-block;
    vertical-align:top;
    padding-right:26px;
    padding-bottom:14px;
  }
  .tbl tbody td.c-st{padding-right:0}

  .tbl .sub{font-size:12.5px;margin-top:4px}
  .tbl-note{flex-direction:column;gap:8px;align-items:flex-start}

  /* вкладки с длинными подписями */
  .tabs{gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{font-size:14px;padding-bottom:13px}

  /* тариф */
  .plan{grid-template-columns:1fr;gap:22px;padding:22px 20px;align-items:start}
  .plan__r{text-align:left}
  .plan__p{font-size:30px}
  .plan ul{max-width:none}
  .plan .btn{width:100%;justify-content:center}
}

/* ---------- до 720px: остальное ---------- */
@media (max-width:720px){
  :root{--hdr:60px}
  .hdr__in{height:60px}
  .logo{font-size:16px}
  .logo span{display:none}

  .hero{padding-block:26px 28px}
  .hero .mark{margin-bottom:18px}
  .display{font-size:clamp(32px,10vw,46px);letter-spacing:-.035em}
  .display--s{font-size:clamp(30px,9vw,42px)}
  h2.title{font-size:clamp(23px,6.4vw,32px);margin-bottom:20px}
  .lead{font-size:16.5px}
  .section{padding:44px 0}
  .section--tight{padding:36px 0}
  .eyebrow{margin-bottom:18px}

  .quote{font-size:24px;max-width:none}
  .vestnik{grid-template-columns:1fr;gap:14px;padding:20px}
  .vestnik .btn{width:100%;justify-content:center}
  .cover{max-width:none;aspect-ratio:4/3}
  .cover__t{font-size:24px}
  .report{gap:26px}
  .toc li{padding:11px 0;font-size:14px}

  .srv__p{font-size:19px}
  .modal{padding:14px;align-items:flex-start}
  .modal__box{padding:24px 20px;max-height:94vh}
  .modal h3{font-size:21px}

  .ftr{padding:36px 0 26px}
  .ftr__grid{gap:26px;margin-bottom:32px}
  .ftr__big{font-size:34px}

  .empty--box{padding:26px 18px;font-size:14px}
}

@media (max-width:420px){
  .display{font-size:30px}
  .display--s{font-size:28px}
  .tbl tbody tr{padding:15px 15px 6px}
  .tbl tbody td.c-yr{padding-right:18px}
  .plan__p{font-size:26px}
}
}

@layer layout{
  .wrap{
    width:100%;
    max-width:var(--max,1320px);
    margin-inline:auto;
    padding-inline:var(--gap,clamp(22px,5vw,64px));
  }
  .wrap--flush{padding-inline:0}
  .wrap--wide{max-width:none}
}

@layer layout{
  @media (max-width:720px){
    .stats,.legend,.dirs{grid-template-columns:1fr}
    .stat,.legend>div,.dir,
    .stat:nth-child(2n),.legend>div:nth-child(2n),.dir:nth-child(2n){
      padding-left:0;
      padding-right:0;
      margin-inline:0;
      border-left:0;
      border-right:0;
    }
  }
}