/* «Лаванда» · Перламутровая кромка, «Триптих» — одна вёрстка вместо артбордов «Главная · 1440» и «Главная · телефон 390»
   (холст Uf9h812RTpQFi3wCdpzMPX). Телефонный вид — до 959 px, компьютерный — с 960 px; токены — паспорт «Лаванды».
   Метки оболочки (.sd-*) подогнаны под экраны «Форма · ошибки / отправляем / не отправилась». */

:root {
  --bg: #ffffff;
  --tint: #fbfaff;
  --soft: #f1edfb;
  --ink: #2b313b;
  --text: #3d4450;
  --muted: #5b6270;
  --cap: #6b7280;
  --opt: #6f747e;          /* холст — #8a8f99 (3,2:1); темнее до 4,5:1 — Lighthouse «контраст», мелкий текст */
  --violet: #7c5cd6;
  --violet-hi: #6a48c9;
  --link-hi: #4f33a3;
  --line: #efedf5;
  --field: #dcd8e8;
  --pill: #e2ddf1;
  --rim-o: #cfc7ea;
  --err: #d1435b;
  --err-text: #b3243d;
  --err-bg: #fdf1f3;
  --err-title: #8a1c30;
  --sd-error: #b3243d;
  --edge: linear-gradient(135deg, #9fe3cf 0%, #f2a7c3 50%, #b49cf0 100%);
  --edge-x: linear-gradient(90deg, #9fe3cf, #f2a7c3, #b49cf0);
  --gut: 16px;
  color-scheme: light;
}
@media (min-width: 960px) { :root { --gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 74px; }
@media (min-width: 960px) { html { scroll-padding-top: 88px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Manrope", system-ui, sans-serif; font-size: 16px; line-height: normal; overflow-x: clip; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; }
picture { display: contents; }
picture > source { display: none; } /* иначе в flex-карточке <source> — пустой элемент с отступом gap */
a { color: var(--violet-hi); text-underline-offset: 3px; }
a:hover { color: var(--link-hi); }
a.plain { color: var(--ink); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.muted { color: var(--muted); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cap); }
@media (min-width: 960px) { .kicker { font-size: 13px; letter-spacing: .14em; } }
.opt { color: var(--opt); font-weight: 400; white-space: nowrap; }
@media (max-width: 959px) { .d-only { display: none !important; } }
@media (min-width: 960px) { .m-only { display: none !important; } }
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 999px; background: var(--violet); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }
.skip:hover { color: #fff; background: var(--violet-hi); }

/* Кнопки-пилюли */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 0; font: 600 16px/1.2 "Manrope", system-ui, sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.btn-v { background: var(--violet); color: #fff; }
.btn-v:hover { background: var(--violet-hi); color: #fff; }
.btn-o { border: 1.5px solid var(--rim-o); color: var(--link-hi); background: #fff; }
.btn-o:hover { border-color: var(--violet); color: var(--link-hi); }
@media (min-width: 960px) { .btn { display: inline-flex; gap: 10px; min-height: 52px; padding: 0 28px; font-size: 17px; } }
.icon-btn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--pill); border-radius: 22px; background: #fff; color: var(--violet-hi); cursor: pointer; padding: 0; }
.icon-btn--ink { color: var(--ink); }
.pill-btn { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--pill); border-radius: 22px; background: #fff; color: var(--ink); font: 600 15px "Manrope", system-ui, sans-serif; cursor: pointer; }
.icon-btn:hover, .pill-btn:hover { border-color: var(--rim-o); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 22px; }

/* Плашка демо и шапка */
.demo-bar { background: var(--soft); color: var(--link-hi); font-size: 12px; font-weight: 600; text-align: center; padding: 6px 12px; }
@media (min-width: 960px) { .demo-bar { font-size: 13px; padding: 7px 16px; } }
.top { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .95); border-bottom: 1px solid var(--line); }
.top__in { max-width: 1360px; margin: 0 auto; height: 62px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__name { font-size: 23px; font-weight: 300; }
.brand__tag { font-size: 11px; color: var(--cap); letter-spacing: .06em; }
.nav { display: none; gap: 30px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--text); text-decoration: none; }
.nav a:hover { color: var(--violet-hi); }
.top__act { display: flex; align-items: center; gap: 8px; }
.top__phone, .top__tg, .top__cta { display: none; }
@media (min-width: 960px) {
  .top { background: rgba(255, 255, 255, .94); }
  .top__in { height: 76px; padding: 0 40px; }
  .brand__name { font-size: 26px; letter-spacing: .01em; }
  .brand__tag { font-size: 12px; }
  .top__act { gap: 14px; }
  .top__phone { display: inline; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
  .top__tg { display: flex; }
  .top__cta { display: inline-flex; min-height: 46px; font-size: 15px; padding: 0 22px; }
  .top__call { display: none; }
}
/* Меню в шапке — с 1100 px (на 960–1099 пункты не помещаются рядом с телефоном и кнопкой — остаётся «Меню») */
@media (min-width: 1100px) { .nav { display: flex; } .top__menu { display: none; } }

/* Меню на телефоне */
.menu { position: fixed; inset: 0; z-index: 20; background: #fff; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.menu[hidden] { display: none; }
.menu__head { height: 62px; flex: none; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.menu__nav { padding: 12px 16px 0; display: flex; flex-direction: column; }
.menu__nav a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 65px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 30px; font-weight: 300; }
.menu__meta { font-size: 13px; color: var(--cap); font-weight: 500; white-space: nowrap; }
.menu__foot { margin-top: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.menu__card { padding: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.menu__phone { color: var(--ink); font-weight: 600; font-size: 17px; }
.menu__tg { text-align: center; font-weight: 600; font-size: 15px; padding: 6px; }

/* Первый экран. Телефон — столбиком, триптих в единицах cqw от ширины 390 (артборд «Главная · телефон 390») */
.hero { padding: 28px var(--gut) 40px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 600px) and (max-width: 959px) { .hero { max-width: 632px; margin: 0 auto; } }
.hero__stage, .hero__text, .hero__foot { display: contents; }
.hero h1 { font-size: 38px; line-height: 1.07; font-weight: 200; color: var(--text); }
.hero__lead { font-size: 16px; line-height: 1.55; }
.tri { position: relative; aspect-ratio: 390 / 626; margin: 0 calc(-1 * var(--gut)); container-type: inline-size; }
.tile { position: absolute; margin: 0; filter: drop-shadow(0 0 10px rgba(180, 156, 240, .45)) drop-shadow(0 0 6px rgba(159, 227, 207, .4)); }
.t-edge { position: absolute; inset: 0; background: var(--edge); }
.t-img { position: absolute; inset: 3px; }
.t-img img { width: 100%; height: 100%; object-fit: cover; }
.t-edge, .t-img { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tile--l { left: 1.5385cqw; top: 2.5641cqw; width: 96.923cqw; height: 70.769cqw; }
.tile--m { left: 1.5385cqw; top: 91.795cqw; width: 50.051cqw; height: 56.923cqw; }
.tile--r { left: 47.795cqw; top: 82.564cqw; width: 50.667cqw; height: 66.154cqw; }
.tile--l > * { -webkit-mask-image: url("img/masks/ph-l.svg"); mask-image: url("img/masks/ph-l.svg"); }
.tile--m > * { -webkit-mask-image: url("img/masks/ph-m.svg"); mask-image: url("img/masks/ph-m.svg"); }
.tile--r > * { -webkit-mask-image: url("img/masks/ph-r.svg"); mask-image: url("img/masks/ph-r.svg"); }
.tile--m img { object-position: 45% 30%; }
.tile--r img { object-position: 60% 0%; }
.cap { position: absolute; text-align: center; font-size: 12px; line-height: 1.3; color: var(--text); }
.cap--l { left: 1.5385cqw; width: 96.923cqw; top: 75.385cqw; line-height: normal; }
.cap--m { left: 1.5385cqw; width: 50.051cqw; top: 150.769cqw; }
.cap--r { left: 55.179cqw; width: 43.282cqw; top: 150.769cqw; }
.cap__long { display: none; }
.viz { order: 1; font-size: 11px; color: var(--opt); }
.facts { order: 2; display: flex; gap: 22px; }
.facts__v { font-size: 24px; font-weight: 300; }
.facts__l { font-size: 13px; }
.hero__prices { order: 3; }

/* Компьютер: заголовок сверху слева, три наклонные формы на всю ширину; места и размеры — в cqw от ширины 1440 (паспорт, третий круг) */
@media (min-width: 960px) {
  .hero { padding: 0; gap: 0; display: block; }
  /* Высота — как на холсте: 48.4 % ширины окна, не меньше 620 px (aspect-ratio с min-height растягивал ширину — прокрутка на 960–1280) */
  .hero__stage { display: block; position: relative; container-type: inline-size; height: 48.4vw; min-height: 620px; overflow: hidden; }
  .hero__text { display: flex; position: absolute; left: 4cqw; top: 2.1cqw; width: 52cqw; flex-direction: column; gap: 1.4cqw; z-index: 2; }
  .hero h1 { font-size: 3.9cqw; line-height: 1.08; letter-spacing: -.01em; }
  .hero__lead { font-size: max(15px, 1.15cqw); line-height: 1.5; }
  .hero__cta { align-self: flex-start; min-height: max(48px, 3.6cqw); padding: 0 2.2cqw; font-size: max(15px, 1.15cqw); }
  .tri { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; container-type: normal; }
  .tile { z-index: 1; filter: drop-shadow(0 0 16px rgba(180, 156, 240, .45)) drop-shadow(0 0 6px rgba(159, 227, 207, .4)); }
  .tile--l { left: .417cqw; top: 15cqw; width: 45.236cqw; height: 29.444cqw; }
  .tile--m { left: 44.631cqw; top: 10.278cqw; width: 28.01cqw; height: 34.167cqw; }
  .tile--r { left: 72.951cqw; top: 1.25cqw; width: 26.493cqw; height: 43.194cqw; }
  .tile--l > * { -webkit-mask-image: url("img/masks/desk-l.svg"); mask-image: url("img/masks/desk-l.svg"); }
  .tile--m > * { -webkit-mask-image: url("img/masks/desk-m.svg"); mask-image: url("img/masks/desk-m.svg"); }
  .tile--r > * { -webkit-mask-image: url("img/masks/desk-r.svg"); mask-image: url("img/masks/desk-r.svg"); }
  .cap { top: 45.694cqw; white-space: nowrap; font-size: max(13px, .95cqw); line-height: normal; }
  .cap--l { left: .417cqw; width: 45.236cqw; top: 45.694cqw; }
  .cap--m { left: 48.014cqw; width: 22.576cqw; top: 45.694cqw; }
  .cap--r { left: 72.951cqw; width: 26.493cqw; top: 45.694cqw; }
  .hero__foot { display: flex; max-width: 1360px; margin: 0 auto; padding: 18px 40px 40px; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
  .facts { gap: 40px; }
  .facts__v { font-size: 26px; }
  .facts__l { font-size: 14px; }
  .viz { order: 3; font-size: 12px; }
  /* Строка «Визуализация…» — левее плавающих кнопок (на холсте их кнопка «Задать вопрос» её закрывает) */
  .hero__foot { padding-right: 240px; }
  .cap__long { display: inline; }
  .cap__short { display: none; }
}
/* 960–1239: на холсте (проверен на 1280–1680) кнопка «Записаться →» здесь заходит на форму маникюра, а длинная подпись бровей
   налезает на подпись волос — триптих целиком ниже на 6cqw (формы и пропорции те же), у бровей — короткая подпись телефонного артборда */
@media (min-width: 960px) and (max-width: 1239px) {
  .hero__stage { min-height: max(620px, 55vw); }
  .tri { top: 6cqw; bottom: auto; height: 100%; }
  .cap__long { display: none; }
  .cap__short { display: inline; }
}

/* Разделы */
.sec { padding: 40px var(--gut); }
.sec--tint { background: var(--tint); }
/* Скорость: разделы ниже первого экрана браузер не рисует, пока до них не долистали (кромки, тени, фото);
   перед переходом по якорю site.js включает .cv-all — прокрутка идёт по настоящим высотам */
.sec, .foot { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.cv-all .sec, .cv-all .foot { content-visibility: visible; }
.wrap { max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sec__head { display: flex; flex-direction: column; gap: 16px; }
.sec h2 { font-size: 36px; line-height: 1.1; font-weight: 300; color: var(--ink); }
.sec__intro { font-size: 15px; line-height: 1.5; }
@media (min-width: 960px) {
  .wrap { gap: 36px; }
  .sec__head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
  .sec h2 { font-size: 52px; line-height: 1.08; letter-spacing: -.01em; }
  .sec__intro { max-width: 470px; font-size: 17px; line-height: 1.55; }
  #prices { padding: 72px 40px 96px; }
  #works { padding: 96px 40px; }
  #masters { padding: 72px 40px 96px; }
  #reviews { padding: 96px 40px 72px; }
  #contacts { padding: 72px 40px 104px; }
}

/* Услуги и цены: полоса-кромка сверху карточки */
.prices { display: flex; flex-direction: column; gap: 16px; }
.price { overflow: hidden; padding: 18px 20px 8px; position: relative; }
.price::before, .form::before, .helper__sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--edge-x); }
.price { padding-top: 21px; }
.price h3 { margin-bottom: 10px; font-size: 19px; font-weight: 500; }
.price__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.price__name { font-size: 16px; font-weight: 500; }
.price__sub { font-size: 13px; }
.price__v { white-space: nowrap; }
.prices__note { font-size: 13px; }
@media (min-width: 960px) {
  .prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .price { border-radius: 24px; padding: 29px 28px 26px; display: flex; flex-direction: column; gap: 4px; }
  .price h3 { margin-bottom: 14px; font-size: 22px; }
  .price__row { gap: 16px; padding: 14px 0; }
  .price__name { font-size: 17px; }
  .price__sub { font-size: 14px; }
  .price__v { font-size: 17px; }
  .prices__note { font-size: 15px; }
}

/* До и после: цвет и кромка — только у «после» */
.works { display: flex; flex-direction: column; gap: 16px; }
.pair { display: flex; flex-direction: column; gap: 8px; }
.pair__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pair__before { position: relative; aspect-ratio: 1; }
.pair__before img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; filter: saturate(.75); }
.pair__tag { display: none; }
.fr { padding: 3px; background: var(--edge); box-shadow: 0 0 22px rgba(180, 156, 240, .35); }
.pair__after { aspect-ratio: 1; border-radius: 20px; }
.pair__after img { width: 100%; height: 100%; object-fit: cover; border-radius: 17px; }
.pair figcaption { font-size: 13px; color: var(--text); }
@media (min-width: 960px) {
  .works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .pair { gap: 14px; }
  .pair__in { gap: 10px; align-items: center; }
  .pair__before img { border-radius: 20px; }
  .pair__tag { display: block; position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .9); color: var(--text); padding: 4px 9px; border-radius: 999px; }
  .fr { box-shadow: 0 0 28px rgba(180, 156, 240, .35), 0 0 10px rgba(159, 227, 207, .35); }
  .pair__after { border-radius: 22px; }
  .pair__after img { border-radius: 19px; }
  .pair figcaption { font-size: 15px; }
}

/* Мастера */
.masters { display: flex; flex-direction: column; gap: 16px; }
.master { display: flex; gap: 14px; align-items: center; }
.master img { width: 104px; height: 130px; flex: none; object-fit: cover; border-radius: 20px; }
.master__body { display: flex; flex-direction: column; gap: 4px; }
.master h3 { font-size: 19px; font-weight: 500; }
.master__role { font-size: 14px; color: var(--violet-hi); }
.master__note { font-size: 13px; }
.master__book { font-size: 14px; font-weight: 600; margin-top: 4px; }
@media (min-width: 960px) {
  .masters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .master { flex-direction: column; align-items: stretch; gap: 16px; }
  .master img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 26px; }
  .master__body { gap: 0; align-items: flex-start; }
  .master h3 { font-size: 24px; }
  .master__role { margin-top: 4px; font-size: 15px; font-weight: 500; }
  .master__note { margin-top: 6px; font-size: 15px; }
  /* Компьютер: ссылка — кнопка-обводка (как .btn-o) */
  .master__book { margin-top: 16px; display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--rim-o); background: #fff; color: var(--link-hi); font-size: 17px; text-decoration: none; }
  .master__book:hover { border-color: var(--violet); }
}

/* Отзывы */
.reviews { display: flex; flex-direction: column; gap: 16px; }
.review { padding: 22px; border-radius: 22px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.review__tag { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--violet-hi); background: var(--soft); padding: 4px 9px; border-radius: 999px; }
.review p { font-size: 16px; line-height: 1.55; font-weight: 300; }
.review footer { font-size: 13px; }
@media (min-width: 960px) {
  .reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .review { padding: 32px; border-radius: 24px; gap: 16px; }
  .review__tag { font-size: 12px; padding: 5px 10px; }
  .review p { font-size: 19px; }
  .review footer { font-size: 14px; }
}

/* Запись и контакты */
.book { display: flex; flex-direction: column; gap: 16px; }
.form { position: relative; overflow: hidden; border-radius: 24px; padding: 25px 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.form__head h3 { margin-bottom: 6px; font-size: 21px; font-weight: 500; }
.form__head p { font-size: 14px; }
.form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
label { font-size: 14px; font-weight: 500; color: var(--text); display: flex; flex-direction: column; gap: 7px; }
input, select, textarea { font: 16px "Manrope", system-ui, sans-serif; color: var(--ink); background: #fff; border: 1.5px solid var(--field); border-radius: 14px; padding: 13px 14px; width: 100%; margin: 0; }
textarea { resize: vertical; }
input[type="date"] { min-height: 50px; }
::placeholder { color: var(--cap); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--rim-o); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }
.form__send { display: flex; flex-direction: column; gap: 16px; }
.form__submit { min-height: 54px; font-size: 17px; width: 100%; }
.form__tg { font-size: 15px; font-weight: 600; text-align: center; }
@media (min-width: 600px) and (max-width: 959px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form__wide { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  .book { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .form { border-radius: 28px; padding: 37px 34px 34px; gap: 18px; }
  .form__head h3 { font-size: 26px; }
  .form__head p { font-size: 15px; }
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .form__wide { grid-column: 1 / -1; }
  input, select, textarea { padding: 13px 16px; }
  .form__send { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
  .form__submit { width: auto; min-height: 56px; font-size: 18px; padding: 0 34px; }
  .form__tg { font-size: 16px; text-align: left; }
}

/* Метки оболочки: согласие, ошибки, сводка, «отправляем», «не отправилась» */
.form .sd-consent.sd-consent { flex-direction: row; align-items: flex-start; gap: 12px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--text); }
.form .sd-consent.sd-consent input { width: 22px; height: 22px; flex: none; margin: 0; padding: 0; accent-color: var(--violet); }
.sd-consent a { color: var(--violet-hi); }
.sd-consent a:hover { color: var(--link-hi); }
@media (min-width: 960px) { .form .sd-consent.sd-consent { font-size: 14px; } }
.sd-error.sd-error { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--err-text); }
.sd-error::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 1px; background: currentColor;
  -webkit-mask: 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.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
[data-sd-consent] .sd-error { margin-top: 8px; }
.form [aria-invalid="true"] { outline: none; border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.form [aria-invalid="true"]:focus-visible { outline: 2px solid var(--err); outline-offset: 1px; }
.form input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--err); outline-offset: 2px; box-shadow: none; }
.sd-summary.sd-summary { margin: 0; border: 1.5px solid var(--err); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.4; background: var(--err-bg); color: var(--err-title); }
.sd-senderr.sd-senderr { flex-basis: 100%; margin: 0; border: 1.5px solid var(--err); border-radius: 14px; padding: 14px; background: var(--err-bg); display: flex; flex-direction: column; gap: 8px; }
.sd-senderr .sd-senderr__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--err-title); }
.sd-senderr .sd-senderr__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.sd-senderr .sd-senderr__actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 14px; font-weight: 600; }
.sd-senderr .sd-senderr__actions a, .sd-senderr .sd-senderr__actions button { color: var(--violet-hi); font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sd-senderr .sd-senderr__actions a:hover, .sd-senderr .sd-senderr__actions button:hover { color: var(--link-hi); }
.form__submit[aria-busy="true"], .form__submit[aria-busy="true"]:hover { background: #b9a8ea; color: #fff; gap: 10px; cursor: progress; }
.form__submit[aria-busy="true"]::before { content: ""; width: 18px; height: 18px; border: 2.4px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .form__submit[aria-busy="true"]::before { animation: none; } }

/* Контакты и карта (нарисованная схема, не картинка Яндекса) */
.book__side { display: flex; flex-direction: column; gap: 16px; }
.info { border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.info p { margin-top: 6px; font-size: 16px; }
.info__pair { display: flex; gap: 24px; flex-wrap: wrap; }
.info__tg .kicker { display: none; }
.info__tg p { margin-top: 0; font-weight: 600; }
.map { position: relative; height: 190px; border-radius: 24px; overflow: hidden; background-color: #f4f2f9;
  background-image: repeating-linear-gradient(0deg, transparent 0 29px, #ebe8f3 29px 30px), repeating-linear-gradient(90deg, transparent 0 29px, #ebe8f3 29px 30px); }
.map__pin { position: absolute; left: 30%; top: 40%; font-size: 13px; font-weight: 600; background: var(--violet); color: #fff; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.map__link { position: absolute; left: 16px; bottom: 12px; font-size: 14px; font-weight: 600; }
@media (min-width: 960px) {
  .book__side { gap: 24px; }
  .info { border-radius: 28px; padding: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .info__wide { grid-column: 1 / -1; }
  .info__pair { display: contents; }
  .info p { margin-top: 8px; font-size: 18px; }
  .info__tg .kicker { display: inline; }
  .info__tg p { margin-top: 8px; font-weight: 400; }
  .map { height: 240px; border-radius: 28px;
    background-image: repeating-linear-gradient(0deg, transparent 0 39px, #ebe8f3 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, #ebe8f3 39px 40px); }
  .map__pin { left: 44%; top: 42%; padding: 6px 11px; }
  .map__link { left: auto; right: 18px; bottom: 14px; font-size: 15px; }
}

/* Подвал: реквизиты — метка data-sd-legal дважды (строка ИП — под названием, документы — в своей колонке) */
.foot { border-top: 1px solid var(--line); padding: 28px var(--gut) calc(110px + env(safe-area-inset-bottom)); font-size: 13px; }
.foot__in { gap: 10px; }
.foot__brand, .foot__col { display: flex; flex-direction: column; gap: 10px; }
.foot__name { font-size: 22px; font-weight: 300; }
.foot__col > .kicker, .foot__col--contacts { display: none; }
/* Разделители « · » оболочки — текстом между ссылками: прячем размером 0, ссылки — строками */
.foot__legal { font-size: 0; line-height: normal; }
.foot__legal > * { display: block; font-size: 13px; margin-top: 10px; }
.foot__legal > .sd-legal__op, .foot__col .foot__legal > a:first-of-type { margin-top: 0; }
.foot__legal .sd-legal__op { color: var(--muted); }
.foot__legal--op > :not(.sd-legal__op), .foot__col .foot__legal .sd-legal__op { display: none; }
.foot__legal a { color: var(--text); }
.foot__legal a:hover, .foot__credit:hover { color: var(--link-hi); }
.foot__legal .sd-legal__demo { color: var(--cap); }
.foot__legal .sd-legal__cookies { color: var(--text); text-align: left; font: inherit; font-size: 13px; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.foot__credit { color: var(--cap); }
.foot__col--contacts a { text-decoration: none; }
.foot__col--contacts a:hover { text-decoration: underline; }
@media (min-width: 960px) {
  .foot { padding: 48px 40px 44px; font-size: 14px; }
  .foot__in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
  .foot__brand { gap: 10px; }
  .foot__col { gap: 8px; }
  .foot__name { font-size: 24px; }
  .foot__col > .kicker, .foot__col--contacts { display: flex; }
  .foot__col > .kicker { display: block; }
  .foot__legal > * { margin-top: 8px; }
  .foot__legal > .sd-legal__op, .foot__col .foot__legal > a:first-of-type { margin-top: 0; }
  .foot__legal > *, .foot__legal .sd-legal__cookies { font-size: 14px; }
  .foot__credit { margin-top: 6px; }
}

/* Плавающие кнопки — компьютер; липкая полоса записи — телефон */
.fab { display: none; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); }
.dock__cta { flex: 1; }
.dock__ask { width: 50px; height: 50px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--rim-o); border-radius: 25px; background: transparent; color: var(--violet-hi); cursor: pointer; padding: 0; }
@media (min-width: 960px) {
  .dock { display: none; }
  .fab { position: fixed; right: 28px; bottom: 28px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  .fab__round { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 26px; background: #fff; color: var(--violet-hi); box-shadow: 0 6px 20px rgba(60, 40, 120, .18); }
  .fab__ask { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 26px; border: 0; background: var(--violet); color: #fff; font: 600 15px "Manrope", system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 24px rgba(124, 92, 214, .35); }
  .fab__ask:hover { background: var(--violet-hi); }
}

/* Онлайн-помощник (демо-заглушка): лист снизу на телефоне, карточка у плавающих кнопок на компьютере */
.helper { position: fixed; inset: 0; z-index: 20; }
.helper[hidden] { display: none; }
.helper__shade { position: absolute; inset: 0; background: rgba(43, 49, 59, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.helper__sheet { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
  padding: 23px 16px calc(26px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.helper__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.helper__head > div { display: flex; flex-direction: column; gap: 2px; }
.helper__title { font-size: 22px; font-weight: 500; }
.helper__sub { font-size: 13px; color: var(--cap); }
.helper__text { padding: 16px 18px; border-radius: 20px; background: #f6f3fd; font-size: 15px; line-height: 1.5; }
.helper__note { font-size: 12px; color: var(--cap); line-height: 1.45; }
@media (min-width: 960px) {
  .helper__sheet { left: auto; right: 28px; bottom: 28px; width: 400px; border-radius: 26px; padding-bottom: 26px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
}