/* KimBu (memodrawer.com) — «Янтарная плитка»: тёплая бумага, янтарная шапка, полоса ответа; без теней и градиентов. */

/* 1. ПЕРЕМЕННЫЕ И ТЕМЫ (светлая; тёмная — §16) */
:root {
  color-scheme: light dark;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, "Roboto Mono", "DejaVu Sans Mono", monospace;
  --bg: #FDF6EA; --surface: #FFFFFF; --tint: #FFF0D2;
  --text: #241708; --muted: #6E5637;
  --line: #E6D6BC; --edge: #8A6A3E;
  --accent: #FBBF24; --accent-soft: #F5DFA6; /* янтарь — только заливка */
  --ink: #A8480A; --ink-hover: #7C3407;
  --dark: #1F1308; --err: #B02A17; --focus: #A8480A;
  --top-bg: #FBBF24; --top-edge: #1F1308; --top-ink: #1F1308; --top-focus: #1F1308;
  --chip-edge: #1F1308; --chip-ink: #1F1308; --pill-bg: #1F1308; --pill-ink: #FBBF24;
  --cta-bg: #1F1308; --cta-edge: #1F1308; --cta-h: #F3E7D4; --cta-p: #D9C4A0; --cta-err: #FF9C8A;
  --lip: #A8480A; --lip-locked: #C9A96B; --locked-ink: #241708;
  --foot-bg: #FFF0D2;
}

/* 2. RESET И БАЗОВАЯ ТИПОГРАФИКА */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { /* hyphens:none: словарей переносов для kk/uz/ky/az нет */
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--font); letter-spacing: 0;
  -webkit-hyphens: none; hyphens: none; overflow-wrap: break-word;
}
h1, h2, h3 { text-wrap: pretty; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--ink); }
a:hover { color: var(--ink-hover); }
[id] { scroll-margin-top: 16px; }
.wrap { width: min(880px, 100% - 32px); margin-inline: auto; } /* гутер 16px: на нём держится full-bleed */

/* 3. ШАПКА */
.top { background: var(--top-bg); border-bottom: 2px solid var(--top-edge); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0 8px; min-height: 56px; }
.brand {
  order: 1; margin-right: auto; display: inline-flex; align-items: center;
  min-height: 48px; padding-right: 8px; color: var(--top-ink);
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; text-decoration: none;
}
.brand:hover { color: var(--top-ink); text-decoration: underline; text-underline-offset: 3px; }
.nav {
  order: 3; flex-basis: 100%; display: flex; flex-wrap: nowrap; gap: 8px;
  min-height: 60px; padding-bottom: 4px; padding-inline-end: 44px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 48px; max-width: 72vw;
  padding: 10px 14px; border: 1px solid var(--chip-edge); border-radius: 10px;
  background: transparent; color: var(--chip-ink); font-size: 0.92rem; line-height: 1.25;
  white-space: normal; text-decoration: none; scroll-snap-align: start;
  transition: background-color 120ms linear, color 120ms linear;
}
.nav a:hover, .nav a:focus-visible { background: var(--pill-bg); color: var(--pill-ink); }
.langs {
  order: 2; flex: 1 1 0%; min-width: 0; display: flex; flex-wrap: nowrap; /* basis 0%: лента не срывается вниз */
  justify-content: flex-start; gap: 6px; overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.langs::-webkit-scrollbar { display: none; }
.langs a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--chip-edge); border-radius: 999px; color: var(--chip-ink);
  font-size: 0.9rem; white-space: nowrap; text-decoration: none;
}
.langs a[aria-current="true"] { /* три сигнала + order: текущий язык виден первым */
  order: -1; background: var(--pill-bg); color: var(--pill-ink);
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

/* 4. КРОШКИ */
.crumbs ol {
  list-style: none; display: flex; flex-wrap: nowrap; gap: 6px; margin: 16px 0 0; padding: 0;
  overflow-x: auto; font-size: 0.9rem; line-height: 1.45; color: var(--muted);
  scrollbar-width: none;
}
.crumbs ol::-webkit-scrollbar { display: none; }
.crumbs li { flex: 0 0 auto; display: flex; align-items: center; white-space: nowrap; }
.crumbs li + li::before { content: "›"; content: "›" / ""; color: var(--ink); margin-right: 6px; }
.crumbs a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px;
  color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
}
.crumbs a:hover { color: var(--ink-hover); }
.crumbs [aria-current="page"] { color: var(--text); }

/* 5. ПЕРВЫЙ ЭКРАН */
.hero { padding: 20px 0 8px; }
.hero h1, .prose h1 { /* 1.22, не 1.15: у ə, ğ, ş выносные выше */
  margin: 0 0 10px; font-size: clamp(1.55rem, 5.2vw, 2.15rem);
  line-height: 1.22; font-weight: 700; letter-spacing: -0.01em;
}
.tagline { margin: 0 0 18px; max-width: 42ch; font-size: 1.05rem; line-height: 1.5; color: var(--muted); }

/* 6. .prose: полоса ответа, заголовки, списки, цитаты, code, таблицы */
.prose { max-width: 680px; -webkit-hyphens: none; hyphens: none; overflow-wrap: break-word; }
.prose h2, .list h2, .related h2, .faq h2 {
  margin: 30px 0 10px; padding-left: 12px; border-left: 4px solid var(--accent);
  font-size: clamp(1.25rem, 3.4vw, 1.45rem); line-height: 1.3; font-weight: 700;
}
.list h2, .related h2 { margin-top: 0; }
.prose h3 { margin: 24px 0 8px; font-size: 1.08rem; line-height: 1.35; font-weight: 700; }
.prose p { margin: 0 0 14px; }
.prose p, .prose li { font-size: 1.06rem; line-height: 1.65; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose ol > li::marker { color: var(--ink); font-weight: 700; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink-hover); }
.prose strong { color: var(--text); font-weight: 700; }
.prose blockquote {
  margin: 16px 0; padding: 12px 16px; background: var(--tint); color: var(--text);
  border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; font-style: normal;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  padding: 1px 5px; background: var(--tint); border-radius: 6px;
  font-family: var(--mono); font-size: 0.92em; font-variant-numeric: tabular-nums;
}
.prose pre {
  margin: 16px 0; padding: 12px 14px; background: var(--tint);
  border: 1px solid var(--line); border-radius: 12px; overflow-x: auto;
}
.prose pre code { padding: 0; background: none; border-radius: 0; }
.prose img { border-radius: 12px; }
.prose table { /* широкая таблица скроллится внутри себя */
  display: block; width: 100%; margin: 16px 0; overflow-x: auto;
  border-collapse: collapse; font-size: 0.92rem;
}
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.prose th { background: var(--tint); font-weight: 700; }
/* ПОЛОСА ОТВЕТА. :not(.meta) обязателен везде: иначе полосу получит «Источник данных» */
.prose > p:first-of-type:not(.meta),
.prose > p.meta + p:not(.meta),
.prose > .toc + p:not(.meta),
.prose > .card + p:not(.meta) {
  margin: 16px 0 20px; padding: 14px 16px; background: var(--tint); color: var(--text);
  border-left: 6px solid var(--accent); border-radius: 0 12px 12px 0;
  font-size: 1.15rem; line-height: 1.55;
}

/* 7. .meta и .toc */
.meta, .prose .meta { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.45; color: var(--muted); }
.meta time { font-variant-numeric: tabular-nums; }
.meta a { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 0; color: var(--ink); }
.toc { margin: 18px 0 22px; padding: 12px 16px; background: var(--tint); border: 0; border-radius: 12px; font-size: 0.95rem; }
.toc strong { display: block; margin-bottom: 6px; color: var(--text); font-weight: 700; }
.toc ol { margin: 0; padding-left: 20px; }
.toc ol li { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.toc ol li::marker { color: var(--ink); font-weight: 700; }
.toc a {
  display: inline-block; min-height: 48px; padding: 12px 0;
  color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
}

/* 8. КАРТОЧКА ДАННЫХ */
.card { display: block; margin: 0 0 20px; }
.card div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.card div:last-child { border-bottom: 1px solid var(--line); }
.card dt { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.card dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* 9. FAQ */
.faq { margin: 28px 0; }
.faq details { /* full-bleed на мобильном */
  margin: 8px -16px; background: var(--surface); border: 1px solid var(--line);
  border-left: 0; border-right: 0; border-radius: 0;
}
.faq summary {
  position: relative; display: flex; align-items: center; min-height: 52px;
  padding: 14px 46px 14px 16px; font-weight: 700; list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { /* знак + заливка: не один цвет */
  content: "+"; content: "+" / ""; position: absolute; right: 16px;
  color: var(--ink); font-size: 1.4rem; line-height: 1;
}
.faq details[open] summary::after { content: "−"; content: "−" / ""; }
.faq details[open] summary { background: var(--tint); border-bottom: 1px solid var(--line); }
.faq details p { margin: 0; padding: 12px 16px 14px; font-size: 1.02rem; line-height: 1.6; }

/* 10. СПИСКИ-КАРТОЧКИ */
.list { margin: 32px 0; }
.cards { list-style: none; display: grid; gap: 0; margin: 0 -16px; padding: 0; } /* до 619px — «лист» */
.cards li {
  position: relative; padding: 14px 40px 14px 16px; background: var(--surface);
  border-top: 1px solid var(--line); transition: background-color 120ms linear;
}
.cards li:last-child { border-bottom: 1px solid var(--line); }
.cards li:hover { background: var(--tint); }
.cards li a {
  display: flex; align-items: center; min-height: 48px; color: var(--text);
  font-size: 1.05rem; line-height: 1.35; font-weight: 700; text-decoration: none;
}
.cards li a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cards li a::after { content: ""; position: absolute; inset: 0; }
.cards li a::before { /* направление глифом, не цветом */
  content: "›"; content: "›" / ""; position: absolute; right: 14px; top: 0; bottom: 0;
  display: flex; align-items: center; color: var(--ink); font-size: 1.5rem;
}
.cards li p { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.cards li p:empty { display: none; } /* в «Бөлімдер» описания приходят пустыми */
.cards.langs-grid { margin: 20px 0 0; gap: 10px; }
.cards.langs-grid li {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
}
.cards.langs-grid li::before { /* бейдж attr(lang); 2-е объявление — не читать вслух */
  content: attr(lang); content: attr(lang) / "";
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--tint); color: var(--ink);
  font-weight: 800; font-size: 1.15rem; line-height: 1; letter-spacing: 0.02em;
  text-transform: uppercase; /* единственный uppercase: тут нет буквы i */
}
.cards.langs-grid li a {
  grid-column: 2; grid-row: 1; display: block; min-height: 0;
  font-size: 1.15rem; font-weight: 700; color: var(--text);
}
.cards.langs-grid li a::before { display: none; }
.cards.langs-grid li p { grid-column: 2; grid-row: 2; margin: 2px 0 0; font-size: 0.9rem; }
.related { margin: 32px 0; max-width: 680px; }
.related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.related li { border-bottom: 1px solid var(--line); }
.related a {
  display: flex; align-items: center; min-height: 48px; padding: 12px 0;
  color: var(--ink); text-decoration: none;
}
.related a:hover { color: var(--ink-hover); text-decoration: underline; text-underline-offset: 3px; }

/* 11. ИНСТРУМЕНТ (на KimBu не рендерится, но обязан работать) */
.tool { margin: 16px 0 28px; padding: 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.tool h2 { margin: 0 0 12px; padding-left: 0; border-left: 0; font-size: 1.25rem; line-height: 1.3; }
#num-form { display: flex; flex-wrap: wrap; gap: 10px; }
#num-input { /* 17px ровно, не rem: иначе iOS зумит форму */
  flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 12px 14px;
  border: 1px solid var(--edge); border-radius: 12px;
  background: var(--surface); color: var(--text); font-family: var(--font);
  font-size: 17px; font-variant-numeric: tabular-nums;
}
#num-input::placeholder { color: var(--muted); opacity: 1; }
#num-form button {
  flex: 1 1 100%; min-height: 52px; padding: 12px 20px; border: 0;
  border-bottom: 3px solid var(--lip); border-radius: 999px;
  background: var(--accent); color: var(--dark); font: 700 1.05rem/1.2 var(--font);
  cursor: pointer; touch-action: manipulation; transition: transform 120ms linear;
}
#num-form button:active { transform: translateY(1px); }
.hint, .tool .hint { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
#num-result, .result { margin-top: 14px; padding: 14px; background: var(--tint); border-radius: 12px; }
.result dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.result dt { color: var(--muted); font-size: 0.9rem; }
.result dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.result p { margin: 12px 0 0; }
.result a { color: var(--ink); }

/* 12. CTA И КНОПКА */
.cta { /* full-bleed на мобильном */
  margin: 40px -16px; padding: 24px 16px; background: var(--cta-bg);
  border: 1px solid var(--cta-edge); border-radius: 0; text-align: center;
}
.cta h2 {
  margin: 0 0 8px; padding-left: 0; border-left: 0;
  font-size: 1.35rem; line-height: 1.3; font-weight: 700; color: var(--cta-h);
}
.cta p { margin: 0 0 16px; color: var(--cta-p); }
.btn { /* тёмный текст на янтаре; «губа» вместо тени */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 14px 24px;
  border: 0; border-bottom: 3px solid var(--lip); border-radius: 999px;
  background: var(--accent); color: var(--dark);
  font-size: 1.05rem; line-height: 1.2; font-weight: 700;
  text-align: center; text-decoration: none; cursor: pointer;
  touch-action: manipulation; transition: transform 120ms linear;
}
.btn:hover { color: var(--dark); }
.btn:active { transform: translateY(1px); }
.btn.locked, .btn.js-tg.locked { /* заливка, не opacity: контраст */
  background: var(--accent-soft); color: var(--locked-ink);
  border-bottom-color: var(--lip-locked); cursor: progress;
}

/* 13. ПОДВАЛ */
.foot {
  margin-top: 40px; padding: 20px 0 28px; background: var(--foot-bg);
  border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem;
}
.footnav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 8px; }
.footnav a {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.footnav a:hover { color: var(--ink-hover); }
.copy { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* 14. СОСТОЯНИЯ */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.status, .status.js-status { /* min-height — резерв под site.js, иначе CLS */
  min-height: 1.4em; margin: 10px 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--muted);
}
.cta .status { color: var(--cta-p); }
.err, .status.err { color: var(--err); font-weight: 700; }
.status.err::before { content: "⚠ "; content: "⚠ " / ""; }
.cta .status.err { color: var(--cta-err); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* outline: тень режут ленты */
.top :focus-visible { outline-color: var(--top-focus); }
.cta .btn:focus-visible { outline-color: #FFD166; }

/* 15. МЕДИАЗАПРОСЫ (мобильный-first) */
@media (min-width: 520px) {
  #num-form button { flex: 0 0 auto; }
  .result dl { grid-template-columns: max-content 1fr; gap: 6px 14px; }
}
@media (min-width: 560px) {
  .cards.langs-grid { grid-template-columns: 1fr 1fr; }
  .cards.langs-grid li { display: block; min-height: 132px; padding: 16px; }
  .cards.langs-grid li::before { margin-bottom: 10px; }
  .cards.langs-grid li p { margin-top: 6px; }
}
@media (min-width: 601px) { /* конец full-bleed */
  .cta { margin: 40px 0; padding: 28px 24px; border-radius: 16px; }
  .faq details {
    margin: 8px 0; border-left: 1px solid var(--line);
    border-right: 1px solid var(--line); border-radius: 12px;
  }
  .faq details[open] summary { border-radius: 11px 11px 0 0; }
  .btn { width: auto; }
}
@media (min-width: 620px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
  .cards li { border: 1px solid var(--line); border-radius: 14px; padding: 16px 40px 16px 16px; }
  .card {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
    padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  }
  .card div { display: block; padding: 0; border: 0; }
  .card div:last-child { border-bottom: 0; }
  .card dd { margin-top: 2px; text-align: left; }
}
@media (min-width: 720px) { /* шапка статична, лент нет */
  .bar { gap: 10px; padding: 6px 0 10px; }
  .nav { flex-wrap: wrap; min-height: 0; padding-bottom: 0; padding-inline-end: 0; overflow: visible; }
  .nav a { max-width: none; }
  .langs { justify-content: flex-end; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .langs a[aria-current="true"] { order: 0; }
  .hero { padding: 32px 0 12px; }
}

/* 16. ТЁМНАЯ ТЕМА: тёплый уголь; шапка = фирменная иконка */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13100B; --surface: #201A10; --tint: #2A2010;
    --text: #F7EFE1; --muted: #C0AC8E;
    --line: #382E1D; --edge: #9A7A4E;
    --accent-soft: #3A2E17;
    --ink: #FBBF24; --ink-hover: #FFD166; /* ночью янтарь работает и как текст */
    --err: #FF9C8A; --focus: #FFD166;
    --top-bg: #1F1308; --top-edge: #FBBF24; --top-ink: #FBBF24; --top-focus: #FFD166;
    --chip-edge: #C0AC8E; --chip-ink: #F7EFE1; --pill-bg: #FBBF24; --pill-ink: #1F1308;
    --cta-bg: #201A10; --cta-edge: #382E1D; /* #1F1308 слился бы с фоном */
    --cta-h: #F7EFE1; --cta-p: #C0AC8E; --cta-err: #FF9C8A;
    --lip-locked: #241C0E; --locked-ink: #C0AC8E;
    --foot-bg: #201A10;
  }
}

/* 17. PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:active, #num-form button:active { transform: none; }
}


/* 18. ПОЛИРОВКА: свечение первого экрана, чипы фактов, иконки разделов, лента разделов с затуханием */
:root{ --glow:rgba(251,191,36,.38);
--i-phone: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='M6 3h3l2 5-2 1.5a12 12 0 0 0 5.5 5.5L16 13l5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 4 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
--i-shield: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='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
--i-sim: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='M8 3h6l4 4v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E");
--i-lock: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%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
--i-compare: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 7h12M12 3l4 4-4 4M20 17H8M12 13l-4 4 4 4'/%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"); }
@media (prefers-color-scheme: dark){ :root{ --glow:rgba(251,191,36,.12) } }
.hero{ margin-top:18px; padding:24px 18px 20px; border:1px solid var(--line); border-radius:18px;
  background:radial-gradient(70% 80% at 0% 0%,var(--glow),rgba(251,191,36,0) 60%),var(--surface) }
.kind-chooser .hero h1{ font-size:1.45rem }
.facts{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.facts li{ padding:7px 12px; border-radius:999px; background:var(--tint); color:var(--text); font-size:.85rem; font-weight:600; line-height:1.3 }
.nav{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent) }
/* карточки разделов: тёплая плитка с иконкой слева, стрелка справа */
.cards:not(.langs-grid) li{ padding-left:72px }
.cards:not(.langs-grid) li::before{ content:""; position:absolute; left:16px; top:14px; width:42px; height:42px;
  border-radius:12px; background:var(--tint) }
.cards:not(.langs-grid) li::after{ content:"›"; content:"›" / ""; position:absolute; right:14px; top:0; bottom:0;
  display:flex; align-items:center; color:var(--ink); font-size:1.5rem }
.cards:not(.langs-grid) li a::before{ content:""; display:none; position:absolute; left:16px; right:auto; top:14px; bottom:auto;
  width:42px; height:42px; background-color:var(--ink);
  -webkit-mask:var(--ico) center/24px no-repeat; mask:var(--ico) center/24px no-repeat }
.cards li a[href*="/who-called/"]::before{ display:block; --ico:var(--i-phone) }
.cards li a[href*="/scam/"]::before{ display:block; --ico:var(--i-shield) }
.cards li a[href*="/operators/"]::before{ display:block; --ico:var(--i-sim) }
.cards li a[href*="/compare/"]::before{ display:block; --ico:var(--i-compare) }
.cards li a[href*="/dictionary/"]::before{ display:block; --ico:var(--i-book) }
.cards li a[href*="/privacy/"]::before{ display:block; --ico:var(--i-lock) }
.cta{ background:radial-gradient(60% 70% at 100% 0%,rgba(251,191,36,.22),rgba(251,191,36,0) 60%),var(--cta-bg) }
@media (min-width:620px){
  .cards:not(.langs-grid) li{ padding:16px 40px 16px 72px }
  .cards:not(.langs-grid) li::before,.cards:not(.langs-grid) li a::before{ top:16px }
}
@media (min-width:720px){
  .nav{ -webkit-mask-image:none; mask-image:none }
  .hero{ padding:34px 30px 26px }
}
: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") }
.cards li a[href*="/about/"]::before{ display:block; --ico:var(--i-info) }


/* 19. ШРИФТЫ И МЕДИА: Nunito в заголовках и кнопках, фото стран, блоки главной */
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/nunito-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:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/nunito-latin-ext-800.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:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/nunito-cyrillic-800.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/nunito-cyrillic-ext-800.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
:root{ --display:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif }
.hero h1,.prose h1,.prose h2,.list h2,.related h2,.faq h2,.cta h2,.brand,.btn,#num-form button{ font-family:var(--display); font-weight:800 }
.hero h1,.prose h1{ font-size:clamp(1.65rem,5.4vw,2.35rem); letter-spacing:-.015em }

.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 } }

.hero-media img,.cover img{ border-radius:18px }
.cards:not(.langs-grid) li .thumb{ display:none }
.cards.langs-grid li{ grid-template-rows:auto auto auto }
.cards.langs-grid li .thumb{ grid-column:1 / -1; grid-row:1; width:calc(100% + 32px); margin:-14px -16px 12px; border-radius:14px 14px 0 0; aspect-ratio:2/1 }
.cards.langs-grid li::before{ grid-row:2 / span 2 }
.cards.langs-grid li a{ grid-row:2 }
.cards.langs-grid li p{ grid-row:3 }
.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:14px 16px; border:1px solid var(--line); border-radius:14px; 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:14px 16px 14px 66px; border:1px solid var(--line); border-radius:14px; background:var(--surface) }
.kind-home .prose>ol>li::before{ content:counter(step); position:absolute; left:14px; top:12px; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font:800 1.1rem/1 var(--display); color:var(--dark); background:var(--accent) }
@media (min-width:560px){
  .cards.langs-grid li{ display:grid }
  .cards.langs-grid li .thumb{ margin:-16px -16px 12px; width:calc(100% + 32px) }
}
@media (min-width:620px){ .cards:not(.langs-grid) li .thumb{ display:block; margin:-16px -40px 12px -72px; width:calc(100% + 112px); border-radius:14px 14px 0 0 } }
@media (min-width:720px){ .kind-home .prose>ul{ grid-template-columns:1fr 1fr } .kind-home .prose{ max-width:none } }