/* KodNomera (bluememo.net) — «Зелёный регистр»: бумажная ведомость — волосяные линии вместо коробок, антиква в заголовках, моноширинные цифры, зелёные чернила; ни одной тени. */

/* === 1. ПЕРЕМЕННЫЕ И ТЕМЫ (светлая; тёмная — §15) === */
:root{
  color-scheme: light dark;      /* иначе Android force-dark ломает зелёный */
  --bg:#F4F6F4; --surface:#FFFFFF; --top-bg:#FFFFFF; --tint:#EAF2EE;
  --text:#10231D;                /* 15.10:1 к --bg */
  --muted:#4E635C;               /* 5.93:1 к --bg */
  --label:#596D64;               /* капитель 11.5px: 5.09:1 */
  --line:#E4EAE6; --line-strong:#C3CEC8;
  --control:#6B7F77;             /* граница поля ввода: 4.26:1 к белому (норма >=3:1) */
  --accent:#05684A;              /* ссылки: 6.27:1 к --bg */
  --accent-code:#0B3A2B;         /* code на --tint: 11.14:1 */
  --strong:#0B3A2B; --open:#0B3A2B;
  --brand-a:#34D399; --brand-b:#059669; /* только заливки */
  --btn-a:#0E6B4E; --btn-b:#07553C; --btn-text:#FFFFFF; /* белый текст 6.50:1 */
  --ink:#0B1F1A; --ink-text:#FFFFFF; --ink-muted:#B7CFC6; --ink-err:#FCA5A5;
  --cta-border:transparent;
  --err:#A3231C;                 /* 6.87:1 к --bg */
  --focus:#0E6B4E;               /* 5.98:1 к --bg */
  --fade:rgba(16,35,29,.16);
  --font-display:Georgia,"Noto Serif","Droid Serif","Times New Roman",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Roboto Mono","DejaVu Sans Mono",monospace;
}

/* === 2. RESET И БАЗОВАЯ ТИПОГРАФИКА === */
*{box-sizing:border-box}
img,table,pre,input{max-width:100%}
html{font-size:106.25%; -webkit-text-size-adjust:100%; text-size-adjust:100%} /* 1rem = 17px, кегль на мобильном не падает */
body{margin:0; background:var(--bg); color:var(--text); font:1rem/1.65 var(--font-ui); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
h1,h2,h3{overflow-wrap:anywhere}
:where(a,button,summary,input,[tabindex]):focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:2px}
.wrap{width:min(1080px, 100% - 32px); margin:0 auto} /* врезок за .wrap нет */
main.wrap{padding-bottom:48px}

/* === 3. ШАПКА — светлая бумажная полоса, НЕ липкая (48+44+1 = 93px) === */
.top{background:var(--top-bg); border-bottom:1px solid var(--line-strong)}
.bar{display:flex; flex-wrap:wrap; align-items:center; gap:0; padding:0}
.brand{flex:1 0 100%; display:flex; align-items:center; gap:8px; min-height:48px; font:600 1rem/1 var(--font-ui); letter-spacing:-.01em; color:var(--text); text-decoration:none}
.brand::before{content:""; flex:0 0 auto; width:10px; height:10px; border-radius:2px; background:linear-gradient(135deg,var(--brand-a),var(--brand-b))}
.nav{
  flex:1 0 100%; min-width:0; display:flex; flex-wrap:nowrap; align-items:center; gap:20px;
  height:44px;                 /* фиксирована: иначе CLS */
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  /* обрыв ленты: два «покрытия» (local) поверх двух градиентов-теней (scroll) */
  background:
    linear-gradient(90deg,var(--top-bg),transparent) left/24px 100% no-repeat,
    linear-gradient(270deg,var(--top-bg),transparent) right/24px 100% no-repeat,
    linear-gradient(90deg,var(--fade),transparent) left/16px 100% no-repeat,
    linear-gradient(270deg,var(--fade),transparent) right/16px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.nav a{display:flex; align-items:center; height:44px; white-space:nowrap; scroll-snap-align:start; font-size:.94rem; color:var(--text); text-decoration:none}
.nav a:hover,.nav a:focus-visible{text-decoration:underline 2px var(--accent); text-underline-offset:4px}
.langs{flex:1 0 100%; display:flex; flex-wrap:wrap; gap:14px; font-size:.85rem}
.langs a{display:flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none}
.langs a:hover{text-decoration:underline}
.langs a[aria-current="true"]{color:var(--text); font-weight:600}

/* === 4. КРОШКИ — путь; переносятся по строкам, не прокручиваются === */
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:0; margin:14px 0 18px; font-size:.8rem; line-height:1.4}
.crumbs li+li::before{content:"/"; color:var(--line-strong); margin-right:8px}
/* именно inline: inline-block уносил бы длинную крошку ниже разделителя */
.crumbs a{display:inline-block; padding:13px 0; color:var(--muted); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--text); font-weight:600}

/* === 5. ПЕРВЫЙ ЭКРАН — шапка документа, не рекламный блок === */
.hero{padding:24px 0 16px}
.hero h1,.prose h1{position:relative; margin:0 0 12px; font:400 clamp(1.55rem,1.15rem + 2vw,2.15rem)/1.2 var(--font-display); letter-spacing:-.012em; text-wrap:balance; hyphens:manual}
.hero h1::before,.prose h1::before{content:""; display:block; width:34px; height:3px; border-radius:2px; margin:0 0 12px; background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}
.tagline{margin:0 0 16px; max-width:56ch; font-size:1.08rem; line-height:1.55; color:var(--muted)}
.hero .btn{margin-top:0}

/* === 6. .prose — колонка чтения === */
.prose{max-width:68ch; overflow-wrap:anywhere}
.prose>*{min-width:0}
.prose h2{position:relative; margin:34px 0 10px; font:400 clamp(1.3rem,1.18rem + .6vw,1.5rem)/1.28 var(--font-display)}
.prose h2::before{content:""; display:block; width:26px; height:3px; border-radius:2px; margin:0 0 8px; background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}
.prose h3{margin:24px 0 6px; font:600 1.08rem/1.35 var(--font-ui)}
.prose p{margin:0 0 14px}
.prose p,.prose li{font-size:1rem; line-height:1.7}
.prose ul,.prose ol{padding-left:22px; margin:0 0 14px}
.prose li{margin:5px 0}
.prose strong{font-weight:700; color:var(--strong)}
.prose code{font:.94em/1.4 var(--font-mono); background:var(--tint); color:var(--accent-code); border-radius:4px; padding:1px 5px; letter-spacing:.01em}
.prose pre{margin:16px 0; padding:12px; background:var(--tint); color:var(--accent-code); border-radius:4px; overflow-x:auto}
.prose pre code{background:none; padding:0; border-radius:0}
.prose blockquote{margin:16px 0; padding:2px 0 2px 14px; border-left:2px solid var(--brand-b); background:none; color:var(--muted)}
.prose img{max-width:100%; height:auto}
.prose table{display:block; overflow-x:auto; width:100%; border-collapse:collapse; margin:16px 0; font-size:.95rem; font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:9px 12px; vertical-align:top; text-align:left}
.prose th{font:600 11.5px/1.3 var(--font-ui); text-transform:uppercase; letter-spacing:.12em; color:var(--label); background:var(--surface); border-bottom:1px solid var(--line-strong)}
.prose td{border-top:1px solid var(--line); background:none}
.prose th:first-child,.prose td:first-child{min-width:8.5rem}

/* .meta / .toc — источник данных и есть доверие */
.meta,.prose .meta{margin:0 0 16px; font-size:.8rem; line-height:1.5; color:var(--muted)}
.meta time{font-family:var(--font-mono); letter-spacing:.01em; font-variant-numeric:tabular-nums}
.meta a{display:inline-block; padding:4px 0; color:var(--accent); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px}
.toc{margin:16px 0 24px; padding:0 0 0 14px; border-left:2px solid var(--line-strong); background:none; border-radius:0}
.toc strong{display:block; margin-bottom:6px; font:600 11.5px/1.3 var(--font-ui); text-transform:uppercase; letter-spacing:.12em; color:var(--label)}
.toc ol{list-style:decimal-leading-zero; margin:0; padding-left:22px; font-size:.95rem}
.toc li{margin:0}
.toc a{display:inline-block; padding:11px 0; color:var(--accent); text-decoration:none}
.toc a:hover{text-decoration:underline}

/* === 7. КАРТОЧКА ДАННЫХ — ведомость, а не плитка (сигнатурный элемент; проза глушится явно) === */
.card{display:block; margin:0 0 8px; padding:0; background:none; border:0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong)}
.card>div{padding:10px 0; border-top:1px solid var(--line)}
.card>div:first-child{border-top:0}
.card dt{font:600 11.5px/1.3 var(--font-ui); text-transform:uppercase; letter-spacing:.12em; color:var(--label)}
.card dd,.result dd{margin:2px 0 0; font:600 1rem/1.4 var(--font-mono); letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--text); overflow-wrap:anywhere}

/* === 8. FAQ — та же ведомость; коробок нет, состояние знаком, а не цветом === */
.faq{margin:34px 0; border:0}
.faq h2{margin:0 0 10px; font:400 clamp(1.3rem,1.18rem + .6vw,1.5rem)/1.28 var(--font-display)}
.faq h2::before{content:none}
.faq details{margin:0; padding:0; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0}
.faq details:first-of-type{border-top:1px solid var(--line-strong)}
.faq summary{position:relative; display:flex; align-items:center; min-height:52px; padding:14px 40px 14px 0; font:600 1rem/1.4 var(--font-ui); color:var(--text); cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; font:400 22px/1 var(--font-mono); color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{color:var(--open)}
.faq details p{margin:0 0 14px; max-width:62ch; font-size:1rem; line-height:1.65}

/* === 9. СПИСКИ-КАРТОЧКИ — плотный перечень записей вместо плиток === */
.list{margin:34px 0}
.list h2,.related h2{margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid var(--line-strong); font:400 1.3rem/1.3 var(--font-display)}
.cards{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:0}
.cards li{position:relative; padding:12px 0; background:none; border:0; border-radius:0; border-top:1px solid var(--line)}
.cards li:first-child{border-top:0}
.cards li a{display:block; padding:6px 0; font:600 1rem/1.4 var(--font-ui); color:var(--text); text-decoration:none}
.cards li a::after{content:""; position:absolute; inset:0}   /* строка целиком — тап-цель ≥48px */
.cards li a:hover,.cards li a:focus-visible{text-decoration:underline 2px var(--accent); text-underline-offset:3px}
.cards li p{margin:4px 0 0; font-size:.92rem; color:var(--muted)}
.cards li p:empty{display:none}   /* шаблон отдаёт заведомо пустой <p></p> — иначе рвётся ритм */
.langs-grid{margin-top:16px}      /* сетка выбора языка = та же лента записей */
.related{margin:34px 0; max-width:68ch}
.related ul{list-style:none; padding:0; margin:0}
.related li{padding:0; border-top:1px solid var(--line)}
.related li:first-child{border-top:1px solid var(--line-strong)}
.related li a{position:relative; display:block; min-height:48px; padding:13px 0 13px 20px; font-size:1rem; color:var(--text); text-decoration:none}
.related li a::before{content:"\2192"; position:absolute; left:0; top:13px; color:var(--accent)}
.related li a:hover,.related li a:focus-visible{text-decoration:underline 2px var(--accent); text-underline-offset:3px}

/* === 10. ИНСТРУМЕНТ — главный узел доверия. Работает и внутри article.prose, и снаружи === */
.tool{position:relative; overflow:hidden; max-width:none; margin:16px 0 24px; padding:18px 16px; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px}
.tool::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}
.tool h2{position:static; margin:0 0 12px; font:600 1.12rem/1.3 var(--font-ui); letter-spacing:0}
.tool h2::before{   /* подпись прибора вместо засечки прозы */
  content:"ИНСТРУМЕНТ"; position:static; display:block; width:auto; height:auto; border-radius:0; background:none;
  margin:0 0 4px; font:600 11.5px/1.3 var(--font-ui); letter-spacing:.14em; color:var(--label);
}
#num-form{display:flex; flex-wrap:wrap; gap:10px; margin:0}
#num-input{flex:1 1 100%; min-width:0; min-height:52px; padding:14px; font:500 18px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--text); background:var(--surface); border:1px solid var(--control); border-radius:6px}  /* 18px: iOS не зумит */
#num-input::placeholder{color:var(--muted); opacity:1}
#num-input:focus-visible{border-color:var(--focus); outline:3px solid var(--focus); outline-offset:2px}
#num-form button{flex:1 1 100%; min-height:52px; font:600 17px/1 var(--font-ui); color:var(--btn-text); background:linear-gradient(180deg,var(--btn-a),var(--btn-b)); border:0; border-radius:8px; cursor:pointer; touch-action:manipulation}
.hint,.tool .hint{position:relative; margin:12px 0 0; padding-left:14px; font-size:.9rem; color:var(--muted)}
.hint::before{content:""; position:absolute; left:0; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--brand-b)}
.tool noscript .hint{color:var(--err)}
/* ответ — в том же виде, что данные на страницах; блок последний в панели, сдвига нет */
.result{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-strong); animation:fade .18s ease-out}
#num-result[hidden],.result[hidden]{display:none}
.result dl{margin:0}
.result dt{margin-top:10px; font:600 11.5px/1.3 var(--font-ui); text-transform:uppercase; letter-spacing:.12em; color:var(--label)}
.result p{margin:12px 0 0}
.result p a{font-weight:600}
.result p a::after{content:" \2192"}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* === 11. CTA И КНОПКА — единственная тёмная плоскость страницы === */
.cta{position:relative; overflow:hidden; margin:34px 0 0; padding:26px 20px; border:1px solid var(--cta-border); border-radius:8px; background:var(--ink); color:var(--ink-text); text-align:left; box-shadow:none}
.cta::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}
.cta h2{margin:0 0 8px; font:400 1.42rem/1.25 var(--font-display); color:var(--ink-text)}
.cta p{margin:0 0 18px; color:var(--ink-muted)}
.cta :focus-visible{outline-color:#34D399}   /* на тёмной плоскости: 9.32:1 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:13px 24px;
  border:2px solid transparent;   /* держим место под контур .locked — без сдвига при разблокировке */
  border-radius:8px; font:600 17px/1 var(--font-ui); color:var(--btn-text);
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  text-decoration:none; box-shadow:none; touch-action:manipulation; transition:transform .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.js-tg{cursor:pointer}   /* href подставляет JS */
.cta .btn{background:linear-gradient(135deg,#34D399,#10B981); color:#06231A}   /* 6.55:1 в худшей точке */

/* === 12. ПОДВАЛ — на фоне страницы, через линию; тёмного здесь нет === */
.foot{padding:20px 0 34px; border-top:1px solid var(--line-strong); color:var(--muted); font-size:.9rem}
.footnav{display:flex; flex-wrap:wrap; gap:0 22px; margin:0 0 8px}
.footnav a{display:inline-flex; align-items:center; min-height:48px; font-size:.92rem; color:var(--muted); text-decoration:none}
.footnav a:hover{text-decoration:underline}
.copy{display:flex; align-items:center; gap:8px; margin:0; font-size:.85rem; color:var(--label)}
.copy::before{content:""; flex:0 0 auto; width:8px; height:8px; border-radius:2px; background:linear-gradient(135deg,var(--brand-a),var(--brand-b))}

/* === 13. СОСТОЯНИЯ — ничего не сообщается одним лишь цветом === */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.status,.js-status{min-height:1.3em; margin:10px 0 0; font-size:.8rem; color:var(--muted)}   /* min-height обязателен: иначе CLS */
.cta .status{color:var(--ink-muted)}
.err,.status.err{color:var(--err); font-weight:600}
.status.err::before{content:"! "}
.cta .status.err{color:var(--ink-err)}
/* .locked — контур, а не прозрачность: на медленном VPN он виден секундами */
.btn.locked{background:none; color:var(--accent); border-color:var(--accent); cursor:progress}
.cta .btn.locked{background:none; color:#34D399; border-color:#34D399}
[hidden]{display:none !important}

/* === 14. МЕДИАЗАПРОСЫ (мобильный-first) === */
@media (max-width:600px){ .btn{width:100%} }
@media (min-width:480px){
  .card>div,.result dl{display:grid; grid-template-columns:minmax(0,11.5rem) 1fr; gap:0 16px; align-items:baseline}
  .card dd{margin:0}
  .result dt,.result dd{padding:8px 0; border-top:1px solid var(--line)}
  .result dt{margin-top:0}
  .result dd{margin:0}
}
@media (min-width:600px){
  #num-input{flex:1 1 240px}
  #num-form button{flex:0 0 auto; padding:0 26px}
}
@media (min-width:700px){ .nav{flex-wrap:wrap; overflow:visible; height:auto; gap:6px 22px; padding:6px 0; background:none} }
@media (min-width:720px){ .cards{grid-template-columns:repeat(2,1fr); column-gap:34px} }
/* Риска уходит в левое поле только там, где оно шире 22px — иначе горизонтальный скролл */
@media (min-width:1160px){
  .hero h1::before,.prose h1::before{position:absolute; left:-22px; top:.42em; width:3px; height:22px; margin:0; background:linear-gradient(180deg,var(--brand-a),var(--brand-b))}
  .prose h2::before{position:absolute; left:-22px; top:.42em; width:3px; height:16px; margin:0; background:linear-gradient(180deg,var(--brand-a),var(--brand-b))}
  .tool h2::before{position:static; width:auto; height:auto; margin:0 0 4px; background:none}
}

/* === 15. PREFERS-COLOR-SCHEME — «бумага погашена»: фон уходит в зелёно-чёрный семейства иконки === */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A1A16; --surface:#12271F; --top-bg:#0E211B; --tint:#16302A;
    --text:#E7EFEA;              /* 15.30:1 к --bg, 13.43:1 к --surface */
    --muted:#9CB3AA; --label:#9CB3AA;        /* 8.05:1 к --bg */
    --line:#22392F; --line-strong:#2C463B;
    --control:#6A8C81;           /* 4.25:1 к --surface */
    --accent:#6EE7B7;            /* 11.75:1 к --bg */
    --accent-code:#9FE8C8;       /* 9.96:1 на --tint */
    --strong:#B9F0D5; --open:#6EE7B7;
    --btn-a:#34D399; --btn-b:#10B981; --btn-text:#06231A;
    --cta-border:#22392F;        /* --ink иначе сливается с фоном страницы */
    --err:#FCA5A5;               /* 9.44:1 к --bg */
    --focus:#34D399;             /* 9.32:1 к --bg */
    --fade:rgba(0,0,0,.5);
  }
}

/* === 16. PREFERS-REDUCED-MOTION === */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .btn:hover{transform:none}
}


/* === 17. ПОЛИРОВКА: знак бренда, «миллиметровка» первого экрана, панель инструмента, карточки с кодами === */
.brand::before{width:14px; height:14px; border-radius:4px}
.brand{font-size:1.08rem}
.hero{position:relative; margin-top:18px; padding:26px 22px 22px; border:1px solid var(--line-strong); border-radius:10px;
  background:
    radial-gradient(55% 65% at 0% 0%,rgba(52,211,153,.16),rgba(52,211,153,0) 60%) 0 0/100% 100% no-repeat,
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/28px 100%,
    var(--surface)}
.hero h1{max-width:18em}
.hero .btn{box-shadow:0 8px 20px rgba(5,104,74,.22)}
.facts{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px;
  font:500 .82rem/1.6 var(--font-mono); letter-spacing:.01em; color:var(--muted)}
.facts li{display:inline-flex; align-items:center; gap:8px}
.facts li::before{content:""; width:6px; height:6px; border-radius:1px; background:var(--brand-b)}
.tool{margin-top:20px; padding:20px 18px; border-radius:10px; box-shadow:0 12px 32px rgba(16,35,29,.08)}
.cards{gap:12px; margin-top:12px}
.cards li,.cards li:first-child{border:1px solid var(--line-strong); border-radius:10px; padding:14px 16px; background:var(--surface);
  transition:border-color .15s ease}
.cards li:hover{border-color:var(--accent)}
/* код страны как бейдж: тот же моноширинный регистр, что в карточках данных */
.cards li a::before{display:inline-flex; align-items:center; justify-content:center; min-width:3.4em; margin-right:10px;
  padding:1px 8px; border-radius:6px; background:var(--tint); color:var(--accent-code);
  font:600 .78rem/1.7 var(--font-mono); letter-spacing:.03em; vertical-align:middle}
.cards li a[href="/kz/"]::before{content:"+7"}
.cards li a[href="/kg/"]::before{content:"+996"}
.cards li a[href="/uz/"]::before{content:"+998"}
.cards li a[href="/az/"]::before{content:"+994"}
.faq details,.faq details:first-of-type{border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:0 14px; margin:8px 0}
.faq summary::after{right:0}
.cta{border-radius:12px; padding:28px 22px;
  background:
    radial-gradient(60% 80% at 0% 0%,rgba(52,211,153,.26),rgba(11,31,26,0) 60%),
    radial-gradient(50% 70% at 100% 100%,rgba(5,150,105,.38),rgba(11,31,26,0) 60%),
    var(--ink)}
@media (min-width:720px){
  .hero{padding:36px 34px 30px}
  .cta{padding:34px 36px}
}
@media (min-width:980px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:14px} }
@media (prefers-color-scheme: dark){
  .hero{background:
    radial-gradient(55% 65% at 0% 0%,rgba(52,211,153,.12),rgba(52,211,153,0) 60%) 0 0/100% 100% no-repeat,
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/28px 100%,
    var(--surface)}
  .tool{box-shadow:none}
}
:root{ --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); --i-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4zM20 4h-6a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E") }
.cards li a[href="/istochniki/"]::before,.cards li a[href="/o-servise/"]::before{content:""; width:1.9em; min-width:0; height:1.9em;
  padding:0; background-color:var(--accent); -webkit-mask:var(--ico) center/1.2em no-repeat; mask:var(--ico) center/1.2em no-repeat}
.cards li a[href="/istochniki/"]::before{--ico:var(--i-book)}
.cards li a[href="/o-servise/"]::before{--ico:var(--i-info)}


/* === 18. ШРИФТЫ И МЕДИА: Manrope в заголовках, JetBrains Mono в цифрах, фото стран, блоки главной === */
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/manrope-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/manrope-cyrillic-700.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/manrope-latin-800.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:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/manrope-cyrillic-800.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrains-mono-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrains-mono-cyrillic-500.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/jetbrains-mono-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/jetbrains-mono-cyrillic-700.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
:root{
  --font-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
}
.hero h1,.prose h1{font-weight:800; letter-spacing:-.025em; font-size:clamp(1.7rem,1.2rem + 2.4vw,2.45rem)}
.prose h2,.faq h2,.list h2,.related h2,.cta h2{font-family:var(--font-display); font-weight:700; letter-spacing:-.015em}
.brand{font-family:var(--font-display); font-weight:800}

.hero.has-media{ display:grid; gap:22px; align-items:center }
.hero-media{ margin:0; min-width:0 }
.hero-media img{ display:block; width:100%; height:auto; border-radius:16px; aspect-ratio:2/1; object-fit:cover }
.cover{ margin:14px 0 22px }
.cover img{ display:block; width:100%; height:auto; border-radius:16px; aspect-ratio:2/1; object-fit:cover }
.cards li .thumb{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:10px; margin:0 0 12px }
@media (min-width:900px){ .hero.has-media{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:32px } }

.cards li .thumb{border-radius:8px}
.kind-home .prose>ul{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:10px}
.kind-home .prose>ul>li{margin:0; padding:12px 14px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface)}
.kind-home .prose>ol{list-style:none; padding:0; margin:0 0 22px; counter-reset:step; display:grid; gap:10px}
.kind-home .prose>ol>li{counter-increment:step; position:relative; margin:0; padding:12px 14px 12px 60px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface)}
.kind-home .prose>ol>li::before{content:counter(step,decimal-leading-zero); position:absolute; left:12px; top:12px; min-width:36px; padding:0 6px; height:30px; border-radius:6px; display:grid; place-items:center; font:600 .85rem/1 var(--font-mono); color:var(--accent-code); background:var(--tint)}
@media (min-width:720px){ .kind-home .prose>ul{grid-template-columns:1fr 1fr} .kind-home .prose{max-width:none} }
@media (min-width:1000px){ .prose .cover,.prose .tool{width:900px; max-width:none} }