/* Сайт продукта: разделы (spec сайта §6). Четвёртая версия, 1.10: продукт
   в натуральную величину и цветные поля во всю ширину, как у ориентира
   (cue-to.ru), своим языком. Три прошлые версии владелец назвал черновиком:
   куски продукта были уменьшены до эскиза, страница белая и пустая. */

/* ── первый экран ─────────────────────────────────────────────────── */
/* Поле уходит под плавающую шапку: страница начинается красным.
   Раскладка (навык taste: не заголовок по центру, а слово слева, вещь
   справа): слева заголовок и кнопки; справа и сзади — неделя, утопленная в
   красное и растворённая под словами; она сама меняет вид, «Лента» и
   «По дням», как календарь программы (владелец 21.10).
   Поле не во всё окно (владелец 1.10); остаток окна под ним — полоса с
   отсветом и подсказкой листать дальше, так что следующий раздел
   начинается за краем окна и не обрубается им. */
.hero{margin-top:calc(-1 * (var(--head-h) + 12px));display:flex;flex-direction:column;min-height:100svh}
.hero-field{
  position:relative;color:var(--on-crest);border-radius:0 0 48px 48px;overflow:clip;
  background:var(--crest-field);background-size:160px 160px,auto,auto;background-blend-mode:soft-light,normal,normal;
  padding-top:calc(var(--head-h) + 12px + clamp(28px,5vh,64px));padding-bottom:clamp(40px,6vh,72px);
}
.hero-in{position:relative;display:grid;align-items:center;min-height:clamp(480px,64vh,600px)}
.hero-copy{position:relative;z-index:3;display:grid;justify-items:start;gap:22px;max-width:760px}
.hero-title{font-size:clamp(44px,5vw,76px);line-height:1.02;font-weight:800;letter-spacing:-.05em}
.hero-title-1{white-space:nowrap}
.hero-title-2{display:block}
/* Плашка в заголовке: белая, с предметом ниши; слово в ней сменяется по
   кругу снизу вверх (scripts/turns.mjs). Все слова в одной ячейке, видно
   одно, ширина ячейки по самому длинному: строка не прыгает. Ячейка режет
   по высоте, поэтому слова прокручиваются внутри плашки, а в покое хвосты
   букв соседних слов не заглядывают (раньше «у» из «студию» свисала в
   «зал», 1.10). Белая плашка — слой из трёх частей: середина тянется
   масштабом, правое скругление едет сдвигом, углы не искажаются; плашка и
   слово идут в одном такте. */
/* Геометрия плашки по метрикам Manrope (замер 2.10): подъём шрифта 1.07,
   спуск .30, при line-height 1.02 линия строки на .895em от верха строки;
   чернила: верх «б» на .735 над линией, хвост «у» на .24 под ней. Плашка
   1.13em охватывает их с запасом .0775 сверху и снизу — одна высота для
   всех слов. Всё раскладкой, без сдвигов поверх неё: плашка встаёт от
   верха строки (vertical-align: top) с отступом .0825em, слово внутри
   стоит на той же линии, что «Сдавайте»; нижнее поле срезано, и до
   второй строки прежнее расстояние. Раньше плашка висела ниже слова, а
   буквы упирались в её верх (владелец, 2.10). */
.turns{position:relative;display:inline-grid;vertical-align:top;height:1.13em;margin:.0825em .02em -.1925em;color:var(--crest);letter-spacing:-.045em;--r:.26em;
  --turn-ease:cubic-bezier(.77,0,.175,1);--turn-move:650ms}
.turns-bg{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(0 .05em .06em rgb(40 12 6 / .22)) drop-shadow(0 .12em .2em rgb(40 12 6 / .24))}
.turns-bg i{position:absolute;top:0;bottom:0;background:#fff}
.tb-l{left:0;width:var(--r);border-radius:var(--r) 0 0 var(--r)}
.tb-m{left:calc(var(--r) - 1px);right:calc(var(--r) - 1px);transform-origin:left}
.tb-r{right:0;width:var(--r);border-radius:0 var(--r) var(--r) 0}
.tb-m,.tb-r{transition:transform var(--turn-move) var(--turn-ease)}
.turns-stack{position:relative;display:grid;overflow:visible clip;-webkit-user-select:none;user-select:none}
.turn{grid-area:1/1;display:flex;align-items:center;gap:.06em;width:max-content;height:1.13em;padding:0 .24em 0 .1em;white-space:nowrap;opacity:0}
/* Слово: строка высотой .855em ставит линию на .8125em от верха плашки —
   ровно на линию «Сдавайте». */
.turn::after{content:attr(data-w);display:block;align-self:flex-start;line-height:.855}
.turn.is-on{opacity:1}
.turn img{width:1.02em;height:1.02em;object-fit:contain;margin:0 .02em 0 -.02em;filter:drop-shadow(0 .03em .04em rgb(23 24 26 / .22))}
/* Для выделения и копирования: прозрачная фраза поверх плашки. */
.turns-copy{position:absolute;inset:0;overflow:hidden;color:transparent;white-space:nowrap;font-size:.3em;line-height:3.77}
@media (prefers-reduced-motion:no-preference){
  @keyframes turn-in{from{transform:translateY(100%)}}
  @keyframes turn-out{from{opacity:1;transform:none}to{opacity:1;transform:translateY(-100%)}}
  .turn.is-in{animation:turn-in var(--turn-move) var(--turn-ease) backwards}
  .turn.is-out{animation:turn-out var(--turn-move) var(--turn-ease) both}
}
.hero-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:rgb(255 255 255 / .9);max-width:25em;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-actions .btn-lg{height:58px;padding:0 30px;font-size:17px;border-radius:16px}
.hero-free{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:rgb(255 255 255 / .8)}
.hero-free .ic{width:16px;height:16px}

/* Сцена: неделя на всю ширину за словами, растворённая слева, где текст,
   и снизу. Сверху у недели запас --lift: приближаясь в виде «По дням»,
   дни уходят вверх, и маска их не срезает. */
.hero-stage{position:absolute;z-index:1;inset:0 var(--gutter);--lift:28px}
.hs-ghost{
  position:absolute;left:-80px;right:-80px;top:calc(clamp(0px,2vh,24px) - var(--lift));padding-top:var(--lift);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 94%),linear-gradient(to right,transparent 46%,rgb(0 0 0 / .45) 57%,#000 67%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 62%,transparent 94%),linear-gradient(to right,transparent 46%,rgb(0 0 0 / .45) 57%,#000 67%,#000 93%,transparent);
  mask-composite:intersect;
}
/* Дятел стоит на нижнем краю поля, левее паутины (владелец 21.10 отметил
   место на снимке): пальцы ровно на кромке, где красное переходит в
   страницу, на чёрное не заходят. В клипе пальцы на 94 % кадра 240 × 320,
   а кадр выше рамки (её задаёт рисунок 405 × 512), — они как раз у низа
   рамки; на рисунке пальцы на 96,7 %, поэтому рисунок опущен на 3 %. Поле
   режет всё за своим краем, поэтому дятел стоит снаружи, на полке нулевой
   высоты под полем, как паук. Стоит спокойно: стука и рывков нет
   («убери у него подёргивания»). */
.hs-perch{position:relative;z-index:2;flex:none;height:0;pointer-events:none}
.hs-bird{--bw:66px;position:absolute;right:calc(var(--hw-web-w) + 168px);bottom:0;width:var(--bw)}
.hs-bird>img{translate:0 3%}

/* Хореография загрузки (motion-design: один почерк, одна история).
   Слова поднимаются по очереди; неделя наполняется бронями волной слева
   направо, как идёт время, падает черта «сейчас» (styles/artifacts.css);
   когда неделя собралась, на край поля встаёт дятел. Дальше неделя сама
   меняет вид. Всё на прозрачности и сдвиге: это ведёт видеокарта. */
@media (prefers-reduced-motion:no-preference){
  @keyframes up{from{opacity:0;transform:translateY(22px)}}
  .hero-copy>*{animation:up 760ms var(--ease-out) backwards}
  .hero-copy>:nth-child(2){animation-delay:70ms}
  .hero-copy>:nth-child(3){animation-delay:140ms}
  .hero-copy>:nth-child(4){animation-delay:200ms}
  .hs-bird{animation:up 640ms var(--ease-out) 1180ms backwards}
}

/* Под полем: красное поле светит на пол страницы (неподвижный отсвет,
   ничего не перерисовывается), а через всю ширину плывёт продолжение
   заголовка — что и на сколько сдают: «сауну на три часа», «глэмпинг на
   две ночи». Крупно, но приглушённо: что — светлее, на сколько — тише.
   Строка входит сразу за заголовком, медленно идёт сама, от прокрутки
   чуть уезжает дальше, под мышью замирает, чтобы прочесть. «Листайте дальше» владелец назвал заезженным
   (1.10). Свет посередине: неподвижная маска гасит строку к краям, и
   каждая фраза, проплывая под отсветом поля, разгорается и снова тускнеет.
   Вся строка — кнопка барабана скидок (ниже): клик крутит. */
.hero-next{position:relative;flex:1;min-height:76px;display:grid;align-items:center;overflow:hidden;
  --hb-light:linear-gradient(to right,transparent,rgb(0 0 0 / .3) 12%,rgb(0 0 0 / .62) 30%,#000 50%,rgb(0 0 0 / .62) 70%,rgb(0 0 0 / .3) 88%,transparent);
  -webkit-mask-image:var(--hb-light);mask-image:var(--hb-light)}
.hero-next::before{content:'';position:absolute;left:50%;top:0;width:min(1180px,92%);height:min(100%,260px);transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0,rgb(190 84 52 / var(--glow,.12)),transparent 78%)}
[data-theme="dark"] .hero-next{--glow:.2}
.hb-drift{position:relative}
.hb-line{display:flex;width:max-content}
.hb-set{display:flex;gap:1.1em;margin:0;padding-right:1.1em;font-size:clamp(28px,min(5.8svh,5vw),58px);line-height:1.15;letter-spacing:-.035em;white-space:nowrap}
.hb-it{position:relative;color:var(--hb-ink-2,rgb(23 24 26 / .3));font-weight:500;text-decoration:none;transition:color 200ms ease}
.hb-it b{color:var(--hb-ink,rgb(23 24 26 / .68));font-weight:750;transition:color 200ms ease}
.hb-it b,.hb-it>span{display:inline-block}
[data-theme="dark"] .hero-next{--hb-ink:rgb(241 242 243 / .7);--hb-ink-2:rgb(241 242 243 / .28)}
.hb-it:hover{color:var(--ink-2)}
.hb-it:hover b{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  /* Вход сразу за заголовком, тем же почерком, что и весь первый экран:
     строка въезжает справа с разгона и тормозит до своего тихого хода (как
     прокрутка с инерцией, apple-design §6), а фразы поднимаются волной
     слева направо, как слова заголовка и брони недели: сначала что, следом
     на сколько. Дальше строка идёт по кругу (два одинаковых набора, сдвиг
     на половину) и от прокрутки уезжает ещё. */
  @keyframes hb-run{to{transform:translateX(-50%)}}
  @keyframes hb-in{from{opacity:0;transform:translateX(14vw)}}
  @keyframes hb-word{from{opacity:0;transform:translateY(.42em)}}
  .hero-next>.hb-drift{animation:hb-in 1800ms cubic-bezier(.16,1,.3,1) 300ms backwards}
  .hb-it b{animation:hb-word 760ms var(--ease-out) calc(420ms + var(--k,0) * 90ms) backwards}
  .hb-it>span{animation:hb-word 760ms var(--ease-out) calc(530ms + var(--k,0) * 90ms) backwards}
  /* Длительность круга растёт с числом примеров (--hb-dur, 12 с на
     пример): скорость строки одна при любом списке. */
  .hb-line{animation:hb-run var(--hb-dur,120s) linear infinite}
  .hero-next:hover .hb-line{animation-play-state:paused}
  .hero-next.is-away .hb-line{animation-play-state:paused}
  @supports (animation-timeline:scroll()){
    @keyframes hb-shift{to{transform:translateX(-16vw)}}
    .hb-set{animation:hb-shift linear both;animation-timeline:scroll(root);animation-range:0px 700px}
  }
}

/* ── Хэллоуин (site/season.mjs: с 1 октября по 1 ноября) ─────────────
   Строка остаётся собой: те же фразы и тот же ход. Между фразами вместо
   пустого места знаки праздника по кругу: тыква, летучая мышь, привидение
   (Tabler Icons, MIT), контуром цвета хохолка: красно-оранжевый бренда
   и есть тыквенный. Знак поднимается следом за фразой, той же волной.
   Посередине, где строка разгорается, свет поля становится свечой в тыкве:
   теплее и чуть дрожит. В правом нижнем углу поля белая паутина, из-под
   края поля под ней на нитке спускается паук и покачивается. Бесконечное
   здесь только прозрачность, сдвиг и поворот, и только пока строка на
   экране; при «уменьшить движение» всё стоит. */
:root{
  --hw-pumpkin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15l1.5 1l1.5 -1l1.5 1l1.5 -1'/%3E%3Cpath d='M10 11h.01'/%3E%3Cpath d='M14 11h.01'/%3E%3Cpath d='M17 6.082c2.609 .588 3.627 4.162 2.723 7.983c-.903 3.82 -2.75 6.44 -5.359 5.853a3.355 3.355 0 0 1 -.774 -.279a3.728 3.728 0 0 1 -1.59 .361c-.556 0 -1.09 -.127 -1.59 -.362a3.296 3.296 0 0 1 -.774 .28c-2.609 .588 -4.456 -2.033 -5.36 -5.853c-.903 -3.82 .115 -7.395 2.724 -7.983c1.085 -.244 1.575 .066 2.585 .787c.716 -.554 1.54 -.869 2.415 -.869c.876 0 1.699 .315 2.415 .87c1.01 -.722 1.5 -1.032 2.585 -.788'/%3E%3Cpath d='M12 6c0 -1.226 .693 -2.346 1.789 -2.894l.211 -.106'/%3E%3C/svg%3E");
  --hw-bat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 16c.74 -2.286 2.778 -3.762 5 -3c-.173 -2.595 .13 -5.314 -2 -7.5c-1.708 2.648 -3.358 2.557 -5 2.5v-4l-3 2l-3 -2v4c-1.642 .057 -3.292 .148 -5 -2.5c-2.13 2.186 -1.827 4.905 -2 7.5c2.222 -.762 4.26 .714 5 3c2.593 0 3.889 .952 5 4c1.111 -3.048 2.407 -4 5 -4'/%3E%3Cpath d='M9 8a3 3 0 0 0 6 0'/%3E%3C/svg%3E");
  --hw-ghost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7'/%3E%3Cpath d='M10 10h.01'/%3E%3Cpath d='M14 10h.01'/%3E%3C/svg%3E");
  --hw-ink:var(--crest);--hw-silk:rgb(23 24 26 / .34);--hw-spider-ink:#2C2E31}
[data-theme="dark"]{--hw-ink:color-mix(in srgb,var(--crest),#fff 22%);--hw-silk:rgb(241 242 243 / .34);--hw-spider-ink:#9DA2A8}
[data-season="halloween"] .hb-set{gap:1.8em;padding-right:1.8em}
[data-season="halloween"] .hb-it::after{content:'';position:absolute;left:100%;top:50%;width:.8em;height:.8em;margin:-.33em 0 0 .5em;pointer-events:none;
  background:var(--hw-ink);-webkit-mask:var(--hw-glyph,var(--hw-pumpkin)) center/contain no-repeat;mask:var(--hw-glyph,var(--hw-pumpkin)) center/contain no-repeat}
/* Знаки чуть наклонены, каждый по-своему: вырезаны руками, а не по линейке. */
[data-season="halloween"] .hb-it::after{rotate:-5deg}
[data-season="halloween"] .hb-it:nth-child(3n+2){--hw-glyph:var(--hw-bat)}
[data-season="halloween"] .hb-it:nth-child(3n+2)::after{rotate:-9deg}
[data-season="halloween"] .hb-it:nth-child(3n){--hw-glyph:var(--hw-ghost)}
[data-season="halloween"] .hb-it:nth-child(3n)::after{rotate:7deg}
/* Ночью у тыквы тёплый ореол, как от свечи внутри. */
[data-season="halloween"][data-theme="dark"] .hb-it:nth-child(3n+1)::before{content:'';position:absolute;left:100%;top:50%;width:1.7em;height:1.7em;margin:-.78em 0 0 .05em;pointer-events:none;
  background:radial-gradient(closest-side,rgb(232 118 58 / .26),transparent)}
[data-season="halloween"] .hero-next{--glow:.17}
[data-season="halloween"][data-theme="dark"] .hero-next{--glow:.3}
[data-season="halloween"] .hero-next::before{background:radial-gradient(50% 100% at 50% 0,rgb(222 112 50 / var(--glow)),transparent 78%)}
/* Паутина в углу поля, нарисована в hero.mjs. Паук висит под её нижним
   краем (на трети ширины паутины от края окна), у самого края окна, где
   строка уже погасла: слова идут за ним, но он их не закрывает. Подвеска
   обрезана краем поля: нить уходит под него. Паук мультяшный и только
   покачивается вместе с нитью вокруг точки крепления: не спускается и не
   пружинит (4.10: пугает прежде всего движение). */
.hero{--hw-web-w:clamp(140px,14vw,210px)}
.hw-web,.hw-hang{display:none}
[data-season="halloween"] .hw-web{display:block;position:absolute;right:0;bottom:0;width:var(--hw-web-w);height:auto;aspect-ratio:1;overflow:visible;pointer-events:none}
.hw-dew{opacity:.8}
[data-season="halloween"] .hw-hang{display:block;position:relative;z-index:2;flex:none;height:0;pointer-events:none}
.hw-swing{position:absolute;top:0;right:calc(var(--hw-web-w) * .32 - 18px);width:36px;height:130px;overflow:hidden;transform-origin:50% 0}
.hw-hold{position:absolute;left:0;top:16px;width:36px}
.hw-hold::before{content:'';position:absolute;left:50%;bottom:calc(100% - 9px);width:1px;height:220px;margin-left:-.5px;background:var(--hw-silk)}
.hw-spider{display:block;width:36px;height:auto;overflow:visible}
.hw-legs{stroke:var(--hw-spider-ink)}
.hw-body{fill:var(--hw-spider-ink)}
.hw-gloss{fill:#FFFFFF;opacity:.24}
.hw-eye{fill:#FFFFFF}
.hw-pupil{fill:#17181A}
.hw-smile{stroke:#FFFFFF;opacity:.85}
@media (prefers-reduced-motion:no-preference){
  /* Вход: строка приехала, фразы поднялись, проступают паутина и паук,
     потом паук покачивается на нити. Свеча дрожит неровно. */
  @keyframes hw-web-in{from{opacity:0;transform:scale(.94)}}
  @keyframes hw-fade{from{opacity:0}}
  @keyframes hw-sway{from{rotate:-3deg}to{rotate:3deg}}
  @keyframes hw-flicker{0%,100%{opacity:1}9%{opacity:.76}14%{opacity:.95}31%{opacity:.84}37%{opacity:1}58%{opacity:.87}64%{opacity:.98}81%{opacity:.8}87%{opacity:1}}
  [data-season="halloween"] .hb-it::after{animation:hb-word 760ms var(--ease-out) calc(640ms + var(--k,0) * 90ms) backwards}
  [data-season="halloween"] .hw-web{transform-origin:100% 100%;animation:hw-web-in 1400ms var(--ease-out) 1300ms backwards}
  [data-season="halloween"] .hw-hold{animation:hw-fade 1200ms ease 1700ms backwards}
  [data-season="halloween"] .hw-swing{animation:hw-sway 3.6s ease-in-out infinite alternate}
  [data-season="halloween"] .hero-next::before{animation:hw-flicker 3.8s ease-in-out infinite}
  .hero-next.is-away::before,.hero:has(.hero-next.is-away) .hw-swing{animation-play-state:paused}
}

/* ── Новый год и Рождество (site/season.mjs: с 1 декабря по 14 января;
   владелец 10.10: «красивое оформление, новогоднее, рождественское»).
   Предметы — Higgsfield той же руки, что предметы сайта. Там, где на
   Хэллоуин паутина, из угла поля растёт еловая ветка с шарами и огоньками;
   на поле тихо идёт снег; вместо паука на ленте висит красный шар и
   покачивается; между фразами строки — ёлочка, подарок и снежинка. Снег —
   двадцать точек: колонка во всю высоту поля едет вниз, точка в ней
   покачивается вбок (только transform и opacity); идёт, только пока поле на
   экране (scripts/play.mjs ставит .is-off). */
.ny-corner,.ny-snow,.ny-hang{display:none}
[data-season="newyear"] .ny-corner{display:block;position:absolute;right:0;bottom:0;width:clamp(150px,15vw,230px);height:auto;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgb(60 14 4 / .28))}
[data-season="newyear"] .ny-snow{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ny-snow i{position:absolute;top:0;left:var(--x);width:var(--s);height:100%}
.ny-snow i::before{content:'';position:absolute;left:0;bottom:0;width:var(--s);height:var(--s);border-radius:50%;background:#FFFFFF;opacity:.72}
[data-season="newyear"] .ny-hang{display:block;position:relative;z-index:2;flex:none;height:0;pointer-events:none}
/* Бант ленты — на ветке в углу поля (на 64 px выше края поля), шар
   свисает за край к строке; качается вокруг банта. Лента и бант — часть
   рисунка, не линия. */
.ny-swing{position:absolute;top:-64px;right:clamp(30px,3.6vw,56px);width:48px;transform-origin:50% 6%}
.ny-ornament{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 12px rgb(60 14 4 / .24))}
[data-season="newyear"] .hb-set{gap:1.8em;padding-right:1.8em}
[data-season="newyear"] .hb-it::after{content:'';position:absolute;left:100%;top:50%;width:.95em;height:.95em;margin:-.52em 0 0 .42em;pointer-events:none;
  background:var(--ny-glyph,url(/site/objects/ny-tree-96.webp)) center/contain no-repeat;rotate:-4deg}
[data-season="newyear"] .hb-it:nth-child(3n+2){--ny-glyph:url(/site/objects/ny-gift-96.webp)}
[data-season="newyear"] .hb-it:nth-child(3n+2)::after{rotate:6deg}
[data-season="newyear"] .hb-it:nth-child(3n){--ny-glyph:url(/site/objects/ny-flake-96.webp)}
[data-season="newyear"] .hb-it:nth-child(3n)::after{rotate:-9deg}
[data-season="newyear"] .hero-next{--glow:.16}
[data-season="newyear"][data-theme="dark"] .hero-next{--glow:.26}
[data-season="newyear"] .hero-next::before{background:radial-gradient(50% 100% at 50% 0,rgb(236 186 96 / var(--glow)),transparent 78%)}
@media (prefers-reduced-motion:no-preference){
  /* Вход: ветка вырастает из угла, когда поле уже собралось; шар
     проявляется и покачивается на ленте; знаки встают с фразами. */
  @keyframes ny-fall{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,3%,0)}}
  @keyframes ny-drift{from{transform:translateX(calc(var(--dx) * -1))}to{transform:translateX(var(--dx))}}
  @keyframes ny-corner-in{from{opacity:0;transform:translate(16px,20px) rotate(7deg) scale(.9)}}
  @keyframes ny-sway{from{rotate:-2.5deg}to{rotate:2.5deg}}
  [data-season="newyear"] .ny-snow i{animation:ny-fall var(--t) linear var(--dl) infinite}
  [data-season="newyear"] .ny-snow i::before{animation:ny-drift calc(var(--t) / 3) ease-in-out var(--dl) infinite alternate}
  .ny-snow.is-off i,.ny-snow.is-off i::before{animation-play-state:paused}
  [data-season="newyear"] .ny-corner{transform-origin:100% 100%;animation:ny-corner-in 1300ms var(--ease-out) 1300ms backwards}
  [data-season="newyear"] .ny-ornament{animation:hw-fade 1000ms ease 1700ms backwards}
  [data-season="newyear"] .ny-swing{animation:ny-sway 4.2s ease-in-out infinite alternate}
  [data-season="newyear"] .hb-it::after{animation:hb-word 760ms var(--ease-out) calc(640ms + var(--k,0) * 90ms) backwards}
  .hero:has(.hero-next.is-away) .ny-swing{animation-play-state:paused}
}
@media (max-width:767px){
  /* Телефон: строки нет — нет и шара; ветка не спорит с биркой; снега
     меньше. */
  [data-season="newyear"] .ny-corner,[data-season="newyear"] .ny-hang{display:none}
  .ny-snow i:nth-child(n+13){display:none}
}

/* ── барабан скидок (пасхалка, spec сайта §6.1) ──────────────────────
   Строку можно схватить: фразы размываются, на их месте проступает лента
   купонов (размытие склеивает смену, emil), посередине — красный язычок,
   как у колеса фортуны. Лента ходит за рукой и крутится по инерции
   (scripts/spin.mjs). Купон против язычка приподнят; на котором барабан
   встал — загорается, из него вылетает карточка приза. Маска полосы
   гасит купоны к краям — окно барабана. */
.hero{position:relative}
.hero-next{cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none}
.hero-next:focus-visible::after{content:'';position:absolute;inset:6px 24%;border-radius:28px;box-shadow:inset 0 0 0 2px var(--crest);pointer-events:none}
.hero-next[aria-busy="true"]{cursor:progress}
.hero-next.is-grab{cursor:grabbing}
.hb-line{transition:opacity 200ms ease,filter 200ms ease}
.hero-next.is-spin .hb-line{opacity:0;filter:blur(10px)}
.hero-next.is-spin .hb-drift{pointer-events:none}
.hb-prizes{position:absolute;inset:0;display:flex;align-items:center;opacity:0;filter:blur(10px);pointer-events:none;
  transition:opacity 260ms ease 40ms,filter 260ms ease 40ms}
.hero-next.is-spin .hb-prizes{opacity:1;filter:none}
.hb-ribbon{position:relative;z-index:1;display:flex;gap:16px;width:max-content;will-change:transform}
/* Окно барабана: утопленный жёлоб с тенью сверху и снизу, как цилиндр
   под светом спереди; к краям поверхность темнеет, уходя за изгиб. Окно
   стоит, едет только лента. Выигрыш — кайма окна коротко вспыхивает. */
.hb-prizes::before,.hb-prizes::after{content:'';position:absolute;left:4%;right:4%;top:50%;height:102px;margin-top:-51px;border-radius:28px;pointer-events:none}
.hb-prizes::before{z-index:0;
  background:linear-gradient(180deg,#E7E7E2 0%,#F3F3EF 16%,#FAFAF7 50%,#F3F3EF 84%,#E4E4DE 100%);
  box-shadow:inset 0 3px 6px rgb(23 24 26 / .09),inset 0 -2px 5px rgb(23 24 26 / .06),0 1px 0 #FFFFFF,0 0 0 1px rgb(23 24 26 / .04);
  transition:box-shadow 300ms ease}
.hb-prizes::after{z-index:2;background:linear-gradient(90deg,rgb(23 24 26 / .1),transparent 26%,transparent 74%,rgb(23 24 26 / .1))}
.hero-next.is-won .hb-prizes::before{box-shadow:inset 0 3px 6px rgb(23 24 26 / .09),inset 0 -2px 5px rgb(23 24 26 / .06),0 1px 0 #FFFFFF,0 0 0 2px color-mix(in srgb,var(--crest) 45%,transparent)}
[data-theme="dark"] .hb-prizes::before{background:linear-gradient(180deg,#1E2023 0%,#26282C 16%,#2C2F33 50%,#26282C 84%,#1C1E21 100%);
  box-shadow:inset 0 3px 6px rgb(0 0 0 / .4),inset 0 -2px 5px rgb(0 0 0 / .3),0 1px 0 rgb(255 255 255 / .05)}
[data-theme="dark"] .hb-prizes::after{background:linear-gradient(90deg,rgb(0 0 0 / .3),transparent 26%,transparent 74%,rgb(0 0 0 / .3))}
/* Купон — белый билетик с вырезами по бокам, как бланк брони и билет
   демо; джекпот — красный, как поле хохолка. */
.hb-cp{
  --cp-bg:#FFFFFF;--cp-ink:#17181A;--cp-ink-2:#64676A;--cp-edge:rgb(23 24 26 / .1);
  flex:none;display:grid;align-content:center;justify-items:center;gap:3px;width:168px;height:78px;border-radius:16px;
  background:var(--cp-bg);color:var(--cp-ink);box-shadow:inset 0 0 0 1px var(--cp-edge),inset 0 1px 0 rgb(255 255 255 / .9);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 8px,#000 8.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 8px,#000 8.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,#0000 8px,#000 8.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 8px,#000 8.5px) right/51% 100% no-repeat;
  transition:scale 220ms var(--ease-out)}
.hb-cp b{font-size:30px;line-height:1;font-weight:800;letter-spacing:-.045em}
.hb-cp em{font-style:normal;font-size:13px;line-height:1.2;font-weight:600;color:var(--cp-ink-2)}
.hb-cp.is-jackpot{--cp-bg:var(--crest);--cp-ink:#FFFFFF;--cp-ink-2:rgb(255 255 255 / .82);--cp-edge:rgb(255 255 255 / .18)}
.hb-cp.is-jackpot b{font-size:26px}
[data-theme="dark"] .hb-cp:not(.is-jackpot){--cp-bg:#34373C;--cp-ink:#F1F2F3;--cp-ink-2:#AEB3B8;--cp-edge:rgb(255 255 255 / .08)}
.hb-cp.is-at{scale:1.06}
@keyframes hb-won{0%{scale:1.06}40%{scale:1.2}70%{scale:1.1}100%{scale:1.14}}
/* Купоны собираются от язычка к краям (--d ставит сценарий по
   расстоянию), выпрыгивая снизу. */
@keyframes hb-cp-in{from{opacity:0;translate:0 22px}}
.hero-next.is-spin .hb-cp{animation:hb-cp-in 380ms cubic-bezier(.34,1.36,.64,1) var(--d,0ms) backwards}
.hero-next.is-spin .hb-cp.is-won{scale:1.14;animation:hb-won 520ms cubic-bezier(.34,1.36,.64,1)}
.hb-cp{opacity:var(--edge,1)}
.hero-next.is-won .hb-cp:not(.is-won){opacity:calc(var(--edge,1) * .5);transition:opacity 300ms ease}
/* Язычок: красный клин на тёмной заклёпке над купоном посередине; на
   каждом купоне вздрагивает, качаясь вокруг заклёпки (сценарий). */
.hb-pin{position:absolute;z-index:3;left:50%;top:calc(50% - 39px - 17px);width:24px;height:20px;margin-left:-12px;transform-origin:50% 4px;
  filter:drop-shadow(0 2px 2px rgb(60 15 0 / .3))}
/* Клин с мягким остриём: контур вырезан кривой, сверху на нём заклёпка. */
.hb-pin::before{content:'';position:absolute;left:4px;top:4px;width:16px;height:15px;background:linear-gradient(180deg,#D06644,#B24C2E);
  clip-path:path('M0 0H16L9.6 12.6Q8 15 6.4 12.6Z')}
.hb-pin::after{content:'';position:absolute;left:9px;top:1px;width:6px;height:6px;border-radius:50%;background:#2C2E31;box-shadow:inset 0 1px 0 rgb(255 255 255 / .25)}

/* Карточка приза: белая бумага над полосой, против язычка. Вылетает из
   выигравшего купона (сценарий ведёт её от его места и размера). Внутри —
   билет: красный купон с тем, что выпало, отрывной корешок с кодом; на
   купон падает печать, как «Оплачено» на бланке и «Принято» на квитанции. */
.hb-scrim{position:absolute;z-index:7;inset:0 0 var(--band-h,96px) 0;border-radius:0 0 48px 48px;background:rgb(26 8 2 / .34);opacity:0;pointer-events:none;
  transition:opacity 300ms ease}
.hero.is-prize .hb-scrim{opacity:1;pointer-events:auto}
.hb-win{
  position:absolute;z-index:8;left:50%;bottom:calc(var(--band-h,96px) - 6px);translate:-50% 0;width:min(388px,calc(100vw - 32px));
  padding:20px 20px 20px;border-radius:28px;background:#FFFFFF;color:#17181A;text-align:center;
  box-shadow:0 0 0 1px rgb(23 24 26 / .06),0 40px 80px -30px rgb(40 12 6 / .6),0 14px 30px -14px rgb(40 12 6 / .35);
}
.hb-win:focus{outline:none}
.hb-win-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#F4F4F1;color:#45474A;cursor:pointer;
  transition:background-color var(--t-ui) ease,scale var(--t-press) var(--ease-out)}
.hb-win-x svg{width:16px;height:16px}
.hb-win-x:active{scale:.92}
@media (hover:hover) and (pointer:fine){.hb-win-x:hover{background:#EAEAE6;color:#17181A}}
.hb-win-eyebrow{padding-top:4px;font-size:15px;font-weight:650;color:#45474A}
/* Билет: купон и корешок по линии отрыва; вырезы сверху и снизу у линии. */
.hb-ticket{
  --stub:128px;--notch:9px;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);margin-top:14px;height:132px;border-radius:18px;text-align:left;
  -webkit-mask:radial-gradient(circle at calc(100% - var(--stub)) 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)) top/100% 51% no-repeat,
               radial-gradient(circle at calc(100% - var(--stub)) 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle at calc(100% - var(--stub)) 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)) top/100% 51% no-repeat,
       radial-gradient(circle at calc(100% - var(--stub)) 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)) bottom/100% 51% no-repeat;
}
.hb-ticket-main{position:relative;display:grid;align-content:end;gap:4px;padding:0 20px 20px;overflow:hidden;color:#FFFFFF;
  background:radial-gradient(80% 120% at 0% 0%,rgb(255 255 255 / .16),transparent 60%),#BE5434}
.hb-ticket-big{font-size:46px;line-height:.95;font-weight:800;letter-spacing:-.05em}
.hb-ticket-small{font-size:14px;font-weight:600;color:rgb(255 255 255 / .86)}
.hb-win.is-jackpot .hb-ticket-big{font-size:38px}
.hb-win.is-jackpot .hb-ticket-main{background:radial-gradient(80% 120% at 0% 0%,rgb(255 255 255 / .2),transparent 60%),linear-gradient(135deg,#C9603D,#A9472C)}
.hb-ticket-stub{position:relative;display:grid;align-content:center;justify-items:center;gap:10px;padding:0 10px;background:#F4F4F1}
.hb-ticket-stub::before{content:'';position:absolute;left:-1px;top:14px;bottom:14px;border-left:2px dashed rgb(23 24 26 / .2)}
.hb-win-code-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:700;letter-spacing:.04em;color:#17181A;-webkit-user-select:all;user-select:all}
.hb-win-copy{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border:0;border-radius:999px;background:#17181A;color:#FFFFFF;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background-color var(--t-ui) ease,scale var(--t-press) var(--ease-out)}
.hb-copy-ok{display:none;width:14px;height:14px;margin-left:-3px}
.hb-win-copy.is-done .hb-copy-ok{display:block}
.hb-win-copy:active{scale:.95}
.hb-win-copy.is-done{background:#2F6B4F}
/* Пломба Tukelo в верхнем углу купона: белая розетка, красные кольца,
   по кругу TUKELO, в середине дятел в своих цветах (без фильтров: знак не
   перекрашивается). Падает с ударом, купон коротко проседает. */
.hb-seal{position:absolute;right:8px;top:8px;width:68px;height:68px;transform:rotate(-12deg)}
.hb-seal-disc{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgb(60 15 0 / .35))}
.hb-seal-mark{position:absolute;left:50%;top:50%;width:auto;height:24px;translate:-50% -54%}
@media (prefers-reduced-motion:no-preference){
  @keyframes hb-seal-in{0%{opacity:0;transform:rotate(-30deg) scale(1.9)}68%{opacity:1;transform:rotate(-10deg) scale(.92)}100%{transform:rotate(-12deg)}}
  @keyframes hb-ticket-thud{0%,100%{transform:none}50%{transform:scale(.985)}}
  .hb-win.is-in .hb-seal{animation:hb-seal-in 380ms cubic-bezier(.2,0,0,1) 560ms both}
  .hb-win.is-in .hb-ticket{animation:hb-ticket-thud 200ms ease 780ms}
}
.hb-win-sub{margin-top:14px;font-size:14.5px;line-height:1.4;color:#45474A;text-wrap:balance}
.hb-win-note{margin-top:4px;font-size:13.5px;line-height:1.4;color:#64676A;text-wrap:balance}
.hb-win-cta{width:100%;margin-top:16px;--ink:#17181A;--on-ink:#FFFFFF;--ink-hover:#2C2E31}
.hb-win :focus-visible{outline:2px solid #BE5434;outline-offset:2px}
.hb-confetti{position:fixed;z-index:60;width:0;height:0;pointer-events:none}
.hb-confetti i{position:absolute;left:-4px;top:-6px;width:8px;height:12px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.hb-line,.hb-prizes{transition:opacity 160ms ease;filter:none!important}}

/* Живой дятел: постер сразу, клип проступает, когда готов. Знак не
   перекрашивается и не фильтруется. */
.bird{pointer-events:none}
.bird img,.bird video{display:block;width:100%;height:auto}
.bird video{position:absolute;inset:0;opacity:0;transition:opacity 400ms linear}
.bird.is-alive video{opacity:1}
.bird.is-alive img{opacity:0}
/* Новогодний дятел: на месте обычного, тем же ростом и теми же лапами на
   той же линии (рамка зимнего кадра 164 × 174, обычного 405 × 512 —
   высота по обычному); обычный кадр держит место невидимым. */
.bird-ny{display:none}
[data-season="newyear"] .bird>img,[data-season="newyear"] .bird.is-alive>img{visibility:hidden;opacity:1}
[data-season="newyear"] .bird>video{display:none}
/* Рост зимнего кадра — 112 % обычного: шапка добавляет сверху, тело того
   же размера; ширина — по пропорции кадра, а не от картинки по кругу. */
[data-season="newyear"] .bird-ny{display:block;position:absolute;left:50%;bottom:0;height:112%;aspect-ratio:164 / 174;translate:-54% 0}
[data-season="newyear"] .bird-ny img{display:block;width:100%;height:100%}

/* ── шапка раздела ─────────────────────────────────────────────────── */
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:20px var(--gutter);margin-bottom:clamp(36px,4.5vw,56px)}
.sec-head .lead{max-width:34ch;padding-bottom:8px}

/* ── кому подойдёт: выходные разных мест ─────────────────────────────
   Один календарь на трое суток, строка — вид заведения в своём ритме.
   Заголовок и пояснение стопкой (не врозь по краям). Строка целиком —
   ссылка: под мышью поднимается, стрелка уходит вперёд. */
/* Отступ сверху меньше обычного: над разделом уже стоит полоса
   с подсказкой под первым экраном. */
.kinds{padding-top:clamp(32px,4vw,64px)}
.nw-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(36px,4vw,52px)}
.nw-head .lead{max-width:56ch}
.nw{--who:300px;--go:44px;display:grid;padding:10px;border-radius:30px;background:var(--bg-2)}
.nw-days{display:grid;grid-template-columns:var(--who) 1fr var(--go);gap:0 24px;padding:8px 18px 10px}
.nw-days-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.nw-day{position:relative;font-size:14px;font-weight:700;color:var(--ink-2);padding-left:8px;border-left:1px solid var(--line)}
.nw-day::before,.nw-day::after{position:absolute;bottom:-1px;font-size:10.5px;font-weight:500;color:var(--ink-3);transform:translateX(-50%)}
.nw-day::before{content:'12';left:25%}
.nw-day::after{content:'18';left:62.5%}
.nw-row{
  display:grid;grid-template-columns:var(--who) 1fr var(--go);align-items:center;gap:0 24px;padding:14px 18px;border-radius:22px;
  transition:background-color 240ms var(--ease-out),box-shadow 240ms var(--ease-out),transform var(--t-press) var(--ease-out);
}
.nw-row+.nw-row{margin-top:4px}
.nw-row:active{transform:scale(.995)}
.nw-who{display:flex;align-items:center;gap:14px;min-width:0}
.nw-who img{width:60px;height:60px;flex:none;object-fit:contain;filter:drop-shadow(0 8px 8px rgb(23 24 26 / .14));transition:transform 400ms var(--ease-out)}
.nw-who>span{display:grid;gap:3px;min-width:0}
.nw-who b{font-size:18px;line-height:1.2;font-weight:750;letter-spacing:-.018em}
.nw-who em{font-style:normal;font-size:13.5px;line-height:1.35;color:var(--ink-3)}
/* Дорожка трёх дней с 8:00 до 24:00. Деления по дням и засечки 12 и 18
   часов нарисованы на ленте: на телефоне лента шире дорожки втрое и
   листается вместе с бронями. */
.nw-track{position:relative;height:52px;overflow:hidden;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2)}
.nw-strip{
  position:absolute;inset:0;
  background-image:
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(90deg,transparent calc(25% - .5px),var(--line-2) calc(25% - .5px) calc(25% + .5px),transparent calc(25% + .5px)),
    linear-gradient(90deg,transparent calc(62.5% - .5px),var(--line-2) calc(62.5% - .5px) calc(62.5% + .5px),transparent calc(62.5% + .5px));
  background-size:calc(100% / 3) 100%;
}
.nw-switch{display:none}
.nw-bk{position:absolute;top:6px;bottom:6px;display:flex;align-items:center;overflow:hidden;border-radius:8px;font-style:normal;
  background:#E4EFE8;box-shadow:inset 3px 0 0 #2F6B4F,0 0 0 1px #BED4C9}
.nw-bk b{padding:0 6px 0 9px;font-size:12.5px;font-weight:700;color:#17181A;white-space:nowrap}
.nw-cont{display:none;position:absolute;top:50%;transform:translateY(-50%)}
.nw-bk[data-tone="hold"]{background:#FBF0DC;box-shadow:inset 3px 0 0 #B8790C,0 0 0 1px #E6D2A3}
.nw-bk[data-tone="gap"]{top:10px;bottom:10px;border-radius:5px;background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 5px);box-shadow:none}
.nw-go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:0 1px 2px var(--line);
  transition:transform 260ms var(--ease-out),background-color var(--t-ui) ease,color var(--t-ui) ease}
.nw-go .ic-arrow{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .nw-row:hover{background:var(--card);box-shadow:0 1px 2px var(--line),0 14px 30px -20px var(--shadow)}
  .nw-row:hover .nw-who img{transform:translateY(-3px) rotate(-3deg)}
  .nw-row:hover .nw-go{background:var(--ink);color:var(--on-ink);transform:translateX(3px)}
}
.nw-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nw-legend{display:flex;flex-wrap:wrap;gap:8px 22px;padding:12px 18px 6px calc(18px + var(--who) + 24px);font-size:13px;color:var(--ink-3)}
.nw-legend span{display:inline-flex;align-items:center;gap:7px}
.nw-legend i{width:14px;height:10px;border-radius:3px;background:#E4EFE8;box-shadow:inset 2px 0 0 #2F6B4F}
.nw-legend i[data-tone="hold"]{background:#FBF0DC;box-shadow:inset 2px 0 0 #B8790C}
.nw-legend i[data-tone="gap"]{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--line-2)}
/* Тёмная тема (apple-design, материалы и глубина): чем выше слой, тем он
   светлее — подложка блока, строка, дорожка идут ступенями, как
   системные фоны iOS (#1C1C1E → #2C2C2E → #3A3A3C). Цвета броней в тёмной
   теме ярче, а не глуше: цветная заливка на просвет и светлая подпись. */
[data-theme="dark"] .nw{background:#2A2C31;box-shadow:inset 0 1px 0 rgb(255 255 255 / .07)}
[data-theme="dark"] .nw-day{color:#D5D8DC;border-left-color:rgb(255 255 255 / .16)}
[data-theme="dark"] .nw-day::before,[data-theme="dark"] .nw-day::after{color:#8E9399}
[data-theme="dark"] .nw-track{background:#383B42;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07)}
[data-theme="dark"] .nw-strip{background-image:
  linear-gradient(90deg,rgb(255 255 255 / .14) 1px,transparent 1px),
  linear-gradient(90deg,transparent calc(25% - .5px),rgb(255 255 255 / .06) calc(25% - .5px) calc(25% + .5px),transparent calc(25% + .5px)),
  linear-gradient(90deg,transparent calc(62.5% - .5px),rgb(255 255 255 / .06) calc(62.5% - .5px) calc(62.5% + .5px),transparent calc(62.5% + .5px))}
[data-theme="dark"] .nw-bk{background:rgb(98 205 145 / .3);box-shadow:inset 3px 0 0 #6FD39C,inset 0 0 0 1px rgb(111 211 156 / .28)}
[data-theme="dark"] .nw-bk b{color:#EAF7EF}
[data-theme="dark"] .nw-bk[data-tone="hold"]{background:rgb(240 178 72 / .32);box-shadow:inset 3px 0 0 #F2B54E,inset 0 0 0 1px rgb(242 181 78 / .3)}
[data-theme="dark"] .nw-bk[data-tone="hold"] b{color:#FFF1D8}
[data-theme="dark"] .nw-bk[data-tone="gap"],[data-theme="dark"] .nw-legend i[data-tone="gap"]{background:repeating-linear-gradient(135deg,rgb(255 255 255 / .26) 0 2px,transparent 2px 5px);box-shadow:none}
[data-theme="dark"] .nw-legend{color:#A9AEB4}
[data-theme="dark"] .nw-legend i{background:rgb(98 205 145 / .3);box-shadow:inset 2px 0 0 #6FD39C}
[data-theme="dark"] .nw-legend i[data-tone="hold"]{background:rgb(240 178 72 / .32);box-shadow:inset 2px 0 0 #F2B54E}
[data-theme="dark"] .nw-go{background:#3A3D44;color:#F1F2F3;box-shadow:none}
[data-theme="dark"] .nw-who img{border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255 / .14),rgb(255 255 255 / .04) 70%,transparent);filter:drop-shadow(0 8px 10px rgb(0 0 0 / .45))}
[data-theme="dark"] .chip{background:#2E3136;color:#E6E8EA}
@media (hover:hover) and (pointer:fine){
  [data-theme="dark"] .nw-row:hover{background:#33363C;box-shadow:inset 0 1px 0 rgb(255 255 255 / .05),0 14px 30px -20px rgb(0 0 0 / .6)}
  [data-theme="dark"] .nw-row:hover .nw-go{background:#F1F2F3;color:#17181A}
  [data-theme="dark"] .chip:hover{background:#F1F2F3;color:#17181A}
}
/* Неделя наполняется, когда блок входит в окно: брони строки встают
   слева направо, строки — одна за другой. Шкала прокрутки CSS, без
   сценария; при «уменьшить движение» всё стоит сразу. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .nw-row .nw-bk{transform-origin:left center;animation:nw-in linear backwards;animation-timeline:view();
      animation-range:entry calc(10% + var(--m,0) * 2%) entry calc(60% + var(--m,0) * 2%)}
    @keyframes nw-in{from{opacity:0;transform:scaleX(.6)}}
  }
}

.kind-also{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.kind-also>span{font-size:16px;font-weight:600;color:var(--ink-3);margin-right:6px}
.chip{
  display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;
  background:var(--bg-2);font-size:15.5px;font-weight:500;color:var(--ink);
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-press) var(--ease-out);
}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip:hover{background:var(--ink);color:var(--on-ink)}}

/* ── что умеет: плитки ───────────────────────────────────────────────
   Навыки taste и apple-design: шесть плиток неравной величины, в каждой
   одна мысль — заголовок, одна фраза, одна вещь продукта. Плитки
   нейтральные; одна красная — главное обещание, одна тёмная — каналы.
   Вещи уходят за край плитки, как предмет за край стола. Шапка стопкой. */
.features{padding-top:var(--section-y)}
.ft-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(36px,4vw,52px)}
.ft{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;
  grid-template-areas:
    "call call call call call call call clash clash clash clash clash"
    "chats chats chats chats chats chats chats chats chats chats chats chats"
    "site site site site money money money money money money money money"
    "site site site site team team team team team team team team"
    "pay pay pay pay pay pay till till till till till till"
    "cert cert cert cert cert guest guest guest guest guest guest guest"
    "chan chan chan chan chan chan chan chan chan chan chan chan";
}
.ft-call{grid-area:call}.ft-clash{grid-area:clash}.ft-chats{grid-area:chats}.ft-site{grid-area:site}.ft-money{grid-area:money}.ft-team{grid-area:team}
.ft-pay{grid-area:pay}.ft-till{grid-area:till}.ft-certs{grid-area:cert}.ft-guests{grid-area:guest}.ft-channels{grid-area:chan}
/* Свет и кромка (high-end-visual-design, apple-design §12): нейтральная
   плитка освещена сверху слева и обведена изнутри волосяной линией, как
   выточенная; у страницы гостя снизу тёплый свет хохолка, сцена для
   телефона. */
.ft-tile{
  --pad:clamp(26px,3vw,44px);
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:24px;padding:var(--pad);border-radius:32px;
  background:radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 0 0 1px rgb(23 24 26 / .035);
}
.ft-site{background:radial-gradient(85% 42% at 50% 100%,color-mix(in srgb,var(--crest) 15%,transparent),transparent 72%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2)}
.ft-text{display:grid;gap:12px;max-width:34ch;position:relative;z-index:3}
.ft-title{font-size:clamp(26px,2.5vw,36px);line-height:1.08;font-weight:750;letter-spacing:-.032em;text-wrap:balance}
.ft-text p{font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--ink-2)}
.ft-scene{position:relative;flex:1;display:flex;align-items:flex-end;gap:clamp(16px,2vw,28px);min-height:0}
.ft-thing{position:relative;z-index:2;flex:0 1 auto;min-width:0}
.ft-tile .ui,.ft-tile .ar:not(.ar-receipt){box-shadow:0 1px 0 var(--line-2),0 30px 60px -34px var(--shadow),0 8px 20px -14px var(--shadow)}
/* Лоток: вещь лежит в рамке, как стекло в алюминиевом поддоне (двойная
   рамка, high-end-visual-design §4.A); радиус вещи — радиус лотка минус
   отступ, чтобы скругления шли концентрично. */
.ft-bezel{
  padding:6px;border-radius:28px;
  background:linear-gradient(180deg,rgb(255 255 255 / .8),rgb(255 255 255 / .42));
  box-shadow:0 0 0 1px rgb(23 24 26 / .05),0 1px 2px rgb(23 24 26 / .04),0 36px 64px -40px var(--shadow),0 12px 24px -18px var(--shadow);
}
.ft-tile .ft-bezel>:is(.ui,.ar){border:0;border-radius:22px;box-shadow:0 0 0 1px rgb(23 24 26 / .05),inset 0 1px 0 rgb(255 255 255 / .9)}
/* Предмет стоит рядом с вещью продукта, на дне плитки, со своим
   промежутком: не заходит на карточку и не режется краем плитки (владелец
   3.10: «иконки вылезают за края»). */
/* Тень — у картинки, а не у обёртки, которая едет за прокруткой: фильтр
   на движущемся слое видеокарта пересчитывала каждый кадр (замер 3.10). */
.ft-obj{position:relative;z-index:1;flex:none;align-self:flex-end;margin-left:auto;display:block;height:auto;pointer-events:none}
.ft-obj img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 18px rgb(23 24 26 / .18))}

/* Бронь, пока гость на линии: капсула и узнанный гость, телефон справа. */
.ft-call{min-height:480px}
.ft-calls{display:grid;justify-items:start;align-content:end}
.ft-call .ft-obj{width:clamp(150px,15vw,210px)}
.ft-call .ft-calls{flex:0 1 380px;min-width:290px}
.ft-call .ft-calls .ui-lookup{width:100%}
/* Двойной брони не бывает: красная плитка, белая дорожка вечера. */
.ft-clash{background:var(--crest-field);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .22)}
.ft-clash .ft-text p{color:rgb(255 255 255 / .86)}
.ft-clash .ft-scene{align-items:center}
/* Гости бронируют сами: высокий телефон уходит за нижний край. */
.ft-site .ft-scene{justify-content:center;margin-bottom:calc(-1 * var(--pad) - 60px)}
.ft-phone .ui-phone{width:310px}
/* Деньги и уборка: слово слева, вещь и предмет справа. */
.ft-money,.ft-team{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;min-height:330px}
.ft-money .ar-receipt,.ft-team .ar-task{width:100%}
.ft-money .ft-scene,.ft-team .ft-scene{align-self:stretch;align-items:center;justify-content:flex-start}
.ft-money .ft-obj,.ft-team .ft-obj{width:clamp(92px,8.5vw,128px)}
.ft-money .ft-thing,.ft-team .ft-thing{flex:0 1 290px;min-width:236px}
.ft-money .ft-thing,.ft-team .ft-thing{margin-block:-12px}
/* Онлайн-оплата и касса у стойки (до 28.10 — магазин) — пара в один ряд 6 + 6, как два телефона рядом:
   заголовки обеих плиток — в одну строку, слова под ними начинаются на
   одной высоте (taste: выравнивание ряда). (Владелец 10.10: оплата
   «в главные преимущества»; затем «некрасивые… некрасиво расположены
   элементы» — пересобрано по apple-design). Устройство одно на обе, как два
   экрана одного телефона: слова сверху; от нижнего края плитки встаёт лист
   — оплаты или заказа — и уходит под край, как лист на телефоне; рядом на
   той же линии стоит предмет. У оплаты под словами — знаки сервисов одной
   светлой капсулой; над листом после оплаты — уведомление. Тёплый свет
   хохолка — снизу, откуда встаёт лист. */
.ft-pay,.ft-till{padding-bottom:0;gap:26px;
  background:radial-gradient(56% 50% at 72% 100%,color-mix(in srgb,var(--crest) 12%,transparent),transparent 72%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2)}
.ft-pay .ft-text,.ft-till .ft-text{max-width:42ch}
/* Диагональ: слова сверху слева, лист снизу справа (apple-design: один
   взгляд сверху вниз наискосок). Предмет стоит впереди листа, у его
   левого нижнего угла, едва заходя на поле листа, не на кнопки: лист —
   экран, предмет — вещь на столе перед ним. Над листом оплаты — место
   уведомлению. */
.ft-pay .ft-scene,.ft-till .ft-scene{align-items:flex-end;justify-content:flex-end;gap:0;padding-top:34px}
.ft-sheet{position:relative;z-index:1;flex:0 1 320px;min-width:0}
:is(.ft-pay,.ft-till) .ft-obj{order:-1;z-index:2;align-self:flex-end;margin:0 -18px calc(var(--pad) - 14px) 0;width:clamp(116px,10vw,150px)}
/* Касса уже телефона с картой: тот же вес — чуть крупнее. */
.ft-till .ft-obj{width:clamp(128px,11.6vw,172px)}
/* Знаки сервисов — одна светлая капсула с тонкими разделителями: знаки
   чужие, их цвета не трогаем, поэтому подложка светлая в обеих темах (как
   в настройках продукта). */
.pay-svc{--logo-paper:#FFFFFF;justify-self:start;display:inline-flex;align-items:center;height:44px;margin-top:6px;padding:0 4px;border-radius:999px;background:var(--logo-paper);
  box-shadow:inset 0 0 0 1px rgb(23 24 26 / .07),0 1px 2px rgb(23 24 26 / .04),0 12px 22px -18px var(--shadow)}
.pay-logo{display:grid;place-items:center;height:26px;padding:0 14px}
.pay-logo+.pay-logo{box-shadow:inset 1px 0 0 rgb(23 24 26 / .1)}
.pay-logo svg{display:block;width:auto;height:20px}
.pay-logo[data-svc="robokassa"] svg{height:13px}
.pay-logo[data-svc="yookassa"] svg{height:19px}
.pay-logo[data-svc="tbank"] svg{height:21px}
.pay-logo[data-svc="aqsi"] svg{height:22px}
.pay-logo[data-svc="evotor"] svg{height:12px}
.pay-logo[data-svc="atol"] svg{height:17px}
/* Касса: капсула касс и рядом, отдельно, фирменный блок «Честного ЗНАКа» —
   той же высоты, своей жёлтой плашкой (брендбук: основная вариация; охранное
   поле — зазор до капсулы). */
.tl-brands{justify-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px}
.tl-brands .pay-svc{margin-top:0}
.tl-chz{display:block;width:auto;height:44px;border-radius:9px;box-shadow:0 1px 2px rgb(23 24 26 / .06),0 12px 22px -18px var(--shadow)}
[data-theme="dark"] .tl-chz{box-shadow:none}
/* Окно «i» кассы: кассы строками — знак на светлой бумаге, имя и как работает. */
.ti-tills{list-style:none;display:grid;gap:8px;margin:16px 0 0;padding:0}
.ti-tills li{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line-2)}
.ti-logo{display:grid;place-items:center;height:40px;border-radius:11px;background:#FFFFFF;box-shadow:inset 0 0 0 1px rgb(23 24 26 / .07)}
.ti-logo svg{display:block;width:auto;height:18px}
.ti-logo[data-svc="aqsi"] svg{height:21px}
.ti-logo[data-svc="evotor"] svg{height:11px}
.ti-logo[data-svc="atol"] svg{height:15px}
.ti-how{display:grid;gap:2px;min-width:0}
.ti-how b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ti-how em{font-style:normal;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
[data-theme="dark"] .ti-logo{background:#F1EFEA;box-shadow:none}
.ch-info-sign{display:inline-block;width:20px;height:20px;margin-left:8px;vertical-align:-4px;border-radius:5px}
[data-theme="dark"] .pay-svc{--logo-paper:#F1EFEA;box-shadow:none}
/* Сертификаты: карточка сертификата под словами. Гости: слово слева,
   картотека справа. */
.ft-certs{min-height:420px}
.ft-certs .ft-scene{justify-content:flex-start}
.ft-guests .ft-scene{position:static;align-items:flex-end}
/* Предмет гостей — ящик-картотека — в правом верхнем углу, рядом с заголовком, где была отметка Excel (владелец 28.10). */
.ft-guests .ft-obj{position:absolute;top:calc(var(--pad) - 18px);right:calc(var(--pad) - 4px);margin:0;width:clamp(150px,13.5vw,200px)}
.ft-guests .ft-thing{width:100%}
/* Каналы: плитка во всю ширину в теме страницы (владелец 3.10: «почему
   чёрная даже в светлой версии» — раньше она одна была тёмной). Своё у неё —
   мягкий зелёный отсвет за календарём: цвет «сверено» с отметки iCal. */
.ft-channels{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:24px clamp(28px,4vw,64px);min-height:340px;
  background:radial-gradient(48% 75% at 76% 52%,color-mix(in srgb,var(--ok) 26%,transparent),transparent 70%),radial-gradient(30% 50% at 98% 100%,color-mix(in srgb,var(--ok) 14%,transparent),transparent 70%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2)}
.ft-channels .ft-text{max-width:44ch}
.ft-channels .ft-scene{align-self:stretch;align-items:center;justify-content:flex-end}
.ft-channels .ft-thing{flex:0 1 580px}
/* Сообщения: вторая широкая плитка, вторым рядом под звонком — звонок и
   сообщение рядом. Вещь слева, слова справа: у каналов внизу наоборот, две
   широкие плитки не повторяют друг друга. Под словами — значки
   мессенджеров в доке площадок; в углу под ними предмет Higgsfield
   (облачка и самолётик): он стоит от плитки, а не от сцены. Свой свет —
   тёплый отсвет хохолка за окном. */
.ft-chats{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:24px clamp(28px,4vw,64px);min-height:520px;
  background:radial-gradient(46% 78% at 26% 46%,color-mix(in srgb,var(--crest) 13%,transparent),transparent 70%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2)}
.ft-chats .ft-text{align-self:start;max-width:36ch;padding-top:clamp(8px,2vw,28px)}
.ft-chats .ft-scene{position:static;order:-1;align-self:stretch;align-items:center;justify-content:flex-start}
.ft-chats .ft-thing{flex:0 1 652px;min-width:0}
.ft-chats .ft-obj{position:absolute;right:calc(var(--pad) - 6px);bottom:calc(var(--pad) - 10px);width:clamp(170px,15vw,220px);margin:0}
/* Знаки площадок под словами — значками приложений в доке: полупрозрачный
   лоток со светлой кромкой, в нём белые плитки со скруглением, знак внутри
   в своих цветах; последний — iCal. */
.ch-dock{display:flex;flex-wrap:wrap;gap:10px;width:max-content;max-width:100%;margin-top:18px;padding:8px;border-radius:24px;
  background:rgb(255 255 255 / .55);box-shadow:inset 0 1px 0 #FFFFFF,0 0 0 1px rgb(23 24 26 / .05),0 16px 32px -22px var(--shadow)}
.ch-app{display:grid;place-items:center;width:52px;height:52px;padding:9px;border-radius:15px;background:#FFFFFF;
  box-shadow:0 0 0 1px rgb(23 24 26 / .06),0 8px 16px -10px rgb(23 24 26 / .35),0 1px 2px rgb(23 24 26 / .08)}
.ch-app svg,.ch-app img{display:block;width:100%;height:100%;object-fit:contain}
.ch-app.is-full{padding:7px}
.ch-app.is-img,.ch-app.is-ical{padding:0;overflow:hidden}
.ch-app.is-ical svg rect{stroke:none}
.ch-more{margin-top:-2px;padding-left:4px;font-size:14.5px;font-weight:550;color:var(--ink-3)}
/* Значок «i» у заголовка: круг в жёлобе, как кнопки шапки; панель —
   поверх страницы, тем же материалом, что шапка и кнопка связи. */
.ch-info-btn{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;vertical-align:.12em;
  background:rgb(23 24 26 / .05);box-shadow:inset 0 1px 2px rgb(23 24 26 / .07),0 1px 0 rgb(255 255 255 / .9);color:var(--ink-3);cursor:pointer;
  transition:color 160ms ease,background-color 160ms ease,transform var(--t-press) var(--ease-out);-webkit-tap-highlight-color:transparent}
.ch-info-btn{position:relative}
.ch-info-btn::after{content:"";position:absolute;inset:-7px;border-radius:50%}
.ch-info-btn svg{width:20px;height:20px}
.ch-info-btn:active{transform:scale(.92)}
.ch-info-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ch-info-btn:hover{color:var(--ink);background:rgb(23 24 26 / .08)}}
[data-theme="dark"] .ch-info-btn{background:rgb(0 0 0 / .2);box-shadow:inset 0 1px 2px rgb(0 0 0 / .3),0 1px 0 rgb(255 255 255 / .05)}
.ch-info{display:none}
.ch-info:popover-open,.ch-info.is-open{display:block}
.ch-info{
  position:fixed;inset:auto;margin:0;width:min(460px,calc(100vw - 32px));max-height:80vh;overflow:auto;overscroll-behavior:contain;
  padding:20px 22px 22px;border:0;border-radius:26px;color:var(--ink);z-index:70;
  background:radial-gradient(90% 60% at 0% 0%,rgb(255 255 255 / .95),transparent 62%),var(--bg-2);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .95),inset 0 0 0 1px rgb(23 24 26 / .05),0 30px 60px -28px var(--shadow),0 4px 12px -6px var(--shadow);
  opacity:1;transform:none;
  transition:opacity 180ms ease,transform 260ms var(--ease-out),display 260ms allow-discrete,overlay 260ms allow-discrete;
}
.ch-info:not(:popover-open):not(.is-open){opacity:0;transform:translateY(6px) scale(.97)}
@starting-style{.ch-info:popover-open{opacity:0;transform:translateY(6px) scale(.97)}}
[data-theme="dark"] .ch-info{background:radial-gradient(90% 60% at 0% 0%,rgb(255 255 255 / .06),transparent 62%),var(--bg-2);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),inset 0 0 0 1px rgb(255 255 255 / .06),0 30px 60px -28px rgb(0 0 0 / .7)}
.ch-info-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.ch-info-mark{display:block;width:36px;height:36px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgb(23 24 26 / .06),0 6px 12px -8px rgb(23 24 26 / .4)}
.ch-info-mark svg{display:block;width:100%;height:100%}
.ch-info-head h4{margin:0;font-size:19px;line-height:1.2;font-weight:750;letter-spacing:-.02em}
.ch-info-x{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgb(23 24 26 / .05);color:var(--ink-2);cursor:pointer}
.ch-info-x svg{width:16px;height:16px}
.ch-info-x:active{scale:.94}
[data-theme="dark"] .ch-info-x{background:rgb(0 0 0 / .2)}
.ch-info-lead{margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* Шесть пунктов — нумерованными строками: порядок здесь и есть путь брони. */
.ch-info-list{list-style:none;counter-reset:ci;display:grid;gap:16px;margin:18px 0 0;padding:0}
.ch-info-list li{counter-increment:ci;position:relative;padding-left:34px}
.ch-info-list li::before{content:counter(ci);position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--card);box-shadow:0 0 0 1px var(--line);font-size:12px;font-weight:750;color:var(--ink-2)}
.ch-info-list h5{margin:0;padding-top:1px;font-size:15.5px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.ch-info-list p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
/* Схема суток и часов: та же дорожка, что в календаре плитки. */
.ch-day{margin:12px 0 10px;padding:12px 12px 10px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line-2)}
.ch-day-dates{display:flex;margin:0 0 6px;font-size:12px;font-weight:650;color:var(--ink-3)}
.ch-day-dates span{flex:none;padding-left:2px}
.ch-day-track{position:relative;height:40px;border-radius:10px;background:var(--fill)}
.ch-day-mid{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--line)}
.ch-day-own,.ch-day-night{position:absolute;top:5px;bottom:5px;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;border-radius:8px;font-style:normal}
.ch-day-own{justify-content:center;background:#E4EFE8;box-shadow:inset 3px 0 0 #2F6B4F,0 0 0 1px #BED4C9}
.ch-day-own b{font-size:11px;font-weight:700;color:#17181A;padding-left:2px}
.ch-day-night{padding:0 8px 0 5px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 2px 6px -3px var(--shadow)}
.ch-day-night .cw-logo{width:22px;height:22px}
.ch-day-night b{font-size:12px;font-weight:650;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-day-times{position:relative;height:16px;margin:6px 0 0;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.ch-day-times span{position:absolute;top:0;translate:-50% 0;white-space:nowrap}
[data-theme="dark"] .ch-day-own{background:rgb(98 205 145 / .3);box-shadow:inset 3px 0 0 #6FD39C,inset 0 0 0 1px rgb(111 211 156 / .28)}
[data-theme="dark"] .ch-day-own b{color:#EAF7EF}
@media (max-width:767px){
  /* Телефон: лист снизу во всю ширину, растёт снизу вверх, фон притемнён. */
  .ch-info{inset:auto 0 0 0;width:100%;max-height:86vh;border-radius:28px 28px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));transform-origin:50% 100%}
  .ch-info:not(:popover-open):not(.is-open){transform:translateY(32px)}
  @starting-style{.ch-info:popover-open{transform:translateY(32px)}}
  .ch-info::backdrop{background:rgb(23 24 26 / .32)}
  .ch-info-list li{padding-left:30px}
}
@media (prefers-reduced-motion:reduce){
  .ch-info,.ch-info:not(:popover-open):not(.is-open){transform:none}
}

/* Сцена «Двойной брони не бывает»: дорожка вечера с 16 до 23 часов.
   Бронь стойки въезжает слева и встаёт на 18:00–21:00; бронь сайта на то
   же время въезжает справа, упирается и уходит назад — база сохранила
   одну. В момент упора проявляется ответ гостю на сайте (apple-design:
   поведение, а не анимация; путь назад тот же, что вперёд). */
.cf{width:100%;display:grid;gap:12px}
.cf-hours{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font-size:12px;font-weight:600;color:rgb(255 255 255 / .7)}
.cf-track{position:relative;height:64px;overflow:hidden;border-radius:14px;background:rgb(255 255 255 / .14);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(100% / 7 - 1px),rgb(255 255 255 / .14) calc(100% / 7 - 1px) calc(100% / 7))}
.cf-busy,.cf-new{position:absolute;top:8px;bottom:8px;display:grid;align-content:center;gap:1px;padding:0 12px;border-radius:10px;font-style:normal;white-space:nowrap;overflow:hidden}
.cf-busy{background:#fff;color:#17181A;box-shadow:inset 3px 0 0 #2F6B4F,0 8px 18px -8px rgb(40 12 6 / .5)}
.cf-new{background:#FBF0DC;color:#17181A;box-shadow:inset 3px 0 0 #B8790C,0 8px 18px -8px rgb(40 12 6 / .5);opacity:0}
/* Вспышка удара: красная заливка и кромка поверх брони сайта. */
.cf-new::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgb(214 64 52 / .26);box-shadow:inset 0 0 0 2px #D64034;opacity:0}
.cf-busy b,.cf-new b{font-size:13.5px;font-weight:700}
.cf-busy em,.cf-new em{font-style:normal;font-size:12px;color:#45474A}
.cf-note{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:36px;padding:7px 14px 7px 11px;border-radius:18px;background:#fff;color:#17181A;font-size:14px;font-weight:650;line-height:1.3;
  box-shadow:0 10px 24px -10px rgb(40 12 6 / .55)}
.cf-note svg{width:16px;height:16px;flex:none;color:var(--crest)}
@media (prefers-reduced-motion:no-preference){
  .cf .cf-busy{transform:translateX(-120%);opacity:0}
  .cf .cf-note{opacity:0;transform:translateY(6px) scale(.97)}
  .cf.is-in .cf-busy{animation:cf-desk 700ms cubic-bezier(.23,1,.32,1) both,cf-hold 460ms var(--ease-out) 1080ms}
  .cf.is-in .cf-new{animation:cf-site 2300ms 300ms both}
  .cf.is-in .cf-new::after{animation:cf-hit 760ms ease-out 1080ms both}
  .cf.is-in .cf-note{animation:cf-note 520ms cubic-bezier(.34,1.36,.64,1) 1560ms both}
  @keyframes cf-desk{to{transform:none;opacity:1}}
  /* Сайт въезжает на то же время и врезается в бронь стойки: его отбрасывает
     и трясёт, он вспыхивает красным, бронь стойки стоит и чуть
     напрягается; сайт уходит назад, под дорожкой — что увидел гость. */
  @keyframes cf-site{
    0%{transform:translateX(140%);opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1)}
    34%{transform:translateX(5%);opacity:1;animation-timing-function:ease-out}
    38%{transform:translateX(14%)}42%{transform:translateX(6%)}46%{transform:translateX(11%)}
    50%{transform:translateX(8%);animation-timing-function:cubic-bezier(.32,.72,0,1)}
    64%{transform:translateX(12%);opacity:1;animation-timing-function:cubic-bezier(.77,0,.175,1)}
    100%{transform:translateX(140%);opacity:0}
  }
  @keyframes cf-hit{0%,100%{opacity:0}22%{opacity:1}}
  @keyframes cf-hold{0%,100%{scale:1}35%{scale:1.04}}
  @keyframes cf-note{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
}

/* ── плитки «Что умеет»: у каждой своя история ──────────────────────
   Тот же почерк, что у сцен «И ещё» (styles/more.css): вход замедлением,
   перемещение на месте --ease-in-out, щелчок успеха с перелётом в 3–4%,
   260 / 440 / 640 мс. Главный слой — вещь продукта рассказывает, что
   случилось; второй — предмет рядом отвечает на это (телефон звонит,
   печать бьёт, метла метёт, указатель качнулся); фоновый — предметы чуть
   отстают от прокрутки, плитка от этого глубже. Завязку CSS ставит только
   взведённой сцене (.is-armed, scripts/play.mjs), без движения всё стоит
   в итоге. */
.ft{--pop:cubic-bezier(.34,1.36,.64,1)}
@media (prefers-reduced-motion:no-preference){
  @keyframes ft-rise{from{opacity:0;translate:0 10px}}
  @keyframes ft-drop{from{opacity:0;translate:0 -8px}}
  @keyframes ft-pop{from{opacity:0;scale:.92}}
  @keyframes flip-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-100%)}}
  @keyframes flip-in{from{opacity:0;transform:translateY(100%)}}

  /* Перелист: было уходит вверх, стало встаёт снизу. */
  .is-armed:not(.is-in) .flip>span:first-child{opacity:1;transform:none}
  .is-armed:not(.is-in) .flip>span:last-child{opacity:0;transform:translateY(100%)}
  .is-in .flip>span:first-child{animation:flip-out 320ms var(--ease-out) var(--flip-at,600ms) both}
  .is-in .flip>span:last-child{animation:flip-in 320ms var(--ease-out) var(--flip-at,600ms) backwards}

  /* Бронь, пока гость на линии: телефон коротко звонит, номер набирается. */
  @keyframes ft-ring{
    0%,100%{transform:none}8%{transform:rotate(-6deg)}16%{transform:rotate(5deg)}24%{transform:rotate(-5deg)}
    32%{transform:rotate(4deg)}40%{transform:rotate(-2deg)}48%{transform:rotate(1deg)}56%{transform:none}
  }
  .ft-call .ft-obj img{transform-origin:50% 85%}
  /* Звонит телефон рядом — и, пока гость на линии, карточка находит его,
     считает цену и записывает бронь (такты — в styles/artifacts.css,
     «Поиск гостя по номеру»; кнопка — общий почерк кнопки листа). */
  .ft-call{--obj-play:ft-ring 900ms var(--ease-in-out) 700ms backwards;
    --typed:2000ms;--found:2450ms;--priced:2950ms;--tap-at:3800ms;--wait-at:4040ms;--done-at:4040ms}

  /* Гости бронируют сами: время встаёт волной, гость выбирает 10:00,
     кнопка оживает. */
  @keyframes ft-pick{
    0%{background:var(--card);border-color:var(--line);color:var(--ink);scale:1}
    45%{background:var(--card);border-color:var(--line);color:var(--ink);scale:.92}
    100%{scale:1}
  }
  @keyframes ft-ready{from{background:var(--fill);color:var(--ink-3)}}
  .ft-site .ui-slot{--n:0}
  .ft-site .ui-slot:nth-child(2){--n:1}.ft-site .ui-slot:nth-child(3){--n:2}.ft-site .ui-slot:nth-child(4){--n:3}
  .ft-site .ui-slot:nth-child(5){--n:4}.ft-site .ui-slot:nth-child(6){--n:5}
  .is-armed:not(.is-in) .ft-phone .ui-slot{opacity:0}
  .is-armed:not(.is-in) .ft-phone .ui-slot.is-picked{background:var(--card);border-color:var(--line);color:var(--ink)}
  .is-armed:not(.is-in) .ft-phone .ui-gp-btn{background:var(--fill);color:var(--ink-3)}
  /* Время переворачивается карточками сверху вниз, палец нажимает 10:00 —
     от касания расходится круг, кнопка оживает. */
  @keyframes ft-flip-in{from{opacity:0;transform:perspective(600px) rotateX(-82deg)}}
  @keyframes ft-ripple{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(1.9)}}
  .ft-site .ui-slot{transform-origin:50% 0}
  .is-in .ft-phone .ui-slot{animation:ft-flip-in 540ms var(--ease-out) calc(560ms + var(--n) * 60ms) backwards}
  .is-in .ft-phone .ui-slot.is-picked{animation:ft-flip-in 540ms var(--ease-out) calc(560ms + var(--n) * 60ms) backwards,ft-pick 420ms var(--pop) 1480ms both}
  .is-in .ft-phone .ui-slot.is-picked::after{animation:ft-ripple 700ms var(--ease-out) 1460ms}
  .is-in .ft-phone .ui-gp-btn{animation:ft-ready 260ms ease 1860ms backwards,ft-pop 480ms var(--pop) 1860ms backwards}

  /* Деньги без тетради: квитанция выходит сверху вниз, печать бьёт
     «Принято», настоящая печать рядом опускается в тот же миг. */
  @keyframes ft-print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-60px -60px -90px -60px)}}
  @keyframes ft-press{
    0%{transform:translateY(-26px) rotate(-7deg)}
    55%{transform:translateY(5px) rotate(0)}
    74%{transform:translateY(-5px)}
    100%{transform:none}
  }
  @keyframes ft-stamp{
    0%{opacity:0;transform:rotate(-8deg) scale(1.5)}
    65%{opacity:.92;transform:rotate(-8deg) scale(.96)}
    100%{opacity:.92;transform:rotate(-8deg)}
  }
  .ft-money .is-armed:not(.is-in) .ar-receipt{clip-path:inset(0 0 100% 0)}
  .ft-money .is-armed:not(.is-in) .ar-stamp{opacity:0}
  /* Квитанция печатается рывками, как из принтера: бумага выходит
     шагами и вздрагивает на каждом; когда вышла — печать бьёт, бумага
     проседает от удара, предмет рядом опускает печать в тот же миг. */
  @keyframes ft-feed{0%,100%{translate:0 0}45%{translate:0 1.5px}}
  @keyframes ft-thud{0%,100%{translate:0 0}30%{translate:0 3px}}
  .ft-money .is-in .ar-receipt{animation:ft-print 1350ms steps(9,jump-end) 240ms both,ft-feed 150ms ease-out 240ms 9,ft-thud 300ms var(--ease-out) 1720ms}
  .ft-money{--obj-play:ft-press 760ms var(--ease-in-out) 1300ms backwards}
  .ft-money .is-in .ar-stamp{animation:ft-stamp 360ms cubic-bezier(.2,0,0,1) 1700ms both}

  /* Уборка: пункты отмечаются по ходу обхода, метла проходит рядом. */
  @keyframes ft-tick{
    0%{background:transparent;border-color:var(--line);scale:.8}
    60%{scale:1.1}
    100%{scale:1}
  }
  @keyframes ft-done{from{color:var(--ink);text-decoration-color:transparent}}
  @keyframes ft-sweep{
    0%,100%{transform:none}20%{transform:rotate(-9deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}
  }
  .ft-team .ar-check:nth-child(1){--at:820ms}
  .ft-team .ar-check:nth-child(2){--at:1260ms}
  /* Отмеченная строка закрашивается слева направо и гаснет. */
  @keyframes ft-row-fill{0%{opacity:1;transform:scaleX(0)}55%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
  .ft-team .is-in .ar-check[data-done="true"]::before{animation:ft-row-fill 900ms var(--ease-out) calc(var(--at) - 60ms) both}
  .ft-team .is-armed:not(.is-in) .ar-check[data-done="true"] i{background:transparent;border-color:var(--line)}
  .ft-team .is-armed:not(.is-in) .ar-check[data-done="true"] i::after{opacity:0}
  .ft-team .is-armed:not(.is-in) .ar-check[data-done="true"],.ft-team .is-armed:not(.is-in) .ar-check[data-done="true"] span{color:var(--ink);text-decoration-color:transparent}
  .ft-team .is-in .ar-check[data-done="true"] i{animation:ft-tick 320ms var(--pop) var(--at) both}
  .ft-team .is-in .ar-check[data-done="true"] i::after{animation:ft-pop 200ms var(--ease-out) calc(var(--at) + 120ms) backwards}
  .ft-team .is-in .ar-check[data-done="true"] span{animation:ft-done 260ms ease calc(var(--at) + 120ms) backwards}
  .ft-team .ft-obj img{transform-origin:50% 92%}
  .ft-team{--obj-play:ft-sweep 1100ms var(--ease-in-out) 120ms backwards}

  /* Оплата и магазин (владелец 10.10: «анимацию сделай красивее»).
     Лист встаёт от нижнего края кривой выдвижной панели, строки
     поднимаются следом. Оплата: палец касается кнопки — она проседает,
     от касания расходится круг; «Ждём банк» с колесом; зелёный разливается
     от середины, «Оплачено» с галочкой, которая подпрыгивает (успех —
     единственное место с перелётом); «или картой» гаснет; над листом с
     лёгкой пружиной опускается уведомление, предмет подпрыгивает. Магазин:
     второй товар въезжает, счётчик щёлкает, итог доезжает барабанами;
     палец жмёт «Оформить заказ» — «Заказ принят». Только сдвиг, масштаб,
     поворот и прозрачность; без движения — итог. */
  @keyframes ft-sheet{from{opacity:0;transform:translateY(56px)}}
  @keyframes ft-row{from{opacity:0;transform:translateY(8px)}}
  @keyframes ft-touch{0%{opacity:0;transform:scale(.5)}18%{opacity:1;transform:scale(1)}42%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(2.7)}}
  @keyframes ft-press{0%,100%{scale:1}35%,60%{scale:.965}}
  @keyframes ft-out-up{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-120%)}}
  @keyframes ft-mid{0%{opacity:0;transform:translateY(120%)}22%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-120%)}}
  @keyframes ft-in-up{from{opacity:0;transform:translateY(120%)}}
  @keyframes ft-spin{to{transform:rotate(360deg)}}
  @keyframes ft-fill{from{opacity:0;transform:scaleX(.06)}}
  @keyframes ft-check{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.2)}100%{transform:none}}
  @keyframes ft-other{from{opacity:1}}
  @keyframes ft-toast{0%{opacity:0;transform:translateY(-22px) scale(.96)}62%{opacity:1;transform:translateY(3px) scale(1.01)}100%{transform:none}}
  @keyframes ft-slide{from{opacity:0;transform:translateX(28px)}}
  @keyframes ft-roll{from{transform:translateY(0)}}
  @keyframes ft-hop{0%,100%{transform:none}35%{transform:translateY(-12px) rotate(-3deg)}70%{transform:translateY(2px) rotate(.6deg)}}
  @keyframes ft-bag{0%,100%{transform:none}30%{transform:rotate(-5deg)}62%{transform:rotate(3deg)}}
  .ft-pay{--tap-at:1100ms;--wait-at:1360ms;--done-at:2020ms;--obj-play:ft-hop 680ms var(--ease-in-out) 2040ms backwards}
  /* Магазин начинает свою историю, когда оплата закончила свою: взгляд
     идёт слева направо, две истории не спорят (taste: движение по смыслу). */
  /* Касса: второй товар въезжает (его код отсканировали), итог доезжает;
     кассир жмёт «Отправить на кассу» — «Ждём карту или QR» с колесом,
     затем «Чек пробит», и из-под листа выходит кассовый чек: поднимается
     и ложится ровно, как оторванный от ленты. */
  .ft-till{--add-at:2300ms;--flip-at:2420ms;--check-at:2900ms;--tap-at:3560ms;--wait-at:3800ms;--done-at:4460ms;--obj-play:ft-hop 680ms var(--ease-in-out) 4480ms backwards}
  /* «Коды проверены» опускается, как только второй товар лёг и его код сверен, — до оплаты, а не после. */
  .ft-till .is-in .py-toast{animation-delay:var(--check-at)}
  :is(.ft-pay,.ft-till) .ft-obj img{transform-origin:50% 92%}
  .py-item,.sh-line:first-child{--r:1}
  .py-sum,.sh-total{--r:2}
  .sh-to{--r:3}
  /* Завязка — только у взведённой сцены. */
  .is-armed:not(.is-in) :is(.py-sheet,.sh-sheet){opacity:0;transform:translateY(56px)}
  .is-armed:not(.is-in) .py-label>.is-a,.is-armed:not(.is-in) .py-alt{opacity:1}
  .is-armed:not(.is-in) :is(.py-label>.is-c,.py-fill,.py-toast,.sh-line:nth-child(2)){opacity:0}
  .is-armed:not(.is-in) .rl-strip{transform:translateY(0)}
  /* Ход. */
  .is-in :is(.py-sheet,.sh-sheet){animation:ft-sheet 720ms cubic-bezier(.32,.72,0,1) 120ms backwards}
  .is-in :is(.py-merchant,.py-item,.py-sum,.sh-head,.sh-line:first-child,.sh-total,.sh-to){animation:ft-row 460ms var(--ease-out) calc(380ms + var(--r,0) * 70ms) backwards}
  .is-in .py-tap{animation:ft-touch 900ms cubic-bezier(.2,.7,.3,1) var(--tap-at) both}
  .is-in .py-btn{animation:ft-press 440ms var(--ease-out) calc(var(--tap-at) + 110ms)}
  .is-in .py-label>.is-a{animation:ft-out-up 280ms var(--ease-out) var(--wait-at) both}
  .is-in .py-label>.is-b{animation:ft-mid 660ms ease var(--wait-at) both}
  .is-in .py-spin{animation:ft-spin 640ms linear var(--wait-at) 2}
  .is-in .py-label>.is-c{animation:ft-in-up 320ms var(--ease-out) var(--done-at) backwards}
  .is-in .py-label>.is-c .py-tick{animation:ft-check 480ms cubic-bezier(.34,1.56,.64,1) calc(var(--done-at) + 90ms) backwards}
  .is-in .py-fill{animation:ft-fill 480ms var(--ease-out) var(--done-at) backwards}
  .is-in .py-alt{animation:ft-other 320ms ease calc(var(--done-at) + 60ms) backwards}
  .is-in .py-toast{animation:ft-toast 580ms var(--ease-out) calc(var(--done-at) + 280ms) backwards}
  .is-in .sh-line:nth-child(2){animation:ft-slide 540ms cubic-bezier(.22,1,.36,1) var(--add-at) backwards}
  .is-in .rl-strip{animation:ft-roll 900ms cubic-bezier(.16,1,.3,1) calc(var(--add-at) + 100ms + var(--i,0) * 60ms) backwards}

  /* Сертификат: ложится, как бумага, и с него списывается один сеанс. */
  @keyframes ft-land{from{opacity:0;translate:0 26px;rotate:-2.5deg}}
  @keyframes ft-spent{0%{opacity:0;translate:0 6px}25%{opacity:1;translate:0 0}70%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -6px}}
  /* Сертификат встаёт, его QR проводят сканером — тонкая линия идёт по
     коду, код коротко подаётся, и списывается сеанс. */
  @keyframes ft-scan{0%{opacity:0;transform:translateY(0)}12%,86%{opacity:1}100%{opacity:0;transform:translateY(var(--scan-to,84px))}}
  @keyframes ft-qr-ok{0%,100%{scale:1}40%{scale:1.05}}
  .ft-certs{--flip-at:1880ms}
  .ft-certs .is-in .uc-qr::after{animation:ft-scan 820ms var(--ease-in-out) 1000ms both}
  .ft-certs .is-in .uc-qr{animation:ft-qr-ok 380ms var(--ease-out) 1820ms}
  .ft-certs .is-in .uc-spent{animation:ft-spent 1300ms var(--ease-out) 1840ms both}

  /* Гости: визиты встают сверху, баллы за последний перелистываются. */
  /* Картотека: карточки других гостей ложатся стопкой, из таблицы
     прилетает отметка загрузки, потом считаются баллы — перелист
     баланса, полоса доезжает до своей доли, движения встают по одному. */
  .ft-guests{--flip-at:1400ms;--obj-play:ft-hop 680ms var(--ease-in-out) 700ms backwards}
  @keyframes gc-ghost-in{from{opacity:0;translate:0 -18px}}
  @keyframes gc-earn-in{from{opacity:0;translate:0 8px;scale:.9}}
  @keyframes gc-card-in{from{opacity:0;translate:0 28px;rotate:-9deg}}
  @keyframes gc-fill{from{transform:translateX(-100%)}}
  @keyframes gc-knob{from{transform:translateX(0)}}
  .ft-guests .is-armed:not(.is-in) :is(.gc-ghost,.gc-earn,.gc-pass){opacity:0}
  .ft-guests .is-in .gc-ghost{animation:gc-ghost-in 460ms var(--ease-out) calc(420ms + (2 - var(--g)) * 120ms) backwards}
  /* Заведение выдаёт карту: она выезжает снизу и ложится на карточку гостя
     с лёгким поворотом. Потом с оплаты приходят баллы: «+1 200» встаёт
     вместе с перелистом баланса, шкала доезжает. */
  .ft-guests .is-in .gc-pass{animation:gc-card-in 760ms var(--ease-out) 620ms backwards}
  .ft-guests .is-in .gc-earn{animation:gc-earn-in 480ms var(--pop) 1330ms backwards}
  .ft-guests .is-armed:not(.is-in) .gc-run i{transform:translateX(-100%)}
  .ft-guests .is-armed:not(.is-in) .gc-knob{transform:translateX(0)}
  .ft-guests .is-in .gc-run i{animation:gc-fill 1000ms var(--ease-in-out) 1550ms backwards}
  .ft-guests .is-in .gc-knob{animation:gc-knob 1000ms var(--ease-in-out) 1550ms backwards}

  /* Каналы: значок сверки делает оборот, время сверки сменяется, строка
     вспыхивает зелёным; указатель рядом качнулся. */
  @keyframes ft-spin{from{rotate:0deg}to{rotate:360deg}}
  @keyframes ft-flash{from{background:color-mix(in srgb,var(--ok) 24%,var(--fill))}}
  @keyframes ft-sway{0%,100%{transform:none}25%{transform:rotate(-4deg)}55%{transform:rotate(3deg)}80%{transform:rotate(-1deg)}}
  .is-in .ui-ch-sync{animation:ft-spin 760ms var(--ease-in-out) 420ms both}
  /* Каналы: календарь сверился по iCal — перелистнулось время сверки,
     полосы «Занято» с площадок встали по одной, знак площадки щёлкнул на
     месте; потом выбранная полоса обводится и под ней встаёт её строка
     с кнопкой. Знаки под словами выходят по очереди. */
  .ft-channels{--flip-at:560ms}
  @keyframes cw-in{from{opacity:0;transform:scaleX(.55)}}
  @keyframes cw-logo{from{opacity:0;scale:.4}}
  @keyframes cw-ring{from{box-shadow:0 0 0 0 transparent}}
  @keyframes cw-pick{from{opacity:0;translate:0 8px}}
  @keyframes ch-app-in{from{opacity:0;translate:0 10px;scale:.9}}
  .ft-channels .is-armed:not(.is-in) .cw-bk.is-ch,.ft-channels .is-armed:not(.is-in) .cw-pick{opacity:0}
  .ft-channels .is-in .cw-bk.is-ch{transform-origin:left;animation:cw-in 520ms var(--ease-out) calc(720ms + var(--n) * 140ms) backwards}
  .ft-channels .is-in .cw-bk.is-ch .cw-logo{animation:cw-logo 380ms var(--pop) calc(920ms + var(--n) * 140ms) backwards}
  .ft-channels .is-in .cw-bk.is-picked{animation:cw-in 520ms var(--ease-out) calc(720ms + var(--n) * 140ms) backwards,cw-ring 420ms var(--ease-out) 1600ms backwards}
  .ft-channels .is-in .cw-pick{animation:cw-pick 460ms var(--ease-out) 1720ms backwards}
  :is(.ft-channels,.ft-chats) .ch-app{animation:ch-app-in 480ms var(--pop) backwards;animation-timeline:view();animation-range:entry 30% cover 40%}

  /* Эффектнее (владелец 10.10: «анимации намного лучше и красивее, очень
     эффектными»). Общий почерк: вещь продукта встаёт из глубины — снизу,
     наклонённая назад, чуть меньше — и выпрямляется, как вещь на сцене
     (долгий выход, сильное замедление); предмет рядом прилетает и садится
     с пружиной, потом отвечает на историю. У оплаты и магазина лист
     встаёт по-своему, у денег квитанция печатается. */
  @keyframes ft-rise3d{from{opacity:0;transform:perspective(1300px) translateY(48px) rotateX(16deg) scale(.95)}}
  @keyframes ft-obj-in{0%{opacity:0;translate:16px 36px;scale:.78;rotate:-10deg}62%{opacity:1;translate:0 -6px;scale:1.04;rotate:2deg}100%{translate:0 0;scale:1;rotate:0deg}}
  .ft-scene.is-armed:not(.is-in) :is(.ft-thing>.ft-bezel,.ft-phone>.ui-phone,.ft-thing>.gc){opacity:0}
  .ft-scene.is-in :is(.ft-thing>.ft-bezel,.ft-phone>.ui-phone,.ft-thing>.gc){transform-origin:50% 100%;animation:ft-rise3d 1050ms cubic-bezier(.16,1,.3,1) 40ms backwards}
  .ft-scene.is-armed:not(.is-in) .ft-obj img{opacity:0}
  /* Предмет плитки садится и отвечает на её историю. */
  .ft-scene.is-in .ft-obj img{animation:ft-obj-in 900ms cubic-bezier(.34,1.36,.64,1) 300ms backwards,var(--obj-play,none)}

  /* Фон: предметы и телефон чуть отстают от прокрутки. */
  @supports (animation-timeline:view()){
    @keyframes ft-drift{from{translate:0 12px}to{translate:0 -12px}}
    .ft-obj{animation:ft-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    /* Плитка входит, а вещь на ней догоняет её на полшага позже
       (доводка движения): слои расходятся, и плитка становится глубже. */
    @keyframes ft-in{from{opacity:0;transform:translateY(44px) scale(.97)}}
    @keyframes ft-follow{from{translate:0 var(--follow,48px)}}
    .ft-tile{animation:ft-in var(--ease-out) backwards;animation-timeline:view();animation-range:entry 0 entry 280px}
    .ft-thing{animation:ft-follow var(--ease-out) backwards;animation-timeline:view();animation-range:entry 0% cover 42%}
    .ft-site .ft-thing{--follow:130px}
  }
}

/* Под мышью плитка отзывается (только мышь и только если движение не
   выключено): предмет чуть поднимается и поворачивается к взгляду, вещь
   продукта всплывает на пару пикселей. Медленный вход, быстрый уход. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ft-obj img,.ft-thing>.ft-bezel,.ft-phone>.ui-phone{transition:transform 260ms var(--ease-out)}
  .ft-tile:hover .ft-obj img{transform:translateY(-6px) rotate(-3deg) scale(1.03);transition-duration:520ms}
  .ft-tile:hover :is(.ft-thing>.ft-bezel,.ft-phone>.ui-phone){transform:translateY(-3px);transition-duration:520ms}
}

/* Тёмная тема: нейтральные плитки — вторая поверхность, вещи на них
   светлее (ступени apple-design). */
[data-theme="dark"] .ft-tile{box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),inset 0 0 0 1px rgb(255 255 255 / .03)}
[data-theme="dark"] .ft-tile:not(.ft-clash):not(.ft-channels):not(.ft-chats):not(.ft-site):not(.ft-pay):not(.ft-till){background:radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2)}
[data-theme="dark"] .ft-site{background:radial-gradient(85% 42% at 50% 100%,color-mix(in srgb,var(--crest) 20%,transparent),transparent 72%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2)}
[data-theme="dark"] .ft-bezel{background:linear-gradient(180deg,rgb(255 255 255 / .08),rgb(255 255 255 / .03));box-shadow:0 0 0 1px rgb(255 255 255 / .07),0 36px 64px -32px rgb(0 0 0 / .55)}
[data-theme="dark"] .ft-tile .ft-bezel>:is(.ui,.ar){box-shadow:0 0 0 1px rgb(255 255 255 / .06),inset 0 1px 0 rgb(255 255 255 / .06)}
[data-theme="dark"] :is(.ft-pay,.ft-till){background:radial-gradient(56% 50% at 72% 100%,color-mix(in srgb,var(--crest) 15%,transparent),transparent 72%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2)}
[data-theme="dark"] .ft-chats{background:radial-gradient(46% 78% at 26% 46%,color-mix(in srgb,var(--crest) 14%,transparent),transparent 70%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2)}
[data-theme="dark"] .ft-channels{background:radial-gradient(48% 75% at 76% 52%,color-mix(in srgb,var(--ok) 12%,transparent),transparent 70%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2)}
[data-theme="dark"] .ch-dock{background:rgb(255 255 255 / .06);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 0 0 1px rgb(255 255 255 / .05),0 16px 32px -22px rgb(0 0 0 / .6)}
[data-theme="dark"] .ch-app{box-shadow:0 8px 16px -10px rgb(0 0 0 / .6),0 1px 2px rgb(0 0 0 / .25)}
[data-theme="dark"] .ft-obj img{filter:drop-shadow(0 24px 24px rgb(0 0 0 / .45))}

/* ── попробуйте сами ──────────────────────────────────────────────── */
/* Билет из двух частей (экран — предмет из работы, как бланк брони на
   первом экране). Основная часть — нейтральная плитка «Что умеет»;
   корешок — с тёплым светом хохолка снизу, как плитка страницы гостя.
   По линии отрыва полукруглые вырезы и пробитые дырочки цвета страницы.
   Вырезы — маской из двух половин: каждая половина режет свой угол, и
   маскам не нужно складываться. */
.demo{padding-top:var(--section-y)}
.demo-head{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(28px,3vw,40px)}

/* Вид заведения — сегментный переключатель, как разделы в шапке: серая
   дорожка во всю ширину билета (вкладки над ним), по ней едет белая
   таблетка выбранного вида. Сегменты равные, поэтому таблетка встаёт на
   номер выбранного сдвигом на свою ширину. */
.dn{
  --n:4;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
  margin-bottom:12px;padding:4px;border-radius:999px;background:rgb(118 118 128 / .12);
}
.dn-thumb{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:999px;background:var(--card);
  box-shadow:0 1px 2px rgb(23 24 26 / .08),0 6px 14px -6px rgb(23 24 26 / .2);transition:transform 460ms var(--ease-drawer);
}
.dn:has(.dn-opt:nth-of-type(2) input:checked) .dn-thumb{transform:translateX(100%)}
.dn:has(.dn-opt:nth-of-type(3) input:checked) .dn-thumb{transform:translateX(200%)}
.dn:has(.dn-opt:nth-of-type(4) input:checked) .dn-thumb{transform:translateX(300%)}
.dn-opt{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px 0 10px;border-radius:999px;
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;transition:color var(--t-ui) ease;
}
.dn-opt img{width:38px;height:38px;object-fit:contain;transition:transform var(--t-press) var(--ease-out)}
.dn-opt:active img{transform:scale(.9)}
.dn-opt:has(input:checked){color:var(--ink)}
.dn-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.dn-short{display:none}
@media (hover:hover) and (pointer:fine){.dn-opt:hover{color:var(--ink)}}
[data-theme="dark"] .dn{background:rgb(118 118 128 / .26)}
[data-theme="dark"] .dn-thumb{background:#5E6168;box-shadow:0 3px 8px rgb(0 0 0 / .3)}
[data-theme="dark"] .dn-opt{color:#C9CDD2}
[data-theme="dark"] .dn-opt:has(input:checked){color:#FFFFFF}

.dt{
  --notch:15px;--pad:clamp(28px,3.2vw,48px);--hole:var(--bg);--hole-edge:rgb(23 24 26 / .13);
  --cut-a:radial-gradient(circle at 100% 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)) top/100% 51% no-repeat,
          radial-gradient(circle at 100% 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)) bottom/100% 51% no-repeat;
  --cut-b:radial-gradient(circle at 0 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)) top/100% 51% no-repeat,
          radial-gradient(circle at 0 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)) bottom/100% 51% no-repeat;
  --join:translateX(40px) rotate(2.4deg);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:clamp(460px,37vw,520px);
}
.dt-stub{display:grid;transform-origin:0 100%}
.dt-part{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:var(--pad);
  background:radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9);
}
.dt-app{border-radius:32px 0 0 32px;-webkit-mask:var(--cut-a);mask:var(--cut-a)}
.dt-book{
  border-radius:0 32px 32px 0;-webkit-mask:var(--cut-b);mask:var(--cut-b);transform-origin:0 100%;
  background:radial-gradient(85% 50% at 50% 100%,color-mix(in srgb,var(--crest) 15%,transparent),transparent 72%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2);
}
/* Линия отрыва: дырочки цвета страницы с тенью по краю, как пробитые. */
.dt-book::before{
  content:'';position:absolute;left:0;top:calc(var(--notch) + 12px);bottom:calc(var(--notch) + 12px);width:6px;
  background:radial-gradient(circle,var(--hole) 1.8px,var(--hole-edge) 2.3px,transparent 2.8px) 50% 0/6px 12px repeat-y;
}
.dt-top,.dt-title,.dt-text,.dt-kits,.dt-scan{position:relative;z-index:2}
.dt-top{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.dt-title{margin-top:clamp(24px,2.6vw,40px);max-width:13ch;font-size:var(--f-panel);line-height:1.04;font-weight:750;letter-spacing:-.034em;text-wrap:balance}
.dt-text{margin-top:14px;max-width:27ch;font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--ink-2)}
.dt-text-phone{display:none}

/* Варианты видов лежат стопкой в одной клетке; виден тот, чей номер
   выбран в переключателе. Уходящий гаснет быстро, новый проступает с
   небольшим подъёмом; предмет ниши встаёт со щелчком. Кнопки одинаковы
   на вид и меняются сразу: мигание одной и той же кнопки было бы шумом. */
.dt-kits,.dt-gos,.dt-qr,.dt-obj-in{display:grid}
.dt-where{display:inline-grid}
.dv{
  --dv-out:opacity 140ms ease,transform 140ms ease,visibility 0s linear 140ms;
  --dv-in:opacity 300ms var(--ease-out) 70ms,transform 420ms var(--ease-out) 70ms,visibility 0s;
  grid-area:1/1;opacity:0;visibility:hidden;transform:var(--dv-from,translateY(6px));transition:var(--dv-out);
}
.demo:has(.dn-opt:nth-of-type(1) input:checked) .dv:nth-of-type(1),
.demo:has(.dn-opt:nth-of-type(2) input:checked) .dv:nth-of-type(2),
.demo:has(.dn-opt:nth-of-type(3) input:checked) .dv:nth-of-type(3),
.demo:has(.dn-opt:nth-of-type(4) input:checked) .dv:nth-of-type(4){opacity:1;visibility:visible;transform:none;transition:var(--dv-in)}
.dt-go{--dv-out:none;--dv-in:none;--dv-from:none}
.dt-thing{--dv-from:translateY(22px) scale(.9) rotate(-5deg);--dv-in:opacity 260ms var(--ease-out) 60ms,transform 680ms cubic-bezier(.34,1.36,.64,1) 60ms,visibility 0s}
.dt-code{--dv-from:scale(.94)}
@supports not selector(:has(a)){
  .dn{display:none}
  .dv:first-child{opacity:1;visibility:visible;transform:none}
}

.dt-kits{margin-top:auto;padding-top:28px}
.dt-rhythm{font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.dt-things{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.dt-things li{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgb(23 24 26 / .04);font-size:14px;font-weight:550;color:var(--ink-2)}
.dt-foot{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.dt-app .dt-foot{margin-top:28px}
.dt-book .dt-foot{margin-top:24px}
.dt-where{position:relative;z-index:2;font-size:14.5px;font-weight:500;color:var(--ink-3)}

/* Кнопка растянута на всю часть билета; нажатие сжимает только вид кнопки
   внутри ссылки, иначе ссылка стала бы рамкой для своей растяжки и клик
   мимо кнопки потерялся бы. */
.dt-go{display:inline-flex;border-radius:var(--r-ctl)}
.dt-go::after{content:'';position:absolute;inset:0;z-index:3}
.dt-go .btn{position:relative;z-index:2}
.dt-go:active .btn{transform:scale(.97)}
.dt-go:focus-visible{outline:none}
.dt-go:focus-visible .btn{outline:2px solid var(--accent);outline-offset:3px}
.dt-arrow{width:18px;height:18px;margin-right:-4px}

/* Предмет ниши: обёртка приподнимается под указателем, внутренняя
   встаёт при показе, картинка меняется с видом — у каждой одна анимация
   сдвига. */
.dt-obj{position:absolute;z-index:1;top:calc(var(--pad) - 18px);right:calc(var(--pad) - 20px);width:clamp(210px,20vw,280px);pointer-events:none;filter:drop-shadow(0 24px 24px rgb(23 24 26 / .2))}
.dt-obj img{display:block;width:100%;height:auto}

/* QR страницы гостя: белая бумажка в любой теме, иначе камера не прочтёт. */
.dt-scan{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:18px}
.dt-qr{flex:none;width:132px;padding:9px;border-radius:16px;background:#FFFFFF;box-shadow:0 0 0 1px rgb(23 24 26 / .06),0 14px 26px -16px rgb(23 24 26 / .4)}
.dt-qr .qr{display:block;width:100%;height:auto;color:#17181A}
.dt-scan-text{max-width:24ch;font-size:15px;line-height:1.45;color:var(--ink-2)}
.dt-scan-text .dt-where{display:grid;width:fit-content;margin-top:8px;font-size:14px}

[data-theme="dark"] .dt{--hole-edge:rgb(0 0 0 / .4)}
[data-theme="dark"] .dt-part{box-shadow:inset 0 1px 0 rgb(255 255 255 / .06);background:radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2)}
[data-theme="dark"] .dt-book{background:radial-gradient(85% 50% at 50% 100%,color-mix(in srgb,var(--crest) 20%,transparent),transparent 72%),radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2)}
[data-theme="dark"] .dt-things li{box-shadow:0 0 0 1px var(--line-2)}
[data-theme="dark"] .dt-obj{filter:drop-shadow(0 24px 24px rgb(0 0 0 / .45))}
[data-theme="dark"] .dt-qr{box-shadow:0 14px 26px -16px rgb(0 0 0 / .7)}

/* Движение. Корешок пристаёт к билету, пока раздел входит в окно (шкала
   прокрутки, без сценария); предмет ниши ложится на билет, когда часть
   видна наполовину (scripts/play.mjs). Под указателем корешок чуть
   отходит по линии отрыва, предмет приподнимается. */
@media (prefers-reduced-motion:no-preference){
  @keyframes dt-land{0%{opacity:0;transform:translateY(-28px) rotate(-6deg)}55%{opacity:1;transform:translateY(3px) rotate(1deg)}100%{transform:none}}
  .dt-obj-in{transform-origin:50% 90%}
  .is-armed:not(.is-in) .dt-obj-in{opacity:0}
  .dt-app.is-in .dt-obj-in{animation:dt-land 760ms var(--ease-out) 140ms backwards}
  @supports (animation-timeline:view()){
    @keyframes dt-in{from{opacity:0;transform:translateY(44px) scale(.97)}}
    @keyframes dt-join{from{transform:var(--join)}}
    .dt{animation:dt-in var(--ease-out) backwards;animation-timeline:view();animation-range:entry 0 entry 280px}
    .dt-stub{animation:dt-join var(--ease-out) backwards;animation-timeline:view();animation-range:entry 10% cover 42%}
  }
}
@media (prefers-reduced-motion:reduce){.dv{--dv-from:none}.dn-thumb{transition:none}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .dt-book,.dt-obj,.dt-qr{transition:transform 560ms var(--ease-out)}
  .dt-arrow{transition:transform var(--t-ui) var(--ease-out)}
  .dt-stub:hover .dt-book{transform:translateX(4px) rotate(.8deg)}
  .dt-stub:hover .dt-qr{transform:translateY(-3px) rotate(-1.5deg)}
  .dt-app:hover .dt-obj{transform:translateY(-8px) rotate(-2deg)}
  .dt-part:hover .dt-arrow{transform:translate(2px,-2px)}
}
@media (hover:hover) and (pointer:fine){.dt-part:hover .btn-ink{background:var(--ink-hover)}}

/* Где полным именам вида тесно в равных сегментах — короткие имена; полное
   остаётся для чтения экрана. */
@media (max-width:1179px){
  .dn-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dn-short{display:inline}
}
/* Планшет и телефон: части друг под другом, линия отрыва поперёк. */
@media (max-width:1023px){
  .dt{
    grid-template-columns:minmax(0,1fr);min-height:0;--join:translateY(30px) rotate(-1.4deg);
    --cut-a:radial-gradient(circle at 0 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)) left/51% 100% no-repeat,
            radial-gradient(circle at 100% 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)) right/51% 100% no-repeat;
    --cut-b:radial-gradient(circle at 0 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)) left/51% 100% no-repeat,
            radial-gradient(circle at 100% 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)) right/51% 100% no-repeat;
  }
  .dt-part{min-height:400px}
  .dt-book{min-height:0}
  .dt-stub,.dt-book{transform-origin:100% 0}
  .dt-app{border-radius:28px 28px 0 0}
  .dt-book{border-radius:0 0 28px 28px}
  .dt-book::before{left:calc(var(--notch) + 12px);right:calc(var(--notch) + 12px);top:0;bottom:auto;width:auto;height:6px;background-position:0 50%;background-size:12px 6px;background-repeat:repeat-x}
  .dt-stub:hover .dt-book{transform:translateY(4px) rotate(-.6deg)}
}
/* Телефон: виды плиткой два на два с короткими именами; предмет — в угол к
   заголовку, как у плиток «Что умеет»; QR не нужен — страница гостя и
   так откроется на телефоне, вместо него фраза. */
@media (max-width:767px){
  .dn{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:22px}
  .dn-thumb{bottom:auto;width:calc((100% - 8px) / 2);height:calc((100% - 8px) / 2);border-radius:18px}
  .dn:has(.dn-opt:nth-of-type(2) input:checked) .dn-thumb{transform:translateX(100%)}
  .dn:has(.dn-opt:nth-of-type(3) input:checked) .dn-thumb{transform:translateY(100%)}
  .dn:has(.dn-opt:nth-of-type(4) input:checked) .dn-thumb{transform:translate(100%,100%)}
  .dn-opt{justify-content:flex-start;padding:0 12px 0 6px;border-radius:18px;font-size:15px}
  .dt{--pad:24px;--notch:13px}
  .dt-part{min-height:0}
  .dt-title{margin-top:22px;font-size:min(30px,8.6vw);padding-right:100px}
  /* У страницы гостя предмета в углу нет: заголовку отступ не нужен. */
  .dt-book .dt-title{padding-right:0}
  .dt-text{margin-top:12px}
  .dt-text-phone{display:block}
  .dt-kits{padding-top:22px}
  .dt-foot .dt-where,.dt-scan{display:none}
  .dt-app .dt-foot,.dt-book .dt-foot{margin-top:24px;width:100%}
  .dt-gos,.dt-go,.dt-go .btn{width:100%}
  .dt-obj{top:calc(var(--pad) - 8px);right:10px;width:100px}
}

/* ── как подключиться ─────────────────────────────────────────────── */
/* Лестница из четырёх ступеней: плитки «Что умеет» стоят низом на одной
   линии, каждая следующая выше на шаг подъёма. Номера внизу — на общем
   полу, заголовки поднимаются со ступенями. Заголовок раздела стоит на
   площадке над нижними ступенями: лестница — подсетка той же сетки, и две
   верхние ступени уходят в строку заголовка. Цель — красная ступень с
   печатью, как печати бланка и квитанции. */
.steps{padding-top:var(--section-y)}
.stair-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;column-gap:16px}
.steps-head{grid-column:1/3;grid-row:1;display:grid;gap:16px;align-content:start;padding-bottom:clamp(36px,3.6vw,52px)}
.steps-head .lead{max-width:32ch}
.stair{
  --base:clamp(238px,19vw,262px);--rise:clamp(44px,4.2vw,58px);
  grid-column:1/-1;grid-row:1/3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;
  margin:0;padding:0;list-style:none;pointer-events:none;
}
.stair-step{
  grid-row:2;align-self:end;pointer-events:auto;position:relative;display:flex;flex-direction:column;gap:10px;
  min-height:calc(var(--base) + var(--k) * var(--rise));padding:26px 26px 24px;border-radius:28px;
  background:radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 0 0 1px rgb(23 24 26 / .035);
}
.stair-step:nth-child(n+3){grid-row:1/3}
.stair-title{font-size:clamp(19px,1.6vw,23px);line-height:1.18;font-weight:750;letter-spacing:-.022em;text-wrap:balance}
.stair-text{font-size:15.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.stair-no{
  margin-top:auto;padding-top:18px;font-style:normal;font-size:clamp(64px,6.2vw,96px);line-height:.74;font-weight:700;
  letter-spacing:-.06em;color:var(--ink);
}
.stair-step.is-goal{overflow:hidden;background:var(--crest-field);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .22)}
.is-goal .stair-text{color:rgb(255 255 255 / .86)}
.is-goal .stair-no{color:#fff}
/* Единица в шрифте с широким полем слева: оптически к краю, как остальные цифры. */
.stair-step:first-child .stair-no{margin-left:-.09em}
.stair-key{position:absolute;right:calc(50% - 110px);bottom:clamp(64px,6vw,84px);width:clamp(150px,13vw,200px);pointer-events:none;transform:rotate(-12deg);filter:drop-shadow(0 22px 22px rgb(80 20 0 / .35))}
.stair-key img{display:block;width:100%;height:auto}
.stair-stamp{
  position:absolute;right:22px;bottom:26px;padding:7px 12px 6px;border:2px solid rgb(255 255 255 / .9);border-radius:10px;
  font-style:normal;font-size:13px;line-height:1;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;transform:rotate(-8deg);
}
[data-theme="dark"] .stair-step:not(.is-goal){background:radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),inset 0 0 0 1px rgb(255 255 255 / .03)}
@supports not (grid-template-rows:subgrid){
  .stair{grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;align-items:end}
  .stair-step,.stair-step:nth-child(n+3){grid-row:auto}
}

/* Ступени встают по очереди, пока лестница входит в окно (шкала
   прокрутки); печать бьёт, когда лестница видна наполовину. Без движения
   всё стоит на месте. */
@media (prefers-reduced-motion:no-preference){
  @keyframes stair-stamp{from{opacity:0;transform:rotate(-16deg) scale(1.7)}}
  .is-armed:not(.is-in) .stair-stamp{opacity:0}
  .is-in .stair-stamp{animation:stair-stamp 380ms cubic-bezier(.2,0,0,1) 900ms backwards}
  @keyframes stair-key{0%{opacity:0;transform:translateY(-30px) rotate(-30deg)}55%{opacity:1;transform:translateY(4px) rotate(-8deg)}100%{transform:rotate(-12deg)}}
  .is-armed:not(.is-in) .stair-key{opacity:0}
  .is-in .stair-key{animation:stair-key 720ms var(--ease-out) 420ms backwards}
  @supports (animation-timeline:view()){
    @keyframes stair-up{from{opacity:0;transform:translateY(60px)}}
    .stair{view-timeline:--stair block}
    .stair-step{animation:stair-up var(--ease-out) backwards;animation-timeline:--stair;
      animation-range:entry calc(20% + var(--k) * 12%) cover calc(34% + var(--k) * 6%)}
  }
}
/* Планшет и телефон: четыре ступени в ряд не помещают слова — ступени
   друг под другом, номер слева от слов, подъём — отступом слева: лестница
   спускается к цели. */
@media (max-width:1023px){
  .stair-in{display:block}
  .steps-head{padding-bottom:clamp(28px,5vw,40px)}
  .stair{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:10px;pointer-events:auto}
  .stair-step,.stair-step:nth-child(n+3){
    grid-row:auto;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;row-gap:6px;align-content:start;
    min-height:0;margin-left:calc(var(--k) * var(--indent,22px));padding:22px 24px 24px 22px;border-radius:24px;
  }
  .stair-no{grid-row:1/3;margin:0;padding:0;align-self:start;font-size:56px;line-height:.8;min-width:.6em}
  .stair-title{align-self:end}
  .stair-stamp{position:static;grid-column:2;justify-self:start;margin-top:10px}
  .stair-key{right:14px;top:10px;bottom:auto;width:96px}
  .is-goal .stair-title,.is-goal .stair-text{padding-right:84px}
}
@media (max-width:767px){.stair{--indent:10px}}
/* Самые узкие: ступени те же, шаг короче — словам нужна ширина (аудит 3.10). */
@media (max-width:380px){.stair{--indent:6px}}

/* ── запись на тестирование ───────────────────────────────────────── */
/* Красное поле хохолка: слева заголовок и пояснение, справа бланк. Слова
   стоят вровень с верхом бланка, а не висят посередине поля. Список
   обещаний снят 2.10: он повторял лестницу «Как подключиться». */
.tw{padding-top:var(--section-y)}
.tw-in{
  --perch:96px;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px var(--gutter);align-items:start;
  background:var(--crest-field);color:var(--on-crest);border-radius:44px;padding:clamp(40px,5vw,80px) clamp(24px,5vw,80px) clamp(48px,5.6vw,88px);
}
.tw-copy{display:grid;gap:22px;align-content:start;padding-top:calc(var(--perch) + 8px)}
.tw-in .h-section{color:#fff}
.tw-in .lead{color:rgb(255 255 255 / .86);max-width:30ch}

/* Бланк записи — белая бумага в любой теме, как бланк брони первого
   экрана: тёмная плашка на красном владельцу не смотрится. Цвета темы
   внутри бланка переопределены светлыми. На кромке сидит дятел. */
.tw-card{
  --card:#FFFFFF;--fill:#F4F4F1;--ink:#17181A;--ink-2:#45474A;--ink-3:#64676A;--ink-hover:#2C2E31;
  --line:rgb(23 24 26 / .11);--line-2:rgb(23 24 26 / .06);--on-ink:#FFFFFF;--accent:#BE5434;--crest:#BE5434;--ok:#2F6B4F;color-scheme:light;
  position:relative;width:100%;margin-top:var(--perch);padding:30px 30px 26px;border-radius:30px;background:var(--card);color:var(--ink);text-align:left;
  box-shadow:0 1px 0 rgb(255 255 255 / .2),0 44px 80px -36px rgb(40 12 6 / .55);
}
.tw-bird{position:absolute;right:36px;top:-112px;width:92px}
.tw-form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.tw-field{display:grid;gap:10px;align-content:start;margin:0;padding:0;border:0;min-width:0}
.tw-field legend{padding:0;font-size:14px;font-weight:600;color:var(--ink-2)}

/* Поля — одной панелью, как формы iOS: подпись мелко внутри поля,
   значение крупно, между полями волосяная линия. Фокус подсвечивает
   только своё поле — белым и ореолом хохолка, подпись краснеет. Ошибки —
   под панелью, словами. */
.tw-group{display:grid;border-radius:18px;background:var(--fill);box-shadow:inset 0 0 0 1px rgb(23 24 26 / .04)}
.tw-cell{position:relative;display:grid;border-radius:18px;transition:background-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.tw-cell:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}
.tw-cell:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}
.tw-cell+.tw-cell::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:var(--line);transition:opacity var(--t-ui) ease}
.tw-cell label{padding:12px 18px 0;font-size:12.5px;line-height:1.2;font-weight:600;letter-spacing:.005em;color:var(--ink-3);cursor:text;transition:color var(--t-ui) ease}
.tw-cell label span{font-weight:500;opacity:.75}
.tw-cell input{
  width:100%;margin:0;padding:3px 18px 13px;border:0;background:none;color:var(--ink);outline:none;
  font:inherit;font-size:17px;line-height:24px;font-weight:550;letter-spacing:-.005em;
}
.tw-cell input::placeholder{color:var(--ink-3);opacity:.55;font-weight:450}
.tw-cell:focus-within{z-index:1;background:var(--card);box-shadow:0 0 0 1.5px var(--crest),0 0 0 5px color-mix(in srgb,var(--crest) 14%,transparent)}
.tw-cell:focus-within label{color:var(--crest)}
.tw-cell:focus-within::before,.tw-cell:focus-within+.tw-cell::before{opacity:0}
.tw-cell:has(input[aria-invalid="true"]):not(:focus-within){background:color-mix(in srgb,var(--crest) 7%,transparent)}
.tw-cell:has(input[aria-invalid="true"]) label{color:var(--crest)}
.tw-errs{display:grid;gap:4px;margin-top:-12px}
.tw-errs:not(:has(.tw-err:not([hidden]))){display:none}

/* Вид заведения — плитки с предметом ниши, как в демо и в меню «Для
   кого». Выбранная — белая с чёрной обводкой, предмет чуть подпрыгивает. */
.tw-niche-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin-top:2px}
.tw-niche{position:relative;display:grid}
.tw-niche input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tw-niche span{
  display:grid;justify-items:center;align-content:center;gap:6px;min-height:100px;padding:10px 6px 11px;border-radius:16px;background:var(--fill);
  text-align:center;pointer-events:none;transition:background-color var(--t-ui) ease,box-shadow var(--t-ui) ease;
}
.tw-niche img,.tw-niche-more{width:44px;height:44px;transition:transform 360ms cubic-bezier(.34,1.36,.64,1)}
.tw-niche img{object-fit:contain}
.tw-niche-more{display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-3)}
.tw-niche-more svg{width:20px;height:20px}
.tw-niche b{font-size:12.5px;line-height:1.2;font-weight:600;color:var(--ink-2);text-wrap:balance}
.tw-niche input:checked+span{background:var(--card);box-shadow:inset 0 0 0 2px var(--ink),0 8px 18px -12px rgb(23 24 26 / .4)}
.tw-niche input:checked+span :is(img,.tw-niche-more){transform:translateY(-2px) scale(1.08)}
.tw-niche input:checked+span b{color:var(--ink)}
.tw-niche input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.tw-niche:active span{transform:scale(.97)}
.tw-niche span{transition:background-color var(--t-ui) ease,box-shadow var(--t-ui) ease,transform var(--t-press) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tw-niche:hover input:not(:checked)+span{box-shadow:inset 0 0 0 1px var(--line)}}
.tw-niches[aria-invalid="true"] legend{color:var(--crest)}
.tw-niches[aria-invalid="true"] .tw-niche span{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--crest) 35%,transparent)}

.tw-consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.tw-consent a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
/* Своя галочка согласия: скруглённый квадрат, отмеченный — чёрный с белой
   галкой; нажатие сжимает. */
.tw-check{
  appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;cursor:pointer;
  background:var(--fill) no-repeat center/14px;box-shadow:inset 0 0 0 1.5px rgb(23 24 26 / .2);
  transition:background-color var(--t-ui) ease,box-shadow var(--t-ui) ease,transform var(--t-press) var(--ease-out);
}
.tw-check:checked{
  background-color:var(--ink);box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.tw-check:active{transform:scale(.9)}
.tw-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tw-check[aria-invalid="true"]:not(:checked){box-shadow:inset 0 0 0 1.5px var(--crest)}
.tw-err{font-size:13.5px;color:var(--crest)}
[data-theme="dark"] .tw-err{color:var(--accent)}
.tw-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tw-submit{width:100%;margin-top:2px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),0 1px 2px rgb(23 24 26 / .22),0 12px 24px -12px rgb(23 24 26 / .55)}
.tw-submit[aria-busy="true"]{opacity:.7;pointer-events:none}
.tw-note{font-size:13.5px;color:var(--ink-3);text-align:center}
.tw-fail{font-size:14.5px;color:var(--crest);text-align:center}
.tw-done{display:grid;gap:8px;justify-items:center;text-align:center;padding:30px 8px 22px;outline:none}
.tw-done-mark{display:grid;place-items:center;width:64px;height:64px;margin-bottom:8px;border-radius:50%;background:var(--ok);color:#fff;box-shadow:0 14px 26px -14px var(--ok)}
.tw-done-mark svg{width:30px;height:30px}
@media (prefers-reduced-motion:no-preference){
  @keyframes tw-mark{from{opacity:0;transform:scale(.5)}}
  .tw-done:not([hidden]) .tw-done-mark{animation:tw-mark 520ms cubic-bezier(.34,1.36,.64,1) 140ms backwards}
}
.tw-done b{font-size:30px;font-weight:750;letter-spacing:-.02em}
.tw-done p{font-size:17px;color:var(--ink-2)}
@starting-style{.tw-done{opacity:0;transform:translateY(8px)}}
.tw-done{transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
/* Самые узкие телефоны: подпись записи не влезает в строку — переносится,
   а не обрезается. */
/* Кнопка записи в одну строку и на 320 px (аудит 3.10: переносилась). */
@media (max-width:330px){.tw-submit{padding:0 6px;font-size:14px;letter-spacing:-.015em}}

/* ── вопросы ──────────────────────────────────────────────────────── */
/* Вопросы по темам (taste: длинный список с линией под каждой строкой —
   худший вариант; больше пяти пунктов — группировать). Каждая тема — одной
   панелью, как сгруппированные списки iOS и поля бланка записи: строки
   внутри разделены волосяной линией с отступом. Слева заголовок и ссылки
   на темы — колонка едет вместе с прокруткой. */
.faq{padding-top:var(--section-y)}
.faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px var(--gutter);align-items:start}
.faq-side{position:sticky;top:calc(var(--head-h) + 44px);display:grid;gap:26px;align-content:start}
.faq-nav{display:grid;justify-items:start;gap:2px}
.faq-nav a{
  display:inline-flex;align-items:center;height:40px;margin-left:-14px;padding:0 14px;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--ink-2);transition:background-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-press) var(--ease-out);
}
.faq-nav a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.faq-nav a:hover{background:var(--bg-2);color:var(--ink)}}
/* Тема на экране — белая таблетка на серой, как раздел в шапке. */
.faq-nav a[aria-current="true"]{background:var(--bg-2);color:var(--ink)}
.faq-groups{display:grid;gap:clamp(36px,4vw,52px)}
.faq-group{scroll-margin-top:calc(var(--head-h) + 36px)}
.faq-group-title{margin:0 0 12px 26px;font-size:15px;font-weight:650;letter-spacing:-.005em;color:var(--ink-3)}
.faq-list{
  border-radius:26px;background:radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .85),transparent 62%),var(--bg-2);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 0 0 1px rgb(23 24 26 / .035);
}
.faq details{position:relative;transition:background-color 240ms ease,box-shadow 240ms ease}
/* Открытый вопрос ложится белым листом внутри панели: ответ читают на
   белом, а не на сером. Отступы листа вычтены из отступов строки — слова
   при раскрытии не сдвигаются. */
.faq details[open]{margin:6px;border-radius:20px;background:var(--card);box-shadow:0 1px 2px rgb(23 24 26 / .05),0 16px 32px -22px var(--shadow)}
.faq details[open]::before,.faq details[open]+details::before{opacity:0}
.faq details[open] summary{padding:16px 16px 16px 20px}
.faq summary span{text-wrap:balance}
.faq details+details::before{content:'';position:absolute;top:0;left:26px;right:26px;height:1px;background:var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 22px 22px 26px;border-radius:26px;
  font-size:clamp(17px,1.35vw,19.5px);line-height:1.35;font-weight:600;letter-spacing:-.014em;-webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
/* Знак раскрытия — белый кружок со стрелкой; открытый вопрос — чёрный,
   стрелка повёрнута вверх. Нажатие сжимает кружок. */
.faq summary i{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--card);color:var(--ink-2);
  box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgb(23 24 26 / .06);
  transition:transform 360ms var(--ease-out),background-color var(--t-ui) ease,color var(--t-ui) ease;
}
.faq summary i svg{width:17px;height:17px}
.faq summary:active i{scale:.92}
.faq details[open] summary i{transform:rotate(180deg);background:var(--ink);color:var(--on-ink);box-shadow:none}
@media (hover:hover) and (pointer:fine){.faq summary:hover i{color:var(--ink)}.faq details[open] summary:hover i{background:var(--ink-hover)}}
.faq details p{
  padding:0 26px 26px;max-width:60ch;font-size:17px;line-height:1.65;font-weight:450;letter-spacing:-.003em;color:var(--ink-2);
  text-wrap:pretty;hanging-punctuation:first;
}
.faq details[open] p{padding:2px 20px 22px}
[data-theme="dark"] .faq-list{background:radial-gradient(90% 70% at 0% 0%,rgb(255 255 255 / .05),transparent 62%),var(--bg-2);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),inset 0 0 0 1px rgb(255 255 255 / .03)}
[data-theme="dark"] .faq summary i{box-shadow:0 0 0 1px var(--line)}
/* Ответ раскрывается, а не выпрыгивает: высота растёт до своей, текст
   проявляется следом (apple-design: непрерывность). Где браузер так не
   умеет, ответ открывается сразу. */
@media (prefers-reduced-motion:no-preference){
  @supports selector(::details-content) and (interpolate-size:allow-keywords){
    .faq{interpolate-size:allow-keywords}
    .faq details::details-content{block-size:0;overflow:clip;transition:block-size 380ms var(--ease-out),content-visibility 380ms allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
  @keyframes faq-in{from{opacity:0;translate:0 -6px}}
  .faq details[open] p{animation:faq-in 360ms var(--ease-out) 60ms backwards}
}

/* ── появление при прокрутке ──────────────────────────────────────────
   Поля поднимаются, входя в окно: временная шкала прокрутки, без
   слушателя scroll. Где её нет или движение просили убрать — стоят сразу. */
@keyframes rise{from{opacity:0;transform:translateY(32px)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
  }
}

/* ── узкие экраны ─────────────────────────────────────────────────── */
@media (max-width:1199px){
  /* Планшет: слова сверху, неделя под ними во всю ширину; сцена — до
     места, где неделя растворилась. «По дням» приближается вокруг
     сегодняшнего дня. */
  .hero-in{display:block;min-height:0}
  .hero-stage{position:relative;inset:auto;height:calc(clamp(0px,2vh,24px) + 390px);margin:clamp(28px,4vh,48px) 0 0}
  .wv{--wv-zoom:1.3;--wv-focus:50% 40px}
  .hs-ghost{-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 94%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
    mask-image:linear-gradient(to bottom,#000 62%,transparent 94%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
  .ft{grid-template-areas:
    "call call call call call call call call call call call call"
    "clash clash clash clash clash clash clash clash clash clash clash clash"
    "chats chats chats chats chats chats chats chats chats chats chats chats"
    "site site site site site site money money money money money money"
    "site site site site site site team team team team team team"
    "pay pay pay pay pay pay pay pay pay pay pay pay"
    "till till till till till till till till till till till till"
    "cert cert cert cert cert cert cert cert cert cert cert cert"
    "guest guest guest guest guest guest guest guest guest guest guest guest"
    "chan chan chan chan chan chan chan chan chan chan chan chan"}
  .ft-money,.ft-team{grid-template-columns:1fr}
  .ft-money .ft-scene,.ft-team .ft-scene{justify-content:flex-start;min-height:260px}
  .faq-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-side{position:static;gap:18px}
  .faq-nav{display:flex;flex-wrap:wrap;gap:6px}
  .faq-nav a{margin:0;height:44px;padding:0 16px;background:var(--bg-2);font-size:15px}
}
/* Сообщения уже 1200 px: слова сверху, окно с карточками под ними — в
   половине плитки окну и карточкам тесно. Предмет — в угол к словам. */
@media (max-width:1199px){
  .ft-chats{grid-template-columns:minmax(0,1fr);min-height:0}
  .ft-chats .ft-text{max-width:min(52ch,calc(100% - 170px));padding-top:0}
  .ft-chats .ft-scene{order:0}
  .ft-chats .ft-obj{top:calc(var(--pad) - 14px);bottom:auto;width:150px}
}
@media (max-width:767px){
  .sec-head{grid-template-columns:1fr}
  .hero-field{border-radius:0 0 32px 32px}
  .hero-title{font-size:clamp(38px,10.5vw,50px)}
  .hero-actions .btn-lg{height:54px;padding:0 24px;font-size:16px}
  /* Телефон: неделя уменьшена и остаётся фоном. */
  /* «Сдавайте» и плашка под самое длинное слово всегда в одну строку:
     вместе это ~9.9em, кегль — от ширины экрана без полей. */
  .hero-title{font-size:min(46px,calc((100vw - 2 * var(--gutter)) / 9.9))}
  .hero-actions{flex-direction:column;align-items:stretch;width:100%}
  .hero-stage{height:calc(clamp(0px,2vh,24px) + 230px)}
  .hs-ghost{left:-260px;right:auto;width:1100px;zoom:.6;
    /* Края окна телефона: неделя гаснет к ним, а не режется на полуслове
       (аудит 3.10). Лента в 0,6 масштаба и сдвинута на 260 px — стопы в её
       собственных пикселях: край окна слева — 260 − поле/0,6, справа —
       (ширина окна + 156 − поле)/0,6. */
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 94%),linear-gradient(to right,transparent 237px,#000 343px,#000 calc((100vw + 136px) / .6 - 117px),transparent calc((100vw + 136px) / .6 - 10px));
    mask-image:linear-gradient(to bottom,#000 62%,transparent 94%),linear-gradient(to right,transparent 237px,#000 343px,#000 calc((100vw + 136px) / .6 - 117px),transparent calc((100vw + 136px) / .6 - 10px))}
  /* Телефон: «По дням» приближается сильнее — к четвергу и пятнице, что
     в середине окна (лента сдвинута на 260 px своих). Дятел — так же, как
     на компьютере, на нижнем краю поля, серединой на 72 % ширины, «только
     чуть-чуть поменьше» (владелец 21.10). */
  .wv{--wv-zoom:1.6;--wv-focus:55% 40px}
  .hs-bird{--bw:54px;right:calc(28% - var(--bw) / 2)}
  /* Первое поле на телефоне выше окна, пустоты под ним нет: полосы с
     подсказкой нет, отступ раздела обычный. */
  .hero{min-height:0}
  .hero-next{display:none}
  /* Хэллоуин одевает строку: нет строки — нет и паутины с пауком. */
  [data-season="halloween"] .hw-web,[data-season="halloween"] .hw-hang{display:none}
  .kinds{padding-top:var(--section-y)}
  /* Телефон (apple-design, гибкость под устройство): виден один день во
     всю ширину, как в календаре iOS. Сверху — сегментный переключатель
     дней, его подложка ездит за пальцем; дорожки листаются пальцем
     (scripts/week-swipe.mjs), вертикальная прокрутка остаётся странице. */
  .nw{padding:6px;border-radius:26px;--who:0px;--go:0px}
  .nw-days{display:none}
  .nw-switch{
    position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:4px 4px 10px;padding:3px;border-radius:12px;
    background:rgb(118 118 128 / .13);
  }
  .nw-thumb{
    position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:9px;background:var(--card);
    box-shadow:0 3px 8px rgb(23 24 26 / .12),0 1px 1px rgb(23 24 26 / .06);
    transform:translateX(100%);
  }
  .nw-seg{
    position:relative;z-index:1;height:40px;border:0;border-radius:9px;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink-2);
    cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 200ms var(--ease-out)
  }
  .nw-seg[aria-pressed="true"]{color:var(--ink)}
  .nw-seg:active{opacity:.6}
  .nw-seg:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .nw-row{grid-template-columns:1fr;gap:12px;padding:14px 14px 16px;border-radius:20px;background:var(--card);box-shadow:0 1px 2px var(--line)}
  .nw-row+.nw-row{margin-top:8px}
  .nw-row:active{transform:none;background:color-mix(in srgb,var(--card),var(--ink) 3%)}
  .nw-who img{width:48px;height:48px}
  .nw-who b{font-size:17px}
  .nw-who em{font-size:13.5px}
  .nw-go{display:none}
  .nw-track{height:48px;background:var(--fill);box-shadow:none;touch-action:pan-y;cursor:grab}
  .nw-strip{right:auto;width:300%;transform:translate3d(-33.3333%,0,0);will-change:transform}
  .nw-bk{top:5px;bottom:5px}
  .nw-bk b{font-size:13px;padding:0 6px 0 10px}
  .nw-cont{display:block;padding-left:12px}
  .nw-bk[data-tone="gap"]{top:9px;bottom:9px}
  .nw-legend{padding:14px 10px 6px;gap:8px 16px;font-size:12.5px}
  /* Остальные виды — одной строкой, листаются пальцем. */
  .kind-also{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter)}
  .kind-also::-webkit-scrollbar{display:none}
  .kind-also>*{flex:none;scroll-snap-align:start}
  [data-theme="dark"] .nw-row{background:#34373C;box-shadow:inset 0 1px 0 rgb(255 255 255 / .06)}
  [data-theme="dark"] .nw-track{background:#40434A;box-shadow:none}
  [data-theme="dark"] .nw-switch{background:rgb(118 118 128 / .26)}
  [data-theme="dark"] .nw-thumb{background:#5E6168;box-shadow:0 3px 8px rgb(0 0 0 / .3)}
  [data-theme="dark"] .nw-seg{color:#C9CDD2}
  [data-theme="dark"] .nw-seg[aria-pressed="true"]{color:#FFFFFF}
  /* Телефон: плитки столбиком, вещь под словами, предмет — в угол к заголовку. */
  .ft{display:flex;flex-direction:column;gap:12px}
  .ft-tile,.ft-money,.ft-team,.ft-channels,.ft-pay,.ft-till{display:flex;flex-direction:column;min-height:0;border-radius:28px;gap:20px}
  /* Предмет в углу: слова обтекают его справа, ниже предмета фраза идёт
     во всю ширину. Обтекает весь текст, а не только заголовок: на широком
     телефоне заголовок встаёт в одну строку, и фраза иначе уходила под
     предмет (владелец 10.10, «Деньги без тетради»). Место — ровно по
     предмету: 76 px в 12 px от края плитки и на 6 px выше слов, то есть
     70 px вниз; строка, что начинается ниже предмета, идёт во всю ширину. */
  .ft-text,.ft-pay .ft-text,.ft-till .ft-text,.ft-chats .ft-text{max-width:none}
  .ft-call .ft-text,.ft-chats .ft-text,.ft-money .ft-text,.ft-team .ft-text,.ft-pay .ft-text,.ft-till .ft-text,.ft-guests .ft-text{display:flow-root}
  .ft-call .ft-text>*+*,.ft-chats .ft-text>*+*,.ft-money .ft-text>*+*,.ft-team .ft-text>*+*,.ft-pay .ft-text>*+*,.ft-till .ft-text>*+*,.ft-guests .ft-text>*+*{margin-top:12px}
  .ft-call .ft-text::before,.ft-chats .ft-text::before,.ft-money .ft-text::before,.ft-team .ft-text::before,.ft-pay .ft-text::before,.ft-till .ft-text::before,.ft-guests .ft-text::before{content:'';float:right;width:calc(76px + 12px - var(--pad) + 10px);height:calc(76px - 6px - 2px)}
  :is(.ft-pay,.ft-till) .ft-text>.pay-svc{display:flex;width:max-content;margin-top:16px}
  .ch-app{width:46px;height:46px;padding:8px;border-radius:13px}
  .ch-dock{gap:8px}
  .ft-title{font-size:26px}
  /* Телефон: предмет в углу у заголовка, целиком внутри плитки, без
     сдвига от прокрутки; печать не падает сверху, а проявляется. */
  .ft-obj,.ft-call .ft-obj,.ft-chats .ft-obj,.ft-money .ft-obj,.ft-team .ft-obj,.ft-pay .ft-obj,.ft-till .ft-obj,.ft-guests .ft-obj{position:absolute;top:calc(var(--pad) - 6px);bottom:auto;right:12px;margin:0;width:76px;animation:none}
  /* Оплата и магазин: лист во всю ширину плитки, уходит под нижний край;
     над листом оплаты — место уведомлению. Капсула знаков — уже. */
  .ft-pay,.ft-till{padding-bottom:0}
  .ft-sheet{flex:1 1 auto;width:100%;max-width:380px}
  :is(.ft-pay,.ft-till) .ft-scene{padding-top:30px}
  :is(.ft-pay,.ft-till) .py-toast{left:12px}
  .ft-till .ft-text>.tl-brands{margin-top:16px}
  .tl-chz{height:40px}
  .pay-svc{height:40px;margin-top:4px}
  .pay-logo{padding:0 10px}
  .pay-logo[data-svc="robokassa"] svg{height:11px}
  .pay-logo[data-svc="yookassa"] svg{height:16px}
  .pay-logo[data-svc="tbank"] svg{height:18px}
  .ft-money{--obj-play:ft-pop 360ms var(--pop) 520ms backwards}
  .ft-scene{min-height:0;position:static}
  .cf-busy,.cf-new{padding:0 8px}
  .cf-busy b,.cf-new b{font-size:12px}
  .ft-money .ft-scene,.ft-team .ft-scene{min-height:0}
  .ft-money .ft-thing,.ft-team .ft-thing{margin:0}
  .ft-calls{width:100%}
  .ft-calls .ui-lookup{width:100%}
  /* Вещь продукта не шире плитки: на узком телефоне квитанция, лист
     уборки и поиск гостя ужимаются, а не вылезают за край. */
  .ft-scene>.ft-thing{min-width:0;max-width:100%}
  .ft-tile .ft-bezel{max-width:100%}
  .ft-money .ar-receipt,.ft-team .ar-task{width:100%;max-width:290px}
  .ft-money .ft-thing,.ft-team .ft-thing{width:100%}
  .ft-guests{display:flex}
  .ft-site .ft-scene{margin-bottom:calc(-1 * var(--pad) - 180px)}
  .ft-phone .ui-phone{width:270px}
  .cf-busy em,.cf-new em{display:none}
  .tw-in{--perch:80px;grid-template-columns:minmax(0,1fr);gap:0;border-radius:32px}
  .tw-copy{padding-top:0}
  .tw-card{padding:24px 20px 20px}
  .tw-submit{padding:0 14px;font-size:16px}
  .tw-niche-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tw-niche span{min-height:92px}
  /* «Другое» — полосой во всю ширину под четырьмя видами, а не одиноким рядом. */
  .tw-niche:last-child{grid-column:1/-1}
  .tw-niche:last-child span{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:6px 12px}
  .tw-niche:last-child .tw-niche-more{width:30px;height:30px}
  .tw-bird{right:22px;top:-84px;width:66px}
  .faq summary{padding:18px 16px 18px 20px;gap:14px;border-radius:22px}
  .faq-list{border-radius:22px}
  .faq details+details::before{left:20px;right:20px}
  .faq details p{padding:0 20px 22px}
  .faq details[open]{margin:5px}
  .faq details[open] summary{padding:13px 11px 13px 15px}
  .faq details[open] p{padding:2px 15px 18px;font-size:16.5px}
  .faq-group-title{margin-left:20px}
}
@media (prefers-reduced-motion:reduce){.chip,.nw-row,.nw-who img,.nw-go{transition:none}}

/* Планшет: оплата и магазин — каждая во всю ширину: слова слева, лист
   и предмет справа, лист уходит под нижний край. */
@media (min-width:768px) and (max-width:1199px){
  .ft-pay,.ft-till{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;column-gap:clamp(28px,4vw,48px)}
  .ft-pay .ft-text,.ft-till .ft-text{align-self:center;padding-bottom:var(--pad)}
  .ft-pay .ft-scene,.ft-till .ft-scene{justify-content:center;padding-top:44px}
}
}

/* Планшет: плитки «Деньги» и «Уборка» узкие — рядом с карточкой предмету
   места нет, он встаёт в угол к заголовку, как на телефоне. */
@media (min-width:768px) and (max-width:899px){
  .ft-money .ft-scene,.ft-team .ft-scene{position:static}
  .ft-money .ft-obj,.ft-team .ft-obj{position:absolute;top:calc(var(--pad) - 6px);right:14px;margin:0;width:80px;animation:none}
  .ft-money .ft-title,.ft-team .ft-title{padding-right:84px}
  .ft-money{--obj-play:ft-pop 360ms var(--pop) 520ms backwards}
  .ft-money .ft-thing,.ft-team .ft-thing{flex:1 1 auto;min-width:0;max-width:290px}
}

/* Самые узкие телефоны: окно брони плотнее, чтобы имя и время встали в ряд. */
@media (max-width:380px){
  /* Запись в одну строку и на 320 px: поля красного блока и бланка уже. */
  .tw-in{padding-inline:14px}
  .tw-card{padding:20px 16px 18px}
  /* Последняя ступень: ключ меньше, словам шире. */
  .stair-key{width:76px}
  .is-goal .stair-title,.is-goal .stair-text{padding-right:64px}
}
@media (max-width:360px){
  .tw-submit{font-size:15px;padding:0 10px}
  .ch-app{width:40px;height:40px;padding:7px;border-radius:12px}
  .ch-dock{gap:6px}
  /* Неделе каналов нужна вся ширина: поля плитки и рамки уже. */
  .ft-channels{--pad:18px}
  .ft-channels .ft-bezel{padding:4px}
  .ft-channels .ui-chweek{padding:14px 10px 12px}
  .ft-channels .cw-bk{padding:0 3px}
  /* Поиск гостя: метка «Постоянная» уходит, имя и визиты остаются — в
     узкой карточке рядом с лицом им тесно. */
  .ft-calls .ul-tag{display:none}
  .ft-calls .ul-price{flex-direction:column;align-items:flex-start;gap:6px}
  /* Телефон гостя — тем же макетом, только мельче целиком: внутри ничего
     не режется. */
  .ft-phone .ui-phone{width:270px;zoom:.84}
  /* Сертификат: QR меньше, «2 из 3» в строку. */
  .ft-certs .ui-cert .qr{width:66px;height:66px}
  .ft-certs .uc-left b{font-size:24px}
  .ft-certs .uc-spent{display:none}
  .ft-certs .uc-left .flip>span{white-space:nowrap}
  /* Картотека: дата строкой над бронью, бронь и сумма в ряд. */

  .ft-certs .uc-body{padding-inline:16px}
  .hero-free{font-size:13.5px}
}

/* ── Страница «скоро появится» (sections/soon.mjs) ──
   Ниши и политика, пока их страниц нет: заголовок, что здесь будет, куда
   пойти сейчас. Предмет ниши — справа, той же серии, что на главной. */
.soon{padding-block:clamp(56px,9vw,128px) clamp(72px,10vw,140px)}
.soon-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,6vw,96px);align-items:center}
.soon-text{display:flex;flex-direction:column;gap:20px;max-width:640px}
.soon-kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--crest)}
.soon-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.soon-list{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.soon-list li{position:relative;padding-left:22px;font-size:17px;line-height:1.45;color:var(--ink)}
.soon-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:2px;border-radius:2px;background:var(--crest)}
.soon-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.soon-acts .ic{width:18px;height:18px;margin-left:8px}
.soon-thing{display:block;justify-self:center;width:100%;max-width:420px}
.soon-thing img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 36px rgb(20 22 24 / .16))}
@media (max-width:767px){
  .soon-in{grid-template-columns:1fr}
  .soon-thing{order:-1;max-width:60vw;justify-self:start}
  .soon-acts .btn{flex:1 1 100%}
}

}