/* =========================================================
   VINKONA — визуальное обновление публичного сайта

   Подключается ТОЛЬКО страницами сайта, после base.css.
   Админка и кабинеты этот файл не грузят, поэтому их вид
   не меняется: внутренние инструменты живут на прежних
   токенах из base.css.

   Что здесь: уточнённая палитра поверхностей, более мягкие
   многослойные тени, типографская ритмика, аккуратные
   состояния наведения и фокуса, спокойнее шапка и hero.
   ========================================================= */

/* =========================================================
   1. ТОКЕНЫ
   Брендовые цвета те же — меняются нейтрали, тени и радиусы.
   ========================================================= */
:root{
  /* Поверхности: страница чуть теплее, поля — чуть глубже */
  --page:         #FCFAF9;
  --surface:      #FFFFFF;
  --surface-sunk: #F6EFEE;
  --surface-soft: #FBF5F4;

  /* Волосяные линии вместо тяжёлых рамок */
  --hairline:        rgba(62,57,53,.08);
  --hairline-strong: rgba(62,57,53,.14);

  /* Тени: многослойные и с тёплым оттенком, а не серые.
     Два слоя дают ощущение глубины без «грязного» ореола. */
  --sh-xs: 0 1px 2px rgba(92,64,62,.05);
  --sh-sm: 0 1px 2px rgba(92,64,62,.04), 0 4px 12px -6px rgba(92,64,62,.10);
  --sh-md: 0 2px 4px rgba(92,64,62,.04), 0 14px 30px -16px rgba(92,64,62,.18);
  --sh-lg: 0 4px 10px rgba(92,64,62,.05), 0 34px 68px -30px rgba(92,64,62,.28);
  --sh-clay: 0 2px 6px rgba(164,87,86,.18), 0 16px 34px -16px rgba(164,87,86,.45);

  /* Радиусы: чуть собраннее, чем было — 30px выглядел раздутым */
  --r-lg: 20px;
  --r-xl: 26px;

  /* Фокус: нейтральное кольцо.
     Раньше было в цвет бренда, но розовая обводка на каждом поле
     выглядела как ошибка ввода. Индикатор нужен для клавиатуры,
     поэтому он остаётся — просто перестал быть цветным. */
  --focus: 0 0 0 3px rgba(62,57,53,.13);
  --focus-line: rgba(62,57,53,.26);
}

body{
  background:var(--page);
  font-feature-settings:"kern" 1, "liga" 1;
}

/* =========================================================
   2. ТИПОГРАФИКА
   Балансировка строк и оптические зазоры — то, что отличает
   аккуратный набор от механического.
   ========================================================= */
h1, h2, h3, h4, .section__title, .pagehead__title, .hero__title{
  text-wrap:balance;
}
p, li, .section__lead, .pagehead__lead{
  text-wrap:pretty;
}

/* Дисплейный шрифт: плотнее трекинг на крупных кеглях,
   иначе Playfair на больших размерах выглядит разреженно */
.hero__title{
  font-size:clamp(36px, 4.6vw, 58px);
  line-height:1.04;
  letter-spacing:-.03em;
}
.section__title{
  font-size:clamp(27px, 3.1vw, 40px);
  line-height:1.1;
  letter-spacing:-.028em;
}
.pagehead__title{
  font-size:clamp(30px, 3.6vw, 46px);
  line-height:1.08;
  letter-spacing:-.03em;
}
/* Курсивная вставка в заголовках — акцент бренда */
.hero__title em,
.section__title em,
.pagehead__title em{
  font-style:italic;
  color:var(--clay);
}

/* =========================================================
   3. ФОКУС И ВЫДЕЛЕНИЕ
   Индикатор фокуса нужен для навигации с клавиатуры, поэтому
   он есть везде — но нейтральный, без цветной обводки.
   Радиус при фокусе больше не меняется: кольцо «прыгало».
   ========================================================= */
:focus{ outline:none; }
:focus-visible{
  outline:none;
  box-shadow:var(--focus);
}
.btn:focus-visible,
.chip:focus-visible,
.round-btn:focus-visible,
.segmented button:focus-visible,
.tag-filter button:focus-visible{
  box-shadow:var(--focus);
}

/* =========================================================
   ПОЛЯ ВВОДА: НИКАКОЙ ОБВОДКИ ПРИ ФОКУСЕ
   Раньше при клике в поле появлялись сразу две рамки —
   на обёртке и на самом поле ввода, одна внутри другой.
   Выглядело как ошибка заполнения.

   Признак фокуса теперь один и без контура: фон поля
   светлеет с бежевого до белого. Это заметно, но не рисует
   вокруг ничего лишнего.
   ========================================================= */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible{
  outline:none;
  box-shadow:none;
}

/* Обёртки полей: меняем только фон, рамку не трогаем вообще.
   В покое рамки прозрачные — значит и в фокусе должны остаться
   прозрачными, иначе обводка «включается» при клике. */
.field:focus-within{
  background:var(--surface);
  border-color:transparent;
  box-shadow:none;
}
.input__box:focus-within{
  background:var(--surface);
  border-color:transparent;
  box-shadow:none;
}
textarea.input:focus{
  background:var(--surface);
  border-color:transparent;
  box-shadow:none;
}
/* У поисковой строки в каталоге рамка есть всегда — она часть формы.
   При фокусе оставляем ровно ту же, чтобы ничего не появлялось. */
.results__search:focus-within{ border-color:var(--line); }
.input{ box-shadow:none; }

/* Всё, что находится ВНУТРИ поля, при клике не получает ни кольца,
   ни контура: кнопка выбора услуги, ползунок цены, поля в фильтрах.
   Это элементы, по которым щёлкают мышью, и обводка на них
   читалась как ошибка заполнения. */
.field button:focus,
.field button:focus-visible,
.field .select__value:focus,
.field .select__value:focus-visible,
.field input[type="range"]:focus,
.field input[type="range"]:focus-visible,
.range input[type="range"]:focus,
.range input[type="range"]:focus-visible,
.filters button:focus-visible,
.filters input:focus-visible,
.filters select:focus-visible,
.select-mini select:focus-visible,
.segmented button:focus-visible{
  outline:none;
  box-shadow:none;
}

/* Клавиатурная навигация: кольцо остаётся только там, где оно
   появляется по Tab и не мешает при работе мышью. */
.check input:focus-visible + .check__box{
  outline:2px solid rgba(62,57,53,.38);
  outline-offset:2px;
}
/* Ползунок цены тоже без обводки — см. блок «ПОЛЯ ВВОДА» выше.
   Здесь правило не дублируем: оно стояло ниже и перебивало запрет. */


/* =========================================================
   3.1 НАВЕДЕНИЕ: НЕЙТРАЛЬНЫЕ РАМКИ
   Рамку в цвет бренда на наведении убрали: на мелких элементах
   она читалась как «обводка ошибки». Само наведение осталось —
   за счёт более тёмной рамки, плотного текста и лёгкой подложки.

   Что НЕ трогаем намеренно: заливки состояний выбора — активный
   чип, отмеченный чекбокс, выбранная роль. Это не рамка, а выбор,
   и цветом он обозначается правильно.
   ========================================================= */
.oauth button:hover{
  border-color:rgba(62,57,53,.30);
  color:var(--ink);
}
.slot:hover{
  border-color:rgba(62,57,53,.30);
  color:var(--ink);
  background:var(--surface);
}
/* Раскрытый выпадающий список: рамку тоже не включаем,
   только подсвечиваем фон — иначе поле выглядит «в ошибке»,
   пока список открыт */
.field.is-open{
  border-color:transparent;
  background:var(--surface);
}
/* Пункт выпадающего списка и дня календаря под курсором */
.opt:hover,
.opt.is-active,
.cal__day:hover:not(.cal__day--out):not(:disabled){
  background:var(--surface-sunk);
}
/* Выбранный день календаря и активный чип остаются в цвете бренда:
   это состояние выбора, а не рамка. Так и задумано. */

::selection{ background:var(--blush); color:var(--ink); }

/* Тонкий скроллбар — на широких экранах страница выглядит чище */
*{ scrollbar-width:thin; scrollbar-color:rgba(62,57,53,.22) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(62,57,53,.18);
  border:3px solid transparent;
  background-clip:content-box;
  border-radius:var(--r-full);
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(62,57,53,.3); background-clip:content-box; }

/* =========================================================
   4. ШАПКА
   Спокойнее: меньше логотип, мягче разделитель, наведение
   на пункты меню — подложка вместо голого текста.
   ========================================================= */
.header{
  background:rgba(252,250,249,.82);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck{
  background:rgba(252,250,249,.92);
  border-bottom-color:var(--hairline);
  box-shadow:0 8px 30px -24px rgba(92,64,62,.5);
}

.logo svg{ height:24px; }
.logo{ transition:opacity .2s var(--ease); }
.logo:hover{ opacity:.75; }

.nav__link{
  position:relative;
  padding:9px 14px;
  font-size:14.5px;
  color:var(--ink-70);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover{ background:var(--clay-tint); color:var(--ink); }
.nav__link.is-current{ color:var(--clay); background:var(--clay-tint); }

/* Пункт «Стать мастером» — единственный текстовый акцент в меню */
.nav__link--accent{ color:var(--clay); }
.nav__link--accent:hover{ background:var(--clay-tint); }

/* =========================================================
   5. КНОПКИ
   Ровнее пропорции, отзывчивее наведение, аккуратнее тень.
   ========================================================= */
.btn{
  border-radius:var(--r-full);
  font-weight:700;
  letter-spacing:-.005em;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), box-shadow .25s var(--ease),
             transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:var(--clay);
  box-shadow:var(--sh-clay);
}
.btn--primary:hover{
  background:var(--clay-600);
  box-shadow:0 4px 10px rgba(164,87,86,.22), 0 20px 40px -18px rgba(164,87,86,.55);
  transform:translateY(-1px);
}
.btn--ghost{
  background:var(--surface);
  border:1px solid var(--hairline-strong);
  color:var(--ink-70);
}
.btn--ghost:hover{
  border-color:rgba(62,57,53,.30);
  color:var(--ink);
  background:var(--surface);
  transform:translateY(-1px);
}
.btn--light{ box-shadow:var(--sh-sm); }
.btn--light:hover{ transform:translateY(-1px); }

.round-btn{
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .18s var(--ease);
}
.round-btn:hover{ transform:translateY(-1px); }

/* =========================================================
   6. HERO
   Свечение было огромным и засвечивало правый верх.
   Делаю его собраннее, добавляю второй мягкий источник.
   ========================================================= */
.hero{
  background:
    radial-gradient(760px 460px at 82% -8%, rgba(247,201,200,.85) 0%, rgba(247,201,200,0) 68%),
    radial-gradient(560px 380px at 6% 8%, rgba(245,237,236,.9) 0%, rgba(245,237,236,0) 70%),
    linear-gradient(180deg, #FDF7F6 0%, var(--page) 78%);
  padding:64px 0 0;
}

.pill{
  background:var(--surface);
  border:1px solid var(--hairline);
  box-shadow:var(--sh-sm);
  font-size:13px;
  font-weight:600;
  padding:8px 16px;
  color:var(--ink-70);
}
.pill .ico{ color:var(--clay); }

.hero__sub{
  font-size:17px;
  line-height:1.62;
  color:var(--ink-70);
  max-width:52ch;
}

/* Список фактов: аккуратнее отбивка, спокойнее иконки */
.facts{ margin-top:30px; padding-top:22px; border-top:1px solid var(--hairline); gap:10px; }
.facts li{ font-size:14px; color:var(--ink-70); gap:9px; }
.facts .ico{ color:var(--clay); opacity:.85; }

/* Плавающие карточки в hero — меньше «разброса» */
.hero__art{ height:500px; }
.art__card{
  box-shadow:var(--sh-md);
  border:1px solid var(--hairline);
  backdrop-filter:blur(6px);
}
.art__card--main{
  box-shadow:var(--sh-lg);
  border-radius:var(--r-xl);
}
.art__card--safe{
  background:var(--ink);
  color:var(--cream);
  box-shadow:var(--sh-md);
  font-weight:600;
}

/* =========================================================
   7. БЛОК ПОИСКА НА ГЛАВНОЙ
   ========================================================= */
.search{
  background:var(--surface);
  border:1px solid var(--hairline);
  box-shadow:var(--sh-lg);
  border-radius:var(--r-xl);
  padding:16px 18px 14px;
}
.field{
  background:var(--surface-sunk);
  border:1px solid transparent;
  border-radius:var(--r-md);
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.field:hover{ background:#F2E9E7; }
.field:focus-within{ background:var(--surface); border-color:var(--focus-line); }
.field__label{ font-size:11px; letter-spacing:.07em; }

.search__chips{ margin-top:12px; }
.search__chips-label{ font-size:12.5px; color:var(--ink-40); }
.chip{
  background:var(--surface);
  border:1px solid var(--hairline);
  transition:border-color .2s var(--ease), color .2s var(--ease),
             background-color .2s var(--ease), transform .18s var(--ease);
}
.chip:hover{
  border-color:rgba(62,57,53,.30);
  color:var(--ink);
  background:var(--surface-sunk);
  transform:translateY(-1px);
}

/* =========================================================
   8. КАРТОЧКИ
   Волосяная рамка + мягкая тень вместо тяжёлой границы.
   ========================================================= */
.card,
.master,
.feature,
.review,
.plan,
.step{
  border:1px solid var(--hairline);
  box-shadow:var(--sh-xs);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease),
             border-color .3s var(--ease);
}
.card:hover,
.feature:hover,
.plan:hover{
  box-shadow:var(--sh-md);
  border-color:var(--hairline-strong);
  transform:translateY(-3px);
}
.master:hover{
  box-shadow:var(--sh-md);
  border-color:var(--hairline-strong);
  transform:translateY(-4px);
}

/* Заголовки секций: аккуратнее отбивка от текста */
.section__eyebrow{
  font-size:11.5px;
  letter-spacing:.1em;
  font-weight:800;
  color:var(--clay);
}
.section__lead{ font-size:16.5px; line-height:1.62; color:var(--ink-70); }

/* =========================================================
   9. ССЫЛКИ-СТРЕЛКИ
   Стрелка чуть уезжает при наведении — мелкая живость
   без анимационных излишеств.
   ========================================================= */
.link-arrow{ transition:color .2s var(--ease); }
.link-arrow .ico{ transition:transform .25s var(--ease); }
.link-arrow:hover .ico{ transform:translateX(4px); }

/* =========================================================
   10. ПОДВАЛ
   ========================================================= */
.footer{ background:var(--ink); }
.footer__col a{ transition:color .2s var(--ease), opacity .2s var(--ease); }

/* =========================================================
   11. УВАЖЕНИЕ К НАСТРОЙКАМ СИСТЕМЫ
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .card:hover, .feature:hover, .plan:hover, .master:hover,
  .btn:hover, .chip:hover, .round-btn:hover{ transform:none; }
  .link-arrow:hover .ico{ transform:none; }
}

/* Контраст важнее красоты: если система просит больше контраста,
   убираем полупрозрачные подложки */
@media (prefers-contrast: more){
  .nav__link{ color:var(--ink); }
  .hero__sub, .section__lead{ color:var(--ink); }
}

/* =========================================================
   КАРТОЧКА МАСТЕРА: ПОЛОСКА НАД ЦЕНОЙ
   Рамка над строкой с ценой выглядела случайной чертой
   посреди карточки. Убираем и разделяем блок отступом.
   Правим здесь, а не в base.css: тот общий с админкой.
   ========================================================= */
.master__foot{
  border-top:0;
  padding-top:0;
  margin-top:16px;
}

/* Слоган мастера: пара слов от себя, читается как цитата */
.master__slogan{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--clay-700);
  font-style:italic;
}

/* =========================================================
   ЮРИДИЧЕСКИЕ ДОКУМЕНТЫ
   В соглашениях, политике и оферте списки идут без иконок,
   поэтому обычный .prose ul li выглядел сплошным текстом.
   Даём таким пунктам точку-маркер.
   ========================================================= */
.prose ul li:not(:has(.ico))::before{
  content:";
  flex:none;
  width:5px; height:5px;
  margin-top:9px;
  border-radius:50%;
  background:var(--clay-300);
}
/* Подзаголовки внутри документа: отделяем от предыдущего абзаца заметнее */
.prose h3{ color:var(--ink); }
.prose h2 + h3{ margin-top:18px; }

/* =========================================================
   ПЛАШКА СОГЛАСИЯ НА КУКИ
   Компактная карточка в правом нижнем углу. Сетка из двух
   колонок: текст и кнопка. Обе выровнены по центру строки,
   отступы одинаковые со всех сторон.
   ========================================================= */
.ck{
  position:fixed; right:18px; bottom:18px; left:auto; z-index:150;
  width:min(480px, calc(100vw - 36px));
  transform:translateY(14px); opacity:0;
  transition:transform .32s var(--ease), opacity .32s var(--ease);
  pointer-events:none;
}
.ck.is-in{ transform:none; opacity:1; pointer-events:auto; }

.ck__box{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  background:var(--surface);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
}

.ck__text{
  margin:0; min-width:0;
  /* Отступ справа оставляет место крестику, чтобы он не наезжал на текст */
  padding-right:4px;
  /* balance выравнивает длину строк: без него последняя строка
     остаётся коротким «хвостом» и блок выглядит рваным */
  text-wrap:balance;
  font-size:12.5px; line-height:1.55; color:var(--ink-70);
}
.ck__text a{ color:var(--clay); font-weight:600; text-decoration:underline; }

.ck__close{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:var(--r-full);
  color:var(--ink-40);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.ck__close:hover{ background:var(--surface-sunk); color:var(--ink); }

.ck__box .btn{ grid-column:2; align-self:center; white-space:nowrap; padding-left:20px; padding-right:20px; }

@media (max-width:600px){
  .ck{ right:10px; left:10px; bottom:10px; width:auto; }
  .ck__box{ grid-template-columns:1fr; gap:12px; padding:14px; }
  .ck__text{ padding-right:22px; }
  .ck__box .btn{ grid-column:1; width:100%; }
}

/* =========================================================
   ВОШЕДШИЙ ПОЛЬЗОВАТЕЛЬ В ШАПКЕ
   Гостю — кнопки входа и регистрации. Вошедшему — аватарка с
   именем, по нажатию открывается меню. Переключает скрипт
   атрибутом hidden, здесь только вид.
   ========================================================= */
.header__user {
  position: relative;
}

.header__user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.header__user-btn:hover,
.header__user.is-open .header__user-btn {
  background: var(--cream);
}

/* Кружок с аватаркой. Пока фото нет — значок человека */
.header__ava {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--clay);
  color: var(--white);
  overflow: hidden;
}
.header__ava .ico { width: 18px; height: 18px; }
.header__ava--photo { background: var(--cream); }
.header__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header__name {
  font-weight: 600;
  font-size: 15px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__chev {
  opacity: .5;
  transition: transform .2s var(--ease);
}
.header__user.is-open .header__chev { transform: rotate(180deg); }

/* Меню выравниваем по правому краю: оно у края экрана,
   и по левому краю уехало бы за границу */
.header__user .drop {
  left: auto;
  right: 0;
  min-width: 210px;
}

.drop__link--btn {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* На узких экранах имя убираем: остаётся аватарка,
   иначе шапка не помещается */
@media (max-width: 560px) {
  .header__name, .header__chev { display: none; }
  .header__user-btn { padding: 4px; }
}

/* ===== СЛОЙ 2: МЯГКАЯ ГЛУБИНА, ВОЗДУХ, ТИПОГРАФИКА ===== */

/* =========================================================
   СЛОЙ 2 — «ДОРОЖЕ И СВЕЖЕЕ»
   Файл подключается последним на страницах сайта, поэтому
   переопределения лежат здесь, а не в base.css (он общий
   с админкой и кабинетами) и не в середине этого файла.

   Правило, на котором уже обжигались: при равной специфичности
   внутри одного файла побеждает ПОЗДНЕЕ правило. Всё, что ниже,
   идёт после ранних блоков темы — значит эти правила и выигрывают.
   ========================================================= */

/* ---------------------------------------------------------
   1. ТОКЕНЫ
   Ничего брендового не трогаем: цвета, шрифты и ширина контента
   прежние. Меняются только радиусы, тени и служебные подложки.
   --------------------------------------------------------- */
:root{
  /* Радиусы: карточки стали крупнее и мягче */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Подложки. Три оттенка вместо одной линии: блок отделяется
     тоном фона, а не рамкой. */
  --page:         #FCFAF9;
  --surface:      #FFFFFF;
  --surface-soft: #FAF3F2;
  --surface-sunk: #F4EAE8;

  /* Линии остались только там, где это настоящий разделитель
     между строками списка. Стали ещё тише. */
  --hairline:        rgba(62,57,53,.07);
  --hairline-strong: rgba(62,57,53,.12);

  /* Тени. Три слоя: касание, мягкое рассеивание, дальний ореол.
     Дают глубину без «грязного» серого пятна под карточкой. */
  --sh-xs: 0 1px 2px rgba(92,64,62,.04), 0 1px 1px rgba(92,64,62,.03);
  --sh-sm: 0 1px 2px rgba(92,64,62,.04), 0 6px 16px -8px rgba(92,64,62,.12);
  --sh-md: 0 2px 4px rgba(92,64,62,.04), 0 18px 36px -18px rgba(92,64,62,.20);
  --sh-lg: 0 4px 10px rgba(92,64,62,.04), 0 40px 80px -34px rgba(92,64,62,.28);

  /* Тень покоя карточки и тень подъёма — держим их отдельными
     токенами, чтобы состояние читалось одинаково во всех сетках */
  --sh-rest:  0 1px 2px rgba(92,64,62,.04), 0 10px 24px -14px rgba(92,64,62,.16);
  --sh-lift:  0 2px 6px rgba(92,64,62,.05), 0 26px 52px -22px rgba(92,64,62,.24);
  --sh-float: 0 6px 14px rgba(92,64,62,.06), 0 44px 84px -36px rgba(92,64,62,.30);
  --ring-soft: 0 0 0 1px rgba(92,64,62,.06);

  /* Фокус: только нейтральное кольцо. Цветных обводок нет нигде. */
  --focus: 0 0 0 3px rgba(62,57,53,.14);
  --focus-line: rgba(62,57,53,.26);
}

body{
  background:var(--page);
  font-size:16px;
  line-height:1.62;
  letter-spacing:-.002em;
}

/* ---------------------------------------------------------
   2. ТИПОГРАФИКА
   Крупнее заголовки, плотнее интерлиньяж, спокойнее мелкий текст.
   Правило идет после ранней установки text-wrap выше, поэтому
   балансировку строк здесь повторяем — иначе она бы отключилась.
   --------------------------------------------------------- */
h1,h2,h3,h4,.hero__title,.section__title,.pagehead__title,.cta__title,.final__title{
  text-wrap:balance;
  letter-spacing:-.028em;
}
p,li,.section__lead,.pagehead__lead,.hero__sub{
  text-wrap:pretty;
}

.hero__title{
  font-size:clamp(38px, 4.9vw, 62px);
  line-height:1.03;
  letter-spacing:-.032em;
}
.section__title{
  font-size:clamp(29px, 3.4vw, 44px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.pagehead__title{
  font-size:clamp(32px, 3.9vw, 50px);
  line-height:1.06;
  letter-spacing:-.032em;
}
.cta__title{ font-size:clamp(30px,3.6vw,42px); line-height:1.1; }
.final__title{ font-size:clamp(28px,3.2vw,38px); line-height:1.12; }
.block-title{ font-size:23px; letter-spacing:-.02em; }

.section__lead{
  margin-top:16px;
  font-size:17px;
  line-height:1.64;
  max-width:60ch;
}
.pagehead__lead{ font-size:17px; line-height:1.62; max-width:64ch; }
.hero__sub{ font-size:17.5px; line-height:1.6; max-width:50ch; }

.section__eyebrow{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  margin-bottom:14px;
}

/* ---------------------------------------------------------
   3. ВОЗДУХ
   Отступы между секциями щедрее, заголовок дальше от содержимого.
   --------------------------------------------------------- */
.section{ padding:88px 0; }
.section__head{ margin-bottom:56px; }
.section__head--row{ gap:40px; }

/* ---------------------------------------------------------
   4. РАМКИ → ТЕНИ
   Убираем рамки у карточек и панелей. Чтобы размеры блоков
   не «поехали», рамка не исчезает, а становится прозрачной:
   место в разметке остаётся, линия не рисуется.
   --------------------------------------------------------- */
.card,
.step,
.master,
.review,
.feature,
.plan,
.contact-card,
.filters,
.booking,
.profile__hero,
.form-card,
.search,
.results__search,
.select-mini,
.filters-toggle,
.empty-state,
.pagehead__stat,
.pill,
.art__card{
  border-color:transparent;
}

/* Тень покоя: очень мягкая, карточка будто лежит на фоне */
.card,
.step,
.master,
.review,
.feature,
.plan,
.contact-card{
  box-shadow:var(--sh-rest);
}

/* Крупные панели — чуть глубже, они держат больше содержимого */
.filters,
.booking,
.profile__hero,
.form-card{
  box-shadow:var(--sh-md);
}

/* ---------------------------------------------------------
   5. ВНУТРЕННИЕ ПОЛЯ
   Крупнее отступы внутри карточек — это и даёт ощущение
   «дорогого» интерфейса без единой новой линии.
   --------------------------------------------------------- */
.cards{ align-items:stretch; }
.cards{ align-items:stretch; }
.card{ padding:30px 26px 26px; border-radius:var(--r-xl); }
.card__title{ margin-top:20px; font-size:20px; }
.card__text{ margin-top:9px; font-size:14.5px; line-height:1.6; }
.card__meta{ margin-top:22px; padding-top:18px; }
.card__icon{
  width:58px; height:58px; border-radius:19px;
  background:var(--surface-soft);
}

.step{ padding:34px 30px 36px; }
.step__title{ margin-top:22px; font-size:21px; }
.step__text{ margin-top:11px; font-size:15px; line-height:1.62; }
.step__icon{ width:58px; height:58px; border-radius:19px; }
.step__num{ top:26px; right:28px; font-size:38px; }

.review{ padding:34px 30px 28px; }
.review__text{ font-size:15px; line-height:1.7; }
.review__foot{ margin-top:24px; padding-top:20px; }

.feature{ padding:30px 26px 32px; }
.feature h3{ margin-top:20px; font-size:19px; }
.feature p{ margin-top:10px; font-size:15px; line-height:1.66; }
.feature__icon{ width:54px; height:54px; border-radius:18px; background:var(--surface-soft); }

.plan{ padding:32px 28px 34px; }

.contact-card{ padding:30px 26px; }
.contact-card p{ font-size:14px; }

.filters{ padding:26px 24px 28px; }
.booking{ padding:28px 26px 30px; }
.profile__body{ padding:24px 30px 32px; }
.profile__head{ padding:0 30px; }
.profile__badges{ padding:0 30px; }
.form-card{ padding:36px; }

.empty-state{ padding:72px 28px; border-style:solid; background:var(--surface-soft); }

/* ---------------------------------------------------------
   6. ЖИВЫЕ СОСТОЯНИЯ
   Подъём карточки при наведении — мягче и выше, тень раскрывается.
   --------------------------------------------------------- */
.card:hover,
.step:hover,
.review:hover,
.feature:hover,
.plan:hover,
.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-lift);
  border-color:transparent;
}
.master:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-lift);
  border-color:transparent;
}

/* Кнопки: подъём на 2px и более тёплая тень, без цветных рамок */
.btn--ghost{
  background:var(--surface);
  border-color:transparent;
  box-shadow:var(--sh-sm);
}
.btn--ghost:hover{
  border-color:transparent;
  box-shadow:var(--sh-md);
}
.btn--light{ border-color:transparent; }
.round-btn{ border-color:transparent; box-shadow:var(--sh-sm); }
.round-btn:hover{ border-color:transparent; box-shadow:var(--sh-lift); }

.chip{
  border-color:transparent;
  background:var(--surface);
  box-shadow:var(--sh-xs);
}
.chip:hover{
  border-color:transparent;
  background:var(--surface);
  box-shadow:var(--sh-sm);
}

/* Поля ввода: подложка вместо рамки, признак фокуса — светлый фон */
.field{ background:var(--surface-sunk); border-color:transparent; }
.field:hover{ background:#F0E5E3; }
.field:focus-within,
.field.is-open{
  background:var(--surface);
  border-color:transparent;
  box-shadow:var(--sh-xs);
}
.input__box{ background:var(--surface-sunk); border-color:transparent; }
.input__box:focus-within{
  background:var(--surface);
  border-color:transparent;
  box-shadow:var(--sh-xs);
}
.input__box--error{ border-color:#C0554F; }
.results__search{ background:var(--surface); box-shadow:var(--sh-sm); }
.results__search:focus-within{ border-color:transparent; box-shadow:var(--sh-md); }
textarea.input{ background:var(--surface-sunk); border-color:transparent; }
textarea.input:focus{ background:var(--surface); border-color:transparent; box-shadow:var(--sh-xs); }
.select-mini{ background:var(--surface); box-shadow:var(--sh-xs); }
.filters-toggle{ background:var(--surface); box-shadow:var(--sh-sm); }

.slot{ background:var(--surface-soft); border-color:transparent; }
.slot:hover{ border-color:transparent; background:var(--surface-sunk); color:var(--ink); }
.slot.is-active{ background:var(--clay); color:var(--white); }

/* ---------------------------------------------------------
   7. ГЛАВНЫЙ ЭКРАН, ШАПКА И ПОИСК
   Свечение в hero забивало правый верх: плавающая карточка
   читалась на розовом пятне. Источник собраннее и тише.
   --------------------------------------------------------- */
.hero{
  background:
    radial-gradient(660px 410px at 84% -10%, rgba(247,201,200,.62) 0%, rgba(247,201,200,0) 70%),
    radial-gradient(520px 360px at 5% 6%, rgba(245,237,236,.95) 0%, rgba(245,237,236,0) 72%),
    linear-gradient(180deg, #FDF7F6 0%, var(--page) 76%);
  padding:72px 0 0;
}
.hero__title{ margin-top:22px; }
.hero__sub{ margin-top:22px; }
.hero__art{ height:520px; }
.facts{ margin-top:34px; padding-top:26px; gap:11px; }

.header{ background:rgba(252,250,249,.78); }
.header.is-stuck{
  background:rgba(252,250,249,.9);
  border-bottom-color:transparent;
  box-shadow:0 1px 0 rgba(62,57,53,.05), 0 18px 40px -30px rgba(92,64,62,.5);
}
.nav__link{ padding:10px 15px; }
.drop{ border-color:transparent; box-shadow:var(--sh-float); background:var(--surface); }
.pill{
  border-color:transparent;
  box-shadow:var(--sh-xs);
  padding:9px 17px;
}
.pill--light{
  background:rgba(245,237,236,.14);
  border-color:transparent;
  box-shadow:none;
}
.pagehead{
  padding:44px 0 42px;
  border-bottom-color:transparent;
  background:linear-gradient(180deg, #FDF6F5 0%, var(--page) 100%);
}
.pagehead--tight{ padding:40px 0 34px; }
.pagehead__stat{
  background:var(--surface);
  border-color:transparent;
  box-shadow:var(--sh-xs);
  padding:8px 16px;
}

.search{
  border-color:transparent;
  box-shadow:var(--sh-float);
  padding:18px 20px 16px;
}
.search__row{ gap:12px; }
.search__chips{ margin-top:14px; gap:9px; }

/* ---------------------------------------------------------
   8. КАТАЛОГ И АНКЕТА МАСТЕРА
   Карточка мастера: обложка мягче, тело просторнее, разделитель
   перед ценой заменён на отступ.
   --------------------------------------------------------- */
.master{ border-radius:var(--r-xl); }
.master__cover{
  height:158px;
  background:linear-gradient(155deg,#EDC9C5 0%,#CE9491 100%);
  box-shadow:inset -1px 0 0 rgba(92,64,62,.07);
}
.master__cover--2{ background:linear-gradient(155deg,#F6DBD5 0%,#D9A9A2 100%); }
.master__cover--3{ background:linear-gradient(155deg,#E0CBC1 0%,#B99A8E 100%); }
.master__cover--4{ background:linear-gradient(155deg,#F3D4D0 0%,#CE9A98 100%); }
.master__body{ padding:50px 24px 24px; }
/* В списке каталога карточка узкая: крупная кнопка ломала строку
   с ценой на две. Кнопка остаётся крупной, но компактнее по бокам. */
.master__foot .btn{ padding-left:18px; padding-right:18px; }
.master__name{ font-size:18px; }
.master__role{ margin-top:5px; font-size:13px; }
.master__slogan{ margin-top:8px; font-size:13.5px; }
.master__rating{ margin-top:13px; }
.master__tags{ margin-top:15px; gap:6px; }
.master__tags span{ padding:6px 11px; background:var(--cream); }
.master__foot{ margin-top:18px; padding-top:0; }
.master.is-highlighted{
  box-shadow:0 0 0 2px var(--clay), var(--sh-lift);
}
.results__grid{ gap:24px; }
.results__grid--list .master__body{ padding:26px 26px 26px 22px; }
.master__rank{ background:var(--ink); }

/* Карта: убираем рамку, добавляем мягкую тень */
.vmap{ border-color:transparent; box-shadow:var(--sh-sm); background:#F2EBE9; }
.vmap__pop{ border-color:transparent; box-shadow:var(--sh-float); }

/* Разделители-строки делаем тише: они не должны читаться линией */
.filters__head{ border-bottom-color:var(--hairline); padding-bottom:18px; }
.filter-group{ border-bottom-color:var(--hairline); padding:20px 0; }
.price-row{ padding:18px 2px; border-bottom-color:var(--hairline); }
.review-item{ padding:24px 0; border-bottom-color:var(--hairline); }
.price-list{ border-top-color:var(--hairline); }
.block + .block{ margin-top:44px; padding-top:38px; border-top-color:var(--hairline); }
.faq{ border-top-color:var(--hairline); }
.faq__item{ border-bottom-color:var(--hairline); }
.faq__q{ padding:22px 4px; font-size:17.5px; }

/* ---------------------------------------------------------
   9. ТОНИРОВАННЫЕ ПОДЛОЖКИ ВМЕСТО ЛИНИЙ
   Разделение секций — оттенком фона. Полосы стали заметнее,
   но остаются в палитре заказчика.
   --------------------------------------------------------- */
.section--cream{ background:var(--cream); }
.section--dark{
  background:linear-gradient(180deg,#443E39 0%, var(--ink) 62%);
}
.safe{
  background:rgba(245,237,236,.07);
  border-color:transparent;
}
.safe:hover{
  background:rgba(245,237,236,.115);
  border-color:transparent;
  transform:translateY(-4px);
}
.safe__icon{ background:rgba(247,201,200,.18); }

/* Тёмные блоки: подложка вместо рамки — на тёмном фоне
   прозрачная рамка не читается, поэтому здесь светлый тон */
.cta{
  border-radius:34px;
  box-shadow:0 50px 100px -48px rgba(126,63,62,.75);
}
.cta__panel{
  background:rgba(255,255,255,.09);
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  padding:30px;
}
.cta-band{
  border-radius:34px;
  box-shadow:0 50px 100px -48px rgba(126,63,62,.75);
}
.final{
  background:linear-gradient(135deg, #AC5D5C 0%, var(--clay-700) 100%);
}
.footer{
  background:var(--ink);
  padding:76px 0 36px;
}
.footer__socials a{ border-color:transparent; background:rgba(245,237,236,.08); }

/* Баннер с цифрами и прочие тёмные плашки */
.band{ border-radius:var(--r-xl); background:linear-gradient(150deg,#443E39,var(--ink)); }

/* Плашка согласия на куки */
.ck__box{ border-color:transparent; box-shadow:var(--sh-float); }

/* Модалки */
.modal__box{ box-shadow:var(--sh-float); }
.modal__head{ border-bottom-color:var(--hairline); }
.auth__note{ border-radius:var(--r-md); }

/* ---------------------------------------------------------
   10. МОБИЛЬНАЯ ВЕРСИЯ
   Воздух и кегли на телефоне — отдельно: то, что хорошо
   на 1440px, на 390px выглядит раздутым.
   --------------------------------------------------------- */
@media (max-width:900px){
  .section{ padding:76px 0; }
  .section__head{ margin-bottom:40px; }
  .pagehead{ padding:32px 0 30px; }
}

@media (max-width:720px){
  .section{ padding:68px 0; }
  .section__head{ margin-bottom:34px; }
  .card{ padding:26px 22px 22px; }
  .step{ padding:28px 24px 30px; }
  .review{ padding:28px 24px 24px; }
  .feature{ padding:26px 22px 28px; }
  .plan{ padding:28px 24px 30px; }
  .contact-card{ padding:26px 22px; }
  .filters{ padding:22px 20px 24px; }
  .booking{ padding:24px 22px 26px; }
  .profile__head{ padding:0 22px; }
  .profile__badges{ padding:0 22px; }
  .profile__body{ padding:20px 22px 26px; }
  .form-card{ padding:24px 20px; }
  .master__body{ padding:46px 20px 22px; }
  .search{ padding:16px 16px 14px; }
  .cta{ border-radius:26px; }
  .cta-band{ border-radius:26px; }
  .cta__panel{ padding:24px; }
  .hero__title{ font-size:clamp(32px, 8.6vw, 44px); }
  .section__title{ font-size:clamp(26px, 6.6vw, 34px); }
  .pagehead__title{ font-size:clamp(27px, 7vw, 36px); }
  .footer{ padding:56px 0 30px; }
}

/* ---------------------------------------------------------
   11. УВАЖЕНИЕ К НАСТРОЙКАМ СИСТЕМЫ
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .card:hover, .step:hover, .review:hover, .feature:hover,
  .plan:hover, .contact-card:hover, .master:hover,
  .btn:hover, .chip:hover, .round-btn:hover, .safe:hover{ transform:none; }
}

@media (prefers-contrast: more){
  .card, .step, .master, .review, .feature, .plan, .contact-card,
  .filters, .booking, .profile__hero, .form-card, .search, .vmap{
    border-color:rgba(62,57,53,.28);
  }
}

/* ===== КОНЕЦ СЛОЯ 2 ===== */