@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:400;font-display:swap;src:url(../font/hind-siliguri-400-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:400;font-display:swap;src:url(../font/hind-siliguri-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:400;font-display:swap;src:url(../font/hind-siliguri-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:600;font-display:swap;src:url(../font/hind-siliguri-600-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:600;font-display:swap;src:url(../font/hind-siliguri-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:600;font-display:swap;src:url(../font/hind-siliguri-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Tiro Bangla";font-style:normal;font-weight:400;font-display:swap;src:url(../font/tiro-bangla-400-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Tiro Bangla";font-style:normal;font-weight:400;font-display:swap;src:url(../font/tiro-bangla-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Tiro Bangla";font-style:normal;font-weight:400;font-display:swap;src:url(../font/tiro-bangla-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#f7f3e8; --paper2:#fffdf7; --card:#ffffff; --ink:#16243f; --ink2:#4a5a78;
  --line:rgba(22,36,63,.14); --red:#c8372c; --grass:#2f7d4f; --ochre:#d9a227;
  --sky:#2e6bb8; --dark:#12203a;
  --disp:"Tiro Bangla","Nirmala UI","Noto Serif Bengali",Georgia,serif;
  --body:"Hind Siliguri","Nirmala UI","Noto Sans Bengali","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,monospace;
  --r1:8px; --r2:14px; --r3:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; color:var(--ink); background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Cg fill=%22none%22 stroke=%22%2316243f%22 stroke-opacity=%22.10%22 stroke-width=%221%22%3E%3Cpath d=%22M0 .5H28 M.5 0V28%22/%3E%3C/g%3E%3C/svg%3E") repeat;
  font:400 clamp(16px,.35vw + 15px,18px)/1.75 var(--body)}
img{max-width:100%; height:auto; display:block}
a{color:#1d5fa8; text-decoration:underline; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--ochre);
  outline-offset:3px; border-radius:6px}
/* Разрядка рвёт верхнюю черту бенгальского (মাত্রা): базово её нет,
   включаем только на латинской подписи (класс `.lat`). Отрицательная
   разрядка на крупных заголовках вреда не наносит. */
body{letter-spacing:normal}
.lat{letter-spacing:.1em}
.lb{text-transform:lowercase !important}
.wrap{max-width:1220px; margin:0 auto; padding:0 clamp(16px,3vw,32px)}
.skip{position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:8px; z-index:99}
.skip:focus{left:12px}
h1,h2,h3{font-family:var(--disp); font-weight:400; line-height:1.2; margin:0 0 .5em}
/* <b> по умолчанию просит 700, и браузер тянул третье начертание Hind
   Siliguri (~96 КБ бенгальской подрезки) ради жирных подписей. 600
   выглядит так же и уже загружено. */
b,strong{font-weight:600}

/* шапка ------------------------------------------------------------------- */
.top{position:-webkit-sticky; position:sticky; top:0; z-index:30; background:var(--ink);
  color:var(--paper)}
/* Строка шапки не переносится: раньше кнопка «lilbet-এ যান» уезжала на
   вторую строку и висела под тёмной полосой. Меню сжимается и прокручивается
   (края растушёваны), кнопка и знак не сжимаются никогда. */
/* padding пишем полностью: короткая запись `8px 0` затирала боковые поля
   от `.wrap`, и знак со кнопкой упирались в края экрана до 1284 px */
.top__in{display:flex; align-items:center; gap:12px 14px; min-height:64px; flex-wrap:nowrap;
  padding:8px clamp(16px,3vw,32px)}
.top__in>.mark,.top__in>.btn{flex:0 0 auto}
.top__in>.menu{flex:1 1 auto; min-width:0}
.mark{display:flex; align-items:center; gap:11px; color:var(--paper); text-decoration:none;
  margin-right:auto}
.mark svg{width:40px; height:40px; flex:none}
.mark__t b{display:block; font:400 22px/1 var(--disp)}
.mark__t span{display:block; margin-top:2px; font:600 11px/1.2 var(--mono);
  color:var(--ochre)}
/* Меню на телефоне прокручивается вбок, и край растушёван: без этого
   пункт обрезается посреди слова и выглядит обрубком, а не намёком. */
.menu{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; max-width:100%;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,
    #000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,
    #000 calc(100% - 18px),transparent 100%)}
.menu::-webkit-scrollbar{display:none}
.menu a{color:#cfd8e8; text-decoration:none; font-size:15px; padding:7px 10px;
  border-radius:8px; white-space:nowrap}
.menu a:hover,.menu a[aria-current]{color:var(--paper); background:rgba(247,243,232,.14)}
.prog{height:3px; background:rgba(247,243,232,.14)}
.prog i{display:block; width:0; height:100%;
  background:linear-gradient(90deg,var(--ochre),var(--red))}

/* кнопки ------------------------------------------------------------------ */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px;
  padding:12px 24px; border-radius:10px; font:600 17px/1.2 var(--body); color:var(--paper);
  text-decoration:none; background:var(--ink); box-shadow:0 3px 0 rgba(22,36,63,.35);
  transition:transform .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-2px); text-decoration:none;
  box-shadow:0 6px 0 rgba(22,36,63,.3)}
.btn--go{background:linear-gradient(180deg,#e2a92f,#cf8f16); color:#22180a;
  box-shadow:0 3px 0 #a5710f}
.btn--go:hover{box-shadow:0 6px 0 #a5710f}
.btn--sm{min-height:40px; padding:8px 15px; font-size:15px}
.btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{background:rgba(22,36,63,.06); box-shadow:inset 0 0 0 2px var(--ink)}
/* в шапке фон тёмный: чернильная кнопка на нём была не видна вовсе
   (контраст 1.0) — на служебных страницах кнопка просто исчезала */
.top .btn--ghost{color:var(--paper); box-shadow:inset 0 0 0 2px rgba(247,243,232,.6)}
.top .btn--ghost:hover{background:rgba(247,243,232,.12);
  box-shadow:inset 0 0 0 2px var(--paper)}
.btn__note{font-size:14px; color:var(--ink2)}

/* крошки и герой ---------------------------------------------------------- */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px;
  color:var(--ink2); padding-top:6px}
/* Палец на телефоне: у крошки должна быть своя площадь. Без padding ссылка
   занимала 36x24 и была самым мелким элементом навигации на сайте. */
.crumbs a{color:var(--ink2); display:inline-block; padding:12px 8px;
  margin-inline-start:-8px; border-radius:10px}
.hero{padding:clamp(22px,4vw,46px) 0 clamp(18px,3vw,30px)}
.hero__g{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(22px,4vw,56px); align-items:center}
.kick{display:inline-flex; align-items:center; gap:10px; margin:0; font:600 13px/1.3 var(--mono);
  color:var(--red)}
.kick i{width:14px; height:14px; flex:none; border-radius:50%; background:var(--red)}
.hero h1{font-size:clamp(31px,3.4vw + 13px,54px); margin:.35em 0 .4em}
.lead{font-size:clamp(17px,.4vw + 16px,20px); margin:0; max-width:40em; color:#22324f}
.acts{display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; margin-top:24px}
.acts .btn__note{flex-basis:100%}

/* карточка-пример --------------------------------------------------------- */
.sc{position:relative; margin:0; background:var(--card); border-radius:var(--r2);
  padding:20px 20px 18px; box-shadow:0 1px 0 var(--line),0 24px 44px -30px rgba(22,36,63,.55);
  border-top:5px solid var(--ink)}
.sc__tag{position:absolute; top:-13px; left:18px; background:var(--red); color:var(--paper);
  font:600 12px/1 var(--mono); padding:6px 10px; border-radius:999px}
.sc__top{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
  margin-top:8px}
.sc__team b{display:block; font:400 21px/1.2 var(--disp)}
.sc__team span{font-size:13.5px; color:var(--ink2)}
.sc__team--b{text-align:right}
.sc__vs{width:42px; height:42px; border-radius:50%; background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--line); display:flex; align-items:center;
  justify-content:center; font:600 13px/1 var(--mono); color:var(--ink2)}
.sc__vs::before{content:attr(data-v)}
.sc__chips{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 4px}
.ch{width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font:600 13px/1 var(--body); color:#fff; font-style:normal}
.ch--w{background:var(--grass)} .ch--l{background:var(--red)}
.ch--d{background:#8b93a4} .ch--n{background:var(--sky)}
.sc__rows{margin-top:10px; border-top:1px dashed var(--line)}
.sc__row{display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px dashed var(--line); font-size:15.5px}
.sc__row span{color:var(--ink2)}
.sc__verdict{margin:14px 0 0; padding:12px 14px; border-radius:var(--r1);
  background:rgba(47,125,79,.12); font-size:15.5px}
.qk{background:var(--card); border-radius:var(--r2); padding:18px 20px;
  box-shadow:0 1px 0 var(--line),0 20px 40px -30px rgba(22,36,63,.5);
  border-left:5px solid var(--ochre)}
.qk h2{font-size:20px; margin:0 0 8px}
.qk ul{list-style:none; margin:0; padding:0}
.qk li{position:relative; padding:8px 0 8px 24px; border-top:1px dashed var(--line);
  font-size:15.5px}
.qk li:first-child{border-top:0}
.qk li::before{content:""; position:absolute; left:2px; top:1.15em; width:9px; height:9px;
  border-radius:50%; background:var(--red)}

/* бегущая строка ---------------------------------------------------------- */
.tick{position:relative; overflow:hidden; margin-top:clamp(20px,3vw,34px); padding:9px 0;
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tick__row{display:flex; width:-webkit-max-content; width:max-content;
  animation:tick 52s linear infinite}
.tick:hover .tick__row{animation-play-state:paused}
.tick span{display:inline-flex; align-items:center; gap:14px; padding:0 15px; white-space:nowrap;
  font:600 14px/1.4 var(--body); color:var(--ink2)}
.tick span::before{content:attr(data-v)}
.tick span::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--ochre)}
.tick span:nth-child(3n)::after{background:var(--grass)}
.tick span:nth-child(3n+2)::after{background:var(--red)}
@keyframes tick{to{transform:translateX(-50%)}}

/* страница с колонкой ----------------------------------------------------- */
.page{display:grid; grid-template-columns:minmax(0,1fr); gap:30px; align-items:start;
  padding-top:clamp(18px,3vw,30px)}
.page__main{min-width:0}
.minor{display:none}
@media (min-width:1120px){
  .page{grid-template-columns:minmax(0,1fr) 284px}
  .minor{display:block; position:-webkit-sticky; position:sticky; top:82px}
  .page__main .toc{display:none}
}
/* Прокручивается только список оглавления: если прокручивать всю колонку,
   карточка с кнопкой уходит за нижний край на длинных страницах. */
.minor__in{display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - 96px);
  padding-bottom:4px}
.minor__in>.thread{min-height:0; display:flex; flex-direction:column}
.minor__in>.thread ol{min-height:0; overflow-y:auto; scrollbar-width:thin}
.minor__in>.lbo{flex:0 0 auto}
.thread{background:var(--card); border-radius:var(--r2); padding:14px 16px 10px;
  box-shadow:0 1px 0 var(--line)}
.thread b{display:block; font:600 11.5px/1 var(--mono); color:var(--red);
  margin-bottom:8px}
.thread ol{list-style:none; margin:0; padding:0 0 0 16px; position:relative}
.thread ol::before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:repeating-linear-gradient(180deg,var(--ink) 0 6px,transparent 6px 12px)}
.thread li{position:relative}
.thread a{display:block; padding:6px 0 6px 12px; font-size:14.5px; line-height:1.35;
  color:var(--ink2); text-decoration:none}
.thread a::before{content:""; position:absolute; left:-16px; top:15px; width:10px; height:10px;
  margin-top:-5px; border-radius:50%; background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--line); transition:background .2s ease}
.thread a:hover{color:var(--ink)}
.thread a.on{color:var(--ink); font-weight:600}
.thread a.on::before{background:var(--red); box-shadow:inset 0 0 0 2px var(--red)}
.lbo{position:relative; overflow:hidden; border-radius:var(--r2); padding:16px;
  background:var(--dark); color:#e8edf6}
.lbo::after{content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:repeating-linear-gradient(90deg,var(--ochre) 0 16px,var(--red) 16px 32px,
    var(--grass) 32px 48px)}
.lbo__tag{display:inline-block; margin-top:6px; font:600 11px/1 var(--mono);
  color:var(--ochre)}
.lbo__name{display:block; font:400 30px/1.1 var(--disp); color:#fff; margin:4px 0}
.lbo p{margin:0 0 8px; font-size:14px; color:#c3cde0}
.lbo ul{list-style:none; margin:0 0 12px; padding:0; font-size:13.5px}
.lbo li{position:relative; padding:3px 0 3px 18px}
.lbo li::before{content:""; position:absolute; left:2px; top:.85em; width:7px; height:7px;
  border-radius:50%; background:var(--ochre)}
.lbo .btn{width:100%}
.lbo small{display:block; margin-top:8px; font-size:12px; color:#9fb0c9; text-align:center}

/* лист и разделы ----------------------------------------------------------- */
.toc{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px}
.toc b{font:600 12px/1 var(--mono); color:var(--red)}
.toc a{display:inline-block; padding:7px 13px; border-radius:999px; background:var(--card);
  color:var(--ink); text-decoration:none; font-size:14.5px; box-shadow:0 1px 0 var(--line)}
.toc a:hover{box-shadow:0 0 0 2px var(--ochre)}
.sheet{background:var(--card); border-radius:var(--r3); padding:clamp(20px,3vw,46px)
  clamp(18px,4vw,54px); box-shadow:0 1px 0 var(--line),0 30px 60px -44px rgba(22,36,63,.6)}
.sheet + .sheet{margin-top:26px}
/* Второй лист книги счёта: подцвеченный «второй экземпляр» с бледной
   диагональной штриховкой. Чернила остаются тёмными, контраст не падает. */
.sheet--tint{background-color:#eef4ec;
  background-image:repeating-linear-gradient(135deg,rgba(47,125,79,.05) 0 12px,
    rgba(47,125,79,0) 12px 24px)}
.sheet--tint .sec + .sec{border-top-color:rgba(22,36,63,.16)}
/* подпись таблицы стала заголовком: сбрасываем отступы */
.tcap{margin:1.3em 0 .5em; font-size:clamp(18px,.5vw + 16px,22px)}

.sec{padding:4px 0 8px}
.sec + .sec{margin-top:22px; padding-top:28px; border-top:1px solid var(--line)}
.h2{display:flex; align-items:center; gap:14px; font-size:clamp(25px,1.5vw + 17px,37px);
  margin-bottom:.55em}
.ov{position:relative; width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%2219%22 fill=%22%23c8372c%22/%3E%3Cpath d=%22M8 6c6 7 6 21 0 28M32 6c-6 7-6 21 0 28%22 fill=%22none%22 stroke=%22%23f7f3e8%22 stroke-width=%221.6%22 stroke-dasharray=%223 3%22/%3E%3C/svg%3E") center/contain no-repeat; display:flex;
  align-items:center; justify-content:center; color:#fff;
  font:600 16px/1 var(--body)}
.ov::before{content:attr(data-n)}
.sheet p{margin:0 0 1em; max-width:66ch}
.sheet h3{font-size:clamp(20px,.6vw + 17px,25px); margin:1.3em 0 .5em}
.dots{list-style:none; padding:0; margin:0 0 1.1em}
.dots li{position:relative; padding-left:26px; margin:.5em 0}
.dots li::before{content:""; position:absolute; left:3px; top:.72em; width:10px; height:10px;
  border-radius:50%; background:var(--grass)}
.steps{list-style:none; counter-reset:st; padding:0; margin:18px 0 22px; display:grid; gap:14px}
.steps li{counter-increment:st; display:grid; grid-template-columns:44px minmax(0,1fr);
  gap:14px; align-items:start}
.steps li::before{content:counter(st); width:44px; height:44px; display:flex;
  align-items:center; justify-content:center; border-radius:50%; background:var(--ink);
  color:var(--paper); font:600 18px/1 var(--body)}
.steps h3{margin:0; font-size:17.5px; padding-top:8px}
.steps p{margin:.25em 0 0}
/* Колонки задаются явно и выбираются в сборщике так, чтобы последний ряд
   не остался с одной сиротой. */
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:18px 0 22px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Последняя плитка закрывает ряд, если до полного не хватает одной ячейки.
   Только там, где колонок действительно четыре: на узком экране сетка
   схлопывается в одну колонку, и `span 2` создавал вторую колонку сам,
   раскладывая плитки рядами 2+2+2+1 внахлёст. */
@media (min-width:761px){
  .cards--wide-last>.card:last-child{grid-column:span 2}
}
.cards--1{grid-template-columns:minmax(0,1fr)}
.card{background:var(--paper2); border-radius:var(--r2); padding:18px;
  box-shadow:inset 0 0 0 1px var(--line); transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line),
  0 16px 28px -20px rgba(22,36,63,.5)}
.card:first-child{background:var(--ink); color:#eaf0fa}
.card:first-child h3{color:#fff}
.card__ic{width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(47,125,79,.14); color:var(--grass); font-size:19px;
  margin-bottom:10px}
.card:first-child .card__ic{background:rgba(217,162,39,.2); color:var(--ochre)}
/* ссылка на тёмной первой карточке: синий по чернилам даёт контраст 2.4 */
.card:first-child a{color:#ffd980}
.card:first-child strong{color:#fff}
.card h3{margin:0 0 .3em; font-size:19.5px}
.card p{margin:0; font-size:15.5px}
.fit{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:18px 0 22px}
.fit__c{border-radius:var(--r2); padding:18px 20px 8px}
.fit__c--yes{background:rgba(47,125,79,.12)}
.fit__c--know{background:rgba(217,162,39,.16)}
.fit__c h3{display:flex; align-items:center; gap:10px; margin:0 0 .4em; font-size:20px}
.fit__c h3 i{font-style:normal; width:30px; height:30px; flex:none; display:flex;
  align-items:center; justify-content:center; border-radius:50%; background:var(--ink);
  color:var(--paper); font-size:15px}
.pass{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; margin:16px 0 22px}
.pass div{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 0; border-bottom:1px dashed var(--line)}
.pass dt{color:var(--ink2); font-size:15px}
.pass dd{margin:0; font-weight:600; text-align:right}
.tscroll{overflow-x:auto; margin:16px 0 22px; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--line)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px}
caption{caption-side:top; text-align:left; padding:12px 16px 10px; font:600 12.5px/1.4 var(--mono);
  color:var(--ink2)}
th{background:var(--ink); color:var(--paper); text-align:left; padding:11px 16px; font-weight:600}
td{padding:11px 16px; border-top:1px solid var(--line); vertical-align:top}
tr:nth-child(even) td{background:var(--paper2)}
.note{margin:18px 0 22px; padding:15px 18px; border-radius:0 12px 12px 0;
  background:rgba(46,107,184,.1); box-shadow:inset 4px 0 0 var(--sky)}
.note p:last-child{margin-bottom:0}
/* короткий ответ на запрос страницы — первое, что видит пришедший из поиска */
.ans{position:relative; margin:0 0 24px; padding:20px 22px 18px; border-radius:var(--r2);
  background:var(--paper2); box-shadow:inset 0 0 0 1px var(--line), 0 10px 26px rgba(22,36,63,.07)}
.ans::before{content:""; position:absolute; inset:0 auto 0 0; width:5px; border-radius:6px 0 0 6px;
  background:linear-gradient(180deg,var(--red),var(--ochre))}
.ans__k{display:block; font:600 11.5px/1.4 var(--mono);
  text-transform:uppercase; color:var(--red); margin-bottom:8px}
.ans p{margin:0; font-size:18px; line-height:1.62}
.ans p+p{margin-top:.55em; font-size:16px; color:var(--ink2)}
.ans ul{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:7px}
.ans li{position:relative; padding-left:22px; font-size:15.5px; color:var(--ink2)}
.ans li::before{content:""; position:absolute; left:2px; top:.55em; width:9px; height:9px;
  border-radius:50%; background:var(--grass)}
@media (max-width:600px){.ans{padding:17px 18px 16px} .ans p{font-size:16.5px}}
.ribbon{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:14px 20px; margin:24px 0; padding:18px 22px; border-radius:var(--r2); color:#eef2f9;
  background:var(--ink)}
.ribbon b{display:block; font:400 22px/1.25 var(--disp); color:#fff}
.ribbon p{margin:.2em 0 0; font-size:15.5px; color:#c6d0e2; max-width:50ch}
.lbc{margin:22px 0; border-radius:var(--r2); overflow:hidden; background:var(--dark);
  color:#dfe6f2}
.lbc__b{padding:20px 22px 22px}
.lbc__b h3{color:#fff; margin-top:0}
.lbc .dots li::before{background:var(--ochre)}
.faq details{border-radius:12px; background:var(--paper2); margin:10px 0;
  box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{cursor:pointer; list-style:none; position:relative; padding:14px 50px 14px 18px;
  font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:20px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq__a{padding:0 18px 14px}
.faq__a p{margin:0}

/* блоки-данные ------------------------------------------------------------- */
.fm__cap,.mt .fm__cap{display:block; font:600 12px/1.4 var(--mono);
  color:var(--ink2); margin-bottom:10px}
.fm{margin:16px 0 22px}
.fm__row{display:grid; grid-template-columns:minmax(0,9em) auto minmax(0,1fr); gap:6px 16px;
  align-items:center; padding:12px 0; border-top:1px solid var(--line)}
.fm__row b{font-weight:600}
.fm__chips{display:flex; gap:5px}
.fm__row p{grid-column:1/-1; margin:0; font-size:15px; color:var(--ink2)}
.h2h{margin:16px 0 22px}
.h2h__bar{display:flex; height:22px; border-radius:6px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.h2h--a{background:var(--grass)} .h2h--d{background:#b9bfca} .h2h--b{background:var(--sky)}
.h2h__leg{display:flex; justify-content:space-between; margin-top:6px; font-size:14px;
  color:var(--ink2)}
.mt{margin:16px 0 22px}
.mt__row{display:grid; grid-template-columns:minmax(0,10em) minmax(0,1fr) 3.4em; gap:12px;
  align-items:center; margin:8px 0}
.mt__bar{height:14px; border-radius:7px; background:rgba(22,36,63,.1); overflow:hidden}
.mt__bar i{display:block; height:100%; border-radius:7px;
  background:linear-gradient(90deg,var(--ochre),var(--red))}
.mt em{font-style:normal; font:600 15px/1 var(--mono); text-align:right}
.mt em::before{content:attr(data-v)}
.mt__note{margin:10px 0 0; font-size:15px; color:var(--ink2)}
.ck{margin:16px 0 22px}
.ck ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ck li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; padding:12px 14px;
  border-radius:var(--r1)}
.ck li b{font-weight:600}
.ck li span{grid-column:2; font-size:15px}
.ck--ok{background:rgba(47,125,79,.12)}
.ck--no{background:rgba(200,55,44,.1)}
.ck li::before{grid-row:span 2; width:26px; height:26px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:600}
.ck--ok::before{content:"✓"; background:var(--grass)}
.ck--no::before{content:"✕"; background:var(--red)}

/* широкие вставки ---------------------------------------------------------- */
.wide{margin:clamp(24px,3.5vw,44px) 0}
.band img{width:100%; border-radius:var(--r2)}
.pt,.fl{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px;
  align-items:center; background:var(--card); border-radius:var(--r3);
  padding:clamp(18px,2.5vw,30px); box-shadow:0 1px 0 var(--line)}
.pt figure,.fl figure{margin:0}
.pt__svg,.fl__svg{width:100%; height:auto; border-radius:var(--r2)}
.pt figcaption,.fl figcaption{margin-top:10px; font-size:14px; color:var(--ink2)}
.pt__list,.fl__list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pt__list li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:4px 12px}
.pt__list i{width:18px; height:18px; border-radius:5px; grid-row:span 2}
.pt__list b,.fl__list b{font-weight:600}
.pt__list span,.fl__list span{grid-column:2; font-size:15px; color:var(--ink2)}
.fl__list li{padding-left:16px; border-left:3px solid var(--grass)}
.fl__list span{grid-column:1; display:block}
.pt__ball{animation:bowl 6s ease-in-out infinite}
.pt__arc{stroke-dasharray:6 5; animation:arc 6s linear infinite}
@keyframes bowl{0%{transform:translate(0,0)} 45%{transform:translate(210px,-6px)}
  60%{transform:translate(230px,10px)} 100%{transform:translate(0,0); opacity:0}}
@keyframes arc{to{stroke-dashoffset:-44}}

/* соседи, финал, подвал ---------------------------------------------------- */
.near{margin:clamp(28px,4vw,48px) 0 0}
.near h2{font-size:clamp(22px,1vw + 18px,30px)}
.near__g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.near a{display:block; padding:16px 18px; border-radius:var(--r2); background:var(--card);
  color:var(--ink2); text-decoration:none; box-shadow:0 1px 0 var(--line);
  transition:transform .18s ease,box-shadow .18s ease}
.near a:hover{transform:translateY(-3px); box-shadow:0 12px 24px -18px rgba(22,36,63,.6)}
.near b{display:block; font:400 20px/1.25 var(--disp); color:var(--ink); margin-bottom:4px}
.near i{font-style:normal; font-size:14.5px}
.ctabox{margin:26px 0 0; padding:clamp(28px,4vw,48px) clamp(18px,3vw,36px); text-align:center;
  border-radius:var(--r3); background:var(--ink); color:#e9eefa}
.ctabox h2{color:#fff; font-size:clamp(25px,1.6vw + 18px,38px)}
.ctabox p{max-width:40em; margin:0 auto 20px; color:#c6d0e2}
.ctabox .btn__note{display:block; margin-top:12px; color:#9fb0c9}
.foot{margin-top:clamp(40px,6vw,72px); background:var(--ink); color:#b9c4d8; padding:42px 0 36px;
  font-size:14.5px}
.foot__g{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.foot .fcap{display:block; margin:0 0 10px; font:600 11.5px/1.3 var(--mono);

  color:var(--ochre)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin:6px 0}
.foot a{color:#dbe3f0}
.foot__note{margin-top:26px; padding-top:20px; border-top:1px solid rgba(247,243,232,.16);
  display:grid; gap:8px}
.foot__note p{margin:0; max-width:78ch}
.age{display:inline-block; font:600 13px/1 var(--mono); color:#22180a; background:var(--ochre);
  padding:6px 10px; border-radius:999px}
.mbar{display:none}

/* 404 ---------------------------------------------------------------------- */
.e404{text-align:center; padding:clamp(36px,6vw,80px) 0 10px}
.e404 .num{font:400 clamp(80px,13vw,160px)/1 var(--disp); color:var(--red)}
.e404 .num::before{content:attr(data-v)}
.e404 .lead{margin:0 auto 20px}
.e404 ul{list-style:none; padding:0; margin:0 auto 24px; display:flex; flex-wrap:wrap;
  justify-content:center; gap:10px}
.e404 ul a{display:inline-block; padding:8px 14px; border-radius:999px; background:var(--card);
  color:var(--ink); text-decoration:none; box-shadow:0 1px 0 var(--line)}

/* адаптив ------------------------------------------------------------------ */
@media (max-width:980px){
  .hero__g{grid-template-columns:minmax(0,1fr)}
  .pt,.fl{grid-template-columns:minmax(0,1fr)}
  .foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .top__in{flex-wrap:wrap}
  .menu{order:3; width:100%; flex-basis:100%}
  .top .btn{display:none}
  .cards,.cards--2,.cards--3,.cards--4,.fit,.pass,.near__g{grid-template-columns:minmax(0,1fr)}
  .fm__row{grid-template-columns:minmax(0,1fr) auto}
  .mt__row{grid-template-columns:minmax(0,1fr) 3.4em}
  .mt__bar{grid-column:1/-1; order:3}
  .mbar{position:fixed; left:10px; right:10px; bottom:10px; z-index:40; display:flex;
    align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 14px;
    border-radius:13px; background:var(--ink); color:#e7ecf7;
    box-shadow:0 16px 36px -12px rgba(0,0,0,.5); margin-bottom:env(safe-area-inset-bottom)}
  .mbar span{font-size:13.5px; line-height:1.3}
  .mbar .btn{flex:none}
  body.has-bar{padding-bottom:84px}
}
@media (max-width:420px){
  .foot__g{grid-template-columns:minmax(0,1fr)}
  .sc__top{grid-template-columns:1fr auto}
  .sc__team--b{grid-column:1/-1; text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}