/* Мир «Соседняя полка»: сайт стоит рядом с продуктами, которые владелец бизнеса
   уже открывает каждый день, и не требует ничего разгадывать. Крупные
   скруглённые блоки, карточка организации как главная демонстрация, ясные
   подписи, один горячий акцент на действии. Ничего декоративного: всё, что
   нарисовано, показывает продукт. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');

:root{
  /* Бумага светлая: сайт читают днём, с телефона, часто в зале или в машине */
  --list:#F2F3F7;
  --plashka:#FFFFFF;
  --chernila:#21201F;
  --tihiy:#6C6B6A;
  --granica:#E3E4EA;

  /* Тёмная плита несёт подтверждённые: один тёмный объект на странице */
  --gluboko:#21201F;
  --gluboko-2:#161514;
  --na-glubokom:#F5F4F2;

  /* Горячий цвет ровно один и тратится только на действие. Оттенок выбран по
     замеру, а не на глаз: белый на нём даёт 4.9:1, светлее уже не проходит. */
  --akcent:#D6300F;
  --akcent-temno:#B32607;
  --akcent-svetlo:#FF8E70;   /* для текста на тёмном подвале */
  /* Звёзды рейтинга остаются янтарными: так они выглядят в самом 2ГИС */
  --zoloto:#FFB800;
  --zoloto-temno:#8A6200;    /* текстовый тон: 4.9:1 на золотой подложке */
  /* Зелёный делится надвое: заливки и полосы одним тоном, текст другим -
     светлый зелёный на светло-зелёной подложке читается на 3:1 и проваливает
     мелкий кегль метки «Отзыв подтверждён». */
  --rost:#15A04A;
  --rost-tekst:#0B7734;
  --rost-fon:#E6F6EC;
  --alarm:#C42A30;
  --alarm-fon:#FCEDED;

  --r:18px; --r-sm:12px; --r-lg:28px;
  --s1:4px; --s2:8px; --s3:14px; --s4:20px; --s5:32px; --s6:52px; --s7:76px; --s8:104px;
  --bystro:150ms; --plavno:340ms;
  --shrift:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --displey:var(--shrift);
  --ten:0 1px 2px rgba(33,32,31,.05), 0 10px 26px -16px rgba(33,32,31,.22);
  --ten-vyshe:0 2px 6px rgba(33,32,31,.07), 0 26px 52px -24px rgba(33,32,31,.32);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--plashka);color:var(--chernila);font:16px/1.55 var(--shrift);
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--displey);font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.12}
h1{font-size:clamp(32px,4.4vw,52px)}
h2{font-size:clamp(24px,3vw,36px)}
h3{font-size:18px;letter-spacing:-.018em;font-weight:600}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--akcent);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.polosa{max-width:1200px;margin:0 auto;padding:0 var(--s4)}
.uzko{max-width:560px}

/* ── Шапка ───────────────────────────────────────────────────────────────── */
.shapka{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--granica)}
.shapka .polosa{display:flex;align-items:center;gap:var(--s4);height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--displey);
  font-weight:700;font-size:18px;letter-spacing:-.025em}
.logo .znak{width:26px;height:26px;border-radius:8px;background:var(--akcent);
  display:grid;place-items:center;color:#fff;flex:0 0 auto}
.shapka nav{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.shapka nav a{text-decoration:none;color:var(--tihiy);padding:9px 12px;border-radius:10px;
  font-size:15px;transition:color var(--bystro),background var(--bystro)}
.shapka nav a:hover{color:var(--chernila);background:var(--list)}
.shapka nav a[aria-current]{color:var(--chernila);font-weight:600}
.shapka nav a.knopka{color:#fff;white-space:nowrap}
.shapka nav a.knopka:hover{color:#fff;background:var(--akcent-temno)}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.knopka{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:12px;padding:14px 24px;background:var(--akcent);color:#fff;
  font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;min-height:52px;
  transition:background var(--bystro),transform var(--bystro)}
.knopka:hover{background:var(--akcent-temno);transform:translateY(-1px)}
.knopka:active{transform:translateY(0)}
.knopka:disabled{opacity:.55;cursor:default;transform:none}
/* Тихая кнопка живёт и на белом, и на сером блоке, поэтому держится не
   заливкой, а собственной рамкой: на светло-сером герое заливка совпадала с
   подложкой и кнопка переставала читаться. */
.knopka.tihaya{background:var(--plashka);color:var(--chernila);
  box-shadow:inset 0 0 0 1px var(--granica)}
.knopka.tihaya:hover{background:var(--list);box-shadow:inset 0 0 0 1px var(--tihiy)}
.knopka.na-temnom{background:var(--akcent);color:#fff}
.knopka.prizrak{background:transparent;color:var(--chernila);box-shadow:inset 0 0 0 1.5px var(--granica)}
.knopka.prizrak:hover{background:var(--list)}
.knopka.opasnaya{background:transparent;color:var(--alarm);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--alarm) 42%,transparent)}
.knopka.malaya{padding:9px 16px;min-height:42px;font-size:14.5px;border-radius:10px}
.knopka.shirokaya{width:100%}

/* ── Карточка организации: главный компонент мира ────────────────────────── */
.kartochka{background:var(--plashka);border-radius:var(--r);box-shadow:var(--ten);
  padding:var(--s4);border:1px solid var(--granica)}
.kartochka.plotno{padding:var(--s3)}
.shapka-firmy{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap}
.shapka-firmy > *{min-width:0}
.firma-imya{font-family:var(--displey);font-weight:600;font-size:17px;letter-spacing:-.018em}
.rubrika{color:var(--tihiy);font-size:13.5px}
.reyting{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;
  margin-left:auto;flex:0 0 auto}
.reyting b{font-family:var(--displey);font-size:30px;line-height:1;letter-spacing:-.03em;
  transition:color var(--plavno)}
.zvyozdy{display:inline-flex;gap:2px;color:var(--zoloto);flex:0 0 auto}
.zvyozdy svg{width:15px;height:15px;min-width:15px;flex:0 0 auto;fill:currentColor}
.zvyozdy svg.polaya{fill:none;stroke:currentColor;stroke-width:1.8;opacity:.34}

.otzyv-stroka{display:flex;gap:11px;padding:var(--s3) 0;
  border-top:1px solid var(--granica);align-items:flex-start;flex-wrap:wrap}
.otzyv-stroka .avatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:var(--list);display:grid;place-items:center;font-weight:600;font-size:13px;color:var(--tihiy)}
.otzyv-stroka .telo{flex:1;min-width:0}
a.otzyv-stroka{text-decoration:none;color:inherit;transition:background var(--bystro)}
a.otzyv-stroka:hover{background:var(--list)}
.otzyv-stroka .imya{font-weight:600;font-size:13.5px}
.otzyv-stroka .tekst{font-size:13.5px;color:var(--tihiy);margin-top:2px}

/* Отметка подтверждения. В 2ГИС она подписана «Отзыв подтверждён», поэтому и
   здесь пишем ровно так: клиент должен узнать её в своей карточке. */
.byl-zdes{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  color:var(--rost-tekst);background:var(--rost-fon);border-radius:8px;padding:4px 9px;
  white-space:nowrap;flex:0 0 auto;align-self:center;line-height:1.4}
.byl-zdes svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.8}
.metka{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;
  padding:4px 9px;border-radius:8px;background:var(--list);color:var(--tihiy);
  flex:0 0 auto;align-self:center;white-space:nowrap;line-height:1.4}
.metka.rost{background:var(--rost-fon);color:var(--rost-tekst)}
.metka.zhdyot{background:color-mix(in srgb,var(--zoloto) 20%,transparent);color:var(--zoloto-temno)}
.metka.beda{background:var(--alarm-fon);color:var(--alarm)}

/* ── Герой: крупный светлый блок, а не полноэкранная заливка ─────────────── */
.geroy{padding:var(--s5) 0 0}
.geroy-korob{background:var(--list);border-radius:var(--r-lg);padding:var(--s6)}
.geroy-setka{display:grid;grid-template-columns:1fr minmax(320px,400px);gap:var(--s6);
  align-items:start}
.geroy-setka > *{min-width:0;max-width:100%}
.geroy .lid{font-size:18px;color:var(--tihiy);margin-top:var(--s4);max-width:44ch}
.geroy .deystviya{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.geroy-podpis{margin-top:var(--s4);font-size:14px;color:var(--tihiy)}
.geroy-podpis b{color:var(--chernila);font-weight:600}

/* Демонстрация «было / стало»: одна карточка в двух состояниях. Переключатель
   именован прямо, потому что доказательство здесь и есть контраст. */
.demo{background:var(--plashka);border-radius:var(--r);padding:var(--s4);
  box-shadow:0 10px 32px -16px rgba(33,32,31,.3);max-width:100%;overflow:hidden}
.demo .perekl{display:flex;gap:4px;background:var(--list);border-radius:12px;padding:4px;
  margin-bottom:var(--s4)}
.demo .perekl button{flex:1;border:0;background:transparent;border-radius:9px;padding:10px 6px;
  font-size:14px;font-weight:600;color:var(--tihiy);cursor:pointer;min-width:0;
  transition:background var(--bystro),color var(--bystro),box-shadow var(--bystro)}
.demo .perekl button[aria-pressed="true"]{background:var(--plashka);color:var(--chernila);
  box-shadow:var(--ten)}
.demo .cifra-reytinga{font-family:var(--displey);font-size:34px}
.demo .polosa-rosta{height:7px;border-radius:999px;background:var(--list);overflow:hidden;
  margin-top:var(--s3)}
.demo .polosa-rosta i{display:block;height:100%;border-radius:999px;background:var(--rost);
  transform-origin:left;transition:transform var(--plavno) cubic-bezier(.2,.7,.3,1)}
/* Лента демонстрации фиксирована по высоте: без этого «Было» и «Стало» дают
   разный рост карточки, правая колонка меняет размер, а текст слева прыгает. */
.demo-lenta{margin-top:var(--s2);min-height:252px}
/* Строки перерисовываются целиком при каждой смене состояния, поэтому анимация
   запускается заново сама. Вторая идёт с задержкой: одновременный выезд двух
   строк читается как подёргивание, разнесённый - как смена кадра. */
.demo-lenta .otzyv-stroka{animation:vsplyt .42s cubic-bezier(.2,.7,.3,1) both}
.demo-lenta .otzyv-stroka:nth-child(2){animation-delay:.07s}
@keyframes vsplyt{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.demo .cifra-reytinga{transition:color var(--plavno)}
.demo #podpis-otzyvov{transition:opacity var(--bystro)}
.demo-lenta .otzyv-stroka:first-child{border-top:1px solid var(--granica)}

/* ── Секции ──────────────────────────────────────────────────────────────── */
section{padding:var(--s7) 0}
section.tesno{padding:var(--s6) 0}
.zagolovok-sekcii{max-width:46ch;margin-bottom:var(--s5)}
.zagolovok-sekcii p{color:var(--tihiy);margin-top:var(--s3);font-size:17px}
.setka{display:grid;gap:var(--s3)}
.setka.tri{grid-template-columns:repeat(3,1fr)}
.setka.dva{grid-template-columns:repeat(2,1fr)}
.shag{display:flex;gap:var(--s3);align-items:flex-start}
.shag .nomer{width:32px;height:32px;border-radius:10px;background:var(--chernila);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:14px;flex:0 0 auto}

/* Боли и ниши */
.bolki{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.bolki > *{min-width:0;background:var(--list);border-radius:var(--r);padding:var(--s4)}
.bolki p{margin-top:6px;font-size:14.5px;color:var(--tihiy)}
.nishi{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.nishi span{background:var(--list);border-radius:999px;padding:8px 15px;font-size:14.5px;color:var(--tihiy)}

/* ── Сравнение: строки-карточки, а не бухгалтерская сетка ────────────────── */
.sravnenie{background:var(--list);border-radius:var(--r);padding:var(--s2)}
/* В серой секции обёртка совпала бы с фоном: строки ложатся прямо на него. */
#raznica .sravnenie{background:transparent;padding:0}
#raznica .sr-shapka > div{padding-left:var(--s4);padding-right:var(--s4)}
.sr-shapka,.sr-stroka{display:grid;grid-template-columns:1fr 132px 188px;align-items:center}
.sr-shapka > div{padding:11px var(--s3);font-size:13.5px;font-weight:600;color:var(--tihiy);text-align:center}
.sr-shapka > div:first-child{text-align:left}
.sr-shapka > div:last-child{color:var(--chernila)}
.sr-stroka{background:var(--plashka);border-radius:var(--r-sm);margin-bottom:4px}
.sr-stroka:last-child{margin-bottom:0}
.sr-stroka > div{padding:15px var(--s3);display:flex;align-items:center;justify-content:center;
  gap:9px;flex-wrap:wrap}
.sr-stroka > div:first-child{justify-content:flex-start;font-weight:500;font-size:15.5px}
.znak-da,.znak-net{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.znak-da{background:var(--rost-fon)}
.znak-net{background:var(--list)}
.znak-da svg,.znak-net svg{width:15px;height:15px;fill:none;stroke-width:2.8;stroke-linecap:round}
.znak-da svg{stroke:var(--rost-tekst)}
.znak-net svg{stroke:#6C6B6A}
.ogovorka{font-size:12.5px;color:var(--tihiy)}
.tolko-ekrannomu{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Вилка проверки: два честных исхода ──────────────────────────────────── */
.vilka{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.vilka > div{border-radius:var(--r);padding:var(--s5);border:1px solid var(--granica)}
.vilka .horosho{background:var(--rost-fon);border-color:transparent}
.vilka .est-ogranichenie{background:var(--list);border-color:transparent}
.vilka h3{margin-bottom:var(--s2)}
.vilka p{color:var(--tihiy);font-size:15px}
.vilka .vyvod{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  border-radius:8px;padding:4px 10px;margin-bottom:var(--s3)}
.vilka .horosho .vyvod{background:rgba(11,119,52,.14);color:#0A6B2F}
.vilka .est-ogranichenie .vyvod{background:var(--granica);color:#4E4D4C}

/* ── Цены ────────────────────────────────────────────────────────────────── */
.cena-plita{background:var(--list);border-radius:var(--r);padding:var(--s5)}
.cena-plita.glavnaya{background:var(--gluboko);color:var(--na-glubokom)}
.cena-plita.glavnaya .tihiy{color:color-mix(in srgb,var(--na-glubokom) 70%,transparent)}
/* На тёмной плите светлые тона меняются местами с тёмными: тихий серый и
   текстовое золото здесь читаются на 3:1 и ниже. */
.cena-plita.glavnaya .metka.zhdyot{background:color-mix(in srgb,var(--zoloto) 20%,transparent);
  color:#FFC94D}
.cena-plita.glavnaya .spisok-plyusov{color:#C9C7C4}
.cena{font-family:var(--displey);font-size:40px;line-height:1;letter-spacing:-.03em;margin-top:var(--s2)}
.cena span{font-size:15px;font-family:var(--shrift);color:var(--tihiy);letter-spacing:0;font-weight:400}
.cena-plita.glavnaya .cena span{color:color-mix(in srgb,var(--na-glubokom) 70%,transparent)}
.spisok-plyusov{list-style:none;padding:0;margin:var(--s4) 0 0;display:flex;flex-direction:column;
  gap:10px;font-size:15px;color:var(--tihiy)}
.spisok-plyusov li{display:flex;gap:10px;align-items:flex-start}
.spisok-plyusov svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;stroke:var(--rost-tekst);
  fill:none;stroke-width:2.6}
.cena-plita.glavnaya .spisok-plyusov svg{stroke:#5FD3A8}

/* ── Заявка ──────────────────────────────────────────────────────────────── */
.zayavka{background:var(--list);border-radius:var(--r-lg);padding:var(--s6);
  display:grid;grid-template-columns:1fr minmax(300px,420px);gap:var(--s6);align-items:center}
.zayavka > *{min-width:0}
.zayavka-slovo p{margin-top:var(--s3);color:var(--tihiy)}
.zayavka.krupno{background:var(--gluboko);color:var(--na-glubokom)}
.zayavka.krupno .tihiy{color:color-mix(in srgb,var(--na-glubokom) 72%,transparent)}
.zayavka.krupno label,.zayavka.krupno legend{color:color-mix(in srgb,var(--na-glubokom) 78%,transparent)}
/* На тёмной плите выбор канала инвертируется. На светлом фоне выбранный
   красится в цвет чернил, но здесь чернила и есть фон плиты: выбранная кнопка
   сливалась с подложкой и пропадала совсем. */
.zayavka.krupno .vybor-kanala span{background:rgba(255,255,255,.11);color:#D2D0CD}
.zayavka.krupno .vybor-kanala input:checked + span{background:var(--plashka);
  color:var(--chernila);font-weight:600}
.zayavka.krupno .vybor-kanala input:focus-visible + span{outline-color:#fff}
.zayavka .pole:last-of-type{margin-bottom:var(--s4)}
.vybor-kanala{border:0;padding:0;margin-inline:0}
.vybor-kanala legend{padding:0;font-size:14px;color:var(--tihiy);margin-bottom:6px}
.vybor-kanala .perekl{display:flex;gap:6px}
.vybor-kanala label{flex:1;margin:0;min-width:0}
.vybor-kanala input{position:absolute;opacity:0;width:0;height:0}
.vybor-kanala span{display:block;text-align:center;border-radius:12px;padding:12px 6px;
  font-size:14.5px;font-weight:500;color:var(--tihiy);cursor:pointer;background:var(--plashka);
  transition:background var(--bystro),color var(--bystro)}
.vybor-kanala input:checked + span{background:var(--chernila);color:var(--plashka);font-weight:600}
.vybor-kanala input:focus-visible + span{outline:2.5px solid var(--akcent);outline-offset:2px}
.lovushka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Формы ───────────────────────────────────────────────────────────────── */
label{display:block;font-size:14px;color:var(--tihiy);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--plashka);border:1px solid transparent;
  border-radius:12px;padding:13px 15px;min-height:52px;
  transition:border-color var(--bystro),box-shadow var(--bystro)}
input:focus,select:focus,textarea:focus{border-color:var(--akcent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akcent) 14%,transparent);outline:none}
textarea{min-height:120px;resize:vertical}
.pole{margin-bottom:var(--s3)}
.oshibka{background:var(--alarm-fon);color:var(--alarm);
  border-radius:12px;padding:12px 15px;font-size:14px;margin-bottom:var(--s4)}
.udachno{background:var(--rost-fon);color:var(--rost-tekst);
  border-radius:12px;padding:12px 15px;font-size:14px;margin-bottom:var(--s4)}

/* ── Плашка связи справа снизу ───────────────────────────────────────────── */
/* Появляется, когда человек уже что-то прочитал: до этого она перебивает
   первый экран и мешает единственному действию страницы. */
.svyaz{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--plavno),transform var(--plavno)}
.svyaz.vidna{opacity:1;transform:none;pointer-events:auto}
.svyaz-knopka{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  background:var(--chernila);color:#fff;border-radius:999px;padding:13px 19px;
  font:600 15px var(--shrift);box-shadow:0 8px 26px -10px rgba(33,32,31,.6);
  transition:transform var(--bystro),background var(--bystro)}
.svyaz-knopka:hover{transform:translateY(-1px);background:#000}
.svyaz-knopka svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.svyaz-okno{background:var(--plashka);border-radius:var(--r);box-shadow:var(--ten-vyshe);
  border:1px solid var(--granica);padding:var(--s4);width:min(310px,calc(100vw - 40px));
  display:none}
.svyaz-okno.raskryto{display:block}
.svyaz-okno h3{font-size:16px}
.svyaz-okno p{font-size:13.5px;color:var(--tihiy);margin-top:6px}
.svyaz-spisok{display:grid;gap:6px;margin-top:var(--s3)}
.svyaz-spisok a{display:flex;align-items:center;gap:11px;text-decoration:none;
  padding:11px 12px;border-radius:12px;background:var(--list);font-size:14.5px;font-weight:500;
  transition:background var(--bystro)}
.svyaz-spisok a:hover{background:var(--granica)}
.svyaz-spisok i{width:30px;height:30px;border-radius:9px;background:var(--plashka);flex:0 0 auto;
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:var(--tihiy)}
.svyaz-zakryt{position:absolute;top:10px;right:10px;border:0;background:transparent;cursor:pointer;
  color:var(--tihiy);padding:5px;line-height:0;border-radius:8px}
.svyaz-zakryt:hover{background:var(--list)}
.svyaz-zakryt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ── Кабинет ─────────────────────────────────────────────────────────────── */
.kabinet{display:grid;grid-template-columns:232px 1fr;gap:var(--s5);
  padding:var(--s6) 0 var(--s8)}
.bok{display:flex;flex-direction:column;gap:2px;position:sticky;top:88px;align-self:start}
.bok a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  text-decoration:none;color:var(--tihiy);font-size:15px;min-height:46px;
  transition:background var(--bystro),color var(--bystro)}
.bok a:hover{background:var(--list);color:var(--chernila)}
.bok a[aria-current]{background:var(--chernila);color:var(--na-glubokom);font-weight:600}
.bok a[aria-current] svg{color:var(--akcent)}
.bok svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;flex:0 0 auto}
.bok .schyot{margin-left:auto;font-size:12px;font-weight:700;background:var(--akcent);
  color:#fff;border-radius:999px;padding:1px 8px}

.plitki{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3)}
.plitka{background:var(--plashka);border:1px solid var(--granica);border-radius:var(--r);
  padding:var(--s4);box-shadow:var(--ten)}
.plitka .podpis{font-size:13px;color:var(--tihiy)}
.plitka .znachenie{font-family:var(--displey);font-size:30px;line-height:1.1;margin-top:4px;
  letter-spacing:-.03em}

.ryad{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.tihiy{color:var(--tihiy)}
.mel{font-size:14px}
.zag-bloka{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tihiy);margin:var(--s6) 0 var(--s3)}
.pusto{background:var(--list);border-radius:var(--r);
  padding:var(--s6);text-align:center;color:var(--tihiy)}

/* ── Подвал ──────────────────────────────────────────────────────────────── */
footer{background:var(--gluboko-2);color:color-mix(in srgb,var(--na-glubokom) 72%,transparent);
  padding:var(--s7) 0;font-size:14px;margin-top:var(--s8)}
footer .polosa{display:flex;gap:var(--s6);flex-wrap:wrap}
footer a{color:color-mix(in srgb,var(--na-glubokom) 88%,transparent);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .kolonka{display:flex;flex-direction:column;gap:9px}
footer h4{margin:0 0 4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--akcent-svetlo);font-weight:600}

@media (max-width:900px){
  .geroy{padding-top:var(--s3)}
  .geroy-korob{padding:var(--s5);border-radius:22px}
  .geroy-setka{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .setka > *{min-width:0}
  .shapka-firmy{flex-wrap:wrap}
  .shapka-firmy > div:first-child{flex:1 1 100%}
  .reyting{width:100%;margin-left:0;align-items:flex-start;flex-direction:row;
    align-items:baseline;gap:10px}
  .otzyv-stroka .telo{flex:1 1 calc(100% - 45px)}
  .otzyv-stroka .metka,
  .otzyv-stroka .byl-zdes{margin-left:45px}
  .geroy .deystviya .knopka{flex:1 1 100%}
  .setka.tri,.setka.dva,.bolki,.vilka{grid-template-columns:1fr}
  .zayavka{grid-template-columns:1fr;padding:var(--s5);border-radius:22px;gap:var(--s5)}
  /* «Подтверждённый» это одно слово в 114 точек: колонка под него шире, чем
     под «Обычный», и заголовкам разрешён перенос, иначе шапка вылезает. */
  .sr-shapka,.sr-stroka{grid-template-columns:1fr 62px 116px}
  .sr-stroka > div{padding:13px 7px;font-size:14px}
  .sr-stroka > div:first-child{font-size:14.5px}
  .sr-shapka > div{font-size:12px;padding:10px 7px;hyphens:auto;overflow-wrap:break-word;
    line-height:1.25}
  .kabinet{grid-template-columns:1fr;padding-top:var(--s4)}
  .bok{position:static;flex-direction:row;overflow-x:auto;padding-bottom:var(--s2)}
  .bok a{white-space:nowrap}
  .shapka nav a.spryatat{display:none}
  section{padding:var(--s6) 0}
  .svyaz{right:14px;bottom:14px}
}

/* Согласия при регистрации: две отдельные галки, как требует закон. */
.soglasiya{display:grid;gap:var(--s3);margin:var(--s4) 0}
.galka{display:flex;gap:10px;align-items:flex-start;font-size:14px;
  color:var(--tihiy);line-height:1.45;cursor:pointer}
.galka input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;min-height:0;accent-color:var(--chernila)}
.galka a{color:var(--chernila)}

/* Быстрые сроки под полем «за сколько дней». */
.sroki{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sroki button{background:var(--list);border:0;
  border-radius:999px;padding:7px 13px;font-size:13px;color:var(--tihiy);
  cursor:pointer;transition:background var(--bystro),color var(--bystro)}
.sroki button:hover{background:var(--granica);color:var(--chernila)}

/* Выбор из двух путей (источник текстов). */
.vybor{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.variant{display:flex;gap:10px;align-items:flex-start;padding:14px;cursor:pointer;
  border:1px solid var(--granica);border-radius:var(--r-sm);background:var(--plashka);
  transition:border-color var(--bystro),background var(--bystro)}
.variant input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;min-height:0;accent-color:var(--chernila)}
.variant span{display:grid;gap:2px;min-width:0}
.variant b{font-size:14px}
.variant:has(input:checked){border-color:var(--chernila);background:var(--list)}
@media (max-width:900px){.vybor{grid-template-columns:1fr}}

/* Тексты в плане: клиент читает их до запуска. */
.tekst-plana{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--granica)}
.tekst-plana:first-child{border-top:0}
.nomer-teksta{width:24px;height:24px;flex:0 0 auto;border-radius:50%;
  background:var(--list);display:grid;place-items:center;font-size:12px;
  font-weight:600;color:var(--tihiy);margin-top:1px}
.telo-teksta{flex:1;min-width:0;font-size:14px;line-height:1.5}
.tekst-plana.zhdyot-tekst .telo-teksta{color:var(--tihiy);font-style:italic}
.tekst-plana .knopka{flex:0 0 auto}
.tekst-plana .ryad-knopok{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tekst-plana.pravka .telo-teksta textarea{min-height:96px}

/* Убрать карточку: действие редкое и необратимое. */
.opasnaya-stroka{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  justify-content:space-between;margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--granica)}
.opasnaya-stroka .mel{max-width:52ch}
.opasnaya-stroka button{background:none;border:0;padding:6px 0;cursor:pointer;
  font-size:14px;color:var(--tihiy);text-decoration:underline;
  text-underline-offset:3px;transition:color var(--bystro)}
.opasnaya-stroka button:hover{color:var(--alarm)}

/* Проверка карточки идёт: живая строка вместо немой кнопки. */
.idyot-proverka{display:flex;gap:10px;align-items:center;margin-top:var(--s3);
  padding:10px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--zoloto) 16%,transparent)}
.idyot-proverka .tochka{width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  background:var(--zoloto-temno);animation:pulsaciya 1.4s ease-in-out infinite}
@keyframes pulsaciya{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.idyot-proverka .tochka{animation:none}}

/* Заказ не влез в выбранный срок. */
.ne-vlezlo{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  justify-content:space-between;margin-top:var(--s4);padding:12px 14px;
  border-radius:var(--r-sm);background:var(--alarm-fon)}
.ne-vlezlo p{margin:0;color:var(--alarm);max-width:60ch}

/* ── Кому подходит: отдельная полоса, а не приписка мелким под болями ────── */
.komu-polosa{margin-top:var(--s5);background:var(--list);border-radius:var(--r);
  padding:var(--s5)}
.komu-polosa p{margin-top:6px}
.nishi span{background:var(--plashka)}

/* ── Шаги: одна линейка карточек, без вложенных плашек ───────────────────── */
.shagi{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.shag-karta{background:var(--list);border-radius:var(--r);padding:var(--s4);min-width:0}
.shag-karta .nomer{width:30px;height:30px;border-radius:9px;background:var(--chernila);
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;
  margin-bottom:var(--s3)}
.shag-karta h3{font-size:16.5px}
.shag-karta p{margin-top:7px;font-size:14.5px;color:var(--tihiy)}
.shag-karta.vydelen{background:var(--chernila);color:var(--na-glubokom)}
.shag-karta.vydelen .nomer{background:var(--akcent);color:#fff}
.shag-karta.vydelen p{color:#C9C7C4}

/* Отдельное условие под шагами: это оффер, а не пятый шаг */
.uslovie{display:flex;gap:var(--s4);align-items:flex-start;margin-top:var(--s4);
  background:var(--rost-fon);border-radius:var(--r);padding:var(--s5)}
.uslovie-znak{width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:#fff;
  display:grid;place-items:center}
.uslovie-znak svg{width:20px;height:20px;fill:none;stroke:var(--rost-tekst);
  stroke-width:3;stroke-linecap:round}
.uslovie h3{font-size:17px}
.uslovie p{margin-top:6px}

/* ── Лента отзывов 2ГИС ──────────────────────────────────────────────────── */
/* Все значения сняты с настоящей карточки (2gis.ru, вкладка отзывов): карточка
   352 с padding 0 0 16, шапка padding 16/24/10 и gap 4, аватар круглый 32 с
   белым текстом 14/18 w600, имя 14/18 w500, «N отзывов» 14/18 w400 под именем
   отдельной строкой, звёзды 16 цветом #ffb81c, дата 13/16, текст 14/18,
   «Читать целиком» #0072CE, «N посещений» 14/18 #0D0D0D, «Отзыв подтверждён»
   11/14 #22AA27 ПОД ним, «Полезно?» кнопкой 4px радиуса.
   Плашку под отметку рисовать нельзя: в 2ГИС её нет. */
.raznica-setka{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:stretch}
.raznica-setka > *{min-width:0}
.raznica-prava{display:flex;flex-direction:column}
.raznica-prava .sravnenie{flex:1}

.gis-okno{background:#fff;border-radius:var(--r);box-shadow:var(--ten);
  display:flex;flex-direction:column;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#000}
.gis-shapka{display:flex;gap:16px;align-items:center;padding:20px 24px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);flex-wrap:wrap}
.gis-ocenka{flex:0 0 auto}
.gis-ocenka b{display:block;font-size:34px;line-height:1;font-weight:600;letter-spacing:-.02em}
.gis-zvyozdy{display:inline-flex;gap:0;flex:0 0 auto}
.gis-zvyozdy svg{width:16px;height:16px;fill:#ffb81c;display:block}
.gis-shapka .gis-zvyozdy{margin-top:4px}
.gis-vsego{font-size:14px;line-height:18px;font-weight:500}
.gis-pravilo{font-size:13px;line-height:17px;color:rgba(38,38,38,.55);margin-top:4px}
.gis-pravilo b{color:#22AA27;font-weight:400}

.gis-otzyv{padding:0 0 16px;border-bottom:1px solid rgba(0,0,0,.08)}
.gis-otzyv:last-of-type{border-bottom:0}
/* Шапка отзыва: аватар, имя с числом отзывов столбиком, «…» справа */
.gis-verh{display:flex;gap:4px;align-items:flex-start;padding:16px 24px 10px}
.gis-avatar{width:32px;height:32px;flex:0 0 auto;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;line-height:18px;
  font-weight:600}
.gis-kto{display:flex;flex-direction:column;flex:1;min-width:0;margin-left:8px}
.gis-imya{font-size:14px;line-height:18px;font-weight:500;color:#000;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gis-skolko{font-size:14px;line-height:18px;font-weight:400;color:rgba(38,38,38,.55)}
.gis-tochki{flex:0 0 auto;border:0;background:none;padding:0;cursor:pointer;line-height:0}
.gis-tochki svg{width:24px;height:24px;fill:#000}

.gis-telo{padding:0 24px}
.gis-stroka-ocenki{display:flex;gap:8px;align-items:center}
.gis-data{font-size:13px;line-height:16px;color:rgba(38,38,38,.55)}
.gis-tekst{font-size:14px;line-height:18px;color:#000;margin-top:8px;
  display:flex;flex-direction:column;gap:4px}
.gis-celikom{color:#0072CE;cursor:pointer}

/* Блок визита: «клякса» с флажком, под ней два ряда текста */
.gis-vizit{display:flex;gap:8px;margin-top:10px;align-items:center}
.gis-klyaksa{width:32px;height:32px;flex:0 0 auto;position:relative;display:block}
.gis-klyaksa .gis-fon{width:28px;height:28px;position:absolute;left:2px;top:2px}
.gis-klyaksa .gis-flazhok{width:16px;height:16px;position:absolute;left:8px;top:8px}
.gis-vizit-telo{display:flex;flex-direction:column;min-width:0}
.gis-poseshcheniya{font-size:14px;line-height:18px;color:#0D0D0D}
.gis-podtv{font-size:11px;line-height:14px;color:#22AA27}

.gis-polezno{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  border:1px solid rgba(0,0,0,.12);background:none;border-radius:8px;padding:5px 10px;
  font:400 14px/18px inherit;color:#262626;cursor:pointer}
.gis-polezno svg{width:18px;height:18px;fill:#8A8A8A}
.gis-podpis{margin-top:auto;padding:var(--s4) 24px 20px;font-size:13px;line-height:1.45;
  color:var(--tihiy);font-family:var(--shrift)}

/* ── Прайс: одна таблица, цена за один отзыв в обеих колонках ────────────── */
.prays{border-radius:var(--r);overflow:hidden;background:var(--list);padding:var(--s2)}
.prays-shapka,.prays-stroka{display:grid;grid-template-columns:1fr 150px 190px;align-items:center}
.prays-shapka > div{padding:12px var(--s4);font-size:13.5px;font-weight:600;color:var(--tihiy);
  text-align:center}
.prays-shapka > div:first-child{text-align:left}
.prays-shapka > div:last-child{color:var(--chernila)}
.prays-stroka{background:var(--plashka);border-radius:var(--r-sm);margin-bottom:4px}
.prays-stroka:last-child{margin-bottom:0}
.prays-stroka > div{padding:16px var(--s4);text-align:center}
.prays-stroka > div:first-child{text-align:left;font-size:15.5px;font-weight:500}
.prays-stroka b{display:block;font-size:24px;letter-spacing:-.03em;line-height:1.1}
.prays-stroka span{display:block;font-size:12px;color:var(--tihiy);margin-top:2px}
.prays-stroka > div:last-child{background:var(--rost-fon);border-radius:var(--r-sm)}
.prays-stroka > div:last-child b{color:var(--rost-tekst)}

.prays-usloviya{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  margin-top:var(--s4)}
.prays-usloviya > div{background:var(--list);border-radius:var(--r);padding:var(--s4)}
.prays-usloviya h3{font-size:16px}
.prays-usloviya p{margin-top:6px;font-size:14.5px}

/* ── Форма внутри плашки связи ───────────────────────────────────────────── */
.svyaz-okno{width:min(340px,calc(100vw - 32px))}
.svyaz-forma{margin-top:var(--s3)}
.svyaz-forma .pole{margin-bottom:10px}
.svyaz-forma input{min-height:46px;padding:11px 13px;font-size:15px;background:var(--list)}
.svyaz-forma label,.svyaz-forma legend{font-size:12.5px;margin-bottom:4px}
.svyaz-forma .vybor-kanala .perekl{gap:4px}
.svyaz-forma .vybor-kanala span{padding:9px 4px;font-size:13px;background:var(--list)}
.svyaz-forma .knopka{min-height:46px;font-size:15px}
.svyaz-pryamo{display:flex;align-items:center;gap:8px;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--granica);
  font-size:13.5px;color:var(--tihiy);text-decoration:none}
.svyaz-pryamo:hover{color:var(--chernila)}
.svyaz-pryamo svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linejoin:round}

@media (max-width:900px){
  .shagi,.prays-usloviya,.raznica-setka{grid-template-columns:1fr}
  .gis-okno{padding:var(--s4)}
  .prays-shapka,.prays-stroka{grid-template-columns:1fr 84px 108px}
  .prays-shapka > div{font-size:12px;padding:10px 8px;hyphens:auto;overflow-wrap:break-word;
    line-height:1.25}
  .prays-stroka > div{padding:13px 8px}
  .prays-stroka > div:first-child{font-size:14.5px}
  .prays-stroka b{font-size:19px}
  .demo-lenta{min-height:268px}
  .uslovie{padding:var(--s4)}
  .gis-shapka{gap:var(--s3)}
}