/* Монро Арт · стили только главной (templates/home-v2.php).
   Вынесены из v2.css 13.10 (аудит скорости Impeccable, perf.md P2): на внутренних страницах
   эти правила не совпадали ни с одним элементом, а файл блокировал отрисовку. Здесь — первый экран
   и прозрачная шапка над ним, лента холстов, «Успеем к дате» (части только главной), техники,
   уровни, примерка, расчёт, наряд, финальный блок. Подключается только на главной (inc/assets.php),
   сразу после v2.css и до lead-modal.css: порядок каскада прежний. Токены — в v2.css и DESIGN.md.
   Правило, которое попадает и на внутренние страницы, сюда не переносить (проверка —
   _state/impeccable/fix/w3-home/split/analyze.py: класс есть в HTML главной и нет на остальных). */
/* Главная (body.v2-over): пока виден первый экран, шапка прозрачная поверх кадра,
   знак, пункты и бургер белые, «Узнать цену» остаётся зелёной кнопкой. Ниже героя
   (is-solid) и с открытой панелью телефона (is-open) — обычная; оба класса ставит
   v2.js. С открытым мега-меню (is-mega) над кадром остаётся прозрачной: карточка
   плывёт над размытым кадром. Без скрипта шапка обычная. */
.v2.v2-over .hdr{transition:background-color var(--dur) var(--ease)}
.v2.js.v2-over .hdr:not(.is-solid,.is-open) .hdr__logo,.v2.js.v2-over .hdr:not(.is-solid,.is-open) .hdr__tel,
.v2.js.v2-over .hdr:not(.is-solid,.is-open) .hdr__list>li>a,.v2.js.v2-over .hdr:not(.is-solid,.is-open) .hdr__drop{color:var(--card)}
.v2.js.v2-over .hdr:not(.is-solid,.is-open) .hdr__list>li>a:hover,.v2.js.v2-over .hdr:not(.is-solid,.is-open) .hdr__drop:hover,
.v2.js.v2-over .hdr:not(.is-solid,.is-open) .hdr__tel:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:var(--ul-off-l)}
.v2.js.v2-over .hdr:not(.is-solid,.is-open) .brg i,.v2.js.v2-over .hdr:not(.is-solid,.is-open) .brg i::before,
.v2.js.v2-over .hdr:not(.is-solid,.is-open) .brg i::after{background:var(--card)}
.v2.js.v2-over .hdr:not(.is-solid,.is-open) :focus-visible{outline-color:var(--card)}
/* ═══ 1 · Первый экран: сцены дарения фоном ═══════════════════════════
   Единственное, что взято из первой версии: фото во весь экран, смена
   затуханием с медленным приближением, полоски-индикаторы, прозрачная шапка.
   Написано от телефона: кадр — полоса под шапкой на остаток первого окна
   (flex), текст внизу заходит на кадр на --hero-over, под ним вуаль плотная.
   От 900 px кадр во весь экран, текст слева на боковой вуали (grid-области,
   порядок первой версии). Движение — только opacity и transform. */
/* 27.10 (заказчик, iPhone): кадр начинается от верха окна и уходит под прозрачную шапку — без тёмной полосы
   --ink под шапкой (раньше у героя было поле сверху в высоту шапки, и при загрузке шапка стояла на тёмном).
   Знак и бургер читаются за счёт верхней полосы вуали (--veil-band: 60 % --ink → 0 за --s-6). Первый экран
   по-прежнему ровно 100svh. От 900 px поля героя задаёт своё правило ниже — там без изменений. */
.v2 .hero{position:relative;isolation:isolate;margin-top:calc(var(--hdr) * -1);background:var(--ink);color:var(--card)}
.v2 .hero :focus-visible{outline-color:var(--card)}
.v2 .hero__first{display:flex;flex-direction:column;min-height:100svh}
/* Кадр заходит под шапку: к минимальной высоте видимой части прибавлена высота шапки (27.10). */
.v2 .hero__media{position:relative;order:-1;flex:1 1 auto;min-height:calc(var(--hero-media-min) + var(--hdr));overflow:hidden}
.v2 .hero__slides,.v2 .hero__sl,.v2 .hero__veil{position:absolute;inset:0}
/* Новая сцена проявляется поверх прежней (was), без провала в тёмное. */
.v2 .hero__sl{opacity:0;z-index:0}
.v2 .hero__sl.was{opacity:1;z-index:1}
.v2 .hero__sl.on{opacity:1;z-index:2;transition:opacity var(--slide-fade) var(--ease)}
.v2 .hero__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  object-position:var(--pos-sm);transform-origin:var(--pos-sm)}
.v2 .hero__veil{z-index:3;pointer-events:none;background:var(--veil-band)}
/* Полоски сцен и пауза — над текстом, не на лицах. До 375 px полоска — ровно цель касания (--tap);
   не влезает в ряд — переносится строкой выше (wrap-reverse), ничего не обрезается. */
.v2 .hero__ctl{position:absolute;z-index:4;left:var(--gut);right:var(--gut);bottom:calc(var(--hero-over) + var(--s-1));
  display:flex;flex-wrap:wrap-reverse;align-items:center;gap:var(--s-1)}
.v2 .hero__dots{display:flex;flex:0 1 auto;min-width:0}
.v2:not(.js) .hero__dots{display:none}
.v2 .hero__dot{display:flex;align-items:center;flex:0 1 auto;width:var(--tap);min-width:var(--tap);height:var(--tap);padding-inline:var(--s-0)}
@media (min-width:375px){.v2 .hero__dot{width:var(--dot-w)}}
.v2 .hero__bar{flex:1 1 auto;height:var(--line);border-radius:var(--r-chip);background:var(--on-ink-line);overflow:hidden;
  transition:background-color var(--dur) var(--ease)}
.v2 .hero__bar>span{display:block;height:100%;background:var(--card);transform:scaleX(0);transform-origin:0 50%}
.v2 .hero__dot.is-on .hero__bar>span{animation:heroFill var(--slide-time) linear both}
.v2 .hero.is-paused .hero__dot.is-on .hero__bar>span{animation-play-state:paused}
.v2 .hero.is-still .hero__dot.is-on .hero__bar>span{animation:none;transform:none}
.v2 .hero__pause{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);
  background:var(--glass);color:var(--card);transition:background-color var(--dur) var(--ease)}
.v2 .hero__pause:hover{background:var(--glass-hover)}
.v2 .hero__ic-play,.v2 .hero__pause[aria-pressed="true"] .hero__ic-pause{display:none}
.v2 .hero__pause[aria-pressed="true"] .hero__ic-play{display:block}
/* Текст: в первом окне H1, цена, срок и «Рассчитать»; остальное ниже на той же подложке. */
.v2 .hero__core{position:relative;z-index:5;display:grid;gap:var(--s-3);justify-items:start;
  margin-top:calc(var(--hero-over) * -1);padding:0 var(--gut) var(--s-3)}
.v2 .hero__t{font:500 var(--t-hero)/1.04 var(--f-d);letter-spacing:-.022em}
.v2 .hero__price{margin-top:calc(var(--s-1) - var(--s-3));font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .hero__when{display:grid;gap:var(--s-0);max-width:var(--hero-col)}
.v2 .hero__when b{font:600 var(--t-ui)/1.35 var(--f-d);text-wrap:balance}
.v2 .hero__when span{font-size:var(--t-s);color:var(--on-photo-2)}
.v2 .hero__go,.v2 .hero__alt{justify-self:stretch}
.v2 .hero__tail{position:relative;z-index:5;display:grid;gap:var(--s-4);justify-items:start;padding:0 var(--gut) var(--s-6)}
.v2 .hero__lead{max-width:var(--measure);font-size:var(--t-lead);line-height:1.55;color:var(--on-photo-2)}
/* Строка доверия — только на десктопе, в первом экране. На телефоне и планшете она
   оказывалась ниже сгиба вплотную к полосе цифр с теми же 256 647 и 12 649 крупно. */
.v2 .hero__trust{display:none;flex-wrap:wrap;gap:var(--s-1) var(--s-4);max-width:var(--hero-col);margin:0;padding:0;list-style:none;
  font-size:var(--t-s);line-height:1.5;color:var(--on-photo-2)}
.v2 .hero__trust b{font:600 var(--t-ui)/1.3 var(--f-d);color:var(--card)}
/* Вторая кнопка на фото — «стеклянная»: светлая дымка с размытием и тонким белым контуром. */
.v2 .btn--glass{background:var(--glass);color:var(--card);box-shadow:inset 0 0 0 1.5px var(--on-ink-line)}
.v2 .btn--glass:hover{background:var(--glass-hover)}
@media (min-width:900px){.v2 .btn--glass{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}}
@media (prefers-reduced-motion:no-preference){.v2 .hero__sl.on .hero__img,.v2 .hero__sl.was .hero__img{animation:heroKb var(--kb-time) linear both}
  .v2 .hero.is-paused .hero__img{animation-play-state:paused}
  /* Появление при загрузке — CSS, не скрипт: без JS текст всё равно на месте. */
.v2 .hero__t{animation:heroIn .7s var(--ease) .1s both}
  .v2 .hero__price,.v2 .hero__when,.v2 .hero__lead{animation:heroIn .7s var(--ease) .18s both}}
@media (prefers-reduced-motion:reduce){.v2 .hero__dot.is-on .hero__bar>span{animation:none;transform:none}
  .v2 .hero__sl.on{transition-duration:var(--dur)}}
@media (min-width:600px){.v2 .hero__img{object-position:var(--pos);transform-origin:var(--pos)}
  .v2 .hero__go,.v2 .hero__alt{justify-self:start}}
@media (min-width:900px){.v2 .hero{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:var(--s-2);align-content:center;
    grid-template-areas:"t t" "lead lead" "when when" "go alt" "price price" "promo promo" "trust trust";
    min-height:max(100svh,var(--hero-min));
    padding:calc(var(--hdr) + var(--s-5)) max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut))) calc(var(--tap) + var(--s-5) * 2)}
  .v2 .hero__first,.v2 .hero__core,.v2 .hero__tail{display:contents}
  .v2 .hero__media{position:absolute;inset:0;z-index:0;min-height:0}
  .v2 .hero__veil{background:var(--veil-side)}
  .v2 .hero__ctl{left:auto;right:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)));bottom:var(--s-5)}
  .v2 .hero__t{grid-area:t}
  .v2 .hero__lead{grid-area:lead;margin-top:var(--s-3)}
  .v2 .hero__when{grid-area:when;margin-top:var(--s-4)}
  .v2 .hero__go{grid-area:go;margin-top:var(--s-5)}
  .v2 .hero__alt{grid-area:alt;margin-top:var(--s-5)}
  .v2 .hero__price{grid-area:price;margin-top:var(--s-4)}
  .v2 .hero__trust{display:flex;grid-area:trust;margin-top:var(--s-3)}}
/* Главная: лента холстов не раскладывается и не рисуется, пока до неё далеко
   (content-visibility) — 24 ленивые миниатюры (≈ 480 КБ) не отнимают канал у
   первого кадра на телефоне. Место под ленту занято заранее (два ряда 4:5 и
   промежуток) — ничего не сдвигается. Только лента: в ней нет текста и кнопок
   (у целых блоков скрытый текст ломает innerText и прокрутку к элементу). */
.v2.v2-tpl-home .reel{content-visibility:auto;contain-intrinsic-size:auto calc(var(--reel-w) * 1.25);
  contain-intrinsic-block-size:auto calc(var(--reel-w) * 1.25)}
@media (min-width:600px){.v2.v2-tpl-home .reel{contain-intrinsic-size:auto calc(var(--reel-w) * 2.5 + var(--s-3));
  contain-intrinsic-block-size:auto calc(var(--reel-w) * 2.5 + var(--s-3))}}
.v2 .reel{display:grid;gap:var(--s-3);margin-block:var(--s-5) var(--s-4)}
/* 27.10 (телефон: лента стояла или дёргалась). Бесшовная дорожка: ряд = две одинаковые половины, едет на −50 %
   через translate3d (свой слой, только transform). Промежуток — полем справа у каждого кадра, а не gap: с gap
   половина ряда короче периода на полпромежутка, и на стыке круга кадр прыгал. Пауза наведением — только мышью:
   на телефоне касание оставляло «залипший» :hover, и лента вставала до следующего касания где-то ещё.
   Кадры подгружаются заранее (v2.js «02. лента работ»): ленивая загрузка на ходу давала рывки на декодировании. */
.v2 .reel__row{display:flex;width:max-content;animation:reel 90s linear infinite;will-change:transform;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.v2 .reel__row--back{animation-direction:reverse;animation-duration:110s;margin-left:calc(var(--reel-w) / -2)}
/* Телефон: один ряд ленты (второй не раскладывается и не грузит миниатюры), с 600 px — два навстречу. */
.v2 .reel__row--back{display:none}
@media (min-width:600px){.v2 .reel__row--back{display:flex}}
.v2 .reel.off .reel__row{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.v2 .reel:hover .reel__row{animation-play-state:paused}}
.v2 .reel__img{flex:0 0 auto;width:var(--reel-w);margin-right:var(--s-3);aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-img);
  background:var(--on-ink-fill)}
.v2 .proof__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4)}
.v2 .reel__pause{min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-chip);box-shadow:inset 0 0 0 1.5px var(--on-ink-line);
  color:var(--card);font:600 var(--t-ui)/1.2 var(--f-d)}
.v2 .reel__pause:hover{box-shadow:inset 0 0 0 1.5px var(--card)}
@media (prefers-reduced-motion:reduce){.v2 .reel__row{animation:none}
  .v2 .reel__pause{display:none}}
/* ═══ 4 · Переключатель техник ═══════════════════════════════════════ */
.v2 .tech{padding-block:var(--sec)}
.v2 .tech__in{display:grid;gap:var(--s-4)}
.v2 .tech__pick{display:grid;gap:var(--s-4);align-content:start;min-width:0}
/* Список строк с ценой на всех ширинах (DESIGN §8.4): название с бейджем
   слева, «от … ₽» справа. На телефоне строки на льне — видно, что нажимаются. */
.v2 .tech__list{display:grid;gap:var(--s-0)}
.v2 .tech__tabs{display:grid;gap:var(--s-0)}
.v2 .tech__tab,.v2 .tech__more{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;align-items:baseline;align-content:center;gap:var(--s-2);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 .tech__tab[aria-selected="true"]{background:var(--ink);color:var(--card)}
.v2 .tech__tab .chip{justify-self:start;align-self:baseline}
.v2 .tech__name{font:600 var(--t-ui)/1.2 var(--f-d);white-space:nowrap}
.v2 .tech__from{grid-column:3;justify-self:end;font:600 var(--t-s)/1.2 var(--f-d);color:var(--ink-2);white-space:nowrap}
.v2 .tech__more{grid-template-columns:max-content max-content 1fr;column-gap:var(--s-1);color:var(--acc);background:none}
.v2 .tech__more:hover{color:var(--acc-ink)}
.v2 .tech__more svg{grid-column:2;justify-self:start;align-self:center;transition:transform var(--dur) var(--ease)}
.v2 .tech__more:hover svg{transform:translateX(var(--nudge))}
.v2 .tech__say{display:grid;gap:var(--s-3);min-width:0}
.v2 .tech__about{color:var(--ink-2);max-width:var(--measure)}
.v2 .tech__head{display:grid;gap:var(--s-2)}
.v2 .tech__made{font-size:var(--t-body);color:var(--ink-2);max-width:var(--measure)}
.v2 .tech__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1)}
.v2 .tech__price b{font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .tech__size{color:var(--ink-2)}
.v2 .tech__price s{color:var(--ink-2);font-size:var(--t-s)}
.v2 .tech__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.v2 .tech__canvas{position:relative;border-radius:var(--r-img);overflow:hidden;background:var(--linen);box-shadow:var(--shadow);min-width:0}
.v2 .tech__canvas img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Сканы со штампом студии и тёмным торцом слегка кадрируем; у «Цифрового» штампа нет.
   TODO: убрать, когда придут чистые сканы. */
.v2 .tech__canvas[data-stamp="1"] img,.v2 .tcard__art[data-stamp="1"] img{transform:scale(var(--stamp-crop));transform-origin:0 50%}
/* Телефон и планшет (до 900 px): вертикальный список техник (27.10, без ленты и без «+»). Строка — кнопка
   на льне: миниатюра --tech-thumb (квадрат, кадр по лицу), название с бейджем, цена «от», описание в одну строку, шеврон.
   Открытая строка (aria-expanded) — тёмная, как выбранная вкладка на десктопе; под ней полное описание,
   как сделано и два действия. Список и холст-переключатель — от 900 px. */
.v2 .tech{--tech-thumb:72px}
.v2 .tech__pick,.v2 .tech__in>.tech__canvas{display:none}
.v2 .tech__rail{display:grid;gap:var(--s-1);margin:0;padding:0;list-style:none}
.v2 .tcard{position:relative;min-width:0}
.v2 .tcard__h{margin:0;font:inherit}
.v2 .tcard__row{display:grid;grid-template-columns:var(--tech-thumb) minmax(0,1fr) var(--ico);align-items:center;gap:var(--s-3);width:100%;min-height:var(--tap);
  padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1);border-radius:var(--r-btn);background:var(--linen);color:var(--ink);text-align:left;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .tcard__row[aria-expanded="true"]{background:var(--ink);color:var(--card)}
.v2 .tcard__art{position:relative;display:block;border-radius:calc(var(--r-btn) - var(--s-0));overflow:hidden;background:var(--paper)}
.v2 .tcard__art img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%}
.v2 .tcard__say{display:grid;gap:var(--s-0);min-width:0}
.v2 .tcard__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);font:600 var(--t-ui)/1.25 var(--f-d)}
.v2 .tcard__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-1);font-size:var(--t-s);color:var(--ink-2)}
.v2 .tcard__price b{font:600 var(--t-ui)/1.2 var(--f-d);color:var(--ink)}
.v2 .tcard__about{font-size:var(--t-s);line-height:1.35;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2 .tcard__row[aria-expanded="true"] :is(.tcard__price,.tcard__price b,.tcard__about){color:var(--card)}
.v2 .tcard__row[aria-expanded="true"] .chip{background:color-mix(in srgb,var(--card) 16%,transparent);color:var(--card)}
/* Открытая строка: описание целиком (одна строка была только превью). */
.v2 .tcard__row[aria-expanded="true"] .tcard__about{white-space:normal;text-wrap:pretty}
.v2 .tcard__size{display:none}
.v2 .tcard__row[aria-expanded="true"] .tcard__size{display:inline;color:var(--card)}
.v2 .tcard__chev{justify-self:end;transition:transform var(--dur) var(--ease)}
.v2 .tcard__row[aria-expanded="true"] .tcard__chev{transform:rotate(180deg)}
.v2 .tcard__more{display:grid;gap:var(--s-2);padding:var(--s-3) var(--s-1) var(--s-2)}
.v2:not(.js) .tcard__more[hidden]{display:grid}
.v2 .tcard__made{font-size:var(--t-s);color:var(--ink-2);text-wrap:pretty;max-width:var(--measure)}
.v2 .tcard__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4)}
.v2 .tcard__go .btn{flex:1 1 100%}
.v2 .tech__all{margin-top:calc(var(--s-1) - var(--s-4))}
@media (hover:hover) and (pointer:fine){.v2 .tcard__row:not([aria-expanded="true"]):hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}}
@media (min-width:600px){.v2 .tcard__go .btn{flex:0 1 auto}}
@media (min-width:900px){.v2 .tech__rail,.v2 .tech__all{display:none}
  .v2 .tech__pick{display:grid}
  .v2 .tech__in>.tech__canvas{display:block}}
@media (min-width:900px){/* Десктоп: слева холст, справа список — зеркально первому экрану. */
.v2 .tech__in{grid-template-columns:minmax(0,var(--canvas-max)) minmax(0,1fr);column-gap:var(--col-gap);row-gap:var(--s-5);align-items:start}
  .v2 .tech__head{grid-column:1 / -1}
  .v2 .tech__canvas{grid-column:1;grid-row:2;justify-self:start;
    width:min(100%,calc((100svh - var(--hdr) - var(--s-6) - var(--s-4)) * var(--canvas-ratio)),var(--canvas-max));position:sticky;top:calc(var(--hdr) + var(--s-5))}
  .v2 .tech__pick{grid-column:2;grid-row:2}
  /* Вертикальный список без линий. Выбранная строка — как выбранная
     пилюля: тёмная заливка. Названия стоят на одной вертикали с колонкой. */
  /* Свес только слева: названия на вертикали колонки, правый край
     заливки — по линии контейнера. */
.v2 .tech__list{margin-inline:calc(var(--s-3) * -1) 0}
  .v2 .tech__tab{background:transparent}
  .v2 .tech__name{font:600 var(--t-h3)/1.25 var(--f-d)}
  .v2 .tech__from{font-size:var(--t-ui)}
  /* «Все N техник» — ссылка, как «Подробнее о технике» под описанием (.link): тот же кегль и гарнитура;
     высота строки --row остаётся ради цели касания. */
.v2 .tech__more .tech__name{font:600 var(--t-ui)/1.2 var(--f-b);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:var(--ul-off-l)}}
@media (min-width:900px) and (max-width:1199px){.v2 .tech__in{grid-template-columns:minmax(0,min(var(--canvas-max),45%)) minmax(0,1fr)}}
.v2 .fold__body{display:grid;gap:var(--s-4)}
/* ═══ 5 · Насколько подробно прорисовать ════════════════════════════ */
/* Соседние секции на одном фоне: верх второй — --s-6 (DESIGN.md §5). */
.v2 .tiers{padding-block:var(--sec-near)}
.v2 .tiers__head{display:grid;gap:var(--s-3)}
.v2 .tiers__head .lead{max-width:var(--measure)}
/* Телефон и планшет (27.10, заказчик): без ленты и без плашки «+» — три уровня списком друг под другом,
   кадр-миниатюра (--tier-art) со вставкой-деталью слева, название, описание, доплата и срок справа. От 900 px — три колонки. */
.v2 .tiers__row{display:grid;gap:var(--s-3)}
.v2 .tier{position:relative;display:grid;grid-template-columns:var(--tier-art) minmax(0,1fr);align-items:center;gap:var(--s-3)}
.v2 .tier__pick{min-height:var(--tap);padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.v2 .tier__pick::after{content:'';position:absolute;inset:0;z-index:3;border-radius:var(--r-img)}
.v2 .tier__pick:focus-visible{outline:none}
.v2 .tier__pick:focus-visible::after{outline:var(--focus-w) solid var(--acc);outline-offset:var(--ring)}
.v2 .tier__art{transition:outline-color var(--dur) var(--ease);outline:var(--ring) solid transparent;outline-offset:calc(var(--ring) * -1)}
.v2 .tier:hover .tier__art{outline-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.v2 .tier:has(.tier__pick[aria-pressed="true"]) .tier__art{outline-color:var(--acc)}
.v2 .tier__on{display:none}
.v2 .tier:has(.tier__pick[aria-pressed="true"]) .tier__on{display:inline-flex}
.v2 .tier__art{position:relative;border-radius:var(--r-img);overflow:hidden;background:var(--linen);box-shadow:var(--shadow)}
.v2 .tier__art img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Фрагмент вблизи: серьга ×2,2 к холсту, в паспарту — у «Базового» обобщена, дальше чёткая. */
.v2 .tier__art img.tier__near{position:absolute;right:var(--s-2);bottom:var(--s-2);width:var(--near);height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-img);box-shadow:0 0 0 var(--ring) var(--card),var(--shadow)}
.v2 .tier__say{display:grid;gap:var(--s-1)}
.v2 .tier__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1)}
.v2 .tier__h{font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .tier__text{color:var(--ink-2)}
/* Цена и срок — двумя строками у всех трёх: длина надписи не сбивает линию. */
.v2 .tier__meta{display:grid;gap:var(--s-0)}
.v2 .tier__meta b{font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .tier__meta span{font-size:var(--t-s);color:var(--ink-2)}
/* «Цену назовём по фото» (уровни без надбавки в прайсе) — подписью, а не крупной цифрой (критика 13.10). */
.v2 .tier__meta--ask b{font:500 var(--t-ui)/1.35 var(--f-b);color:var(--ink)}
/* До 900 px описание подписью (--t-s), доплата и срок одной строкой — карточка не выше своего кадра. */
@media (max-width:899px){.v2 .tier__text{font-size:var(--t-s)}
  .v2 .tier__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-0) var(--s-1)}
  .v2 .tier__meta:not(.tier__meta--ask) b{font:600 var(--t-ui)/1.3 var(--f-d)}
  .v2 .tier__art img:not(.tier__near){aspect-ratio:1}
  .v2 .tier__art img.tier__near{right:var(--s-1);bottom:var(--s-1)}}
@media (min-width:900px){
  /* Цены трёх уровней на одной линии при любой длине описания. */
.v2 .tier{grid-template-columns:none;grid-template-rows:auto 1fr;align-items:stretch;align-content:stretch}
  .v2 .tier__say{grid-template-rows:auto 1fr auto}
  .v2 .tiers__row{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);overflow:visible;margin:0;padding:0}}
/* ═══ 6 · Примерка на стене ═════════════════════════════════════════ */
.v2 .size{padding-block:var(--sec-near) var(--sec)}
.v2 .size__in{display:grid;gap:var(--s-4)}
.v2 .size__head{display:grid;gap:var(--s-3)}
.v2 .size__head .lead{max-width:var(--measure)}
/* Телефон: кадр 4:3 вокруг стены (27.10: был квадрат — стена, выбор и цена не помещались в один экран). */
.v2 .room{position:relative;aspect-ratio:4/3;border-radius:var(--r-img);overflow:hidden;background:var(--linen)}
.v2 .room__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Смена размера — только transform (FLIP в v2.js), раскладка не пересчитывается в анимации. */
.v2 .room__cv{position:absolute;left:0;top:0;overflow:hidden;box-shadow:var(--shadow-wall);transform-origin:0 0}
.v2 .room__cv.is-moving{transition:transform var(--dur-img) var(--ease)}
.v2 .room__cv img{width:100%;height:100%;object-fit:cover}
.v2 .size__ctl{display:grid;gap:var(--s-3)}
.v2 .size__price{display:grid;gap:var(--s-0)}
.v2 .size__price b{font:600 var(--t-num)/1.1 var(--f-d)}
.v2 .size__price #sizeWhat{font-size:var(--t-s);color:var(--ink-2);max-width:var(--measure);text-wrap:balance}
.v2 .size__price .link{margin-top:var(--s-1)}
.v2 .size__live{display:grid;gap:var(--s-0)}
/* До 600 px (27.10): что выбрано и цена одной строкой — итог виден в том же экране, что стена. */
@media (max-width:599px){.v2 .size__live{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s-3)}}
@media (min-width:900px){.v2 .room{aspect-ratio:16/9}
  .v2 .size__ctl{grid-template-columns:auto auto minmax(0,1fr);column-gap:var(--s-5);align-items:end}
  .v2 .size__price{justify-items:end;text-align:right}}
@media (prefers-reduced-motion:reduce){.v2 .room__cv{transition:none}}
/* ═══ 07 и 15 · Заказ-наряд, поля и форма ════════════════════════ */
/* На телефоне поля наряда уже: переключатель уровня встаёт в один ряд. */
.v2 .ticket{display:grid;gap:var(--s-3);align-content:start;padding:var(--s-4) var(--s-3);border-radius:var(--r-panel);background:var(--card);box-shadow:var(--shadow)}
.v2 .ticket__t{display:grid;gap:var(--s-0);font:600 var(--t-h3)/1.25 var(--f-d)}
.v2 .ticket__t span{font:400 var(--t-s)/1.5 var(--f-b);color:var(--ink-2)}
.v2 .ticket__rows{display:grid;gap:var(--s-1)}
/* Телефон: подпись сверху, значение под ней. Десктоп: в одну строку. */
.v2 .ticket__row{display:grid;gap:var(--s-0);min-height:var(--row);padding:var(--s-2) var(--s-3);border-radius:var(--r-btn);background:var(--linen)}
.v2 .ticket__row dt{font-size:var(--t-s);color:var(--ink-2)}
.v2 .ticket__row dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-2)}
.v2 .ticket__row dd b{font:600 var(--t-ui)/1.3 var(--f-d)}
/* Строки без сегмента на телефоне — в одну линию: наряд не тянется анкетой. */
.v2 .ticket__row:not(.ticket__row--ctl){grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3);padding-block:var(--s-1)}
.v2 .ticket__row:not(.ticket__row--ctl) dd{justify-content:flex-end;text-align:right;padding-top:0}
.v2 .ticket__row dt small{display:block;font-size:var(--t-s);color:var(--ink-2)}
.v2 .ticket__hint{margin-top:var(--s-1);font-size:var(--t-s);font-weight:600;color:var(--acc-ink)}
.v2 .ticket__edit{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--t-s);font-weight:600;color:var(--acc);
  text-decoration:underline;text-underline-offset:var(--ul-off)}
.v2 .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-0);width:100%;padding:var(--s-0);border-radius:var(--r-chip);background:var(--card)}
.v2 .ticket__sum{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-1) var(--s-3);padding-top:var(--s-2)}
.v2 .ticket__sum p:first-child{font-size:var(--t-s);color:var(--ink-2)}
.v2 .ticket__note{font-size:var(--t-s);color:var(--ink-2)}
@media (min-width:900px){.v2 .ticket:not(.calc__card){padding:var(--pad-panel)}
  .v2 .ticket__row{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3);padding-block:var(--s-1)}
  .v2 .ticket__row dd{justify-content:flex-end;text-align:right}
  .v2 .seg{width:auto;justify-self:end;grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2 .ticket__hint{text-align:right}
  .v2 .seg button{padding:0 var(--s-2)}}
@media (min-width:900px){.v2 .reads__row.reads__row--rail{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 3 * var(--s-4)) / 4);
    overflow-x:auto;margin:calc(var(--s-1) * -1);padding:var(--s-1);scroll-padding-inline:var(--s-1)}}
.v2 .size .sizes{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Телефон (27.10): размеры сеткой 3×2 одной строкой — подписи строк скрыты, подпись выбранного — .size__note под сеткой. */
.v2 .size .sizes__row{min-height:var(--tap);align-content:center;justify-items:center;padding-inline:var(--s-1);text-align:center}
.v2 .size .sizes__row span{display:none}
.v2 .size__row--list{grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:var(--s-3)}
.v2 .size__row--list>:not(.size__label,.size__note){grid-column:1/-1}
.v2 .size__note{grid-row:1;grid-column:2;justify-self:end;text-align:right;font-size:var(--t-s);color:var(--ink-2)}
.v2 .size__note:empty{display:none}
@media (min-width:600px){.v2 .size .sizes__row{min-height:var(--row);justify-items:stretch;padding-inline:var(--s-3);text-align:left}
  .v2 .size .sizes__row span{display:block}
  .v2 .size__row--list{grid-template-columns:minmax(0,1fr)}
  .v2 .size__note{display:none}}
.v2 .size .sizes>li{display:grid}
@media (min-width:600px){.v2 .size .sizes{grid-template-columns:minmax(0,1fr)}
  .v2 .size .sizes__row{align-content:normal}}
.v2 .size__second{font-size:var(--t-s);color:var(--ink-2)}
@media (min-width:900px){.v2 .size__ctl{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"rooms list" "price list";grid-template-rows:auto 1fr;column-gap:var(--col-gap);row-gap:var(--s-4);align-items:start}
  .v2 .size__ctl > .size__row:not(.size__row--list){grid-area:rooms}
  .v2 .size__ctl > .size__row--list{grid-area:list}
  .v2 .size__ctl > .size__price{grid-area:price;justify-items:start;text-align:left}}
@media (min-width:1100px){/* Стена справа: после техник (кадр слева) и уровней получается зигзаг. */
  /* Стена и выбор — в раскрытом .fold (строка-сводка телефона скрыта): сетка на его теле. */
.v2 .size__in{row-gap:var(--s-5)}
  .v2 .size .fold__body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col-gap);row-gap:var(--s-5);align-items:start}
  .v2 .room{order:1}
  .v2 .room{aspect-ratio:4/3}
  .v2 .size__ctl{grid-template-columns:minmax(0,1fr);grid-template-areas:"rooms" "list" "price";grid-template-rows:none;row-gap:var(--s-4)}}
/* ═══ 07 · Точный расчёт за пять шагов ══════════════════════════════ */
.v2 .calc{padding-block:var(--band);background:var(--linen)}
.v2 .calc__in{display:grid;gap:var(--s-5)}
.v2 .calc__head{display:grid;gap:var(--s-3);align-content:start}
.v2 .calc__head .lead{max-width:var(--measure)}
/* Сводка — справка, а не вторая форма: плотнее бланка с вопросами. */
.v2 .calc__card{gap:var(--s-2)}
.v2 .calc__card .ticket__rows{gap:var(--s-0)}
.v2 .calc__card .ticket__row{min-height:0;padding:var(--s-1) 0;background:transparent}
.v2 .calc__card .ticket__sum{padding:var(--s-2) var(--s-3);border-radius:var(--r-btn);background:var(--linen)}
/* Итог до 900 px — у кнопки «Далее» (#calcLive, он же объявляет цену вслух); в сводке его нет. */
.v2 .calc__card .ticket__sum{display:none}
/* Панели на цветной полосе плоские, как карточка срока: тень — только на сливках. */
.v2 .calc .ticket{box-shadow:none}
.v2 .calc__pay{font-size:var(--t-s);color:var(--ink-2);max-width:var(--measure);text-wrap:pretty}
/* Сводка до 900 px свёрнута в строку «Ваш расчёт: 1 лицо · 40×50 см · …» (details); от 900 px открыта, строки нет. */
.v2 .calc__card{padding:var(--s-2) var(--s-3)}
.v2 .calc__cardsum{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--row);list-style:none;cursor:pointer}
.v2 .calc__cardsum::-webkit-details-marker{display:none}
.v2 .calc__cardt{display:grid;gap:var(--s-0);font:600 var(--t-ui)/1.3 var(--f-d)}
.v2 .calc__brief{font:400 var(--t-s)/1.5 var(--f-b);color:var(--ink-2)}
.v2 .calc__cardin{display:grid;gap:var(--s-2)}
.v2 .calc__cardin>.ticket__t{display:none}
.v2 .calc__more[open] .calc__cardin{padding-block:var(--s-1) var(--s-2)}
.v2 .calc__live{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-1) var(--s-3);padding:var(--s-2) var(--s-3);
  border-radius:var(--r-btn);background:var(--linen);font-size:var(--t-s);color:var(--ink-2)}
.v2 .calc__live b{font:600 var(--t-num)/1.1 var(--f-d);color:var(--ink)}
@media (min-width:900px){.v2 .calc__live{display:none}
  .v2 .calc__card{padding:var(--s-5)}
  .v2 .calc__cardsum{display:none}
  .v2 .calc__cardin>.ticket__t{display:grid}
  .v2 .calc__card .ticket__sum{display:flex}
  .v2 .calc__more[open] .calc__cardin{padding-block:0}}
@media (max-width:899px){.v2 .calc__in{row-gap:var(--s-3)}}
@media (max-width:599px){.v2 .calc__nav .btn{flex:1}}
.v2 .calc__sum b.is-empty{font:400 var(--t-s)/1.3 var(--f-b);color:var(--ink-2)}
.v2 .calc__card .ticket__row:has(.is-empty){display:none}
.v2 .calc__step{font-size:var(--t-s);font-weight:600;color:var(--ink-2)}
/* Прогресс шагов — пять отрезков: это интерфейс, а не служебная линия. */
.v2 .calc__dots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-0);margin:0;padding:0;list-style:none}
.v2 .calc__dots li{height:var(--bar);border-radius:var(--r-chip);background:color-mix(in srgb,var(--ink) 12%,var(--card))}
.v2 .calc__q{display:grid;gap:var(--s-2);min-width:0;margin:0;padding:0;border:0}
.v2 .calc__q legend:focus{outline:none}
.v2 .calc__q legend{padding:0;margin-bottom:var(--s-2);font:600 var(--t-h3)/1.25 var(--f-d);text-wrap:balance}
.v2 .calc__box.is-steps .calc__q:not(.is-on){display:none}
.v2 .calc__occ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.v2 .calc__tile{display:grid;gap:var(--s-1);align-content:start;padding:0;text-align:left;font:600 var(--t-ui)/1.2 var(--f-d)}
/* Подпись плитки — запас на две строки только с 600 px (четыре в ряд, «День рождения» переносится);
   на телефоне две плитки в ряд, подписи в одну строку — пустая вторая строка удлиняла первый шаг. */
.v2 .calc__tile picture{display:block}
@media (min-width:600px){.v2 .calc__tile span{min-height:2lh}}
.v2 .calc__tile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);outline:var(--ring) solid transparent;outline-offset:calc(var(--ring) * -1);
  transition:outline-color var(--dur) var(--ease)}
.v2 .calc__tile:hover img{outline-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.v2 .calc__tile[aria-pressed="true"] img{outline-color:var(--acc)}
.v2 .calc__tile[aria-pressed="true"] span{color:var(--acc-ink)}
.v2 .calc__hint{font-size:var(--t-s);color:var(--ink-2)}
.v2 .calc .seg{width:100%;justify-self:stretch}
/* Сегменты на белом бланке — на льне, иначе дорожка не видна. */
.v2 .calc .seg{background:var(--linen)}
.v2 .calc .seg button:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .calc__tech{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-2);font-size:var(--t-s);color:var(--ink-2)}
.v2 .calc__tech b{font:600 var(--t-ui)/1.3 var(--f-d);color:var(--ink)}
.v2 .calc__nav{display:flex;align-items:center;gap:var(--s-3)}
.v2 .calc__nav .btn{margin-left:auto}
.v2 .calc__back{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--tap);font-weight:600;color:var(--acc)}
.v2 .calc__back svg{transform:rotate(180deg)}
@media (min-width:600px) and (max-width:899px){.v2 .calc__occ{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:600px){.v2 .calc__tile img{aspect-ratio:1}}
@media (min-width:900px){.v2 .calc__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"t t" "head box" "card box";grid-template-rows:auto auto 1fr;column-gap:var(--col-gap);align-items:start}
  .v2 .calc__t{grid-area:t}
  .v2 .calc__head{grid-area:head}
  .v2 .calc__box{grid-area:box}
  .v2 .calc__card{grid-area:card;position:sticky;top:calc(var(--hdr) + var(--s-5));align-self:start}
  .v2 .calc .seg{width:100%;justify-self:stretch;grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2 .calc .seg--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:379px){.v2 .seg{grid-template-columns:1fr;border-radius:var(--r-btn)}}

/* ═══ 07 · Расчёт: шаг «размер» одним решением, ошибка шага (критика 13.10) ═══════════════
   Шесть размеров «на стену» — плитками с подписью блока «Какой размер брать» («самый частый выбор»,
   «над диваном, семья»): 2 колонки на телефоне, 3 с 600 px; остальные четыре — пилюлями по кнопке
   «Другие размеры». Плитка — лён, --r-btn, высота от --row; выбранная — --ink / --card, как пилюля.
   Техника и уровень — строкой «изменить» (.calc__pick), выбор уровня раскрывается под ней. */
.v2 .calc__sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1)}
@media (min-width:600px){.v2 .calc__sizes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v2 .csz{display:grid;align-content:center;gap:0;min-height:var(--row);padding:var(--s-1) var(--s-3);border-radius:var(--r-btn);
  background:var(--linen);color:var(--ink);text-align:left;cursor:pointer;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .csz b{font:600 var(--t-ui)/1.2 var(--f-d);white-space:nowrap}
.v2 .csz span{font-size:var(--t-s);line-height:1.25;color:var(--ink-2)}
.v2 .csz:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .csz[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.v2 .csz[aria-pressed="true"] span{color:var(--on-ink-2)}
.v2 .csz:focus-visible{outline:var(--focus-w) solid var(--acc);outline-offset:var(--focus-off)}
.v2 .calc__pick{display:grid;gap:var(--s-2);margin-top:var(--s-1)}
.v2 .calc__pick .calc__tech{flex-wrap:nowrap;justify-content:space-between;gap:var(--s-2)}
.v2 .calc__pick .calc__tech>span{min-width:0}
.v2 .calc__opts{display:grid;gap:var(--s-1)}
.v2 .calc__opts[hidden]{display:none}
.v2 .calc__opts .ticket__hint{margin-top:0}
.v2 .calc__opts .ticket__edit{justify-self:start}
.v2 .calc__err{font-size:var(--t-s);font-weight:600;color:var(--err)}
@media (forced-colors:active){
  .v2 .csz{border:1px solid ButtonText}
  .v2 .csz[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
}