/* Шрифты: по одному вариативному файлу на семейство (кириллица, латиница, ₽, типографские знаки;
   насыщенность Jost 500–600, Manrope 400–600). Раньше было 18 правил и 11 файлов, причём файлы разных
   насыщенностей побайтно совпадали и скачивались по нескольку раз. Сборка: _state/tools/fonts-build.py. */
@font-face{font-family:'Jost';font-style:normal;font-weight:500 600;font-display:swap;src:url('../../fonts/jost-var.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url('../../fonts/manrope-var.woff2') format('woff2')}
/* Тире диапазона U+2013 у Jost длинное (0,76 em, «2—3»): в Jost его рисует Manrope (тот же файл, он уже
   в предзагрузке). Правило стоит после основного Jost: при пересечении диапазонов берётся последнее.
   Ручные обёртки .rng после этого не нужны. */
@font-face{font-family:'Jost';font-style:normal;font-weight:500 600;font-display:swap;src:url('../../fonts/manrope-var.woff2') format('woff2');unicode-range:U+2013}

/* ═══════════════════════════════════════════════════════════════════════
   МОНРО АРТ · вторая версия главной «Мастерская»
   Все значения — из DESIGN.md в корне темы. Правится токен, не вёрстка.
   Написано от 375 px вверх.
   ═══════════════════════════════════════════════════════════════════════ */

/* На :root — то, что нужно самому html (scroll-padding): токены .v2 ему не видны.
   --dock-h — высота нижней панели .dock: --btn-h 54 + 2 × --s-2 12. */
/* Знак в подвале --logo-ftr соразмерен шапке (--logo 52 px) на всех ширинах: 104 px читались «плакатом» (правки 01.10). */
:root{--hdr:68px;--logo:52px;--logo-ftr:56px;--dock-h:78px}
html{scroll-padding-top:calc(var(--hdr) + 16px)}

.v2{
  --paper:#FFFBF6; --card:#FFFFFF; --linen:#F3EEE5; --butter:#F4EFC6;
  --on-ink-2:rgba(255,255,255,.72); --on-ink-3:rgba(255,255,255,.6); --on-ink-line:rgba(255,255,255,.5); --on-ink-rule:rgba(255,255,255,.14); --rule:color-mix(in srgb,var(--ink) 14%,transparent); --on-ink-fill:rgba(255,255,255,.06);
  --ink:#1D2019; --ink-2:#5C6158;
  /* Второстепенный текст на лимонной полосе (--butter): --ink-2 там 5,45 : 1 и читается пыльно, этот — 6,8 : 1
     (DESIGN §2, 13.10). Подставляется вместо --ink-2 внутри лимонных полос (ниже, «Лимонная полоса»). */
  --ink-2-butter:#4F5249;
  --acc:#04734A; --acc-ink:#03583A; --acc-soft:#E2EFE7;
  --err:#A4331F;

  --f-d:'Jost','Manrope',-apple-system,'Segoe UI',Arial,sans-serif;
  --f-b:'Manrope',-apple-system,'Segoe UI',Arial,sans-serif;

  /* Кегли — в rem (аудит доступности 13.10, DESIGN §3): крупный шрифт из настроек браузера доходит до текста.
     При базе 16 px значения прежние: 34/62, 32/52, 30/48, 22/36, 20/24, 22/24, 17/20, 17, 16, 14, 12 px.
     Отступы, радиусы, кнопки и поля остаются в px. */
  --t-hero:clamp(2.125rem,4.3vw,3.875rem);
  --t-h1:clamp(2rem,3.7vw,3.25rem);
  --t-h2:clamp(1.875rem,3.4vw,3rem);
  --t-phrase:clamp(1.375rem,2.5vw,2.25rem);
  --t-h3:clamp(1.25rem,1.7vw,1.5rem);
  --t-num:clamp(1.375rem,2vw,1.5rem);
  --t-lead:clamp(1.0625rem,1.35vw,1.25rem);
  --t-body:1.0625rem; --t-ui:1rem; --t-s:.875rem; --t-eyebrow:.75rem;

  --ul-off:3px; --ul-off-l:5px;
  --r-check:6px; --r-check-d:4px; --r-btn:12px; --r-img:16px; --r-panel:28px; --r-chip:999px;
  /* Тени — только --ink с прозрачностью (color-mix), без числового rgba: правка --ink меняет и тени. */
  --shadow:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent),0 28px 56px -28px color-mix(in srgb,var(--ink) 38%,transparent);
  --shadow-wall:1px 2px 3px color-mix(in srgb,var(--ink) 22%,transparent),4px 10px 18px -6px color-mix(in srgb,var(--ink) 30%,transparent);
  /* Фокус (контур и его сдвиг), размытие подложек, сдвиг стрелки при наведении — DESIGN §4. */
  --focus-w:2px; --focus-off:3px; --blur:12px; --nudge:4px;

  --s-0:4px; --s-1:8px; --s-2:12px; --s-3:16px; --s-4:24px; --s-5:36px; --s-6:56px;
  --col-gap:clamp(40px,6vw,96px);
  --hero-pad:clamp(28px,4vw,56px); --pad-panel:clamp(28px,4.5vw,72px); --reel-w:clamp(130px,16vw,240px);
  --max:1280px; --gut:max(clamp(20px,4vw,48px),env(safe-area-inset-left),env(safe-area-inset-right));
  --tap:44px; --btn-h:54px; --row:56px; --chip-h:24px; --handle:48px; --ring:3px; --bar:4px; --ico:16px; --ico-l:24px; --brg:22px; --brg-gap:7px; --line:2px; --near:48%; --stamp-crop:1.04; --canvas-ratio:.8; --check:24px; --check-d:18px; --size-col:5.75em; --thumb:56px;
  --canvas-max:540px; --canvas-md:480px; --craft-min-lg:560px; --rev-photo:380px; --rev-photo-sm:44svh; --rail:78%; --read-thumb:96px; --drop-max:360px;
  --tier-art:clamp(112px,33vw,200px); /* 27.10: кадр уровня в списке «Насколько подробно писать» до 900 px (375 → 124 px) */
  --hero-min:620px; --hero-col:clamp(400px,40vw,580px); --hero-media-min:32svh; --hero-over:var(--s-6); --dot-w:48px;
  --glass:rgba(255,255,255,.14); --glass-hover:rgba(255,255,255,.24); --on-photo-2:rgba(255,255,255,.84);
  /* Мега-меню (01.10): подложка страницы, её размытие и запасная плотная подложка без размытия; ширина колонки карточки. */
  --mega-scrim:color-mix(in srgb,var(--ink) 18%,transparent); --mega-scrim-solid:color-mix(in srgb,var(--ink) 44%,transparent); --mega-blur:10px; --mega-col:220px;
  --slide-time:6.4s; --slide-fade:1.4s; --kb:1.08; --kb-time:9s;
  --rise:18px; --dur-rise:.7s; --ease-out:cubic-bezier(.215,.61,.355,1);
  /* Вуаль первого экрана: под текстом не прозрачнее 70 % --ink (белый текст ≥ 4,5 : 1 на любом кадре). */
  --veil-band:linear-gradient(180deg,color-mix(in srgb,var(--ink) 60%,transparent) 0,transparent var(--s-6)),
    linear-gradient(0deg,var(--ink) 0,color-mix(in srgb,var(--ink) 84%,transparent) var(--hero-over),transparent calc(var(--hero-over) + 34%));
  /* Десктоп: плотная часть вуали кончается там, где кончается колонка текста (--veil-edge),
     дальше быстро светлеет — лица справа не притемняются. */
  --veil-edge:calc(max(var(--gut),(100% - var(--max)) / 2 + var(--gut)) + var(--hero-col));
  /* Правый верхний угол (аудит 13.10, WCAG 1.4.3): под прозрачной шапкой справа номер телефона и кнопка; на светлых
     сценах белый номер давал 2,3–3,8 : 1. Мягкий угол --ink от правого края колонки (эллипс --veil-tel-r, 58 % → 48 %
     → 18 % → 0) вместе с полосой сверху даёт под номером ≥ 4,5 : 1 на всех шести сценах (DESIGN §2). Кадры не трогаются. */
  --veil-tel-r:480px 150px;
  --veil-side:radial-gradient(var(--veil-tel-r) at calc(100% - max(var(--gut),(100% - var(--max)) / 2 + var(--gut))) 0,color-mix(in srgb,var(--ink) 58%,transparent) 0,
      color-mix(in srgb,var(--ink) 48%,transparent) 55%,color-mix(in srgb,var(--ink) 18%,transparent) 80%,transparent 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--ink) 80%,transparent) 0,color-mix(in srgb,var(--ink) 72%,transparent) var(--veil-edge),color-mix(in srgb,var(--ink) 40%,transparent) calc(var(--veil-edge) + 10%),color-mix(in srgb,var(--ink) 12%,transparent) calc(var(--veil-edge) + 26%),transparent calc(var(--veil-edge) + 40%)),
    linear-gradient(0deg,color-mix(in srgb,var(--ink) 56%,transparent) 0,transparent 32%),
    linear-gradient(180deg,color-mix(in srgb,var(--ink) 50%,transparent) 0,transparent calc(var(--hdr) + var(--s-6)));
  --measure-s:34ch; --measure:44ch; --measure-l:52ch; --measure-art:66ch;
  /* Ритм секций (DESIGN §5 «Ритм», 01.10; 375 → 1440): --sec — поле светлой секции (40 → 104); --band — поле внутри
     цветной и тёмной полосы (36 → 88); --sec-edge — поле светлой секции со стороны цветной полосы, кромка цвета уже
     разделяет (32 → 80); --sec-near — верх второй из соседних секций одного фона (28 → 48): два полных поля не складываются. */
  /* 27.10 (заказчик, iPhone: «блоки слиплись, добавить воздуха»): до 900 px к каждому полю секции прибавляется
     --sec-air = --s-2 (12 px) сверху и снизу — стык двух блоков шире на 24 px (390: 36 | 32 → 48 | 44, 68 → 92, 56 → 80).
     От 900 px --sec-air: 0 — десктоп прежний. */
  --sec-air:var(--s-2);
  --sec:calc(clamp(40px,7.2vw,104px) + var(--sec-air)); --band:calc(clamp(36px,6.2vw,88px) + var(--sec-air));
  --sec-edge:calc(clamp(32px,5.6vw,80px) + var(--sec-air)); --sec-near:calc(clamp(28px,3.4vw,48px) + var(--sec-air));
  --ease:cubic-bezier(.22,.7,.2,1); --dur:.28s; --dur-img:.4s;
}
@media (min-width:900px){.v2{--sec-air:0px}}
.v2[data-accent="blue"]{--acc:#1E4E8C;--acc-ink:#163B6B;--acc-soft:#E4ECF6}
.v2[data-accent="gold"]{--acc:#8C6420;--acc-ink:#6E4E18;--acc-soft:#F4EAD6}

/* ── База ─────────────────────────────────────────────────────────── */
.v2{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.6 var(--f-b);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  /* Слово, которое не помещается в строку (крупный шрифт браузера ×2: «фотографию» в H2, «согласование» в узкой
     колонке), переносится, а не уводит страницу вбок. При обычном кегле ничего не меняется: перенос внутри слова —
     только когда иначе никак (break-word не влияет на ширину колонок). */
  overflow-wrap:break-word}
/* Заголовки стоят и в колонках «по содержимому» (justify-items:start): им — anywhere, иначе длинное слово задаёт
   ширину колонки и она шире экрана. При обычном кегле строки заголовков те же (сверено снимками 13.10). */
.v2 :is(h1,h2,h3,.h2){overflow-wrap:anywhere}
.v2 *,.v2 *::before,.v2 *::after{box-sizing:border-box}
.v2 img{display:block;max-width:100%;height:auto}
.v2 a{color:inherit;text-decoration:none}
.v2 h1,.v2 h2,.v2 h3,.v2 h4,.v2 p,.v2 ul,.v2 ol,.v2 figure{margin:0;padding:0}
.v2 ul,.v2 ol{list-style:none}
.v2 button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.v2 [hidden]:not([hidden="until-found"]){display:none !important}
.v2 .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.v2 ::selection{background:var(--acc);color:var(--card)}
.v2 :focus-visible{outline:var(--focus-w) solid var(--acc);outline-offset:var(--focus-off);border-radius:var(--r-btn)}
.v2 .proof :focus-visible,.v2 .promise :focus-visible,.v2 .ftr :focus-visible,.v2 .skip:focus-visible{outline-color:var(--card)}
.v2 .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.v2 .skip{position:absolute;left:-9999px}
.v2 .skip:focus{left:var(--gut);top:var(--s-1);z-index:99;background:var(--ink);color:var(--card);padding:var(--s-2) var(--s-3);border-radius:var(--r-btn)}

.v2 .h2{font:500 var(--t-h2)/1.08 var(--f-d);letter-spacing:-.015em;text-wrap:balance}
.v2 .lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2)}
.v2 .eyebrow{font:600 var(--t-eyebrow)/1 var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

/* Кнопки: мягкий прямоугольник, стрелка уходит вправо при наведении
   (паттерн UIverse). Пилюлями сделаны только чипы. */
.v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--btn-h);padding:0 var(--s-4);
  border-radius:var(--r-btn);background:var(--acc);color:var(--card);font:600 var(--t-ui)/1.2 var(--f-b);text-align:center;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.v2 .btn svg{flex:0 0 auto;transition:transform var(--dur) var(--ease)}
.v2 .btn:hover{background:var(--acc-ink)}
.v2 .btn:hover svg{transform:translateX(var(--nudge))}
.v2 .btn:active{transform:translateY(1px)}
.v2 .btn--sm{min-height:var(--tap);padding:0 var(--s-3)}
/* Вторичная кнопка (правка 01.10, п. 12): обводка 1,5 px --acc, текст --acc-ink, без заливки;
   наведение — --acc-soft. Одна основная (.btn) на блок, остальные действия — эта. */
.v2 .btn--line{background:transparent;color:var(--acc-ink);box-shadow:inset 0 0 0 1.5px var(--acc)}
.v2 .btn--line:hover{background:var(--acc-soft)}
.v2 .link{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--tap);justify-self:start;align-self:start;
  font-weight:600;color:var(--acc);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:var(--ul-off-l)}
.v2 .link svg{transition:transform var(--dur) var(--ease)}
.v2 .link:hover svg{transform:translateX(var(--nudge))}
.v2 .link--light{color:var(--card)}
.v2 .chip{display:inline-flex;align-items:center;min-height:var(--chip-h);padding:0 var(--s-1);border-radius:var(--r-chip);
  background:var(--acc-soft);color:var(--acc-ink);font:600 var(--t-s)/1 var(--f-b)}
.v2 .nw{white-space:nowrap}
.v2 .tiers__row:focus-visible,.v2 .reads__row:focus-visible{outline-offset:calc(var(--line) * -1)}
/* Тире диапазона в Jost рисует Manrope через @font-face с unicode-range (начало файла). Обёртка .rng
   осталась в старой разметке страниц — то же начертание, ничего не меняет; новых не ставить. */
.v2 .rng{font-family:var(--f-b);font-weight:600}

/* ── Шапка ────────────────────────────────────────────────────────── */
.v2 .hdr{position:sticky;top:0;z-index:40;background:var(--paper);container:hdr / inline-size}
/* Размытие под шапкой — только от 900 px: на телефоне и планшете плотный фон --paper, без backdrop-filter
   (перф телефона, аудит 13.10). Шапка — контейнер hdr: пункты меню и номер включаются по её ширине в rem
   (ниже), при крупном шрифте в настройках браузера она сама переходит на бургер, а не разваливается. */
@media (min-width:900px){.v2 .hdr{background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}}
@media (max-height:500px){.v2 .hdr{position:relative}}
.v2 .hdr__in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);min-height:var(--hdr);
  display:flex;align-items:center;gap:var(--s-3)}
.v2 .hdr__logo{display:inline-flex;align-items:center;min-height:var(--tap);margin-right:auto;color:var(--ink)}
.v2 .hdr__mark{display:block;height:var(--logo);width:auto}
.v2 .hdr__nav,.v2 .hdr__tel{display:none}
.v2 .brg{width:var(--tap);height:var(--tap);margin-right:calc((var(--tap) - var(--brg)) / -2);display:grid;place-items:center}
.v2 .brg i,.v2 .brg i::before,.v2 .brg i::after{display:block;width:var(--brg);height:var(--line);border-radius:var(--r-chip);background:var(--ink);
  transition:transform var(--dur) var(--ease),background var(--dur)}
.v2 .brg i{position:relative}
.v2 .brg i::before,.v2 .brg i::after{content:'';position:absolute;left:0}
.v2 .brg i::before{top:calc(var(--brg-gap) * -1)}
.v2 .brg i::after{top:var(--brg-gap)}
.v2 .brg[aria-expanded="true"] i{background:transparent}
.v2 .brg[aria-expanded="true"] i::before{transform:translateY(var(--brg-gap)) rotate(45deg)}
.v2 .brg[aria-expanded="true"] i::after{transform:translateY(calc(var(--brg-gap) * -1)) rotate(-45deg)}
.v2 .pnl{position:fixed;inset:var(--hdr) 0 0;z-index:39;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);padding:var(--s-3) var(--gut) calc(var(--s-6) + env(safe-area-inset-bottom));
  display:grid;align-content:start;gap:var(--s-1);opacity:0;visibility:hidden;transform:translateY(calc(var(--s-1) * -1));
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.v2 .pnl.on{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s}
/* Закрытая панель не раскладывается (content-visibility): её пункты не тянут
   лишние начертания шрифтов при загрузке. Скрытие дожидается конца затухания. */
.v2 .pnl:not(.on){content-visibility:hidden;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur),content-visibility var(--dur);transition-behavior:allow-discrete}
.v2 .pnl__sec summary,.v2 .pnl__link{display:flex;align-items:center;justify-content:space-between;min-height:var(--row);
  font:600 var(--t-h3)/1.25 var(--f-d);list-style:none;cursor:pointer}
.v2 .pnl__sec summary::-webkit-details-marker{display:none}
.v2 .pnl__sec summary svg{transition:transform var(--dur) var(--ease)}
.v2 .pnl__sec[open] summary svg{transform:rotate(180deg)}
.v2 .pnl__cols{display:grid;gap:var(--s-4);padding-block:var(--s-1) var(--s-4)}
.v2 .pnl .pnl__tel{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:var(--s-3);font:600 var(--t-ui)/1.3 var(--f-b);color:var(--acc)}
.v2 .pnl .btn{margin-top:var(--s-2)}
/* Мега-меню: панель под шапкой, колонки воздухом, без линий. */
.v2 .hdr__list{display:flex;align-items:center;gap:var(--s-3);margin:0;padding:0;list-style:none}
.v2 .hdr__list>li>a,.v2 .hdr__drop{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-0);min-height:var(--tap);min-width:var(--tap);font:500 var(--t-ui)/1.2 var(--f-b);
  color:var(--ink-2);white-space:nowrap;transition:color var(--dur) var(--ease)}
.v2 .hdr__list>li>a:hover,.v2 .hdr__drop:hover,.v2 .hdr__drop[aria-expanded="true"]{color:var(--ink)}
.v2 .hdr__drop svg{transition:transform var(--dur) var(--ease)}
.v2 .hdr__drop[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Мега-меню — навигация, не витрина цен: колонки воздухом, заголовок колонки
   ведёт на хаб. У стилей и сюжетов — миниатюра работы, у стилей — «от … ₽».
   Правки 01.10: не полоса во всю ширину, а плавающая карточка под своим пунктом —
   сливки, как шапка, радиус --r-panel, тень --shadow, ширина по содержимому и не
   шире контейнера. Левый край ставит v2.js (--mega-x: текст первой колонки под
   текстом пункта, в пределах полей контейнера), без него — край контейнера.
   Появление — прозрачность и сдвиг на --s-1 (.on, --dur). */
.v2 .mega{position:absolute;top:calc(100% + var(--s-1));left:var(--mega-x,max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut))));
  width:max-content;max-width:calc(min(100%,var(--max)) - var(--gut) * 2);max-height:calc(100svh - var(--hdr) - var(--s-4));overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);border-radius:var(--r-panel);box-shadow:var(--shadow);
  opacity:0;transform:translateY(calc(var(--s-1) * -1));transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.v2 .mega.on{opacity:1;transform:none}
.v2 .mega:focus{outline:none}
.v2 .mega__in{padding:var(--s-5);display:grid;gap:var(--s-4) var(--s-6)}
.v2 .mega__in--2{grid-template-columns:repeat(2,minmax(var(--mega-col),max-content))}
.v2 .mega__in--3{grid-template-columns:repeat(3,minmax(var(--mega-col),max-content))}
.v2 .mega__in--4{grid-template-columns:repeat(4,minmax(var(--mega-col),max-content))}
/* Подложка страницы под открытым мега-меню (#hdrVeil, сестра шапки): --mega-scrim с размытием
   --mega-blur — страница видна, но «замылена»; шапка (z 40) над ней. Без поддержки размытия и при
   prefers-reduced-transparency — плотнее и без размытия (--mega-scrim-solid). Только от 1100 px. */
.v2 .hdr-veil{display:none}
@media (min-width:1100px){
  .v2 .hdr-veil{display:block;position:fixed;inset:0;z-index:39;background:var(--mega-scrim);-webkit-backdrop-filter:blur(var(--mega-blur));backdrop-filter:blur(var(--mega-blur));
    opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur)}
  .v2 .hdr-veil.on{opacity:1;visibility:visible;transition:opacity var(--dur) var(--ease),visibility 0s}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.v2 .hdr-veil{background:var(--mega-scrim-solid)}}
@media (prefers-reduced-transparency:reduce){.v2 .hdr-veil{background:var(--mega-scrim-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* С открытым мега-меню или панелью телефона шапка того же цвета, что карточка и панель (сливки 92 %
   над подложкой или тёмным кадром серели). С мега-меню на главной над кадром она остаётся прозрачной:
   правило .v2-over ниже сильнее. */
.v2 .hdr.is-mega,.v2 .hdr.is-open{background:var(--paper)}
.v2 .mega__col{display:grid;gap:var(--s-2);align-content:start}
.v2 .mega__h{display:flex;align-items:center;min-height:var(--tap);font:600 var(--t-h3)/1.25 var(--f-d);color:var(--ink)}
.v2 .mega__h--link{display:inline-flex;gap:var(--s-1);justify-self:start;transition:color var(--dur) var(--ease)}
.v2 .mega__h--link:hover{color:var(--acc)}
.v2 .mega__h--link svg{transition:transform var(--dur) var(--ease)}
.v2 .mega__h--link:hover svg{transform:translateX(var(--nudge))}
.v2 .mega__list{display:grid;margin:0;padding:0;list-style:none}
.v2 .mega__list a{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap);padding-block:var(--s-0);color:var(--ink);font:500 var(--t-ui)/1.3 var(--f-b)}
.v2 .mega__list a:hover span{color:var(--acc);text-decoration:underline;text-underline-offset:var(--ul-off)}
.v2 .mega__list span{flex:1 1 auto}
.v2 .mega__list small{flex:0 0 auto;font-size:var(--t-s);color:var(--ink-2);white-space:nowrap}
.v2 .mega__pic{flex:0 0 auto;width:var(--thumb);height:var(--thumb);border-radius:var(--r-btn);object-fit:cover;background:var(--linen)}
.v2 .mega__col--thumbs .mega__list{gap:var(--s-1)}
.v2 .pnl .mega__list a{font:500 var(--t-body)/1.4 var(--f-b);padding-block:var(--s-1)}
.v2 .pnl .mega__h{font-size:var(--t-s);color:var(--ink-2);font-family:var(--f-b)}
.v2 .pnl .mega__h--link{font-weight:600;color:var(--acc)}
.v2 .pnl .mega__pic{width:var(--tap);height:var(--tap)}
.v2 .hdr__cta{flex:0 0 auto;white-space:nowrap}
/* Пункты меню и номер — по ширине шапки в rem (68,75rem = 1100 px, 80rem = 1280 px при базе 16 px): при крупном
   шрифте браузера порог растёт вместе с текстом, и вместо переносов по словам — бургер. Ничего не переносится. */
@container hdr (min-width:68.75rem){
  .v2 .hdr__logo{margin-right:var(--s-4)}
  .v2 .hdr__nav{display:block;margin-right:auto}
  .v2 .brg{display:none}
}
@container hdr (min-width:80rem){
  .v2 .hdr__tel{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;font-size:var(--t-ui);white-space:nowrap}
}
/* Телефон и планшет: пока видна нижняя панель .dock с той же «Узнать цену», кнопки в шапке нет — две одинаковые
   кнопки на одном экране (критика 13.10). Только прозрачность: место кнопки остаётся, шапка не прыгает. */
@media (max-width:899px){
  .v2 .hdr__cta{transition:opacity var(--dur) var(--ease),visibility var(--dur)}
  .v2:has(.dock.is-on) .hdr__cta{opacity:0;visibility:hidden}
}

.v2.js.v2-over .hdr:not(.is-solid,.is-open){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}















@keyframes heroKb{from{transform:scale(var(--kb))}to{transform:none}}







.v2 .hero__dot:hover .hero__bar{background:var(--on-ink-2)}




@keyframes heroFill{to{transform:none}}














.v2 .hero__promo{justify-self:start}
.v2 a.hero__promo{min-height:var(--tap);padding-inline:var(--s-3)}




/* Размытие под «стеклом» — только там, где под ним кадр (десктоп); на телефоне
   кнопка стоит на ровной тёмной подложке, и размытие только нагружало бы отрисовку. */


@media (prefers-reduced-motion:no-preference){
  
  
  
  
  .v2 .hero__go,.v2 .hero__alt,.v2 .hero__promo,.v2 .hero__trust,.v2 .hero__ctl{animation:heroFade .7s var(--ease) .3s both}
}

@keyframes heroIn{from{opacity:0;transform:translateY(var(--s-3))}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}}

/* Планшет: общий кадр вместо кропа 3:4, кнопки по ширине текста. */

/* Десктоп: кадр во весь экран под шапкой, текст слева; кнопки в ряд, цена и доверие под ними. */
@media (min-width:900px){
  
  
  
  
  
  .v2 .hero__t,.v2 .hero__lead,.v2 .hero__when,.v2 .hero__go,.v2 .hero__alt,.v2 .hero__price,.v2 .hero__promo,.v2 .hero__trust{position:relative;z-index:5}
  
  
  
  
  
  
  .v2 .hero__promo{grid-area:promo;margin-top:var(--s-2)}
  
}

/* Кнопка и ссылка рядом (как это работает, техники): до 600 px кнопка во всю ширину.
   Раньше эти правила жили в блоке первого экрана. */
.v2 .how__in>*,.v2 .tech__in>*{min-width:0}
@media (max-width:599px){.v2 .how__cta .btn,.v2 .tech__go .btn{flex:1 1 100%}}
.v2 .tech__go .link,.v2 .how__cta .link{align-self:center}




/* ═══ 2 · Тёмная полоса и лента холстов ══════════════════════════════ */
.v2 .proof{background:var(--ink);color:var(--card);padding-block:var(--band);overflow:hidden}
.v2 .proof__head{display:grid;gap:var(--s-4)}
.v2 .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4) var(--s-3);margin:0}
.v2 .nums dd{margin:0;display:grid;gap:var(--s-0)}
.v2 .nums b{font:500 var(--t-h2)/1 var(--f-d);letter-spacing:-.015em;color:var(--card)}
.v2 .nums span{font-size:var(--t-s);color:var(--on-ink-2)}
.v2 .nums__i:first-child{grid-column:1 / -1}
.v2 .nums__i:first-child b{font-size:var(--t-hero);line-height:1}
@media (min-width:900px){
  /* Равные промежутки при разной ширине цифр: главная крупнее, последняя по правому краю. */
  .v2 .nums{grid-template-columns:repeat(4,auto);justify-content:space-between;gap:var(--s-4) var(--col-gap);align-items:end}
  .v2 .nums__i:first-child{grid-column:auto}
  .v2 .nums__i:first-child b{margin-bottom:-.06em}
}
.v2 .proof__sub{color:var(--on-ink-2);font-size:var(--t-lead);line-height:1.55;max-width:var(--measure-l)}







@keyframes reel{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}





/* ═══ Стыки секций (DESIGN §5 «Ритм», правки 01.10) ═══════════════════
   Цветные полосы — пастель, лён и тёмные: .band, .hero, .proof, .promise, .calc, .revs, финальная заявка .lead-fin
   и цветные блоки страниц (.sprice, .fig-price, .fig-holst, .pr-all, .pr-call); новая цветная секция — добавить её
   класс в три списка ниже или дать ей класс .tone. У светлой секции со стороны полосы поле --sec-edge, а не
   --sec: кромка цвета уже разделяет блоки, и заголовок после тёмной полосы не отъезжает на полный отступ
   (замечание Булата: после гарантий до «Из чего сделан портрет», после «Рассчитать свой портрет» до «Как проходит заказ»).
   Последняя светлая секция перед тёмным подвалом — тоже --sec-edge. Только теги section: шапка страницы .phead,
   обёртки .wrap, script (JSON-LD вопросов стоит между секциями — отсюда «+ script +»), dialog и template не трогаем.
   Вес (0,3,2) — выше правил отдельных секций. Без :has() (старые браузеры) остаётся прежнее нижнее поле. */
.v2 main>:is(.tone,.band,.hero,.proof,.promise,.calc,.revs,.lead-fin,.sprice,.fig-price,.fig-holst,.pr-all,.pr-call)+section:not(.tone,.band,.hero,.proof,.promise,.calc,.revs,.lead-fin,.sprice,.fig-price,.fig-holst,.pr-all,.pr-call){padding-top:var(--sec-edge)}
.v2 main>section:not(.tone,.band,.hero,.proof,.promise,.calc,.revs,.lead-fin,.sprice,.fig-price,.fig-holst,.pr-all,.pr-call):has(+:is(.tone,.band,.proof,.promise,.calc,.revs,.lead-fin,.sprice,.fig-price,.fig-holst,.pr-all,.pr-call),+script+:is(.tone,.band,.proof,.promise,.calc,.revs,.lead-fin,.sprice,.fig-price,.fig-holst,.pr-all,.pr-call)){padding-bottom:var(--sec-edge)}
.v2 main>section:not(.tone,.band,.hero,.proof,.promise,.calc,.revs,.lead-fin,.sprice,.fig-price,.fig-holst,.pr-all,.pr-call):last-of-type{padding-bottom:var(--sec-edge)}

/* ═══ 3 · Как это работает одной фразой ══════════════════════════════ */
.v2 .band{padding-block:var(--band)}
.v2 .band--butter{background:var(--butter);--ink-2:var(--ink-2-butter)}
/* Лимонная полоса: второстепенный текст (лиды, подписи, тексты шагов) — --ink-2-butter 6,8 : 1 вместо --ink-2 5,45 : 1
   (детектор Impeccable 13.10: «серый на цветном» читался пыльно). Токен подменяется на всю полосу, включая белые
   карточки в ней (там контраст только растёт). Лимонные блоки страниц — .fig-holst, .pr-fig (pages/*.css). */
.v2 .how__in{display:grid;gap:var(--s-4)}
/* Четыре шага карточками: у каждого свой кадр 4:3 с номером, дата, название
   и короткий текст — всё видно сразу. На телефоне лента вбок. */
.v2 .hsteps{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rail);gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;
  margin:calc(var(--s-1) * -1) calc(var(--gut) * -1);padding:var(--s-1) var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;list-style:none}
.v2 .hsteps::-webkit-scrollbar{display:none}
.v2 .hstep{display:grid;gap:var(--s-1);align-content:start;scroll-snap-align:start}
.v2 .hstep__img{position:relative;margin-bottom:var(--s-2);aspect-ratio:4/3;border-radius:var(--r-img);overflow:hidden;background:var(--linen);box-shadow:var(--shadow)}
/* На цветной полосе (лимон) кадр шага плоский: тень --shadow — только на сливках (DESIGN §2). */
.v2 .band--butter .hstep__img{box-shadow:none}
.v2 .hstep__img img{width:100%;height:100%;object-fit:cover}
/* Кадр шага не раскладывается, пока до него далеко (content-visibility; высоту держит aspect-ratio — сдвигов нет):
   ленивые кадры 4 × 11–18 КБ не делят канал с LCP услуги (в лаборатории порог ленивой загрузки — 5000 px). */
.v2 .hstep__img{content-visibility:auto}
.v2 .hstep__n{position:absolute;left:var(--s-2);top:var(--s-2);display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);
  background:var(--card);font:600 var(--t-ui)/1 var(--f-d);color:var(--ink)}
.v2 .hstep__when{font-size:var(--t-s);font-weight:600;color:var(--acc-ink)}
.v2 .hstep__t{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .hstep__text{color:var(--ink-2);text-wrap:pretty}
/* Ссылка и жирный в тексте шага (разрешены в how через wp_kses): строчная
   ссылка DESIGN §4, цель 44 px полями строчного элемента (от кегля, не от интерлиньяжа);
   длинная почта переносится. */
.v2 .hstep__text a{padding-block:calc((var(--tap) - 1em) / 2);color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:var(--ul-off);overflow-wrap:anywhere}
.v2 .hstep__text a:hover{color:var(--acc-ink)}
.v2 .hstep__text b,.v2 .lead-form__alt b{font-weight:600;color:var(--ink)}
.v2 .how__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.v2 .how__cta p{font-size:var(--t-s);color:var(--ink-2);text-wrap:balance}
/* Счётчик и стрелки ленты шагов (до 900 px; how.php, общий [data-rail] из v2.js): вплотную к ленте, как у уровней. */
.v2 .hsteps__bar{margin-bottom:calc(var(--s-3) - var(--s-4))}
.v2:not(.js) .hsteps__bar{display:none}
@media (min-width:600px){.v2 .hsteps__bar{margin-bottom:calc(var(--s-3) - var(--s-5))}}
/* Телефон (до 600 px, заказчик 27.10: без горизонтальной ленты): шаги столбиком. Строка шага — кадр 4:3 шириной
   --read-thumb слева от даты и названия, текст во всю ширину под ними: у каждого этапа своя картинка, не на всю
   ширину (решение 29.09 №3). Номер шага — кружок --s-4 в углу миниатюры. Счётчик и стрелки скрыты. С 600 px — лента. */
@media (max-width:599px){
  .v2 .hsteps{grid-auto-flow:row;grid-auto-columns:auto;gap:var(--s-4);overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .v2 .hstep:has(>.hstep__img){grid-template-columns:var(--read-thumb) minmax(0,1fr);column-gap:var(--s-3);row-gap:var(--s-0)}
  .v2 .hstep>.hstep__img{grid-row:1 / span 2;grid-column:1;align-self:start;margin-bottom:0}
  .v2 .hstep:has(>.hstep__img)>:is(.hstep__when,.hstep__t){grid-column:2}
  .v2 .hstep:has(>.hstep__img)>.hstep__when{align-self:end}
  .v2 .hstep:has(>.hstep__img)>.hstep__t{align-self:start;font-size:var(--t-ui);line-height:1.3}
  .v2 .hstep:has(>.hstep__img)>.hstep__text{grid-column:1 / -1;margin-top:var(--s-1)}
  .v2 .hstep:has(>.hstep__img):not(:has(>.hstep__when))>.hstep__t{grid-row:1 / span 2;align-self:center}
  .v2 .hstep__n{left:var(--s-0);top:var(--s-0);width:var(--s-4);height:var(--s-4);font-size:var(--t-s)}
  .v2 .rail-bar.hsteps__bar{display:none}
}
@media (min-width:900px){
  .v2 .hsteps{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .v2 .rail-bar.hsteps__bar{display:none}
  .v2 .how__cta p{max-width:none}
}








.v2 .tech__tab[aria-selected="true"] .chip{background:color-mix(in srgb,var(--card) 16%,transparent);color:var(--card)}



.v2 .tech__tab[aria-selected="true"] .tech__from{color:var(--card)}


.v2 .tech__tab:not([aria-selected="true"]):hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}






























.v2 .rail-bar.rail-bar--plain{padding-top:0;border-top:0}


@media (min-width:900px){
  
  
  
  
  
  
  .v2 .tech__tab:not([aria-selected="true"]):hover,.v2 .tech__more:hover{background:var(--linen)}
  
  
  
}
/* 900–1199: холст не шире 45 % контейнера — иначе строки техник с ценой (nowrap) выходят за экран. */


/* ═══ 7 · Разворот «Ремесло» ═════════════════════════════════════════ */
.v2 .craft{padding-block:var(--sec)}
.v2 .craft__head{display:grid;gap:var(--s-3);margin-bottom:var(--s-4)}
.v2 .craft__head .lead{max-width:var(--measure)}
.v2 .craft__in{display:grid;border-radius:var(--r-panel);overflow:hidden;background:var(--linen)}
/* До 900 px кадр 4:3: вертикальная заставка 4:5 занимала больше экрана, чем сами пункты. */
.v2 .craft__img{position:relative;aspect-ratio:3/2}
@media (min-width:600px){.v2 .craft__img{aspect-ratio:4/3}}
/* Пункты открыты на всех ширинах (заказчик 27.10: «важный контент не прятать в „+“»; до 27.10 на телефоне были
   свёрнутыми строками): заголовок b, пояснение под ним. Строка-переключатель .mat__sum скрыта, <details> всегда
   открыт (craft.php). На телефоне заголовок --t-ui и шаг --s-3 — четыре пункта плотнее. Кадр на телефоне 3:2
   (макро подрамника, лиц нет), 600–899 — 4:3. */
.v2 .mats{display:grid;gap:var(--s-3)}
.v2 .mats li{display:grid;gap:var(--s-0)}
.v2 .mats b{font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .mats span{font-size:var(--t-s);line-height:1.5;color:var(--ink-2);max-width:var(--measure)}
.v2 .mat>b{display:block;margin-bottom:var(--s-0)}
.v2 .mat>span{display:block}
.v2 .mat__sum{display:none}
@media (min-width:600px){
  .v2 .mats{gap:var(--s-4)}
  .v2 .mats b{font-size:var(--t-h3);line-height:1.25}
  .v2 .mats span{font-size:var(--t-ui);line-height:inherit}
}
/* Видео — фасад: заставка и пилюля «▶ Видео» в углу, не на кадре. */
.v2 .video{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;cursor:pointer}
.v2 .video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2 .video__cap{position:absolute;left:var(--s-3);bottom:var(--s-3);display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--tap);
  padding:0 var(--s-3) 0 var(--s-1);border-radius:var(--r-chip);background:var(--card);color:var(--ink);font:600 var(--t-ui)/1.2 var(--f-d);box-shadow:var(--shadow);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .video__play{display:grid;place-items:center;width:calc(var(--tap) - var(--s-1) * 2);height:calc(var(--tap) - var(--s-1) * 2);border-radius:var(--r-chip);background:var(--acc);color:var(--card)}
.v2 .video:focus-visible{outline:var(--focus-w) solid var(--acc);outline-offset:calc(var(--s-1) * -1)}
.v2 .video:hover .video__cap,.v2 .video:focus-visible .video__cap{background:var(--acc);color:var(--card)}
.v2 .video:hover .video__play,.v2 .video:focus-visible .video__play{background:var(--card);color:var(--acc)}
.v2 .video__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.v2 .craft__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2 .craft__say{display:grid;align-content:center;gap:var(--s-4);padding:var(--pad-panel)}
/* Видео студии — кнопкой под пунктами (13.10: подпись «Видео» на кадре подрамника не совпадала по смыслу с кадром).
   Пилюля --card на льне, слева круг --acc со стрелкой; по нажатию плеер встаёт на место кадра (v2.js). */
.v2 .craft__video{justify-self:start;display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--tap);padding:0 var(--s-3) 0 var(--s-1);
  border-radius:var(--r-chip);background:var(--card);color:var(--ink);font:600 var(--t-ui)/1.2 var(--f-d);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .craft__video:hover{background:var(--acc);color:var(--card)}
.v2 .craft__video:hover .video__play{background:var(--card);color:var(--acc)}
.v2 .craft__video[hidden]{display:none}
.v2 .craft__more{justify-self:start}
@media (min-width:900px){
  .v2 .craft__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .v2 .craft__img{aspect-ratio:auto;min-height:var(--craft-min-lg);order:2}
}

/* ── Общее для блоков выбора: пилюли и подписи рядов ───────────────── */
.v2 .pills{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.v2 .pill{position:relative;display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--tap);padding:0 var(--s-3);
  border-radius:var(--r-chip);background:var(--linen);color:var(--ink);font:600 var(--t-ui)/1.2 var(--f-d);white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .pill:hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .pill[aria-pressed="true"],.v2 .pill.is-on{background:var(--ink);color:var(--card)}
.v2 .band--butter .pill{background:var(--card)}
.v2 .band--butter .pill:hover{background:color-mix(in srgb,var(--ink) 8%,var(--card))}
.v2 .band--butter .pill[aria-pressed="true"],.v2 .band--butter .pill.is-on{background:var(--ink);color:var(--card)}
/* Невидимое поле даты поверх пилюли: кегль --t-ui (16 px), иначе iOS при нажатии увеличивает страницу
   (у поля даты в WebKit по умолчанию 11 px). */
.v2 .pill--date input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:var(--t-ui)}
.v2 .pill--date:focus-within{outline:var(--focus-w) solid var(--acc);outline-offset:var(--focus-off)}
.v2 .size__row{display:grid;gap:var(--s-1)}
.v2 .size__label{font-size:var(--t-s);font-weight:600;color:var(--ink-2)}

/* Блок, свёрнутый до 900 px в строку-сводку (05 уровни, 06 размер; DESIGN §4 «Раздел, свёрнутый только
   на узком экране»): действие Jost 600 --t-ui, под ним сводка --t-s --ink-2 (цены и размеры видны без
   открытия), плюс справа. От 900 px раскрыт, строки нет — десктоп как был. */
.v2 .fold__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--row);padding:var(--s-2) var(--s-4);
  border-radius:var(--r-btn);background:var(--linen);list-style:none;cursor:pointer}
.v2 .fold__sum::-webkit-details-marker{display:none}
.v2 .fold__what{display:grid;gap:var(--s-0);font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .fold__what small{font:400 var(--t-s)/1.5 var(--f-b);color:var(--ink-2)}
.v2 .fold[open]>.fold__sum{margin-bottom:var(--s-4)}
/* Свёрнутое тело не держит невидимые строки в раскладке (WebKit считал их рамки целями касания) и не грузит кадры. */
.v2 .fold:not([open])>:not(summary){display:none}

@media (min-width:900px){
  .v2 .fold__sum{display:none}
  .v2 .fold[open]>.fold__sum{margin-bottom:0}
}


.v2 .tiers__in{display:grid;gap:var(--s-4)}















.v2 .tiers__note{font-size:var(--t-s);line-height:1.5;color:var(--ink-2);max-width:var(--measure)}






























/* ═══ 12 · Что говорят заказчики: стена ══════════════════════════ */
.v2 .revs{padding-block:var(--band);background:var(--linen)}
.v2 .revs__in{display:grid;gap:var(--s-4)}
.v2 .revs__head{display:grid;gap:var(--s-2)}
/* Главный отзыв крупно (фото + цитата Jost), под ним лента всех остальных
   отзывов целиком: стрелки, счётчик, прокрутка пальцем. Отзывы прямо на льне. */
.v2 .rev{display:grid;gap:var(--s-3);align-content:start;margin:0}
.v2 .rev__body{display:grid;gap:var(--s-2);align-content:start}
.v2 .rev__photo{width:100%;height:auto;border-radius:var(--r-img);background:var(--linen)}
.v2 .rev--main .rev__photo{max-width:var(--rev-photo)}
/* Телефон: снимок главного отзыва 4:3 и не выше 44 % окна (лица в верхней трети кадра остаются), с 600 px — родная
   пропорция. Здесь исключение из «база — телефон»: отменить aspect-ratio шире нельзя — «auto» затирает
   пропорцию из атрибутов width/height, и ленивый снимок до загрузки вытягивается в столб. */
@media (max-width:599px){.v2 .rev--main .rev__photo{aspect-ratio:4/3;max-height:var(--rev-photo-sm);object-fit:cover;object-position:50% 30%}}
.v2 .rev--main .rev__quote p{font:500 var(--t-h3)/1.3 var(--f-d)}
.v2 .rev__quote{margin:0}
.v2 .rev__quote p{font:400 var(--t-body)/1.6 var(--f-b);text-wrap:pretty}
.v2 .rev__who{font-size:var(--t-s);color:var(--ink-2)}
.v2 .rev__who b{font:600 var(--t-ui)/1.3 var(--f-d);color:var(--ink)}
.v2 .rev-rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rail);gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;
  margin:calc(var(--s-1) * -1) calc(var(--gut) * -1);padding:var(--s-1) var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;list-style:none;align-items:start}
.v2 .rev-rail::-webkit-scrollbar{display:none}
.v2 .rev-rail>.rev{scroll-snap-align:start}
/* Телефон: снимок в ленте 4:3 (лица в верхней части кадра остаются), с 600 px — квадрат. */
.v2 .rev-rail .rev__photo{aspect-ratio:4/3;object-fit:cover;object-position:50% 20%}
/* Длинный отзыв — 6 строк на телефоне, 8 с 600 px, и «Читать целиком»: ряд ленты не вытягивается под самый длинный текст. */
.v2 .rev__quote--clamp p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:600px){
  .v2 .rev-rail .rev__photo{aspect-ratio:1;object-position:50% 30%}
  .v2 .rev__quote--clamp p{-webkit-line-clamp:8}
}
.v2 .rev.is-open .rev__quote--clamp p{display:block;overflow:visible}
.v2 .rev__more{justify-self:start;min-height:var(--tap);padding:0;font:600 var(--t-s)/1.2 var(--f-b);color:var(--acc);text-decoration:underline;text-underline-offset:var(--ul-off)}
.v2 .rev__more:hover{color:var(--acc-ink)}
/* Главный отзыв: полный текст по нажатию (решение заказчика №5), обычным кеглем под крупной фразой. */
.v2 .rev__full summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.v2 .rev__full summary::-webkit-details-marker{display:none}
.v2 .rev__full .rev__more-off,.v2 .rev__full[open] .rev__more-on{display:none}
.v2 .rev__full[open] .rev__more-off{display:inline}
.v2 .rev__full p{margin-top:var(--s-2);max-width:var(--measure);font:400 var(--t-body)/1.6 var(--f-b);color:var(--ink-2)}
/* Панель ленты: счётчик и стрелки. */
.v2 .rail-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--rule)}
.v2 .rail-bar__count{font:600 var(--t-ui)/1.2 var(--f-d);color:var(--ink-2)}
.v2 .rail-bar__nav{display:flex;gap:var(--s-1)}
.v2 .rail-btn{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);background:var(--card);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .rail-btn:hover:not(:disabled){background:var(--ink);color:var(--card)}
.v2 .rail-btn:disabled{opacity:.35;cursor:default}
.v2 .rail-btn--prev svg{transform:rotate(180deg)}
.v2:not(.js) .rail-bar__nav{display:none}
/* Телефон (до 600 px): главный отзыв — первой карточкой ленты (.revs--lead, reviews.php): крупная карточка
   скрыта, панель ленты сразу под заголовком, без линии. С 600 px — крупная карточка и лента без копии. */
.v2 .revs--lead .rev--main{display:none}
.v2 .revs--lead .rail-bar{padding-top:0;border-top:0;margin-bottom:calc(var(--s-3) - var(--s-4))}
@media (min-width:600px){
  .v2 .revs--lead .rev--main{display:grid}
  .v2 .rev-rail>.rev--lead{display:none}
  .v2 .revs--lead .rail-bar{padding-top:var(--s-4);border-top:1px solid var(--rule);margin-bottom:0}
  .v2 .rev--main{grid-template-columns:minmax(0,var(--rev-photo)) minmax(0,1fr);column-gap:var(--s-5);align-items:center}
  .v2 .rev-rail{grid-auto-columns:calc((100% - var(--s-4)) / 2)}
}
@media (min-width:1000px){
  .v2 .rev--main .rev__quote p{font:500 var(--t-phrase)/1.3 var(--f-d);letter-spacing:-.01em;max-width:var(--measure-s)}
  .v2 .rev-rail{grid-auto-columns:calc((100% - 2 * var(--s-4)) / 3);margin-inline:0;padding-inline:0;scroll-padding-inline:0}
}
/* Телефон (до 600 px, заказчик 27.10: «горизонтальный скролл важного контента — зло»): отзывы столбиком, без ленты,
   счётчика и стрелок. Карточка компактная: фото квадратом --read-thumb слева от имени и месяца, цитата во всю ширину
   (4 строки и «Читать целиком»). Видны три отзыва, остальные — пилюлей «Ещё N отзывов» здесь же (reviews.php,
   общий .works__more из v2.js) — все отзывы читаются на странице (решение 29.09 №5). С 600 px — прежняя лента. */
@media (max-width:599px){
  .v2 .rev-rail{grid-auto-flow:row;grid-auto-columns:auto;gap:var(--s-5);overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .v2 .rev-rail>.rev:has(>.rev__photo){grid-template-columns:var(--read-thumb) minmax(0,1fr);column-gap:var(--s-3);row-gap:var(--s-2);align-items:center}
  .v2 .rev-rail>.rev:has(>.rev__photo)>.rev__body{display:contents}
  .v2 .rev-rail .rev__photo{grid-row:1;grid-column:1;aspect-ratio:1;object-position:50% 25%}
  .v2 .rev-rail .rev__who{grid-row:1;grid-column:2}
  .v2 .rev-rail :is(.rev__quote,.rev__more){grid-column:1 / -1}
  .v2 .rev-rail .rev__quote--clamp p{-webkit-line-clamp:4}
  .v2 .revs .rail-bar{display:none}
  .v2.js .rev-rail:not(.is-open)>.rev--more{display:none}
  .v2 .revs__more--rail{order:1}
}
@media (min-width:600px){.v2 .revs__more--rail{display:none}}

/* ═══ 9 · Если что-то пойдёт не так ═════════════════════════════════ */
.v2 .promise{background:var(--ink);color:var(--card);padding-block:var(--band)}
.v2 .promise__in{display:grid;gap:var(--s-4)}
@media (min-width:600px){.v2 .promise__in{gap:var(--s-5)}}
/* Три обещания — списком на всех ширинах (13.10: на телефоне лента «1 из 3» прятала две гарантии за свайпом,
   а они короткие). Строка: иконка в круге слева, обещание в два тона, пояснение под ним. Тонкая линия
   --on-ink-rule — только между строками: над первой и под последней её нет, крайние строки без внешнего поля
   (DESIGN §4, §8.10). На телефоне иконка --tap, с 600 px крупнее; от 900 px — пояснение справа. */
.v2 .promise__list{display:grid;margin:0;padding:0;list-style:none}
.v2 .promise__item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:var(--s-3);row-gap:var(--s-1);padding-block:var(--s-4)}
.v2 .promise__item+.promise__item{border-top:1px solid var(--on-ink-rule)}
.v2 .promise__item:first-child{padding-top:0}
.v2 .promise__item:last-child{padding-bottom:0}
@media (min-width:600px){.v2 .promise__item{row-gap:var(--s-2)}}
.v2 .promise__icon{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);
  box-shadow:inset 0 0 0 1.5px var(--on-ink-3);color:var(--card)}
.v2 .promise__icon svg{width:60%;height:60%}
.v2 .promise__big{display:grid;margin:0;font:500 var(--t-phrase)/1.3 var(--f-d);letter-spacing:-.01em;text-wrap:balance}
.v2 .promise__big>span{text-wrap:balance}
.v2 .promise__icon{grid-row:span 2}
@media (min-width:600px){
  .v2 .promise__icon{width:calc(var(--tap) + var(--s-3));height:calc(var(--tap) + var(--s-3))}
}
.v2 .promise__if{color:var(--card)}
.v2 .promise__do{color:var(--on-ink-3)}
.v2 .promise__big--flip .promise__if{color:var(--on-ink-3)}
.v2 .promise__big--flip .promise__do{color:var(--card)}
.v2 .promise__text{color:var(--on-ink-2);max-width:var(--measure)}
@media (min-width:900px){
  .v2 .promise__in{gap:var(--s-6)}
  /* Обещания строками: крупное слева, пояснение справа по нижней линии. */
  .v2 .promise__item{grid-template-columns:auto minmax(0,6fr) minmax(0,5fr);column-gap:var(--s-5);align-items:center;padding-block:var(--s-5)}
  .v2 .promise__icon{grid-row:auto;width:calc(var(--tap) * 2);height:calc(var(--tap) * 2)}
}

/* ═══ 10 · Успеем к дате, доставка и оплата ═════════════════════════ */
.v2 .when__in{display:grid;gap:var(--s-3)}
@media (min-width:600px){.v2 .when__in{gap:var(--s-5)}}
.v2 .when__ask{display:grid;gap:var(--s-4);align-content:start}
.v2 .when__ask .lead{max-width:var(--measure)}
/* Панель срока плоская: тень на странице ниже только у заказ-наряда. */
.v2 .when__card{display:grid;gap:var(--s-2);align-content:start;padding:var(--pad-panel);border-radius:var(--r-panel);background:var(--card)}
.v2 .when__label{font-size:var(--t-s);color:var(--ink-2)}
.v2 .when__big{font:500 var(--t-h2)/1.08 var(--f-d);letter-spacing:-.015em}
.v2 .when__verdict{font-weight:600;color:var(--acc-ink)}
.v2 .when__verdict[data-ok="0"]{color:var(--ink)}
.v2 .when__verdict[data-ok=""]{font-weight:400;color:var(--ink-2)}
/* Факты цифрами, как в «Ремесле», без подложки: лён остаётся у строк наряда. */
.v2 .when__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4);margin:0}
.v2 .when__facts div{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-0);align-content:start}
.v2 .when__last{font-weight:600}
.v2 .when__facts dt{font-size:var(--t-s);color:var(--ink-2)}
.v2 .when__facts dd{margin:0;font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .when__facts small{display:block;margin-top:var(--s-0);font:400 var(--t-s)/1.5 var(--f-b);color:var(--ink-2)}
.v2 .when__note{font-size:var(--t-s);color:var(--ink-2)}
/* Телефон: цепочка срока свёрнута в строку (details), ответ уже в карточке; с 600 px — открыта, строки нет. */
.v2 .when__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--row);padding:0 var(--s-4);
  border-radius:var(--r-btn);background:var(--card);font:600 var(--t-ui)/1.3 var(--f-d);list-style:none;cursor:pointer}
.v2 .when__sum::-webkit-details-marker{display:none}
.v2 .when__chain[open]>.when__sum{margin-bottom:var(--s-4)}
/* Телефон: группа пилюль — одна строка с прокруткой (DESIGN §9б «Фильтры»), запас --s-1 под контур фокуса.
   Срок (город, дата) и фильтры работ; с 600 px — снова переносом. */
.v2 .when__ask .pills,.v2 .works__head .pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  margin:calc(var(--s-1) * -1) calc(var(--gut) * -1);padding:var(--s-1) var(--gut);scroll-padding-inline:var(--gut)}
.v2 .when__ask .pills::-webkit-scrollbar,.v2 .works__head .pills::-webkit-scrollbar{display:none}
.v2 .when__ask .pills>*,.v2 .works__head .pills>*{flex:0 0 auto}
/* Телефон, ряды навигации с прокруткой (заказчик 27.10): вкладки работ, фильтры выдачи, оглавление-пилюли,
   рубрики блога. Обрезка у края читается как «листается»: правый край ряда гаснет маской --s-5, хвост ряда —
   распоркой ::after (WebKit не считает padding-inline-end у прокручиваемого flex-ряда). Долистали до конца
   или ряд уместился — маски нет (.is-end, v2.js). Ряд до пяти пилюль переносится (ниже), без прокрутки. */
@media (max-width:599px){
  .v2 .works__head .pills{padding-right:0}
  .v2 .works__head .pills::after{content:'';flex:0 0 calc(var(--gut) - var(--s-1))}
  .v2 :is(.works__head .pills,.filters__pills,.toc__pills,.bchips__list){
    -webkit-mask-image:linear-gradient(to left,transparent,#000 var(--s-5));mask-image:linear-gradient(to left,transparent,#000 var(--s-5))}
  .v2 :is(.works__head .pills,.filters__pills,.toc__pills,.bchips__list).is-end{-webkit-mask-image:none;mask-image:none}
  /* До пяти пилюль (фильтры работ услуги, «По манере» хаба, короткое оглавление) — переносом, без прокрутки и маски. */
  .v2 .works__head .pills:not(:has(>:nth-child(6))),
  .v2 :is(.filters__pills,.toc__pills,.bchips__list):not(:has(>li:nth-child(6))){flex-wrap:wrap;overflow:visible;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
  .v2 .works__head .pills:not(:has(>:nth-child(6)))::after,
  .v2 :is(.filters__pills,.toc__pills,.bchips__list):not(:has(>li:nth-child(6)))::after{content:none}
}
@media (min-width:600px){
  .v2 .when__sum{display:none}
  .v2 .when__chain[open]>.when__sum{margin-bottom:0}
  .v2 .when__ask .pills,.v2 .works__head .pills{flex-wrap:wrap;overflow-x:visible;margin:0;padding:0}
}
@media (min-width:900px){
  .v2 .when__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--col-gap);row-gap:var(--s-4);align-items:start}
  .v2 .when__card{grid-column:2;grid-row:1}
  .v2 .when__chain{grid-column:1 / -1;grid-row:2;margin-top:var(--s-3)}
  .v2 .when__facts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:var(--s-5)}
  }
/* Телефон (заказчик 27.10: «чипы занимают много места, даты скроллить вбок, результат ниже экрана»).
   Выбор — сегменты во всю ширину, без прокрутки вбок: город по 2 в ряд, повод по 4 (уже 360 px — по 2),
   уровень по 3; подпись сегмента переносится в две строки --t-s. Высота сегмента — --tap (цель касания).
   Карточка ответа плотнее (поля --s-4, шаг --s-1): от H2 до кнопки «Рассчитать к этой дате» — один экран
   390×844 под шапкой, ответ виден сразу при переключении. С 600 px — прежние пилюли переносом. */
.v2 .when .when__ask{gap:var(--s-3)}
.v2 .when .when__ask .pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0}
.v2 .when #wTiers{grid-template-columns:repeat(3,minmax(0,1fr))}
.v2 .when .when__ask .pill{justify-content:center;gap:var(--s-0);min-width:0;padding:0 var(--s-1);font-size:var(--t-s);line-height:1.15;
  white-space:normal;text-align:center;text-wrap:balance}
.v2 .when .when__ask .lead{font-size:var(--t-s);line-height:1.5}
.v2 .when .when__card{gap:var(--s-1);padding:var(--s-4);line-height:1.4}
/* Своя дата шире (1.4 доли): выбранная дата «30 сентября» неразрывна; значок календаря у выбранной даты скрыт. */
.v2 .when .pill--date.is-on svg{display:none}
.v2 .when #wDates .pill{padding-inline:var(--s-0)}
@media (min-width:360px){.v2 .when #wDates{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr)}}
@media (min-width:600px){
  .v2 .when .when__ask{gap:var(--s-4)}
  .v2 .when .when__ask .pills{display:flex;flex-wrap:wrap}
  .v2 .when .when__ask .pill{justify-content:flex-start;gap:var(--s-1);padding:0 var(--s-3);font-size:var(--t-ui);line-height:1.2;white-space:nowrap;text-align:start}
  .v2 .when .when__ask .lead{font-size:var(--t-lead);line-height:1.55}
  .v2 .when .pill--date.is-on svg{display:revert}
  .v2 .when #wDates .pill{padding-inline:var(--s-3)}
  .v2 .when .when__card{gap:var(--s-2);padding:var(--pad-panel);line-height:1.6}
}


.v2 .ticket__top{display:flex;align-items:center;gap:var(--s-3)}







.v2 .ticket__row--ctl dd{padding-top:var(--s-1)}




.v2 .ticket__hint--row{flex-basis:100%;margin-top:0}
.v2 .ticket__price{font-size:var(--t-s);color:var(--ink-2)}


.v2 .seg button{min-height:var(--tap);padding:0 var(--s-1);white-space:nowrap;border-radius:var(--r-chip);font:600 var(--t-s)/1.2 var(--f-d);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .seg button:hover{background:var(--linen)}
.v2 .seg button[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.v2 .step{display:inline-flex;align-items:center;gap:var(--s-1)}
.v2 .step button{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);background:var(--card);font:600 var(--t-h3)/1 var(--f-d)}
.v2 .step button[aria-disabled="true"]{color:color-mix(in srgb,var(--ink) 35%,var(--card));cursor:default}
.v2 .step output{min-width:3ch;text-align:center;font:600 var(--t-num)/1 var(--f-d)}


.v2 .ticket__total{font:500 var(--t-h2)/1.08 var(--f-d);letter-spacing:-.015em}

/* Колонка формы — minmax(0,1fr): при крупном шрифте (×2) пилюля «Прикрепить фото» не раздувает колонку шире
   карточки, и страница на телефоне не уезжает вбок (аудит 13.10). */
.v2 .lead-form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-content:start}
.v2 .drop{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:var(--s-2) var(--s-3);padding:var(--s-3);
  border-radius:var(--r-btn);background:var(--linen);cursor:pointer;transition:background-color var(--dur) var(--ease)}
.v2 .drop:hover,.v2 .drop.is-over{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .drop:focus-within{outline:var(--focus-w) solid var(--acc);outline-offset:var(--focus-off)}
.v2 .drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
/* Телефон: компактная строка — название и кнопка (после выбора — миниатюра) в ряд, пояснение под ними. */
.v2 .drop{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t act" "n n";gap:var(--s-1) var(--s-3)}
.v2 .drop__frame{display:contents}
.v2 .drop__say{order:-1}
.v2 .drop__say b{grid-area:t}
.v2 .drop__say span{grid-area:n}
.v2 .drop__pick,.v2 .drop__img{grid-area:act}
.v2 .drop__pick{display:inline-flex;align-items:center;gap:var(--s-1);justify-self:start;min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-btn);
  background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink-2);font:600 var(--t-ui)/1.2 var(--f-d);white-space:nowrap}
.v2 .drop__img{width:var(--thumb);aspect-ratio:4/5;height:auto;border-radius:var(--r-btn);object-fit:cover}
.v2 .drop.has-file .drop__pick{display:none}
.v2 .drop__say{display:contents}
.v2 .drop__say b{font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .drop__say span{font-size:var(--t-s);color:var(--ink-2)}
/* Зона фото: файл не подошёл (не JPG/PNG/WebP/HEIC или больше 20 МБ, v2.js) — пояснение цветом ошибки формы. */
.v2 [data-upload].is-bad [data-upload-note]{color:var(--err);font-weight:600}
.v2 .lf-att.is-bad .lf-att__note{display:inline;white-space:normal}
.v2 .field{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
.v2 .field label{display:flex;align-items:center;min-height:var(--s-4);font-size:var(--t-s);font-weight:600}
/* «по желанию» у необязательного поля (почта при обязательном телефоне, 27.10) */
.v2 .field__opt{margin-left:var(--s-1);font-weight:400;color:var(--ink-2)}
.v2 .field input{min-width:0;min-height:var(--btn-h);padding:0 var(--s-3);border:1.5px solid var(--ink-2);border-radius:var(--r-btn);
  background:var(--card);color:var(--ink);font:inherit}
.v2 .field input:focus-visible{outline:var(--focus-w) solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.v2 .field input[aria-invalid="true"]{border:2px solid var(--err)}
.v2 .field input::placeholder,.v2 .field textarea::placeholder{color:var(--ink-2);opacity:1}
.v2 .field__err{font-size:var(--t-s);font-weight:600;color:var(--err)}
/* Поле «Телефон или почта»: над ним пилюли «Телефон | Почта» (тип поля и клавиатура по выбору, v2.js).
   Без скрипта их нет: поле текстовое и принимает и то и другое. */
.v2 .lead-how{margin-block:var(--s-0)}
.v2:not(.js) .lead-how{display:none}
/* Между строками согласий --s-3: цель ссылки 44 px выходит за строку на (--tap − 1lh) / 2 − --s-1 ≈ 3,5 px
   с каждой стороны, и при --s-1 цели ссылок соседних согласий стояли в 2 px друг от друга (правило 8 px). */
.v2 .agree{display:grid;gap:var(--s-3);margin:0;padding:0;border:0;min-width:0}
/* Между целью флажка (--tap, выходит за квадрат на --pad) и ссылкой в тексте — не меньше --s-1 (правило 8 px). */
.v2 .agree__row{--pad:calc((var(--tap) - var(--check)) / 2);overflow-wrap:break-word;display:grid;grid-template-columns:var(--check) minmax(0,1fr);align-items:start;gap:calc(var(--pad) + var(--s-1));min-height:var(--tap);padding-block:var(--s-1);
  font-size:var(--t-s);color:var(--ink-2);cursor:pointer}
/* Флажок: виден квадрат --check с контуром как у поля, отмеченный — акцент с белой галкой. Цель касания —
   --tap: прозрачная рамка вокруг квадрата (border), отрицательные поля возвращают строке прежнюю раскладку.
   Контур квадрата — внутренняя тень по краю рамки, радиус квадрата — --r-check. */
.v2 .agree__row input{--pad:calc((var(--tap) - var(--check)) / 2);appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;
  width:var(--tap);height:var(--tap);margin:calc(var(--pad) * -1);border:var(--pad) solid transparent;border-radius:calc(var(--r-check) + var(--pad));
  background:var(--card) center/var(--ico) no-repeat;background-clip:padding-box;background-origin:padding-box;box-shadow:inset 0 0 0 1.5px var(--ink-2);cursor:pointer;
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.v2 .agree__row input:focus-visible{outline-offset:calc(var(--pad) * -1 + var(--focus-off))}
.v2 .agree__row input:checked{box-shadow:inset 0 0 0 1.5px var(--acc);background-color:var(--acc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Цель касания 44 px без раздувания строки: поля внутрь, отрицательный отступ наружу. */
.v2 .agree__row a,.v2 .lead-sec__contacts a{display:inline-block;padding-block:calc((var(--tap) - 1lh) / 2);margin-block:calc((1lh - var(--tap)) / 2);
  color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:var(--ul-off)}
/* Ссылка в строке под кнопкой (alt, разрешена через wp_kses): строчная, не inline-block —
   иначе запятая после неё переносится в начало строки; адрес не рвётся, цель 44 px полями. */
.v2 .lead-form__alt a{padding-block:calc((var(--tap) - 1em) / 2);color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:var(--ul-off);white-space:nowrap}
.v2 .agree__miss{font-size:var(--t-s);font-weight:600;color:var(--err)}
/* Мышь и тачпад (pointer:fine): пальцем не нажимают — квадрат --check-d 18 px, радиус --r-check-d, цель = квадрат,
   без невидимых полей 44 px; строки согласий плотнее (--s-2), флажок по первой строке текста. Касание (телефон,
   планшет) — как выше: --check 24 px и цели --tap. Правило заказчика 01.10: «на десктопе чекбоксы громадные». */
@media (hover:hover) and (pointer:fine){
  .v2 .agree{--check:var(--check-d);--tap:var(--check-d);gap:var(--s-2)}
  .v2 .agree__row{align-items:start;gap:var(--s-2);min-height:0;padding-block:0;line-height:1.5}
  .v2 .agree__row input{margin:calc((var(--t-s) * 1.5 - var(--check)) / 2) 0 0;border:0;border-radius:var(--r-check-d)}
  .v2 .agree__row input:focus-visible{outline-offset:2px}
  .v2 .agree__row a{display:inline;padding-block:0;margin-block:0}
}
.v2 .lead-form .btn{width:100%}
.v2 .lead-form__alt{font-size:var(--t-s);color:var(--ink-2);text-wrap:pretty}
.v2 .lead-form__done{font:600 var(--t-h3)/1.25 var(--f-d)}
@media (min-width:900px){
  
  
  
  .v2 .ticket__row--ctl dd{padding-top:0}
  .v2 .ticket__row--ctl dt{align-self:start;padding-top:calc((var(--tap) + 2 * var(--s-0) - 1lh) / 2)}
  
  
  
}

/* ═══ 12 · Частые вопросы ══════════════════════════════════════════ */
.v2 .faq{padding-block:var(--sec-near)}
.v2 .faq__in{display:grid;gap:var(--s-4)}
.v2 .faq__head{display:grid;gap:var(--s-3);align-content:start;justify-items:start}
.v2 .faq__head .lead{max-width:var(--measure-s)}
.v2 .faq__list{display:grid;gap:var(--s-1)}
.v2 .qa{border-radius:var(--r-btn);background:var(--linen)}
.v2 .qa__q{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3);min-height:var(--row);padding:var(--s-2) var(--s-4);
  font:600 var(--t-body)/1.4 var(--f-d);list-style:none;cursor:pointer;border-radius:var(--r-btn)}
.v2 .qa__q::-webkit-details-marker{display:none}
.v2 .qa__pm{position:relative;width:var(--ico);height:var(--ico)}
.v2 .qa__pm::before,.v2 .qa__pm::after{content:'';position:absolute;left:0;top:calc(50% - var(--line) / 2);width:100%;height:var(--line);border-radius:var(--r-chip);background:currentColor;
  transition:transform var(--dur) var(--ease)}
.v2 .qa__pm::after{transform:rotate(90deg)}
.v2 .qa[open] .qa__pm::after,.v2 details[open]>summary .qa__pm::after{transform:rotate(0)}
/* Плюс в строке-переключателе свёрнутого на телефоне раздела (подвал, расчёт, ремесло, срок, оплата) — тот же, что у вопросов. */
.v2 summary .qa__pm{flex:0 0 auto}
.v2 .qa__a{padding:0 var(--s-4) var(--s-4);color:var(--ink-2);max-width:var(--measure)}
/* «Все вопросы и ответы»: до 900 px — после списка (дочитал — перешёл), копия в левой колонке скрыта;
   от 900 px — наоборот. Видна всегда одна, порядок фокуса совпадает с видимым. */
.v2 .faq__more--head{display:none}
@media (min-width:900px){
  .v2 .faq__in{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--col-gap);align-items:start}
  .v2 .faq__head{position:sticky;top:calc(var(--hdr) + var(--s-5))}
  .v2 .qa__q{min-height:calc(var(--row) + var(--s-2));padding:var(--s-3) var(--s-4);font-size:var(--t-lead)}
  .v2 .qa__a{font-size:var(--t-body);max-width:var(--measure-l)}
  .v2 .faq__more--head{display:inline-flex}
  .v2 .faq__more--after{display:none}
  /* layout 'solo' (faq--stack): заголовок над списком в одной колонке — не липнет. */
  .v2 .faq--stack .faq__head{position:static}
}

/* ═══ 13 · Идеи подарков к поводу ═══════════════════════════════════ */
.v2 .reads{padding-block:var(--sec-near) var(--sec)}
.v2 .reads__in{display:grid;gap:var(--s-4)}
.v2 .reads__head{display:flex;align-items:end;justify-content:space-between;gap:var(--s-3)}
/* Четыре статьи в ряд: крупная обложка 4:3, заголовок до трёх строк (аудит 13.10: в две обрезался многоточием), дата.
   На телефоне — лента вбок. РЕШЕНИЕ ЗАКАЗЧИКА 29.09 («4 колонки, картинка + название») — не менять
   без его согласия (criteria.md, «Утверждено заказчиком»). */
.v2 .reads__row{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rail);gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
  margin:calc(var(--s-1) * -1) calc(var(--gut) * -1);padding:var(--s-1) var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;list-style:none}
.v2 .reads__row::-webkit-scrollbar{display:none}
/* Все ленты с прокруткой вбок не передают свайп странице (жест «назад» в Safari у края ленты): mobile-rules §2. */
.v2 :is(.pills,.reads__row,.posts,.hub-tri,.hub-alts__list,.hub-fr-rail,.xr-rail,.mats,.ord-film__list,.bchips__list,.hsteps,.tech__rail,.tiers__row,.rev-rail,.works__grid){overscroll-behavior-x:contain}
/* Общие правила карточки статьи (.read — ещё и сетка статей блога и поиск, template-parts/v2/page/posts-grid.php). */
.v2 .read{scroll-snap-align:start}
.v2 .read__a{display:grid;gap:var(--s-2);align-content:start}
.v2 .read__cover{display:block;aspect-ratio:4/3;border-radius:var(--r-img);overflow:hidden;background:var(--linen)}
.v2 .read__cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-img) var(--ease)}
.v2 .read__a:hover .read__cover img{transform:scale(1.03)}
.v2 .read__t{font:600 var(--t-body)/1.4 var(--f-d);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v2 .read__a:hover .read__t{text-decoration:underline;text-underline-offset:var(--ul-off)}
.v2 .read__date{font-size:var(--t-s);color:var(--ink-2)}
@media (min-width:900px){
  .v2 .reads__row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);overflow:visible;margin:0;padding:0}
}
/* Телефон (до 600 px, заказчик 27.10: карусели статей — в вертикальный компактный вид): те же карточки (обложка 4:3,
   заголовок, дата — вид по решению 29.09), четыре статьи сеткой 2 × 2 без ленты, счётчика и стрелок; дальше —
   «Все статьи» под сеткой. Заголовок --t-s в колонке 2 × 155 px. С 600 px — прежняя лента. */
@media (max-width:599px){
  .v2 .reads__row{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3);
    overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .v2 .reads__row>.read:nth-child(n+5){display:none}
  .v2 .reads__row .read__t{font-size:var(--t-s)}
  .v2 .reads__bar{display:none}
}
/* Стрелки и счётчик «1–4 из 12» (правка 01.10, п. 11; общий .rail-bar и data-rail из v2.js): в строке заголовка
   справа, до 600 px — строкой под заголовком (счётчик слева, стрелки справа, как у техник). Карточки и сетка прежние:
   от 900 px при 5+ статьях тот же ряд из 4 колонок (ширина карточки = колонка сетки), остальные за краем ряда,
   стрелка сдвигает ряд на 4 (data-rail-page). Поля --s-1 при отрицательных полях — место под контур фокуса,
   раскладка не сдвигается. При 4 статьях и меньше от 900 px панели нет — листать нечего. */
.v2 .reads__head{flex-wrap:wrap}
.v2 .reads__bar{flex:1 1 100%}
@media (min-width:600px){.v2 .reads__bar{flex:0 0 auto}}
@media (min-width:900px){
  .v2 .reads__bar--few{display:none}
  
}

/* ── Подвал ───────────────────────────────────────────────────────── */
/* Правки 01.10 — компактный подвал: знак соразмерен шапке (--logo-ftr), под ним слоган и год, соцсети
   одной строкой; контакты короткими строками, основной номер крупнее; адреса и пометка об Instagram —
   мелко в нижней строке с реквизитами. Поле сверху — --band, как внутри любой тёмной полосы (DESIGN §5). */
.v2 .ftr{background:var(--ink);color:var(--on-ink-2);padding-block:var(--band) calc(var(--s-5) + env(safe-area-inset-bottom));font-size:var(--t-s)}
/* Телефон: знак и слоган в строку, соцсети под ними; меню — свёрнутые разделы (details) сеткой 2 × 2
   (половина ширины хватает самым длинным пунктам; раскрытая растёт в своей колонке), контакты открыты. */
.v2 .ftr__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4);row-gap:var(--s-1);align-items:start}
.v2 .ftr__about{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-2) var(--s-3)}
.v2 .ftr__logo{justify-self:start;display:inline-flex;color:var(--card)}
.v2 .ftr__mark{display:block;height:var(--logo-ftr);width:auto}
.v2 .ftr__tag{font:500 var(--t-ui)/1.4 var(--f-b);color:var(--card);text-wrap:balance}
.v2 .ftr__tag span{display:block;font-size:var(--t-s);font-weight:400;color:var(--on-ink-3)}
.v2 .ftr__soc{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3)}
.v2 .ftr__soc a{justify-content:center}
.v2 .ftr__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--row);
  font:600 var(--t-ui)/1.2 var(--f-d);color:var(--card);list-style:none;cursor:pointer}
.v2 .ftr__sum::-webkit-details-marker{display:none}
/* Шеврон вместо плюса (27.10): --ico, приглушён до --on-ink-2, у раскрытой колонки повёрнут на 180° (--dur). */
.v2 .ftr__chev{flex:0 0 auto;width:var(--ico);height:var(--ico);color:var(--on-ink-2);transition:transform var(--dur) var(--ease)}
.v2 .ftr__grp[open]>.ftr__sum .ftr__chev{transform:rotate(180deg)}
.v2 .ftr__grp>.ftr__h{display:none}
/* Свёрнутая колонка не держит невидимые пункты в раскладке: WebKit считал их рамки поверх контактов. */
.v2 .ftr__grp:not([open])>.ftr__menu{display:none}
.v2 .ftr__grp[open]>.ftr__menu{padding-bottom:var(--s-3)}
.v2 .ftr__col--contacts{grid-column:1 / -1;margin-top:var(--s-4)}
.v2 .ftr__h{margin-bottom:var(--s-1);font:600 var(--t-ui)/1.2 var(--f-d);color:var(--card)}
/* До 900 px (тач) строки-ссылки по 44 px не стоят вплотную: между целями --s-1 (mobile-rules §2);
   от 900 px — строки без промежутка. */
.v2 .ftr__menu{display:grid;row-gap:var(--s-1)}
.v2 .ftr__menu li{color:var(--on-ink-3)}
.v2 .ftr__menu li>span{white-space:nowrap}
/* Контакты в подвале (аудит 13.10, WCAG 1.4.1): подпись у номера («мастерская в Казани», «Телеграм и WhatsApp») — своей
   строкой под ним, как у основного номера; ссылки колонки (номера, почта, «Можно приехать…») подчёркнуты тонкой линией
   --on-ink-line — одного вида и отличаются от соседнего текста не только цветом. Наведение — линия цвета текста. */
.v2 .ftr__cnt li>span{display:block}
/* Часы мастерской и пояснение под ссылкой — переносятся (подписи номеров выше — одной строкой); часы целиком (.nw). */
.v2 .ftr__cnt li>.ftr__visit-note{white-space:normal;text-wrap:pretty}
.v2 .ftr__cnt a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--on-ink-line);text-underline-offset:var(--ul-off-l)}
.v2 .ftr__cnt a:hover{text-decoration-color:currentColor}
.v2 .ftr a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);color:var(--card)}
.v2 .ftr a:hover{text-decoration:underline;text-underline-offset:var(--ul-off)}
.v2 .ftr__menu a{overflow-wrap:anywhere}
/* Основной номер — Jost 600 --t-h3 (цифры — роль Jost), под ним «бесплатно по России» и часы. */
.v2 .ftr__main{display:grid;justify-items:start}
.v2 .ftr__main a{font:600 var(--t-h3)/1.25 var(--f-d);letter-spacing:-.01em}
.v2 .ftr__main small{font-size:var(--t-s);color:var(--on-ink-3);text-wrap:balance}
/* Заголовок колонки-ссылка («3D-фигурки»): цель 44 px, но текст на одной линии с соседними заголовками. */
.v2 .ftr__h a{margin-block:calc((1.2em - var(--tap)) / 2)}
/* Нижняя строка: документы строкой с переносом, под ними мелко реквизиты, адреса и пометка об Instagram. */
.v2 .ftr__legal{display:grid;gap:var(--s-1);margin-top:var(--s-5);color:var(--on-ink-3)}
.v2 .ftr__legal p{text-wrap:pretty}
.v2 .ftr__menu--row{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-bottom:var(--s-1)}
.v2 .ftr__menu--row a{color:var(--on-ink-2)}
@media (min-width:600px){
  /* Планшет (600–899): четыре колонки меню в ряд, контакты под ними в две колонки — не простыня в два столбца. */
  .v2 .ftr__cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
  .v2 .ftr__about{margin-bottom:0}
  .v2 .ftr__sum,.v2 .ftr__sm{display:none}
  .v2 .ftr__grp>.ftr__h{display:block}
  .v2 .ftr__grp[open]>.ftr__menu{padding-bottom:0}
  .v2 .ftr__col--contacts{margin-top:0}
  .v2 .ftr__cnt{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4);align-items:start}
}
/* 900–1199: знак, слоган и соцсети строкой сверху, пять колонок под ней; шесть колонок
   в ряд помещаются только от 1200 px (на 900–980 контакты выходили за экран). */
@media (min-width:900px){
  .v2 .ftr__cols{grid-template-columns:repeat(5,minmax(0,1fr))}
  .v2 .ftr__about{grid-template-columns:auto auto minmax(0,1fr)}
  .v2 .ftr__soc{grid-column:auto;justify-self:end}
  .v2 .ftr__col--contacts{grid-column:auto}
  .v2 .ftr__cnt{grid-template-columns:minmax(0,1fr)}
  .v2 .ftr__menu,.v2 .ftr__menu--row{row-gap:0}
  .v2 .ftr__legal{gap:var(--s-0)}
}
/* Нижняя панель действия .dock (до 900 px): плотные сливки --paper без размытия (как шапка до 900 px; размытие
   на телефоне только нагружало отрисовку, аудит 13.10), без линии, одна кнопка
   во всю ширину. На главной «Рассчитать стоимость» появляется, когда человек листает вверх ниже первого
   экрана; на других страницах (включает шаблон, footer-v2.php) — как только ушёл первый экран. Уходит у
   расчёта, заявки, цели кнопки, подвала и при открытой клавиатуре (класс is-on ставит v2.js).
   Движение — только transform и opacity. Пока панель видна, якоря и фокус не прячутся под неё. */
.v2 .dock{position:fixed;inset:auto 0 0;z-index:38;padding:var(--s-2) var(--gut) calc(var(--s-2) + env(safe-area-inset-bottom));
  background:var(--paper);
  opacity:0;visibility:hidden;transform:translateY(100%);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.v2 .dock.is-on{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s}
.v2 .dock__btn{width:100%}
html:has(.dock.is-on){scroll-padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom))}
.v2:not(.js) .dock{display:none}
/* Открыта панель меню — нижней панели нет (и она inert, v2.js): под меню не мелькает вторая кнопка. */
.v2:has(.pnl.on) .dock{opacity:0;visibility:hidden;transform:translateY(100%)}
@media (min-width:900px){.v2 .dock{display:none}html:has(.dock.is-on){scroll-padding-bottom:0}}
/* Альбомная ориентация телефона (окно ниже 500 px): панель 78 px закрывала четверть экрана — её нет,
   шапка там тоже не липнет (§5). */
@media (max-height:500px){.v2 .dock{display:none}html:has(.dock.is-on){scroll-padding-bottom:0}}
@media (min-width:1200px){
  /* Шесть колонок: знак со слоганом и соцсетями — первой колонкой, контактам шире (почта не рвётся посередине). */
  .v2 .ftr__cols{grid-template-columns:minmax(0,3fr) repeat(4,minmax(0,2fr)) minmax(0,3fr)}
  .v2 .ftr__about{grid-column:auto;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--s-2)}
  /* В узкой первой колонке четыре подписи в строку не встают — ровной сеткой 2 × 2, а не переносом «хвостом». */
  .v2 .ftr__soc{justify-self:start;display:grid;grid-template-columns:repeat(2,max-content);gap:0 var(--s-4)}
  .v2 .ftr__soc a{justify-content:start}
}

/* ═══ 06 · Таблица размеров — она же переключатель ═════════════════ */
/* Телефон: размеры плитками 2×2 (размер, цена, назначение столбиком) — таблица не тянется
   на четыре строки. С 600 px — строки таблицы в три колонки. */
.v2 .sizes{display:grid;gap:var(--s-1);margin:0;padding:0}


.v2 .sizes__row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b em" "note note";align-items:baseline;gap:var(--s-0) var(--s-3);min-height:var(--row);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-btn);background:var(--linen);text-align:left;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .size .sizes__row{grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "em" "note";align-content:start}
.v2 .sizes__row b{grid-area:b;font:600 var(--t-ui)/1.2 var(--f-d);white-space:nowrap}
.v2 .sizes__row span{grid-area:note;font-size:var(--t-s);color:var(--ink-2)}
.v2 .sizes__row em{grid-area:em;font:600 var(--t-s)/1.2 var(--f-d);white-space:nowrap}
@media (min-width:600px){
  
  .v2 .sizes__row,.v2 .size .sizes__row{grid-template-columns:var(--size-col) minmax(0,1fr) auto;grid-template-areas:none;column-gap:var(--s-3)}
  
  .v2 .sizes__row b,.v2 .sizes__row span,.v2 .sizes__row em{grid-area:auto}
}
.v2 .sizes__row:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .sizes__row[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.v2 .sizes__row[aria-pressed="true"] span{color:var(--on-ink-2)}


/* Широкий экран: стена слева, выбор справа — смена холста видна без прокрутки. */























@media (min-width:900px){
  .v2 .sizes__row em{font-size:var(--t-ui)}
  
  
  
  
}

@media (max-width:599px){.v2 .btn{white-space:normal;text-wrap:balance}}
@media (max-width:599px){
  
  .v2 .agree__row .nw{white-space:normal}
}





.v2 .calc__dots li.is-on{background:var(--acc)}













.v2 #calcTermHint{font-weight:600;color:var(--acc-ink)}



.v2 .seg--4{grid-template-columns:repeat(4,minmax(0,1fr))}







/* Кадр повода: на телефоне 4:3 — первый шаг наряда не выше остальных на полторы строки; с 600 px — квадрат, как был. */



/* ═══ 08 · Работы у заказчиков: кладка ══════════════════════════════ */
.v2 .works{padding-block:var(--sec)}
.v2 .works__in{display:grid;gap:var(--s-4)}
.v2 .works__head{display:grid;gap:var(--s-3)}
/* Телефон (заказчик 27.10: «горизонтальный скролл важного контента — зло»): сетка 2 колонки, кадр целиком
   в родной пропорции (без обрезки), видны первые 6 (more_after), остальные — пилюлей «Показать ещё N» здесь же
   (works.php, общий .works__more из v2.js; фильтр сюжета показывает все сразу). С 600 px — сетка 2 колонки
   без кнопки, от 900 — 5×2, как было. */
/* Общая сетка (.works__grid — ещё и сетка вариантов доп. услуг, pages/extra.css): 2 колонки. */
.v2 .works__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-2);margin:0;padding:0;list-style:none}
.v2 .works .works__grid{align-items:start}
@media (max-width:599px){.v2.js .works .works__grid:not(.is-open)>.work--more{display:none}}
.v2 .work figure{display:grid;gap:var(--s-1);margin:0}
.v2 .work[hidden]{display:none}
/* Пилюля «Ещё N …» / «Показать ещё N» до 600 px — у стены отзывов (режим wall) и у сетки работ. */
.v2 .works__more{justify-self:start;background:var(--linen)}
.v2:not(.js) .works__more{display:none}
@media (max-width:599px){.v2 .works .works__more{justify-self:stretch;justify-content:center}}
@media (min-width:600px){
  .v2 .works__more{display:none}
}
.v2 .works__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.v2 .works__price{flex-basis:100%;font-size:var(--t-s);color:var(--ink-2)}
.v2 .works__price b{font:600 var(--t-num)/1.1 var(--f-d);color:var(--ink)}
@media (max-width:599px){.v2 .works__foot .btn{flex:1 1 100%}}
.v2 .work img{width:100%;height:auto;border-radius:var(--r-img);background:var(--linen)}
.v2 .work__cap{font-size:var(--t-s);color:var(--ink-2)}
@media (min-width:900px){
  .v2 .works__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s-3) var(--col-gap)}
  .v2 .works .works__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3)}
}

/* ═══ 13 · Доставка и оплата ═══════════════════════════════════════ */
.v2 .ship{padding-block:var(--sec)}
.v2 .ship__in{display:grid;gap:var(--s-5)}
.v2 .ship__col{display:grid;gap:var(--s-4);align-content:start}
.v2 .ship__rows{display:grid;gap:var(--s-3);margin:0}
/* Строки доставки и оплаты: своя иконка слева, тонкие линии между строками.
   Доставка — город и цена в линию, описание ниже. */
.v2 .ship__rows{display:grid;margin:0;border-bottom:1px solid var(--rule)}
.v2 .ship__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:var(--s-0) var(--s-3);padding-block:var(--s-3);border-top:1px solid var(--rule)}
.v2 .ship__icon{grid-row:span 2;align-self:start;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);background:var(--linen);color:var(--acc-ink)}
.v2 .ship__icon svg{width:var(--ico-l);height:var(--ico-l)}
.v2 .ship__row dt{align-self:center;font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .ship__row dd{margin:0}
.v2 .ship__price{align-self:center;text-align:right}
.v2 .ship__price b{font:600 var(--t-ui)/1.3 var(--f-d);color:var(--ink)}
.v2 .ship__how{grid-column:2 / -1;font-size:var(--t-s);color:var(--ink-2)}
.v2 .ship__pay{display:grid;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--rule)}
/* Способ оплаты — подпись строки, как город в доставке (Jost 600 --t-ui): одна подача у обоих списков,
   и главная не тянет три файла Manrope 500 ради четырёх строк (перф-бюджет телефона). */
.v2 .ship__pay li{display:flex;align-items:center;gap:var(--s-3);padding-block:var(--s-2);border-top:1px solid var(--rule);font:600 var(--t-ui)/1.3 var(--f-d);color:var(--ink)}
.v2 .ship__pay .ship__icon{grid-row:auto}
.v2 .ship__pre{font-weight:600;max-width:var(--measure)}
/* Телефон: способы оплаты свёрнуты в строку с иконкой-плюсом; с 600 px — открытый список без строки. */
.v2 .ship__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--row);padding:0 var(--s-4);
  border-radius:var(--r-btn);background:var(--linen);font:600 var(--t-ui)/1.3 var(--f-d);list-style:none;cursor:pointer}
.v2 .ship__sum::-webkit-details-marker{display:none}
.v2 .ship__paybox[open]>.ship__sum{margin-bottom:var(--s-2)}
/* 27.10 (заказчик: «важный контент не прятать в „+“»): способы оплаты открыты и на телефоне — строки-плюса нет,
   <details> всегда открыт (delivery.php). */
.v2 .ship__sum{display:none}
/* От 900 px — две равные колонки «Доставка» | «Оплата» (правка 01.10, п. 7: при 7fr / 5fr доставка растягивалась,
   цена уезжала от города, оплата сжималась в переносы). Заголовки и списки начинаются на одной линии.
   Ссылка «Подробнее о доставке и оплате»: от 900 px — под доставкой (колонки кончаются почти вровень),
   до 900 px — в конце блока, после схемы оплаты. Видна одна копия (delivery.php, $more_2). */
.v2 .ship__more--side{display:none}
@media (min-width:900px){
  .v2 .ship__in{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}
  .v2 .ship__more--side{display:inline-flex}
  .v2 .ship__more--end{display:none}
  /* Колонки равной высоты (аудит 13.10, CLAUDE.md §4: «Оплата» кончалась на середине «Доставки», справа внизу пусто):
     строки колонок общие (subgrid) — заголовки, списки и низ на одних линиях; список оплаты растянут на высоту
     списка доставки, строки поровну (1fr), подпись строки по центру. Без subgrid или ::details-content — как было. */
  .v2 .ship__in{grid-template-rows:auto auto auto;row-gap:var(--s-4)}
  .v2 .ship__col{grid-row:span 3;grid-template-rows:subgrid}
  .v2 .ship__paybox{display:flex;flex-direction:column}
  .v2 .ship__paybox::details-content{flex:1 1 auto;display:flex;flex-direction:column}
  .v2 .ship__pay{flex:1 1 auto;grid-auto-rows:1fr}
  /* В растянутой строке иконка и подпись — сверху, как город у доставки, подпись по центру иконки. */
  .v2 .ship__pay li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:start}
  .v2 .ship__pay .ship__icon{align-self:center}
}

/* ═══ 15 · Пришлите фотографию ═════════════════════════════════════ */
.v2 .lead-sec{padding-block:var(--sec-near) var(--sec)}
.v2 .lead-sec__in{display:grid;gap:var(--s-4)}
.v2 .lead-sec__head{display:grid;gap:var(--s-3);align-content:start}
.v2 .lead-sec__head .lead{max-width:var(--measure)}
.v2 .lead-sec__contacts{font-weight:600}
.v2 .lead-sec__contacts a{color:var(--acc);text-decoration:underline;text-underline-offset:var(--ul-off)}
/* До 900 px над строкой мессенджеров ещё --s-2: цели 44 px телефона и мессенджеров выходят за строку
   на (44 − 1lh) / 2 и при общем --s-3 заходили друг на друга на 1 px; теперь между ними 11 px. */
.v2 .lead-sec__soc{display:flex;flex-wrap:wrap;column-gap:var(--s-3);margin-top:var(--s-2)}
@media (min-width:900px){.v2 .lead-sec__soc{margin-top:0}}
.v2 .lead-sec__soc a{display:inline-block;min-width:var(--tap);text-align:center;padding:calc((var(--tap) - 1lh) / 2) 0;margin-block:calc((1lh - var(--tap)) / 2);
  font-weight:600;color:var(--acc);text-decoration:underline;text-underline-offset:var(--ul-off)}
.v2 .lead-sec__soc a:hover{color:var(--acc-ink)}
.v2 .lead-form__sum{padding:var(--s-2) var(--s-3);border-radius:var(--r-btn);background:var(--linen);font-size:var(--t-s)}
.v2 .lead-form__sum a{display:inline-block;padding-block:calc((var(--tap) - 1lh) / 2);margin-block:calc((1lh - var(--tap)) / 2);font-weight:600;color:var(--acc);text-decoration:underline;text-underline-offset:var(--ul-off)}
/* Крупная зона фото слева (≥900): кнопка по центру, после выбора — превью во весь кадр. */
.v2 .drop__img--eg{display:none}
.v2 .drop.has-file .drop__img--eg{display:none}
/* Крупная зона фото слева (≥900): снимок-пример целиком, маленькая кнопка
   «Выбрать фото» лежит на самом снимке, подпись — под ним. После выбора —
   снимок человека на том же месте, кнопка «Заменить фото». */
@media (min-width:900px){
  .v2 .drop--big{width:100%;max-width:var(--drop-max);margin-top:var(--s-2);grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:var(--s-2);padding:0;background:none;border-radius:0}
  .v2 .drop--big .drop__say{display:grid;gap:var(--s-0)}
  .v2 .drop--big .drop__say b,.v2 .drop--big .drop__say span{grid-area:auto}
  .v2 .drop--big:hover,.v2 .drop--big.is-over{background:none}
  .v2 .drop--big:focus-within{outline:none}
  .v2 .drop--big .drop__frame{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-img);overflow:hidden;background:var(--linen);box-shadow:var(--shadow)}
  .v2 .drop--big:focus-within .drop__frame{outline:var(--focus-w) solid var(--acc);outline-offset:var(--focus-off)}
  .v2 .drop--big .drop__say{order:0}
  .v2 .drop--big .drop__img{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
  .v2 .drop--big .drop__img--eg{display:block;object-fit:cover;object-position:55% 50%}
  .v2 .drop--big.has-file .drop__img--eg{display:none}
  .v2 .drop--big .drop__pick{position:absolute;left:var(--s-2);bottom:var(--s-2);z-index:1;padding:0 var(--s-3) 0 var(--s-2);border-radius:var(--r-chip);
    box-shadow:var(--shadow);font-size:var(--t-s);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
  .v2 .drop--big:hover .drop__pick{background:var(--acc);color:var(--card)}
  .v2 .drop--big.has-file .drop__pick{display:inline-flex}
}
.v2 .lead-sec .lead-form{padding:var(--s-4) var(--s-3);border-radius:var(--r-panel);background:var(--card);box-shadow:var(--shadow)}
@media (min-width:900px){
  /* Колонки по центру высоты друг друга (CLAUDE.md §4: при разной высоте — по центру; аудит страниц 13.10):
     левая колонка без кадра (заголовок, лид, контакты) ниже панели формы на 250–530 px, сверху под ней
     оставалась пустота (вопросы, 3D, сертификат). С крупной зоной фото (lead-sec--big) — так же, как было.
     «Контакты» — шапка блока липкая и сверху (pages/contacts.css, align-self:start). */
  .v2 .lead-sec__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--col-gap);align-items:center}
  .v2 .lead-sec .lead-form{padding:var(--s-5)}
}

/* Промежутки внутри секций: на телефоне --s-4, с 600 px — прежние --s-5 (доставка — --s-6). */
@media (min-width:600px){
  .v2 .how__in,.v2 .tiers__in,.v2 .revs__in,.v2 .faq__in,.v2 .lead-sec__in{gap:var(--s-5)}
  .v2 .ship__in{gap:var(--s-6)}
  .v2 .craft__head{margin-bottom:var(--s-5)}
  
}

/* Абзацы без одиноких слов в последней строке. */
.v2 .lead,.v2 .hero__lead,.v2 .tech__about,.v2 .proof__sub,
.v2 .tier__text,.v2 .promise__text,.v2 .qa__a,.v2 .ticket__note,.v2 .when__verdict,.v2 .when__facts small,.v2 .tech__made{text-wrap:pretty}
.v2 .when__note{text-wrap:pretty}

/* Сегмент уровня на экранах уже 380 px — столбиком: три слова в ряд не встают. */
@media (max-width:379px){
  
  .v2 .seg button{border-radius:calc(var(--r-btn) - var(--s-0))}
}
/* prefers-reduced-motion (аудит 13.10): не глушим все переходы до 0,01 мс — смена сцен первого экрана, окно заявки,
   панели и раскрытия остаются мягкими по прозрачности (--dur), но без сдвигов: переходы только у прозрачности, цвета
   и видимости, transform меняется сразу, а у появляющихся слоёв (панель меню, мега-меню, нижняя панель, cookie)
   сдвига нет вовсе — они просто проявляются. Стрелки и кадры при наведении не сдвигаются (--nudge 0, без scale). */
@media (prefers-reduced-motion:reduce){
  .v2{--nudge:0px}
  .v2 *,.v2 *::before,.v2 *::after{transition-property:opacity,visibility,color,background-color,border-color,outline-color,box-shadow,text-decoration-color,fill,stroke,content-visibility !important;scroll-behavior:auto !important}
  .v2 :is(.pnl,.mega,.dock,.ck__in,.lm){transform:none !important}
  .v2 .read__a:hover .read__cover img,.v2 .btn:active{transform:none}
}

/* Высокая контрастность Windows: выбранное остаётся видимым. */
@media (forced-colors:active){
  .v2 .pill[aria-pressed="true"],.v2 .pill.is-on,.v2 .seg button[aria-pressed="true"],.v2 .sizes__row[aria-pressed="true"],.v2 .tech__tab[aria-selected="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .v2 .how__step[aria-selected="true"]::before,.v2 .calc__dots li.is-on{forced-color-adjust:none;background:Highlight}
  /* Прозрачная рамка флажка (цель касания) — цветом фона, контур квадрата — системным цветом текста. */
  .v2 .agree__row input{forced-color-adjust:none;border-color:Canvas;background-color:Canvas;box-shadow:inset 0 0 0 1.5px CanvasText}
  .v2 .agree__row input:checked{background-color:Highlight;box-shadow:inset 0 0 0 1.5px Highlight}
  .v2 .btn,.v2 .pill,.v2 .seg button,.v2 .sizes__row{border:1px solid ButtonText}
}

/* ═══ Параметры блоков для внутренних страниц ══════════════════════
   Режимы template-parts/v2/* через $args (см. _state/specs/parts-api.md).
   На главной эти классы не встречаются: её вид не меняется. */
/* how: лид под заголовком. */
.v2 .how__head{display:grid;gap:var(--s-3)}
.v2 .how__head .lead{max-width:var(--measure)}
/* faq: без левой колонки — одна колонка; группы вопросов; ответ с разметкой. */
@media (min-width:900px){.v2 .faq--solo .faq__in{grid-template-columns:minmax(0,1fr)}}
.v2 .faq__groups{display:grid;gap:var(--s-6)}
.v2 .faq__group{display:grid;gap:var(--s-3)}
.v2 .faq__gt{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .qa__a--rich{display:grid;gap:var(--s-2)}
.v2 .qa__a--rich ul{padding-left:var(--s-4);list-style:disc}
.v2 .qa__a--rich ol{padding-left:var(--s-4);list-style:decimal}
/* Строчные ссылки ответа; кнопка (.btn) в ответе остаётся кнопкой. */
.v2 .qa__a--rich a:not(.btn){display:inline-block;padding-block:calc((var(--tap) - 1lh) / 2);margin-block:calc((1lh - var(--tap)) / 2);
  color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:var(--ul-off)}
/* craft: без кадра и видео — текст на всю ширину панели, от 900 px пункты в две колонки. */
@media (min-width:900px){
  .v2 .craft__in--solo{grid-template-columns:minmax(0,1fr)}
  .v2 .craft__in--solo .mats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
}
/* guarantees: пункт без иконки (у страницы нет своего глифа) — без пустого круга. */
.v2 .promise__item--bare{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.v2 .promise__item--bare{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
/* reviews, режим wall: стена колонками 1 / 2 (от 600) / 3 (от 1000), без главного отзыва. */
.v2 .rev-wall{display:grid;gap:var(--s-6);margin:0;padding:0;list-style:none}
.v2 .revs .works__more{background:var(--card)}
.v2 .revs .works__more:hover{background:color-mix(in srgb,var(--ink) 8%,var(--card))}
@media (max-width:599px){.v2.js .rev-wall:not(.is-open) .rev--more{display:none}}
/* Промежуток внутри карточки (padding), а не margin: WebKit переносит margin
   последней карточки колонки в верх следующей, и колонка начинается ниже. */
@media (min-width:600px){
  .v2 .rev-wall{display:block;columns:2;column-gap:var(--s-4);margin-bottom:calc(var(--s-5) * -1)}
  .v2 .rev-wall>.rev{break-inside:avoid;padding-bottom:var(--s-5)}
}
@media (min-width:1000px){.v2 .rev-wall{columns:3}}
/* lead: поле сообщения — как поле ввода. */
.v2 .field textarea{min-height:calc(var(--btn-h) * 2);padding:var(--s-2) var(--s-3);border:1.5px solid var(--ink-2);border-radius:var(--r-btn);
  background:var(--card);color:var(--ink);font:inherit;resize:vertical}
.v2 .field textarea:focus-visible{outline:var(--focus-w) solid var(--acc);outline-offset:1px;border-color:var(--acc)}

/* Появление секций (v2.js): до входа в окно блок прозрачный и ниже на --rise,
   потом --dur-rise к месту (--ease-out ≈ power3.out), лесенка — --rv-d.
   После перехода классы снимаются, у блока снова его собственные стили. */
.v2.js .rv{opacity:0;transform:translateY(var(--rise))}
.v2.js .rv.in{opacity:1;transform:none;transition:opacity var(--dur-rise) var(--ease-out),transform var(--dur-rise) var(--ease-out);transition-delay:var(--rv-d,0s)}

/* Телефон (до 600 px): счётчик и стрелки — под лентой, в зоне большого пальца (критика 13.10); с 600 px — над лентой,
   как было. Порядок меняет только CSS (order), разметка и фокус — прежние. «Что почитать» не трогаем: вид утверждён. */
@media (max-width:599px){
  .v2 .tech__bar,.v2 .revs__in>.rail-bar,.v2 .hsteps__bar{order:1}
  .v2 .revs__in>.link{order:2}
  .v2 .how__in>.hsteps{order:0}
  .v2 .how__in>.how__cta{order:2}
  
  .v2 :is(.tech__bar,.tiers__bar,.hsteps__bar),.v2 .revs--lead .rail-bar{margin-bottom:0;margin-top:calc(var(--s-3) - var(--s-4))}
}