/* Сайт продаж «Новый Сад». Мир — деловой журнал на тёплой бумаге: один шрифт Inter, очень
   жирный и плотный в заголовках и цифрах, спокойный в тексте; один глубокий лесной зелёный для
   действий, волосяные линии вместо плашек и настоящие экраны продукта в окне браузера и в рамке
   телефона. Знак «Росток» — буква Н, перекладину которой образуют листья ростка. Движения нет. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-rub.woff2") format("woff2"); unicode-range: U+20BD; }

:root {
  color-scheme: light;
  --paper: #F8F6F1;
  --paper-2: #F1EDE4;
  --card: #FFFFFF;
  --ink: #1E221D;
  --ink-2: #4B5048;
  --ink-3: #666B61;
  --line: rgba(30, 34, 29, .12);
  --line-2: rgba(30, 34, 29, .22);
  --green: #2E4D31;
  --green-2: #233C26;
  --green-t: #E5EBE1;
  --cream: #F6F3EA;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --wrap: 1400px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--green);
  --shadow-window: 0 1px 2px rgba(30, 34, 29, .05), 0 30px 64px -30px rgba(30, 34, 29, .34);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: rgba(30, 34, 29, .3) var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: #CFDDCB; color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--green); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--green-2); text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
/* Заголовки — тот же Inter, но 800 и плотнее: чем крупнее кегль, тем сильнее сжат трекинг. */
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(40px, 3.4vw + 20px, 84px); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 1.8vw + 20px, 50px); line-height: 1.06; letter-spacing: -0.03em; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.25; }
p { margin: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--green); color: var(--cream); z-index: 100; }
.skip-link:focus { top: 12px; }
.lead { font-size: clamp(18px, .35vw + 16px, 21px); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; }
.more .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.more:hover { text-decoration: underline; }
.more:hover .icon { transform: translateX(3px); }

/* ── Кнопки ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-sm); border: 1.5px solid transparent; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn:hover { text-decoration: none; }
.btn .icon { width: 19px; height: 19px; transition: transform .25s var(--ease); }
.btn:hover .icon-go { transform: translateX(3px); }
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.btn-primary { background: var(--green); color: var(--cream); }
.btn-primary:hover { background: var(--green-2); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--green); }
.btn-ghost:hover { background: var(--green-t); color: var(--green-2); }

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.p-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .2s; }
.p-header.is-scrolled { border-bottom-color: var(--line); }
.p-header-row { display: flex; align-items: center; gap: 28px; min-height: 80px; }
/* Знак и надпись как в логотипе: у знака в квадрате 48 есть поля, поэтому зазор небольшой. */
.p-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--green); text-decoration: none; font: 800 23px/1 var(--sans); letter-spacing: -0.03em; white-space: nowrap; }
.p-brand svg { width: 42px; height: 42px; flex: none; fill: var(--green); }
.p-brand:hover { color: var(--green); text-decoration: none; }
.p-nav { display: flex; gap: 2px; margin-left: 20px; }
.p-nav a { padding: 8px 12px; color: var(--ink-2); text-decoration: none; font-size: 16px; font-weight: 500; border-radius: 6px; }
.p-nav a:hover { color: var(--ink); }
.p-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 9px; }
.p-nav .p-nav-login { display: none; }
.p-header-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.p-header-actions .btn { min-height: 44px; padding: 0 20px; font-size: 15.5px; }
.p-menu-btn { display: none; }
@media (max-width: 1060px) {
  .p-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .p-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 17px; }
  .p-nav a[aria-current="page"] { text-decoration: none; color: var(--green); }
  .p-header.is-open { border-bottom-color: var(--line); }
  .p-header.is-open .p-nav { display: flex; }
  .p-menu-btn { display: inline-flex; width: 44px; padding: 0; color: var(--ink); border-color: var(--line-2); }
  .p-menu-btn:hover { background: var(--paper-2); color: var(--ink); }
}
@media (max-width: 440px) {
  .p-header-row { min-height: 68px; gap: 12px; }
  .p-brand { font-size: 20px; gap: 6px; }
  .p-brand svg { width: 36px; height: 36px; }
  .p-header-actions .p-login { display: none; }
  .p-nav .p-nav-login { display: block; color: var(--green); font-weight: 500; }
}

/* ── Первый экран ──────────────────────────────────────────────────────── */
.p-hero { --hero-pb: clamp(56px, 6vw, 88px); position: relative; z-index: 1; padding: clamp(24px, 3.5vw, 56px) 0 var(--hero-pb); }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(32px, 4vw, 72px); align-items: end; }
/* Заголовок всегда в три строки: размер от ширины колонки. Самая длинная строка — «детского сада»,
   в Inter 800 с трекингом −0,035em она в 6,86 раза шире кегля, поэтому 14cqi оставляют запас. */
.p-hero-text { container-type: inline-size; }
.p-hero h1 { font-size: clamp(38px, 14cqi, 84px); letter-spacing: -0.035em; }
.p-hero h1 .line { display: block; }
.p-hero .lead { margin-top: 28px; }
.p-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.p-hero .btn-lg { min-height: 64px; padding: 0 30px; font-size: 19px; }
.p-hero .btn-ghost { min-width: 150px; }
/* Уже 1280 колонка текста узкая: кнопки компактнее, чтобы пара стояла в одну строку. */
@media (max-width: 1280px) {
  .p-hero .btn-lg { padding: 0 24px; }
  .p-hero .btn-ghost { min-width: 0; }
}
/* Ещё уже пара переносится: тогда кнопки во всю ширину, одна под другой. */
@media (max-width: 1024px) {
  .p-hero-cta .btn { flex: 1 1 auto; }
}
.p-hero-note { margin-top: 20px; color: var(--ink-2); font-size: 16px; }
/* Витрина: окно браузера с журналом посещаемости и телефон с кабинетом родителя, телефон
   спускается за линию под первым экраном. */
.p-show { position: relative; padding-right: 6%; }
.p-show .phone { position: absolute; right: 0; bottom: calc(-1 * var(--hero-pb) - 44px); width: 26%; }

/* Окно браузера и телефон: рамки для настоящих экранов. */
.browser { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-window); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; background: #F3F1EB; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E3988C; }
.browser-bar i:nth-child(2) { background: #E8C47F; }
.browser-bar i:nth-child(3) { background: #A6C69D; }
/* Рамка телефона тонкая и в пикселях: отступ в процентах считался бы от ширины витрины, а не телефона. */
.phone { padding: 5px; border-radius: 13% / 6%; background: #1A1D19; box-shadow: 0 0 0 1px rgba(30, 34, 29, .18), 0 30px 56px -28px rgba(30, 34, 29, .5); }
.phone img { width: 100%; border-radius: 11% / 5%; }

/* ── Три части системы под первым экраном ──────────────────────────────── */
.p-trio { border-top: 1px solid var(--line); padding: 84px 0 clamp(48px, 5vw, 72px); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.trio > li { display: flex; gap: 22px; align-items: flex-start; padding: 4px clamp(20px, 3vw, 44px); border-left: 1px solid var(--line); }
.trio > li:first-child { padding-left: 0; border-left: 0; }
.trio > li > .icon { width: 38px; height: 38px; stroke-width: 1.4; color: var(--green); }
.trio > li > div { min-width: 0; }
.trio h2 { font-size: clamp(22px, .7vw + 16px, 27px); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.trio p { margin-top: 12px; color: var(--ink-2); font-size: 16.5px; }
.trio .btn { margin-top: 22px; }
.trio .p-demo-login { margin-top: 14px; color: var(--ink-3); font-size: 15px; }

/* ── Разделы ───────────────────────────────────────────────────────────── */
.p-section { padding-block: clamp(64px, 8vw, 128px); }
.p-band { background: var(--paper-2); }
.p-head { max-width: 780px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.p-head .lead { margin-top: 18px; }
.p-head .more { margin-top: 18px; }
.p-rule { border-top: 1px solid var(--line); }

/* Разворот: экран и текст рядом. */
.spread { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.spread + .spread { margin-top: clamp(72px, 9vw, 136px); }
.spread-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.spread-flip > .spread-media { order: 2; }
.spread h3 { font-size: clamp(26px, 1.1vw + 18px, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.spread p { margin-top: 18px; color: var(--ink-2); font-size: 17.5px; max-width: 32em; }
.spread .more { margin-top: 22px; }
.ticks { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ticks li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.ticks .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--green); stroke-width: 2.2; }
/* Два телефона рядом, второй ниже: кабинет родителя. */
.phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); width: min(100%, 560px); margin-inline: auto; padding-bottom: 56px; }
.phones .phone:nth-child(2) { translate: 0 56px; }

/* Темы оформления: обложки в маленьких окнах браузера. */
.themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3.5vw, 48px) clamp(16px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.theme-card { display: grid; gap: 6px; align-content: start; }
.theme-card .browser { margin-bottom: 12px; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line), 0 16px 32px -20px rgba(30, 34, 29, .3); }
.theme-card .browser-bar { height: 20px; gap: 5px; padding: 0 9px; }
.theme-card .browser-bar i { width: 6px; height: 6px; }
.theme-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; }
.theme-card b { font: 700 19px/1.25 var(--sans); letter-spacing: -0.02em; }
.theme-card span { color: var(--ink-3); font-size: 15px; line-height: 1.5; }
.themes-note { margin-top: clamp(40px, 5vw, 64px); color: var(--ink-2); }

/* Шаги: настоящая последовательность, поэтому с номерами. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--ink); }
.steps li::before { content: counter(step); margin-bottom: 14px; font: 800 56px/.9 var(--sans); letter-spacing: -0.035em; color: var(--green); }
.steps h3 { font-size: 21px; letter-spacing: -0.02em; }
.steps p { color: var(--ink-2); font-size: 16px; }

/* Цены */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.price-card { display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 3.2vw, 44px); border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.price-card.is-main { background: var(--green-t); box-shadow: none; }
.price-card h3 { font-size: 24px; letter-spacing: -0.025em; }
/* Не плотнее −0,035em: иначе пробел тысяч в «1 990 ₽» схлопывается и число читается как «1990». */
.price-card .amount { font: 800 clamp(44px, 2vw + 32px, 64px)/1 var(--sans); letter-spacing: -0.035em; }
.price-card .amount small { margin-left: 4px; font: 500 18px/1 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.price-card ul { flex: 1 0 auto; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.price-card li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.price-card li .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--green); stroke-width: 2.2; }
.price-card ul:not(:last-child) { margin-bottom: 8px; }
.price-card .btn { align-self: flex-start; }
.price-note { margin-top: 22px; color: var(--ink-2); font-size: 15.5px; }

/* Вопросы: заголовок слева, список справа. */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.faq-layout .p-head { position: sticky; top: 112px; margin: 0; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 0; font: 600 19px/1.4 var(--sans); letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green); }
.faq summary .icon { width: 22px; height: 22px; margin-top: 3px; color: var(--green); stroke-width: 1.8; transition: transform .25s var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .answer { padding: 0 44px 24px 0; color: var(--ink-2); max-width: 66ch; }

/* Приглашение внизу: зелёный блок, телефон поднимается из нижнего края. */
.p-cta { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(36px, 5vw, 76px); border-radius: var(--r-lg); background: var(--green); color: var(--cream); overflow: hidden; }
.p-cta h2 { color: var(--cream); }
.p-cta p { margin-top: 18px; color: color-mix(in srgb, var(--cream) 80%, var(--green)); max-width: 36em; }
.p-cta .p-hero-cta { margin-top: 32px; }
.p-cta a:focus-visible { box-shadow: 0 0 0 3px var(--green), 0 0 0 5px var(--cream); }
.p-cta .btn-primary { background: var(--cream); color: var(--green-2); }
.p-cta .btn-primary:hover { background: #FFFFFF; color: var(--green-2); }
.p-cta .btn-ghost { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 45%, var(--green)); }
.p-cta .btn-ghost:hover { background: rgba(246, 243, 234, .08); border-color: var(--cream); color: var(--cream); }
.p-cta .phone { justify-self: end; align-self: start; width: min(100%, 236px); margin-bottom: calc(-1 * clamp(36px, 5vw, 76px) - 120px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 30px 60px -20px rgba(0, 0, 0, .45); }

/* ── Внутренние страницы ───────────────────────────────────────────────── */
.p-page-head { padding: clamp(40px, 6vw, 96px) 0 clamp(28px, 3.5vw, 56px); }
.p-page-head h1 { font-size: clamp(38px, 2.4vw + 22px, 66px); max-width: 15em; }
.p-page-head .lead { margin-top: 20px; }
.p-body { padding-top: clamp(36px, 4.5vw, 64px); border-top: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 15px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.prose { max-width: 72ch; }
.prose h2 { margin: 44px 0 14px; font-size: 28px; letter-spacing: -0.03em; }
.prose h3 { margin: 30px 0 10px; font-size: 21px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose pre { padding: 14px 16px; border-radius: var(--r-md); background: var(--paper-2); overflow-x: auto; font-size: 14px; }
/* Моноширинный в полный кегль: у Consolas глаз меньше, чем у Inter, и при .92em код мельчит. */
.prose code { font-family: ui-monospace, Consolas, monospace; font-size: 1em; }
.video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 32px; border-radius: var(--r-md); overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Списки по разделам: возможности и инструкции. */
.feature-grid, .doc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 88px); }
.feature-group h3, .doc-group h2 { padding-bottom: 16px; border-bottom: 1px solid var(--ink); font-size: clamp(22px, .6vw + 18px, 27px); font-weight: 800; letter-spacing: -0.03em; }
.feature-items { list-style: none; margin: 0; padding: 0; }
.feature-items li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.feature-items .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--green); stroke-width: 2.2; }
.doc-group p { padding: 14px 0; border-bottom: 1px solid var(--line); }
.doc-group a { color: var(--ink); font-weight: 600; text-decoration: none; }
.doc-group a:hover { color: var(--green); text-decoration: underline; }
.doc-group small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 15px; }

/* Формы */
.form { display: grid; gap: 18px; max-width: 620px; }
.field { display: grid; gap: 7px; }
.label { font-weight: 500; font-size: 15.5px; }
.label small { font-weight: 400; color: var(--ink-3); font-size: 14.5px; }
.input, .textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); font: inherit; color: var(--ink); caret-color: var(--green); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.textarea { min-height: 160px; resize: vertical; }
.input:hover, .textarea:hover { border-color: rgba(30, 34, 29, .36); }
.input:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 77, 49, .16); }
.is-invalid .input, .is-invalid .textarea { border-color: #A8322A; }
.error-text { color: #A8322A; font-size: 14.5px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green); }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-md); background: var(--green-t); color: var(--green-2); margin-top: 20px; }
.notice.is-error { background: #F8E7E3; color: #7E2119; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.contact-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--paper-2); }
.contact-card dl { display: grid; gap: 0; margin: 0; }
.contact-card dl > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-card dl > div:first-child { padding-top: 0; }
.contact-card dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.contact-card dt { font-size: 14.5px; color: var(--ink-3); }
.contact-card dd { margin: 2px 0 0; font-weight: 500; }

/* ── Подвал ────────────────────────────────────────────────────────────── */
.p-footer { margin-top: clamp(64px, 8vw, 128px); padding: 64px 0 36px; background: var(--paper-2); font-size: 15.5px; }
.p-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.p-footer .p-brand { font-size: 21px; }
.p-footer .p-brand svg { width: 38px; height: 38px; }
.p-footer p { color: var(--ink-2); margin-top: 16px; max-width: 34ch; }
.p-footer h2 { margin-bottom: 14px; font: 700 15.5px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.p-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p-footer a { color: var(--ink-2); text-decoration: none; }
.p-footer a:hover { color: var(--green); text-decoration: underline; }
/* Логотип в подвале — тот же зелёный знак с надписью, без подчёркивания ссылок подвала. */
.p-footer .p-brand, .p-footer .p-brand:hover { color: var(--green); text-decoration: none; }
.p-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14.5px; }

/* ── Планшет и телефон ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .p-hero-grid, .spread, .spread-flip, .contact-grid, .p-cta, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .p-hero h1 { font-size: clamp(40px, 14cqi, 72px); }
  .p-show { margin-top: 12px; padding-right: 12%; }
  .p-show .phone { bottom: -28px; width: 30%; }
  .p-trio { padding-top: 64px; }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio > li { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .trio > li:first-child { padding-top: 0; border-top: 0; }
  .spread-flip > .spread-media { order: 0; }
  .spread-media { max-width: 680px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .faq-layout .p-head { position: static; }
  .p-cta .phone { justify-self: center; width: min(62%, 236px); margin-top: 8px; }
  .feature-grid, .doc-list { grid-template-columns: minmax(0, 1fr); }
  .p-footer-grid { grid-template-columns: 1fr 1fr; }
  .p-footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .btn-lg, .p-hero .btn-lg { min-height: 56px; padding: 0 24px; font-size: 17px; }
  .p-show .phone { width: 34%; }
  .phone { padding: 3px; }
  .browser-bar { height: 24px; gap: 5px; padding: 0 10px; }
  .browser-bar i { width: 7px; height: 7px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .themes { gap: 28px 14px; }
  .theme-card b { font-size: 17px; }
  .theme-card span { font-size: 14px; }
  .faq summary { font-size: 17px; }
  .faq .answer { padding-right: 0; }
}

/* ── Возможности: обзор /features и страница группы /features/{код} ──────────
   Обзор — оглавление журнала: миниатюры настоящих экранов в малых окнах, три режима, полный
   список на песке. Страница группы — разворот: заголовок и вводный абзац, главный экран во всю
   ширину, сценарий работы разворотами, возможности определениями, подробный текст на песке. */

/* Оглавление групп: миниатюра главного экрана, название-ссылка на всю карточку, строка, для кого. */
.fx-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 4.5vw, 64px) clamp(20px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.fx-card { position: relative; display: grid; gap: 8px; align-content: start; }
.fx-card-shot { margin-bottom: 12px; border-radius: var(--r-sm); overflow: hidden; }
.fx-card-shot.browser { box-shadow: 0 0 0 1px var(--line), 0 16px 32px -20px rgba(30, 34, 29, .3); }
.fx-card-shot .browser-bar { height: 20px; gap: 5px; padding: 0 9px; }
.fx-card-shot .browser-bar i { width: 6px; height: 6px; }
.fx-card-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
/* Последний раздел, оставшийся в ряду один, ложится во всю строку: миниатюра в первой колонке,
   текст рядом. При трёх колонках один в ряду остаётся раздел с номером 3n+1, при двух — с нечётным;
   при 14 разделах так не бывает, и последний ряд остаётся обычным. */
@media (min-width: 1101px) {
  .fx-index > .fx-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(20px, 2.4vw, 36px); }
  .fx-index > .fx-card:last-child:nth-child(3n+1) > .fx-card-shot { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .fx-index > .fx-card:last-child:nth-child(3n+1) > :not(.fx-card-shot) { grid-column: 2 / -1; max-width: 34em; }
  .fx-index > .fx-card:last-child:nth-child(3n+1) > :nth-child(2) { grid-row: 2; }
  .fx-index > .fx-card:last-child:nth-child(3n+1) > :nth-child(3) { grid-row: 3; }
  .fx-index > .fx-card:last-child:nth-child(3n+1) > :nth-child(4) { grid-row: 4; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .fx-index > .fx-card:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(20px, 2.4vw, 36px); }
  .fx-index > .fx-card:last-child:nth-child(odd) > .fx-card-shot { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .fx-index > .fx-card:last-child:nth-child(odd) > :not(.fx-card-shot) { grid-column: 2 / -1; max-width: 34em; }
  .fx-index > .fx-card:last-child:nth-child(odd) > :nth-child(2) { grid-row: 2; }
  .fx-index > .fx-card:last-child:nth-child(odd) > :nth-child(3) { grid-row: 3; }
  .fx-index > .fx-card:last-child:nth-child(odd) > :nth-child(4) { grid-row: 4; }
}
.fx-card h3 { font-size: clamp(19px, .4vw + 16px, 22px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.fx-card-link { color: var(--ink); text-decoration: none; }
.fx-card-link::after { content: ""; position: absolute; inset: -8px; border-radius: var(--r-md); }
.fx-card:hover .fx-card-link { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; }
.fx-card-link:focus-visible { box-shadow: none; }
.fx-card-link:focus-visible::after { box-shadow: var(--focus); }
.fx-card p { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.fx-card .fx-card-for { color: var(--ink-3); font-size: 14.5px; }

/* Три режима — те же колонки с линиями, что под первым экраном главной, но заголовки h3. */
.fx-modes h3 { font-size: clamp(22px, .7vw + 16px, 27px); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.fx-modes p { margin-top: 12px; color: var(--ink-2); font-size: 16.5px; }

/* Полный список: разделы колонками, заголовок раздела ведёт на его страницу. */
.fx-all { columns: 3 320px; column-gap: clamp(28px, 4vw, 64px); }
.fx-all-group { break-inside: avoid; margin-bottom: clamp(40px, 4.5vw, 56px); }
.fx-all-group h3 a { color: var(--ink); text-decoration: none; }
.fx-all-group h3 a:hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; }

/* Шапка группы: заголовок слева, вводный абзац и «для кого» справа, ниже главный экран. */
.fx-head { padding: clamp(40px, 6vw, 96px) 0 0; }
.fx-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 72px); align-items: start; }
.fx-head h1 { font-size: clamp(38px, 2.4vw + 22px, 66px); letter-spacing: -0.035em; max-width: 13em; }
.fx-head .lead { max-width: 30em; }
.fx-for { display: flex; gap: 10px; margin-top: 20px; max-width: 34em; color: var(--ink-3); font-size: 15px; line-height: 1.5; }
.fx-for .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.fx-for b { color: var(--ink); font-weight: 600; }
.fx-hero { margin-top: clamp(36px, 4.5vw, 64px); }
/* Первый шаг последовательности под главным экраном: номер 1, развороты ниже продолжают с 2. */
.fx-hero-step { display: flex; gap: 22px; align-items: flex-start; max-width: 44em; margin-top: clamp(28px, 3vw, 40px); color: var(--ink-2); font-size: 17.5px; line-height: 1.55; }
.fx-hero-step b { font: 800 56px/.9 var(--sans); letter-spacing: -0.035em; color: var(--green); }
.fx-hero-step strong { display: block; margin-bottom: 6px; color: var(--ink); font: 700 21px/1.25 var(--sans); letter-spacing: -0.02em; }
/* Кабинет родителя: текст слева, пара телефонов справа. */
.fx-head-phones .fx-head-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.fx-head-phones .lead { margin-top: 24px; }
.fx-hero-phones { width: min(100%, 540px); margin-inline: auto; }

/* Сценарий: развороты чередуют стороны; у настоящей последовательности — крупные номера. */
.fx-moments { padding-top: clamp(96px, 10vw, 160px); }
.fx-spreads > .spread:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fx-spreads > .spread:nth-child(even) > .spread-media { order: 2; }
.fx-moments.is-steps .fx-spreads { counter-reset: fx-step 1; }
.fx-moments.is-steps .spread { counter-increment: fx-step; }
.fx-moments.is-steps .fx-moment-text::before { content: counter(fx-step); display: block; margin-bottom: 18px; font: 800 56px/.9 var(--sans); letter-spacing: -0.035em; color: var(--green); }
.fx-phone-one { grid-template-columns: minmax(0, 1fr); width: min(100%, 290px); padding-bottom: 0; }
/* Один телефон узкий: колонка экрана уже, текст ближе к нему. */
.fx-spreads > .spread:has(> .fx-phone-one) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fx-spreads > .spread:nth-child(even):has(> .fx-phone-one) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* Возможности группы: определения в три колонки, строки через волосяные линии. */
.fx-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; }
.fx-items > div { padding: 18px 0 22px; border-top: 1px solid var(--line); }
.fx-items dt { font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
.fx-items dd { margin: 6px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* Подробный текст: заголовок держится слева, пока читается текст справа. */
.fx-more { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.fx-more h2 { position: sticky; top: 112px; }
.fx-prose { max-width: 68ch; }
.fx-prose h3 { margin: 32px 0 12px; font-size: 21px; letter-spacing: -0.02em; }
.fx-prose p { font-size: 17.5px; }

/* Соседние разделы и ссылка на все. */
.fx-next { padding-bottom: 0; }
.fx-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.fx-next-link { display: grid; gap: 8px; align-content: start; padding: 24px 0 28px; color: var(--ink); text-decoration: none; }
.fx-next-link.is-next { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--line); }
.fx-next-dir { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 15px; }
.fx-next-dir .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.fx-next-link b { font: 800 clamp(22px, .6vw + 18px, 27px)/1.2 var(--sans); letter-spacing: -0.03em; }
.fx-next-link > span:last-child { color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 30em; }
.fx-next-link:hover { color: var(--ink); }
.fx-next-link:hover b { color: var(--green); }
.fx-next-link.is-prev:hover .icon { transform: translateX(-3px); }
.fx-next-link.is-next:hover .icon { transform: translateX(3px); }
.fx-all-link { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.fx-cta { margin-top: clamp(64px, 8vw, 128px); }

@media (max-width: 1100px) {
  .fx-index, .fx-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fx-head-grid, .fx-head-phones .fx-head-grid, .fx-more { grid-template-columns: minmax(0, 1fr); }
  .fx-head-phones .fx-hero-phones { margin-top: 12px; }
  .fx-spreads > .spread:nth-child(even), .fx-spreads > .spread:has(> .fx-phone-one), .fx-spreads > .spread:nth-child(even):has(> .fx-phone-one) { grid-template-columns: minmax(0, 1fr); }
  .fx-spreads > .spread:nth-child(even) > .spread-media { order: 0; }
  .fx-more h2 { position: static; }
  .fx-next-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-next-link.is-next { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .fx-index, .fx-items { grid-template-columns: minmax(0, 1fr); }
}

/* ── Темы оформления: список с фильтром и страница темы ─────────────────── */
/* Карточка темы — ссылка на страницу темы: обложка в маленьком окне и название. */
.theme-card-link { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.theme-card-link span { color: inherit; font-size: inherit; line-height: inherit; }
.theme-card-link .browser { display: block; }
.theme-card-link:hover { color: var(--ink); text-decoration: none; }
.theme-card-link:hover b { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.theme-card-link:focus-visible { border-radius: var(--r-sm); }

/* Фильтр списка — ссылки с параметром, как пункты меню: работает без скрипта. */
.tl-filter { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: clamp(28px, 3.5vw, 44px); scroll-margin-top: 104px; }
.tl-filter a { padding: 6px 0; color: var(--ink-2); font-size: 17px; font-weight: 500; text-decoration: none; }
.tl-filter a span { margin-left: 4px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl-filter a:hover { color: var(--ink); }
.tl-filter a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 9px; }
/* «Своя тема» занимает остаток последнего ряда: сколько колонок, считает сервер (--span4, --span2). */
.tl-custom { grid-column: span var(--span4, 1); align-self: start; display: grid; gap: 10px; justify-items: start; padding-top: 20px; border-top: 1px solid var(--line-2); }
.tl-custom h3 { font-size: 21px; letter-spacing: -0.02em; }
.tl-custom p { max-width: 34em; color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* Страница темы. Первый экран — как на главной: текст слева, окно браузера и телефон справа. */
.tp-hero { --hero-pb: clamp(56px, 6vw, 88px); position: relative; z-index: 1; padding: clamp(24px, 3.5vw, 56px) 0 var(--hero-pb); }
.tp-hero-grid { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(32px, 4vw, 72px); align-items: end; }
.tp-hero h1 { font-size: clamp(38px, 2.4vw + 22px, 66px); max-width: 11em; }
.tp-for { margin-top: 18px; color: var(--ink); font-size: 17px; font-weight: 500; }
.tp-hero .lead { margin-top: 16px; }
/* Длинные снимки обрезаются до первого экрана: 16 : 10 у компьютера, 390 : 844 у телефона. */
.tp-top img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.tp-crop img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.tp-crop-mid img { object-position: 50% 45%; }
/* Приглашение внизу страницы темы идёт сразу после полосы «Другие темы»: отступ сверху такой же, как у подвала снизу. */
.tp-cta { margin-top: clamp(64px, 8vw, 128px); }
/* В телефоне приглашения — кусок главной из середины страницы: верх экрана мягко уходит под рамку, строка не режется поперёк. */
.p-cta .tp-crop img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px); mask-image: linear-gradient(to bottom, transparent 0, #000 44px); }

/* Главная целиком: длинный снимок идёт вместе со страницей, экран телефона рядом листается сам.
   Части снимка стоят встык, лишний пиксель перекрытия прячет щель на дробном масштабе. */
.tp-full { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tp-long img { width: 100%; }
.tp-long img + img, .tp-screen img + img { margin-top: -1px; }
.tp-long figcaption { display: none; }
.tp-phone-col { position: sticky; top: 112px; display: grid; justify-items: center; gap: 18px; }
.tp-screen { --scr-h: min(640px, calc(100vh - 200px)); height: var(--scr-h); width: calc(var(--scr-h) * 390 / 844); overflow-y: auto; border-radius: 11% / 5%; background: var(--card); scrollbar-width: thin; scrollbar-color: rgba(30, 34, 29, .35) transparent; }
.tp-screen img { width: 100%; border-radius: 0; }
.tp-screen:focus-visible { border-radius: 11% / 5%; }
.tp-note { max-width: 22em; color: var(--ink-3); font-size: 15px; text-align: center; }

/* Особенности темы и выбор темы: заголовок слева, список справа, как в вопросах. */
.tp-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.tp-split .p-head { position: sticky; top: 112px; margin: 0; }
.tp-points { margin: 0; border-top: 1px solid var(--line-2); }
.tp-points > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(20px, 3vw, 44px); padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.tp-points dt { font: 700 21px/1.3 var(--sans); letter-spacing: -0.02em; }
.tp-points dd { margin: 0; color: var(--ink-2); }
.tl-choose { max-width: 66ch; color: var(--ink-2); }

/* Внутренние страницы темы: окна поменьше, как превью тем, с подписью. */
.tp-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.5vw, 48px) clamp(16px, 2.4vw, 32px); list-style: none; margin: 0; padding: 0; }
.tp-pages .browser { margin-bottom: 18px; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line), 0 16px 32px -20px rgba(30, 34, 29, .3); }
.tp-pages .browser-bar { height: 22px; gap: 5px; padding: 0 10px; }
.tp-pages .browser-bar i { width: 7px; height: 7px; }
.tp-pages h3 { font-size: 21px; letter-spacing: -0.02em; }
.tp-pages p { margin-top: 8px; max-width: 34em; color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* Цвета темы — образцы продукта, как его снимки: живут только в этом списке и в вёрстку
   сайта продаж не переносятся. Тонкая линия внутри отделяет светлый образец от бумаги. */
.tp-palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px clamp(12px, 1.6vw, 20px); list-style: none; margin: 0; padding: 0; }
.tp-palette li { display: grid; gap: 2px; align-content: start; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.tp-swatch { display: block; aspect-ratio: 4 / 3; margin-bottom: 12px; border-radius: var(--r-sm); background: var(--sw, var(--paper-2)); box-shadow: inset 0 0 0 1px rgba(30, 34, 29, .12); }
.tp-palette b { color: var(--ink); font-size: 16px; font-weight: 600; }
.tp-hex { color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tp-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 44px); margin: clamp(44px, 5vw, 72px) 0 0; }
.tp-fonts > div { padding-top: 16px; border-top: 1px solid var(--ink); }
.tp-fonts dt { color: var(--ink-3); font-size: 15px; }
.tp-fonts dd { margin: 6px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.tp-fonts dd b { display: block; margin-bottom: 4px; color: var(--ink); font: 800 clamp(22px, .6vw + 18px, 27px)/1.25 var(--sans); letter-spacing: -0.03em; }

/* Текст о теме и короткая справка сбоку, на линиях. */
.tp-about { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.tp-article h2 { margin: 0 0 8px; max-width: 16em; font-size: clamp(30px, 1.8vw + 20px, 50px); line-height: 1.06; letter-spacing: -0.03em; }
.tp-article h3 { margin-top: 34px; }
.tp-facts { position: sticky; top: 112px; }
.tp-facts dl { margin: 0; border-top: 1px solid var(--line-2); }
.tp-facts dl > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.tp-facts dt { color: var(--ink-3); font-size: 14.5px; }
.tp-facts dd { margin: 2px 0 0; font-weight: 500; }
.tp-more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; max-width: none; }
.tp-more-head .more { margin-top: 0; }

@media (max-width: 1100px) {
  .tp-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl-custom { grid-column: span var(--span2, 1); }
}
@media (max-width: 900px) {
  .tp-hero-grid, .tp-full, .tp-split, .tp-about { grid-template-columns: minmax(0, 1fr); }
  .tp-phone-col { position: static; order: -1; }
  .tp-screen { --scr-h: min(560px, calc(100vh - 240px)); }
  .tp-split .p-head, .tp-facts { position: static; }
  .tp-points > div { grid-template-columns: minmax(0, 1fr); }
  .tp-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-fonts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tp-pages { grid-template-columns: minmax(0, 1fr); }
  .tp-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* На телефоне главная целиком — в рамке телефона; снимок с компьютера — только начало. */
  .tp-long .browser img + img { display: none; }
  .tp-long figcaption { display: block; margin: 14px auto 0; }
}

/* ── Доработки: обзор /dorabotki и страница вида работ /dorabotki/{код} ──────────────
   Обзор — оглавление видов работ строками на линиях (название слева, строка и примеры справа),
   шаги работы с номерами и на песке — что обновление не трогает. Страница вида — шапка как у
   раздела возможностей, разворот «экран — что это даёт», примеры задач определениями, «что
   понадобится — как оцениваем» двумя колонками, обновления на песке, подробный текст. */

/* Оглавление: вся строка — ссылка на страницу вида работ, стрелка сдвигается при наведении. */
.cw-kinds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cw-kind { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 24px; gap: 10px clamp(24px, 4vw, 64px); align-items: baseline; padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.cw-kind h3 { font-size: clamp(22px, .6vw + 18px, 27px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.cw-kind-link { color: var(--ink); text-decoration: none; }
.cw-kind-link::after { content: ""; position: absolute; inset: 0 -8px; border-radius: var(--r-sm); }
.cw-kind:hover .cw-kind-link { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; }
.cw-kind-link:focus-visible { box-shadow: none; }
.cw-kind-link:focus-visible::after { box-shadow: var(--focus); }
.cw-kind-text p { max-width: 36em; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.cw-kind-text .cw-kind-eg { margin-top: 6px; color: var(--ink-3); font-size: 15px; line-height: 1.5; }
.cw-kind > .icon { align-self: center; width: 22px; height: 22px; color: var(--green); transition: transform .25s var(--ease); }
.cw-kind:hover > .icon { transform: translateX(3px); }

/* Шагов шесть, поэтому три колонки в два ряда. */
.cw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(40px, 4.5vw, 64px); }

/* Заголовок слева держится, пока читается колонка справа: обновления, подробный текст. */
.cw-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.cw-split > .p-head { position: sticky; top: 112px; margin: 0; }

/* Что не трогает обновление: термин и пояснение строками на линиях, папки — моноширинным. */
.cw-keeps { margin: 0; border-top: 1px solid var(--ink); }
.cw-keeps > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 6px clamp(20px, 3vw, 44px); padding: 22px 0 24px; border-bottom: 1px solid var(--line-2); }
.cw-keeps dt { font: 700 21px/1.3 var(--sans); letter-spacing: -0.02em; }
.cw-keeps dd { margin: 0; color: var(--ink-2); }
.cw-keeps code, .cw-updates code { padding: 1px 4px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 400 1em/1.4 ui-monospace, Consolas, monospace; white-space: nowrap; }

/* Шапка вида работ: заголовок слева, вводный абзац, кнопки и цена справа. */
.cw-head { padding: clamp(40px, 6vw, 96px) 0 0; }
.cw-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 72px); align-items: start; }
.cw-head h1 { max-width: 13em; font-size: clamp(38px, 2.4vw + 22px, 66px); letter-spacing: -0.035em; }
.cw-head .lead { max-width: 30em; }
.cw-head .p-hero-cta { margin-top: 28px; }
.cw-head .p-hero-note { margin-top: 16px; max-width: 30em; }
/* У обзора под шапкой сразу раздел с линией: отступ снизу, как у шапок других страниц. */
.cw-index-head { padding-bottom: clamp(28px, 3.5vw, 56px); }

/* Разворот «экран — что это даёт»; телефон, если он есть, стоит у правого нижнего угла окна. */
.cw-gives-section { padding-top: clamp(32px, 3.5vw, 56px); }
/* Текст разворота стоит у верхнего края окна, а не посередине высокого снимка. */
.cw-gives { align-items: start; }
.cw-gives > div:last-child { padding-top: clamp(8px, 1.5vw, 24px); }
.cw-gives h2 { font-size: clamp(26px, 1.1vw + 18px, 36px); line-height: 1.1; letter-spacing: -0.03em; }
.cw-media { position: relative; }
.cw-media.has-phone { padding: 0 11% 44px 0; }
.cw-media .phone { position: absolute; right: 0; bottom: 0; width: 24%; }

/* Примеры задач: определения в три колонки на линиях. */
.cw-tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; }
.cw-tasks > div { padding: 20px 0 24px; border-top: 1px solid var(--line); }
.cw-tasks dt { font: 700 19px/1.3 var(--sans); letter-spacing: -0.015em; }
.cw-tasks dd { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* Что понадобится и как оцениваем: две колонки с заголовками групп под линией ink. */
.cw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 88px); align-items: start; }
.cw-pair h2 { padding-bottom: 16px; border-bottom: 1px solid var(--ink); font-size: clamp(22px, .6vw + 18px, 27px); letter-spacing: -0.03em; }
.cw-pair .ticks { margin-top: 0; border-top: 0; }
.cw-pair p { max-width: 36em; color: var(--ink-2); }
.cw-pair h2 + p { margin-top: 18px; }
.cw-pair p + p { margin-top: 14px; }
.cw-pair .cw-price { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }

/* Что будет при обновлениях: первый абзац крупнее, как вводный. */
.cw-updates { max-width: 44em; }
.cw-updates p { color: var(--ink-2); font-size: 17.5px; }
.cw-updates p + p { margin-top: 14px; }
.cw-updates p:first-child { color: var(--ink); font-size: clamp(18px, .35vw + 16px, 21px); line-height: 1.55; }

/* Подробный текст. */
.cw-prose { max-width: 68ch; }
.cw-prose h3 { margin: 32px 0 12px; font-size: 21px; letter-spacing: -0.02em; }
.cw-prose p { font-size: 17.5px; }

/* Другие доработки: три ссылки в колонках с линиями, ниже — все доработки. */
.cw-next h2 { padding-bottom: 16px; border-bottom: 1px solid var(--ink); font-size: clamp(22px, .6vw + 18px, 27px); letter-spacing: -0.03em; }
.cw-next-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.cw-next-list li + li { border-left: 1px solid var(--line); }
.cw-next-list a { display: grid; gap: 8px; align-content: start; height: 100%; padding: 22px clamp(20px, 3vw, 44px) 26px; color: var(--ink); text-decoration: none; }
.cw-next-list li:first-child a { padding-left: 0; }
.cw-next-list li:last-child a { padding-right: 0; }
.cw-next-list b { font: 800 clamp(22px, .6vw + 18px, 27px)/1.2 var(--sans); letter-spacing: -0.03em; }
.cw-next-list span { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.cw-next-list a:hover { color: var(--ink); }
.cw-next-list a:hover b { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.cw-all { padding-top: 22px; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .cw-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cw-kind { grid-template-columns: minmax(0, 1fr) 22px; align-items: start; }
  .cw-kind h3 { grid-column: 1; }
  .cw-kind-text { grid-column: 1 / -1; }
  .cw-kind > .icon { grid-column: 2; grid-row: 1; align-self: start; margin-top: 4px; }
  .cw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cw-split, .cw-head-grid, .cw-pair { grid-template-columns: minmax(0, 1fr); }
  .cw-split > .p-head { position: static; }
  .cw-keeps > div { grid-template-columns: minmax(0, 1fr); }
  .cw-media.has-phone { padding-right: 14%; }
  .cw-media .phone { width: 28%; }
  .cw-next-list { grid-template-columns: minmax(0, 1fr); }
  .cw-next-list li + li { border-left: 0; border-top: 1px solid var(--line); }
  .cw-next-list a, .cw-next-list li:first-child a, .cw-next-list li:last-child a { padding: 20px 0 22px; }
}
@media (max-width: 640px) {
  .cw-tasks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cw-steps { grid-template-columns: minmax(0, 1fr); }
  .cw-kind { padding: 22px 0 24px; }
  .cw-media.has-phone { padding: 0 16% 32px 0; }
  .cw-media .phone { width: 32%; }
}

/* ── Оплата и кассы: обзор /oplata, банк /oplata/{код}, касса /kassy/{код} ─────────────
   Страница банка или кассы — инструкция: шапка с фактами и настоящим экраном, шаги подключения
   с ярлыками полей админки рядом со снимком настроек, путь оплаты с крупными номерами, заметки,
   вопросы, текст на песке, соседние банки и кассы. Обзор — витрина как на главной, путь денег,
   строки банков и касс, переводы и проверка без банка. */

/* Обзор: текст слева, окно «Онлайн-оплат» и телефон со счётом справа, как на главной. */
.pp-hero { --hero-pb: clamp(56px, 6vw, 88px); position: relative; z-index: 1; padding: clamp(24px, 3.5vw, 56px) 0 var(--hero-pb); }
.pp-hero-grid { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(32px, 4vw, 72px); align-items: end; }
.pp-hero h1 { font-size: clamp(38px, 2.4vw + 22px, 66px); letter-spacing: -0.035em; max-width: 12em; }
.pp-hero .lead { margin-top: 24px; }
/* Телефон заходит только на край окна «Онлайн-оплат»: статусы счетов остаются видны. */
.pp-show { padding-right: 16%; }
.pp-how { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(36px, 4vw, 56px); }

/* Строки банков и касс: название-ссылка на всю строку и столбцы с подписями, как в паспорте. */
.pp-rows { --cols: 4; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.pp-row { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 9fr) 24px; gap: clamp(16px, 2vw, 32px); align-items: start; padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.pp-row h3 { font-size: clamp(21px, .6vw + 17px, 26px); font-weight: 800; letter-spacing: -0.03em; }
.pp-row h3 a { color: var(--ink); text-decoration: none; }
.pp-row h3 a::after { content: ""; position: absolute; inset: 0; }
.pp-row h3 a:focus-visible { box-shadow: none; }
.pp-row h3 a:focus-visible::after { box-shadow: var(--focus); border-radius: var(--r-sm); }
.pp-row:hover h3 a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; }
.pp-row dl { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px clamp(16px, 2vw, 32px); margin: 0; }
.pp-row dt { color: var(--ink-3); font-size: 14px; line-height: 1.4; }
.pp-row dd { margin: 3px 0 0; font-size: 16px; line-height: 1.45; }
.pp-row-go { align-self: center; color: var(--green); }
.pp-row-go .icon { transition: transform .25s var(--ease); }
.pp-row:hover .pp-row-go .icon { transform: translateX(3px); }
.pp-rows-note { margin-top: 22px; max-width: 60em; color: var(--ink-2); font-size: 15.5px; }
.pp-spread-title { font-size: clamp(26px, 1.1vw + 18px, 36px); line-height: 1.1; letter-spacing: -0.03em; }

/* «Нет вашего банка или кассы?» — решение владельца продукта, крупно: заголовок слева, ответ справа. */
.pp-nobank-wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 88px); align-items: start; }
.pp-nobank-wide h2 { max-width: 10em; }
.pp-nobank-wide .p-hero-cta { margin-top: 28px; }

/* Шапка банка или кассы: заголовок, вводный абзац и факты на линиях; справа счёт на телефоне
   или окно настроек кассы. */
.pp-head { padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 6vw, 96px); }
.pp-head-grid { display: grid; grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pp-head-grid.has-phone { grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); }
.pp-head h1 { font-size: clamp(38px, 2.4vw + 22px, 66px); letter-spacing: -0.035em; max-width: 13em; }
.pp-head .lead { margin-top: 22px; max-width: 32em; }
.pp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); max-width: 44em; margin: 32px 0 0; }
.pp-facts > div { padding: 13px 0 15px; border-top: 1px solid var(--line-2); }
.pp-facts dt { color: var(--ink-3); font-size: 14.5px; line-height: 1.4; }
.pp-facts dd { margin: 4px 0 0; font-size: 16.5px; font-weight: 500; line-height: 1.45; }
.pp-site { margin-top: 20px; }
.pp-site a { font-weight: 500; }
.pp-site .icon { display: inline-block; width: 17px; height: 17px; margin-left: 5px; vertical-align: -3px; }
.pp-head-phone { justify-self: center; width: min(100%, 300px); }

/* Шаги подключения: номер на полях, заголовок, текст; поля админки — ярлыками, как поля ввода
   в миниатюре; адреса для кабинета банка — кодом. Со снимком настроек шаги слева, окно справа
   держится под шапкой; без снимка заголовок держится слева. */
.pp-setup-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(28px, 5vw, 88px); align-items: start; }
.pp-setup-head { position: sticky; top: 112px; margin: 0; }
.pp-setup.has-shot .pp-setup-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head shot" "steps shot"; }
.pp-setup.has-shot .pp-setup-head { position: static; grid-area: head; margin-bottom: clamp(28px, 3vw, 44px); }
.pp-setup.has-shot .pp-steps { grid-area: steps; }
.pp-setup-shot { grid-area: shot; position: sticky; top: 112px; }
.pp-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: pp-step; }
.pp-steps > li { counter-increment: pp-step; display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.pp-steps > li::before { content: counter(pp-step); grid-row: 1 / span 4; font: 800 56px/.8 var(--sans); letter-spacing: -0.035em; color: var(--green); }
.pp-steps > li > * { grid-column: 2; }
.pp-steps h3 { font-size: 21px; letter-spacing: -0.02em; }
.pp-steps p { margin-top: 8px; max-width: 36em; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.pp-steps .pp-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.pp-fields-label { color: var(--ink-3); font-size: 14.5px; }
.pp-field { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.pp-code { display: block; width: fit-content; max-width: 100%; margin-top: 12px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink); font: 14px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
/* Адрес с подписью, что с ним делать: вписать в кабинет банка или сайт передаёт его сам. */
.pp-steps .pp-address { display: grid; gap: 6px; justify-items: start; margin-top: 14px; }
.pp-address > span { color: var(--ink-3); font-size: 14.5px; line-height: 1.45; }
.pp-address .pp-code { margin-top: 0; }

/* Что происходит после оплаты: шаги с крупными номерами в ряд; у касс ниже — «Онлайн-оплаты». */
.pp-flow-steps.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pp-flow-shot { max-width: 1120px; margin-top: clamp(48px, 6vw, 88px); }

/* Заметки: заголовок держится слева, определения в две колонки на линиях. */
.pp-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.pp-split .p-head { position: sticky; top: 112px; margin: 0; }
.pp-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; }
.pp-notes > div { padding: 20px 0 24px; border-top: 1px solid var(--line-2); }
.pp-notes dt { font: 700 19px/1.3 var(--sans); letter-spacing: -0.02em; }
.pp-notes dd { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.pp-notes .more { display: flex; width: fit-content; margin-top: 10px; }

/* Соседние банки и кассы и «Нет вашего банка или кассы?»: три колонки под линией ink. */
.pp-others-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.pp-others-list h3, .pp-nobank h3 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: clamp(22px, .6vw + 18px, 27px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.pp-others-list h3 a { color: var(--ink); text-decoration: none; }
.pp-others-list h3 a:hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; }
.pp-others-list ul { list-style: none; margin: 0; padding: 0; }
.pp-others-list li { display: grid; gap: 3px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pp-others-list li a, .pp-others-list li b { font-size: 17px; font-weight: 600; }
.pp-others-list li a { color: var(--ink); text-decoration: none; }
.pp-others-list li a:hover { color: var(--green); text-decoration: underline; }
.pp-others-list li b { color: var(--ink-3); }
.pp-others-list li span { color: var(--ink-3); font-size: 15px; line-height: 1.45; }
.pp-nobank { display: grid; gap: 16px; justify-items: start; }
.pp-nobank h3 { justify-self: stretch; }
.pp-nobank p { max-width: 30em; color: var(--ink-2); font-size: 16.5px; }
/* Приглашение идёт после раздела на бумаге: его нижнего отступа хватает. */
.pp-cta { margin-top: 0; }
/* «Т-Банк», «54-ФЗ» не рвутся на дефисе (pnb в payments.go). */
.pp-nw { white-space: nowrap; }

/* Банки и кассы на странице раздела «Оплаты, счета и 1С». */
.pp-links { display: grid; gap: 10px; margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--line-2); }
.pp-links-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 16px; }
.pp-links-row b { margin-right: 4px; font-weight: 700; }
.pp-links-row span { color: var(--ink-3); }
.pp-links .more { margin-top: 6px; }

@media (max-width: 1200px) {
  .pp-flow-steps.is-five { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 1100px) {
  .pp-row dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-others-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-others-grid .pp-nobank { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pp-hero-grid, .pp-head-grid, .pp-head-grid.has-phone, .pp-setup-grid, .pp-split, .pp-nobank-wide { grid-template-columns: minmax(0, 1fr); }
  .pp-show { padding-right: 12%; }
  .pp-setup.has-shot .pp-setup-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "shot" "steps"; }
  .pp-setup-head, .pp-setup-shot, .pp-split .p-head { position: static; }
  .pp-setup-head { margin-bottom: 32px; }
  .pp-setup-shot { margin-bottom: 36px; max-width: 680px; }
  .pp-head-phone { width: min(62%, 280px); margin-top: 8px; }
  .pp-how, .pp-flow-steps.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-row { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 14px; }
  .pp-row dl { grid-column: 1 / -1; grid-row: 2; }
  .pp-row-go { grid-column: 2; grid-row: 1; }
  .pp-notes { grid-template-columns: minmax(0, 1fr); }
  .pp-others-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-flow-shot { max-width: 680px; }
}
@media (max-width: 560px) {
  .pp-facts { grid-template-columns: minmax(0, 1fr); }
  .pp-how, .pp-flow-steps.is-five { grid-template-columns: minmax(0, 1fr); }
  .pp-steps > li { grid-template-columns: 52px minmax(0, 1fr); }
  .pp-row dl { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ── Блог и «Что нового»: лента /blog, статья /blog/{адрес}, выпуски /changelog ─────────
   Лента — оглавление журнала: ведущая статья разворотом (окно с обложкой и заголовок 7 : 5),
   дальше строки содержания — дата на полях, заголовок и анонс, снимок в малом окне. Статья —
   текст 8 : 4 со справкой сбоку на линиях, как текст о теме. «Что нового» — реестр: номер
   версии цифрами 800 на полях, как суммы в ценах, текст выпуска справа. */

/* Рубрики — тот же фильтр ссылками, что у тем, под вводным абзацем. Число стоит через неразрывный
   пробел, без отступа: подчёркивание текущей рубрики идёт одной линией под названием с числом. */
.bl-rubrics { margin: clamp(24px, 3vw, 36px) 0 0; }
.bl-rubrics a span { margin-left: 0; }

/* Ведущая статья: окно с обложкой слева, справа заголовок, анонс и строка о статье. */
.bl-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.bl-lead-shot { display: block; }
.bl-lead-shot img, .bl-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.bl-lead-shot:not(.browser), .bl-cover:not(.browser) { border-radius: var(--r-md); overflow: hidden; }
.bl-lead h2 { font-size: clamp(26px, 1.1vw + 18px, 36px); line-height: 1.1; letter-spacing: -0.03em; }
.bl-lead h2 a, .bl-row-title a { color: var(--ink); text-decoration: none; }
.bl-lead h2 a:hover, .bl-row-title a:hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; }
.bl-summary { margin-top: 18px; max-width: 32em; color: var(--ink-2); font-size: 17.5px; }
.bl-lead-more { margin-top: 22px; }

/* Строка о статье: дата, рубрика, время чтения через точку. Точка стоит после пункта отдельным
   блоком: подчёркивание ссылки её не задевает, а при переносе она не начинает строку. */
.bl-meta { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 16px; color: var(--ink-3); font-size: 15px; }
.bl-meta > :not(:last-child)::after { content: "·"; display: inline-block; margin: 0 9px; }
.bl-meta a { color: inherit; }
.bl-meta a:hover { color: var(--green); }

/* Содержание: заголовок раздела над жирной линией, строки через волосяные. */
.bl-list-head { margin-top: clamp(64px, 7vw, 104px); padding-bottom: 16px; font-size: clamp(22px, .6vw + 18px, 27px); font-weight: 800; letter-spacing: -0.03em; }
.bl-related .bl-list-head, .rl-posts .bl-list-head { margin-top: 0; }
/* Со второй страницы ленты ведущей статьи нет: «Страница N из M» встаёт на её место, без отступа раздела. */
.bl-index .bl-list-head:first-child { margin-top: 0; }
/* «Ещё в рубрике» под статьёй и соседние статьи: тот же ритм, что между текстом и разделом. */
.bl-related-post, .bl-next { padding-top: clamp(64px, 7vw, 104px); }
.bl-related-all { margin-top: 24px; }
.bl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.bl-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); gap: 10px clamp(20px, 3vw, 48px); align-items: start; padding: 26px 0 30px; border-bottom: 1px solid var(--line); }
.bl-row-date { padding-top: 3px; color: var(--ink-3); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.bl-row-title { font-size: clamp(19px, .4vw + 16px, 22px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.bl-row-text > p { margin-top: 10px; max-width: 40em; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.bl-row-text > .bl-row-meta { display: flex; flex-wrap: wrap; margin-top: 12px; color: var(--ink-3); font-size: 14.5px; }
.bl-row-meta > span:not(:last-child)::after { content: "·"; display: inline-block; margin: 0 8px; }
.bl-row-meta-date { display: none; }
.bl-row-shot { display: block; }
.bl-row-shot.browser { border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line), 0 16px 32px -20px rgba(30, 34, 29, .3); }
.bl-row-shot:not(.browser) { border-radius: var(--r-sm); overflow: hidden; }
.bl-row-shot .browser-bar { height: 20px; gap: 5px; padding: 0 9px; }
.bl-row-shot .browser-bar i { width: 6px; height: 6px; }
.bl-row-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.bl-empty { max-width: 40em; color: var(--ink-2); }

/* Страницы ленты: «Новее» слева, номера посередине, «Старее» справа — одной строкой и на телефоне.
   Если номеров много, они переносятся внутри середины, а не вылезают за край. */
.bl-pages { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 36px; }
.bl-pages .is-next { justify-self: end; }
.bl-pages .is-prev:hover .icon { transform: translateX(-3px); }
.bl-page-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.bl-page-nums a { min-width: 40px; padding: 8px 10px; color: var(--ink-2); font-weight: 500; text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.bl-page-nums a:hover { color: var(--ink); }
.bl-page-nums a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 9px; }

/* Под лентой: куда ещё — «Что нового» и RSS. */
.bl-follow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 32px; margin-top: clamp(48px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--line); }
/* Под строками содержания или страницами ленты своя линия не нужна: последняя строка уже на линии. */
.bl-list + .bl-follow, .bl-pages + .bl-follow { padding-top: 0; border-top: 0; }
.bl-follow p { max-width: 44em; color: var(--ink-2); }
.bl-follow-links, .cl-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }

/* Статья: шапка как у страниц возможностей, обложка в окне во всю ширину, текст 8 : 4. */
.bl-post-head { padding: clamp(40px, 6vw, 96px) 0 0; }
.bl-post-head h1 { max-width: 15em; font-size: clamp(38px, 2.4vw + 22px, 66px); letter-spacing: -0.035em; }
.bl-post-head .lead { max-width: 36em; margin-top: 20px; }
.bl-draft { max-width: 44em; margin: 0 0 24px; }
.bl-cover { margin-top: clamp(36px, 4.5vw, 64px); }
.bl-body { padding-top: clamp(56px, 6vw, 96px); }
.bl-body-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.bl-prose { max-width: 62ch; }
.bl-prose > :first-child, .cl-notes > :first-child, .rl-notes > :first-child { margin-top: 0; }
.bl-prose p, .bl-prose li { font-size: 17.5px; }
.bl-prose h2 { margin-top: 48px; }
.bl-facts-more { margin-top: 20px; }

/* «Что нового»: реестр выпусков, номер версии держится на полях, пока читается текст. */
.cl-links { margin-top: 24px; }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px clamp(28px, 5vw, 88px); padding: 28px 0 clamp(40px, 4vw, 56px); border-top: 1px solid var(--ink); }
.cl-side { position: sticky; top: 112px; align-self: start; }
/* Номер версии — цифры 800, как суммы в ценах; не плотнее −0,035em. */
.cl-version { font: 800 clamp(44px, 2vw + 32px, 64px)/1 var(--sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cl-version a { color: var(--ink); text-decoration: none; }
.cl-version a:hover { color: var(--green); }
.cl-date { display: block; margin-top: 12px; color: var(--ink-3); font-size: 15px; }
.cl-notes { max-width: 68ch; }
.cl-notes h3, .rl-notes h3 { margin: 26px 0 10px; font-size: 21px; letter-spacing: -0.02em; }
.cl-notes p, .cl-notes li, .rl-notes p, .rl-notes li { font-size: 17.5px; }
.cl-empty { color: var(--ink-3); }
.cl-more { margin-top: 18px; }

/* Выпуск: номер версии в шапке теми же цифрами, что на полях реестра, дата под ним — один раз.
   Текст из одного короткого абзаца идёт крупно, как вводный, — и в ленте, и на странице. */
.rl-head .rl-version { font-size: clamp(44px, 2vw + 32px, 64px); line-height: 1; letter-spacing: -0.035em; }
.rl-head .rl-date { margin-top: 14px; }
.rl-notes { max-width: 68ch; }
.rl-notes.is-short p, p.rl-notes.is-short, .cl-notes.is-short p { max-width: 34em; color: var(--ink); font-size: clamp(18px, .35vw + 16px, 21px); line-height: 1.55; }
.rl-more { margin-top: 24px; }
.rl-posts { margin-top: clamp(48px, 5vw, 72px); }

/* Ссылка на «Что нового» в карточке обновлений на ценах. */
.price-card .price-news { align-self: flex-start; }

@media (max-width: 900px) {
  .bl-lead, .bl-body-grid, .cl-item { grid-template-columns: minmax(0, 1fr); }
  .bl-facts { position: static; }
  .cl-side { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
  .cl-date { margin-top: 0; }
}
@media (max-width: 640px) {
  /* На телефоне строка — текст во всю ширину, дата уходит в строку под анонсом, снимка нет. */
  .bl-row { grid-template-columns: minmax(0, 1fr); padding: 22px 0 24px; }
  .bl-row-date, .bl-row-shot { display: none; }
  .bl-row-meta-date { display: inline; }
  .bl-pages { column-gap: 8px; }
}

/* ── Облако: страница /oblako, облако на ценах и строка на главной ─────────────────────
   Страница облака — справка о подписке: шапка 6 : 6, под ней окно браузера во всю ширину с
   адресной строкой над настоящей главной сайта и телефон с кабинетом у правого нижнего угла;
   что входит — определения на линиях; цена на зелёной дымке рядом с «как платить»; шаги;
   линейка сроков крупными цифрами на песке; сравнение со своей установкой строками таблицы;
   152-ФЗ — «термин — пояснение» и разворот с чек-листом из админки. */

/* Шапка: заголовок слева; вводный абзац, пара кнопок и строка о цене справа. */
.oc-head { --oc-pb: clamp(32px, 4vw, 56px); position: relative; z-index: 1; padding: clamp(40px, 6vw, 96px) 0 var(--oc-pb); }
.oc-head-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 72px); align-items: start; }
.oc-head h1 { max-width: 12em; font-size: clamp(38px, 2.4vw + 22px, 66px); letter-spacing: -0.035em; }
.oc-head .lead { max-width: 32em; }
.oc-head .p-hero-cta { margin-top: 28px; }
.oc-head .p-hero-note { max-width: 34em; margin-top: 16px; }

/* Окно во всю ширину: в полосе окна — адрес сайта, как в браузере; телефон с кабинетом стоит
   у правого нижнего угла и заходит за линию под шапкой, как на главной. Адрес — пример,
   подписан под окном. */
.oc-show { position: relative; margin-top: clamp(40px, 5vw, 72px); padding-right: 9%; }
/* Окно показывает верх главной сайта 16 : 9: так на экране 1440 × 900 телефон уже виден внизу справа. */
.oc-show .browser img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.oc-show .phone { position: absolute; right: 0; bottom: calc(-1 * var(--oc-pb) - 40px); width: 20%; }
.oc-bar { position: relative; }
/* Адрес — рамка окна, а не текст страницы: кегль мельче шкалы сайта, как у настоящего браузера.
   Имя сайта выделено, домен облака тише — так адресную строку показывают браузеры. */
.oc-address { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 120px); height: 22px; padding: 0 14px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font: 500 13px/1 var(--sans); white-space: nowrap; overflow: hidden; }
.oc-address b { color: var(--ink); font-weight: 600; }
.oc-address .icon { width: 12px; height: 12px; margin-right: 1px; color: var(--green); stroke-width: 2.2; }
.oc-show-note { max-width: 40em; margin-top: 16px; color: var(--ink-3); font-size: 15px; line-height: 1.5; }

/* Что входит: определения в три колонки на линиях. Сверху отступ больше обычного: сюда
   заходит телефон из шапки. */
.oc-gets-section { padding-top: clamp(88px, 9vw, 144px); }
.oc-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; }
.oc-gets > div { padding: 20px 0 24px; border-top: 1px solid var(--line); }
.oc-gets dt { font: 700 19px/1.3 var(--sans); letter-spacing: -0.015em; }
.oc-gets dd { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* Цена: карточка на зелёной дымке слева, «как платить» — определениями справа. */
.oc-price-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.oc-pay h3 { padding-bottom: 16px; border-bottom: 1px solid var(--ink); font-size: clamp(22px, .6vw + 18px, 27px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.oc-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; }
.oc-notes > div { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.oc-notes dt { font: 700 19px/1.3 var(--sans); letter-spacing: -0.02em; }
.oc-notes dd { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.oc-pay-more { margin-top: 22px; }
.price-card .oc-card-more { align-self: flex-start; }

/* Линейка сроков: сколько дней — цифрами 800, как суммы в ценах, над линией ink; у начала
   каждого отрезка засечка. Отрезки неравные: пауза в 30 дней заметно длиннее трёх дней повторов,
   но каждый не уже, чем нужно тексту под ним. Последняя остановка — удаление: линия кончается
   упором, срока у неё нет. Строки цифр и текста общие у всех остановок (subgrid), поэтому линия
   идёт на одной высоте. Ниже — строка об отказе. */
.oc-ruler { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: auto auto; list-style: none; margin: 0; padding: 0; }
.oc-ruler > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.oc-days { align-self: end; padding: 0 24px 18px 0; color: var(--ink-2); font: 500 18px/1 var(--sans); }
.oc-days b { color: var(--ink); font: 800 clamp(44px, 2vw + 32px, 64px)/1 var(--sans); letter-spacing: -0.035em; }
.oc-stage { grid-row: 2; position: relative; padding: 24px clamp(20px, 3vw, 44px) 0 0; border-top: 1px solid var(--ink); }
.oc-stage::before { content: ""; position: absolute; left: 0; top: -8px; width: 1px; height: 15px; background: var(--ink); }
.oc-ruler-stop .oc-stage { border-top-color: transparent; }
.oc-ruler-stop .oc-stage::before { width: 3px; }
.oc-stage h3 { font-size: 21px; letter-spacing: -0.02em; }
.oc-stage p { max-width: 30em; margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.oc-ruler-note { max-width: 62em; margin-top: clamp(40px, 4.5vw, 64px); padding-top: 20px; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 16px; }

/* Облако или своя установка: таблица строками на волосяных линиях — термин слева, две колонки
   справа. До 760px строка — блок, у каждой колонки своя подпись. */
.oc-compare { width: 100%; border-collapse: collapse; }
.oc-compare th, .oc-compare td { padding: 18px 0 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.oc-compare thead th { padding: 0 0 14px; border-bottom-color: var(--ink); font: 800 clamp(22px, .6vw + 18px, 27px)/1.2 var(--sans); letter-spacing: -0.03em; }
.oc-compare tbody th { width: 24%; padding-right: clamp(16px, 2vw, 32px); font: 700 17px/1.4 var(--sans); letter-spacing: -0.01em; }
.oc-compare td { width: 38%; padding-right: clamp(16px, 2.4vw, 40px); color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.oc-compare td:last-child { padding-right: 0; }
.oc-cell-label { display: none; }

/* 152-ФЗ: заголовок держится слева, «термин — пояснение» справа, ниже разворот с чек-листом. */
.oc-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.oc-split > .p-head { position: sticky; top: 112px; margin: 0; }
.oc-split .lead { text-wrap: balance; }
.oc-law { margin: 0; border-top: 1px solid var(--ink); }
.oc-law > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 6px clamp(20px, 3vw, 44px); padding: 22px 0 24px; border-bottom: 1px solid var(--line-2); }
.oc-law dt { font: 700 21px/1.3 var(--sans); letter-spacing: -0.02em; }
.oc-law dd { margin: 0; color: var(--ink-2); }
.oc-law .more { display: flex; width: fit-content; margin-top: 10px; }
.oc-law-spread { margin-top: clamp(72px, 9vw, 136px); }

/* Цены: облако рядом со своей установкой. Подпись группы — над её карточками под линией ink:
   облако в первой колонке, лицензия и обновления — в двух следующих. */
.oc-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 28px); }
.oc-choice-label { align-self: end; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: clamp(22px, .6vw + 18px, 27px); line-height: 1.2; letter-spacing: -0.03em; }
.oc-choice-cloud { grid-area: 1 / 1; }
.oc-choice-box { grid-area: 1 / 2 / 2 / 4; }
.oc-choice > .price-card { grid-row: 2; }
.oc-choice > .oc-cloud-card { grid-column: 1; }
.oc-choice > .price-install { grid-row: 3; grid-column: 2 / 4; margin-top: clamp(16px, 2vw, 28px); }
/* Три карточки в ряд уже двух: сумма чуть мельче, чтобы «навсегда» и «в месяц» остались в строке с ней. */
.oc-choice .price-card .amount { font-size: clamp(44px, 1vw + 34px, 50px); }

/* Главная: под строкой о лицензии — путь к облаку. Стрелка стоит в строке текста и при переносе
   уходит вместе с последним словом. */
.p-hero-note.oc-hero-cloud { margin-top: 10px; }
.oc-hero-cloud a { font-weight: 500; text-decoration: none; }
.oc-hero-cloud a:hover { text-decoration: underline; }
.oc-hero-cloud .icon { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; transition: transform .25s var(--ease); }
.oc-hero-cloud a:hover .icon { transform: translateX(3px); }
.oc-nw { white-space: nowrap; }

/* Ссылки на пункты договора и политики (/legal/offer#poruchenie) не прячут заголовок под шапкой. */
.prose h2[id] { scroll-margin-top: 104px; }

/* Колонка текста в шапке уже 1280: кнопки компактнее, как на первом экране главной. */
@media (max-width: 1280px) {
  .oc-head .btn-lg { padding: 0 24px; }
}
/* Уже 1200 короткие отрезки линейки стали бы тесны для текста: остановки идут столбиком, у каждой
   своя линия, у удаления — упор без линии дальше. */
@media (max-width: 1200px) {
  .oc-ruler { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 36px; }
  .oc-ruler > li { grid-row: auto; grid-template-rows: auto auto; }
  .oc-days { align-self: auto; }
  .oc-stage { grid-row: auto; }
}
@media (max-width: 1100px) {
  .oc-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Три карточки в ряд уже не помещаются: облако слева, лицензия и обновления — столбиком справа. */
  .oc-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(16px, 2vw, 28px); }
  .oc-choice-label { margin-bottom: 0; }
  .oc-choice-box { grid-area: 1 / 2; }
  .oc-choice > .price-card, .oc-choice > .price-install { grid-row: auto; grid-column: 2; margin-top: 0; }
  .oc-choice > .oc-cloud-card { grid-area: 2 / 1; }
}
@media (max-width: 900px) {
  .oc-head-grid, .oc-price-grid, .oc-split { grid-template-columns: minmax(0, 1fr); }
  .oc-show { padding-right: 12%; }
  .oc-show .phone { width: 26%; bottom: calc(-1 * var(--oc-pb) - 28px); }
  .oc-show-note { max-width: 72%; }
  .oc-split > .p-head { position: static; }
  .oc-law > div { grid-template-columns: minmax(0, 1fr); }
  .oc-choice { grid-template-columns: minmax(0, 1fr); }
  .oc-choice-cloud, .oc-choice-box, .oc-choice > .price-card, .oc-choice > .oc-cloud-card, .oc-choice > .price-install { grid-area: auto; }
  .oc-choice-box { margin-top: 28px; }
}
@media (max-width: 760px) {
  .oc-compare, .oc-compare tbody, .oc-compare tr, .oc-compare th, .oc-compare td { display: block; width: auto; }
  .oc-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .oc-compare { border-top: 1px solid var(--ink); }
  .oc-compare tbody tr { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
  .oc-compare tbody th, .oc-compare td { width: auto; padding: 0; border: 0; }
  .oc-compare td { margin-top: 10px; }
  .oc-cell-label { display: block; margin-bottom: 2px; color: var(--ink-3); font-size: 14px; }
}
@media (max-width: 640px) {
  .oc-gets, .oc-notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .oc-address { gap: 4px; max-width: calc(100% - 64px); height: 18px; padding: 0 10px; font-size: 11px; }
  .oc-address .icon { width: 10px; height: 10px; }
  .oc-show .phone { width: 30%; }
  .oc-show-note { max-width: 64%; font-size: 14px; }
}

/* ── Плашка о cookie и Яндекс Метрике (portal.js): слева внизу, кнопка чата остаётся справа ── */
.cookie-bar { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; gap: 14px; width: min(520px, calc(100vw - 32px)); padding: 18px 20px; border-radius: var(--r-md); background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-window); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cookie-bar[hidden] { display: none; }
.cookie-bar a { color: var(--green); }
.cookie-bar-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-bar .btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
.p-footer-cookie { padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.p-footer-cookie:hover { color: var(--ink-2); }
/* На телефоне плашка над кнопкой чата, чтобы та её не закрывала. */
@media (max-width: 560px) {
  .cookie-bar { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); }
}