/* ============================================================================
   Ударение.pro — собственные стили сайта.

   Ни Tailwind, ни Alpine, ни единого обращения к чужому домену: замер сети
   04.08.2026 показал, что страница, чей вид лежит в CDN, при его недоступности
   отдаёт голый HTML, а около 88 % трафика идёт из России.

   Палитра тёплая и своя. Акцент — жжёная охра: она контрастна и к бумаге, и к
   тёмному фону, то есть остаётся видимой в оттенках серого.
   ============================================================================ */

:root {
    --bumaga:        #f4efe6;
    --bumaga-2:      #ebe4d7;
    --pribor:        #fffdf9;
    --tekst:         #1f1a14;
    --tekst-tihij:   #665c50;
    /* 🔴 08.08.2026: было #857b6d. Замер по формуле WCAG: 4.09 на подложке прибора,
       3.63 на бумаге и 3.29 в подвале — ниже порога везде, где он стоит, а стоит он
       на 321 строке словника (пояснение «не <ошибка>» у каждого слова) и на всех
       сносках. Стало 4.59 худшее. */
    --tekst-slabyj:  #6e6455;
    --granica:       #ddd3c2;
    --granica-2:     #c4b7a0;
    --akcent:        #9a3412;
    --akcent-temnee: #7c2d12;
    --akcent-fon:    #fbe9dd;
    --akcent-tekst:  #ffffff;
    --udarnaja:      #9a3412;
    --verno:         #3f6212;
    --verno-fon:     #eef3e2;
    --neverno:       #9f1239;
    --neverno-fon:   #fbe8ed;

    --ten-1: 0 1px 2px rgba(52, 38, 24, .09);
    --ten-2: 0 1px 2px rgba(52, 38, 24, .07), 0 8px 24px rgba(52, 38, 24, .10);
    --ten-3: 0 2px 4px rgba(52, 38, 24, .08), 0 16px 40px rgba(52, 38, 24, .14);

    --radius: 14px;
    --radius-sm: 9px;
    --plavno: 180ms cubic-bezier(.32, .72, .35, 1);

    --shrift: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --shrift-ui: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Тёмная тема — своя палитра, а не инверсия: фон тёплый угольный, акцент светлеет,
   иначе жжёная охра на тёмном перестаёт читаться. */
html.dark {
    --bumaga:        #17130f;
    --bumaga-2:      #1f1a15;
    --pribor:        #221d17;
    --tekst:         #f0eae0;
    --tekst-tihij:   #b0a494;
    --tekst-slabyj:  #8b8072;
    --granica:       #352d24;
    --granica-2:     #4d4136;
    --akcent:        #fb923c;
    --akcent-temnee: #fdba74;
    --akcent-fon:    #33241a;
    --akcent-tekst:  #1a1209;
    --udarnaja:      #fdba74;
    --verno:         #a3d16a;
    --verno-fon:     #232a17;
    --neverno:       #fb7185;
    --neverno-fon:   #2c1720;

    --ten-1: 0 1px 2px rgba(0, 0, 0, .45);
    --ten-2: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .5);
    --ten-3: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .6);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    min-height: 100vh;
    padding-top: 64px;
    display: flex;
    flex-direction: column;
    background: var(--bumaga);
    color: var(--tekst);
    font: 400 17px/1.65 var(--shrift-ui);
    transition: background-color var(--plavno), color var(--plavno);
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--akcent); text-underline-offset: .18em; }
a:hover { color: var(--akcent-temnee); }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--shrift); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(28px, 5.2vw, 42px); }
h2 { font-size: clamp(22px, 3.4vw, 29px); }
h3 { font-size: clamp(18px, 2.4vw, 21px); }
p { margin: 0 0 1em; }

.tolko-dlja-chitalok {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.obolochka { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.obolochka--uzkaja { max-width: 780px; }

/* ── Шапка ─────────────────────────────────────────────────────────────────── */

.shapka {
    position: fixed; inset: 0 0 auto; z-index: 40;
    background: var(--bumaga);
    transition: transform var(--plavno), box-shadow var(--plavno), background-color var(--plavno);
}
.shapka--sprjatana { transform: translateY(-102%); }
.shapka--otorvana { box-shadow: var(--ten-1); }

.shapka__ryad { display: flex; align-items: center; gap: 14px; height: 64px; }
.shapka__brend { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-right: auto; }
.shapka__znak { flex: none; width: 34px; height: 34px; }
.shapka__imja { font-family: var(--shrift); font-weight: 700; font-size: 20px; line-height: 1.06; letter-spacing: -.015em; }
.shapka__podpis { display: block; font-family: var(--shrift-ui); font-size: 12px; font-weight: 400; color: var(--tekst-tihij); }

.shapka__menju { display: none; gap: 2px; }
.shapka__punkt {
    display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none;
    color: var(--tekst-tihij); font-size: 15px;
    transition: background-color var(--plavno), color var(--plavno);
}
.shapka__punkt:hover { background: var(--bumaga-2); color: var(--tekst); }
.shapka__punkt[aria-current="page"] { color: var(--akcent); background: var(--akcent-fon); font-weight: 600; }

.shapka__knopka {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 38px; min-width: 38px; padding: 0 10px;
    border: 1px solid var(--granica); border-radius: 9px;
    background: transparent; color: var(--tekst-tihij); cursor: pointer;
    font: 400 13px/1 var(--shrift-ui);
    transition: background-color var(--plavno), color var(--plavno), border-color var(--plavno), transform var(--plavno);
}
.shapka__knopka:hover { background: var(--bumaga-2); color: var(--tekst); border-color: var(--granica-2); }
.shapka__knopka:active { transform: translateY(1px); }
.shapka__knopka--menju { display: inline-flex; }
@media (min-width: 880px) {
    .shapka__menju { display: flex; }
    .shapka__knopka--menju { display: none; }
}

.shapka__menju-mob { padding: 2px 0 14px; border-top: 1px solid var(--granica); }
.shapka__menju-mob a {
    display: block; padding: 13px 4px; text-decoration: none; color: var(--tekst);
    font-size: 17px; border-bottom: 1px solid var(--granica);
}
.shapka__menju-mob a:last-child { border-bottom: 0; }
.shapka__menju-mob a[aria-current="page"] { color: var(--akcent); font-weight: 600; }

/* ── Крошки ────────────────────────────────────────────────────────────────── */

.kroshki { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-slabyj); padding: 16px 0 0; }
.kroshki ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.kroshki a { color: var(--tekst-slabyj); text-decoration: none; }
.kroshki a:hover { color: var(--akcent); }
/* 🔴 08.08.2026: разделитель крошек стоял цветом границы и давал контраст 1.73 —
   то есть его не было видно вовсе, и крошки читались одной слипшейся строкой. */
.kroshki__razdelitel { color: var(--tekst-slabyj); }

/* ── Полотно ───────────────────────────────────────────────────────────────── */

.glavnoe { flex: 1 0 auto; width: 100%; }
.polosa { padding: 40px 0; }
.polosa--pervaja { padding: 30px 0 40px; }
.polosa--tihaja { background: var(--bumaga-2); }

.pervyj-ekran { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1000px) {
    .pervyj-ekran { grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; }
}
.zagolovok-obeshhanie { font-size: 18px; color: var(--tekst-tihij); margin: -.25em 0 1.25em; max-width: 48ch; }

/* ── Прибор ────────────────────────────────────────────────────────────────── */

.pribor {
    background: var(--pribor);
    border: 1px solid var(--granica);
    border-radius: var(--radius);
    box-shadow: var(--ten-2);
    padding: 22px;
    transition: box-shadow var(--plavno), border-color var(--plavno), background-color var(--plavno);
}
.pribor:focus-within { box-shadow: var(--ten-3); border-color: var(--granica-2); }
@media (min-width: 640px) { .pribor { padding: 26px 28px; } }

.pribor__podpis { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-slabyj); margin-bottom: 9px; }

.pole-ryad { display: flex; gap: 10px; flex-wrap: wrap; }
/* На узком экране кнопка занимает всю строку: при flex-basis поля 240 px она вставала
   на вторую строку шириной в половину и выглядела недожатой. Замер снимком на 390. */
@media (max-width: 520px) {
    .pole-ryad > .knopka { flex: 1 1 100%; }
}
.pole {
    flex: 1 1 240px; min-width: 0;
    height: 54px; padding: 0 15px;
    font: 400 19px/1 var(--shrift-ui);
    color: var(--tekst); background: var(--bumaga);
    border: 1.5px solid var(--granica-2); border-radius: var(--radius-sm);
    transition: border-color var(--plavno), box-shadow var(--plavno), background-color var(--plavno);
}
.pole::placeholder { color: var(--tekst-slabyj); }
.pole:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-fon); background: var(--pribor); }

.knopka {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 54px; padding: 0 22px; border: 0; border-radius: var(--radius-sm);
    background: var(--akcent); color: var(--akcent-tekst);
    font: 600 16px/1 var(--shrift-ui); cursor: pointer;
    box-shadow: var(--ten-1);
    transition: background-color var(--plavno), box-shadow var(--plavno), transform var(--plavno);
}
.knopka:hover { background: var(--akcent-temnee); box-shadow: var(--ten-2); }
.knopka:active { transform: translateY(1px); box-shadow: var(--ten-1); }
.knopka[disabled] { background: var(--granica-2); color: var(--tekst-slabyj); cursor: not-allowed; box-shadow: none; }
.knopka--tihaja { background: transparent; color: var(--akcent); border: 1.5px solid var(--granica-2); box-shadow: none; }
.knopka--tihaja:hover { background: var(--akcent-fon); border-color: var(--akcent); }
.knopka--malaja { height: 40px; padding: 0 15px; font-size: 14px; }

/* ── Ответ ─────────────────────────────────────────────────────────────────── */

.otvet { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--granica); }

.slovo-krupno {
    font-family: var(--shrift); font-weight: 700;
    font-size: clamp(34px, 8vw, 56px); line-height: 1.25; letter-spacing: -.02em;
    margin: 0 0 6px; word-break: break-word;
}
/* Союз между двумя равноправными нормами («творО́г и твО́рог»): тише самих слов, иначе
   он спорит с ними за внимание, а решают здесь именно слова. */
.slovo-krupno__ili {
    font-weight: 400; font-size: .45em; color: var(--tekst-tihij, #6b7280);
    padding: 0 .15em; letter-spacing: 0;
}
/* ⚠️ Подсветка ставится на inline-block с line-height:1 — иначе фон растягивается на
   всю высоту строки и вокруг буквы появляется высокий «ярлык», заметный только на
   снимке крупной надписи. */
.udarnaja {
    position: relative; display: inline-block; line-height: 1;
    color: var(--udarnaja); background: var(--akcent-fon);
    border-radius: 5px; padding: .04em .05em .04em;
}
/* Знак ударения рисуем сами: комбинирующий акут в половине гарнитур встаёт вкривь
   или не отображается вовсе, а здесь он несёт весь смысл страницы. */
.udarnaja::before {
    content: ""; position: absolute; left: 50%; top: -.2em;
    width: .09em; height: .28em; border-radius: 1px;
    background: var(--udarnaja);
    transform: translateX(-50%) rotate(22deg); transform-origin: bottom center;
}
.slovo-stroka { font-size: 15px; color: var(--tekst-tihij); margin: 0 0 16px; }
.pochemu { font-size: 17px; line-height: 1.72; margin: 0 0 14px; }

.zametka {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--verno-fon); border-left: 3px solid var(--verno);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 12px 15px; font-size: 15.5px; line-height: 1.6; margin: 0 0 14px;
}
.zametka--vnimanie { background: var(--akcent-fon); border-left-color: var(--akcent); }
.zametka p:last-child { margin-bottom: 0; }
.zametka__znak { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--verno); }
.zametka--vnimanie .zametka__znak { color: var(--akcent); }

.oshibka-metka { color: var(--neverno); text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* Внутри зачёркнутого неверного варианта подсветка не нужна: она читалась бы как
   «вот верный слог», то есть ровно наоборот. Остаётся только знак ударения. */
.oshibka-metka .udarnaja { background: none; color: inherit; padding: 0; }
.oshibka-metka .udarnaja::before { background: currentColor; }

/* ── Плашки с фактами ──────────────────────────────────────────────────────── */

.fakty { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.fakt {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 7px 13px; border-radius: 999px;
    background: var(--bumaga-2); border: 1px solid var(--granica);
    font-size: 13.5px; color: var(--tekst-tihij);
}
.fakt b { font-weight: 700; color: var(--tekst); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
    .fakty { gap: 6px; }
    .fakt { font-size: 12.5px; padding: 5px 10px; }
}

/* ── Часто спрашивают ──────────────────────────────────────────────────────── */

.chasto { background: var(--bumaga-2); border: 1px solid var(--granica); border-radius: var(--radius); padding: 18px; }
.chasto__zagolovok { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-slabyj); margin: 0 0 12px; font-family: var(--shrift-ui); font-weight: 600; }
.chasto__spisok { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chasto__spisok a {
    display: inline-block; padding: 6px 11px; border-radius: 999px;
    background: var(--pribor); border: 1px solid var(--granica);
    color: var(--tekst); text-decoration: none; font-size: 14.5px;
    transition: border-color var(--plavno), color var(--plavno), background-color var(--plavno);
}
.chasto__spisok a:hover { border-color: var(--akcent); color: var(--akcent); background: var(--akcent-fon); }

/* ── Списки-строки ─────────────────────────────────────────────────────────── */

.stroki { list-style: none; margin: 0; padding: 0; border: 1px solid var(--granica); border-radius: var(--radius); overflow: hidden; background: var(--pribor); box-shadow: var(--ten-1); }
.stroka { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 13px 17px; border-bottom: 1px solid var(--granica); transition: background-color var(--plavno); }
.stroka:last-child { border-bottom: 0; }
.stroka:hover { background: var(--bumaga-2); }
.stroka__slovo { font-family: var(--shrift); font-size: 20px; font-weight: 700; text-decoration: none; color: var(--tekst); }
.stroka__slovo:hover { color: var(--akcent); }
.stroka__hvost { font-size: 13.5px; color: var(--tekst-slabyj); margin-left: auto; font-variant-numeric: tabular-nums; }
.stroka__pravilo { flex-basis: 100%; font-size: 15px; color: var(--tekst-tihij); }

/* ── Раскрывающиеся блоки ──────────────────────────────────────────────────── */

.vopros { border: 1px solid var(--granica); border-radius: var(--radius-sm); background: var(--pribor); margin-bottom: 9px; overflow: hidden; }
.vopros > summary { list-style: none; cursor: pointer; padding: 14px 46px 14px 17px; position: relative; font-weight: 600; font-size: 16.5px; transition: background-color var(--plavno); }
.vopros > summary::-webkit-details-marker { display: none; }
.vopros > summary:hover { background: var(--bumaga-2); }
.vopros > summary::after {
    content: ""; position: absolute; right: 18px; top: 50%;
    width: 9px; height: 9px; border-right: 2px solid var(--tekst-slabyj); border-bottom: 2px solid var(--tekst-slabyj);
    transform: translateY(-70%) rotate(45deg); transition: transform var(--plavno);
}
.vopros[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.vopros__telo { padding: 0 17px 15px; font-size: 16px; line-height: 1.7; color: var(--tekst-tihij); }
.vopros__telo p:last-child { margin-bottom: 0; }

/* ── Таблица ───────────────────────────────────────────────────────────────── */

.tablica-obolochka { overflow-x: auto; border: 1px solid var(--granica); border-radius: var(--radius); background: var(--pribor); }
table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: 15.5px; }
th, td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--granica); }
th { font-family: var(--shrift-ui); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-slabyj); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

/* ── Тренажёр ──────────────────────────────────────────────────────────────── */

.kartochka { text-align: center; padding: 28px 22px; }
.kartochka__slovo { font-family: var(--shrift); font-weight: 700; font-size: clamp(30px, 7vw, 46px); line-height: 1.2; margin: 0 0 20px; word-break: break-word; }
.varianty { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.variant {
    padding: 13px 20px; border: 1.5px solid var(--granica-2); border-radius: var(--radius-sm);
    background: var(--bumaga); color: var(--tekst); cursor: pointer;
    font: 700 21px/1.2 var(--shrift);
    transition: border-color var(--plavno), background-color var(--plavno), color var(--plavno), transform var(--plavno);
}
.variant:hover { border-color: var(--akcent); background: var(--akcent-fon); }
.variant:active { transform: translateY(1px); }
.variant--verno { border-color: var(--verno); background: var(--verno-fon); color: var(--verno); }
.variant--neverno { border-color: var(--neverno); background: var(--neverno-fon); color: var(--neverno); }
.variant[disabled] { cursor: default; }
.variant[disabled]:hover { border-color: var(--granica-2); background: var(--bumaga); }
.variant--verno[disabled]:hover { border-color: var(--verno); background: var(--verno-fon); }
.variant--neverno[disabled]:hover { border-color: var(--neverno); background: var(--neverno-fon); }

.schjot { display: flex; gap: 18px; justify-content: center; font-size: 14px; color: var(--tekst-tihij); margin-top: 18px; font-variant-numeric: tabular-nums; }
.schjot b { color: var(--tekst); }
.polosa-progressa { height: 5px; border-radius: 3px; background: var(--bumaga-2); overflow: hidden; margin: 0 0 20px; }
.polosa-progressa > i { display: block; height: 100%; background: var(--akcent); border-radius: 3px; transition: width var(--plavno); }

/* ── Формы ─────────────────────────────────────────────────────────────────── */

.forma { display: grid; gap: 14px; }
.forma label { display: grid; gap: 6px; font-size: 14px; color: var(--tekst-tihij); }
.forma input[type="text"], .forma input[type="email"], .forma textarea, .forma select {
    width: 100%; padding: 12px 14px; font: 400 16px/1.5 var(--shrift-ui);
    color: var(--tekst); background: var(--bumaga);
    border: 1.5px solid var(--granica-2); border-radius: var(--radius-sm);
    transition: border-color var(--plavno), box-shadow var(--plavno);
}
.forma textarea { min-height: 130px; resize: vertical; }
.forma input:focus, .forma textarea:focus, .forma select:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-fon); }
.forma__itog { font-size: 15px; padding: 11px 14px; border-radius: var(--radius-sm); }
.forma__itog--ok { background: var(--verno-fon); color: var(--verno); }
.forma__itog--net { background: var(--neverno-fon); color: var(--neverno); }

/* ── Подвал: посадка «полоса» ──────────────────────────────────────────────── */

.podval { flex: none; margin-top: 48px; background: var(--bumaga-2); border-top: 1px solid var(--granica); }
.podval__ryad { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 24px 0; }
.podval__brend { display: flex; align-items: center; gap: 10px; font-family: var(--shrift); font-weight: 700; font-size: 17px; }
.podval__znak { width: 26px; height: 26px; flex: none; }
.podval__navigacija { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.podval__navigacija a { color: var(--tekst-tihij); text-decoration: none; font-size: 15px; }
.podval__navigacija a:hover { color: var(--akcent); }
.podval__kontakt { margin-left: auto; text-align: right; font-size: 14px; color: var(--tekst-tihij); }
.podval__kontakt a { color: var(--tekst); text-decoration: none; }
.podval__kontakt a:hover { color: var(--akcent); }
.podval__niz { border-top: 1px solid var(--granica); padding: 15px 0 24px; font-size: 13.5px; color: var(--tekst-slabyj); display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; }
.podval__pripiska { max-width: 64ch; }
.podval__shutka { margin-left: auto; font-style: italic; }
@media (max-width: 760px) {
    .podval__kontakt, .podval__shutka { margin-left: 0; text-align: left; }
}

/* ── Плашка cookies ────────────────────────────────────────────────────────── */

.plashka-cookies { position: fixed; inset: auto 0 0; z-index: 50; background: var(--pribor); border-top: 1px solid var(--granica-2); box-shadow: var(--ten-3); }
.plashka-cookies__ryad { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 0; font-size: 14.5px; color: var(--tekst-tihij); }
/* ⚠️ На 390 px плашка занимала треть первого экрана: шесть строк текста плюс кнопка.
   Снимок это и показал — в разметке ничего подозрительного не видно. */
@media (max-width: 640px) {
    .plashka-cookies__ryad { font-size: 13px; padding: 11px 0; gap: 9px 14px; line-height: 1.45; }
    .plashka-cookies__knopka { height: 36px; font-size: 13.5px; }
}
.plashka-cookies__knopka { margin-left: auto; }
@media (max-width: 640px) { .plashka-cookies__knopka { margin-left: 0; } }

/* ── Страницы состояний ────────────────────────────────────────────────────── */

.sboj { text-align: center; padding: 48px 0 16px; }
.sboj__kod { font-family: var(--shrift); font-size: clamp(56px, 14vw, 96px); font-weight: 700; line-height: 1; color: var(--granica-2); margin: 0 0 4px; }

/* ── Словарь ───────────────────────────────────────────────────────────────── */

.slovar { margin: 0; border: 1px solid var(--granica); border-radius: var(--radius); overflow: hidden; background: var(--pribor); box-shadow: var(--ten-1); }
.slovar dt { padding: 14px 17px 4px; font-family: var(--shrift); font-weight: 700; font-size: 18px; }
.slovar dd { margin: 0; padding: 0 17px 14px; color: var(--tekst-tihij); font-size: 15.5px; line-height: 1.65; border-bottom: 1px solid var(--granica); }
.slovar dd:last-child { border-bottom: 0; }

/* ── Мелочи ────────────────────────────────────────────────────────────────── */

.tekst-tihij { color: var(--tekst-tihij); }
.tekst-slabyj { color: var(--tekst-slabyj); font-size: 14px; }
.stopka > * + * { margin-top: 14px; }
.razdelitel { border: 0; border-top: 1px solid var(--granica); margin: 32px 0; }
.kartochki { display: grid; gap: 14px; }
@media (min-width: 760px) { .kartochki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.karta-pravila { background: var(--pribor); border: 1px solid var(--granica); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--ten-1); transition: box-shadow var(--plavno), border-color var(--plavno); }
.karta-pravila:hover { box-shadow: var(--ten-2); border-color: var(--granica-2); }
.karta-pravila h3 { margin-bottom: .35em; }
.karta-pravila p:last-child { margin-bottom: 0; }
.karta-pravila__primer { font-family: var(--shrift); font-size: 18px; color: var(--akcent); }
.svjazka { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }


/* ⚠️ Высота плашки cookie мерена на 390 px, а не прикинута: она занимала
   12.6 % экрана телефона. Кнопка на узком экране уезжала на свою строку и
   добавляла ~40 px под сообщением, которое читают один раз. Держим её в строке
   с текстом; текст получает min-width: 0, иначе flex не даёт ему сжаться. */
@media (max-width: 640px) {
    .plashka-cookies__ryad { flex-wrap: nowrap; align-items: center; }
    .plashka-cookies__ryad > :first-child { min-width: 0; }
    .plashka-cookies__ryad > :last-child { flex: 0 0 auto; }
}