/* Pelican — витрина. Бумага + чернила, Roboto Flex / Geist / Geist Mono, киноварь точечно (раздел 6.5 ТЗ, палитра — qa/_audit-2026-09-30/reports/color.md §6). */

:root{
  --bg:#F1F0EC; --surface:#FFFFFF; --surface-2:#E4E3DE;
  --ink:#0D0D0F; --text:#0D0D0F; --muted:#5D5D63; --line:#D9D8D3;
  --accent:#B82618; --accent-hover:#9C1E12; --accent-ink:#FFFFFF;
  --text-on-ink:#F1F0EC; --muted-on-ink:#9C9CA3; --accent-on-ink:#FF7B64;
  --line-on-ink:rgba(241,240,236,.14);
  --err:#F2B544; /* ошибка формы — янтарь + значок «!», чтобы не путать с красной кнопкой */
  --warm:#E8920C; /* клюв: только заливка и точки, не текст на светлом (2.15:1) */
  /* скругления — четыре значения (приёмка арт-директора: было 13); у вложенного — внешний минус отступ. Корпуса нарисованных устройств — свои */
  --r-s:8px; --r-m:16px; --r-l:28px; --r-pill:999px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,64px);
  --gap:16px;
  --sec-y:clamp(56px,6vw,90px); /* половина промежутка: между секциями clamp(96,12vw,180) */
  --hdr:56px;
  --f-disp:'Roboto Flex', 'Arial Narrow', Arial, sans-serif;
  --f-text:'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
@media (min-width:768px){ :root{ --gap:24px; } }
@media (min-width:1024px){ :root{ --hdr:64px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-bottom:var(--consent-h,0px); } /* фокус и якоря не уходят под полосу cookie (её высоту ставит consent.js) */
html.is-locked{ overflow:hidden; }
/* переход из демо: пока доскролл не готов, скрыт только контент — шапка с логотипом видна, белого экрана нет */
html.is-arriving main, html.is-arriving .ftr{ visibility:hidden; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.55 var(--f-text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* зерно 4% */
body::before{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul{ padding:0; list-style:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.sec--ink :focus-visible, .ftr :focus-visible, .menu :focus-visible{ outline-color:var(--text-on-ink); }
/* фирменное выделение и каретка (delight.md п. 9): на бумаге — прозрачная киноварь, на чернилах — клюв */
::selection{ background:rgba(184,38,24,.16); color:var(--ink); }
.sec--ink ::selection, .ftr ::selection, .menu ::selection{ background:var(--warm); color:var(--ink); }
input, textarea{ caret-color:var(--accent); }
.sec--ink input, .sec--ink textarea{ caret-color:var(--accent-on-ink); }

.sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:16px; top:-60px; z-index:300; background:var(--ink); color:var(--text-on-ink); padding:10px 16px; border-radius:var(--r-pill); text-decoration:none; }
.skip:focus{ top:10px; }

.wrap{ max-width:1440px; margin:0 auto; padding-inline:var(--gutter); }
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); }
.grid > *{ grid-column:1/-1; }

.mono{ font:500 11px/1.4 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; }
@media (min-width:768px){ .mono{ font-size:12px; } }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font:500 11px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:""; flex:none; width:26px; height:1px; background:currentColor; opacity:.5; }
@media (min-width:768px){ .eyebrow{ font-size:12px; } }
.sec--ink .eyebrow{ color:var(--muted-on-ink); }

/* ---------- кнопки ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 28px; border-radius:var(--r-pill); border:1.5px solid transparent;
  font:600 16px/1.2 var(--f-text); text-decoration:none; text-align:center; white-space:nowrap;
  background:transparent; color:inherit;
  transition:background-color .2s, color .2s, border-color .2s, transform .4s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn__in{ display:inline-block; transition:transform .4s var(--ease-out); pointer-events:none; }
.btn--accent{ background:var(--accent); color:var(--accent-ink); }
.btn--accent:hover{ background:var(--accent-hover); }
.btn--accent:disabled, .btn--accent:disabled:hover{ background:var(--surface-2); color:var(--muted); cursor:not-allowed; }
.btn--ink{ background:var(--ink); color:var(--text-on-ink); }
.btn--ink:hover{ background:#26262B; }
.btn--line{ border-color:currentColor; }
.btn--line:hover{ background:var(--ink); border-color:var(--ink); color:var(--text-on-ink); }
.sec--ink .btn--line:hover{ background:var(--text-on-ink); border-color:var(--text-on-ink); color:var(--ink); }
.btn--sm{ min-height:40px; padding:0 18px; font-size:15px; }
.btn--xl{ min-height:56px; width:100%; }
.btn-text{
  background:none; border:0; padding:6px 0; font:500 15px/1.3 var(--f-text); color:inherit;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.btn-text:hover{ text-decoration-thickness:2px; }

/* ---------- шапка ---------- */
.hdr{
  position:sticky; top:0; z-index:50; height:var(--hdr);
  background:rgba(241,240,236,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.hdr.is-scrolled{ border-bottom-color:var(--line); }
.hdr{ transition:border-color .2s, background-color .3s, color .3s; }
.hdr.on-ink{ background:rgba(13,13,15,.86); color:var(--text-on-ink); border-bottom-color:var(--line-on-ink); }
.hdr.on-ink .wordmark{ color:var(--text-on-ink); }
.hdr.on-ink .btn--ink{ background:var(--text-on-ink); color:var(--ink); }
.hdr.on-ink .hdr__nav a.is-active::after{ background:var(--accent-on-ink); }
.hdr.on-ink .hdr__menu{ border-color:var(--text-on-ink); }
.hdr.on-ink :focus-visible{ outline-color:var(--text-on-ink); }
.hdr__in{ height:100%; display:flex; align-items:center; gap:24px; }
.wordmark{
  color:inherit; display:inline-flex; align-items:center; gap:8px; padding:11px 0;
  font-family:var(--f-disp); font-size:22px; line-height:1; letter-spacing:-.03em;
  font-variation-settings:"wdth" 120, "wght" 800; text-decoration:none;
}
.wordmark--ink{ color:var(--text-on-ink); }
/* знак-птица перед словом — контур из логотипа (assets/brand/pelican.svg): красный на бумаге, светлее на тёмной шапке и в меню */
.mark{ flex:none; width:32px; height:32px; color:var(--accent); }
/* лёгкая обводка тем же цветом: в 20–32 px тонкие линии логотипа иначе пропадают */
.mark__body{ fill:currentColor; stroke:currentColor; stroke-width:1.2; stroke-linejoin:round; }
.mark__beak{ fill:var(--warm); stroke:var(--warm); stroke-width:1.2; stroke-linejoin:round; }
.hdr.on-ink .mark, .wordmark--ink .mark{ color:var(--accent-on-ink); }
@media (max-width:359.98px){ .hdr__in{ gap:12px; } }
/* на телефоне «Заявка» — в нижней панели; в шапке второй раз не дублируем */
@media (max-width:1023.98px){ .hdr__act .btn--ink{ display:none; } }
.hdr__nav{ display:none; gap:28px; margin-left:auto; }
.hdr__nav a{
  position:relative; font:500 15px/1 var(--f-text); text-decoration:none; padding:8px 0;
  transition:color .2s;
}
.hdr__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
.hdr__nav a:hover::after{ transform:scaleX(1); }
/* активный пункт: цвет текста обычный, под ним линия 2px акцентом */
.hdr__nav a.is-active::after{ transform:scaleX(1); height:2px; background:var(--accent); }
.hdr__act{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.hdr__tg{ display:none; font:500 15px/1 var(--f-text); text-decoration:none; padding:12px 12px; }
.hdr__tg:hover{ text-decoration:underline; text-underline-offset:4px; }
/* телефон в шапке — только на широком десктопе, где хватает места рядом с Telegram */
.hdr__tel{ display:none; font:500 15px/1 var(--f-text); text-decoration:none; padding:12px 4px; }
.hdr__tel:hover{ text-decoration:underline; text-underline-offset:4px; }
@media (min-width:1200px){ .hdr__tel{ display:inline-block; } }
.hdr__menu{
  min-height:44px; padding:0 16px; border-radius:var(--r-pill); border:1.5px solid var(--text); background:transparent;
  font:600 15px/1 var(--f-text);
}
.hdr__act .btn--sm{ min-height:44px; }
@media (min-width:1024px){
  .hdr__nav{ display:flex; }
  .hdr__act{ margin-left:32px; }
  .hdr__tg{ display:inline-block; }
  .hdr__menu{ display:none; }
  .hdr__act .btn--sm{ min-height:40px; }
}

/* ---------- мобильное меню ---------- */
.menu{
  position:fixed; inset:0; z-index:120; background:var(--ink); color:var(--text-on-ink);
  display:flex; flex-direction:column; padding:0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
  opacity:0; transform:translateY(-12px); transition:opacity .25s, transform .35s var(--ease-out);
  overflow-y:auto;
}
.menu.is-open{ opacity:1; transform:none; }
.menu__top{ height:var(--hdr); display:flex; align-items:center; justify-content:space-between; }
.menu__close{ min-height:44px; padding:0 16px; border-radius:var(--r-pill); border:1.5px solid var(--text-on-ink); background:transparent; font:600 15px/1 var(--f-text); color:var(--text-on-ink); }
.menu__nav{ display:flex; flex-direction:column; margin-top:32px; }
.menu__nav a{
  font-family:var(--f-disp); font-size:44px; line-height:1.15; letter-spacing:-.02em;
  font-variation-settings:"wdth" 110, "wght" 800; text-decoration:none; padding:6px 0;
  border-bottom:1px solid var(--line-on-ink);
}
.menu__contacts{ margin-top:auto; padding-top:32px; display:flex; flex-direction:column; gap:4px; }
.menu__contacts a{ font:500 17px/1.4 var(--f-text); text-decoration:none; color:var(--text-on-ink); padding:8px 0; }

/* ---------- секции ---------- */
.sec{ padding-block:var(--sec-y); scroll-margin-top:0; }
section[id]{ scroll-margin-top:calc(var(--hdr) + 16px); }
.sec--ink{ background:var(--ink); color:var(--text-on-ink); }
.sec__head{ margin-bottom:clamp(40px,5vw,72px); }
.h2{
  font-family:var(--f-disp); font-weight:800; font-size:44px; line-height:.95; letter-spacing:-.02em;
  font-variation-settings:"wdth" 112, "wght" 820;
  margin:16px 0 24px; text-wrap:balance;
}
.h2 .l{ display:block; }
@media (min-width:768px){ .h2{ font-size:clamp(44px,7vw,120px); letter-spacing:-.04em; margin:20px 0 32px; } }
/* без переноса — только с JS: там app.js (fitH2) подгоняет кегль под самую длинную строку */
@media (min-width:1024px){ .js .h2 .l{ white-space:nowrap; } }
.h2-anim .h2{ font-variation-settings:"wdth" 60, "wght" 700; transition:font-variation-settings .9s var(--ease-out); }
.h2-anim .h2.is-stretched{ font-variation-settings:"wdth" 112, "wght" 820; }
/* строки H2 поднимаются из-под маски; clip-path с запасом, чтобы не резать выносные элементы */
.h2-anim .h2 .l{ clip-path:inset(-.2em -.3em -.16em -.3em); }
.h2-anim .h2 .l__in{ display:inline-block; transform:translateY(135%); transition:transform .9s var(--ease-out); }
.h2-anim .h2 .l + .l .l__in{ transition-delay:.09s; }
.h2-anim .h2.is-stretched .l__in{ transform:none; }
.sec__lead{ font-size:18px; line-height:1.5; color:var(--muted); max-width:52ch; }
.sec--ink .sec__lead{ color:var(--muted-on-ink); }
.sec__leadrow{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 40px; }

/* появление */
.js [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- HERO ---------- */
.hero{ padding:20px 0 64px; overflow:hidden; }
.hero__titlebox{ position:relative; margin:16px 0 24px; }
.hero__title{
  --rw:100;
  font-family:var(--f-disp); font-weight:800; font-size:13vw; line-height:.92; letter-spacing:-.035em;
  font-variation-settings:"wdth" var(--rw), "wght" 820;
  will-change:transform;
}
.hero__title .l{ display:block; white-space:nowrap; }
.hero__title em{ font-style:normal; color:var(--accent); }
.hero__lead{ font-size:18px; line-height:1.45; max-width:38ch; }
.t-now{ font-variant-numeric:tabular-nums; }
.anchor{ margin-top:28px; }
.anchor .mono{ color:var(--muted); }
.anchor__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.anchor__reset{ background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--text); text-decoration:underline; text-underline-offset:3px; padding:15px 0; margin:-15px 0; }
.anchor__price{
  font-family:var(--f-disp); font-size:44px; line-height:1; letter-spacing:-.03em; margin:8px 0 10px;
  font-variation-settings:"wdth" 100, "wght" 800; font-variant-numeric:tabular-nums;
}
.anchor__more{ font-size:15px; color:var(--muted); max-width:44ch; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero__btns .btn{ flex:1 1 auto; padding:0 24px; } /* не влезли в строку — обе на всю ширину, без «лесенки» */
.hero__proof{ color:var(--muted); margin-top:24px; font-size:15px; line-height:1.5; text-wrap:balance; max-width:60ch; }
/* строка над H1: обычным шрифтом, читается сразу (вместо моно-надписи капсом) */
.hero__kicker{ font:500 17px/1.35 var(--f-text); color:var(--text); }
@media (min-width:1024px){ .hero__kicker{ font-size:20px; } }
.hero__row{ row-gap:0; }
.hero__left{ display:flex; flex-direction:column; align-items:flex-start; }
.assist{ margin-top:32px; }

/* экран блокировки: общий вид уведомления. На телефоне и планшете — одна карточка на бумаге, от 1280 — телефон */
.lock{ margin:0; }
.lock__list{ display:grid; padding:0; list-style:none; }
.note{
  position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; align-content:start;
  padding:12px 14px 13px 12px; border-radius:var(--r-m); color:var(--ink);
}
.note__icon{ grid-row:1 / span 2; width:36px; height:36px; border-radius:var(--r-s); background:var(--bg); display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(13,13,15,.07); }
.note__icon .mark{ width:22px; height:22px; }
.note__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:14px; line-height:1.3; }
.note__title{ font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note__ago{ flex:none; font-size:13px; color:rgba(13,13,15,.48); }
.note__body{ font-size:14px; line-height:1.35; margin-top:2px; }
.lock__cap{ margin-top:10px; font-size:13px; line-height:1.4; color:var(--muted); }
.lock__cap a{ color:var(--text); text-underline-offset:3px; white-space:nowrap; padding:14px 0; margin:-14px 0; } /* зона нажатия 44px, строка не сдвигается */
.lock__date, .lock__time{ display:none; }
.lock .note.is-wait{ opacity:0; visibility:hidden; }
@media (max-width:1279.98px){
  /* карточки лежат в одной ячейке: высота блока — по самой длинной, смена заявки ничего не сдвигает */
  .note{ grid-area:1 / 1; background:var(--surface); border:1px solid var(--line); box-shadow:0 12px 28px -16px rgba(13,13,15,.28); }
  .note:nth-child(n+2){ opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s; }
}

@media (min-width:600px){
  .hero__title{ font-size:12vw; }
}
@media (min-width:1024px){
  .hero{ padding:28px 0 clamp(56px,6vw,96px); }
  .hero__titlebox{ margin:18px 0 32px; }
  .hero__title{ --rw:112; font-size:clamp(64px,10vw,168px); line-height:.88; letter-spacing:-.04em; }
  .hero__lead{ font-size:20px; }
  .anchor__price{ font-size:56px; }
  .hero__left{ grid-column:1/7; }
  .assist{ grid-column:7/13; margin-top:0; }
}
@media (min-width:1024px) and (max-width:1279.98px){
  /* узкий десктоп: одна карточка справа от второй строки H1, на месте прежнего веера постеров */
  .hero__titlebox{ margin-bottom:56px; }
  .lock{ position:absolute; right:0; top:calc(50% + 8px); width:min(360px, 37%); }
}
@media (min-width:1280px){
  /* телефон встаёт справа от «без звонка» и уходит вниз, подбор и текст — две колонки слева от него.
     Левая колонка — по ширине лида, остальное отдано подбору (приёмка: подбор не должен быть теснее, чем до телефона) */
  .hero__row{ grid-template-columns:minmax(0,430px) minmax(0,1fr) var(--pw); column-gap:40px; }
  .hero__left, .assist{ grid-column:auto; }
  .hero{ --pw:clamp(240px,19vw,290px); }
  .hero__btns .btn{ padding:0 18px; } /* обе кнопки в одну строку в колонке 430 px */
  .lock{ position:absolute; right:0; top:calc(50% + 14px); width:var(--pw); z-index:1; }
  .lock__phone{
    padding:9px; border-radius:48px; background:#0D0D0F;
    box-shadow:inset 0 0 0 1.5px #2A2A2F, 0 50px 80px -40px rgba(13,13,15,.55), 0 24px 40px -28px rgba(13,13,15,.4);
  }
  /* экран не «айфон из рекламы»: графит с зерном бумаги, без выреза, фонарика и камеры; по высоте помещается в первый экран 900 px */
  .lock__screen{
    position:relative; aspect-ratio:300 / 520; border-radius:40px; overflow:hidden; padding:0 9px;
    color:#F4F3EF; text-align:center;
    background:#1A1A1D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .lock__screen::after{ content:""; position:absolute; bottom:8px; left:50%; width:36%; height:4px; margin-left:-18%; border-radius:var(--r-pill); background:rgba(244,243,239,.75); }
  .lock__date:empty{ visibility:hidden; }
  .lock__date{ display:block; padding-top:40px; font:600 15px/1.2 var(--f-text); color:rgba(244,243,239,.82); }
  .lock__time{
    display:block; margin-top:2px; font-family:var(--f-disp); font-size:calc(var(--pw) * .28); line-height:1; letter-spacing:-.01em;
    font-variation-settings:"wdth" 104, "wght" 640; font-variant-numeric:tabular-nums; color:rgba(244,243,239,.94);
  }
  .lock__list{ display:flex; flex-direction:column; gap:8px; margin-top:26px; text-align:left; }
  .note{
    background:rgba(244,243,239,.9); -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3);
    grid-template-columns:30px minmax(0,1fr); column-gap:9px; padding:10px 12px 11px 10px; border-radius:var(--r-m);
  }
  /* кегль в пропорции настоящего экрана: 15 pt на 390 pt ширины ≈ 12 px на этом телефоне */
  .note__icon{ width:30px; height:30px; border-radius:var(--r-s); }
  .note__icon .mark{ width:19px; height:19px; }
  .note__head, .note__body{ font-size:12.5px; line-height:1.3; }
  .note__ago{ font-size:11.5px; }
  .note:nth-child(2){ opacity:.92; }
  .note:nth-child(n+4){ opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s; }
  .lock__cap{ margin-top:16px; padding-left:6px; }
}
@media (min-width:1280px) and (max-width:1439.98px){
  /* телефон уже 260 px: заявки выше, экран чуть длиннее; третья упёрлась бы в низ экрана — в стопке две */
  .lock__screen{ aspect-ratio:300 / 580; }
  .note:nth-child(n+3){ opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s; }
}
/* мобила: лид → цена (сайт обещает цену без звонка — она в первом экране, приёмка accept-copy п. 3) → уведомление → окно подбора
   (начинается в первом экране) → «Смотреть примеры» → доказательства */
@media (max-width:1023.98px){
  .hero .wrap{ display:flex; flex-direction:column; }
  .hero__titlebox, .hero__row, .hero__left{ display:contents; }
  .hero__kicker{ order:0; }
  .hero__title{ order:1; margin:16px 0 24px; }
  .hero__lead{ order:2; }
  .anchor{ order:3; margin-top:20px; }
  .lock{ order:4; margin-top:20px; }
  .assist{ order:5; }
  .hero__btns{ order:6; margin-top:20px; }
  .hero__calc{ display:none; }
  .hero__more{ flex:1; }
  .hero__proof{ order:7; }
}
@media (max-width:359.98px){ .lock{ margin-top:14px; } .note{ padding:10px 12px 11px 10px; column-gap:10px; } .note__body{ font-size:13.5px; } }

/* ---------- окно подбора ---------- */
.assist__win{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  display:flex; flex-direction:column; overflow:hidden;
}
.assist__head{ height:48px; flex:none; display:flex; align-items:center; gap:10px; padding:0 16px; border-bottom:1px solid var(--line); font:600 15px/1 var(--f-text); }
.assist__head b{ font-weight:600; }
.assist__logo{ width:28px; height:28px; display:grid; place-items:center; }
.assist__logo .mark{ width:28px; height:28px; }
.assist__tag{ margin-left:auto; color:var(--muted); display:none; }
@media (min-width:600px){ .assist__tag{ display:block; } }
.assist__log{ position:relative; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg{ max-width:88%; padding:10px 14px; font-size:16px; line-height:1.4; background:var(--surface-2); border-radius:var(--r-m) var(--r-m) var(--r-m) 4px; align-self:flex-start; }
.msg--user{ align-self:flex-end; background:var(--ink); color:var(--text-on-ink); border-radius:var(--r-m) var(--r-m) 4px var(--r-m); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid var(--text); background:transparent; font:500 15px/1.25 var(--f-text); text-align:left; text-decoration:none;
  transition:background-color .15s, color .15s;
}
.chip:hover{ background:var(--ink); color:var(--text-on-ink); }
@media (pointer:fine){ .chip{ min-height:40px; } }
.assist__input{ flex:none; display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.assist__input input{
  flex:1; min-width:0; height:52px; padding:0 16px; border-radius:var(--r-m); border:1px solid var(--line); background:var(--bg);
  font-size:16px; outline:none; transition:border-color .2s;
}
.assist__input input::placeholder{ color:var(--muted); }
.assist__input input:focus{ border-color:var(--ink); }
.assist__input input:focus-visible{ box-shadow:0 0 0 3px rgba(184,38,24,.22); }
.assist__input .btn{ padding:0 22px; }
@keyframes called{ from{ box-shadow:0 0 0 3px var(--ink); } to{ box-shadow:0 0 0 3px rgba(13,13,15,0); } }
.assist__win.is-called{ animation:called 1.4s var(--ease-out); }
.assist__note{ margin-top:12px; color:var(--muted); font-size:14px; line-height:1.45; }
.assist__note a{ color:var(--text); text-underline-offset:3px; }
/* высота окна — по содержимому: в начале все чипы видны целиком и внутренней прокрутки нет, поэтому колесо над подбором листает страницу.
   Разговор длиннее предела листается внутри, а докрученный до края отдаёт прокрутку странице (без overscroll-behavior:contain) */
@media (min-width:1024px){
  .assist__win{ min-height:420px; }
  .assist__log{ flex:1; max-height:480px; overflow-y:auto; scrollbar-width:thin; }
}
@media (max-width:420px){ .assist__input input{ padding:0 12px; } .assist__input .btn{ padding:0 18px; } }

/* карточка результата */
.res{
  background:var(--surface); border:1px solid var(--text); border-radius:calc(var(--r-l) - 16px); padding:20px; /* в логе с отступом 16 */
  display:flex; flex-direction:column; gap:8px; scroll-margin-top:calc(var(--hdr) + 12px); outline:none;
}
.res.is-flash{ animation:resIn .45s var(--ease-out); }
@keyframes resIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.res__top{ display:flex; gap:14px; align-items:center; margin-bottom:6px; }
.res__thumb{ flex:none; width:120px; height:75px; border-radius:var(--r-s); object-fit:cover; object-position:top; border:1px solid var(--line); background:var(--surface-2); }
.res__title{ font:600 16px/1.3 var(--f-text); }
.res__sub{ color:var(--muted); margin-top:4px; }
.res__price{
  font-family:var(--f-disp); font-size:24px; line-height:1.08; letter-spacing:-.02em;
  font-variation-settings:"wdth" 100, "wght" 800; margin-top:4px;
}
.res__term{ color:var(--muted); }
.res__label{ font:600 14px/1.3 var(--f-text); margin-top:6px; }
.res__fixes li, .res__fix, .res__pkg, .res__real, .res__none{ font-size:15px; line-height:1.45; }
.res__pkg{ color:var(--muted); }
.res__real a{ text-underline-offset:3px; }
.res__btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.res__btns .btn{ min-height:44px; padding:0 18px; font-size:15px; }
.res__text-btns{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; color:var(--muted); }
.res__text-btns .btn-text{ color:var(--text); font-size:14px; min-height:44px; }
@media (pointer:fine){ .res__text-btns .btn-text{ min-height:32px; } }
@media (min-width:1024px){ .res__price{ font-size:28px; } }
@media (max-width:420px){ .res__btns .btn{ flex:1 1 100%; } .res__thumb{ width:96px; height:60px; } .res__text-btns > span{ display:none; } .res__text-btns{ gap:0 20px; } }

/* ---------- ПРИМЕРЫ ---------- */
.ex{ align-items:start; }
.ex__list{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 8px; scroll-padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.ex__list::-webkit-scrollbar{ display:none; }
.ntab{
  flex:none; width:148px; scroll-snap-align:start; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:8px; border-radius:var(--r-m); -webkit-tap-highlight-color:transparent;
}
.ntab__pic{ display:block; width:148px; height:92px; border-radius:var(--r-s); overflow:hidden; background:var(--surface-2); outline:2px solid transparent; outline-offset:0; transition:outline-color .2s; }
.ntab__pic img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.ntab__txt{ display:flex; flex-direction:column; gap:2px; padding:6px 8px 8px; border-radius:var(--r-s); transition:background-color .2s, color .2s; }
.ntab__name{ font:600 15px/1.25 var(--f-text); }
.ntab__meta{ display:none; }
.ntab__price{ color:var(--muted); }
.ntab[aria-selected="true"] .ntab__pic{ outline-color:var(--ink); }
.ntab[aria-selected="true"] .ntab__txt{ background:var(--ink); color:var(--text-on-ink); }
.ntab[aria-selected="true"] .ntab__price{ color:var(--muted-on-ink); }

.stand{ margin-top:28px; min-width:0; }
.stand__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.nhead__company{ font:600 20px/1.25 var(--f-text); }
.nhead__offer{ font-size:15px; line-height:1.45; color:var(--muted); margin-top:6px; max-width:60ch; }
.nhead__pricem{ display:flex; flex-direction:column; gap:4px; margin-top:16px; }
.nhead__pricem .mono{ color:var(--muted); }
.nhead__price{ font-family:var(--f-disp); font-size:32px; line-height:1; letter-spacing:-.02em; font-variation-settings:"wdth" 100, "wght" 800; }
.seg{ display:none; flex:none; height:36px; padding:3px; border-radius:var(--r-pill); background:var(--surface-2); }
.seg button{
  height:30px; padding:0 14px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted);
  font:500 12px/1 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; transition:background-color .2s, color .2s;
}
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--text-on-ink); }

.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); }
.stand__stage{ margin-top:20px; padding:24px 16px; background:transparent; border:0; }
.stand__hint{ display:none; color:var(--muted); margin-bottom:18px; }
.stand__hint a{ text-underline-offset:3px; }
.hint-on, .hint-shield{ display:none; }
.is-live-stand .hint-on{ display:inline; }
.is-live-stand .hint-off{ display:none; }
.is-live-stand.is-shielded-stand .hint-on{ display:none; }
.is-live-stand.is-shielded-stand .hint-shield{ display:inline; }
.stand__slow{ margin-top:16px; font-size:15px; }

/* постер стенда и миниатюры списка ниш — не на первом экране: с JS грузятся, когда список подъезжает (класс imgs-on, app.js).
   lazy-картинка с display:none не запрашивается; без JS правило не действует */
.js:not(.imgs-on) .ntab__pic img, .js:not(.imgs-on) .device__poster img{ display:none; }

/* устройства */
.device{ position:relative; margin-inline:auto; }
.device__body{ position:relative; background:var(--ink); }
.device__screen{ position:relative; overflow:hidden; background:var(--surface-2); }
.device__poster{ position:absolute; inset:0; z-index:2; display:block; transition:opacity .3s, visibility 0s .3s; }
.device__poster img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.device__poster picture{ display:contents; }
.device__frame{ position:absolute; top:0; left:0; z-index:1; border:0; background:#fff; }
.is-live .device__poster{ opacity:0; visibility:hidden; pointer-events:none; }
/* слой над живым демо: колесо листает страницу, клик открывает демо для прокрутки (app.js, shield) */
.device__shield{ position:absolute; inset:0; z-index:2; display:none; cursor:pointer; }
.is-shielded .device__shield{ display:block; }
.device__progress{ position:absolute; z-index:3; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.7); overflow:hidden; display:none; }
.device__progress::before{ content:""; position:absolute; top:0; bottom:0; width:35%; background:var(--ink); animation:prog 1.1s ease-in-out infinite; }
.is-loading .device__progress{ display:block; }
@keyframes prog{ from{ left:-35%; } to{ left:100%; } }
.device__base{ display:none; }

.device--phone{ width:min(66vw,260px); }
.device--phone .device__body{ border-radius:44px; padding:10px; }
.device--phone .device__screen{ aspect-ratio:390/844; border-radius:34px; }
.device--phone .device__screen::after{ content:""; position:absolute; z-index:4; top:10px; left:35%; width:30%; height:22px; border-radius:var(--r-pill); background:#000; pointer-events:none; }
@media (max-width:1023.98px){
  .device--phone{ width:min(58vw,230px); }
  .device--phone .device__body{ border-radius:36px; padding:8px; }
  .device--phone .device__screen{ border-radius:28px; }
  .device--phone .device__screen::after{ top:8px; height:18px; }
}
.device--laptop{ width:92.5%; }
.device--laptop .device__body{ border-radius:var(--r-m); padding:14px 10px 10px; }
.device--laptop .device__screen{ aspect-ratio:16/10; border-radius:4px; }
.device--laptop .device__base{ display:block; height:10px; width:108%; margin-left:-4%; background:#1F1F23; border-radius:0 0 10px 10px; }

.nbody__cta{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.nbody__cta .btn{ width:100%; }
.nbody__grid{ margin-top:32px; }
.nprice{ display:none; }
.tile__h{ font:600 15px/1.3 var(--f-text); padding:20px 20px 4px; }
.pairs{ padding:0 20px 8px; }
.nfix__note{ padding:0 20px 18px; font-size:13px; line-height:1.4; color:var(--muted); }
.pair{ padding:16px 0; border-top:1px solid var(--line); display:grid; gap:10px; }
.pair:first-child{ border-top:0; }
.pair .mono{ display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.pair__pain p{ font:500 16px/1.4 var(--f-text); }
.pair__fix p{ font-size:15px; line-height:1.5; }
.pair__arr{ font-family:var(--f-mono); color:var(--muted); display:none; }
.dash li{ position:relative; padding-left:24px; font-size:15px; line-height:1.45; }
.dash li + li{ margin-top:8px; }
.dash li::before{ content:""; position:absolute; left:0; top:.72em; width:12px; height:1px; background:var(--muted); }
.sec--ink .dash li::before{ background:var(--muted-on-ink); }
.nincl{ margin-top:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.nincl summary{
  min-height:56px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none;
  font:600 16px/1.3 var(--f-text);
}
.nincl summary::-webkit-details-marker{ display:none; }
.nincl summary::after{ content:""; width:14px; height:14px; flex:none; background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat; transition:transform .2s; }
.nincl[open] summary::after{ transform:rotate(45deg); }
.nincl .dash{ padding:0 0 20px; }
.nreal{ margin-top:16px; display:flex; gap:16px; align-items:center; padding:14px; text-decoration:none; transition:border-color .2s; }
.nreal:hover{ border-color:var(--text); }
.nreal__pic{ flex:none; width:120px; aspect-ratio:16/10; border-radius:var(--r-s); overflow:hidden; border:1px solid var(--line); }
.nreal__pic img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.nreal__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.nreal__txt .mono{ color:var(--muted); font-size:11px; }
.nreal__name{ font:600 16px/1.3 var(--f-text); }
.nreal__note{ font-size:14px; line-height:1.4; color:var(--muted); }
.nreal__link{ font:500 13px/1.4 var(--f-mono); text-decoration:underline; text-underline-offset:3px; margin-top:2px; }

/* без JS все восемь карточек видны списком; с JS — только стенд */
.ncards .ncard[hidden]{ display:block !important; }
.ncard{ margin-top:56px; padding-top:32px; border-top:1px solid var(--line); }
.js .ncards{ display:none !important; }

@media (min-width:768px){
  .ntab{ width:176px; }
  .ntab__pic{ width:176px; height:110px; }
  .pair{ grid-template-columns:minmax(0,1fr) 20px minmax(0,1.25fr); gap:16px; align-items:start; }
  .pair__arr{ padding-top:22px; display:block; }
  .nreal__pic{ width:200px; }
}
@media (min-width:1024px){
  .ex__list{
    grid-column:1/5; position:sticky; top:88px; flex-direction:column; gap:0; overflow:visible;
    margin:0; padding:0; -webkit-mask-image:none; mask-image:none; border-bottom:1px solid var(--line);
  }
  .ntab{
    width:auto; flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 12px 16px 0; border-top:1px solid var(--line); border-radius:0; position:relative;
    transition:padding .4s var(--ease-out), background-color .25s, color .25s;
  }
  .ntab__txt{ order:1; padding:0; gap:6px; min-width:0; background:none !important; }
  .ntab__name{
    font-family:var(--f-disp); font-size:30px; line-height:1; letter-spacing:-.02em; white-space:nowrap;
    font-variation-settings:"wdth" var(--nw,100), "wght" 700; transition:font-variation-settings .4s var(--ease-out);
  }
  .ntab__meta{ display:block; color:var(--muted); white-space:nowrap; letter-spacing:.04em; }
  .ntab__price{ display:none; }
  .ntab__pic{
    order:2; flex:none; width:96px; height:60px; border-radius:var(--r-s); outline:0;
    opacity:0; transform:translateX(8px); transition:opacity .3s, transform .4s var(--ease-out);
  }
  .ntab__name{ line-height:30px; }
  .ntab:hover .ntab__name, .ntab[aria-selected="true"] .ntab__name{ font-size:var(--hfs,30px); }
  .ntab--nopic:hover .ntab__pic, .ntab--nopic[aria-selected="true"] .ntab__pic{ display:none; }
  .ntab:hover .ntab__name{ font-variation-settings:"wdth" var(--hw,128), "wght" 700; }
  .ntab:hover .ntab__pic{ opacity:1; transform:none; }
  .ntab[aria-selected="true"]{ background:var(--ink); color:var(--text-on-ink); padding-left:20px; }
  .ntab[aria-selected="true"] .ntab__name{ font-variation-settings:"wdth" var(--hw,128), "wght" 800; }
  .ntab[aria-selected="true"] .ntab__meta{ color:var(--muted-on-ink); }
  .ntab[aria-selected="true"] .ntab__pic{ opacity:1; transform:none; }
  .ntab:focus-visible{ outline-offset:-2px; }

  .stand{ grid-column:5/13; margin-top:0; }
  .nhead__company{ font-size:16px; }
  .nhead__pricem{ display:none; }
  .seg{ display:flex; }
  .stand__stage{ margin-top:16px; padding:22px 28px 34px; background:var(--surface); border:1px solid var(--line); }
  .stand__hint{ display:block; }
  .device--phone{ width:300px; }
  .nbody__cta{ display:none; }
  .nincl{ display:none; }
  .nbody__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:16px; margin-top:16px; }
  .nprice{ display:flex; flex-direction:column; padding:20px 22px 22px; }
  .nprice > .mono{ color:var(--muted); }
  .nprice__v{
    font-family:var(--f-disp); font-size:48px; line-height:1; letter-spacing:-.03em; margin:10px 0 22px;
    font-variation-settings:"wdth" 92, "wght" 800; white-space:nowrap;
  }
  .nprice__h{ font:600 15px/1.3 var(--f-text); margin-bottom:12px; }
  .nprice__btns{ margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:8px; }
  .nprice__btns .btn{ width:100%; }
  .nreal{ padding:16px; gap:22px; }
}

/* ---------- ЦЕНЫ ---------- */
.plans{ row-gap:16px; }
.plan{
  display:flex; flex-direction:column; padding:28px 24px; border-radius:var(--r-l);
  background:rgba(255,255,255,.04); border:1px solid var(--line-on-ink);
}
.plan{ position:relative; }
.plan__name{ font-family:var(--f-disp); font-size:32px; line-height:1; letter-spacing:-.02em; font-variation-settings:"wdth" 110, "wght" 800; }
.plan__sub{ margin-top:10px; font-size:16px; line-height:1.35; color:var(--muted-on-ink); }
/* средний формат — самый частый: тонкая акцентная линия сверху, без плашки «популярно» */
.plan--main{ box-shadow:inset 0 2px 0 var(--accent); }
.plan__price{
  font-family:var(--f-disp); font-size:52px; line-height:1; letter-spacing:-.03em; color:var(--text-on-ink);
  font-variation-settings:"wdth" 100, "wght" 800; margin:22px 0 12px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.plan__term{ color:var(--muted-on-ink); }
.plan__fit{ font-size:16px; line-height:1.5; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-on-ink); }
.plan__fit .mono{ display:block; color:var(--muted-on-ink); margin-bottom:6px; }
.plan__h{ color:var(--muted-on-ink); margin:26px 0 12px; }
/* «Что входит»: три главных пункта видны всегда, остальное — под «Что ещё входит» */
.plan__incl{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-on-ink); }
.plan__incl > .plan__h{ margin:0 0 12px; }
.plan__rest summary{
  list-style:none; cursor:pointer; min-height:44px; margin-top:6px; display:inline-flex; align-items:center; gap:10px;
  font:500 15px/1.3 var(--f-text); color:var(--text-on-ink); text-decoration:underline; text-decoration-color:var(--line-on-ink); text-underline-offset:4px;
}
.plan__rest summary:hover{ text-decoration-color:currentColor; }
.plan__rest summary::-webkit-details-marker{ display:none; }
.plan__rest summary::after{ content:""; width:10px; height:10px; flex:none; background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat; transition:transform .2s; }
.plan__rest[open] summary::after{ transform:rotate(45deg); }
.plan__rest .dash{ padding:6px 0 4px; }
.plan__incl + .plan__h{ margin-top:26px; }
.plan__after{ margin-bottom:22px; padding-top:16px; border-top:1px solid var(--line-on-ink); font-size:14px; line-height:1.45; color:var(--muted-on-ink); }
.plan .dash li{ font-size:15px; }
.plan__made{ display:flex; flex-direction:column; gap:8px; }
.made{ display:flex; align-items:center; gap:12px; text-decoration:none; font-size:14px; line-height:1.3; min-height:45px; }
.made img{ flex:none; width:72px; height:45px; border-radius:var(--r-s); object-fit:cover; object-position:top; border:1px solid var(--line-on-ink); transition:transform .4s var(--ease-out); }
.made:hover span{ text-decoration:underline; text-underline-offset:3px; }
.made:hover img{ transform:scale(1.05); }
.plan__cta{ margin-top:auto; }
@media (max-width:1023.98px){
  /* мобила и планшет: «Так сделаны» — один ряд миниатюр вместо столбика, названия остаются для скринридера */
  .plan__made{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .made{ min-height:0; }
  .made img{ width:72px; height:45px; }
  .made span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
.plan__made{ margin-bottom:28px; }
.why{ margin-top:clamp(56px,6vw,96px); padding-top:32px; border-top:1px solid var(--line-on-ink); row-gap:24px; }
.why__h{ font-family:var(--f-disp); font-size:28px; line-height:1; letter-spacing:-.02em; font-variation-settings:"wdth" 100, "wght" 700; }
.why__col h4{ color:var(--muted-on-ink); margin-bottom:12px; }
.why__col p, .why__list li{ font-size:16px; line-height:1.55; }
.why__list li + li{ margin-top:10px; }
/* «Цену увеличивает» на мобиле свёрнуто, как «Что входит» (app.js держит открытым на десктопе) */
.why__more summary{ list-style:none; cursor:pointer; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line-on-ink); border-bottom:1px solid var(--line-on-ink); }
.why__more summary::-webkit-details-marker{ display:none; }
.why__more summary h4{ margin:0 !important; }
.why__more summary::after{ content:""; width:12px; height:12px; flex:none; background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat; transition:transform .2s; }
.why__more[open] summary::after{ transform:rotate(45deg); }
.why__more[open] .why__list{ padding-top:16px; }
.why__list b{ font-weight:600; }
.why__total{ font:500 17px/1.5 var(--f-text); color:var(--text-on-ink); padding-top:24px; border-top:1px solid var(--line-on-ink); }
@media (max-width:359.98px){ .plan__price{ font-size:42px; } }
@media (max-width:767.98px){
  .plan{ padding:24px 20px; }
  .plan__price{ margin:16px 0 8px; }
  .plan__fit{ margin-top:16px; padding-top:14px; }
  .plan__incl{ margin-top:16px; padding-top:14px; }
  .plan__incl + .plan__h{ margin-top:20px; }
  .plan__made{ margin-bottom:20px; }
}
@media (min-width:768px){
  .plan{ padding:32px; }
  .plan__name{ font-size:36px; }
  .plan__price{ font-size:clamp(60px,5vw,72px); font-variation-settings:"wdth" 86, "wght" 800; }
}
@media (min-width:1024px){
  /* десктоп: строка сравнения — общие строки через subgrid, линии между пакетами вместо трёх рамок */
  .plans{ column-gap:0; grid-template-rows:repeat(10,auto); border-top:1px solid var(--line-on-ink); }
  .plan{
    grid-column:span 4; grid-row:span 10; display:grid; grid-template-rows:subgrid; row-gap:0;
    background:none; border:0; border-radius:0; border-left:1px solid var(--line-on-ink); padding:36px 32px;
  }
  .plan:first-child{ border-left:0; padding-left:0; }
  .plan:last-child{ padding-right:0; }
  .plan__incl + .plan__h{ margin-top:28px; }
  .plan__after{ align-self:end; }
  .plan__made{ align-self:start; }
  .plan__cta{ align-self:end; }
  .why__h{ grid-column:1/5; }
  .why__more summary{ min-height:0; border:0; pointer-events:none; cursor:default; }
  .why__more summary::after{ display:none; }
  .why__more summary h4{ margin-bottom:12px !important; }
  .why__more[open] .why__list{ padding-top:0; }
  .why__col:nth-of-type(1){ grid-column:5/9; }
  .why__col:nth-of-type(2){ grid-column:9/13; }
  .why__total{ grid-column:5/13; }
}
@media (min-width:1024px) and (max-width:1279.98px){
  .plan__price{ font-size:clamp(50px,4.6vw,58px); }
  .plan{ padding:28px 24px; }
  .plan:first-child{ padding-left:0; }
  .plan:last-child{ padding-right:0; }
}

/* ---------- ПРОЕКТЫ ---------- */
.bento{ row-gap:56px; }
.proj{ display:block; text-decoration:none; color:var(--text); min-width:0; }
.proj__media{ position:relative; }
.browser{ display:block; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line); background:var(--surface); transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
/* ховер проекта: браузер чуть приподнимается, телефон поднимается и поворачивается к посетителю */
.proj:hover .browser{ transform:translateY(-4px); box-shadow:0 28px 44px -30px rgba(13,13,15,.4); }
.browser__bar{ display:flex; align-items:center; gap:6px; height:28px; padding:0 12px; background:var(--surface-2); }
.browser__bar i{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.browser img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; transition:transform .6s var(--ease-out); transform-origin:50% 0; }
.proj:hover .browser img{ transform:scale(1.02); }
.proj__phone{ display:none; }
.proj__txt{ display:block; margin-top:22px; }
.proj__name{ font-family:var(--f-disp); font-size:28px; line-height:1.05; letter-spacing:-.02em; font-variation-settings:"wdth" 100, "wght" 700; }
.proj__txt .mono{ color:var(--muted); margin-top:8px; }
.proj__what{ font-size:17px; line-height:1.5; margin-top:14px; max-width:56ch; }
.proj__done{ font-size:15px; line-height:1.5; margin-top:8px; color:var(--muted); max-width:62ch; }
.proj__note{ font-size:14px; line-height:1.5; color:var(--muted); margin-top:8px; }
.proj__link{ display:inline-block; margin-top:14px; font:500 13px/1.4 var(--f-mono); text-decoration:underline; text-underline-offset:4px; }
.proj__link--off{ text-decoration:none; color:var(--muted); }
.proj--off .browser img, .proj--off .proj__phone{ transform:none !important; }
.proj--narrow.proj--off .proj__phone{ transform:translateX(-50%) !important; }
@media (min-width:1024px){
  .bento{ column-gap:16px; row-gap:72px; align-items:start; }
  .proj--wide{ grid-column:span 8; }
  .proj--narrow{ grid-column:span 4; }
  .proj--wide .proj__phone{
    display:block; position:absolute; right:28px; bottom:-16px; width:22%;
    background:var(--ink); border-radius:22px; padding:6px; transition:transform .6s var(--ease-out);
  }
  .proj--wide .proj__phone img{ width:100%; border-radius:17px; aspect-ratio:390/844; object-fit:cover; object-position:top; }
  .proj--wide:hover .proj__phone{ transform:translateY(-16px) rotate(-2.5deg); }
  .proj--wide .proj__txt{ margin-top:34px; max-width:calc(78% - 40px); }
  /* медиа и текст — в общих строках (subgrid): узкая плитка тянется до высоты широкой, текст на одной линии */
  .bento{ row-gap:0; }
  .proj{ grid-row:span 2; display:grid; grid-template-rows:subgrid; row-gap:0; }
  .proj:nth-child(n+3) .proj__media{ margin-top:72px; }
  .proj--narrow .proj__txt{ margin-top:34px; }
  .proj--narrow .proj__media{
    min-height:420px; border-radius:var(--r-m); overflow:hidden; background:var(--surface-2); border:1px solid var(--line);
  }
  .proj--narrow .browser{ display:none; }
  .proj--narrow .proj__phone{
    display:block; position:absolute; left:50%; top:32px; width:min(60%,250px); transform:translateX(-50%);
    background:var(--ink); border-radius:26px; padding:6px; transition:transform .6s var(--ease-out);
  }
  .proj--narrow .proj__phone img{ width:100%; border-radius:20px; aspect-ratio:390/844; object-fit:cover; object-position:top; }
  .proj--narrow:hover .proj__phone{ transform:translate(-50%,-14px) rotate(-2deg); }
}

/* ---------- КТО ДЕЛАЕТ ---------- */
.about__row{ row-gap:0; }
.about__photo{ order:2; margin:24px 0; }
/* «пропуск мастерской» вместо заглушки под фото: документ, а не пустая рамка; высота — по содержимому */
.pass{
  background:var(--ink); color:var(--text-on-ink); border-radius:var(--r-l); padding:22px 20px 20px;
  display:flex; flex-direction:column;
}
/* фото — верх карточки от края до края (без перекраски), знак маленький в углу на светлом окне кадра */
.pass{ overflow:hidden; }
.pass__top{ position:relative; margin:-22px -20px 0; }
.pass__pic{ display:block; width:100%; height:auto; aspect-ratio:4/5; max-height:460px; object-fit:cover; object-position:50% 20%; background:var(--surface-2); }
.pass__bird{ position:absolute; top:14px; right:14px; width:24px; height:24px; }
.pass__name{
  margin-top:22px; font-family:var(--f-disp); font-size:30px; line-height:1; letter-spacing:-.02em;
  font-variation-settings:"wdth" 100, "wght" 800;
}
.pass__rows{ margin-top:20px; border-top:1px solid var(--line-on-ink); }
.pass__rows > div{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; padding:12px 0; border-bottom:1px solid var(--line-on-ink); }
.pass__rows dt{ color:var(--muted-on-ink); }
.pass__rows dd{ font-size:16px; line-height:1.35; text-align:right; }
.pass__rows a{ text-underline-offset:3px; }
.pass__time{ font-family:var(--f-disp); font-size:22px !important; line-height:1; font-variation-settings:"wdth" 100, "wght" 700; font-variant-numeric:tabular-nums; }
/* точка-клюв: на связи — тёплая, в остальное время — серая */
.pass__dot{ display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--muted-on-ink); vertical-align:1px; }
.pass.is-on .pass__dot{ background:var(--warm); }
.pass__foot{ margin-top:18px; color:var(--muted-on-ink); }
/* на мобиле имя стоит прямо над карточкой — второй раз не повторяем */
@media (max-width:1023.98px){ .pass__name{ display:none; } }
.about__photo{ position:relative; }
.about__img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 25%; border-radius:var(--r-l); background:var(--surface-2); }
.about__cap{
  position:absolute; left:20px; bottom:16px; right:20px; color:#fff;
  font:500 11px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,.55);
}
@media (max-width:767px){ .about__img{ max-height:480px; } }
.about__txt{ display:contents; }
.about__txt > *{ grid-column:1/-1; }
.about__txt > .eyebrow{ order:0; }
.about__name{
  order:1; font-family:var(--f-disp); font-size:44px; line-height:.95; letter-spacing:-.03em; margin-top:16px;
  font-variation-settings:"wdth" 100, "wght" 800; transition:font-variation-settings .4s var(--ease-out);
}
.about__sign{ order:1; color:var(--muted); margin-top:14px; }
.about__text{ order:3; font-size:17px; line-height:1.55; max-width:56ch; }
.about__text p + p{ margin-top:14px; }
.about__also{ order:4; font-size:15px; color:var(--muted); margin-top:20px; max-width:56ch; }

/* «Как работаю»: четыре факта крупно, этапы одной линией, остальное — коротким списком */
.terms{ margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }
.terms__h{ font-family:var(--f-disp); font-size:28px; line-height:1; letter-spacing:-.02em; font-variation-settings:"wdth" 100, "wght" 700; margin-bottom:12px; }
/* «Сохранить условия в PDF» (delight.md п. 12): тихая текстовая кнопка рядом с заголовком; без JS не видна — печатать нечем */
.terms__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 24px; }
.terms__print{ display:none; color:var(--muted); min-height:44px; }
.js .terms__print{ display:inline-flex; align-items:center; }
.terms__print:hover{ color:var(--text); }
.print-only{ display:none; }
.facts{ display:grid; gap:0 var(--gap); }
.fact{ padding:22px 0; border-bottom:1px solid var(--line); }
.fact__big{
  display:block; font-family:var(--f-disp); font-weight:800; font-size:44px; line-height:.95; letter-spacing:-.03em;
  font-variation-settings:"wdth" 100, "wght" 800;
}
.fact p{ margin-top:12px; font-size:16px; line-height:1.5; max-width:40ch; }
.steps{ margin-top:40px; }
.steps__h{ color:var(--muted); margin-bottom:18px; }
/* мобила: вертикальная линия с точками */
.steps__line{ position:relative; display:grid; gap:14px; padding-left:22px; }
.steps__line::before{ content:""; position:absolute; left:4px; top:8px; bottom:8px; width:1px; background:var(--line); }
.steps__line li{ position:relative; font:500 16px/1.35 var(--f-text); }
.steps__line li::before{ content:""; position:absolute; left:-22px; top:.42em; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1.5px solid var(--ink); }
.steps__line li:last-child::before{ background:var(--ink); }
.steps__note{ margin-top:18px; font-size:15px; line-height:1.5; color:var(--muted); max-width:60ch; }
.terms__list{ margin-top:32px; border-top:1px solid var(--line); }
.term{ padding:18px 0; border-bottom:1px solid var(--line); }
.term dt{ font:600 16px/1.3 var(--f-text); }
.term dd{ font-size:15px; line-height:1.5; margin-top:6px; max-width:62ch; color:var(--muted); }
@media (min-width:768px){
  .facts{ grid-template-columns:1fr 1fr; }
  .fact__big{ font-size:48px; }
}
@media (min-width:1024px){
  .about__row{ align-items:start; }
  .about__photo{ grid-column:1/6; grid-row:1/6; margin:20px 0 0; order:0; }
  .pass{ padding:28px 28px 24px; }
  .pass__top{ margin:-28px -28px 0; }
  .pass__pic{ aspect-ratio:1/1; max-height:none; }
  .pass__name{ font-size:36px; margin-top:28px; }
  .about__txt{ display:block; grid-column:7/13; }
  .about__name{ font-size:72px; margin-top:20px; }
  .about__name:hover{ font-variation-settings:"wdth" 128, "wght" 800; }
  .about__text{ font-size:18px; margin-top:32px; }
  .terms{ margin-top:72px; padding-top:64px; }
  .terms__h{ margin-bottom:28px; }
  .facts{ grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
  .fact{ padding:28px 24px 28px 0; border-bottom:0; }
  .fact + .fact{ padding-left:24px; border-left:1px solid var(--line); }
  .fact__big{ font-size:clamp(36px,3.3vw,48px); }
  .steps{ margin-top:56px; }
  /* десктоп: этапы — одна горизонтальная линия, точка над каждым */
  .steps__line{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; padding:22px 0 0; }
  .steps__line::before{ left:0; right:0; top:4px; bottom:auto; width:auto; height:1px; }
  .steps__line li{ font-size:15px; padding-right:8px; }
  .steps__line li::before{ left:0; top:-22px; }
  .terms__list{ margin-top:48px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:24px; border-top:0; }
  .term{ border-bottom:0; border-top:1px solid var(--line); padding:20px 0 0; }
}

/* ---------- ВОПРОСЫ ---------- */
.faq__side{ font-size:17px; line-height:1.5; margin-bottom:24px; }
.faq__side a{ text-underline-offset:4px; }
.faq__list{ border-bottom:1px solid var(--line); }
.faq__item{ border-top:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 0; font:500 18px/1.35 var(--f-text); min-height:44px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__plus{ position:relative; flex:none; width:14px; height:14px; margin-top:6px; transition:transform .2s; }
.faq__plus::before, .faq__plus::after{ content:""; position:absolute; background:var(--text); }
.faq__plus::before{ left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; }
.faq__plus::after{ top:0; bottom:0; left:50%; width:1.5px; margin-left:-.75px; }
html:not(.js) .faq__item[open] .faq__plus{ transform:rotate(45deg); }
.faq__a{ display:grid; grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ font-size:16px; line-height:1.6; max-width:60ch; padding-bottom:24px; }
.js .faq__a{ grid-template-rows:0fr; transition:grid-template-rows .25s var(--ease-out); }
.js .faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.js .faq__item.is-open .faq__plus{ transform:rotate(45deg); }
@media (min-width:1024px){
  .faq__side{ grid-column:1/5; max-width:26ch; position:sticky; top:96px; }
  .faq__list{ grid-column:5/13; }
  .faq__item summary{ font-size:20px; padding:26px 0; }
  .faq__a p{ font-size:17px; }
}

/* ---------- ЗАЯВКА ---------- */
.order{ padding-bottom:clamp(72px,8vw,120px); }
@media (max-width:1023.98px){
  .order__left{ display:contents; }
  .order__left > *{ grid-column:1/-1; }
  .order__lead, .order__when{ order:1; } .order__right{ order:2; margin-top:28px !important; } .quick{ order:3; margin-top:40px !important; }
}
.nw{ white-space:nowrap; }
.order__lead{ font-size:18px; line-height:1.5; max-width:44ch; }
/* когда отвечу — по часам Ижевска, те же правила, что в пропуске и квитанции (app.js izhNow) */
.order__when{ margin-top:14px; font-size:15px; line-height:1.45; color:var(--muted-on-ink); max-width:44ch; }
.order__when b{ font-weight:500; color:var(--text-on-ink); font-variant-numeric:tabular-nums; }
.quick{ margin-top:32px; border-top:1px solid var(--line-on-ink); }
.quick li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 16px; padding:8px 0; border-bottom:1px solid var(--line-on-ink); }
.quick .mono{ width:100%; color:var(--muted-on-ink); }
.quick a{ display:inline-block; padding:9px 0; font:500 20px/1.3 var(--f-text); text-decoration:none; color:var(--text-on-ink); overflow-wrap:anywhere; }
.quick a:hover{ text-decoration:underline; text-underline-offset:4px; }
.quick__hint{ width:auto !important; font-size:11px !important; }
.order__right{
  margin-top:40px; padding:24px 20px; border-radius:var(--r-l);
  background:rgba(255,255,255,.04); border:1px solid var(--line-on-ink);
}
.viewed{ display:flex; align-items:center; gap:14px; padding:12px; margin-bottom:24px; border-radius:var(--r-m); background:rgba(255,255,255,.06); }
.viewed img{ flex:none; width:72px; height:45px; border-radius:var(--r-s); object-fit:cover; object-position:top; }
.viewed__text{ flex:1; font-size:15px; line-height:1.4; }
.viewed__text b{ font-weight:600; }
.viewed__x{ flex:none; min-height:44px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line-on-ink); background:transparent; color:var(--muted-on-ink); font:500 13px/1 var(--f-text); }
.viewed__x:hover{ color:var(--text-on-ink); border-color:var(--text-on-ink); }
.form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; border:0; margin:0; padding:0; min-width:0; }
.field > label, .pkgs legend{ font:500 14px/1.3 var(--f-text); color:var(--muted-on-ink); padding:0; }
.field input[type="text"], .field textarea, .select select{
  width:100%; height:52px; padding:0 16px; border-radius:var(--r-m); border:1px solid var(--line-on-ink);
  background:rgba(255,255,255,.06); color:var(--text-on-ink); font-size:16px; outline:none; transition:border-color .2s;
}
.field textarea{ height:auto; min-height:104px; padding:14px 16px; resize:vertical; line-height:1.45; }
.field input::placeholder, .field textarea::placeholder{ color:#76767D; }
.field input:focus, .field textarea:focus, .select select:focus{ border-color:var(--text-on-ink); }
.field input:focus-visible, .field textarea:focus-visible, .select select:focus-visible{ box-shadow:0 0 0 3px rgba(255,123,100,.4); }
.field.is-bad input, .field.is-bad .check__box{ border-color:var(--err); }
.field__err{ font-size:14px; line-height:1.35; color:var(--err); }
.field__err:empty{ display:none; }
.field__err:not(:empty)::before{ content:"!"; display:inline-grid; place-items:center; width:16px; height:16px; margin-right:6px; border-radius:50%; background:var(--err); color:var(--ink); font:700 11px/1 var(--f-text); vertical-align:1px; }
.select{ position:relative; }
.select select{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer; }
.select select option{ color:#0D0D0F; background:#fff; }
.select::after{ content:""; position:absolute; right:18px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:1.5px solid var(--text-on-ink); border-bottom:1.5px solid var(--text-on-ink); transform:rotate(45deg); pointer-events:none; }
.pkgs__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pkgs label{ position:relative; }
.pkgs input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.pkgs span{
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:6px 10px;
  border-radius:var(--r-m); border:1px solid var(--line-on-ink); font:500 15px/1.2 var(--f-text); color:var(--text-on-ink);
  transition:background-color .2s, color .2s, border-color .2s;
}
.pkgs input:hover + span{ border-color:var(--text-on-ink); }
.pkgs input:checked + span{ background:var(--text-on-ink); color:var(--ink); border-color:var(--text-on-ink); }
.pkgs input:focus-visible + span{ outline:2px solid var(--text-on-ink); outline-offset:3px; }
.check{ display:flex; align-items:flex-start; gap:12px; min-height:44px; padding:10px 0 0; cursor:pointer; font-size:15px; line-height:1.45; }
.check input{ position:absolute; opacity:0; width:24px; height:24px; margin:0; }
.check__box{ flex:none; width:24px; height:24px; border-radius:var(--r-s); border:1px solid var(--muted-on-ink); display:grid; place-items:center; transition:background-color .15s, border-color .15s; }
.check__box::after{ content:""; width:11px; height:6px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(-45deg) translate(1px,-1px); opacity:0; }
.check input:checked + .check__box{ background:var(--text-on-ink); border-color:var(--text-on-ink); }
.check input:checked + .check__box::after{ opacity:1; }
.check input:focus-visible + .check__box{ outline:2px solid var(--text-on-ink); outline-offset:3px; }
.check a, .form__note a{ padding:14px 0; margin:-14px 0; } /* зона нажатия 44px, строка не сдвигается */
.check a{ text-underline-offset:3px; }
.form__fail{ font-size:15px; line-height:1.45; color:var(--err); }
.form__fail a{ color:var(--text-on-ink); }
.form__submit{ margin-top:6px; }
.form__note{ font-size:14px; color:var(--muted-on-ink); }
.form__note a{ color:var(--text-on-ink); text-underline-offset:3px; }
.done{ outline:none; }
.done__title{ font-family:var(--f-disp); font-size:40px; line-height:1; letter-spacing:-.03em; font-variation-settings:"wdth" 100, "wght" 800; }
.done__text{ font-size:17px; line-height:1.5; margin-top:14px; max-width:44ch; }
.done__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.done__copy{ margin-top:18px; }
.done__copybtn{ min-height:44px; display:inline-flex; align-items:center; }
.done__copy pre{ white-space:pre-wrap; font:400 13px/1.5 var(--f-mono); background:rgba(255,255,255,.06); border-radius:var(--r-s); padding:14px; margin:0 0 8px; }
.done__again{ margin-top:24px; color:var(--muted-on-ink); }
.done__mail{ display:inline-flex; align-items:center; min-height:44px; margin-top:12px; color:var(--muted-on-ink); }
@media (max-width:479.98px){ .done__num{ display:none; } .done__btns .btn{ flex:1 1 100%; } }
.form__nojs{ margin-bottom:18px; font-size:15px; line-height:1.45; }
.draft{ display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; font-size:14px; line-height:1.4; color:var(--muted-on-ink); }
.draft__x{ min-height:44px; color:var(--text-on-ink); }
/* квитанция после отправки (delight.md п. 10): бумажный чек на чернилах с отрывным краем; выезжает, потом пеликан один раз кивает клювом */
.receipt{
  max-width:420px; margin-top:24px; padding:18px 22px 30px; border-radius:var(--r-m) var(--r-m) 0 0;
  background:var(--bg); color:var(--ink);
  -webkit-mask:radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px) 0 0/14px 100% repeat-x;
          mask:radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px) 0 0/14px 100% repeat-x;
}
.receipt ::selection{ background:rgba(184,38,24,.16); }
.receipt :focus-visible{ outline-color:var(--ink); }
.receipt__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px dashed rgba(13,13,15,.3); }
.receipt__h{ padding-top:6px; color:var(--muted); }
.receipt__bird{ flex:none; width:48px; height:48px; }
.receipt__body{ fill:var(--accent); }
.receipt__beak{ fill:var(--warm); transform-origin:45px 19px; }
.receipt__rows > div{ display:flex; justify-content:space-between; gap:4px 16px; padding:9px 0; border-bottom:1px dashed rgba(13,13,15,.18); font:400 14px/1.4 var(--f-mono); }
.receipt__rows dt{ flex:none; color:var(--muted); }
.receipt__rows dd{ text-align:right; font-weight:500; }
.receipt__foot{ margin-top:14px; font-size:14px; line-height:1.45; color:var(--muted); }
.receipt__foot a{ color:var(--ink); text-underline-offset:3px; }
.receipt.is-sent{ animation:receipt-in .5s var(--ease-out) both; }
.receipt.is-sent .receipt__beak{ animation:nod .7s ease-in-out .6s 1; }
@keyframes receipt-in{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0); } }
@keyframes nod{ 0%, 100%{ transform:none; } 45%{ transform:rotate(16deg); } }
/* «Номер скопирован» у ссылки на компьютере (delight.md п. 5) */
.toast{
  position:fixed; z-index:320; transform:translate(-50%,-100%); padding:8px 14px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--text-on-ink); border:1px solid rgba(241,240,236,.18); box-shadow:0 6px 20px rgba(0,0,0,.2);
  font:500 13px/1.3 var(--f-text); white-space:nowrap;
}
.toast.is-below{ transform:translate(-50%,0); }
.toast a{ color:inherit; text-underline-offset:3px; }
@media (min-width:1024px){
  .order__left{ grid-column:1/6; position:sticky; top:96px; align-self:start; }
  .order__right{ grid-column:7/13; margin-top:0; padding:32px; }
  .order__lead{ font-size:20px; }
  .pkgs__grid{ grid-template-columns:repeat(4,1fr); }
  .quick li{ flex-wrap:nowrap; }
  .quick .mono{ width:108px; flex:none; }
}

/* ---------- ФУТЕР ---------- */
.ftr{ background:var(--ink); color:var(--text-on-ink); padding:56px 0 calc(28px + env(safe-area-inset-bottom)); }
.ftr__row{ padding-top:48px; border-top:1px solid var(--line-on-ink); row-gap:36px; }
.ftr__mark{
  font-family:var(--f-disp); font-size:24vw; line-height:.8; letter-spacing:-.045em; opacity:.9;
  font-variation-settings:"wdth" 151, "wght" 900; white-space:nowrap;
}
.ftr__tag{ margin-top:18px; color:var(--muted-on-ink); font-size:15px; }
/* полный знак над вордмарком: крупно красный на чернилах читается (как фигура ≥3:1), мелко — нет */
.ftr__bird{ width:64px; height:64px; margin-bottom:16px; }
@media (min-width:1024px){ .ftr__bird{ width:96px; height:96px; margin-bottom:20px; } }
/* размер вордмарка — от ширины своей колонки, а не экрана: иначе на 1024–1440 и при масштабе Windows 125% он наезжал на колонки.
   «Pelican» при wdth 151 / wght 900 шире кегля в ~3,75 раза → 25cqi ≈ 94% колонки */
.ftr__brand{ container-type:inline-size; min-width:0; }
@supports (font-size:1cqi){ .ftr__mark{ font-size:min(184px, 25cqi) !important; } }
.ftr__col{ display:flex; flex-direction:column; align-items:flex-start; grid-column:span 6 !important; }
.ftr__col:last-child{ grid-column:1/-1 !important; }
.ftr__col h4{ color:var(--muted-on-ink); margin-bottom:10px; }
.ftr__col a{ font-size:15px; line-height:1.4; text-decoration:none; padding:12px 0; }
@media (pointer:fine){ .ftr__col a{ padding:7px 0; } }
.ftr__col a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ftr__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line-on-ink); color:var(--muted-on-ink); }
@media (min-width:768px){
  .ftr__mark{ font-size:14vw; }
  .ftr__brand{ grid-column:1/-1; }
  .ftr__col, .ftr__col:last-child{ grid-column:span 4 !important; }
}
@media (min-width:1024px){
  .ftr__brand{ grid-column:1/7; }
  .ftr__mark{ font-size:clamp(80px,12vw,184px); }
  .ftr__col, .ftr__col:last-child{ grid-column:span 2 !important; }
}

/* ---------- мобильная липкая панель ---------- */
.mbar{
  position:fixed; left:0; right:0; bottom:var(--consent-h,0px); z-index:60; /* пока видна полоса cookie — стоит над ней */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:8px;
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  background:rgba(241,240,236,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .25s var(--ease-out); visibility:hidden;
}
.mbar.is-on{ transform:none; visibility:visible; }
.mbar .btn{ min-height:48px; padding:0 8px; font-size:15px; }
.mbar:not(.is-on){ transition:transform .25s var(--ease-out), visibility 0s .25s; }
.mbar.is-quiet .btn--accent{ background:var(--ink); color:var(--text-on-ink); } /* на экране уже есть красная кнопка блока */
@media (max-width:359.98px){ .mbar{ gap:6px; padding-inline:12px; } .mbar .btn{ font-size:14px; padding:0 4px; } }
@media (min-width:1024px){ .mbar{ display:none; } }

/* ---------- курсор-пилюля ---------- */
.cursor-pill{ position:fixed; left:0; top:0; z-index:150; width:96px; height:40px; margin:-20px 0 0 -48px; pointer-events:none; }
.cursor-pill span{
  display:grid; place-items:center; width:100%; height:100%; border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink);
  font:600 13px/1 var(--f-text); transform:scale(0); opacity:0; transition:transform .25s var(--ease-out), opacity .2s;
}
.cursor-pill.is-on span{ transform:scale(1); opacity:1; }

/* ---------- policy.html ---------- */
.policy{ padding-top:clamp(40px,6vw,96px); padding-bottom:clamp(72px,8vw,120px); }
.policy__body{ max-width:68ch; font-size:17px; line-height:1.6; }
.policy__h1{ font-family:var(--f-disp); font-size:clamp(36px,5vw,64px); line-height:1; letter-spacing:-.03em; font-variation-settings:"wdth" 100, "wght" 800; text-wrap:balance; }
.policy__date{ color:var(--muted); margin:18px 0 40px; }
.policy__body h2{ font-family:var(--f-disp); font-size:28px; line-height:1.1; letter-spacing:-.02em; font-variation-settings:"wdth" 100, "wght" 700; margin:40px 0 12px; }
.policy__body a{ text-underline-offset:3px; }
.policy-page .hdr__act{ margin-left:auto; }
.policy-page .hdr__act .btn{ min-height:44px; }

/* ---------- 404.html ---------- */
.nf{ padding-top:clamp(40px,7vw,112px); padding-bottom:clamp(72px,8vw,120px); }
.nf__bird{ width:72px; height:72px; margin-bottom:28px; }
.nf__h1{
  font-family:var(--f-disp); font-weight:800; font-size:clamp(48px,9vw,136px); line-height:.92; letter-spacing:-.035em;
  font-variation-settings:"wdth" 112, "wght" 820; text-wrap:balance;
}
.nf__lead{ margin-top:24px; font-size:18px; line-height:1.5; max-width:46ch; }
.nf__h2{ margin:48px 0 14px; font:500 17px/1.4 var(--f-text); }
.nf__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }
@media (min-width:1024px){ .nf__bird{ width:96px; height:96px; } .nf__lead{ font-size:20px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .hero__title{ transform:none !important; }
  .device__progress::before{ animation:none; left:0; width:100%; opacity:.4; }
}
a[href^="tel:"]{ white-space:nowrap; }

/* ---------- раздел «Услуги»: общее для главной и страниц /uslugi/ (ТЗ услуг, разделы 3 и 8) ---------- */
.hdr__sep{ align-self:center; flex:none; width:1px; height:16px; background:var(--line); }
.hdr.on-ink .hdr__sep{ background:var(--line-on-ink); }
.h2.h2--s{ font-size:clamp(36px,4.4vw,64px); line-height:.95; letter-spacing:-.02em; margin:14px 0 20px; }
.h2-anim .h2.h2--s{ font-variation-settings:"wdth" 112, "wght" 820; transition:none; }

/* «Кроме сайтов» на главной: одна строка со ссылками в раздел перед заявкой (этап 5 аудита) — без цен, картинок и анимаций появления */
.svcs{ padding-bottom:clamp(40px,5vw,72px); }
.svcs__line{ padding-top:20px; border-top:1px solid var(--line); font-size:17px; line-height:1.6; color:var(--muted); text-wrap:pretty; }
.svcs__line a{ color:var(--text); text-underline-offset:3px; }
.svcs__line .svcs__all{ font-weight:500; white-space:nowrap; }

/* колонка «Услуги» в футере */
.ftr__col.ftr__col--svc{ grid-column:1/-1 !important; }
.ftr__links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
@media (min-width:768px){ .ftr__links{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; } }
@media (min-width:1024px){
  .ftr__row--svc .ftr__brand{ grid-row:1 / span 2; }
  .ftr__row--svc .ftr__col--svc{ grid-column:7/13 !important; grid-row:2; }
}

/* форма главной: выбранные услуги (раздел 3.5) */
.picked{ padding:16px 20px; margin-bottom:24px; border-radius:var(--r-m); background:rgba(255,255,255,.06); }
.picked > .mono{ color:var(--muted-on-ink); margin-bottom:6px; }
.picked__row{ display:grid; grid-template-columns:minmax(0,1fr) auto 44px; align-items:center; column-gap:12px; padding:6px 0; border-bottom:1px solid var(--line-on-ink); }
.picked__n{ font:500 16px/1.35 var(--f-text); color:var(--text-on-ink); }
.picked__p{ font-size:14px; line-height:1.4; color:var(--muted-on-ink); text-align:right; white-space:nowrap; }
.picked__v{ display:block; }
.picked__q{ display:block; font:500 12px/1.3 var(--f-mono); letter-spacing:.04em; }
.picked__x{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-on-ink); background:transparent; color:var(--muted-on-ink); display:grid; place-items:center; }
.picked__x:hover{ color:var(--text-on-ink); border-color:var(--text-on-ink); }
.picked__x svg{ width:14px; height:14px; stroke:currentColor; stroke-width:1.6; fill:none; }
.picked__sum{ font:600 17px/1.4 var(--f-text); color:var(--text-on-ink); margin-top:12px; }
.picked__month{ font-size:15px; line-height:1.4; color:var(--muted-on-ink); }
.picked__edit{ display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--text-on-ink); text-underline-offset:4px; }
@media (min-width:600px){ .picked__row{ column-gap:16px; } }

/* ---------- печать: главная как КП на два листа (delight.md п. 12) ----------
   лист 1 — шапка с контактами и три формата с ценами, лист 2 — «Почему „от“», пара строк о себе и «Как работаю». Остальное на бумаге не нужно */
@media print{
  @page{ size:A4; margin:12mm 12mm 14mm; }
  html{ scroll-behavior:auto; }
  body{ background:#fff; font-size:10pt; }
  body::before, .skip, .hdr, .menu, .hero, .examples, .projects, .faq, .svcs, .order, .ftr, .mbar, .pl-consent, .cursor-pill,
  .about__photo, .terms__print, .plan__made, .plan__cta, .plan__rest summary, .plan .plan__h:not(.plan__incl > .plan__h){ display:none !important; }
  .print-only{ display:block; }
  /* появление и растяжка заголовков — на бумаге сразу в конечном виде */
  .js [data-reveal], .h2-anim .h2 .l__in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .h2-anim .h2 .l__in{ display:inline; }
  .h2-anim .h2 .l{ clip-path:none; }
  .wrap{ padding-inline:0; max-width:none; }
  .sec{ padding-block:0; }
  a{ text-decoration:none; }
  /* тёмные секции — чёрным по белому: переопределяем токены «на чернилах» */
  .sec--ink{ background:none; color:var(--ink); --text-on-ink:var(--ink); --muted-on-ink:var(--muted); --line-on-ink:var(--line); }
  /* штрихи списков и линия этапов нарисованы фоном — браузер фон не печатает, если не попросить */
  .dash li::before, .steps__line::before, .steps__line li::before{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* «Что ещё входит» и «Что делает дороже» раскрыты: app.js закрывает второе на узкой ширине листа, beforeprint открывает не везде */
  #prices details::details-content{ content-visibility:visible; }

  .print-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2mm 8mm; padding-bottom:4mm; margin-bottom:6mm; border-bottom:1.5pt solid var(--ink); }
  .print-head__brand{ display:flex; align-items:center; gap:3mm; font:800 20pt/1 var(--f-disp); font-variation-settings:"wdth" 110, "wght" 800; letter-spacing:-.02em; }
  .print-head__brand img{ width:11mm; height:11mm; }
  .print-head__sub{ font-size:10pt; color:var(--muted); }
  .print-head__contacts{ flex-basis:100%; font:500 9.5pt/1.4 var(--f-text); }
  .print-foot{ margin-top:8mm; padding-top:3mm; border-top:1px solid var(--line); font-size:8.5pt; color:var(--muted); }

  /* лист 1: цены */
  .prices .sec__head{ margin-bottom:5mm; }
  .prices .sec__lead{ display:none; } /* «пример есть выше» — на листе примеров нет */
  .h2{ font-size:26pt; margin:0 0 3mm; letter-spacing:-.02em; }
  .h2 .l{ display:inline; white-space:normal; }
  .sec__lead{ font-size:10pt; max-width:none; }
  .plans{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:0; border-top:1px solid var(--line); }
  .plans > .plan{ grid-column:auto; display:flex; padding:4mm 4mm 0; border:0; border-left:1px solid var(--line); border-radius:0; background:none; box-shadow:none; break-inside:avoid; }
  .plans > .plan:first-child{ border-left:0; padding-left:0; }
  .plans > .plan:last-child{ padding-right:0; }
  .plan__name{ font-size:17pt; }
  .plan__sub{ font-size:9pt; margin-top:1.5mm; }
  .plan__price{ font-size:24pt; margin:3mm 0 1.5mm; color:var(--accent); font-variation-settings:"wdth" 90, "wght" 800; }
  .plan__fit, .plan__incl{ margin-top:3mm; padding-top:2.5mm; font-size:9pt; line-height:1.4; }
  .plan__fit .mono{ margin-bottom:1mm; }
  .plan .dash li{ padding-left:4mm; font-size:9pt; line-height:1.35; }
  .plan .dash li + li, .plan__rest .dash{ margin-top:1mm; }
  .dash li::before{ width:2.5mm; }
  .plan__rest .dash{ padding:0; }
  .plan__incl > .plan__h{ margin-bottom:1.5mm; }
  .plan__after{ margin:3mm 0 0; padding-top:2.5mm; font-size:8.5pt; }
  .mono{ font-size:7.5pt; }
  .why{ break-before:page; margin-top:0; padding-top:0; border-top:0; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:6mm; row-gap:3mm; break-inside:avoid; }
  .why > *{ grid-column:auto; }
  .why__h{ grid-column:1/-1; font-size:14pt; }
  .why__col p, .why__list li{ font-size:8.5pt; line-height:1.4; }
  .why__list li + li{ margin-top:1mm; }
  .why__more summary{ min-height:0; border:0; }
  .why__more summary::after{ display:none; }
  .why__more summary h4{ margin-bottom:2mm !important; }
  .why__more[open] .why__list{ padding-top:0; }
  .why__col h4{ margin-bottom:2mm; }
  .why__total{ font-size:9pt; padding-top:0; border-top:0; }

  /* лист 2: кто делает (первый абзац) и как работаю */
  .about{ margin-top:6mm; padding-top:5mm; border-top:1px solid var(--line); }
  .about__text p + p{ display:none; }
  .about__row{ display:block; }
  .about__name{ font-size:16pt; margin:0; }
  .about__sign{ margin-top:1.5mm; }
  .about__text{ margin-top:3mm; font-size:10pt; line-height:1.45; max-width:none; }
  .terms{ margin-top:6mm; padding-top:5mm; }
  .terms__h{ font-size:16pt; margin-bottom:3mm; }
  .facts{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
  .fact{ padding:3mm 3mm 3mm 0; border-bottom:0; break-inside:avoid; }
  .fact + .fact{ padding-left:3mm; border-left:1px solid var(--line); }
  .fact__big{ font-size:16pt; }
  .fact p{ margin-top:1.5mm; font-size:8.5pt; line-height:1.4; }
  .steps{ margin-top:5mm; break-inside:avoid; }
  .steps__h{ margin-bottom:2mm; }
  .steps__line{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:3mm; padding:4mm 0 0; }
  .steps__line::before{ left:0; right:0; top:1mm; bottom:auto; width:auto; height:1px; }
  .steps__line li{ font-size:8.5pt; }
  .steps__line li::before{ left:0; top:-4mm; width:2mm; height:2mm; }
  .steps__note{ margin-top:3mm; font-size:8.5pt; }
  .terms__list{ margin-top:5mm; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:6mm; border-top:0; }
  .term{ padding:2.5mm 0; border-bottom:0; border-top:1px solid var(--line); break-inside:avoid; }
  .term dt{ font-size:9.5pt; }
  .term dd{ font-size:8.5pt; line-height:1.4; margin-top:1mm; }
}

/* подвал: ссылки на страницы ниш (tools/build-geo.mjs) */
.ftr__niches{ margin-top:32px; padding-top:24px; border-top:1px solid var(--line-on-ink); }
.ftr__niches h4{ margin:0 0 12px; color:var(--muted-on-ink); font-weight:400; }
.ftr__niches .ftr__links{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.ftr__niches a{ color:var(--text-on-ink); text-decoration:none; font-size:14px; line-height:1.9; }
@media (max-width:1023px){ .ftr__niches .ftr__links{ display:grid; grid-template-columns:1fr; gap:0; } .ftr__niches a{ display:flex; align-items:center; min-height:44px; font-size:15px; line-height:1.3; } }
.ftr__niches a:hover{ text-decoration:underline; text-underline-offset:3px; }
@media print{ .ftr__niches{ display:none; } }