/* Палитра взята из логотипа: буквы АПЛ собраны из порошкового облака трёх
   цветов, а слева стоит графитовая планка-сопло. Графит держит конструкцию,
   красный работает действием, зелёный и синий живут только там, где речь
   идёт о цвете покрытия. */
:root{
  --paper:#EDF0F1;
  --surface:#FFFFFF;
  --surface-2:#F5F7F8;
  --ink:#16191B;
  --ink-2:#596267;
  --ink-3:#8B959A;      /* только декор: рамки, размерные линии */
  --muted:#606A70;      /* мелкий текст - контраст 4.9 на белом */
  --line:#D5DBDE;
  --line-2:#E6EAEC;

  --red:#D8362B;
  --red-dark:#B72A21;
  --green:#4CA83A;
  --blue:#2F60D8;

  --ok:#2C7A5B;
  --shadow:0 1px 2px rgba(18,28,33,.05), 0 14px 34px -22px rgba(18,28,33,.45);

  --wrap:1180px;
  --gap:clamp(56px, 7vw, 104px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

h1,h2,h3{
  font-family:Oswald,"Arial Narrow",sans-serif;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(29px,4.6vw,54px);line-height:1.08}
h2{font-size:clamp(24px,3.1vw,36px);line-height:1.1}
h3{font-size:18px;line-height:1.2}
p{margin:0}

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- шапка ---------- */
.top{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:20px;padding-block:11px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0}
.brand img{height:36px;width:auto;mix-blend-mode:multiply}
.brand span{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:22px;line-height:1.2;color:var(--ink-2);
  border-left:1px solid var(--line);padding-left:16px;max-width:23ch;
}
.top-right{display:flex;align-items:center;gap:16px}

/* контакты в шапке: телефон, значки мессенджеров и почта одной строкой */
.contact-row{display:flex;align-items:center;gap:13px}
.msgs{display:flex;gap:7px}
.msg{display:block;width:27px;height:27px;line-height:0}
.msg img{width:100%;height:100%;display:block}
.msg:hover{opacity:.78}
.msg:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.mail{font-size:13px;color:var(--ink-2);text-decoration:none}
.mail:hover{color:var(--red)}
.mail.lg{font-size:15px;color:var(--ink);display:block;margin:4px 0 12px}

.msg-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.msg-btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--line);border-radius:2px;padding:7px 12px 7px 9px;
  font-size:13.5px;font-weight:500;color:var(--ink);background:var(--surface-2);
}
.msg-btn:hover{border-color:var(--red);color:var(--red)}
.msg-btn img{width:19px;height:19px;display:block}

.order-alt{margin-top:10px;font-size:14px;color:rgba(255,255,255,.72)}
.order .order-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.order .order-alt a:hover{color:var(--red)}
.tel{
  font-family:Oswald,sans-serif;font-weight:500;font-size:19px;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;
}
.tel:hover{color:var(--red)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:2px;border:1px solid transparent;
  background:var(--red);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--red-dark)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- герой ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line);position:relative;overflow:hidden;padding:0}
#spray{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.hero-in{
  position:relative;
  display:grid;gap:clamp(30px,4vw,56px);
  padding-block:clamp(38px,5.4vw,70px) clamp(34px,4.4vw,58px);
}
@media(min-width:960px){.hero-in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center}}

.hero h1{margin:14px 0 18px}
.hero .lead{color:var(--ink-2);max-width:56ch;font-size:clamp(16px,1.5vw,18px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.hero-note{font-size:13.5px;color:var(--muted);max-width:34ch}

.facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;margin-top:30px;background:var(--line-2);
  border:1px solid var(--line-2);
}
@media(min-width:900px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fact{background:var(--surface);padding:14px 16px}
.fact b{
  /* Число не переносим: «200 ×» на одной строке и «300 мм» на другой
     читается как два разных числа. */
  display:block;font-family:Oswald,sans-serif;font-weight:500;white-space:nowrap;
  font-size:clamp(20px,2.1vw,25px);line-height:1.1;
}
.fact span{font-size:12.5px;color:var(--ink-2);display:block;margin-top:3px}

/* ---- карусель цеха ---- */
.shots{
  background:var(--surface-2);border:1px solid var(--line);
  padding:14px 14px 12px;box-shadow:var(--shadow);
}
.shots-frame{position:relative;overflow:hidden;background:var(--ink);border:1px solid var(--line)}
.shots-track{display:flex;transition:transform .42s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.shots-track{transition:none}}
.shot{flex:0 0 100%;margin:0;position:relative}
.shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 10px;color:#fff;font-size:13px;font-weight:500;
  background:linear-gradient(to top, rgba(8,10,12,.78), rgba(8,10,12,0));
}
.shots-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--ink);
  font-size:20px;line-height:1;display:grid;place-items:center;
  cursor:pointer;opacity:0;transition:opacity .15s ease;
}
.shots-frame:hover .shots-nav,.shots-nav:focus-visible{opacity:1}
.shots-nav:hover{background:#fff}
.shots-nav.prev{left:8px}
.shots-nav.next{right:8px}
.shots-count{
  position:absolute;top:8px;right:8px;background:rgba(8,10,12,.62);color:#fff;
  font-size:11px;padding:3px 8px;border-radius:2px;
}
.shots-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.shots-dots button{
  width:26px;height:4px;border:0;padding:0;border-radius:2px;
  background:var(--line);cursor:pointer;
}
.shots-dots button[aria-selected="true"]{background:var(--red)}
.shots-dots button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.shots-note{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center}
.shots .spec-foot{margin-top:16px}

/* на телефоне стрелки не прячем: наведения там нет */
@media(hover:none){.shots-nav{opacity:.9}}

/* паспорт габарита */
.spec{
  background:var(--surface-2);border:1px solid var(--line);
  padding:22px 22px 18px;box-shadow:var(--shadow);
}
.spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px}
.spec-head strong{font-family:Oswald,sans-serif;font-weight:500;text-transform:uppercase;font-size:15px;letter-spacing:.03em}
.spec svg{width:100%;height:auto;display:block;overflow:hidden}

.spec-foot{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  display:grid;gap:7px;
}
.spec-row{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.spec-row span{color:var(--ink-2)}
.spec-row b{font-family:"IBM Plex Mono",monospace;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- секции ---------- */
section{padding:var(--gap) 0}
.sec-head{max-width:66ch;margin-bottom:clamp(26px,3vw,40px)}
.sec-head h2{margin:12px 0 12px}
.sec-head p{color:var(--ink-2)}

.grid-2{display:grid;gap:22px}
@media(min-width:820px){.grid-2{grid-template-columns:1fr 1fr}}

/* что красим - витрина номенклатуры плитками.
   Снимок узнаётся быстрее строки списка: снабженец ищет глазами свой профиль,
   а не читает перечисление. Поэтому картинка крупная, подпись под ней. */
/* На телефоне - две колонки: семь плиток в одну дают пять тысяч пикселей
   прокрутки, а блок здесь второстепенный. */
.tiles{display:grid;gap:10px;grid-template-columns:1fr 1fr}
/* Три колонки, а не автоподбор: позиций ровно шесть, и при четырёх колонках
   второй ряд оставался с дырой справа. 3+3 на широком, 2+2+2 на телефоне. */
@media(min-width:720px){
  .tiles{gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
}
.tile{
  margin:0;background:var(--surface);border:1px solid var(--line);
  display:grid;grid-template-rows:auto 1fr;
}
.tile img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* Снимка ещё нет - держим то же место, чтобы вёрстка не прыгала,
   когда картинки появятся. */
.tile-none{aspect-ratio:4/3;background:repeating-linear-gradient(
  135deg,var(--line-2) 0 10px,var(--surface-2) 10px 20px)}
.tile figcaption{padding:13px 14px 15px;display:grid;gap:3px;align-content:start}
.tile figcaption{padding:11px 12px 13px}
.tile b{font-size:14px;font-weight:600;line-height:1.3}
.tile span{font-size:12.5px;color:var(--ink-2);line-height:1.4}
@media(min-width:560px){
  .tile figcaption{padding:13px 14px 15px}
  .tile b{font-size:15px}
  .tile span{font-size:13px}
}

/* технология */
.steps{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
@media(min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(6,1fr)}}
.step{background:var(--surface);padding:18px 16px 20px;display:grid;gap:7px;align-content:start}
.step .num{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--red);
  letter-spacing:.1em;
}
.step b{font-size:14.5px;line-height:1.3}
.step span{font-size:13px;color:var(--ink-2);line-height:1.45}

.layers{
  background:var(--surface);border:1px solid var(--line);
  padding:22px;margin:22px auto 0;max-width:700px;
  overflow-x:auto;              /* на телефоне схему листаем, а не ужимаем до нечитаемого */
}
/* без ограничения ширины схема растягивалась на всю колонку,
   и подписи в 11 px рисовались как 20 px */
.layers svg{display:block;width:100%;min-width:540px;max-width:620px;height:auto;margin:0 auto}
.layers figcaption{
  margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted);
}

/* цвет */
.colors{display:grid;gap:22px;align-items:start}
@media(min-width:860px){.colors{grid-template-columns:minmax(0,1fr) 320px}}
.rals{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;align-content:start}
.ral{align-content:start}
.ral{background:var(--surface);border:1px solid var(--line);padding:11px 13px;display:grid;gap:9px}
.ral i{display:block;height:66px;border:1px solid rgba(0,0,0,.13)}
.ral b{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600}
.ral span{font-size:12px;color:var(--ink-2)}
.tex{background:var(--surface);border:1px solid var(--line);padding:20px;display:grid;gap:12px;align-content:start}
.tex ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tex li{border:1px solid var(--line);padding:6px 12px;font-size:14px;background:var(--surface-2)}
.tex p{font-size:13.5px;color:var(--ink-2)}

/* сроки, контроль */
.cards{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
@media(min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);padding:22px 20px;display:grid;gap:9px;align-content:start}
.card b{font-family:Oswald,sans-serif;font-weight:500;text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.card p{font-size:14px;color:var(--ink-2)}
.card .big{
  font-family:Oswald,sans-serif;font-size:30px;line-height:1;font-weight:500;color:var(--ink);
}

/* ---------- конфигуратор ---------- */
.order{background:var(--ink);color:#fff;padding-bottom:clamp(40px,4vw,56px)}
.order .eyebrow{color:rgba(255,255,255,.5)}
.order h2{color:#fff}
.order .sec-head p{color:rgba(255,255,255,.72)}

.form{
  background:var(--surface);color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  padding:clamp(22px,3vw,34px);
}
.fields{display:grid;gap:18px 26px;align-items:start}
@media(min-width:720px){.fields{grid-template-columns:1fr 1fr}}
.f{display:grid;gap:7px}
.f.wide{grid-column:1/-1}
/* Только прямой потомок: иначе правило достаёт до плиток выбора цвета,
   которые тоже label, и делает их подписи жирными. */
.f > label,.f > .lbl{font-size:13.5px;font-weight:600}
.f .hint{font-size:12.5px;color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:2px;
  padding:11px 13px;
}
textarea{min-height:88px;resize:vertical}
/* Стрелка списка - тонкая «птичка», а не залитый треугольник: на светлом
   поле треугольник выглядит тяжелее самого поля. */
select{
  appearance:none;padding-right:40px;background-repeat:no-repeat;
  background-position:calc(100% - 14px) 50%;background-size:12px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238B959A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Пока ничего не выбрано, текст приглушён - иначе «Выберите цвет» читается
   как уже выбранное значение, и поле выглядит заполненным. */
select:has(option[value=""]:checked){color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red);outline-offset:-1px;background:var(--surface)}
.row-2{display:grid;grid-template-columns:1fr 118px;gap:9px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);
  padding:8px 13px;font-size:14px;color:var(--ink-2);border-radius:2px;
}
.chip input{accent-color:var(--red);margin:0}
/* Плитка с образцом краски. Кружок переключателя прячем: рядом с полосой
   цвета он только сорит, а выбранное состояние и так видно по рамке. Поле
   остаётся в разметке и получает фокус с клавиатуры. */
/* Сетка, а не свободный ряд: «Другой цвет» - единственная плитка без образца,
   и по содержимому она выходила уже соседних, ряд выглядел обломанным.
   В сетке все ячейки одной ширины независимо от длины подписи. */
.chips.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.chips.swatches .chip{position:relative}
.chips.swatches .chip input{position:absolute;opacity:0;width:0;height:0;margin:0}
.chip.col{gap:9px;font-family:"IBM Plex Mono",monospace;font-size:13px}
/* Образец должен читаться как цвет, а не как значок: по маленькой полоске
   оттенок не отличить, а выбирают здесь именно по цвету. */
.chip.col{padding:9px 13px}
.chip.col i{display:block;width:54px;height:30px;border:1px solid rgba(0,0,0,.18);flex:none}
/* На узком экране плитка в строку не помещается дважды - не хватает полутора
   десятков пикселей, и ряд рассыпается по одной штуке с пустой половиной
   справа. Разворачиваем плитку: образец сверху во всю ширину, код под ним.
   Заодно образец становится крупнее, чем на десктопе. */
@media(max-width:560px){
  .chips.swatches{grid-template-columns:1fr 1fr}
  .chips.swatches .chip{justify-content:center;text-align:center}
  .chip.col{flex-direction:column;align-items:stretch;gap:8px;padding:10px}
  .chip.col i{width:auto;height:40px}
}
/* «Другой цвет» - единственная плитка без образца, и подпись в ней несёт всю
   нагрузку. Поэтому текст темнее и плотнее, чем у соседей: там рядом со
   словом есть полоса краски, а здесь смотреть не на что. */
.chip.other{color:var(--ink);font-weight:600}
.chip:has(input:checked){border-color:var(--red);background:#FCEDEB;color:var(--ink);font-weight:600}
.chip:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}

.file{display:grid;gap:7px;align-content:start}
.file input{padding:8px 0}
.file input{font-size:13.5px}
.consent{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
  font-size:13px;color:var(--ink-2);margin-top:20px;cursor:pointer}
.consent input{margin:3px 0 0;accent-color:var(--red);width:16px;height:16px}
.consent a{color:var(--ink)}

.send{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.say{font-size:14px;margin:0}
/* Подтверждение после отправки - на месте формы, в том же тёмном блоке. */
.sent{display:grid;gap:12px;max-width:60ch;justify-items:start}
.sent[hidden]{display:none}
.sent h3{font-size:22px}
.sent-note{color:rgba(255,255,255,.72);font-size:14px}
.sent-note a{color:var(--red);font-weight:600}
.sent .btn.ghost{background:none;border:1px solid rgba(255,255,255,.4);color:#fff}
.sent .btn.ghost:hover{border-color:var(--red);color:var(--red)}
.say.ok{color:var(--ok);font-weight:600}
.say.err{color:var(--red-dark);font-weight:600}
.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.more{margin-top:20px;border-top:1px solid var(--line-2);padding-top:16px}
.more summary{
  cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink);
  list-style:none;display:inline-flex;align-items:center;gap:9px;
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{
  content:"+";font-family:"IBM Plex Mono",monospace;font-size:16px;line-height:1;
  width:20px;height:20px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--red);
}
.more[open] summary::before{content:"-"}
.more summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.more .fields{margin-top:18px}

.order-summary{
  margin-top:20px;padding:13px 15px;background:var(--surface-2);
  border-left:3px solid var(--red);font-size:14px;color:var(--ink);
}
.order-summary b{font-weight:600}

/* ---------- страница документа ---------- */
.doc{background:var(--surface);padding:0 0 60px}
.doc-in{max-width:min(78ch, 100%);padding-top:34px}
.doc-back{
  display:inline-block;margin-bottom:26px;font-size:13.5px;
  color:var(--muted);text-decoration:none;
}
.doc-back:hover{color:var(--red)}
.doc h1{
  font-size:clamp(24px,3.2vw,34px);line-height:1.12;margin-bottom:14px;
}
.doc h2{
  font-size:clamp(17px,2vw,20px);margin:38px 0 12px;
}
.doc h3{font-size:15px;margin:24px 0 10px;text-transform:none;font-family:"IBM Plex Sans",sans-serif;font-weight:600}
.doc p{margin:0 0 11px;line-height:1.65}
.doc ul{margin:0 0 14px;padding-left:20px;display:grid;gap:7px}
.doc li{line-height:1.6}
.doc a{color:var(--red)}
.doc-meta{font-size:13px;color:var(--muted);margin-bottom:8px}
.doc .fill{
  background:#FFF3CD;border-bottom:1px dashed #B8860B;
  padding:0 3px;color:#6B4E00;font-weight:500;
}
.doc-kv{
  display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);
  gap:8px 18px;margin:0 0 16px;font-size:14.5px;
}
.doc-kv dt{color:var(--muted)}
.doc-kv dd{margin:0}
@media(max-width:560px){
  .doc-kv{grid-template-columns:1fr;gap:2px 0}
  .doc-kv dd{margin-bottom:10px}
}

/* ---------- подвал ---------- */
.foot{background:var(--surface);border-top:1px solid var(--line);padding:44px 0 34px}
.foot-in{display:grid;gap:26px}
@media(min-width:820px){.foot-in{grid-template-columns:1.2fr 1fr}}
.foot h3{font-size:14px;margin-bottom:12px}
.foot p,.foot li{font-size:13.5px;color:var(--ink-2)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--red)}
.foot .tel{font-size:22px;color:var(--ink);display:inline-block;margin-bottom:6px}
/* Плашка «Скопировано» над адресом почты. Белая с тенью - чтобы читалась и на
   тёмной секции с формой, и на светлых шапке с подвалом. */
.copied{
  position:fixed;z-index:60;white-space:nowrap;pointer-events:none;
  background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:3px;padding:5px 9px;font-size:12px;line-height:1;font-weight:600;
  box-shadow:0 3px 12px rgba(0,0,0,.18);
  opacity:0;transform:translateY(-5px);
  transition:opacity .15s ease, transform .15s ease;
}
.copied.show{opacity:1;transform:none}

.legal{
  margin-top:30px;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
}

/* ---------- узкие экраны ---------- */
@media(max-width:1080px){
  .contact-row .mail{display:none}
}
@media(max-width:880px){
  .brand span{display:none}
}
@media(max-width:640px){
  .proto{font-size:11px;padding:6px 14px;line-height:1.45}
  .top-right .btn{display:none}      /* кнопка есть в первом экране, в шапке она только мешает */
  .brand img{height:32px}
  .tel{font-size:18px}
  .facts{grid-template-columns:1fr;gap:1px}
  .fact{display:flex;align-items:baseline;gap:10px}
  .fact b{font-size:22px}
  .fact span{margin-top:0}
}

/* плашка прототипа: снимается вместе с noindex, когда сайт поедет на свой домен */
.proto{
  background:var(--ink);color:#fff;font-size:12.5px;text-align:center;
  padding:7px 22px;font-family:"IBM Plex Mono",monospace;
}
.proto b{color:#fff}

/* ---------- переписка ---------- */
/* Кнопка и окно живут поверх страницы. Кнопка слева от правого края ровно
   настолько, чтобы не наезжать на полосу прокрутки, и не перекрывает
   «Отправить заявку» - та прижата к левому краю формы. */
.chat-btn{
  position:fixed;right:18px;bottom:18px;z-index:40;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;color:#fff;
  background:var(--red);border:0;border-radius:3px;padding:12px 17px;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
}
.chat-btn:hover{background:var(--red-dark)}
.chat-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.chat-dot{
  position:absolute;top:-5px;right:-5px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--red);
}

.chat-box{
  position:fixed;right:18px;bottom:18px;z-index:41;
  /* padding сбрасываем явно: на сайте есть общее правило section{padding:...},
     и окно, будучи section, получало по 96 px сверху и снизу - лента
     сплющивалась до минимума и уезжала в прокрутку. */
  padding:0;
  width:min(380px,calc(100vw - 36px));height:min(640px,calc(100vh - 36px));
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:3px;
  box-shadow:0 10px 40px rgba(0,0,0,.26);
}
/* Развёрнутое окно - для длинной переписки с файлами: читать историю в
   колонке шириной с телефон неудобно. */
.chat-box.big{width:min(820px,calc(100vw - 36px));height:calc(100vh - 36px)}
.chat-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line-2);
}
.chat-head b{display:block;font-size:15px}
.chat-head span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.chat-tools{display:flex;align-items:center;gap:4px;flex:none}
.chat-x,.chat-size{
  background:none;border:0;line-height:1;cursor:pointer;
  color:var(--muted);padding:3px 4px;border-radius:2px;
}
.chat-x{font-size:24px}
.chat-size:hover,.chat-x:hover{color:var(--ink);background:var(--surface-2)}
.chat-x:hover{color:var(--ink)}

.chat-body{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 16px;
  display:grid;gap:10px;align-content:start;min-height:90px;
}
.chat-note{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.chat-note a{color:var(--red);font-weight:600;white-space:nowrap}

/* Имя .msg уже занято значком мессенджера в шапке - у пузырей своё. */
/* overflow-wrap:anywhere обязателен: pre-wrap сохраняет текст как есть, но
   единое «слово» без пробелов - номер заказа, ссылка, набор цифр - не
   переносится, растягивает пузырь на всю ширину и даёт горизонтальную
   прокрутку всей переписке. */
.bubble{
  max-width:85%;min-width:0;padding:9px 12px;font-size:14px;line-height:1.45;
  border-radius:3px;white-space:pre-wrap;overflow-wrap:anywhere;
}
.bubble.me{justify-self:end;background:var(--surface-2);border:1px solid var(--line-2)}
.bubble.them{justify-self:start;background:#FCEDEB;border:1px solid #F3CFC9}
.bubble time{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.chat-sys{font-size:12.5px;color:var(--muted);text-align:center;padding:2px 0}

.chat-start,.chat-reply{display:grid;gap:9px;padding:14px 16px;border-top:1px solid var(--line-2)}
.chat-start input[type=text],.chat-start input[type=tel],.chat-start textarea,.chat-reply textarea{
  font-size:14px;padding:9px 11px;
}
.chat-start textarea,.chat-reply textarea{min-height:0;resize:vertical}
.chat-consent{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;font-size:12px;line-height:1.45;color:var(--ink-2)}
.chat-consent input{accent-color:var(--red);margin:2px 0 0}
.chat-consent a{color:var(--ink-2);text-decoration:underline}
/* Вход через площадки. Цвета фирменные - человек узнаёт кнопку глазом, - но
   высота и скругления наши, чтобы ряд не выпадал из набора страницы. */
.idrow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
/* Секция заявки тёмная - подпись берёт тот же приглушённый белый, что и
   остальной текст на ней, иначе читается как серое на чёрном. */
.order .idrow{margin-bottom:16px;color:rgba(255,255,255,.72)}
/* Чёрная кнопка на почти чёрной секции сливается - отделяем контуром. */
.order .idbtn.yandex{border:1px solid rgba(255,255,255,.35)}
.idrow[hidden]{display:none}
.idbtns{display:flex;flex-wrap:wrap;gap:8px}
.idbtn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:2px;
  font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;
}
.idbtn:hover{filter:brightness(1.08)}
.idbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* Подпись несёт название площадки целиком, поэтому отдельного значка нет:
   «VK» перед «VK ID» читалось как заикание, а рисовать чужие логотипы
   самодельно нельзя - у площадок на это свои правила. */
.idbtn.vk{background:#07f}
.idbtn.yandex{background:#000}
/* В переписке ряд уже - подписи сверху, кнопки под ними. */
.chat-save .idrow{display:grid;gap:7px;font-size:12px}

/* Предложение сохранить переписку. Полоска над полем ответа, а не окно
   поверх разговора: это подсказка, а не требование. */
.chat-save{display:grid;gap:8px;padding:12px 16px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.chat-save p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.chat-save .chat-hint{color:var(--muted);font-size:12px}
.chat-save-row{display:flex;gap:8px;min-width:0}
.chat-save-row input{flex:1 1 auto;min-width:0;font-size:14px;padding:9px 11px}
.chat-save-row .btn{flex:none;padding:9px 14px}
.chat-later{
  justify-self:start;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:12px;color:var(--muted);text-decoration:underline;
}
.chat-later:hover{color:var(--ink-2)}
/* После отправки письма поля убираем, а подтверждение оставляем на виду. */
/* После отправки остаются подтверждение и «Это не моя почта» - всё остальное
   лишнее: предлагать сохранить то, что уже сохранено, незачем. */
.chat-save.done .chat-save-row,.chat-save.done #chat-later,.chat-save.done p:not(.chat-say){display:none}
.chat-save.done .chat-say{color:#1F5C18;font-weight:600}

.chat-say{margin:0;font-size:12.5px;min-height:1em}
.chat-say.err{color:var(--red-dark);font-weight:600}
.chat-say.ok{color:#1F5C18}

@media(max-width:560px){
  .chat-btn{right:14px;bottom:14px;padding:11px 15px}
  .chat-btn span{display:none}
  /* На телефоне окно и так во весь экран - разворачивать нечего. */
  .chat-box,.chat-box.big{right:10px;left:10px;bottom:10px;width:auto;height:calc(100vh - 20px)}
  .chat-size{display:none}
}

/* Атрибут hidden браузер применяет правилом display:none из своих стилей,
   и любое наше объявление display его перебивает. Для элементов, которым мы
   задали display, это надо вернуть явно - иначе «скрытое» окно переписки
   остаётся на месте и перехватывает клики по кнопке под собой. */
.chat-box[hidden],.chat-start[hidden],.chat-reply[hidden],.chat-save[hidden],.chat-dot[hidden],
.chat-later[hidden]{display:none}

/* Выбор файла. Родной элемент управления выглядит в каждом браузере по-своему
   и ломает сетку, поэтому прячем его и показываем свою подпись. */
.chat-file{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.chat-file input{position:absolute;opacity:0;width:0;height:0}
.chat-file span{
  border:1px dashed var(--line);border-radius:2px;padding:7px 11px;
  background:var(--surface-2);white-space:nowrap;
}
.chat-file:hover span{border-color:var(--red);color:var(--red)}
.chat-file input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}
.chat-file.has span{border-style:solid;border-color:var(--red);color:var(--red);font-weight:600}
.chat-send-row{display:flex;align-items:center;gap:9px;justify-content:space-between}
.chat-send-row .btn{flex:none}

/* Вложения внутри пузыря */
/* minmax(0,1fr) обязателен: иначе колонка сетки растёт под длинное имя
   файла, тянет за собой пузырь и всю ленту вбок. */
.bubble-files{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;margin-top:7px;min-width:0}
.bubble-file{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--ink-2);text-decoration:none;border-top:1px solid rgba(0,0,0,.08);padding-top:5px;
}
.bubble-file:hover{color:var(--red)}
.bubble-file{max-width:100%;min-width:0;overflow:hidden}
.bubble-file b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bubble-file i{font-style:normal;color:var(--muted);flex:none}