/* SeeTheNumber (seethenumber.app, hub) — «Линейка и бумага»: документ, а не лендинг; всё держат
   волосяные линейки, подпись сайта — пунктирная сигнальная линия из трёх штрихов фавикона. */

/* ===== 1. ПЕРЕМЕННЫЕ И ТЕМЫ (контрасты посчитаны формулой WCAG 2.x) ===== */
:root{
color-scheme: light dark;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
/* Georgia НЕ содержит Ә Ғ Қ Ң Ө Ұ Ү ə — первой её ставить нельзя */
--serif: ui-serif, "Noto Serif", "PT Serif", Georgia, "Times New Roman", serif;
--bg:#FBFCFE;
--bg-0:rgba(251,252,254,0);  /* bg с alpha 0 — для градиентов-подсказок */
--surface:#EEF3FA;
--text:#0E1730;              /* 17.28:1 на bg | 15.91:1 на surface */
--muted:#55627E;             /*  5.96:1 на bg |  5.48:1 на surface */
--line:#D6DEEC; --line-strong:#B9C4D8;
--accent:#1B62E0;            /*  5.29:1 на bg |  4.87:1 на surface */
--accent-2:#33C3FF;          /*  1.97:1 — ТОЛЬКО заливка и линии, текстом не бывает */
--ink:#06122B;
--dark:#0B1226;              /* .cta = фон иконки */
--header-bg:#0B1226; --hb0:rgba(11,18,38,0);
--on-dark:#FFFFFF; --on-dark-2:#A9BCE4;   /* 18.60 | 9.75 */
--nav-link:#BFD2F2; --lang-link:#8FA6D4;  /* 12.15 | 7.60 */
--row-line:rgba(255,255,255,.10);
--err:#C62828; --err-on-dark:#FF8A80;     /* 5.48 | 8.15 */
--locked-bg:#DDE3EE; --locked-ink:#3E4A66;/* 6.86 */
--focus:#1B62E0; --focus-dark:#6FD0FF;    /* 10.76 на #0B1226 */
--sh:rgba(14,23,48,.18); --sh0:rgba(14,23,48,0);
--r:4px;
}
/* Тёмная — не инверсия: фон = фон иконки; шапка ГЛУБЖЕ фона (1.05:1), границу держит линия */
@media (prefers-color-scheme: dark){
:root{
--bg:#0B1226; --bg-0:rgba(11,18,38,0);
--surface:#16213F;           /* 1.17:1 к фону, всегда с --line */
--text:#E7EDFB;              /* 15.86:1 | 13.53:1 */
--muted:#93A3C8;             /*  7.37:1 |  6.28:1 */
--line:#2B385A; --line-strong:#3B4A72;
--accent:#6FD0FF;            /* 10.76:1 | 9.17:1 */
--dark:#16213F;
--header-bg:#060C1B; --hb0:rgba(6,12,27,0);
--on-dark-2:#A9BCE4;         /* 8.31 */
--row-line:rgba(255,255,255,.12);
--err:#FF8A80;
--locked-bg:#222E4C; --locked-ink:#E7EDFB;/* 11.45 */
--focus:#6FD0FF;
--sh:rgba(0,0,0,.5); --sh0:rgba(0,0,0,0);
}
}

/* ===== 2. RESET И БАЗОВАЯ ТИПОГРАФИКА ===== */
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--text); font:17px/1.65 var(--sans); -webkit-font-smoothing:antialiased }
img{ max-width:100%; height:auto }
[hidden]{ display:none !important }
h1,h2,h3{ margin:0 }
h1{ font-family:var(--serif); font-size:clamp(1.72rem,6.2vw,2.5rem); line-height:1.15; letter-spacing:-.015em;
font-weight:700; text-wrap:balance; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1 }
h2{ font-size:clamp(1.3rem,4.4vw,1.62rem); line-height:1.25; font-weight:700; text-wrap:balance }
h3{ font-size:1.1rem; line-height:1.35; font-weight:700 }
p{ margin:0 0 16px }
a{ color:var(--accent) }
input,select,textarea{ font-size:17px }   /* ≥16px, иначе iOS зумит форму */
/* .wrap висит и на .bar, и на <main>: только ширина, никаких padding */
.wrap{ width:min(1000px, 100% - 32px); margin:0 auto }
/* Сигнальная линия — подпись сайта, эхо трёх штрихов иконки. Ровно три места: низ .top, верх
.cta, низ .foot. Без masks (старые WebView): верхний слой закрашивает промежутки. */
.top,.cta,.foot{
background-image:
repeating-linear-gradient(90deg,var(--bg-0) 0 14px,var(--bg) 14px 20px),
linear-gradient(90deg,#33C3FF,#2F7BFF);
background-size:100% 4px; background-repeat:no-repeat }

/* ===== 3. ШАПКА — не липкая и не fixed: на дешёвом Android полоса дрожит ===== */
.top{ background-color:var(--header-bg); background-position:bottom; padding-bottom:6px }
.bar{ display:flex; flex-wrap:wrap; align-items:center; min-width:0 }
.brand,.nav a,.langs a,.crumbs a,.footnav a{ display:inline-flex; align-items:center; min-height:48px; text-decoration:none }
.brand{ font-family:var(--serif); font-weight:700; font-size:1.15rem; color:var(--on-dark) }
.brand::before{ /* мелкое эхо мотива: знак 16×12, три штриха */
content:""; width:16px; height:12px; margin-right:9px; flex:0 0 16px;
background-image:
repeating-linear-gradient(180deg,var(--hb0) 0 2px,var(--header-bg) 2px 5px),
linear-gradient(90deg,#33C3FF,#2F7BFF) }
/* Рельсы: три ряда переносом, `order` не используется — порядок табуляции = визуальный.
min-width:0 у .bar и рельсов: без него на 320px едет ВСЯ страница. */
.nav,.langs{ flex:1 1 100%; min-width:0; display:flex; flex-wrap:nowrap; white-space:nowrap;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
border-top:1px solid var(--row-line);
background-image:linear-gradient(90deg,var(--hb0),var(--header-bg));
background-size:26px 100%; background-repeat:no-repeat; background-position:right }
.nav::-webkit-scrollbar,.langs::-webkit-scrollbar{ display:none }
.nav::after,.langs::after{ content:""; flex:0 0 26px }
.nav a{ padding:0 12px; margin-right:8px; font-size:.95rem; color:var(--nav-link) }
.langs a{ padding:0 10px; margin-right:8px; font-size:.85rem; color:var(--lang-link) } /* 48px: контракт */
.nav a:first-child,.langs a:first-child{ padding-left:0 }
.nav a:hover,.nav a:focus-visible,.langs a:hover,.langs a:focus-visible,.langs a[aria-current="true"]{
color:var(--on-dark); box-shadow:inset 0 -2px 0 var(--accent-2) }
.langs a[aria-current="true"]{ font-weight:600 }  /* текущий язык: два сигнала, не только цвет */

/* ===== 4. КРОШКИ — подпись, а не панель: ни фона, ни рамки ===== */
.crumbs ol{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:2px 8px;
font-size:.85rem; color:var(--muted) }
.crumbs li+li::before{ content:"›"; margin-right:8px; color:var(--line-strong) }
.crumbs a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px }
.crumbs a:hover,.crumbs [aria-current="page"]{ color:var(--text) }

/* ===== 5. ПЕРВЫЙ ЭКРАН — на бумаге, без плиты и бейджей доверия ===== */
.hero{ padding:32px 0 20px }
.hero h1{ margin:0 0 12px }
.tagline{ font-size:1.15rem; line-height:1.5; color:var(--muted); max-width:34rem; margin:0 0 24px }

/* ===== 6. ТЕЛО СТАТЬИ — мера 42rem, прижата влево ===== */
.prose{ max-width:42rem; overflow-wrap:break-word }  /* НЕ anywhere: ломает расчёт ширины таблиц */
.prose h1{ margin:18px 0 10px }
.prose h2{ border-top:1px solid var(--line); margin:32px 0 12px; padding-top:22px }
.prose h2::before{ /* среднее эхо мотива: 29×3. Номеров у h2 НЕТ — в тексте уже «Способ 1. …» */
content:""; display:block; width:29px; height:3px; margin-bottom:12px;
background-image:repeating-linear-gradient(90deg,var(--accent) 0 7px,var(--bg-0) 7px 11px) }
.prose h3{ margin:24px 0 8px }
.prose p,.prose li{ font-size:1rem }
.prose a{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
.prose a:hover,.prose a:focus-visible{ text-decoration-thickness:2px }
.prose strong{ font-weight:700; color:inherit }
.prose ul,.prose ol{ padding-left:22px; margin:0 0 16px }
.prose li{ margin:6px 0 }
.prose li::marker{ color:var(--muted) }
.prose blockquote{ /* без фона и не приглушаем: в цитатах предупреждение о схеме */
margin:20px 0; padding:2px 0 2px 16px; border-left:3px solid var(--accent); color:var(--text) }
.prose code{ background:var(--surface); padding:1px 5px; border-radius:var(--r); font-size:.92em }
.prose pre{ /* форматы номеров в живой статье; без правила 320px ломается */
overflow-x:auto; background:var(--surface); padding:12px 14px; border-radius:var(--r);
font-size:.9rem; line-height:1.5; margin:20px 0 }
.prose pre code{ background:none; padding:0 }
/* Лид-абзац: в живых статьях текст начинается словами «Быстрый ответ:» */
.prose>p:first-child,.prose>h1+p:not(.meta),.prose>.meta+p:not(.meta),.prose>.toc+p,.prose>.card+p:not(.meta){
font-size:1.15rem; line-height:1.6; color:var(--text);
border-left:3px solid var(--accent); padding-left:16px; margin:18px 0 24px }
/* Таблицы: газетная сетка, прокрутка внутри контейнера. Подсказка — «покрытия» (local) поверх
теней (scroll); стопы только rgba: transparent даёт кайму на старых WebKit. */
.prose table{ display:block; overflow-x:auto; border-collapse:collapse; width:100%;
margin:20px 0; font-size:.95rem; line-height:1.45;
background:
linear-gradient(90deg,var(--bg) 30%,var(--bg-0)) left/28px 100% no-repeat local,
linear-gradient(90deg,var(--bg-0),var(--bg) 70%) right/28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,var(--sh),var(--sh0)) left/14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,var(--sh),var(--sh0)) right/14px 100% no-repeat scroll }
.prose td,.prose th{ border-bottom:1px solid var(--line); padding:10px 12px; text-align:left;
vertical-align:top; min-width:7.5rem }
.prose td{ font-variant-numeric:tabular-nums }
.prose th{ background:var(--surface); color:var(--text); font-size:.8rem; text-transform:uppercase;
letter-spacing:.07em; white-space:nowrap; border-bottom:2px solid var(--line-strong) }
/* выходные данные под h1: сигнал доверия, ради него линейка снизу */
.meta{ font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums;
margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.meta a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }

/* ===== 7. ОГЛАВЛЕНИЕ — единственный залитый блок в теле статьи ===== */
.toc{ position:relative; counter-reset:tocn; background:var(--surface);
border:1px solid var(--line); border-left:3px solid var(--accent); padding:14px 16px; margin:20px 0 26px }
.toc strong{ display:block; margin-bottom:6px; font-size:.8rem; font-weight:600;
text-transform:uppercase; letter-spacing:.07em; color:var(--muted) }
.toc ol{ list-style:none; margin:0; padding:0 }
.toc li{ counter-increment:tocn; border-top:1px solid var(--line) }
.toc li:first-child{ border-top:0 }
.toc a{ display:block; padding:13px 0; min-height:48px; line-height:1.4; color:var(--text); text-decoration:none }
/* счётчик один раз: число пунктов в углу — «Содержание … 14» */
.toc::after{ content:counter(tocn); position:absolute; top:13px; right:16px; font-size:.8rem;
font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums }

/* ===== 8. КАРТОЧКА ДАННЫХ — не коробка, а таблица определений ===== */
.card{ margin:0 0 22px; display:grid; grid-template-columns:1fr; gap:0;
border-left:3px solid var(--accent); padding-left:16px }
.card div{ border-top:1px solid var(--line); padding:12px 0 }
.card dt{ font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted) }
.card dd{ margin:3px 0 0; font-size:1.05rem; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums }

/* ===== 9. FAQ — полосы, не плитки; состояние передаёт форма знака ===== */
.faq details{ border-top:1px solid var(--line) }
.faq details:last-of-type{ border-bottom:1px solid var(--line) }
.faq summary{ position:relative; min-height:48px; padding:15px 40px 15px 0; font-weight:600;
cursor:pointer; list-style:none }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ /* смена глифа, а не поворот: повёрнутый «+» читается как «закрыть» */
content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
font-size:1.3rem; font-weight:400; line-height:1; color:var(--accent) }
.faq details[open] summary::after{ content:"−" }
.faq details p{ margin:0 0 16px; color:var(--text) }

/* ===== 10. СПИСКИ-КАРТОЧКИ — реестр, а не карточки ===== */
.list{ margin:32px 0 }
.list h2,.related h2{ /* рубрики: не спорят с заголовками статьи */
font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
color:var(--muted); margin:0 0 4px }
.cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 }
.cards li{ border-top:1px solid var(--line); padding:6px 0 16px }
.cards li a{ display:block; padding:11px 0 6px; min-height:48px; font-size:1.05rem; font-weight:600;
line-height:1.35; color:var(--text); text-decoration:none }
.cards li p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--muted) }
.cards li p:empty{ display:none }   /* карточки разделов приходят с литеральным <p></p> */
.langs-grid{ margin-top:20px }
.langs-grid li a{ font-size:1.1rem }
.related{ margin:32px 0; max-width:42rem }
.related ul{ list-style:none; margin:0; padding:0 }
.related li{ border-top:1px solid var(--line) }
.related a{ display:block; padding:14px 0; min-height:48px; line-height:1.4; color:var(--text); text-decoration:none }
.toc a:hover,.toc a:focus-visible,.cards li a:hover,.cards li a:focus-visible,
.related a:hover,.related a:focus-visible{
text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px }

/* ===== 11. ИНСТРУМЕНТ — на hub не рендерится, но селекторы контракта обязаны работать ===== */
.tool{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
padding:16px; margin:20px 0 26px }
.tool h2{ margin:0 0 12px; font-size:1.2rem; border:0; padding:0 }
.tool h2::before{ content:none }
#num-form{ display:flex; flex-wrap:wrap; gap:10px }
#num-input{ flex:1 1 220px; min-height:52px; padding:12px 14px; border:1px solid var(--line-strong);
border-radius:var(--r); background:var(--bg); color:var(--text) }
#num-form button{ min-height:52px; padding:14px 22px; border:1px solid #2F7BFF; border-radius:var(--r);
font:700 1rem var(--sans); color:var(--ink); background:linear-gradient(90deg,#33C3FF,#2F7BFF);
cursor:pointer; touch-action:manipulation }
.hint{ margin:10px 0 0; font-size:.85rem; color:var(--muted) }
.result,#num-result{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line) }
.result dl{ margin:0; display:grid; grid-template-columns:1fr; gap:0 }
.result dt{ font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted) }
.result dd{ margin:0 0 10px; font-weight:600; font-variant-numeric:tabular-nums }
.result p{ margin:0 }

/* ===== 12. CTA И КНОПКА — текст по левому краю: центровка это язык рекламы ===== */
.cta{ background-color:var(--dark); background-position:top; color:var(--on-dark);
padding:26px 20px; margin-top:44px; border-radius:0 }
.cta h2{ margin:0 0 8px; font-size:1.35rem; color:var(--on-dark); border:0; padding:0 }
.cta h2::before{ content:none }
.cta p{ margin:0 0 20px; color:var(--on-dark-2) }
/* Подпись ВСЕГДА --ink #06122B: 9.20:1 на #33C3FF, 4.78:1 на #2F7BFF. Белая запрещена навсегда:
#FFF на #2F7BFF = 3.89:1. Рамка #2F7BFF — 3.79:1 к бумаге, это WCAG 1.4.11. Теней нет. */
.btn{ display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:52px;
padding:15px 26px; border-radius:var(--r); font-weight:700; text-decoration:none; color:var(--ink);
background:linear-gradient(90deg,#33C3FF,#2F7BFF); border:1px solid #2F7BFF;
touch-action:manipulation; transition:transform .18s ease }
.btn:hover{ transform:translateY(-1px) }
.js-tg{ cursor:pointer }
.btn.locked{ /* цвет + пунктир + aria-disabled; opacity запрещена — роняет контраст до ~2.4:1 */
background:var(--locked-bg); background-image:none; border:2px dashed var(--muted);
color:var(--locked-ink); cursor:progress }
.btn.locked:hover{ transform:none }
.status{ min-height:1.3em; margin:12px 0 0; font-size:.85rem; color:var(--muted) } /* резерв против CLS */
.js-status{ overflow-wrap:break-word }
.cta .status{ color:var(--on-dark-2) }
.status.err{ color:var(--err) }
.status.err::before{ content:"! "; font-weight:700 }  /* ошибка не кодируется одним цветом */
.cta .status.err{ color:var(--err-on-dark) }

/* ===== 13. ПОДВАЛ — дублирует разделы; внизу третья линия, «конец передачи» ===== */
.foot{ margin-top:40px; padding:28px 0 32px; border-top:1px solid var(--line);
background-color:var(--bg); background-position:bottom; color:var(--muted); font-size:.85rem }
.footnav{ display:flex; flex-wrap:wrap; gap:0 24px; margin-bottom:10px }
.footnav a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px }
.footnav a:hover{ color:var(--text) }
.copy{ margin:0 }

/* ===== 14. СОСТОЯНИЯ ===== */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }
.top :focus-visible,.cta :focus-visible{ outline-color:var(--focus-dark) }
.faq summary:focus-visible{ outline-offset:-3px }
.btn:focus-visible{ outline-offset:3px }
.sr{ /* visually-hidden без обрезки по clip; НИКОГДА не display:none */
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; border:0 }

/* ===== 15. МЕДИАЗАПРОСЫ (мобильный-first, расширения через min-width) ===== */
@media (max-width:360px){ .wrap{ width:calc(100% - 24px) } }  /* на 320px даёт 296px контента */
@media (max-width:600px){ .prose p{ hyphens:auto } }
@media (max-width:700px){
/* 14 пунктов иначе отодвигают лид на экран вниз; ссылки остаются в DOM. ОТКАТ: снять max-height */
.toc ol{ max-height:14.5em; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
background:linear-gradient(180deg,var(--bg-0),var(--surface)) bottom/100% 24px no-repeat local }
}
@media (min-width:480px){
.card{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); column-gap:28px }
.langs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px }
.result dl{ grid-template-columns:max-content 1fr; gap:4px 20px }
.result dd{ margin:0 }
}
@media (min-width:601px){ .btn{ width:auto } }
@media (min-width:720px){
.hero{ padding:44px 0 24px }
.prose h2{ margin-top:40px; padding-top:26px }
.list,.related{ margin:40px 0 }
.cards{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px }
.cta{ padding:32px 28px; margin-top:56px }
}
@media (min-width:900px){
body{ line-height:1.7 }
/* десктоп: без прокрутки, длинные пункты переносятся во вторую строку */
.nav{ flex:1 1 auto; flex-wrap:wrap; overflow:visible; border-top:0; background-image:none }
.langs{ flex:1 1 100%; flex-wrap:wrap; justify-content:flex-end; overflow:visible; border-top:0; background-image:none }
.nav::after,.langs::after{ content:none }
}

/* ===== 16. PREFERS-REDUCED-MOTION (анимируются только transform/opacity) ===== */
@media (prefers-reduced-motion: reduce){
*{ transition:none !important; animation:none !important }
.btn:hover{ transform:none }
}


/* ===== 17. ПОЛИРОВКА: знак бренда, первый экран, карточки с иконками, FAQ, CTA ===== */
:root{ --glow-a:rgba(51,195,255,.22); --glow-b:rgba(47,123,255,.16);
--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-a:rgba(51,195,255,.14); --glow-b:rgba(47,123,255,.22) } }
/* знак бренда: кольцо в фирменном градиенте (прежние три штриха читались как «меню») */
.brand::before{ width:18px; height:18px; flex-basis:18px; margin-right:10px; border-radius:50%;
border:3px solid transparent;
background:linear-gradient(var(--header-bg),var(--header-bg)) padding-box,
linear-gradient(135deg,#33C3FF,#2F7BFF) border-box }
.nav a{ font-weight:500 }
/* первый экран: панель с мягким свечением в цветах иконки */
.hero{ position:relative; margin-top:18px; padding:28px 20px 22px; border:1px solid var(--line); border-radius:16px;
background:radial-gradient(60% 70% at 6% 0%,var(--glow-a),var(--bg-0) 60%),
radial-gradient(50% 60% at 100% 100%,var(--glow-b),var(--bg-0) 60%),var(--surface) }
.hero h1{ max-width:17em }
.hero .tagline{ font-size:1.18rem; max-width:36rem }
.hero .btn{ box-shadow:0 10px 24px rgba(47,123,255,.28) }
.facts{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px;
font-size:.85rem; color:var(--muted) }
.facts li{ display:inline-flex; align-items:center; gap:8px }
.facts li::before{ content:""; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#33C3FF,#2F7BFF) }
.btn{ border-radius:10px }
.btn.locked{ box-shadow:none }
/* маркер раздела: сплошной штрих вместо пунктира (пунктир читался как «---») */
.prose h2::before{ width:32px; border-radius:2px; background-image:linear-gradient(90deg,#33C3FF,#2F7BFF) }
.prose{ max-width:44rem }
/* разделы и статьи: карточки, а не список */
.cards{ gap:12px; margin-top:10px }
.cards li{ border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; background:var(--surface);
transition:border-color .15s ease }
.cards li:hover{ border-color:var(--accent) }
.cards li a{ padding:0 0 6px }
.cards li a::before{ content:""; display:none; width:30px; height:30px; margin-bottom:12px; background-color:var(--accent);
-webkit-mask:var(--ico) center/30px no-repeat; mask:var(--ico) center/30px no-repeat }
.cards li a[href*="/kto-zvonil/"]::before{ display:block; --ico:var(--i-phone) }
.cards li a[href*="/spam/"]::before{ display:block; --ico:var(--i-shield) }
.cards li a[href*="/operatory/"]::before{ display:block; --ico:var(--i-sim) }
.cards li a[href*="/privacy/"]::before{ display:block; --ico:var(--i-lock) }
.cards li a[href*="/getcontact/"]::before{ display:block; --ico:var(--i-compare) }
.langs-grid li a::before{ display:none }
.faq details{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:0 16px; margin:10px 0 }
.faq details:last-of-type{ border-bottom:1px solid var(--line) }
.faq summary::after{ right:0 }
.faq details p{ padding-bottom:2px }
.cta{ border-radius:16px; padding:28px 22px;
background-image:repeating-linear-gradient(90deg,var(--bg-0) 0 14px,var(--bg) 14px 20px),
linear-gradient(90deg,#33C3FF,#2F7BFF),
radial-gradient(70% 90% at 0% 0%,rgba(51,195,255,.32),rgba(11,18,38,0) 60%),
radial-gradient(60% 80% at 100% 100%,rgba(47,123,255,.42),rgba(11,18,38,0) 60%);
background-size:100% 4px,100% 4px,auto,auto; background-position:top,top,0 0,0 0 }
.cta .btn{ box-shadow:0 8px 20px rgba(0,0,0,.28) }
@media (min-width:720px){
.hero{ padding:40px 36px 32px }
.hero .facts{ margin-top:20px }
.cta{ padding:36px 40px }
}
@media (min-width:980px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:16px } }
: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*="/kak-rabotaet"]::before{ display:block; --ico:var(--i-info) }
@media (min-width:900px){ .brand{ margin-right:28px } }


/* ===== 18. ШРИФТЫ И МЕДИА: Literata в заголовках, иллюстрация «входящий вызов», фото, блоки главной ===== */
@font-face{font-family:"Literata";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/literata-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:"Literata";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/literata-latin-ext-700.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:"Literata";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/literata-cyrillic-700.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/literata-cyrillic-ext-700.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
:root{ --serif:"Literata", ui-serif, "Noto Serif", "PT Serif", Georgia, "Times New Roman", serif }
.prose h2,.cta h2,.faq h2,.tool h2{ font-family:var(--serif); letter-spacing:-.01em }
.hero h1{ font-size:clamp(1.9rem,6.4vw,2.8rem) }

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

/* иллюстрация: карточка входящего вызова */
.art-call{ position:relative; display:flex; justify-content:center; padding:10px 0 18px }
.call{ position:relative; width:min(300px,100%); padding:28px 22px 26px; border-radius:26px; color:#fff; text-align:center;
display:grid; gap:6px; border:1px solid rgba(255,255,255,.08);
background:radial-gradient(80% 60% at 30% 0%,rgba(51,195,255,.38),rgba(51,195,255,0) 60%),linear-gradient(160deg,#152350,#0B1226);
box-shadow:0 28px 60px rgba(11,18,38,.35) }
.call-top{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#A9BCE4 }
.call-num{ font:600 1.4rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace; letter-spacing:.02em }
.call-who{ color:#BFD2F2; font-size:.95rem; margin-bottom:16px }
.call-btns{ display:flex; justify-content:center; gap:46px }
.call-btns i{ display:block; position:relative; width:56px; height:56px; border-radius:50% }
.call-btns .no{ background:#E5484D } .call-btns .ok{ background:#2EB67D }
.call-btns i::before{ content:""; position:absolute; inset:0; margin:auto; width:24px; height:24px; background:#fff;
-webkit-mask:var(--i-phone) center/24px no-repeat; mask:var(--i-phone) center/24px no-repeat }
.call-btns .no::before{ transform:rotate(135deg) }
.call-chip{ position:absolute; bottom:0; right:max(4px,calc(50% - 150px)); padding:10px 14px; border-radius:12px;
background:linear-gradient(90deg,#33C3FF,#2F7BFF); color:#06122B; font-weight:700; font-size:.9rem;
box-shadow:0 12px 26px rgba(47,123,255,.35) }
.call-chip::before{ content:""; display:inline-block; width:16px; height:16px; margin:0 8px -3px 0; background:#06122B;
-webkit-mask:var(--i-shield) center/16px no-repeat; mask:var(--i-shield) center/16px no-repeat }
/* главная из блоков: список разделов и шаги как карточки */
.kind-home .prose>ul{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px }
.kind-home .prose>ul>li{ margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface) }
.kind-home .prose>ol{ list-style:none; padding:0; margin:0 0 24px; counter-reset:step; display:grid; gap:10px }
.kind-home .prose>ol>li{ counter-increment:step; position:relative; margin:0; padding:14px 16px 14px 64px;
border:1px solid var(--line); border-radius:12px; background:var(--surface) }
.kind-home .prose>ol>li::before{ content:counter(step); position:absolute; left:14px; top:12px; width:36px; height:36px;
border-radius:10px; display:grid; place-items:center; font:700 1.05rem/1 var(--serif); color:#06122B;
background:linear-gradient(135deg,#33C3FF,#2F7BFF) }
@media (min-width:720px){ .kind-home .prose>ul{ grid-template-columns:1fr 1fr } .kind-home .prose{ max-width:none } }
@media (min-width:900px){ .hero.has-media .hero-text{ padding-right:8px } }
@media (min-width:900px){ .call{ width:340px; padding:34px 26px 30px } .call-num{ font-size:1.55rem } .call-chip{ right:max(4px,calc(50% - 170px)) } }