@font-face{font-family:'Jura';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jura-cyrillic-400.d736036724.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Jura';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jura-latin-400.b34f1dc726.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:'Jura';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jura-cyrillic-600.a94ba1f9f8.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Jura';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jura-latin-600.959455042a.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-cyrillic-400.7635422bd1.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400.08949f728d.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-cyrillic-500.1d89462e86.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500.01d2854474.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}
/* ═══════════════════════════════════════════════════════════════════════
   АЙДЕНТИКА · ТОКЕНЫ v8.0C · единый источник для сайта, кабинета и документов
   Правила: зелёный #00E676 — только заливка и текст на тёмном; на светлом —
   «сигнал-тёмный» #007A3D. Подписи — не светлее #6B6B70 на белом. Обводки
   полей ≥3:1. Кегль микрографики ≥12 px. Все значения проверены на WCAG AA.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── базовая палитра ── */
  --c-ink:#0B0B0C;        /* эмаль-чёрный */
  --c-graphite:#212124;
  --c-white:#FFFFFF;
  --c-gips:#F1EFEA;       /* подложки */
  --c-signal:#00E676;     /* сигнал — заливка, текст на тёмном */
  --c-signal-ink:#007A3D; /* сигнал-тёмный — текст и иконки на светлом (5,5:1) */
  --c-signal-soft:#DDF7E8;/* поле под сигнальным чипом на светлом */

  /* ── служебные серые ── */
  --c-sub:#5A5A60;        /* второй текст на светлом (6,9:1) */
  --c-caption:#6B6B70;    /* подписи, микрографика на светлом (5,3:1) */
  --c-border:#8A8884;     /* обводка полей и активных элементов (3,5:1) */
  --c-line:#C9C7C2;       /* декоративные линейки — не несут смысл */
  --c-line-soft:#E4E2DD;

  /* ── тёмная зона ── */
  --c-d-bg:#0B0B0C; --c-d-panel:#141416; --c-d-tx:#F1EFEA; --c-d-tx2:#CFCDC8;
  --c-d-caption:#A3A29D; --c-d-border:#6B6B70; --c-d-line:#2E2E32;

  /* ── статусы заказа: слово + форма + цвет ── */
  --st-new-bg:transparent; --st-new-bd:var(--c-border);
  --st-work-bg:var(--c-signal-soft); --st-work-bd:var(--c-signal-ink);
  --st-ready-bg:var(--c-signal); --st-ready-bd:var(--c-signal);
  --st-done-bg:var(--c-ink); --st-done-bd:var(--c-ink);
  --st-wait-bg:#FFF3D6; --st-wait-bd:#9A6B00;   /* «ждём вас»: нужен ответ врача */

  /* ── группы наряда (≥4,2:1 на белом, различимы между собой) ── */
  --g-opora:#007A3D; --g-promezh:#2F6FB3; --g-waxup:#9A6B00; --g-aox:#6E4DB8;
  --g-nav:#C2571A; --g-spl:#0E8A8A; --g-rmv:#B23A6E;
  --g-nav-temp:#E9DCB0;   /* временный протез на формуле (NAV) — приглушённый песочный, текст — чернила */

  /* ── шрифты ── */
  --f-head:'Jura','Segoe UI',system-ui,sans-serif;
  --f-body:'Jura','Segoe UI',system-ui,sans-serif;
  --f-data:'IBM Plex Mono','SFMono-Regular',Consolas,'Courier New',monospace;

  /* ── шкала: печать / экран ── */
  --fs-micro:12px;   /* микрографика, подписи полей, шапки таблиц — минимум */
  --fs-small:13px;
  --fs-body:16px;
  --fs-lead:18px;
  --fs-h3:20px;
  --fs-h2:clamp(22px,2.2vw,28px);
  --fs-h1:clamp(30px,3.6vw,48px);
  --fs-display:clamp(40px,6.4vw,84px);   /* логотип на «Кто?» */
  --lh-body:1.6; --lh-tight:1.2;
  --track-caps:.18em; --track-head:.22em; --track-data:.04em;

  /* ── сетка и отступы ── */
  --max-w:1260px;
  --gutter:clamp(16px,4vw,48px);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --r-pill:999px; --r-card:12px; --r-field:10px; --r-chip:6px;
  --tap:44px;                                 /* минимальная тач-цель */
  --focus:0 0 0 2px var(--c-white),0 0 0 4px var(--c-signal-ink);
  --dur:160ms;
}
/* Зона: тёмная (публичная) / светлая (кабинет и регламент) */
[data-theme="dark"]{
  --bg:var(--c-d-bg); --panel:var(--c-d-panel); --tx:var(--c-d-tx); --tx2:var(--c-d-tx2);
  --caption:var(--c-d-caption); --border:var(--c-d-border); --line:var(--c-d-line);
  --accent:var(--c-signal); --accent-tx:var(--c-signal); --on-accent:var(--c-ink);
  --field-bg:#141416; --focus:0 0 0 2px var(--c-d-bg),0 0 0 4px var(--c-signal);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:var(--c-white); --panel:var(--c-gips); --tx:var(--c-ink); --tx2:var(--c-sub);
  --caption:var(--c-caption); --border:var(--c-border); --line:var(--c-line);
  --accent:var(--c-signal); --accent-tx:var(--c-signal-ink); --on-accent:var(--c-ink);
  --field-bg:var(--c-white);
  color-scheme:light;
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

/* ═══ БАЗА · сброс, типографика, сетка, компоненты ═══ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--tx);font:400 var(--fs-body)/var(--lh-body) var(--f-body);min-height:100dvh;display:flex;flex-direction:column}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration-color:var(--border);text-underline-offset:.2em}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-chip)}
[tabindex="-1"]:focus{box-shadow:none;outline:none}
.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--c-signal);color:var(--c-ink);padding:10px 16px;border-radius:var(--r-pill);z-index:100;font-family:var(--f-data);font-size:var(--fs-small)}
.skip:focus{top:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ── типографика ── */
.micro{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--caption);line-height:1.5}
.data{font-family:var(--f-data);letter-spacing:var(--track-data);font-variant-numeric:tabular-nums}
.h1,.h2,.h3{font-family:var(--f-head);font-weight:600;line-height:var(--lh-tight);margin:0}
.h1{font-size:min(var(--fs-h1),7.4vw);letter-spacing:var(--track-head);text-transform:uppercase}   /* на узких телефонах слово «ФУНКЦИОНАЛЬНЫЕ» не шире экрана */
.h2{font-size:var(--fs-h2);letter-spacing:.16em;text-transform:uppercase}
.h3{font-size:var(--fs-h3);letter-spacing:.04em}
.lead{font-size:var(--fs-lead);max-width:60ch}
p{margin:0 0 var(--sp-3)}
.sub{color:var(--tx2)}
.accent{color:var(--accent-tx)}
.maxw{max-width:64ch}
/* Слово «АЙДЕНТИКА»: в DOM всегда полное имя; штрих над Й рисуется стилем, бревис скрыт */
.wm{font-family:var(--f-head);font-weight:500;text-transform:uppercase;letter-spacing:.30em;line-height:1;white-space:nowrap}
.wm .y{position:relative;display:inline-block}
.wm .y::before{content:'И' / '';position:absolute;inset:0;background:var(--bg);color:inherit} /* закрывает бревис буквы Й; альтернативный текст пуст — для скринридера остаётся «АЙДЕНТИКА» */
.wm .y::after{content:'';position:absolute;left:.083em;bottom:1.2em;width:.052em;height:.96em;background:currentColor} /* штрих по брендбуку v7.2 («основная версия»): над левой стойкой И, толщиной стойки, высота ≈1,47 капители, зазор до буквы ≈0,64 капители */
.wm.on-panel .y::before{background:var(--panel)}

/* ── каркас ── */
.wrap{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
@media (max-width:1024px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid4,.grid3,.grid2{grid-template-columns:1fr}}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.stack>*+*{margin-top:var(--sp-4)}
.rule{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}
main{flex:1}
section+section{margin-top:var(--sp-7)}

/* ── капсулы навигации и фильтров ── */
.cap{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 20px;border:1px solid var(--border);border-radius:var(--r-pill);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--tx);background:transparent;text-decoration:none;transition:background var(--dur),border-color var(--dur),color var(--dur);white-space:nowrap}
.cap:hover{border-color:var(--tx)}
.cap svg{flex:none}   /* иконка в капсуле не сжимается флексом */
.cap[aria-current="page"],.cap.active,.cap[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
.cap.small{min-height:36px;padding:0 14px}
.cap.ink{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-gips)}
[data-theme="dark"] .cap.ink{background:var(--c-gips);border-color:var(--c-gips);color:var(--c-ink)}
.cap.outline-accent{border-color:var(--accent-tx)}
.cap:disabled{opacity:.4;cursor:not-allowed}

/* ── кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 28px;border-radius:var(--r-pill);font-family:var(--f-data);font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;border:1px solid transparent;transition:background var(--dur),color var(--dur),border-color var(--dur);text-decoration:none}
.btn-primary{background:var(--tx);color:var(--bg)}
.btn-primary:hover{background:var(--tx2)}
[data-theme="dark"] .btn-primary:hover{background:var(--c-white)}
.btn-accent{background:var(--c-signal);color:var(--c-ink);font-weight:500}
.btn-accent:hover{background:#19F084}
.btn-ghost{border-color:var(--border);color:var(--tx)}
.btn-ghost:hover{border-color:var(--tx)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--line);color:var(--caption);border-color:transparent;cursor:not-allowed}
[data-theme="dark"] .btn:disabled{background:var(--c-d-line);color:var(--c-d-caption)}
.btn-wide{width:100%}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:var(--r-pill);border:1px solid var(--border)}
.iconbtn:hover{border-color:var(--tx)}

/* ── поля форм: подпись над полем, всегда видна ── */
.field{display:block}
.field>span,.label{display:block;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--caption);margin-bottom:6px}
.field .req{color:var(--accent-tx)}
.input,select.input,textarea.input{width:100%;min-height:var(--tap);padding:10px 14px;background:var(--field-bg);color:var(--tx);border:1px solid var(--border);border-radius:var(--r-field);font-size:var(--fs-body)}
select,input[type=date],input[type=time]{color-scheme:light}   /* выпадающие списки и календарь — всегда светлые, в обеих зонах (решение 11.09: никаких «чёрных окон»); закрытое поле красится нашими стилями */
.input::placeholder{color:var(--caption)}
.input:focus-visible{box-shadow:var(--focus);border-color:var(--accent-tx)}
textarea.input{min-height:88px;resize:vertical}
.input[aria-invalid="true"]{border-color:var(--tx);border-width:2px}
.hint{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--caption);margin-top:6px;line-height:1.5}
.error{font-size:var(--fs-small);color:var(--tx);margin-top:6px;padding-left:18px;position:relative}
.error::before{content:'///';position:absolute;left:0;top:0;color:var(--accent-tx);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:-.1em}
.check{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-small);line-height:1.5;cursor:pointer;min-height:var(--tap)}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--c-signal-ink);flex:none}
[data-theme="dark"] .check input{accent-color:var(--c-signal)}
.switch{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--tx)}
.switch .track{width:42px;height:24px;border-radius:12px;background:var(--border);position:relative;transition:background var(--dur);flex:none}
.switch .track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--bg);transition:left var(--dur)}
.switch[aria-checked="true"] .track{background:var(--c-signal-ink)}
[data-theme="dark"] .switch[aria-checked="true"] .track{background:var(--c-signal)}
.switch[aria-checked="true"] .track::after{left:21px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;gap:3px;flex-wrap:wrap}
.seg button{min-height:38px;padding:0 16px;border-radius:var(--r-pill);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--tx)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:500}

/* ── чипы статуса ── */
.st{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--st-new-bd);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--c-ink);background:var(--c-white)}
.st::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.st.new{border-style:dashed;color:var(--c-sub)}
.st.work{background:var(--st-work-bg);border-color:var(--st-work-bd);color:var(--c-ink)}
.st.work::before{background:var(--c-signal-ink)}
.st.ready{background:var(--st-ready-bg);border-color:var(--st-ready-bd)}
.st.done{background:var(--st-done-bg);border-color:var(--st-done-bd);color:var(--c-gips)}
.st.wait{background:var(--st-wait-bg);border-color:var(--st-wait-bd)}
.st.wait::before{background:var(--st-wait-bd)}

/* ── карточки, таблицы, аккордеон ── */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-4)}
[data-theme="dark"] .card{background:var(--panel);border-color:var(--line)}
.card.clickable{cursor:pointer;transition:border-color var(--dur)}
.card.clickable:hover{border-color:var(--tx)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--caption);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--tx)}
.tbl td{padding:14px 12px;border-bottom:1px solid var(--line);font-family:var(--f-data);font-size:var(--fs-small);letter-spacing:var(--track-data);vertical-align:middle}
.tbl tr.rowlink{cursor:pointer}
.tbl tr.rowlink:hover td,.tbl tr.rowlink:focus-within td{background:var(--panel)}
.acc{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:var(--sp-3);overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 var(--sp-4);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:'+';font-size:20px;color:var(--accent-tx);font-family:var(--f-data)}
.acc[open]>summary::after{content:'–'}
.acc .body{padding:0 var(--sp-4) var(--sp-4);border-top:1px solid var(--line)}
.acc .body>:first-child{margin-top:var(--sp-4)}

/* ── модальное окно и уведомления ── */
dialog.modal{border:2px solid var(--tx);border-radius:var(--r-card);padding:0;background:var(--bg);color:var(--tx);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
dialog.modal::backdrop{background:rgba(11,11,12,.45)}
dialog.modal .mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:var(--sp-4) var(--sp-4) 0}
dialog.modal .mbody{padding:var(--sp-4);overflow:auto;max-height:calc(100dvh - 200px)}
dialog.modal .mfoot{display:flex;gap:10px;justify-content:flex-end;padding:0 var(--sp-4) var(--sp-4);flex-wrap:wrap}
dialog.modal .mfoot .left{margin-right:auto}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:var(--c-ink);color:var(--c-gips);border:1px solid var(--c-signal);font-family:var(--f-data);font-size:var(--fs-small);letter-spacing:.04em;padding:12px 20px;border-radius:var(--r-card);opacity:0;transition:opacity var(--dur),transform var(--dur);z-index:90;max-width:min(92vw,560px);pointer-events:none;line-height:1.45}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* тост — popover в верхнем слое: виден и поверх модальных окон <dialog> (ревью S-03 / WCAG 4.1.3) */
.toast[popover]{top:auto;right:auto;margin:0;overflow:visible;width:auto;height:auto}

/* ── подвал: IDNT/ и штамп ── */
.sitefoot{border-top:1px solid var(--line);margin-top:var(--sp-8);padding:var(--sp-5) 0 calc(var(--sp-5) + env(safe-area-inset-bottom))}
.sitefoot .in{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);flex-wrap:wrap}
.idnt{font-family:var(--f-head);font-weight:600;letter-spacing:.2em;font-size:var(--fs-lead);text-decoration:none}
.idnt b{color:var(--accent-tx);font-weight:400}
.footlinks{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.footlinks a{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.stamp-link{display:inline-block;line-height:0;color:var(--tx);border-radius:10px;text-decoration:none}   /* штамп — ссылка на «Кто?» с любой страницы */
.stamp-link:hover{color:var(--tx2)}
.stamp{width:180px;color:inherit}
.stamp .grn{fill:var(--accent-tx)}
.stamp .mut{fill:var(--caption)}
@media (max-width:640px){.stamp{width:150px}}

/* ── страницы-вкладки ── */
.page{display:none}
.page.on{display:block}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin:var(--sp-5) 0}
.back{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.back:hover{color:var(--tx)}
.empty{border:1px dashed var(--border);border-radius:var(--r-card);padding:var(--sp-5);color:var(--tx2);font-size:var(--fs-small);line-height:1.6}
.empty b{display:block;color:var(--tx);font-family:var(--f-data);font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.pager{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-data);font-size:var(--fs-small)}

/* ── «Как?»: хаб из плиток и страницы плиток (#/kak/<плитка>) — общий фрагмент partials/kak.html ── */
.kak .desc{margin:var(--sp-3) 0 var(--sp-5)}
.kak-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-5)}
@media (max-width:1000px){.kak-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.kak-cards{grid-template-columns:1fr}}
.kcard{display:flex;flex-direction:column;gap:10px;min-height:172px;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);color:var(--tx);text-decoration:none;transition:border-color var(--dur)}
.kcard:hover{border-color:var(--tx)}
.kcard .num{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--accent-tx)}
.kcard .ttl{font-family:var(--f-head);font-weight:600;font-size:var(--fs-h3);letter-spacing:.06em;text-transform:uppercase;line-height:1.25}
.kcard .hint{margin:0;font-family:var(--f-body);font-size:var(--fs-small);letter-spacing:0;color:var(--tx2)}
.kcard .meta{margin-top:auto;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--caption)}
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.crumbs a{color:var(--tx2);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--tx)}
.kak-one{max-width:76ch}
.kak-view .lead{max-width:60ch}
.kak-one .lead{margin-bottom:var(--sp-5)}
.kak-regl{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:var(--sp-6);align-items:start;margin-top:var(--sp-5)}
@media (max-width:900px){.kak-regl{grid-template-columns:1fr}}
.kak-regl.one{grid-template-columns:minmax(0,1fr);max-width:76ch}   /* раздел без рисунков — одна колонка */
.kak-regl .seg{margin-bottom:var(--sp-4)}
@media (max-width:700px){   /* телефон: переключатель во всю ширину, две половины в один ряд; слово «протокол» — только для читалки */
  .kak-regl .seg{display:flex}
  .kak-regl .seg button{flex:1 1 0;padding:0 10px;letter-spacing:.06em;white-space:nowrap}
  .kak-regl .seg .full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.chk{list-style:none;padding:0;margin:0;counter-reset:n}
.chk li{position:relative;padding:14px 0 14px 40px;border-top:1px solid var(--line);font-size:var(--fs-small);line-height:1.5;counter-increment:n}
.chk li:last-child{border-bottom:1px solid var(--line)}
.chk li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:15px;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em;color:var(--accent-tx);font-weight:500}
.chk b{font-weight:600}
.fig-link{display:inline-block;margin-left:6px;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--accent-tx);text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap}
.fig-link:hover{color:var(--tx)}
.inline-link{color:var(--accent-tx);text-decoration:none;border-bottom:1px solid currentColor}   /* ссылка на другой раздел внутри текста */
.inline-link:hover{color:var(--tx)}
.regl-note{margin-top:var(--sp-4);padding:12px 14px;border-left:3px solid var(--accent-tx);background:var(--panel);border-radius:0 10px 10px 0;font-size:var(--fs-small);line-height:1.5;color:var(--tx)}
.next{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.figs{position:sticky;top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.figs .fig{display:none}.figs .fig.on{display:block}
.fig{margin:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--bg)}
.fig .zoom{display:block;position:relative;width:100%;padding:66.667% 0 0;border:0;background:var(--panel);cursor:zoom-in;overflow:hidden}   /* кадр 3:2 задаёт кнопка (отступ сверху от ширины): Safari давал картинке с aspect-ratio натуральную высоту */
.fig img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fig.tall img{object-fit:contain;background:var(--c-white)}
.fig.fit img{object-fit:contain;background:var(--panel)}   /* кадр не 3:2 — показываем целиком */
.fig.ok .w::before{content:'/// так надо · ';color:var(--accent-tx)}
.fig figcaption{padding:10px 14px 12px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.fig .id{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--accent-tx);font-weight:500}
.fig .t{font-size:var(--fs-small);font-weight:600}
.fig .w{grid-column:2;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.02em;color:var(--caption);line-height:1.45}
.fig.err{border-color:var(--st-wait-bd)}
.fig.err .id,.fig.err .w::before{color:var(--st-wait-bd)}
.fig.err .w::before{content:'/// так нельзя · '}
[data-theme="dark"] .fig.err{border-color:#E0B45A}
[data-theme="dark"] .fig.err .id,[data-theme="dark"] .fig.err .w::before{color:#E0B45A}
.strip{display:flex;gap:6px;flex-wrap:wrap}
.strip .cap{min-width:52px;padding:0 10px}
@media (max-width:900px){.figs{position:static}.figs .fig{display:block}.strip{display:none}}
dialog.lb{border:0;background:transparent;padding:0;max-width:min(1200px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
dialog.lb::backdrop{background:rgba(11,11,12,.88)}
dialog.lb img{display:block;width:100%;max-height:calc(100dvh - 120px);object-fit:contain;border-radius:var(--r-card);background:var(--c-white)}
dialog.lb p{color:var(--c-gips);font-family:var(--f-data);font-size:var(--fs-small);margin:10px 0 0;text-align:center}
dialog.lb .lb-close{position:absolute;top:10px;right:10px;background:var(--c-ink);border-color:var(--c-gips);color:var(--c-gips)}
.timeline{list-style:none;padding:0;margin:var(--sp-4) 0 var(--sp-5);display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media (max-width:760px){.kak-view .timeline{grid-template-columns:1fr 1fr}}   /* .kak-view — чтобы правило не перебивал .timeline статуса заказа из kabinet.css (в кабинете на телефоне оставалось 4 колонки) */
.timeline li{border-top:3px solid var(--line);padding-top:10px;font-size:var(--fs-small);line-height:1.45}
.timeline li b{display:block;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-tx);margin-bottom:6px}
.timeline li.warn{border-color:var(--st-wait-bd)}
[data-theme="dark"] .timeline li.warn{border-color:#E0B45A}
.kak-view .cols{margin-top:var(--sp-4);max-width:96ch}

/* ── карточка продукта (обе зоны): цена и срок изготовления (partials/srok.js) ── */
.pricebig{font-family:var(--f-data);font-size:28px;font-weight:500}
.srok{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.srok-main{margin:6px 0 0;font-family:var(--f-data);font-size:var(--fs-lead);font-weight:500;letter-spacing:var(--track-data)}
.srok .srok-cap{margin-top:10px}
.srok-tbl{border-collapse:collapse;margin-top:8px;font-family:var(--f-data);font-size:var(--fs-small);letter-spacing:var(--track-data);font-variant-numeric:tabular-nums}
.srok-tbl th{text-align:left;font-weight:400;font-size:var(--fs-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--caption);padding:4px 24px 4px 0;border-bottom:1px solid var(--line)}
.srok-tbl td{padding:5px 24px 5px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.srok-tbl th:last-child,.srok-tbl td:last-child{padding-right:0}
.srok .hint{margin-top:8px;max-width:60ch}

/* ── «Как?» · полоса разделов, запись наряда (сцена + главы), кнопки между разделами — прототип D «гибрид», решение 13.10 ── */
:root{
  --spring-smooth:linear(0,0.0037,0.0142,0.031,0.0534,0.0804,0.1108,0.1438,0.1784,0.2135,0.2484,0.3145,0.3746,0.4283,0.4755,0.5562,0.6215,0.6726,0.7112,0.7735,0.8196,0.854,0.8793,0.9185,0.9458,0.9647,0.9779,0.9921,1);
  --spring-snappy:linear(0,0.012,0.049,0.107,0.185,0.278,0.383,0.493,0.601,0.702,0.791,0.865,0.924,0.967,0.995,1.013,1.019,1.016,1.009,1.003,1);
  --ease-smooth:cubic-bezier(.22,.8,.32,1);--dur-smooth:500ms;
  --ease-snappy:cubic-bezier(.34,1.3,.64,1);--dur-snappy:280ms;
}
@supports (transition-timing-function:linear(0,1)){:root{--ease-smooth:var(--spring-smooth);--ease-snappy:var(--spring-snappy)}}
@media (prefers-reduced-motion:reduce){:root{--dur-smooth:0ms;--dur-snappy:0ms}}
/* сцена записи — как на сайте, плюс мягкая тень и пружины */
.demo-screen{position:relative;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--panel);box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.demo-vp{position:relative;overflow:hidden;height:420px;background:var(--c-white)}
.demo-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.demo-cur{position:absolute;left:0;top:0;width:36px;height:50px;overflow:visible;transform-origin:0 0;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(11,11,12,.45));z-index:3;opacity:0}
.demo-ring{position:absolute;left:0;top:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:3px solid var(--c-signal);opacity:0;pointer-events:none;z-index:2}
.demo-ring.go{animation:demoRing 620ms ease-out}
@keyframes demoRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.25);opacity:0}}
/* подпись к шагу: смена — короткий подъём с затуханием */
.cap-line{min-height:3.2em;margin:var(--sp-3) 0 0;padding-left:14px;border-left:3px solid var(--accent-tx);font-size:var(--fs-small);line-height:1.5;color:var(--tx)}
.cap-line b{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-tx);display:block;margin-bottom:2px;font-weight:500}
.cap-line span{display:block;transition:opacity 220ms var(--ease-smooth),transform var(--dur-smooth) var(--ease-smooth)}
.cap-line.swap span{opacity:0;transform:translateY(6px);transition:none}
/* капсула «Как?» — крупная, заметная */
.kak-home{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 18px 0 12px;border:1px solid var(--border);border-radius:var(--r-pill);font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx);text-decoration:none;transition:transform var(--dur-snappy) var(--ease-snappy),border-color var(--dur)}
.kak-home:hover{border-color:var(--tx)}.kak-home:active{transform:scale(.96)}
.kak-home svg{width:18px;height:18px;flex:none}
.kak-home.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* нажатие на любой капсуле/кнопке — отклик */
.cap,.btn{transition:transform var(--dur-snappy) var(--ease-snappy),border-color var(--dur),background var(--dur),color var(--dur)}
.cap:active,.btn:active{transform:scale(.96)}
/* капсула «Как?» — крупная, заметная */
.kak-home{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 18px 0 12px;border:1px solid var(--border);border-radius:var(--r-pill);font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx);text-decoration:none;transition:transform var(--dur-snappy) var(--ease-snappy),border-color var(--dur)}
.kak-home:hover{border-color:var(--tx)}.kak-home:active{transform:scale(.96)}
.kak-home svg{width:18px;height:18px;flex:none}
.kak-home.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* нажатие на любой капсуле/кнопке — отклик */
.cap,.btn{transition:transform var(--dur-snappy) var(--ease-snappy),border-color var(--dur),background var(--dur),color var(--dur)}
.cap:active,.btn:active{transform:scale(.96)}
.demo-cur .c-touch{display:none}   /* десктоп — стрелка; телефон — кружок касания (центр = точка нажатия) */
@media (max-width:700px){.demo-cur .c-arrow{display:none}.demo-cur .c-touch{display:block}.demo-cur{width:32px;height:44px}.demo-ring{width:48px;height:48px;margin:-24px 0 0 -24px}}
.kak-bar{position:sticky;top:0;z-index:30;margin:0 calc(-1*var(--gutter)) var(--sp-5);padding:0 var(--gutter);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.kak-bar .in{display:flex;align-items:center;gap:var(--sp-4);min-height:64px}
.kak-secs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0}   /* без затухания справа: крайняя капсула «07 Навигация» видна целиком */
.kak-secs::-webkit-scrollbar{display:none}
.kak-secs .cap{flex:none;min-height:36px;padding:0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--f-data);text-decoration:none;color:var(--tx2)}
.kak-secs .cap b{font-weight:500;color:var(--accent-tx);margin-right:7px}
@media (max-width:1100px){.kak-secs .cap{padding:0 9px}.kak-secs .cap b{margin-right:5px}}   /* кегль не меньше 12 px (S-07) */
@media (max-width:700px){   /* телефон: полоса в две строки — «‹ Как?» и семь номеров разделов, все видны */
  .kak-bar .in{flex-wrap:wrap;row-gap:6px;padding-top:6px;padding-bottom:8px;min-height:0}
  .kak-secs{flex:1 1 100%;gap:5px}
  .kak-secs .cap{position:relative;flex:1 1 0;min-width:0;padding:0 4px;min-height:40px}
  .kak-secs .cap span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* имя остаётся для читалок, на экране — номер */
  .kak-secs .cap b{margin-right:0}
}
.kak-secs .cap[aria-current="page"],.kak-secs .cap[aria-current="page"] b{color:var(--on-accent)}

/* история: сцена во всю ширину колонки (на десктопе — до 920px по центру) */
.stories{max-width:920px;margin:0 auto;touch-action:manipulation}   /* без задержки и двойного тапа-зума на кнопках */
.demo-screen{user-select:none;-webkit-user-select:none}
/* сегменты шагов главы — тёмная полоска над экраном записи, как строка состояния телефона */
.segs{display:flex;gap:4px;padding:9px 10px;background:var(--panel);pointer-events:none}
.segs i{flex:1;height:3px;border-radius:2px;background:rgba(241,239,234,.25);overflow:hidden}
.segs i b{display:block;height:100%;width:0;background:var(--c-signal);border-radius:2px}
/* зоны касания: слева — назад, справа — дальше; вертикальный свайп отдаём странице */
.zones{position:absolute;left:0;right:0;top:21px;bottom:0;z-index:5;display:flex;touch-action:pan-y;cursor:pointer;-webkit-touch-callout:none}
.zones .l{width:35%}.zones .r{flex:1}
.zones .l:active,.zones .r:active{background:rgba(0,230,118,.05)}
/* подсказка жестов — до первого касания */
.st-cue{position:absolute;left:50%;bottom:16px;z-index:6;display:flex;align-items:center;gap:14px;max-width:calc(100% - 24px);padding:10px 16px;border-radius:999px;background:rgba(11,11,12,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(241,239,234,.22);color:var(--c-gips);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.06em;white-space:nowrap;transform:translate(-50%,0);transition:opacity var(--dur-smooth) var(--ease-smooth),transform var(--dur-smooth) var(--ease-smooth);pointer-events:none}
.st-cue.off{opacity:0;transform:translate(-50%,12px)}
.st-cue em{font-style:normal;color:var(--c-signal)}
.st-cue span{color:rgba(241,239,234,.7)}
.st-cue>span{display:flex;align-items:center;gap:14px}
.st-cue>.d{display:none}
html.desk .st-cue>.d{display:flex}html.desk .st-cue>.m{display:none}
.hint-wheel{display:none;margin-left:14px;color:var(--caption);letter-spacing:.08em}
html.desk .hint-wheel{display:inline}
/* кнопки под сценой */
.st-foot{display:flex;align-items:center;gap:8px;margin-top:var(--sp-3)}
.st-foot .arrow{min-width:36px;padding:0;font-size:20px;line-height:1;font-family:var(--f-head)}
.st-foot .arrow:disabled{opacity:.3;cursor:default}
.st-foot #stepCount{margin-left:auto;letter-spacing:.08em}
#playBtn{min-width:124px}
/* главы — ряд капсул, прокручивается, текущая подсвечена */
.chrow{display:flex;gap:6px;margin-top:var(--sp-4);padding:4px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
@media (min-width:901px){.chrow{flex-wrap:wrap;overflow:visible}}   /* компьютер: все девять глав видны, в две строки */
.chrow::-webkit-scrollbar{display:none}
.chrow a{flex:none;scroll-snap-align:center;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-pill);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);text-decoration:none;transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur-snappy) var(--ease-snappy)}
.chrow a b{font-weight:500;color:var(--accent-tx)}
.chrow a.done{color:var(--caption)}
.chrow a:active{transform:scale(.96)}
.chrow a[aria-current="step"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chrow a[aria-current="step"] b{color:var(--on-accent)}
/* текст главы — под рядом глав, сменяется подъёмом */
.cht{margin-top:var(--sp-4);min-height:120px}
.cht .s{transition:opacity 220ms var(--ease-smooth),transform var(--dur-smooth) var(--ease-smooth)}
.cht.swap .s{opacity:0;transform:translateY(8px);transition:none}
.cht .num{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--accent-tx)}
.cht h2{font-family:var(--f-head);font-weight:600;font-size:clamp(20px,2.2vw,28px);letter-spacing:.1em;text-transform:uppercase;line-height:1.2;margin:8px 0 8px}
.cht .d{font-family:var(--f-data);font-size:var(--fs-small);letter-spacing:.02em;color:var(--caption);margin:0 0 12px}
.cht p.t{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--tx);max-width:64ch}
/* кнопки между разделами */
.secnav{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.secnav a{display:flex;flex-direction:column;gap:8px;min-height:88px;padding:14px 18px;border:1px solid var(--border);border-radius:var(--r-card);text-decoration:none;color:var(--tx);transition:border-color var(--dur),transform var(--dur-snappy) var(--ease-snappy)}
.secnav a:hover{border-color:var(--tx)}
.secnav a:active{transform:scale(.98)}
.secnav .s-next{text-align:right;align-items:flex-end}
.secnav .k{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--caption)}
.secnav .t{font-family:var(--f-head);font-weight:600;font-size:clamp(16px,1.6vw,20px);letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.secnav .t b{display:block;font-family:var(--f-data);font-weight:500;font-size:var(--fs-micro);letter-spacing:.12em;color:var(--accent-tx);margin-bottom:4px}
.secnav .of{grid-column:1/-1;text-align:center;color:var(--caption);letter-spacing:.1em}

@media (max-width:900px){
  .kak-bar .in{min-height:56px}
    .story-head .sub{display:none}            /* на телефоне подводку заменяет подсказка на сцене */
  .stories{max-width:none}
  .st-cue{font-size:11px;gap:10px;padding:8px 12px}
  .secnav .t{font-size:15px}
  .secnav a{min-height:76px;padding:12px 14px}
}
@media (max-width:700px){.cap-line{min-height:2.6em;font-size:var(--fs-micro)}}
@media (max-width:400px){.st-cue span:last-child{display:none}}
@media (max-width:380px){.secnav{grid-template-columns:1fr}}   /* узкий телефон: «ФУНКЦИОНАЛЬНЫЕ» не влезает в половину ширины — кнопки соседей в столбик */
@media (prefers-reduced-motion:reduce){.segs i b{transition:none!important}}

.demo-note{margin:var(--sp-3) 0 0;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.02em;color:var(--caption)}

/* ═══ ПУБЛИЧНЫЙ САЙТ · тёмная зона ═══ */
.site-head{padding:var(--sp-4) 0 0}
.site-head .in{display:flex;align-items:center;gap:var(--sp-4)}
.mainnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);width:100%}
.mainnav .cap{width:100%}
@media (max-width:640px){.mainnav{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* W-01 */
.kto{padding-top:clamp(72px,10vh,120px)}   /* запас под штрих логотипа над И (≈1,2 em над строкой) */
.kto .display{font-size:var(--fs-display);margin-top:.35em;color:var(--tx)}
.kto .desc{margin:var(--sp-4) 0 0;font-size:var(--fs-micro)}
.kto-row3{margin-top:clamp(28px,5vh,56px);align-items:start}
.kto-row3 .msgs{display:flex;gap:var(--sp-3)}
.kto-row3 .msgs .cap{flex:1}
.kto-row3 .callwrap{grid-column:span 2}
@media (max-width:1024px){.kto-row3 .callwrap{grid-column:span 2}}
@media (max-width:640px){.kto-row3 .callwrap{grid-column:auto}}
.kto-data{margin:clamp(32px,6vh,64px) 0 0}
.kto-data .kd{border-top:1px solid var(--line);padding-top:var(--sp-3)}
.kto-data dd{margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.kto-data .big{font-size:var(--fs-lead)}
.kto-data a.data{text-decoration:none}
.kto-data a.data:hover{text-decoration:underline}
.kto .footnote{margin-top:var(--sp-6);max-width:52ch}

/* W-02 */
.kak{padding-top:var(--sp-6)}
.steps{padding-left:1.4em;margin:0}
.steps li+li,.cols li+li{margin-top:10px}
.cols{padding-left:1.2em;margin:0}
@media (min-width:900px){.cols{columns:2;column-gap:var(--sp-6)}.cols li{break-inside:avoid}}

/* W-03 */
.nachat{padding-top:var(--sp-6);max-width:640px}
.nachat .desc{margin:var(--sp-3) 0 var(--sp-5)}
.sv{display:none}.sv.on{display:block}
.form{display:grid;gap:var(--sp-4)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:640px){.form .two{grid-template-columns:1fr}}
.chans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
@media (max-width:480px){.chans{grid-template-columns:1fr}}
.linkrow{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2)}
.linkrow button{color:var(--accent-tx);text-decoration:underline;text-underline-offset:.25em;min-height:var(--tap)}
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:360px}
.code input{text-align:center;font-family:var(--f-data);font-size:24px;min-height:56px;padding:0}
.regl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-5)}
.regl .agree{display:flex;align-items:flex-start;gap:16px}
.regl .sq{width:32px;height:32px;border:2px solid var(--tx);border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px}
.regl .agree input{position:absolute;opacity:0;width:0;height:0}
.regl .agree input:checked+.sq{background:var(--c-signal);border-color:var(--c-signal);color:var(--c-ink)}
.regl .agree input:focus-visible+.sq{box-shadow:var(--focus)}
.regl .agree p{font-family:var(--f-head);font-weight:600;font-size:var(--fs-lead);letter-spacing:.04em;margin:0;line-height:1.35}

/* W-04 · W-05 */
.secrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-5)}
.secrow .cap{width:100%}
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5)}
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-4)}
@media (max-width:760px){.works{grid-template-columns:1fr}}
.wcard .frame{aspect-ratio:4/3;border-radius:var(--r-card);background:radial-gradient(ellipse at 50% 60%,#2A2A2E,#121214 70%);border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;color:var(--caption);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:var(--sp-4)}
.wcard .frame .cnt{position:absolute;left:12px;top:12px;border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 10px;color:var(--tx2)}
.wcard .frame.gal{padding:0;background:var(--c-ink);overflow:hidden}
.wcard .gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s ease}
.wcard .gal img.on{opacity:1;pointer-events:auto;z-index:1}   /* кадры лежат стопкой: смена — плавное проявление нового поверх старого */
.wcard{animation:wfade .4s ease both}@keyframes wfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.wcard .gal img{transition:none}.wcard{animation:none}}
.wcard .gal .cnt{background:rgba(11,11,12,.6);color:var(--c-gips);border-color:rgba(241,239,234,.5)}
.wcard .gnav{position:absolute;top:50%;transform:translateY(-50%);width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid rgba(241,239,234,.5);background:rgba(11,11,12,.55);color:var(--c-gips);font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--dur)}
.wcard .gnav:hover{background:rgba(11,11,12,.85)}
.wcard .gnav,.wcard .gal .cnt{z-index:2}
.wcard .gnav-prev{left:10px}.wcard .gnav-next{right:10px}   /* не .prev/.next — класс .next занят строкой ссылок в «Как?» */
.wcard .meta{margin-top:var(--sp-3);display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.wcard .id{border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 12px;font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
@media (max-width:1024px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tiles{grid-template-columns:1fr}}
.tile{text-align:left;text-decoration:none;color:var(--tx);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);transition:border-color var(--dur);min-height:112px;display:flex;flex-direction:column;gap:6px}
.tile:hover{border-color:var(--tx)}
.tile .code{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-data);font-size:var(--fs-lead);font-weight:500;letter-spacing:.08em}
.tile .code small{font-size:var(--fs-micro);color:var(--caption);font-weight:400;letter-spacing:.06em}
.tile p{margin:0;font-size:var(--fs-small);color:var(--tx2);line-height:1.45}
.plist{margin-top:var(--sp-4);border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:110px 1fr auto;gap:var(--sp-4);align-items:center;width:100%;text-align:left;padding:14px 4px;border-bottom:1px solid var(--line);min-height:var(--tap)}
.prow:hover{background:var(--panel)}
.prow .art{font-family:var(--f-data);font-weight:500;letter-spacing:.06em;color:var(--accent-tx)}
.prow .nm{font-size:var(--fs-small)}
.prow .aft{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--caption)}
@media (max-width:640px){.prow{grid-template-columns:1fr auto}.prow .nm{grid-column:1 / -1}}

/* документы */
.doc{max-width:72ch;padding-top:var(--sp-6)}
.doc h2{font-family:var(--f-head);font-size:var(--fs-h3);letter-spacing:.06em;text-transform:uppercase;margin:var(--sp-6) 0 var(--sp-3)}
.doc ol,.doc ul{padding-left:1.4em}
.doc li+li{margin-top:8px}

/* обратный звонок */
dialog.callback{width:min(760px,calc(100vw - 32px))}
dialog.callback .mbody{display:grid;gap:var(--sp-4)}

/* уведомление о cookie */
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto;padding:14px 16px 14px 20px;background:var(--panel);color:var(--tx);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.cookie[hidden]{display:none}
.cookie p{margin:0;font-size:var(--fs-small);line-height:1.5}
.cookie p a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.cookie .cap{flex:none}
@media (max-width:820px){body:has(.tabbar) .cookie{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (max-width:560px){.cookie{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}}