/* Вид «Мягкий» (Р-42): токены и компоненты всех страниц сервиса.
   Источник — docs/дизайн/мягкий/макеты.html и DESIGN.md с поправками в шапке.
   Файл отдаёт сам сервис (/static/booking.css), шрифт — /static/fonts, без внешних адресов. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin-wght-normal.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;
}

/* ---------- Токены (DESIGN.md §3, §5 + поправки «Мягкого») ---------- */
:root {
  color-scheme: light;
  --color-bg-page: #EEF3FB;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #E6EDF8;
  --color-bg-soft: #F5F8FD;
  --color-text-primary: #172536;
  --color-text-secondary: #475569;
  --color-text-tertiary: #5B6878;
  --color-border-control: #7D8B9B;
  --color-border-decorative: #E3E9F3;
  --color-action-primary: #2255B5;
  --color-action-hover: #19448F;
  --color-action-pressed: #12356E;
  --color-action-subtle: #EAF1FF;
  --color-action-on-subtle: #184A9C;
  --color-text-on-action: #FFFFFF;
  --color-danger-solid: #9C2936;
  --color-danger-hover: #84202B;
  --color-text-on-danger: #FFFFFF;
  --color-focus: #2255B5;
  --color-focus-gap: #FFFFFF;
  --color-status-confirmed-text: #17603A;
  --color-status-confirmed-bg: #E7F5EC;
  --color-status-request-text: #1C4D9E;
  --color-status-request-bg: #EAF1FF;
  --color-status-cancelled-text: #9C2936;
  --color-status-cancelled-bg: #FBEAEC;
  --color-status-attention-text: #754700;
  --color-status-attention-bg: #FFF3D6;
  --color-status-neutral-text: #475569;
  --color-status-neutral-bg: #E9EEF3;

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius-card: 1.375rem;   /* 22 px */
  --radius-control: 1rem;    /* 16 px */
  --radius-small: .75rem;    /* 12 px */
  --shadow-card: 0 1px 2px rgb(23 37 54 / 5%), 0 10px 30px rgb(34 85 181 / 8%);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem;
  --size-control-min: 2.75rem;    /* 44 px */
  --size-control-mobile: 3rem;    /* 48 px */
  --size-control-comfort: 3.25rem;/* 52 px */
}

/* Тёмная тема — только у страниц пациента (DESIGN.md §3.4); кабинет светлый. */
@media (prefers-color-scheme: dark) {
  .patient {
    color-scheme: dark;
    --color-bg-page: #0D1420;
    --color-bg-surface: #162133;
    --color-bg-subtle: #1E2D42;
    --color-bg-soft: #1A273A;
    --color-text-primary: #F5F7FC;
    --color-text-secondary: #CBD6E2;
    --color-text-tertiary: #CBD6E2;
    --color-border-control: #8293AA;
    --color-border-decorative: #2A3A52;
    --color-action-primary: #9DBDFF;
    --color-action-hover: #B5CCFF;
    --color-action-pressed: #D0DFFF;
    --color-action-subtle: #1D3256;
    --color-action-on-subtle: #B7CEFF;
    --color-text-on-action: #102544;
    --color-danger-solid: #FFBBC1;
    --color-danger-hover: #FFD0D5;
    --color-text-on-danger: #172536;
    --color-focus: #F8B44F;
    --color-focus-gap: #162133;
    --color-status-confirmed-text: #A9EFC9;
    --color-status-confirmed-bg: #153628;
    --color-status-request-text: #B7CEFF;
    --color-status-request-bg: #1D3256;
    --color-status-cancelled-text: #FFBBC1;
    --color-status-cancelled-bg: #48232D;
    --color-status-attention-text: #FFE0A3;
    --color-status-attention-bg: #443015;
    --color-status-neutral-text: #DAE4F0;
    --color-status-neutral-bg: #26364A;
    --shadow-card: none;
  }
}

/* ---------- Основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; margin: 0 0 var(--space-4); text-wrap: balance; }
h2 { font-size: 1.125rem; line-height: 1.35; font-weight: 800; margin: var(--space-6) 0 var(--space-3); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-action-primary); text-underline-offset: 3px; }
strong { font-weight: 700; }
code { font-size: .9em; background: var(--color-bg-subtle); padding: .1em .35em; border-radius: .35em; }
.muted { color: var(--color-text-tertiary); }
.ok { color: var(--color-status-confirmed-text); }
.error { color: var(--color-status-cancelled-text); font-weight: 600; }
.cancelled { color: var(--color-text-tertiary); text-decoration: line-through; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-focus-gap), 0 0 0 4px var(--color-focus);
}
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}

/* ---------- Кнопки ---------- */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-control-min);
  padding: .55rem 1.1rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  cursor: pointer;
}
@media (hover: hover) { button:hover, .button:hover { background: var(--color-action-hover); } }
button:active, .button:active { background: var(--color-action-pressed); }
button.secondary, .button.secondary {
  background: var(--color-action-subtle);
  color: var(--color-action-on-subtle);
}
@media (hover: hover) { button.secondary:hover, .button.secondary:hover { background: var(--color-bg-subtle); } }

/* ---------- Поля ---------- */
input, select, textarea {
  font: inherit;
  max-width: 100%;
  min-height: var(--size-control-min);
  padding: .5rem .85rem;
  color: var(--color-text-primary);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-small);
}
textarea { line-height: 1.45; }
input[type=checkbox], input[type=radio] {
  min-height: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  margin: 0 .5rem 0 0;
  vertical-align: -.25rem;
  accent-color: var(--color-action-primary);
}
label { display: block; margin: 0 0 var(--space-3); font-weight: 600; font-size: .9375rem; color: var(--color-text-secondary); }
label input:not([type=checkbox]):not([type=radio]), label select, label textarea {
  display: block;
  width: 100%;
  margin-top: .35rem;
  font-weight: 400;
}
label input:not([type=checkbox]):not([type=radio]), label select { max-width: 22rem; }
label textarea { max-width: 40rem; }
fieldset {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-card);
}
legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-3); font-weight: 800; color: var(--color-text-primary); }
legend + * { clear: both; }

/* ---------- Таблицы ---------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9375rem;
  background: var(--color-bg-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin: 0 0 var(--space-4);
}
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--color-border-decorative); vertical-align: top; }
th { font-size: .8125rem; font-weight: 700; color: var(--color-text-tertiary); background: var(--color-bg-soft); }
tr:last-child td { border-bottom: 0; }
td { font-variant-numeric: tabular-nums; }

/* ---------- Сообщения ---------- */
.message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-small);
  background: var(--color-status-attention-bg);
  color: var(--color-status-attention-text);
  font-weight: 600;
}

/* ---------- Общая шапка ---------- */
.site-header, main, .site-footer { width: 100%; margin: 0 auto; padding-inline: max(1rem, env(safe-area-inset-left, 0px)); }
.site-header { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-4) var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--color-text-primary); text-decoration: none; }
.brand::before {
  content: "z.";
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .7rem;
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  font-size: .8125rem;
  font-weight: 800;
}
main { padding-block: var(--space-4) var(--space-8); }
.site-footer { color: var(--color-text-tertiary); font-size: .875rem; padding-block: 0 var(--space-6); }
/* Яндекс Метрика (B45): строка в подвале и пиксель без скриптов — за краем экрана, без `style` в разметке. */
.metrika-note { display: block; }
.metrika-pixel { position: absolute; left: -9999px; }

/* ---------- Пациент · 360 px первым (DESIGN.md §7.1) ---------- */
.patient .site-header, .patient main, .patient .site-footer { max-width: 32.5rem; }
.patient .brand::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; }
.patient h1 { font-size: 1.5625rem; }
.patient p { font-size: 1.0625rem; }
.patient button, .patient .button { min-height: var(--size-control-comfort); font-size: 1.0625rem; width: 100%; }
.ticket {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 1.375rem;
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-card);
}
.ticket p { margin: 0; }
.patient .when, .when { font-size: 1.75rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-wrap: balance; }
.state { margin-top: var(--space-2) !important; }
.state strong, .chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
  background: var(--color-status-neutral-bg);
  color: var(--color-status-neutral-text);
}
.state strong::before, .chip::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.actions { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
.actions form { margin: 0; }
.contact {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: 1.125rem;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-card);
}
.contact p { font-size: .9375rem; color: var(--color-text-secondary); }
.contact p:last-child { margin-bottom: 0; }
.contact form { margin-top: var(--space-3); }
.change { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-4); }
.change p {
  margin: 0;
  padding: var(--space-4) 1.125rem;
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-text-tertiary);
  font-size: .9375rem;
}
.change strong { display: block; color: var(--color-text-primary); font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.options-day { font-size: 1.125rem; margin: var(--space-4) 0 0; }
.options { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-2); }
.options a { display: flex; width: 100%; min-height: var(--size-control-mobile); }
.patient fieldset label { display: flex; align-items: center; min-height: var(--size-control-mobile); margin: .35rem 0; padding: 0 var(--space-4); border-radius: .875rem; background: var(--color-bg-soft); font-size: 1rem; font-weight: 500; color: var(--color-text-primary); }
.patient fieldset label:has(input:checked) { background: var(--color-action-subtle); color: var(--color-action-on-subtle); font-weight: 700; }
.patient .actions button[type=submit].danger, .patient button.danger { background: var(--color-danger-solid); color: var(--color-text-on-danger); }

/* ---------- Кабинет ---------- */
.staff .site-header, .staff .site-footer { max-width: 80rem; }
.staff main { max-width: 80rem; }
.cabinet { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.cabinet > .side { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.cabinet > .content { min-width: 0; }
.bar { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: .875rem; background: var(--color-bg-subtle); }
.bar form { margin: 0; }
.bar .who { color: var(--color-text-secondary); font-size: .8125rem; font-weight: 600; }
.bar button { min-height: 2.25rem; padding: .3rem .8rem; background: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: var(--shadow-card); width: 100%; }
nav.admin { display: flex; flex-direction: column; gap: 2px; }
nav.admin a {
  display: flex;
  align-items: center;
  min-height: 2.625rem;
  padding: 0 .75rem;
  border-radius: .75rem;
  color: var(--color-text-secondary);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
nav.admin a[aria-current="page"] { background: var(--color-bg-surface); color: var(--color-action-primary); box-shadow: var(--shadow-card); }
@media (hover: hover) { nav.admin a:hover { background: var(--color-bg-surface); } }
.staff main h1 { font-size: 1.5rem; }
form.inline { display: inline; margin: 0; }
form.inline button { min-height: 2rem; padding: .2rem .65rem; background: var(--color-status-cancelled-bg); color: var(--color-status-cancelled-text); font-size: .875rem; }
/* Сообщения (Р-118): список без таблицы — читается на 360 px. */
ul.messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
ul.messages li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-decorative); }
ul.messages form { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 0 var(--space-2); }
ul.messages form button { width: auto; min-height: 2.25rem; padding: .25rem .8rem; }
.days { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin: 0 0 var(--space-4); }
.days form { display: flex; gap: var(--space-2); margin: 0; }
.days button { min-height: 2.5rem; padding: .3rem .9rem; }
.slots { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.slots label { display: inline-flex; align-items: center; margin: 0; padding: .35rem .8rem; border-radius: .75rem; background: var(--color-bg-soft); color: var(--color-text-primary); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slots label:has(input:checked) { background: var(--color-action-primary); color: var(--color-text-on-action); }
.slots input { margin-right: .35rem; }
.chains { margin: 0 0 var(--space-3); }
.parts { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.parts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--space-3); padding: .35rem 0; border-bottom: 1px solid var(--color-border-decorative); }
.parts form { margin: 0; }
.staff fieldset > p:last-child { margin-bottom: 0; }

/* Задача «позвонить» (DESIGN.md §7.7а) — читается на телефоне от 360 px */
fieldset.call { overflow-wrap: anywhere; }
/* Подключение MAX (B30): QR от рантайма — как есть, на белом поле для камеры телефона. */
.qr { display: inline-block; padding: var(--space-3); margin: 0 0 var(--space-3); border-radius: .875rem; background: #fff; }
.qr svg { display: block; width: min(16rem, 70vw); height: auto; }
.max-account .terms { max-width: 60ch; color: var(--color-text-secondary); }
.max-account form + form { margin-top: var(--space-3); }
.max-account .code { font-size: 1.5rem; overflow-wrap: anywhere; }
/* QR подключения телефона для SMS (B43): тёмное на белом фоне самого SVG, не меньше 260 px. */
.max-account .qr { width: min(100%, 20rem); min-width: 260px; margin: 0 0 var(--space-3); }
.max-account .qr svg { display: block; width: 100%; height: auto; }
.qr-fallback { margin-top: var(--space-3); }
.qr-fallback p { overflow-wrap: anywhere; }
/* Тексты сообщений (Р-106): вкладки MAX и SMS, кнопки подстановок и счётчик частей ставит message-texts.js;
   без скрипта вкладки идут одна под другой. Пример MAX — с переводами строк, как в мессенджере. */
.warning { color: var(--color-status-attention-text); font-weight: 600; }
.message-texts .tabs { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); }
.message-texts .tabs[hidden], .message-texts .inserts[hidden], .message-texts .channel[hidden] { display: none; }
.message-texts .tabs button[aria-selected=true] { background: var(--color-action-primary); color: var(--color-text-on-action); }
.message-texts .inserts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.message-texts .inserts button { min-height: 2rem; padding: .2rem .65rem; font-size: .875rem; }
.message-texts .sample { max-width: 40rem; padding: var(--space-3) var(--space-4); border-radius: .875rem; background: var(--color-bg-soft); overflow-wrap: anywhere; }
.message-texts .sample-lines { white-space: pre-line; }
.message-texts .sms-parts.next-part { color: var(--color-status-attention-text); font-weight: 700; }
.demo-msg p:last-child { white-space: pre-line; }
.button.dial { display: flex; width: 100%; min-height: var(--size-control-comfort); margin: 0 0 var(--space-3); font-size: 1.0625rem; }
.call-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-3); }
.call-actions form { margin: 0; }
.call-actions button { width: 100%; min-height: var(--size-control-mobile); padding: .5rem; background: var(--color-action-subtle); color: var(--color-action-on-subtle); font-size: .9375rem; }

/* Вход */
.login main { max-width: 27rem; padding-top: 10vh; }
.login form { padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-bg-surface); box-shadow: var(--shadow-card); }
.login form button { width: 100%; margin-top: var(--space-2); }
.login label input:not([type=checkbox]):not([type=radio]) { max-width: none; }

/* ---------- Общие блоки прежней главной (B21), которыми пользуются справка и кабинет ---------- */
.section-head { display: flex; flex-direction: column; gap: var(--space-2); }

/* Первый экран */
.hero-text { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.eyebrow { padding: .3rem .8rem; border-radius: 999px; background: var(--color-action-subtle); color: var(--color-action-on-subtle); font-size: .875rem; font-weight: 700; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ctas .button { min-height: var(--size-control-comfort); padding-inline: 1.4rem; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.pills li { padding: .35rem .8rem; border-radius: 999px; background: var(--color-bg-surface); box-shadow: var(--shadow-card); font-size: .875rem; font-weight: 600; color: var(--color-text-secondary); }
.pills li::before, .checklist .yes::before { content: "✓"; margin-right: .45rem; color: var(--color-status-confirmed-text); font-weight: 800; }
.hero-sample { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: 2rem; background: var(--color-bg-subtle); }
.sample-note { font-size: .8125rem; color: var(--color-text-tertiary); }

/* Примеры экранов — те же компоненты, что у сервиса, в уменьшенном виде */
.msg { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: 1.25rem 1.25rem 1.25rem .4rem; background: var(--color-bg-surface); box-shadow: var(--shadow-card); font-size: .9375rem; }
.msg-from { font-size: .8125rem; font-weight: 700; color: var(--color-text-tertiary); }
.msg-link { color: var(--color-action-primary); font-weight: 700; }
.screen { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-bg-surface); box-shadow: var(--shadow-card); }
.screen .ticket { background: var(--color-bg-soft); box-shadow: none; }
.screen-title, .mini-title { font-weight: 800; font-size: 1.0625rem; }
.screen .ticket { margin: 0; padding: var(--space-4); }
.screen .when { font-size: 1.375rem; }
.chip-ok { background: var(--color-status-confirmed-bg) !important; color: var(--color-status-confirmed-text) !important; }
.sample-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.sample-actions .button { min-height: var(--size-control-mobile); }
.button.outline { background: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-border-decorative); }

/* Ленты и карточки */
.band { padding: var(--space-8); border-radius: 2rem; background: var(--color-bg-surface); }
.band .card { background: var(--color-bg-soft); box-shadow: none; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6); border-radius: 1.5rem; background: var(--color-bg-surface); box-shadow: var(--shadow-card); }
.card p { color: var(--color-text-secondary); line-height: 1.5; }
.card .tag, .chain .who { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: var(--color-action-on-subtle); }
.chain .who { text-transform: uppercase; color: var(--color-text-tertiary); }

/* Цепочка связи: запись → сообщение → звонок → SMS */
.chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.chain li { position: relative; display: flex; flex-direction: column; gap: var(--space-1); }
.chain li p:not(.who) { color: var(--color-text-secondary); }
.chain li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border-radius: 1rem;
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  font-weight: 800;
}
.chain li:not(:last-child)::after { content: ""; position: absolute; top: 1.5rem; left: 3.75rem; right: calc(-1 * var(--space-6) + .75rem); border-top: 2px dashed var(--color-border-decorative); }
.chain .chain-call::before { background: var(--color-status-attention-bg); color: var(--color-status-attention-text); }
.chain .chain-sms::before { background: var(--color-status-neutral-bg); color: var(--color-status-neutral-text); }

/* Сравнение: таблица, на телефоне — карточки */
table.compare { box-shadow: none; border-radius: 0; background: transparent; font-size: .9375rem; }
.compare th, .compare td { padding: var(--space-4); background: transparent; }
.compare thead th { font-size: .875rem; color: var(--color-text-tertiary); }
.compare thead th.ours { color: var(--color-action-primary); }
.compare tbody th { width: 20%; font-size: .9375rem; color: var(--color-text-primary); }
.compare td { color: var(--color-text-secondary); }
.compare td.ours { background: var(--color-action-subtle); color: var(--color-text-primary); font-weight: 600; }
.footnote { font-size: .8125rem; color: var(--color-text-tertiary); }

/* Роли с примерами экранов */
.roles .card { gap: var(--space-2); }
.roles ul { margin: 0 0 var(--space-3); padding-left: 1.2rem; color: var(--color-text-secondary); }
.mini { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-4); border-radius: 1.125rem; background: var(--color-bg-page); font-size: .8125rem; }
.mini p { font-size: .8125rem; color: var(--color-text-primary); }
.mini .muted, .mini-note { color: var(--color-text-tertiary) !important; }
.mini .button { min-height: 2.25rem; padding: .35rem .8rem; font-size: .8125rem; border-radius: .75rem; }
.mini .change { gap: var(--space-2); margin: 0; }
.mini .change p { padding: var(--space-2) var(--space-3); border-radius: .875rem; box-shadow: none; font-size: .8125rem; }
.mini .change strong { font-size: 1rem; }
.mini-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-radius: .875rem; background: var(--color-bg-surface); }
.mini-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1) !important; }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.mini-stats div { padding: var(--space-2) var(--space-3); border-radius: .875rem; background: var(--color-bg-surface); }
.mini-stats dt { color: var(--color-text-tertiary); }
.mini-stats dd { margin: 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Что видит пациент: список слева, примеры справа */
.checklist { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); font-weight: 600; }
.checklist .no::before { content: "✕"; margin-right: .45rem; color: var(--color-status-cancelled-text); font-weight: 800; }
.samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.samples .screen .ticket { background: var(--color-bg-soft); box-shadow: none; }
.samples .when { font-size: 1.125rem; }

/* Данные — 2×2, пилот — шаги с номером */
.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts h3 { font-size: 1.0625rem; }
.pilot { counter-reset: step; }
.pilot h3::before { counter-increment: step; content: counter(step) ". "; color: var(--color-action-primary); }

/* Финальный призыв */
.cta-band p { margin-top: var(--space-2) !important; opacity: .9; }
.cta-band .ctas { flex-direction: column; align-items: stretch; }
.cta-band .button { background: var(--color-bg-surface); color: var(--color-action-primary); }
.cta-band .button.secondary { background: rgb(255 255 255 / 14%); color: var(--color-text-on-action); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); }
@media (hover: hover) { .cta-band .button:hover { background: var(--color-action-subtle); } .cta-band .button.secondary:hover { background: rgb(255 255 255 / 24%); } }
.cta-band :focus-visible { box-shadow: 0 0 0 2px var(--color-action-primary), 0 0 0 4px var(--color-focus-gap); }

/* Главная: планшет и телефон */
@media (max-width: 64rem) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
  .chain li:nth-child(2)::after { display: none; }
}
@media (max-width: 52rem) {
  .roles, .pilot { grid-template-columns: minmax(0, 1fr); }
  .roles .mini { max-width: 26rem; }
  table.compare { display: table; overflow: visible; }
}
@media (max-width: 40rem) {
  .hero-text, .ctas { align-items: stretch; }
  .hero-text .eyebrow { align-self: flex-start; }
  .ctas { flex-direction: column; }
  .pills { flex-direction: column; align-items: flex-start; }
  .band, .cta-band { padding: var(--space-6) var(--space-4); border-radius: 1.5rem; }
  .cards, .facts, .samples { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--space-5); }
  .chain { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .chain li { padding-left: 4rem; min-height: 3rem; }
  .chain li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .chain li:not(:last-child)::after { display: block; top: 3.5rem; bottom: calc(-1 * var(--space-5) + .5rem); left: 1.5rem; right: auto; border-top: 0; border-left: 2px dashed var(--color-border-decorative); }
  table.compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { margin-bottom: var(--space-3); border-radius: 1.125rem; background: var(--color-bg-soft); overflow: hidden; }
  .compare tbody th { width: auto; padding-bottom: var(--space-2); border: 0; }
  .compare td { border: 0; padding-top: var(--space-2); }
  .compare td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 700; color: var(--color-text-tertiary); }
  .compare td.ours::before { color: var(--color-action-on-subtle); }
}

/* ---------- Календарь регистратора (B25, Р-57, макет calendar_day) ----------
   Шкала дня: колонка на врача, блок записи по времени и длительности. Положение — классы
   часа и минуты (шаблону нельзя писать style=, CSP): .from-Ч — первый час шкалы, .span-N — часов
   на шкале, .sh-Ч .sm-М — начало блока, .eh-Ч .em-М — конец (минуты с шагом 5). */
.pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.pagehead h1 { margin: 0; }
.pagehead .days { margin: 0; }
.pagehead .days .button { min-height: 2.5rem; padding: .3rem .9rem; }
.cal-tabs > input { display: none; }
.tab-labels { display: none; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-5); align-items: start; }
.cal-side { display: flex; flex-direction: column; gap: var(--space-4); }
.pane > h2:first-child { margin-top: 0; }
.empty { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; margin: 0; padding: var(--space-8) var(--space-4); border: 2px dashed var(--color-border-control); border-radius: var(--radius-card); color: var(--color-text-secondary); text-align: center; }
.empty b { color: var(--color-text-primary); }
.legend { font-size: .875rem; margin-top: var(--space-3); }

.timegrid {
  --hour: 6rem;
  --sm: 0; --em: 0;
  display: grid;
  grid-template-columns: 3.5rem;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9rem, 1fr);
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-card);
}
.lane-head { height: 3.75rem; margin: 0; padding: var(--space-2) var(--space-3); overflow: hidden; border-bottom: 1px solid var(--color-border-decorative); background: var(--color-bg-soft); font-size: .875rem; line-height: 1.3; font-weight: 800; }
.lane-head .muted { font-weight: 600; }
.lane-body { position: relative; height: calc(var(--hours) * var(--hour)); }
.lane .lane-body { border-left: 1px solid var(--color-border-decorative); background-image: linear-gradient(var(--color-border-decorative) 1px, transparent 1px); background-size: 100% var(--hour); }
.rail span { position: absolute; right: .5rem; top: calc((var(--sh) - var(--h0)) * var(--hour) + .2rem); font-size: .75rem; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.off { position: absolute; left: 0; right: 0; top: calc((var(--sh) - var(--h0) + var(--sm) / 60) * var(--hour)); height: calc((var(--eh) - var(--sh) + (var(--em) - var(--sm)) / 60) * var(--hour)); background: var(--color-bg-subtle); opacity: .7; }
.day-note { margin: 0 0 var(--space-3); }
/* Пустая клетка рабочего времени — ссылка на новую запись (Р-82); подпись «+ ЧЧ:ММ» — при наведении и фокусе */
.cell { position: absolute; left: 0; right: 0; top: calc((var(--sh) - var(--h0) + var(--sm) / 60) * var(--hour)); height: calc((var(--eh) - var(--sh) + (var(--em) - var(--sm)) / 60) * var(--hour)); display: flex; align-items: flex-start; padding: .2rem .55rem; border-radius: .5rem; color: var(--color-action-primary); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.cell span { opacity: 0; }
.cell:hover, .cell:focus-visible { background: var(--color-action-subtle); }
.cell:hover span, .cell:focus-visible span { opacity: 1; }
/* Перетаскивание записи мышью (calendar.js, Р-83): тень на месте назначения — те же классы положения */
.visit[data-move] { cursor: grab; user-select: none; }
.visit--dragging { opacity: .45; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }
.ghost { position: absolute; left: 3px; right: 3px; z-index: 2; top: calc((var(--sh) - var(--h0) + var(--sm) / 60) * var(--hour) + 2px); height: calc((var(--eh) - var(--sh) + (var(--em) - var(--sm)) / 60) * var(--hour) - 3px); padding: .2rem .55rem; border: 2px solid var(--color-action-primary); border-radius: .6rem; background: var(--color-action-subtle); color: var(--color-action-primary); font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: var(--shadow-card); }
.move-confirm { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border-left: 5px solid var(--color-action-primary); border-radius: var(--radius-card); background: var(--color-bg-surface); box-shadow: var(--shadow-card); }
.move-confirm h2 { margin-top: 0; }
.move-confirm .wasnow { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin: 0 0 var(--space-2); }
.move-confirm .wasnow dt { color: var(--color-text-tertiary); }
.move-confirm .wasnow dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.move-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0 0; }
.picked { padding: var(--space-3) var(--space-4); border-radius: var(--radius-small); background: var(--color-action-subtle); }
.visit {
  position: absolute;
  left: 3px;
  right: 3px;
  top: calc((var(--sh) - var(--h0) + var(--sm) / 60) * var(--hour) + 2px);
  height: calc((var(--eh) - var(--sh) + (var(--em) - var(--sm)) / 60) * var(--hour) - 3px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .2rem .55rem;
  overflow: hidden;
  border-left: 4px solid var(--color-action-primary);
  border-radius: .6rem;
  background: var(--color-action-subtle);
  color: var(--color-text-primary);
  font-size: .8125rem;
  line-height: 1.25;
  text-decoration: none;
}
.visit b { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (hover: hover) { a.visit:hover { box-shadow: 0 0 0 2px var(--color-action-primary); } }
.visit--half { right: calc(50% + 1px); }
.visit--second { left: calc(50% + 1px); right: 3px; }
.visit--req { background: repeating-linear-gradient(135deg, var(--color-status-request-bg) 0 8px, var(--color-bg-surface) 8px 16px); border-left-color: var(--color-status-request-text); }
.visit--cancel { background: var(--color-status-neutral-bg); border-left-color: var(--color-border-control); color: var(--color-text-tertiary); }
.visit--cancel b { text-decoration: line-through; }
.visit--sms { background: var(--color-status-attention-bg); border-left-color: var(--color-status-attention-text); }
.visit--free { background: transparent; border: 2px dashed var(--color-border-control); color: var(--color-text-secondary); }
.visit .note { font-size: .75rem; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { align-self: flex-start; padding: .05rem .5rem; border-radius: 999px; background: var(--color-status-neutral-bg); color: var(--color-status-neutral-text); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tag--ok { background: var(--color-status-confirmed-bg); color: var(--color-status-confirmed-text); }
.tag--req { background: var(--color-status-request-bg); color: var(--color-status-request-text); }
.tag--bad { background: var(--color-status-cancelled-bg); color: var(--color-status-cancelled-text); }
.tag--wait { background: var(--color-status-attention-bg); color: var(--color-status-attention-text); }
.visit .tag { background-color: var(--color-bg-surface); }

/* Пункты очереди справа: те же, что в /staff/queue, без кнопок решений */
.qitem { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-left: 5px solid var(--color-action-primary); border-radius: var(--radius-small); background: var(--color-bg-surface); box-shadow: var(--shadow-card); font-size: .875rem; overflow-wrap: anywhere; }
.qitem p { margin: 0; }
.qitem .who { font-weight: 800; font-size: .9375rem; color: var(--color-text-primary); }
.qitem .meta { color: var(--color-text-tertiary); }
.qitem .wasnow { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin: 0; }
.qitem .wasnow dt { color: var(--color-text-tertiary); }
.qitem .wasnow dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.qitem--req { border-left-color: var(--color-status-request-text); }
.qitem--wait { border-left-color: var(--color-status-attention-text); }
.qitem--bad { border-left-color: var(--color-danger-solid); }
.qitem--free { border-left-style: dashed; border-left-color: var(--color-border-control); }

/* До 768 px очередь — во вкладках «Календарь / Запросы / Свободное время»: переключатели без скриптов */
@media (max-width: 48rem) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-tabs > input { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
  .tab-labels { display: flex; gap: 4px; margin: 0 0 var(--space-4); padding: 4px; border-radius: .875rem; background: var(--color-bg-subtle); }
  .tab-labels label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--size-control-min); margin: 0; padding: .3rem .5rem; border-radius: .7rem; color: var(--color-text-secondary); font-size: .875rem; font-weight: 700; text-align: center; cursor: pointer; }
  #tab-day:checked ~ .tab-labels [for=tab-day], #tab-queue:checked ~ .tab-labels [for=tab-queue], #tab-free:checked ~ .tab-labels [for=tab-free] { background: var(--color-bg-surface); color: var(--color-action-primary); box-shadow: var(--shadow-card); }
  #tab-day:focus-visible ~ .tab-labels [for=tab-day], #tab-queue:focus-visible ~ .tab-labels [for=tab-queue], #tab-free:focus-visible ~ .tab-labels [for=tab-free] { box-shadow: 0 0 0 2px var(--color-focus-gap), 0 0 0 4px var(--color-focus); }
  #tab-day:checked ~ .cal-layout .cal-side,
  #tab-queue:checked ~ .cal-layout .pane-day, #tab-queue:checked ~ .cal-layout .pane-free,
  #tab-free:checked ~ .cal-layout .pane-day, #tab-free:checked ~ .cal-layout .pane-queue { display: none; }
}

.from-0 { --h0: 0; } .from-1 { --h0: 1; } .from-2 { --h0: 2; } .from-3 { --h0: 3; } .from-4 { --h0: 4; } .from-5 { --h0: 5; } .from-6 { --h0: 6; } .from-7 { --h0: 7; }
.from-8 { --h0: 8; } .from-9 { --h0: 9; } .from-10 { --h0: 10; } .from-11 { --h0: 11; } .from-12 { --h0: 12; } .from-13 { --h0: 13; } .from-14 { --h0: 14; } .from-15 { --h0: 15; }
.from-16 { --h0: 16; } .from-17 { --h0: 17; } .from-18 { --h0: 18; } .from-19 { --h0: 19; } .from-20 { --h0: 20; } .from-21 { --h0: 21; } .from-22 { --h0: 22; } .from-23 { --h0: 23; }
.span-1 { --hours: 1; } .span-2 { --hours: 2; } .span-3 { --hours: 3; } .span-4 { --hours: 4; } .span-5 { --hours: 5; } .span-6 { --hours: 6; } .span-7 { --hours: 7; } .span-8 { --hours: 8; }
.span-9 { --hours: 9; } .span-10 { --hours: 10; } .span-11 { --hours: 11; } .span-12 { --hours: 12; } .span-13 { --hours: 13; } .span-14 { --hours: 14; } .span-15 { --hours: 15; } .span-16 { --hours: 16; }
.span-17 { --hours: 17; } .span-18 { --hours: 18; } .span-19 { --hours: 19; } .span-20 { --hours: 20; } .span-21 { --hours: 21; } .span-22 { --hours: 22; } .span-23 { --hours: 23; } .span-24 { --hours: 24; }
.sh-0 { --sh: 0; } .sh-1 { --sh: 1; } .sh-2 { --sh: 2; } .sh-3 { --sh: 3; } .sh-4 { --sh: 4; } .sh-5 { --sh: 5; } .sh-6 { --sh: 6; } .sh-7 { --sh: 7; }
.sh-8 { --sh: 8; } .sh-9 { --sh: 9; } .sh-10 { --sh: 10; } .sh-11 { --sh: 11; } .sh-12 { --sh: 12; } .sh-13 { --sh: 13; } .sh-14 { --sh: 14; } .sh-15 { --sh: 15; }
.sh-16 { --sh: 16; } .sh-17 { --sh: 17; } .sh-18 { --sh: 18; } .sh-19 { --sh: 19; } .sh-20 { --sh: 20; } .sh-21 { --sh: 21; } .sh-22 { --sh: 22; } .sh-23 { --sh: 23; }
.eh-0 { --eh: 0; } .eh-1 { --eh: 1; } .eh-2 { --eh: 2; } .eh-3 { --eh: 3; } .eh-4 { --eh: 4; } .eh-5 { --eh: 5; } .eh-6 { --eh: 6; } .eh-7 { --eh: 7; }
.eh-8 { --eh: 8; } .eh-9 { --eh: 9; } .eh-10 { --eh: 10; } .eh-11 { --eh: 11; } .eh-12 { --eh: 12; } .eh-13 { --eh: 13; } .eh-14 { --eh: 14; } .eh-15 { --eh: 15; }
.eh-16 { --eh: 16; } .eh-17 { --eh: 17; } .eh-18 { --eh: 18; } .eh-19 { --eh: 19; } .eh-20 { --eh: 20; } .eh-21 { --eh: 21; } .eh-22 { --eh: 22; } .eh-23 { --eh: 23; }
.eh-24 { --eh: 24; }
.sm-0 { --sm: 0; } .sm-5 { --sm: 5; } .sm-10 { --sm: 10; } .sm-15 { --sm: 15; } .sm-20 { --sm: 20; } .sm-25 { --sm: 25; }
.sm-30 { --sm: 30; } .sm-35 { --sm: 35; } .sm-40 { --sm: 40; } .sm-45 { --sm: 45; } .sm-50 { --sm: 50; } .sm-55 { --sm: 55; }
.em-0 { --em: 0; } .em-5 { --em: 5; } .em-10 { --em: 10; } .em-15 { --em: 15; } .em-20 { --em: 20; } .em-25 { --em: 25; }
.em-30 { --em: 30; } .em-35 { --em: 35; } .em-40 { --em: 40; } .em-45 { --em: 45; } .em-50 { --em: 50; } .em-55 { --em: 55; }

/* ---------- Стенд показа (B19) ---------- */
.demo-band {
  padding: .6rem max(1rem, env(safe-area-inset-left, 0px));
  background: var(--color-status-attention-bg);
  color: var(--color-status-attention-text);
  font-weight: 700;
  font-size: .9375rem;
  text-align: center;
}
.demo-phone { max-width: 32.5rem; }
/* Режим помощи МИТ (B37): над каждой страницей кабинета, пока оператор настраивает клинику. */
.help-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: .6rem 1rem;
  background: var(--color-status-attention-bg);
  color: var(--color-status-attention-text);
  font-weight: 700;
}
.help-band form { margin: 0; }
.demo-msg { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-2); border-radius: 1.125rem 1.125rem 1.125rem .4rem; background: var(--color-bg-soft); overflow-wrap: anywhere; }
.demo-msg p { margin: 0 0 var(--space-1); }

/* Документ согласия (B33): текст на странице пациента, в карточке пациента и на печати. */
.document { margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-bg-surface); box-shadow: var(--shadow-card); overflow-wrap: anywhere; }
.document p { margin: 0 0 var(--space-2); }
/* Подсказка взять подпись на бумажном листе (B40) — в карточке записи над «Отметить согласие». */
.notice { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--color-status-attention-bg); color: var(--color-status-attention-text); }
.notice p { margin: 0 0 var(--space-1); }
.notice p:last-child { margin: 0; }
@media print {
  .print .site-footer, .demo-band { display: none; }
  .print .document { box-shadow: none; padding: 0; }
  .print main { max-width: none; }
  /* Бумажный лист согласия (B40) — одна страница A4: мелкий кегль, узкие поля. */
  .sheet main { page: sheet; margin: 0; padding: 0; }
  .sheet .document { font-size: 10pt; line-height: 1.3; }
  .sheet .document p { margin: 0 0 4pt; }
  .sheet .document .sheet-sign { margin-top: 14pt; }
}
@page sheet { size: A4; margin: 12mm 15mm; }

/* ---------- Узкий экран ---------- */
@media (max-width: 52rem) {
  .cabinet { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .cabinet > .side { position: static; }
  .bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .bar button { width: auto; }
  nav.admin { flex-direction: row; flex-wrap: wrap; }
  nav.admin a { min-height: var(--size-control-min); background: var(--color-bg-surface); }
  table { display: block; overflow-x: auto; }
}
@media (max-width: 30rem) {
  .staff button, .staff .button { width: 100%; }
  .bar button, .days button, .days .button, form.inline button { width: auto; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- Справка (Р-96): статья со снимками и видео ---------- */
.help .site-header, .help main, .help .site-footer { max-width: 48rem; }
.help .brand small { display: block; font-weight: 500; font-size: .75rem; color: var(--color-text-tertiary); }
.help .brand a { color: inherit; text-decoration: none; }
@media (hover: hover) { .help .brand a:hover { color: var(--color-action-primary); } }
.help-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.help-toc a.card { color: inherit; text-decoration: none; }
.help-toc a.card h2 { color: var(--color-action-primary); margin: 0; }
.help-toc a.card p { margin: 0; }
.guide table { box-shadow: none; border: 1px solid var(--color-border-decorative); margin: 0; }
.guide { display: flex; flex-direction: column; gap: var(--space-6); }
.guide > p, .guide section > p { margin: 0; line-height: 1.55; }
.guide .eyebrow { align-self: flex-start; margin: 0; }
.guide h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; margin: 0; }
.guide h2 { font-size: 1.375rem; margin: 0 0 var(--space-3); }
.guide h3 { font-size: 1.125rem; font-weight: 800; margin: 0 0 var(--space-2); }
.guide .lead { font-size: 1.125rem; color: var(--color-text-secondary); }
.guide section { display: flex; flex-direction: column; gap: var(--space-3); }
.guide ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--space-2); line-height: 1.5; }
.guide .card.note { background: var(--color-status-attention-bg); box-shadow: none; }
.guide .card.note p { color: var(--color-status-attention-text); }
.guide-video { display: block; width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-bg-subtle); box-shadow: var(--shadow-card); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.steps > li { counter-increment: step; position: relative; padding-left: 3rem; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.15rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  font-weight: 800;
}
.steps p { margin: 0 0 var(--space-2); line-height: 1.55; }
.shot { margin: var(--space-3) 0 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-small); border: 1px solid var(--color-border-decorative); box-shadow: var(--shadow-card); }
.shot figcaption { margin-top: var(--space-2); font-size: .875rem; color: var(--color-text-tertiary); }
.problems { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.problems dt { font-weight: 700; margin-top: var(--space-3); }
.problems dd { margin: 0; color: var(--color-text-secondary); line-height: 1.5; }
@media (max-width: 40rem) {
  .steps > li { padding-left: 0; padding-top: 2.8rem; }
  .steps > li::before { top: 0; }
}

/* Подсказки демо (Р-120): поверх кабинета своей копии, на телефоне — во всю ширину. */
.demo-hints { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-decorative); border-radius: 12px; background: var(--color-status-attention-bg); color: var(--color-status-attention-text); }
.demo-hints ol { margin: var(--space-2) 0; padding-left: 1.4rem; }
.demo-hints li.done { opacity: .7; }
.demo-hints li.next { font-weight: 700; }
.demo-hints form button { width: auto; min-height: 2.25rem; padding: .25rem .8rem; }
.demo-band a { color: inherit; text-decoration: underline; }

/* ---------- Главная zpri.ru, шапка и подвал открытых страниц (#12; макет docs/дизайн/главная-2026-10) ----------
   Классы с приставкой lp-, чтобы не задеть компоненты кабинета и страницы клиента. Тёмная тема — как у
   страницы клиента (body.patient). Сценарий «Посмотрите, как это работает» переключается радиокнопками
   без скрипта; без стилей все состояния идут подряд. */
.landing { background: var(--color-bg-page); margin: 0; }
.landing main { max-width: none; padding: 0; }
.lp-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
/* Шапка */
.lp-top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--color-bg-page) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border-decorative); }
.lp-top .lp-wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.lp-logo { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: var(--color-text-primary); text-decoration: none; }
.lp-logo b { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--color-action-primary); color: var(--color-text-on-action); font-size: 1rem; }
.lp-menu { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; }
.lp-menu > a { color: var(--color-text-secondary); text-decoration: none; font-weight: 600; }
.lp-menu .lp-cta, .lp-cta { white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.15rem; border-radius: 999px; background: var(--color-action-primary); color: var(--color-text-on-action) !important; font-weight: 700; text-decoration: none; }
.lp-cta.lp-cta-alt { background: transparent; color: var(--color-action-primary) !important; border: 1.5px solid var(--color-border-control); }
/* меню телефона — <details> без скрипта */
.lp-more { display: none; position: relative; }
.lp-more summary { list-style: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; border: 1px solid var(--color-border-decorative); font-weight: 800; cursor: pointer; }
.lp-more summary::-webkit-details-marker { display: none; }
.lp-more-list { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 6; display: grid; min-width: 13rem; padding: .5rem; border-radius: 1rem; background: var(--color-bg-surface); border: 1px solid var(--color-border-decorative); box-shadow: var(--shadow-card); }
.lp-menu .lp-more-list a { text-decoration: none; display: flex; align-items: center; min-height: 2.75rem; padding: 0 .8rem; border-radius: .7rem; color: var(--color-text-primary); }
/* Первый экран */
.lp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; padding: 5rem 0 4rem; }
.lp-eyebrow { display: inline-block; font-weight: 700; color: var(--color-action-primary); margin: 0 0 1rem; letter-spacing: .02em; }
.lp-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 1.25rem; font-weight: 800; }
.lp-hero h1 em { font-style: normal; color: var(--color-action-primary); }
.lp-lead2 { font-size: 1.2rem; line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 2rem; max-width: 34rem; }
.lp-btns { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.lp-note { color: var(--color-text-tertiary); font-size: .9rem; margin-top: 1rem; }
/* Телефон клиента: рамка, строка состояния, экран. Размеры — в em, масштаб — font-size у .lp-dev */
.lp-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: 3.2rem; }
.lp-dev { font-size: 14px; width: 18em; flex: none; border-radius: 2.6em; padding: .55em; background: #0E1116; box-shadow: 0 1.5em 3em -1em rgba(15, 30, 55, .35), inset 0 0 0 1px #2A3140; }
.lp-scr { position: relative; height: 37em; border-radius: 2.1em; overflow: hidden; background: var(--color-bg-page); display: flex; flex-direction: column; color: var(--color-text-primary); }
.lp-sbar { display: flex; justify-content: space-between; align-items: center; padding: .7em 1.4em .3em; font-size: .8em; font-weight: 700; }
.lp-sbar::after { content: "▴ ◔ ▮"; letter-spacing: .25em; font-size: .85em; }
.lp-scr::before { content: ""; position: absolute; top: .55em; left: 50%; width: 5.5em; height: 1.45em; margin-left: -2.75em; border-radius: 1em; background: #0E1116; }
.landing .lp-scr p { font-size: 1em; margin: 0; line-height: 1.4; }
/* мессенджер */
.lp-chead { display: flex; align-items: center; gap: .65em; padding: .5em 1em .7em; border-bottom: 1px solid var(--color-border-decorative); background: var(--color-bg-surface); }
.lp-ava { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--color-action-primary); color: var(--color-text-on-action); font-weight: 800; flex: none; }
.lp-chead b { display: block; font-size: .95em; }
.lp-chead small { color: var(--color-text-tertiary); font-size: .78em; }
.lp-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .6em; padding: 1em .8em 1.2em; background: var(--color-bg-subtle); }
.lp-day { align-self: center; font-size: .72em; color: var(--color-text-tertiary); background: var(--color-bg-surface); padding: .2em .7em; border-radius: 1em; }
.lp-bub { max-width: 88%; background: var(--color-bg-surface); border-radius: 1.1em 1.1em 1.1em .3em; padding: .65em .8em .45em; font-size: .9em; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.lp-bub a, .lp-bub u { color: var(--color-action-primary); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.lp-bub .lp-t { display: block; text-align: right; font-size: .75em; color: var(--color-text-tertiary); margin-top: .2em; }
.lp-bub .lp-muted2 { color: var(--color-text-tertiary); }
.lp-tap { position: relative; }
.lp-typing { display: flex; align-items: center; gap: .5em; padding: .55em .8em; border-top: 1px solid var(--color-border-decorative); background: var(--color-bg-surface); color: var(--color-text-tertiary); font-size: .8em; }
.lp-typing span { flex: 1; padding: .45em .8em; border-radius: 1em; background: var(--color-bg-soft); }
/* страница клиента в браузере телефона — как /z/…: шапка организации, «Ваша запись», кнопки */
.lp-url { margin: .2em .8em .5em; padding: .4em .8em; border-radius: 1em; background: var(--color-bg-soft); font-size: .78em; color: var(--color-text-secondary); text-align: center; }
.lp-url::before { content: "🔒 "; font-size: .85em; }
.lp-pg { flex: 1; padding: .3em 1em 1em; display: flex; flex-direction: column; gap: .6em; }
.lp-pg .lp-org { display: flex; align-items: center; gap: .45em; font-weight: 800; font-size: .9em; }
.lp-pg .lp-org::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--color-action-primary); }
.lp-pg .lp-h { font-size: 1.35em; font-weight: 800; letter-spacing: -.02em; margin: .2em 0 0; }
.lp-tk { padding: .9em 1em; border-radius: 1.1em; background: var(--color-bg-surface); box-shadow: var(--shadow-card); display: grid; gap: .3em; }
.lp-tk .lp-w { font-size: 1.3em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lp-tk .lp-a { font-size: .82em; color: var(--color-text-tertiary); }
.lp-tk .lp-chip { justify-self: start; font-size: .75em; }
.lp-b { display: flex; align-items: center; justify-content: center; min-height: 2.6em; border-radius: .9em; font-weight: 700; font-size: .95em; background: var(--color-bg-surface); color: var(--color-action-primary); border: 1.5px solid var(--color-border-control); }
.lp-b.lp-p { background: var(--color-action-primary); color: var(--color-text-on-action); border-color: transparent; }
.lp-b.lp-on { outline: .2em solid color-mix(in srgb, var(--color-action-primary) 30%, transparent); }
.lp-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.lp-slots span { display: flex; justify-content: center; align-items: center; min-height: 2.3em; border-radius: .8em; border: 1.5px solid var(--color-border-control); font-weight: 700; font-size: .9em; color: var(--color-action-primary); background: var(--color-bg-surface); }
.lp-slots span.lp-on { background: var(--color-action-primary); color: var(--color-text-on-action); border-color: transparent; }
.lp-pg .lp-dt { font-weight: 800; font-size: .95em; margin-top: .3em; }
.lp-pg .lp-sm { font-size: .82em; color: var(--color-text-secondary); }
.lp-ok-note { padding: .7em .85em; border-radius: 1em; background: var(--color-status-confirmed-bg); color: var(--color-status-confirmed-text); font-weight: 700; font-size: .88em; }
/* первый экран: сообщение спереди, страница по ссылке — сзади справа; подпись-стрелка между ними */
.lp-stage .lp-dev:first-child { position: relative; z-index: 2; margin-top: 3rem; }
.lp-stage .lp-dev + .lp-dev { margin-left: -3.2rem; transform: rotate(3deg); }
.lp-hop { position: absolute; z-index: 3; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; background: var(--color-bg-surface); border: 1px solid var(--color-border-decorative); box-shadow: var(--shadow-card); border-radius: 999px; padding: .45rem .9rem; font-weight: 700; font-size: .9rem; }
.lp-hop b { color: var(--color-action-primary); }
/* путь клиента: четыре телефона в ряд, на телефоне — листаются пальцем */
.lp-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding: 0; margin: 0; list-style: none; counter-reset: p; }
.lp-path li { display: grid; gap: 1rem; justify-items: center; align-content: start; }
.lp-path .lp-dev, .lp-dev.lp-same { font-size: 12.5px; }
.lp-path .lp-scr, .lp-same .lp-scr { height: 34em; }
.lp-path .lp-cap2 { justify-self: stretch; }
.lp-path .lp-cap2 h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.lp-path .lp-cap2 h3::before { counter-increment: p; content: counter(p) " · "; color: var(--color-action-primary); }
.lp-path .lp-cap2 p { margin: 0; color: var(--color-text-secondary); line-height: 1.5; font-size: .98rem; }
.lp-sms-alt { margin-top: .6rem; display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 1rem; background: var(--color-bg-surface); border: 1px dashed var(--color-border-control); font-size: .88rem; line-height: 1.4; }
.lp-sms-alt b { flex: none; padding: .1rem .45rem; border-radius: .4rem; background: var(--color-bg-subtle); font-size: .78rem; }
.lp-chip { padding: .15rem .55rem; border-radius: 999px; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.lp-ok { background: var(--color-status-confirmed-bg); color: var(--color-status-confirmed-text); }
.lp-rq { background: var(--color-status-request-bg); color: var(--color-status-request-text); }
.lp-at { background: var(--color-status-attention-bg); color: var(--color-status-attention-text); }
/* Секции */
section.lp-s { padding: 4.5rem 0; }
section.lp-alt { background: var(--color-bg-soft); }
.lp-s h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.025em; line-height: 1.12; margin: 0 0 .9rem; font-weight: 800; max-width: 44rem; }
.lp-s .lp-sub { color: var(--color-text-secondary); font-size: 1.1rem; line-height: 1.55; max-width: 40rem; margin: 0 0 2.25rem; }
.lp-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.lp-big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--color-action-primary); margin: 0 0 .4rem; }
.lp-plain h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.lp-plain p { margin: 0; color: var(--color-text-secondary); line-height: 1.5; }
/* Схема связи — линия шагов */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.lp-steps li { list-style: none; position: relative; padding: 1.4rem 1.2rem 0 0; border-top: 3px solid var(--color-border-decorative); }
.lp-steps li.lp-hot { border-top-color: var(--color-action-primary); }
.lp-steps li::before { counter-increment: s; content: counter(s); position: absolute; top: -1rem; left: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-surface); border: 2px solid var(--color-action-primary); font-weight: 800; font-size: .85rem; }
.lp-steps .lp-who { color: var(--color-text-tertiary); font-weight: 700; font-size: .85rem; margin: 0 0 .3rem; }
/* Сценарий: действия клиента строкой; ниже две зоны — клиент (телефон) | граница | администратор (окно кабинета) */
.lp-tabs2 { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.25rem; }
.lp-tabs2 label { cursor: pointer; padding: .6rem 1.05rem; border-radius: 999px; font-weight: 700; background: var(--color-bg-surface); border: 1px solid var(--color-border-decorative); }
.lp-r { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lp-scen { position: relative; }
.lp-panes .lp-pane { display: none; }
#lp-s-come:checked ~ .lp-panes .lp-pane-come { display: grid; }
#lp-s-move:checked ~ .lp-panes .lp-pane-move { display: grid; }
#lp-s-cancel:checked ~ .lp-panes .lp-pane-cancel { display: grid; }
#lp-s-call:checked ~ .lp-panes .lp-pane-call { display: grid; }
#lp-s-silent:checked ~ .lp-panes .lp-pane-silent { display: grid; }
#lp-s-nomax:checked ~ .lp-panes .lp-pane-nomax { display: grid; }
#lp-s-come:checked ~ .lp-tabs2 label[for="lp-s-come"], #lp-s-move:checked ~ .lp-tabs2 label[for="lp-s-move"], #lp-s-cancel:checked ~ .lp-tabs2 label[for="lp-s-cancel"], #lp-s-call:checked ~ .lp-tabs2 label[for="lp-s-call"], #lp-s-silent:checked ~ .lp-tabs2 label[for="lp-s-silent"], #lp-s-nomax:checked ~ .lp-tabs2 label[for="lp-s-nomax"] { border-color: var(--color-action-primary); box-shadow: 0 0 0 2px var(--color-action-subtle); }
#lp-s-come:focus-visible ~ .lp-tabs2 label[for="lp-s-come"], #lp-s-move:focus-visible ~ .lp-tabs2 label[for="lp-s-move"], #lp-s-cancel:focus-visible ~ .lp-tabs2 label[for="lp-s-cancel"], #lp-s-call:focus-visible ~ .lp-tabs2 label[for="lp-s-call"], #lp-s-silent:focus-visible ~ .lp-tabs2 label[for="lp-s-silent"], #lp-s-nomax:focus-visible ~ .lp-tabs2 label[for="lp-s-nomax"] { box-shadow: 0 0 0 2px var(--color-focus-gap), 0 0 0 4px var(--color-focus); }
.lp-duo { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0 1.75rem; align-items: start; }
.lp-zone-c { display: grid; justify-items: center; }
.lp-side-cap { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-weight: 800; font-size: .95rem; }
.lp-side-cap::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.lp-side-cap.lp-c::before { background: var(--color-action-primary); }
.lp-side-cap.lp-a::before { background: var(--color-status-request-text); }
.lp-split { align-self: stretch; position: relative; border-left: 2px dashed var(--color-border-control); }
.lp-split span { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; background: var(--color-bg-surface); border: 1px solid var(--color-border-decorative); box-shadow: var(--shadow-card); border-radius: 999px; padding: .35rem .8rem; font-weight: 700; font-size: .85rem; }
.lp-split b { color: var(--color-action-primary); }
.lp-win { border-radius: 14px; overflow: hidden; background: var(--color-bg-surface); border: 1px solid var(--color-border-decorative); box-shadow: 0 1.5rem 3rem -1.25rem rgba(15, 30, 55, .3); }
.lp-win-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border-decorative); }
.lp-win-bar i { width: .7rem; height: .7rem; border-radius: 50%; background: #E5534B; }
.lp-win-bar i + i { background: #E8B33A; } .lp-win-bar i + i + i { background: #4CB05E; }
.lp-win-bar .lp-addr { flex: 1; margin-left: .8rem; padding: .2rem .8rem; border-radius: .5rem; background: var(--color-bg-surface); color: var(--color-text-secondary); font-size: .8rem; }
.lp-cab { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); font-size: .9rem; min-height: 27rem; }
.lp-cab-nav { display: grid; align-content: start; gap: .2rem; padding: 1rem .7rem; background: var(--color-bg-page); border-right: 1px solid var(--color-border-decorative); }
.lp-cab-nav > span { display: flex; justify-content: space-between; align-items: center; padding: .45rem .6rem; border-radius: .6rem; color: var(--color-text-secondary); font-weight: 600; }
.lp-cab-nav > span.lp-on { background: var(--color-bg-surface); color: var(--color-action-primary); box-shadow: var(--shadow-card); }
.lp-cab-nav em { font-style: normal; min-width: 1.35rem; padding: 0 .3rem; border-radius: 999px; text-align: center; font-size: .75rem; font-weight: 800; background: var(--color-action-primary); color: var(--color-text-on-action); }
.lp-cab-nav .lp-br { justify-content: flex-start; gap: .5rem; margin-bottom: .8rem; color: var(--color-text-primary); font-weight: 800; font-size: .85rem; line-height: 1.2; }
.lp-cab-nav .lp-br b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .5rem; background: var(--color-action-primary); color: var(--color-text-on-action); flex: none; }
.lp-cab-nav .lp-br small { display: block; font-weight: 600; color: var(--color-text-tertiary); font-size: .72rem; }
.lp-qm { display: grid; align-content: start; gap: .75rem; padding: 1rem 1.2rem 1.3rem; background: var(--color-bg-subtle); }
.lp-qh { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lp-qh > b { font-size: 1.15rem; }
.lp-filt { display: flex; gap: .2rem; }
.lp-filt span { padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--color-text-secondary); }
.lp-filt span.lp-on { background: var(--color-bg-surface); box-shadow: var(--shadow-card); color: var(--color-text-primary); }
.lp-qc { display: grid; gap: .45rem; justify-items: start; padding: .85rem 1rem; border-radius: 1rem; background: var(--color-bg-surface); border: 1px solid var(--color-border-decorative); box-shadow: var(--shadow-card); }
.lp-qc.lp-hot { border-color: var(--color-action-primary); box-shadow: 0 0 0 3px var(--color-action-subtle); }
.lp-qc.lp-dim { opacity: .6; }
.lp-qc .lp-m { color: var(--color-text-secondary); }
.lp-qc .lp-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; justify-self: stretch; }
.lp-qc .lp-ba > span { padding: .5rem .7rem; border-radius: .8rem; background: var(--color-bg-soft); }
.lp-qc .lp-ba small { display: block; color: var(--color-text-tertiary); font-size: .75rem; }
.lp-qc .lp-ba i { font-style: normal; font-weight: 800; color: var(--color-action-primary); }
.lp-qc .lp-btns { gap: .5rem; }
.lp-qc .lp-cta { min-height: 2.3rem; padding: 0 .95rem; font-size: .88rem; }
.lp-panel { border-radius: var(--radius-card); background: var(--color-bg-surface); border: 1px solid var(--color-border-decorative); padding: 1.25rem; box-shadow: var(--shadow-card); }
.lp-panel .lp-cap { color: var(--color-text-tertiary); font-weight: 700; font-size: .85rem; margin: 0 0 .7rem; }
/* Данные */
.lp-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2.5rem; }
.lp-facts p { margin: 0; line-height: 1.5; }
.lp-facts b { display: block; margin-bottom: .2rem; }
/* Цена */
.lp-price { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.lp-terms { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--color-border-decorative); grid-template-columns: repeat(4, 1fr); }
.lp-start { margin: 3rem 0 2rem; font-size: 1.3rem; }
.lp-free { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.04em; margin: 0; }
ul.lp-check { padding: 0; margin: 0; list-style: none; display: grid; gap: .6rem; }
ul.lp-check li::before { content: "✓ "; color: var(--color-status-confirmed-text); font-weight: 800; }
/* FAQ */
details.lp-q { border-top: 1px solid var(--color-border-decorative); padding: 1.1rem 0; }
details.lp-q summary { font-weight: 700; font-size: 1.08rem; cursor: pointer; }
details.lp-q p { color: var(--color-text-secondary); line-height: 1.55; margin: .7rem 0 0; max-width: 46rem; }
/* Финал и подвал */
.lp-final { text-align: center; padding: 5rem 0; }
.lp-final { text-align: left; }
.lp-final h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.025em; line-height: 1.12; margin: 0 0 .9rem; font-weight: 800; }
.lp-fin { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; }
.lp-fin .lp-sub { margin-bottom: 1.75rem; }
.lp-fin-v { position: relative; padding: 0 0 2.5rem 0; }
.lp-dband { padding: .4rem .8rem; background: var(--color-status-attention-bg); color: var(--color-status-attention-text); font-weight: 700; font-size: .78rem; text-align: center; }
.lp-fin .lp-cab { min-height: 0; grid-template-columns: 9.5rem minmax(0, 1fr); font-size: .85rem; }
.lp-fin .lp-qm { padding-bottom: 2.2rem; }
.lp-minib { display: inline-block; padding: .5rem .85rem; border-radius: 999px; background: var(--color-action-primary); color: var(--color-text-on-action); font-weight: 700; font-size: .8rem; line-height: 1.2; }
.lp-cal { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr); gap: .45rem; align-items: stretch; }
.lp-cal-h { font-size: .8rem; padding: 0 .2rem; }
.lp-cal .lp-tm { color: var(--color-text-tertiary); font-size: .75rem; font-weight: 700; padding-top: .35rem; }
.lp-ev { display: grid; gap: .3rem; justify-items: start; padding: .5rem .6rem; border-radius: .7rem; background: var(--color-bg-surface); border: 1px solid var(--color-border-decorative); border-left: 3px solid var(--color-action-primary); font-size: .78rem; }
.lp-ev .lp-chip { font-size: .7rem; white-space: normal; }
.lp-ev b { overflow-wrap: anywhere; }
.lp-ev.lp-hot { border-color: var(--color-action-primary); box-shadow: 0 0 0 2px var(--color-action-subtle); }
.lp-ev.lp-free { border: 1.5px dashed var(--color-border-control); background: transparent; color: var(--color-text-tertiary); place-items: center; }
.lp-ev.lp-gone { opacity: .55; border-left-color: var(--color-border-control); }
.lp-ev.lp-gone b { text-decoration: line-through; }
.lp-fin-ph { position: absolute; right: .5rem; bottom: 0; font-size: 8.5px; transform: rotate(4deg); z-index: 2; }
.lp-fin-ph .lp-scr { height: 30em; }
@media (min-width: 1240px) { .lp-fin-ph { right: -1.25rem; } }
.site .site-footer { max-width: none; padding: 0; }
.site .metrika-note { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 2rem; }
.lp-foot { border-top: 1px solid var(--color-border-decorative); padding: 3rem 0; color: var(--color-text-secondary); font-size: .92rem; }
.lp-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.lp-brand-sub { margin: .3rem 0 .9rem; color: var(--color-text-tertiary); }
.lp-cols a.lp-logo { display: flex; }
.lp-cols a { display: block; color: var(--color-text-secondary); margin: .35rem 0; text-decoration: none; }
@media (max-width: 1060px) {
  .lp-menu { gap: .9rem; }
  .lp-menu > a { white-space: nowrap; }
  .lp-menu .lp-long { display: none; }
  .lp-menu .lp-cta { text-transform: capitalize; }
  .lp-hero { gap: 2rem; }
  .lp-stage .lp-dev { font-size: 11.5px; }
  .lp-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .lp-fin { grid-template-columns: minmax(0, 1fr); }
  .lp-fin-v { max-width: 44rem; }
}
@media (max-width: 920px) {
  .lp-menu .lp-sec2 { display: none; }
}
@media (max-width: 760px) {
  .lp-menu > a:not(.lp-cta) { display: none; }
  .lp-menu { gap: .6rem; }
  .lp-menu .lp-long { display: none; }
  .lp-menu .lp-cta { text-transform: capitalize; }
  .lp-more { display: block; }
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem 0 3rem; }
  .lp-stage { min-height: 0; }
  .lp-stage .lp-dev { font-size: 9.5px; }
  .lp-stage { padding-top: 2.6rem; }
  .lp-stage .lp-dev:first-child { margin-top: 2rem; }
  .lp-stage .lp-dev + .lp-dev { margin-left: -2.5rem; }
  .lp-hop { font-size: .8rem; }
  /* путь клиента на телефоне — лента сверху вниз: подпись шага, под ней экран; без прокрутки вбок */
  .lp-path { grid-template-columns: 1fr; gap: 2.75rem; }
  .lp-path li { gap: .9rem; }
  .lp-path .lp-cap2 { order: -1; }
  .lp-three, .lp-steps, .lp-facts, .lp-price, .lp-cols { grid-template-columns: 1fr; }
  .lp-duo { grid-template-columns: minmax(0, 1fr); }
  .lp-split { border-left: 0; border-top: 2px dashed var(--color-border-control); height: 0; margin: 2.25rem 0 2.5rem; }
  .lp-split span { top: 0; }
  .lp-split b { display: inline-block; transform: rotate(90deg); }
  .lp-cab { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lp-cab-nav { display: none; }
  .lp-fin { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .lp-fin .lp-cab { grid-template-columns: minmax(0, 1fr); }
  .lp-fin-ph { right: -.5rem; font-size: 7.5px; }
  .lp-fin-v { padding-bottom: 3.5rem; }
  .lp-qm { padding: .9rem; }
  .lp-filt { display: none; }
  .lp-facts.lp-terms { grid-template-columns: 1fr 1fr; }
  .lp-steps { gap: 1.75rem; }
  section.lp-s { padding: 3rem 0; }
}

/* «Контакты и реквизиты» (#12) */
.lp-page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.03em; margin: var(--space-4) 0 var(--space-6); }
.lp-page h2 { margin: 0 0 var(--space-4); font-size: 1.2rem; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; align-items: start; }
.lp-contact a { display: block; margin: 0 0 .6rem; font-size: 1.3rem; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.lp-contact p { color: var(--color-text-secondary); margin: 0; }
.lp-req { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem 1.25rem; margin: 0; }
.lp-req dt { color: var(--color-text-tertiary); font-weight: 700; }
.lp-req dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .lp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .lp-req { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .lp-req dd { margin-bottom: .6rem; }
}