/* src/styles/sf-finish.css */
/* Sewing Factory finish layer for Instatic 0.0.20.
   Loaded after the imported sheet; removable and independent of upstream. */
:root {
  --sf-container-phone: 320px;
  --sf-container-tablet: 720px;
  --sf-container-desktop: 1200px;
  --sf-focus: 0 0 0 3px rgba(251, 100, 2, .28);
}

[hidden] { display: none !important; }

.app {
  --grid-width: min(var(--sf-container-phone), calc(100% - 40px)) !important;
}

.app :where(a, button, input, select, summary):focus-visible,
.sf-legal-page :where(a, button):focus-visible,
.sf-not-found-page :where(a, button):focus-visible {
  outline: 0;
  box-shadow: var(--sf-focus);
}

.app ::selection,
.sf-legal-page ::selection,
.sf-not-found-page ::selection {
  color: #fff;
  background: var(--accent, #fb6402);
}

.app .header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  width: min(var(--sf-container-phone), calc(100% - 20px));
}

.app .header nav,
.app .header .phone { display: none !important; }
.app .header-actions .button { display: none !important; }
.app .header-actions { justify-self: end; }
.app .footer-meta > * { width: auto !important; }

.sf-menu-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--accent, #fb6402);
  cursor: pointer;
}

.sf-menu-toggle span,
.sf-menu-toggle span::before,
.sf-menu-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: '';
}
.sf-menu-toggle span { position: relative; }
.sf-menu-toggle span::before { position: absolute; transform: translateY(-6px); }
.sf-menu-toggle span::after { position: absolute; transform: translateY(6px); }

.sf-menu-layer {
  position: fixed;
  z-index: 100;
  display: grid;
  align-items: end;
  background: rgba(20, 23, 26, .45);
  inset: 0;
}

.sf-menu-sheet {
  position: relative;
  width: min(600px, 100%);
  max-height: 88vh;
  margin: 0 auto;
  padding: 12px 20px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  background: #fffdf9;
  box-shadow: 0 -8px 40px rgba(20, 23, 26, .18);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.22, .8, .24, 1);
  overscroll-behavior: contain;
}

.sf-menu-layer.is-active .sf-menu-sheet { transform: translateY(0); }
.sf-menu-grab { width: 40px; height: 4px; margin: 0 auto 16px; border-radius: 2px; background: #e5e2dd; }
.sf-menu-close { position: absolute; top: 12px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #f4f2ef; font-size: 24px; cursor: pointer; }
.sf-menu-nav { display: grid; padding: 44px 0 18px; gap: 2px; }
.sf-menu-nav a { padding: 13px 4px; color: #14171a; text-decoration: none; font-size: 20px; font-weight: 600; }
.sf-menu-nav .button { justify-content: center; margin-top: 14px; color: #fff; }

.app .hero-content {
  width: min(100%, calc(100vw - 40px));
  transform: none;
}

.app .quiz-intro h2,
.app .quiz-intro > p { white-space: normal; }

.app .quiz-layout,
.app .process-grid,
.app .about-layout,
.app .price-grid,
.app .cta-grid,
.app .footer-grid { grid-template-columns: 1fr; }

.app .quiz-card { min-width: 0; }
.app .quiz-advisor { display: none; }
.app .quiz-options,
.app .quiz-options-visual { grid-template-columns: 1fr; }
.app .quiz-option.has-image { grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto; min-height: 110px; }
.app .quiz-option-image { min-height: 110px; }
.app .quiz-footer { grid-template-columns: 1fr 1fr; }
.app .quiz-footer > span { grid-column: 1 / -1; grid-row: 1; text-align: left; }
.app .quiz-footer :where(.quiz-back, .quiz-next) { width: 100%; }
.sf-quiz-step[aria-busy="true"] { opacity: .72; }
.sf-consent { display: flex !important; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; }
.sf-consent input { flex: none; margin-top: 3px; accent-color: var(--accent, #fb6402); }
.sf-consent a { color: inherit; text-underline-offset: 3px; }
.sf-form-status { min-height: 24px; color: #6e655c; font-size: 14px; }

.app .case-card { position: static; grid-template-columns: minmax(0, 1fr); }
.app .case-actions .button { max-width: 100%; white-space: normal; text-align: center; }
.app .case-num { padding: 26px 0 0 26px; }
.app .case-photo { max-width: none; height: 300px; margin: 20px 26px; }
.app .case-body { padding: 0 26px 30px; }
/* Отзыв кейса — всплывающее окно, как в макете v3.19 */
.review-overlay { position: fixed; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(24, 22, 18, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); inset: 0; }
.review-window { position: relative; width: min(620px, 100%); max-height: 84vh; padding: 28px 22px; overflow-y: auto; border-radius: 24px; background: #fffdf9; box-shadow: 0 30px 90px rgba(35, 33, 28, .35); overscroll-behavior: contain; }
.review-close { position: absolute; top: 18px; right: 18px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; }
.review-close i { position: relative; display: block; width: 13px; height: 13px; }
.review-close i::before, .review-close i::after { position: absolute; top: 5px; left: 0; width: 13px; height: 1.6px; background: #23211c; content: ''; }
.review-close i::before { transform: rotate(45deg); }
.review-close i::after { transform: rotate(-45deg); }
.review-head { display: flex; align-items: center; gap: 14px; margin: 0 44px 22px 0; }
.review-avatar { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 999px; color: #fff; background: var(--accent, #fb6402); font-size: 20px; font-weight: 600; }
.review-name, .review-role { display: block; font-size: 16px; line-height: 1.4; }
.review-name { font-weight: 600; color: var(--ink, #211f1b); }
.review-role { color: #696158; }
.review-text { display: flex; flex-direction: column; gap: 14px; }
.review-text p { margin: 0; color: #696158; font-size: 16px; line-height: 1.6; }
.case-toggle { display: inline-flex; }

.app .cta-card form,
.app .quiz-contact-grid,
.app .cta-contacts { grid-template-columns: 1fr; }
.app .cta-form-note a { color: inherit; text-underline-offset: 3px; }

.sf-success-modal {
  position: fixed;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 23, 26, .58);
  inset: 0;
}
.sf-success-dialog { position: relative; width: min(520px, 100%); padding: 36px; border-radius: 24px; background: #fffdf9; box-shadow: 0 24px 80px rgba(20, 23, 26, .3); }
.sf-success-dialog h2 { margin: 0 44px 10px 0; font-size: clamp(28px, 5vw, 42px); line-height: 1.08; }
.sf-success-dialog p { margin: 0; color: #6e655c; }
.sf-success-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #f4f2ef; font-size: 24px; cursor: pointer; }

.sf-page-header,
.sf-page-footer,
.sf-legal-main,
.sf-not-found-main { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.sf-legal-page,
.sf-not-found-page { min-height: 100vh; color: #231f1b; background: #f8f5f0; font-family: Manrope, "Avenir Next", "Segoe UI", Arial, sans-serif; }
.sf-page-header { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; gap: 20px; }
.sf-page-brand { color: inherit; text-decoration: none; font-size: 25px; font-weight: 650; line-height: 1; }
.sf-page-brand small { display: block; margin-top: 5px; color: #6e655c; font-size: 10px; font-weight: 600; }
.sf-legal-main { padding-block: clamp(52px, 8vw, 110px); }
.sf-legal-main h1 { max-width: 15ch; margin: 0 0 48px; font-size: clamp(38px, 6vw, 72px); line-height: 1; }
.sf-legal-copy { max-width: 76ch; padding: clamp(24px, 5vw, 56px); border-radius: 24px; background: #fffdf9; }
.sf-legal-copy p { margin: 0; font-size: 16px; line-height: 1.7; }
.sf-legal-copy strong { display: inline-block; margin-top: 18px; color: #14171a; font-size: 20px; }
.sf-legal-copy a { color: #a33e00; text-underline-offset: 3px; }
.sf-page-footer { display: grid; grid-template-columns: 2fr 1fr 1fr; padding-block: 48px; gap: 32px; border-top: 1px solid rgba(35, 31, 27, .14); }
.sf-page-footer strong { font-size: 24px; }
.sf-page-footer p { margin: 0; color: #6e655c; line-height: 1.6; }
.sf-page-footer div { display: grid; align-content: start; gap: 8px; }
.sf-page-footer a { color: inherit; text-underline-offset: 3px; }
.sf-not-found-main { display: grid; min-height: 68vh; align-content: center; justify-items: start; padding-block: 60px; }
.sf-not-found-code { width: 100% !important; margin: 0; color: var(--accent, #fb6402); font-size: clamp(96px, 24vw, 320px); font-weight: 700; line-height: .75; letter-spacing: -.08em; white-space: nowrap; }
.sf-not-found-main h1 { max-width: 15ch; margin: 34px 0 14px; font-size: clamp(34px, 5vw, 64px); line-height: 1.02; }
.sf-not-found-main > p:not(.sf-not-found-code) { max-width: 58ch; margin: 0 0 28px; color: #6e655c; font-size: 18px; line-height: 1.55; }

@media (min-width: 768px) {
  .app { --grid-width: min(var(--sf-container-tablet), calc(100% - 48px)) !important; }
  .app .header { width: min(var(--sf-container-tablet), calc(100% - 48px)); }
  .app .header .phone { display: inline-flex !important; }
  .app .brand-description { display: inline-block !important; }
  .app .quiz-footer { grid-template-columns: auto 1fr auto; }
  .app .quiz-footer > span { grid-column: auto; grid-row: auto; text-align: right; }
  .app .quiz-footer :where(.quiz-back, .quiz-next) { width: auto; }
  .app .hero-content { width: min(720px, calc(100vw - 48px)); }
  .app .quiz-layout { grid-template-columns: minmax(0, 1fr) 240px; }
  .app .quiz-advisor { display: block; }
  .app .quiz-options,
  .app .quiz-options-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app .quiz-option.has-image { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 1fr) auto; }
  .app .quiz-option-image { min-height: 150px; }
  .app .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app .process-card-cta { grid-column: span 2; }
  .app .footer-grid { grid-template-columns: 1fr 1fr; }
  .app .footer-about { grid-column: 1 / -1; }
  .app .cta-card form,
  .app .quiz-contact-grid,
  .app .cta-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app .cta-contacts > :last-child { grid-column: 1 / -1; }
  .sf-page-header,
  .sf-page-footer,
  .sf-legal-main,
  .sf-not-found-main { width: min(720px, calc(100% - 48px)); }
}

@media (min-width: 1280px) {
  .app { --grid-width: min(var(--sf-container-desktop), calc(100% - 80px)) !important; }
  .app .header { width: min(var(--sf-container-desktop), calc(100% - 80px)); grid-template-columns: auto 1fr auto; gap: 42px; }
  .app .header nav { display: flex !important; }
  .app .header .phone { display: inline-flex !important; }
  .app .header-actions .button { display: flex !important; }
  .sf-menu-toggle,
  .sf-menu-layer { display: none !important; }
  .app .hero-content { width: min(830px, calc(100vw - 80px)); }
  .app .quiz-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .app .quiz-options,
  .app .quiz-options-visual { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app .process-card-cta { grid-column: auto; min-height: 310px; }
  .app .case-card { position: sticky; grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1.02fr); }
  .app .case-card:nth-child(1) { top: 118px; }
  .app .case-card:nth-child(2) { top: 134px; }
  .app .case-card:nth-child(3) { top: 150px; }
  .app .case-num { padding: 38px 0 0 36px; }
  .app .case-photo { max-width: 420px; height: 380px; margin: 34px auto; }
  .app .case-body { padding: 40px 44px 40px 0; }
  .app .about-layout { grid-template-columns: 7fr 5fr; }
  .app .price-grid { grid-template-columns: 7fr 5fr; }
  .app .cta-grid { grid-template-columns: 6fr 6fr; }
  .app .footer-grid { grid-template-columns: 4fr 2.6fr 2.2fr 2.4fr auto; }
  .app .footer-about { grid-column: auto; }
  .app .cta-card form,
  .app .quiz-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app .cta-contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app .cta-contacts > :last-child { grid-column: auto; }
  .sf-page-header,
  .sf-page-footer,
  .sf-legal-main,
  .sf-not-found-main { width: min(1200px, calc(100% - 80px)); }
}

@media (min-width: 768px) and (max-height: 820px) {
  .app .hero { padding-top: 104px; padding-bottom: 18px; }
  .app .hero-content { padding-block: 25px; }
  .app .benefits { margin-bottom: 18px; }
}

@media (max-width: 767px) {
  .sf-page-header { align-items: flex-start; }
  .sf-page-header .button { padding-inline: 15px; font-size: 14px; }
  .sf-page-footer { grid-template-columns: 1fr; }
  .sf-legal-copy { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-menu-sheet { transition-duration: .01ms; }
}


/* Армянские буквы: у Manrope их нет. Тот же род шрифта с диапазоном армянского
   алфавита — любое правило с Manrope берёт армянские глифы из Noto Sans Armenian. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400; font-display: swap; src: url('/uploads/fonts/noto-sans-armenian/400-armenian-0.woff2') format('woff2'); unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url('/uploads/fonts/noto-sans-armenian/500-armenian-0.woff2') format('woff2'); unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/uploads/fonts/noto-sans-armenian/600-armenian-0.woff2') format('woff2'); unicode-range: U+0530-058F, U+FB13-FB17; }

/* Переключатель языков: кнопка с кодом языка и выпадающий список */
.sf-lang { position: relative; display: inline-flex; flex: none; }
.sf-lang-current { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 1px solid var(--line, rgba(55, 47, 37, .14)); border-radius: 10px; color: #48433b; background: rgba(255, 255, 255, .6); font: 600 14px/1 Manrope, sans-serif; letter-spacing: .04em; cursor: pointer; }
.sf-lang-current::after { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); content: ''; }
.sf-lang-current:hover, .sf-lang-current[aria-expanded="true"] { border-color: var(--accent, #fb6402); color: var(--accent, #fb6402); }
.sf-lang-menu { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; display: grid; min-width: 150px; padding: 6px; border: 1px solid var(--line, rgba(55, 47, 37, .14)); border-radius: 12px; background: #fffdf9; box-shadow: 0 16px 40px rgba(81, 55, 32, .16); }
.sf-lang-link { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: #48433b; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sf-lang-link:hover { color: var(--accent, #fb6402); background: #f4f2ef; }
.sf-lang-link[aria-current="true"] { color: var(--accent, #fb6402); }
.sf-page-header .sf-lang { margin-left: auto; margin-right: 12px; }

/* Шапка на компьютере — ширина из макета v3.19, а не контейнера 1200:
   иначе меню, телефон, кнопка и переключатель не помещаются */
@media (min-width: 1280px) {
  /* Единая сетка компьютера (23.09.2026): шапка и все блоки одной ширины,
     края — 42 px от окна, максимум 1416 px. */
  .app .header { width: min(1416px, calc(100% - 84px)); }
  .app { --grid-width: min(1416px, calc(100% - 84px)) !important; }
  .app .hero { padding-left: max(42px, calc((100% - 1416px) / 2)) !important; padding-right: max(42px, calc((100% - 1416px) / 2)) !important; }
  .sf-page-header, .sf-page-footer, .sf-legal-main, .sf-not-found-main { width: min(1416px, calc(100% - 84px)); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .app .header { gap: 16px; }
  .app .header nav { gap: 14px; }
}

/* Согласие в нижней форме: общее правило .cta-card input не должно растягивать галочку */
.cta-card .sf-consent { grid-column: 1 / -1; color: #8a8177; }
.cta-card .sf-consent input,
.quiz-contact .sf-consent input { width: 18px !important; height: 18px !important; min-height: 0; padding: 0 !important; border-radius: 4px; }

/* Ссылка «Политика конфиденциальности» в подвале — цветом строки, как в макете */
.app .footer-meta a { color: #a89d93; text-decoration: none; }
.app .footer-meta a:hover { color: var(--accent, #fb6402); }

/* Армянский и английский текст длиннее: заголовки квиза и цен переносим */
:lang(hy) .quiz-intro h2, :lang(en) .quiz-intro h2 { white-space: normal; }

@media (min-width: 768px) {
  .review-window { padding: 32px 34px; }
}

/* Холст редактора Instatic (режим правки), 23.09.2026.
   На холсте скрипты сайта не работают, атрибут hidden не выводится,
   а пустой текстовый узел подписан словом «Text». Атрибут
   body[data-instatic-iframe-interaction="canvas"] ставит только холст —
   опубликованный сайт и режим Live эти правила не задевают. */
body[data-instatic-iframe-interaction="canvas"] .sf-menu-layer { display: none !important; }
body[data-instatic-iframe-interaction="canvas"] :is(.quiz-option-image, .quiz-progress-track > span, .sf-menu-toggle > span, .quiz-advisor-badge > i, .footer-top > i) { font-size: 0 !important; line-height: 0 !important; }

/* Армянский заголовок политики: слово «քաղաքականություն» длиннее колонки
   в 9 em, и браузер рвал его по буквам. Даём заголовку ширину по слову. */
:lang(hy) .sf-legal-main h1 { max-width: none !important; font-size: min(35px, 8.6vw) !important; }
@media (min-width: 768px) {
  :lang(hy) .sf-legal-main h1 { font-size: 46px !important; }
}
@media (min-width: 1280px) {
  :lang(hy) .sf-legal-main h1 { max-width: 12em !important; font-size: 72px !important; }
}

/* Высоту колонки технолога даёт карточка квиза (растяжка в сетке). На холсте
   min-height: 100% и фото в потоке раздували колонку до 4551 px. */
.app .quiz-advisor { position: relative; min-height: 0 !important; overflow: hidden; }
.app .quiz-advisor > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Холст: 100svh там равно высоте всего кадра страницы, а не окна, поэтому
   секции с min-height: 100svh раздувались до тысяч пикселей. Даём холсту
   высоту обычного экрана: 812 px на телефоне, 900 px с планшета. */
body[data-instatic-iframe-interaction="canvas"] .app,
body[data-instatic-iframe-interaction="canvas"] .quiz-section,
body[data-instatic-iframe-interaction="canvas"] .process-section { min-height: 0 !important; }
body[data-instatic-iframe-interaction="canvas"] .hero { min-height: 812px !important; }
@media (min-width: 768px) {
  body[data-instatic-iframe-interaction="canvas"] .hero { min-height: 900px !important; }
}

/* Пока скрипт сайта не отработал — на холсте, в предпросмотре Instatic (там скрипты
   не запускаются) и в первые миллисекунды на сайте — квиз показывает первый шаг,
   а переключатель — плашку текущего языка, как после скрипта. */
.sf-quiz:not(.is-ready) .sf-quiz-step + .sf-quiz-step { display: none !important; }
.sf-lang:not(.is-dropdown) .sf-lang-link:not([aria-current="true"]) { display: none; }
.sf-lang:not(.is-dropdown) .sf-lang-link[aria-current="true"] { display: inline-flex; align-items: center; gap: 7px; height: 40px; min-height: 0; padding: 0 12px; border: 1px solid var(--line, rgba(55, 47, 37, .14)); border-radius: 10px; color: #48433b; background: rgba(255, 255, 255, .6); font-size: 14px; letter-spacing: .04em; }
.sf-lang:not(.is-dropdown) .sf-lang-link[aria-current="true"]::after { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); content: ''; }


/* src/styles/sf-parity.css */
/* СГЕНЕРИРОВАНО translate_parity.py из Payload src/blocks/SF/sf.css — руками не править */
@font-face {
  font-family: 'Manrope SF';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/uploads/fonts/manrope-sf/manrope-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope SF';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/uploads/fonts/manrope-sf/manrope-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'Manrope SF';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/uploads/fonts/manrope-sf/manrope-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope SF';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/uploads/fonts/manrope-sf/manrope-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'Manrope SF';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/uploads/fonts/manrope-sf/manrope-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope SF';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/uploads/fonts/manrope-sf/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
/* ================= токены ================= */
/* Границы и контейнеры — как у боевого сайта на Creatium (sewingfactory.am):
   телефон < 768 — ширина окна минус 30;
   планшет 768–1191 — 720;
   компьютер 1192–1499 — 1140;
   широкий ≥ 1500 — 1440. */
:root {
  --sf-ink: #211f1b;
  --sf-muted: #68635a;
  --sf-text: #696158;
  --sf-line: rgba(55, 47, 37, 0.14);
  --sf-accent: #fb6402;
  --sf-accent-hover: #e95800;
  --sf-cream: #fffaf1;
  --sf-white: #ffffff;
  --sf-warm: #f4f2ef;
  --sf-dark: #14171a;
  --sf-page: #f8f8f8;
  --sf-card: #fffdf9;
  --sf-container: calc(100% - 30px);
  --sf-header-height: 60px;
}
@media (min-width: 768px) {
:root {
    --sf-container: 720px;
    --sf-header-height: 76px;
  }
}
@media (min-width: 1192px) {
:root {
    --sf-container: 1140px;
  }
}
@media (min-width: 1500px) {
:root {
    --sf-container: 1440px;
  }
}
/* Шаблонные шапка и подвал Payload на страницах SF не нужны */
/* Шаблонная обёртка блоков даёт вертикальные поля — для SF их снимаем */
/* Сглаживание не задаём: у эталона оно «auto», antialiased делает текст тоньше */
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) {
  position: relative !important;
  color: var(--sf-ink) !important;
  font-family: 'Manrope SF', 'Manrope', 'Avenir Next', Arial, sans-serif !important;
  font-synthesis: none !important;
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) *,
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) *::before,
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) *::after {
  box-sizing: border-box !important;
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) a,
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) button {
  -webkit-tap-highlight-color: transparent !important;
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) a:focus-visible,
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) button:focus-visible,
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) input:focus-visible,
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) select:focus-visible {
  outline: 3px solid rgba(251, 100, 2, 0.34) !important;
  outline-offset: 3px !important;
}
/* ================= общие детали секций ================= */
:root body .app :is(.hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: var(--sf-pt, 56px) !important;
  padding-bottom: var(--sf-pb, 56px) !important;
  border-radius: var(--sf-radius, 0) !important;
  background: var(--sf-bg, transparent) !important;
  scroll-margin-top: 92px !important;
}
/* Фон из палитры Puck сильнее фона секции по умолчанию. */
@media (min-width: 768px) {
:root body .app :is(.hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) {
    padding-top: var(--sf-pt-md, 72px) !important;
    padding-bottom: var(--sf-pb-md, 72px) !important;
}
}
/* «Светлый текст» из Puck красит только текст прямо на фоне секции.
   Карточки, таблицы и формы светлые — у них остаются свои цвета. */
/* скрытие секции по экранам — задаётся в Puck. Диапазоны, а не min-width:
   так скрытие не трогает собственный display секции (grid, flex, block). */
/* Заголовки: 24 на телефоне, 32 на планшете и компьютере, 36 на широком */
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) h1,
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) h2,
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) h3 {
  margin: 0 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  text-wrap: pretty !important;
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) h2 {
  font-size: 24px !important;
  line-height: 1.14 !important;
  letter-spacing: -0.030556em !important;
}
@media (min-width: 768px) {
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) h2 {
    font-size: 32px !important;
}
}
@media (min-width: 1500px) {
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) h2 {
    font-size: 36px !important;
}
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) p {
  margin: 0 !important;
  max-width: 68ch !important;
}
:root body .app :is(.quiz-intro > p, .price-note) {
  padding-left: 20px !important;
  border-left: 2px solid var(--sf-accent) !important;
  color: var(--sf-muted) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
:root body .app :is(.section-heading, .process-heading) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 30px !important;
}
:root body .app :is(.section-heading, .process-heading) h2 span {
  display: block !important;
}
/* ================= кнопка ================= */
/* У эталона кнопки с обычным начертанием (400), высота из отступов 18 + строка 1,43 */
:root body .app .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 25px !important;
  border: 1px solid #e95700 !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: #fb6300 !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4286 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease !important;
}
@media (min-width: 768px) {
:root body .app .button {
    font-size: 17px !important;
}
}
:root body .app .button:hover {
  border-color: #ff8b41 !important;
  background: #ff8b41 !important;
}
:root body .app .button:disabled {
  cursor: not-allowed !important;
}
:root body .app .button-small {
  min-width: 214px !important;
  padding: 15px 20px !important;
  font-size: 15px !important;
  background: #fb6400 !important;
}
@media (min-width: 768px) {
:root body .app .button-small {
    font-size: 15px !important;
}
}
:root body .app .button-ghost {
  border-color: rgba(68, 58, 45, 0.14) !important;
  color: var(--sf-ink) !important;
  background: #fff !important;
}
:root body .app .button-ghost:hover {
  border-color: var(--sf-accent) !important;
  color: var(--sf-accent) !important;
  background: #fff !important;
}
/* ================= шапка ================= */
/* Стекло шириной контейнера: 10 px от верха на телефоне, 18 — дальше.
   Рамка — внутренней тенью, как у эталона: высота не растёт на 2 px. */
:root body .app .header {
  position: fixed !important;
  z-index: 40 !important;
  top: 10px !important;
  left: 50% !important;
  display: flex !important;
  align-items: center !important;
  width: var(--sf-container) !important;
  min-height: 60px !important;
  padding: 8px 9px 8px 14px !important;
  transform: translateX(-50%) !important;
  border-radius: 14px !important;
  background: rgba(255, 252, 245, 0.7) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.78),
    0 16px 50px rgba(81, 55, 32, 0.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
  backdrop-filter: blur(24px) saturate(135%) !important;
}
@media (min-width: 768px) {
:root body .app .header {
    top: 18px !important;
    min-height: 76px !important;
    padding: 10px 12px 10px 22px !important;
    border-radius: 18px !important;
}
}
:root body .app .brand {
  flex: none !important;
  color: #fb6402 !important;
  text-decoration: none !important;
}
:root body .app .brand .brand-name {
  display: block !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.0536em !important;
  white-space: nowrap !important;
}
:root body .app .brand .brand-description {
  display: none !important;
  color: #777065 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01875em !important;
  white-space: nowrap !important;
}
@media (min-width: 768px) {
:root body .app .brand {
    color: #fb6300 !important;
}
:root body .app .brand .brand-name {
    font-size: 30px !important;
    line-height: 1.4286 !important;
    letter-spacing: 0 !important;
}
:root body .app .brand .brand-description {
    display: block !important;
}
}
:root body .app .header > nav {
  display: none !important;
  gap: 28px !important;
  margin-left: 27px !important;
}
:root body .app .header > nav a {
  position: relative !important;
  padding-block: 6px !important;
  color: #48433b !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4286 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
:root body .app .header > nav a::after {
  position: absolute !important;
  right: 100% !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: var(--sf-accent) !important;
  content: '' !important;
  transition: right 180ms ease !important;
}
:root body .app .header > nav a:hover::after {
  right: 0 !important;
}
@media (min-width: 1192px) {
:root body .app .header > nav {
    display: flex !important;
}
}
/* на широком эталон сдвигает меню вместе с сеткой: +150 px к отступу */
@media (min-width: 1500px) {
:root body .app .header > nav {
    margin-left: 177px !important;
}
}
:root body .app .header-actions {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
}
@media (min-width: 1192px) {
:root body .app .header-actions {
    margin-left: 30px !important;
}
}
/* кнопка расчёта в шапке — только на компьютере, ниже живёт в шторке */
:root body .app .header-actions > .button {
  display: none !important;
}
@media (min-width: 1192px) {
:root body .app .header-actions > .button {
    display: inline-flex !important;
}
}
:root body .app .phone {
  display: none !important;
  color: #48433b !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4286 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
:root body .app .phone:hover {
  color: var(--sf-accent) !important;
}
/* на планшете телефон стоит правее логотипа, как в сетке эталона */
@media (min-width: 768px) {
:root body .app .phone {
    display: inline !important;
    margin-right: 170px !important;
}
}
@media (min-width: 1192px) {
:root body .app .phone {
    margin-right: 0 !important;
    margin-left: auto !important;
}
}
/* шторка снизу */
/* ================= первый экран ================= */
/* Панель стоит у левого края контейнера. На телефоне — внизу экрана. */
:root body .app .hero {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  min-height: 100svh !important;
  padding: 88px 15px 16px !important;
  isolation: isolate !important;
  background: #f8f4eb !important;
}
:root body .app .hero-image {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 66% center !important;
}
:root body .app .hero-wash {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  background: rgba(255, 250, 241, 0.18) !important;
}
:root body .app .hero-content {
  width: 100% !important;
  padding: 22px 20px 19px !important;
  border-radius: 20px !important;
  background: rgba(255, 252, 247, 0.75) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 28px 90px rgba(75, 51, 27, 0.13) !important;
  -webkit-backdrop-filter: blur(26px) saturate(122%) !important;
  backdrop-filter: blur(26px) saturate(122%) !important;
}
:root body .app .hero h1 {
  margin-bottom: 16px !important;
  font-size: 26px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.0367em !important;
}
@media (min-width: 768px) {
:root body .app .hero {
    align-items: center !important;
    padding: 118px calc((100% - var(--sf-container)) / 2) 32px !important;
}
:root body .app .hero-image {
    object-position: 50% center !important;
}
:root body .app .hero-wash {
    background: rgba(255, 250, 241, 0.1) !important;
}
:root body .app .hero-content {
    width: min(740px, 72vw) !important;
    padding: 38px 44px !important;
    border-radius: 26px !important;
    background: rgba(255, 252, 247, 0.5) !important;
}
:root body .app .hero h1 {
    margin-bottom: 25px !important;
    font-size: 38px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.0439em !important;
}
}
@media (min-width: 1192px) {
:root body .app .hero-content {
    width: 830px !important;
}
/* три строки заголовка по макету — только на компьютере, ниже текст течёт сам */
:root body .app .hero h1,
:root body .app .hero-content > .sf-cta p {
    white-space: pre-line !important;
}
}
@media (min-width: 1500px) {
:root body .app .hero h1 {
    font-size: 41px !important;
}
}
:root body .app .benefits {
  display: grid !important;
  grid-template-columns: 1fr !important;
  margin-bottom: 16px !important;
  border-top: 1px solid var(--sf-line) !important;
  border-bottom: 1px solid var(--sf-line) !important;
}
:root body .app .benefit {
  display: grid !important;
  grid-template-columns: 32px 1fr !important;
  align-content: start !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 9px 0 !important;
}
:root body .app .benefit + .benefit {
  border-top: 1px solid var(--sf-line) !important;
}
:root body .app .benefit-number {
  padding-top: 2px !important;
  color: var(--sf-accent) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
}
:root body .app .benefit h3 {
  font-size: 17px !important;
  line-height: 1.32 !important;
  letter-spacing: -0.015em !important;
}
:root body .app .benefit p {
  display: none !important;
  margin-top: 4px !important;
  color: var(--sf-muted) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
}
@media (min-width: 768px) {
:root body .app .benefits {
    margin-bottom: 25px !important;
}
:root body .app .benefit {
    gap: 13px !important;
    padding: 13px 0 12px !important;
}
:root body .app .benefit p {
    display: block !important;
}
}
:root body .app .hero-content > .sf-cta {
  display: flex !important;
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 9px !important;
}
:root body .app .hero-content > .sf-cta .button {
  width: 100% !important;
}
:root body .app .hero-content > .sf-cta p {
  max-width: none !important;
  color: var(--sf-muted) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
@media (min-width: 768px) {
:root body .app .hero-content > .sf-cta {
    align-items: center !important;
    flex-direction: row !important;
    gap: 18px !important;
}
:root body .app .hero-content > .sf-cta .button {
    width: auto !important;
    flex: none !important;
}
:root body .app .hero-content > .sf-cta p {
    flex: 1 !important;
}
}
/* ================= квиз ================= */
:root body .app .quiz-section {
  padding-top: 88px !important;
  padding-bottom: 24px !important;
  background-color: var(--sf-page) !important;
  background-image: radial-gradient(circle at 86% 18%, rgba(251, 100, 2, 0.1), transparent 27%) !important;
}
@media (min-width: 768px) {
:root body .app .quiz-section {
    padding-top: 112px !important;
    padding-bottom: 44px !important;
}
}
:root body .app .quiz-intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}
/* перенос заголовка и подводки — как у эталона: две строки */
:root body .app .quiz-intro h2 {
  max-width: 400px !important;
}
:root body .app .quiz-intro > p {
  max-width: 520px !important;
}
@media (min-width: 1500px) {
:root body .app .quiz-intro h2 {
    max-width: 450px !important;
}
}
:root body .app .quiz-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 20px !important;
}
@media (min-width: 1192px) {
:root body .app .quiz-layout {
    grid-template-columns: minmax(0, 1fr) 328px !important;
}
}
/* карточка держит высоту самого длинного шага — кнопки не прыгают */
:root body .app .quiz-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 791px !important;
  padding: 29px 26px 28px !important;
  border: 1px solid #fff !important;
  border-radius: 24px !important;
  background: var(--sf-card) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.84),
    0 24px 80px rgba(72, 46, 20, 0.1) !important;
}
@media (min-width: 768px) {
:root body .app .quiz-card {
    min-height: 1014px !important;
    padding: 40px 41px 39px !important;
}
}
@media (min-width: 1192px) {
:root body .app .quiz-card {
    min-height: 736px !important;
}
}
@media (min-width: 1500px) {
:root body .app .quiz-card {
    min-height: 693px !important;
}
}
:root body .app .quiz-progress-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 10px !important;
}
:root body .app .quiz-progress-row strong {
  color: #6b6359 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
@media (min-width: 768px) {
:root body .app .quiz-progress-row {
    grid-template-columns: minmax(0, 1fr) 240px !important;
    gap: 0 !important;
}
:root body .app .quiz-progress-row strong {
    font-size: 16px !important;
    text-align: right !important;
}
}
:root body .app .quiz-progress-track {
  height: 12px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(71, 59, 45, 0.08) !important;
}
:root body .app .quiz-progress-track span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: repeating-linear-gradient(120deg, #fb6402 0 12px, #ff8638 12px 22px) !important;
  box-shadow: 0 0 22px rgba(251, 100, 2, 0.28) !important;
  transition: width 260ms ease !important;
  animation: sf-progress-flow 1.1s linear infinite !important;
}
@keyframes sf-progress-flow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 44px 0;
  }
}
/* метка «Вопрос N» над вопросом, на всех экранах */
:root body .app .quiz-question-head {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 25px 0 19px !important;
}
:root body .app .quiz-question-head > span {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  padding: 7px 12px !important;
  border-radius: 20px !important;
  color: #fff !important;
  background: var(--sf-accent) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4286 !important;
}
:root body .app .quiz-question-head h3 {
  font-size: 22px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03125em !important;
}
@media (min-width: 768px) {
:root body .app .quiz-question-head h3 {
    font-size: 26px !important;
}
}
:root body .app .quiz-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 8px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--sf-line) !important;
}
@media (min-width: 768px) {
:root body .app .quiz-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 258px !important;
    gap: 14px !important;
}
/* шаги с четырьмя и больше вариантами на планшете — две колонки */
:root body .app :is(.sf-quiz-step:nth-child(4) .quiz-options, .sf-quiz-step:nth-child(5) .quiz-options, .sf-quiz-step:nth-child(6) .quiz-options) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1192px) {
:root body .app .quiz-options {
    grid-auto-rows: 184px !important;
}
:root body .app .sf-quiz-step:nth-child(1) .quiz-options {
    grid-auto-rows: 206px !important;
}
:root body .app .sf-quiz-step:nth-child(4) .quiz-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
:root body .app :is(.sf-quiz-step:nth-child(5) .quiz-options, .sf-quiz-step:nth-child(6) .quiz-options) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1500px) {
:root body .app .sf-quiz-step:nth-child(1) .quiz-options {
    grid-auto-rows: 184px !important;
}
}
/* телефон: квадратные карточки, подпись белым поверх фото */
:root body .app .quiz-option {
  position: relative !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(68, 58, 45, 0.11) !important;
  border-radius: 14px !important;
  color: #14171a !important;
  background: rgba(255, 252, 247, 0.82) !important;
  box-shadow: 0 8px 24px rgba(69, 48, 27, 0.05) !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease !important;
}
:root body .app .sf-quiz-step:nth-child(4) .quiz-options .quiz-option {
  aspect-ratio: 2 / 3 !important;
}
:root body .app .quiz-option::after {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(20, 23, 26, 0) 30%, rgba(20, 23, 26, 0.78) 100%) !important;
  content: '' !important;
  pointer-events: none !important;
}
@media (min-width: 768px) {
:root body .app .quiz-option {
    display: grid !important;
    grid-template-rows: minmax(148px, 1fr) auto !important;
    aspect-ratio: auto !important;
    min-height: 220px !important;
    padding-bottom: 8px !important;
    border-radius: 16px !important;
}
:root body .app .sf-quiz-step:nth-child(4) .quiz-options .quiz-option {
    aspect-ratio: auto !important;
}
:root body .app .quiz-option::after {
    display: none !important;
}
}
@media (min-width: 1192px) {
:root body .app .quiz-option {
    grid-template-rows: minmax(96px, 1fr) auto !important;
    min-height: 150px !important;
}
}
:root body .app .quiz-option:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(251, 100, 2, 0.42) !important;
  box-shadow: 0 12px 30px rgba(83, 49, 21, 0.1) !important;
}
:root body .app .quiz-option.is-selected {
  border-color: var(--sf-accent) !important;
  background: rgba(255, 245, 236, 0.94) !important;
  box-shadow:
    0 0 0 2px rgba(251, 100, 2, 0.13),
    0 14px 36px rgba(251, 100, 2, 0.13) !important;
}
:root body .app .quiz-option-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-position: center !important;
  background-size: cover !important;
  filter: saturate(0.88) brightness(1.03) !important;
}
:root body .app .quiz-option-label {
  position: absolute !important;
  z-index: 1 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  padding: 8px 7px 9px !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
:root body .app .quiz-option-label i {
  display: none !important;
}
:root body .app .quiz-option-label b {
  font-weight: 600 !important;
}
/* галочка выбранного варианта на телефоне — в углу фото */
:root body .app .quiz-option.is-selected .quiz-option-image::after {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--sf-accent) !important;
  content: '✓' !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  text-align: center !important;
}
@media (min-width: 768px) {
:root body .app .quiz-option-image {
    position: static !important;
    min-height: 96px !important;
}
:root body .app .quiz-option-label {
    position: static !important;
    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 12px !important;
    color: #14171a !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}
:root body .app .quiz-option-label i {
    display: grid !important;
    width: 22px !important;
    height: 22px !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #8a8176 !important;
    background: rgba(60, 50, 39, 0.06) !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 600 !important;
}
:root body .app .quiz-option.is-selected .quiz-option-label i {
    color: #fff !important;
    background: var(--sf-accent) !important;
}
:root body .app .quiz-option.is-selected .quiz-option-image::after {
    display: none !important;
}
}
/* низ карточки: линия, «Назад», подсказка, «Дальше» */
:root body .app .quiz-footer {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: auto !important;
  padding: 18px 10px 0 !important;
}
:root body .app .quiz-footer > span {
  display: none !important;
  color: #81786d !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
:root body .app .quiz-footer .quiz-back,
:root body .app .quiz-footer .quiz-next {
  width: 100% !important;
}
@media (min-width: 768px) {
/* колонки как у эталона: подсказка по центру между «Назад» и «Дальше» */
:root body .app .quiz-footer {
    grid-template-columns: 130px 1fr 170px !important;
    gap: 0 !important;
    padding-inline: 0 !important;
}
:root body .app .quiz-footer .quiz-back {
    justify-self: start !important;
}
:root body .app .quiz-footer .quiz-next {
    justify-self: end !important;
}
:root body .app .quiz-footer > span {
    display: block !important;
}
:root body .app .quiz-footer .quiz-back,
:root body .app .quiz-footer .quiz-next {
    width: auto !important;
}
}
:root body .app .quiz-back {
  padding: 12px 18px !important;
  border: 1px solid rgba(68, 58, 45, 0.14) !important;
  border-radius: 11px !important;
  color: var(--sf-ink) !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4286 !important;
  cursor: pointer !important;
}
:root body .app .quiz-back:disabled {
  cursor: default !important;
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) .quiz-next {
  padding: 12px 22px !important;
  border-color: #e95700 !important;
  border-radius: 11px !important;
  background: var(--sf-accent) !important;
  font-size: 16px !important;
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) .quiz-next:disabled {
  border-color: #e95700 !important;
  color: #fff !important;
  background: var(--sf-accent) !important;
}
/* технолог — только на компьютере */
:root body .app .quiz-advisor {
  position: relative !important;
  display: none !important;
  min-height: 773px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #f0e9df !important;
}
@media (min-width: 1192px) {
:root body .app .quiz-advisor {
    display: block !important;
}
}
@media (min-width: 1500px) {
:root body .app .quiz-advisor {
    min-height: 730px !important;
}
}
:root body .app .quiz-advisor::after {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(36, 25, 16, 0) 0%, rgba(36, 25, 16, 0.78) 100%) !important;
  content: '' !important;
}
:root body .app .quiz-advisor > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 0 !important;
}
:root body .app .quiz-advisor-badge {
  position: absolute !important;
  z-index: 2 !important;
  top: 18px !important;
  left: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: rgba(251, 100, 2, 0.79) !important;
  box-shadow: 0 9.33px 28px rgba(251, 100, 2, 0.23) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
:root body .app .quiz-advisor-badge i {
  order: 2 !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18) !important;
  animation: sf-advisor-pulse 1.8s ease-in-out infinite !important;
}
@keyframes sf-advisor-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
  }
  50% {
    opacity: 0.45;
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0);
  }
}
:root body .app .quiz-advisor > div {
  position: absolute !important;
  z-index: 2 !important;
  right: 18px !important;
  bottom: 24px !important;
  left: 18px !important;
  color: #fff !important;
}
:root body .app .quiz-advisor > div strong {
  display: block !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -0.029em !important;
  white-space: pre-line !important;
}
:root body .app .quiz-advisor > div p {
  margin-top: 9px !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}
:root body .app .quiz-advisor > div small {
  display: block !important;
  margin-top: 17px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}
/* экран контактов квиза — как последний слайд эталона */
:root body .app .quiz-contact {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 16px 0 0 !important;
}
/* метки «06 / 06» у эталона на этом шаге нет */
:root body .app .quiz-contact > .quiz-complete-mark {
  display: none !important;
}
:root body .app .quiz-contact h3 {
  font-size: 26px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}
@media (min-width: 768px) {
:root body .app .quiz-contact h3 {
    font-size: 32px !important;
}
}
:root body .app .quiz-contact > p {
  max-width: none !important;
  margin: 7px 0 20px !important;
  color: var(--sf-muted) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
:root body .app .quiz-contact-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px 20px !important;
}
@media (min-width: 768px) {
:root body .app .quiz-contact-grid {
    grid-template-columns: 1fr 1fr !important;
}
}
:root body .app .quiz-contact label {
  font-size: 14px !important;
  font-weight: 400 !important;
}
:root body .app .quiz-contact label > span {
  display: block !important;
  margin-bottom: 7px !important;
  color: var(--sf-muted) !important;
  line-height: 1.4286 !important;
}
:root body .app .quiz-contact input[type='text'],
:root body .app .quiz-contact input[type='tel'] {
  width: 100% !important;
  height: 49px !important;
  padding: 0 11px !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: 11px !important;
  color: var(--sf-ink) !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
:root body .app .quiz-contact input:focus {
  border-color: var(--sf-accent) !important;
  box-shadow: 0 0 0 3px rgba(251, 100, 2, 0.14) !important;
  outline: none !important;
}
:root body .app .quiz-contact fieldset {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 30px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
:root body .app .quiz-contact legend {
  margin-bottom: 10px !important;
  padding: 0 !important;
  color: var(--sf-muted) !important;
  font-size: 14px !important;
  line-height: 1.4286 !important;
}
:root body .app .quiz-contact fieldset label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--sf-ink) !important;
  font-size: 16px !important;
  line-height: 1.4286 !important;
}
:root body .app .quiz-contact input[type='radio'] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}
:root body .app .quiz-contact input[type='radio'],
:root body .app .sf-consent input[type='checkbox'] {
  accent-color: var(--sf-accent) !important;
}
/* согласие: мелкая серая строка, ссылка подчёркнута */
:root body .app .sf-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  margin-top: 12px !important;
  color: var(--sf-muted) !important;
  font-size: 12.8px !important;
  font-weight: 400 !important;
  line-height: 1.4286 !important;
}
:root body .app .sf-consent input[type='checkbox'] {
  flex: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}
:root body .app .sf-consent a {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
:root body .app .sf-consent a:hover {
  color: var(--sf-accent) !important;
}
:root body .app .quiz-contact-actions {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: auto !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--sf-line) !important;
}
/* ================= как работаем ================= */
:root body .app .process-section {
  padding-top: 72px !important;
  padding-bottom: 28px !important;
  background-color: var(--sf-page) !important;
  background-image: radial-gradient(circle at 88% 14%, rgba(251, 100, 2, 0.11), transparent 28%) !important;
}
:root body .app .process-heading {
  margin-bottom: 40px !important;
}
:root body .app .process-heading h2 {
  max-width: 600px !important;
}
@media (min-width: 768px) {
:root body .app .process-section {
    padding-bottom: 72px !important;
}
}
:root body .app .process-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 13px !important;
}
@media (min-width: 768px) {
:root body .app .process-grid {
    grid-template-columns: repeat(var(--sf-cols-md, 2), minmax(0, 1fr)) !important;
    gap: 18px !important;
}
}
@media (min-width: 1192px) {
:root body .app .process-grid {
    grid-template-columns: repeat(var(--sf-cols-lg, 3), minmax(0, 1fr)) !important;
}
}
:root body .app .process-card {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex-direction: column !important;
  padding: 18px !important;
  border-radius: 20px !important;
  background: var(--sf-card) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 22px 60px rgba(69, 45, 24, 0.09) !important;
}
@media (min-width: 768px) {
:root body .app .process-card {
    padding: 24px !important;
    border-radius: 22px !important;
}
}
:root body .app .process-card > img {
  width: 100% !important;
  height: 200px !important;
  margin-bottom: 16px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}
@media (min-width: 768px) {
:root body .app .process-card > img {
    height: 168px !important;
}
}
:root body .app .process-card-copy {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
}
:root body .app .process-card h3 {
  margin-bottom: 22px !important;
  font-size: 18px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.026em !important;
}
@media (min-width: 768px) {
:root body .app .process-card h3 {
    font-size: 22px !important;
}
}
/* у эталона обычный список с чёрными точками */
:root body .app .process-card ul {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
  list-style: disc !important;
}
:root body .app .process-card li {
  padding-left: 8px !important;
  color: var(--sf-ink) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
/* сроков на карточках у боевого сайта нет — поле остаётся в данных */
:root body .app .process-card-timing {
  display: none !important;
}
:root body .app .process-card-cta {
  justify-content: flex-end !important;
  min-height: 310px !important;
  padding: 18px !important;
  color: #fff !important;
  text-align: center !important;
  isolation: isolate !important;
  background-color: #241c16 !important;
  background-image:
    radial-gradient(circle at 88% 14%, rgba(251, 100, 2, 0.7), transparent 32%),
    linear-gradient(145deg, #33251c, #160f0b) !important;
}
/* верхняя тёмная вуаль эталона приглушает оранжевое пятно */
:root body .app .process-card-cta::before {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(36, 28, 22, 0.8) 0%, rgba(26, 52, 97, 0) 100%) !important;
  content: '' !important;
}
@media (min-width: 768px) {
:root body .app .process-card-cta {
    grid-column: 1 / -1 !important;
    min-height: 320px !important;
    padding: 28px !important;
    text-align: left !important;
}
}
@media (min-width: 1192px) {
:root body .app .process-card-cta {
    grid-column: auto !important;
    min-height: 0 !important;
}
}
:root body .app .process-card-cta h3 {
  margin-bottom: 0 !important;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}
@media (min-width: 768px) {
:root body .app .process-card-cta h3 {
    font-size: 30px !important;
}
}
:root body .app .process-card-cta p {
  max-width: none !important;
  margin-top: 14px !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
:root body .app .process-card-cta .button {
  width: 100% !important;
  margin-top: 22px !important;
  padding: 15px 20px !important;
  font-size: 15px !important;
}
/* ================= кейсы ================= */
:root body .app .cases-section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  background: var(--sf-page) !important;
}
/* заголовок одной фразой в две строки, как у эталона */
:root body .app .cases-section > .section-heading h2 span {
  display: inline !important;
}
:root body .app .cases-section > .section-heading h2 span + span::before {
  content: ' ' !important;
}
@media (min-width: 768px) {
:root body .app .cases-section > .section-heading h2 {
    max-width: 640px !important;
}
}
@media (min-width: 1500px) {
:root body .app .cases-section > .section-heading h2 {
    max-width: 720px !important;
}
}
:root body .app .cases-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
}
:root body .app .case-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 15px !important;
  border-radius: 20px !important;
  background: var(--sf-card) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 24px 70px rgba(69, 45, 24, 0.12) !important;
}
@media (min-width: 768px) {
:root body .app .case-card {
    padding: 20px !important;
    border-radius: 24px !important;
}
}
@media (min-width: 1192px) {
:root body .app .cases-list {
    display: block !important;
}
:root body .app .case-card {
    position: sticky !important;
    top: 118px !important;
    align-items: stretch !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px !important;
    margin-bottom: 26px !important;
    padding: 15px !important;
}
:root body .app .case-card:nth-child(2) {
    top: 134px !important;
}
:root body .app .case-card:nth-child(3) {
    top: 150px !important;
}
:root body .app .case-card:last-child {
    margin-bottom: 0 !important;
}
}
/* номера и подписи к фото у боевого сайта скрыты — поля остаются в данных */
:root body .app .case-num,
:root body .app .case-photo figcaption {
  display: none !important;
}
:root body .app .case-photo {
  position: relative !important;
  height: 275px !important;
  margin: 0 0 15px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #f0e9df !important;
}
@media (min-width: 768px) {
:root body .app .case-photo {
    height: 365px !important;
    margin-bottom: 20px !important;
}
}
@media (min-width: 1192px) {
:root body .app .case-photo {
    height: auto !important;
    min-height: 380px !important;
    margin: 0 !important;
}
}
:root body .app .case-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
:root body .app .case-body {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) .case-sub {
  max-width: none !important;
}
@media (min-width: 768px) and (max-width: 1191.98px) {
:root body .app .case-body {
    padding-right: 10px !important;
}
}
@media (min-width: 1192px) {
:root body .app .case-body {
    padding: 15px 0 !important;
}
}
:root body .app .case-body h3 {
  margin-bottom: 12px !important;
  font-size: 18px !important;
  line-height: 1.26 !important;
  letter-spacing: -0.0208em !important;
}
@media (min-width: 768px) {
:root body .app .case-body h3 {
    font-size: 21px !important;
}
}
@media (min-width: 1192px) {
:root body .app .case-body h3 {
    font-size: 24px !important;
}
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) .case-sub {
  margin-bottom: 26px !important;
  color: var(--sf-text) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
:root body .app .case-block {
  margin-bottom: 20px !important;
}
:root body .app .case-label {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
:root body .app .case-block p {
  max-width: none !important;
  color: var(--sf-text) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
@media (min-width: 768px) {
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) .case-sub,
:root body .app .case-block p {
    font-size: 16px !important;
}
:root body .app .case-label {
    font-size: 18px !important;
}
}
:root body .app .case-actions {
  display: flex !important;
  align-items: center !important;
  margin-top: 22px !important;
  padding-top: 0 !important;
  gap: 10px !important;
}
:root body .app .case-actions .button {
  flex: 0 0 calc(50% - 5px) !important;
  min-width: 0 !important;
  padding: 18px 13px !important;
  font-size: 15px !important;
  white-space: normal !important;
}
:root body .app .case-actions .button-ghost {
  padding: 15px 22px !important;
  font-size: 17px !important;
}
@media (min-width: 768px) {
:root body .app .case-actions .button {
    flex: 0 0 auto !important;
    padding-inline: 23px !important;
    white-space: nowrap !important;
}
:root body .app .case-actions .button:first-child {
    flex-basis: calc(50% - 5px) !important;
}
:root body .app .case-actions .button-ghost {
    padding-inline: 22px !important;
}
}
@media (min-width: 1192px) and (max-width: 1499.98px) {
:root body .app .case-actions .button:first-child {
    flex-basis: auto !important;
}
}
/* всплывающий отзыв */
/* ================= о компании ================= */
:root body .app .about-section {
  background: var(--sf-page) !important;
}
:root body .app .about-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 10px !important;
}
@media (min-width: 1192px) {
:root body .app .about-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
:root body .app .about-side {
  display: flex !important;
  flex-direction: column !important;
}
@media (min-width: 768px) {
:root body .app .about-side {
    max-width: 630px !important;
}
}
@media (min-width: 1192px) {
:root body .app .about-side {
    max-width: none !important;
    padding-right: 34px !important;
}
}
:root body .app .about-side > .section-heading {
  margin-bottom: 28px !important;
}
:root body .app .about-side > .section-heading h2 {
  letter-spacing: -1.1px !important;
}
@media (min-width: 1192px) {
:root body .app .about-side > .section-heading h2 {
    font-size: 36px !important;
}
}
/* факты без разделителей, как у эталона */
:root body .app .about-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
:root body .app .about-fact h3 {
  margin-bottom: 10px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}
:root body .app .about-fact p {
  max-width: none !important;
  color: var(--sf-text) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
:root body .app .about-photo {
  position: relative !important;
  min-height: 260px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}
@media (min-width: 768px) {
:root body .app .about-photo {
    min-height: 320px !important;
}
}
@media (min-width: 1192px) {
:root body .app .about-photo {
    min-height: 420px !important;
}
}
:root body .app .about-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 42% !important;
}
/* подписи у фото эталона нет — поле остаётся в данных */
:root body .app .about-photo figcaption {
  display: none !important;
}
/* ================= цены ================= */
:root body .app .price-section {
  color: #fff7f0 !important;
  background-image:
    radial-gradient(900px 420px at 84% 12%, rgba(251, 100, 2, 0.22), rgba(251, 100, 2, 0) 62%),
    linear-gradient(180deg, #2c2822 0%, #1c1a16 100%) !important;
}
:root body .app .price-section h2 {
  color: #fff7f0 !important;
}
:root body .app .price-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 0 !important;
}
@media (min-width: 1192px) {
:root body .app .price-grid {
    grid-template-columns: 432px 467px !important;
    align-items: start !important;
    justify-content: space-between !important;
}
:root body .app .price-copy {
    padding-top: 12px !important;
}
}
:root body .app .price-copy h2 {
  max-width: none !important;
  margin-bottom: 24px !important;
  letter-spacing: -1.1px !important;
}
@media (min-width: 1192px) {
:root body .app .price-copy h2 {
    font-size: 36px !important;
}
}
:root body .app .price-copy p {
  max-width: none !important;
  margin-bottom: 16px !important;
  color: #c7c0ba !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
/* сноска у эталона без оранжевой черты */
:root body .app .price-copy .price-note {
  padding-left: 0 !important;
  border-left: 0 !important;
  color: #c7c0ba !important;
}
@media (min-width: 1192px) {
:root body .app .price-copy p:last-child {
    margin-bottom: 0 !important;
}
}
:root body .app .price-table {
  padding: 24px 22px !important;
  border-radius: 22px !important;
  background: rgba(255, 247, 240, 0.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 247, 240, 0.16) !important;
}
@media (min-width: 768px) {
:root body .app .price-table {
    padding: 32px 34px !important;
}
}
:root body .app .price-table h3 {
  margin-bottom: 20px !important;
  color: #fff7f0 !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
:root body .app .price-table dl {
  margin: 0 !important;
}
:root body .app .price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255, 247, 240, 0.12) !important;
}
:root body .app .price-row:last-child {
  border-bottom: 0 !important;
}
:root body .app .price-row dt {
  margin: 0 !important;
  color: #fff7f0 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
:root body .app .price-row dd {
  margin: 0 !important;
  color: var(--sf-accent) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}
/* ================= финальный экран ================= */
:root body .app .cta-section {
  background: var(--sf-page) !important;
}
:root body .app .cta-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 47px !important;
}
@media (min-width: 768px) {
:root body .app .cta-grid {
    gap: 40px !important;
}
}
@media (min-width: 1192px) {
:root body .app .cta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}
}
:root body .app .cta-copy h2 {
  max-width: calc(100% - 25px) !important;
  margin-bottom: 20px !important;
  font-size: 28px !important;
  letter-spacing: -1.1px !important;
}
@media (min-width: 768px) {
:root body .app .cta-copy h2 {
    max-width: 520px !important;
    font-size: 32px !important;
}
}
@media (min-width: 1192px) {
:root body .app .cta-copy h2 {
    max-width: 360px !important;
    font-size: 36px !important;
}
}
:root body .app .cta-copy > p {
  max-width: none !important;
  margin-bottom: 28px !important;
  color: var(--sf-text) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
:root body .app .cta-points {
  display: grid !important;
  gap: 9.5px !important;
  margin: 0 0 60px !important;
  padding: 0 !important;
  list-style: none !important;
}
:root body .app .cta-points li {
  position: relative !important;
  padding-left: 14px !important;
  color: #333 !important;
  font-size: 16px !important;
  line-height: 1.4286 !important;
}
:root body .app .cta-points li::before {
  position: absolute !important;
  top: 0.7em !important;
  left: 0 !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--sf-accent) !important;
  content: '' !important;
}
:root body .app .cta-contacts {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  padding-top: 26px !important;
  border-top: 1px solid var(--sf-line) !important;
}
@media (min-width: 768px) {
:root body .app .cta-contacts {
    grid-template-columns: 224fr 224fr 232fr !important;
    gap: 20px !important;
}
}
@media (min-width: 1192px) {
:root body .app .cta-contacts {
    grid-template-columns: 171fr 171fr 177fr !important;
}
}
:root body .app .cta-contact-label {
  display: block !important;
  margin-bottom: 5px !important;
  color: var(--sf-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
:root body .app .cta-contacts > div > :last-child {
  display: block !important;
  color: var(--sf-accent) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}
@media (min-width: 768px) {
:root body .app .cta-contact-label {
    margin-bottom: 4px !important;
    font-size: 18px !important;
}
:root body .app .cta-contacts > div > :last-child {
    font-size: 18px !important;
}
}
:root body .app .cta-card {
  padding: 22px 20px !important;
  border-radius: 24px !important;
  background: var(--sf-card) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.84),
    0 24px 80px rgba(72, 46, 20, 0.1) !important;
}
@media (min-width: 768px) {
:root body .app .cta-card {
    padding: 30px !important;
}
}
:root body .app .cta-card form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px 20px !important;
  padding-bottom: 29px !important;
}
@media (min-width: 768px) {
:root body .app .cta-card form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
:root body .app .cta-field {
  display: block !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
:root body .app .cta-field > span {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--sf-muted) !important;
  line-height: 1.4286 !important;
}
:root body .app .cta-field-wide,
:root body .app .cta-card .cta-submit,
:root body .app .cta-form-note,
:root body .app .cta-card .sf-consent {
  grid-column: 1 / -1 !important;
}
/* порядок как у эталона: кнопка, под ней согласие */
:root body .app .cta-card .cta-submit {
  order: 1 !important;
}
:root body .app .cta-card .sf-consent {
  order: 2 !important;
  margin-top: 4px !important;
}
:root body .app .cta-card .cta-form-note {
  display: none !important;
}
:root body .app .cta-card input:not([type='checkbox']),
:root body .app .cta-card select {
  width: 100% !important;
  height: 49px !important;
  padding: 0 11px !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: 12px !important;
  color: var(--sf-ink) !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  outline: none !important;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease !important;
}
:root body .app .cta-card select {
  padding-right: 40px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #8a8177 50%),
    linear-gradient(135deg, #8a8177 50%, transparent 50%) !important;
  background-repeat: no-repeat !important;
  background-position:
    calc(100% - 20px) 21px,
    calc(100% - 14px) 21px !important;
  background-size:
    6px 6px,
    6px 6px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
:root body .app .cta-card input:focus,
:root body .app .cta-card select:focus {
  border-color: var(--sf-accent) !important;
  box-shadow: 0 0 0 3px rgba(251, 100, 2, 0.14) !important;
}
:root body .app .cta-card input::placeholder {
  color: #9a938a !important;
}
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) .cta-submit {
  width: 100% !important;
  padding: 16px 20px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--sf-accent) !important;
  font-size: 17px !important;
}
:root body .app .cta-form-note {
  color: #8a8177 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
/* ===== Ручные поправки: разметка Instatic против Payload =====
   Всё, что переводчик не может сделать сам: у Instatic нет обёртки .sf-wrap,
   у шапки свой переключатель языков и своя шторка, у списков свои точки,
   у кейсов номер в сетке. Подвал Instatic не трогаем — он свой, живой. */

/* сетка: дети секций Instatic берут ширину из --grid-width */
:root body .app {
  --grid-width: var(--sf-container) !important;
  background: var(--sf-page) !important;
}

/* секции Instatic — flex с зазором между детьми; у Payload зазоров нет */
:root body .app :is(.quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) {
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* у каркаса Instatic шрифт задан на многих узлах прямо — наследуем от секции (Manrope SF) */
:root body .app :is(.header, .hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) * { font-family: inherit !important; }
:root body .app .header .phone > span { font: inherit !important; }

/* кнопки Instatic: текст в span, своя минимальная высота и рамка */
:root body .app .button { min-height: 0 !important; }
:root body .app .button > span { font: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; }
/* заголовки Instatic держат кегль на вложенных span */
:root body .app :is(.hero, .quiz-section, .process-section, .cases-section, .about-section, .price-section, .cta-section) h2 > span {
  font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
}

/* ---------- шапка ---------- */
:root body .app .brand-description { margin: 0 !important; }
:root body .app .header {
  gap: 0 !important;
  grid-template-columns: none !important;
}
:root body .app .header > nav {
  justify-content: flex-start !important;
}
:root body .app .header > nav a > span {
  font: inherit !important;
  color: inherit !important;
}
:root body .app .header-actions .button > span {
  font: inherit !important;
}
/* порядок в блоке действий: телефон, переключатель языков, кнопка (просьба Никиты 24.09) */
:root body .app .header-actions .phone { order: 0 !important; }
:root body .app .header-actions .sf-lang { order: 1 !important; }
:root body .app .header-actions > .button { order: 2 !important; }
/* бургер Instatic — вместо бургера Payload: оранжевый квадрат 44 × 44 */
:root body .app .sf-menu-toggle {
  flex: none !important;
  width: 44px !important;
  height: 44px !important;
  margin-left: 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sf-accent) !important;
}
:root body .app .sf-menu-toggle span,
:root body .app .sf-menu-toggle span::before,
:root body .app .sf-menu-toggle span::after {
  background: #fff !important;
}
@media (max-width: 767.98px) {
  :root body .app .header-actions { gap: 10px !important; }
}
@media (min-width: 768px) and (max-width: 1191.98px) {
  /* планшет: телефон правее логотипа, бургер у правого края */
  /* планшет: телефон справа, рядом с переключателем, и крупнее (правка 24.09) */
  :root body .app .header .phone { display: inline !important; margin-left: auto !important; margin-right: 0 !important; font-size: 18px !important; }
}
@media (min-width: 1192px) {
  :root body .app .header > nav { display: flex !important; }
  :root body .app .header .phone { display: inline !important; }
  :root body .app .header-actions > .button { display: inline-flex !important; }
  :root body .app .sf-menu-toggle,
  :root body .app .sf-menu-layer { display: none !important; }
}
/* 1192–1499: в 1140 px шапка Payload занята целиком, переключателю нужно ~80 px */
@media (min-width: 1192px) and (max-width: 1499.98px) {
  :root body .app .header > nav { gap: 14px !important; margin-left: 12px !important; }
  :root body .app .header-actions { gap: 10px !important; margin-left: 10px !important; }
  :root body .app .header .sf-lang-current { gap: 6px !important; padding: 0 10px 0 6px !important; }
}

/* ---------- первый экран ---------- */
@media (min-width: 768px) {
  :root body .app .hero {
    padding-left: calc((100% - var(--sf-container)) / 2) !important;
    padding-right: calc((100% - var(--sf-container)) / 2) !important;
  }
}
:root body .app .hero-content { transform: none !important; }
:root body .app .benefit > div { display: block !important; gap: 0 !important; }
:root body .app .benefit h3 { display: block !important; }
:root body .app .hero-content > .sf-cta .button > span { font: inherit !important; }
@media (max-width: 1191.98px) {
  /* ручные переносы заголовка — только на компьютере */
  :root body .app .hero h1 br,
  :root body .app .hero-content > .sf-cta p br { display: none !important; }
}

/* ---------- квиз ---------- */
/* у Payload шаги лежат прямо в карточке, у Instatic — в .sf-quiz > section */
:root body .app .quiz-card > .sf-quiz,
:root body .app .quiz-card .sf-quiz-step:not([hidden]) {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
:root body .app .quiz-card .sf-quiz-step[hidden] { display: none !important; }
/* до скрипта (холст редактора, предпросмотр Instatic) виден только первый шаг — как в sf-finish.css */
:root body .app .quiz-card .sf-quiz:not(.is-ready) .sf-quiz-step + .sf-quiz-step { display: none !important; }
:root body .app .quiz-intro > p { margin: 0 !important; }
:root body .app .quiz-intro > p br { display: none !important; }
/* у узлов Instatic ширина и кегль часто записаны прямо в style — снимаем ширину */
:root body .app :is(.quiz-intro, .section-heading, .process-heading) > * { width: auto !important; }
:root body .app .quiz-progress-row > * { order: 0 !important; }
:root body .app .quiz-card { gap: 0 !important; }
:root body .app .quiz-progress-row > * { grid-column: auto !important; grid-row: auto !important; }
:root body .app .quiz-option-label > b { font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; }
@media (max-width: 767.98px) {
  :root body .app .quiz-options { grid-auto-rows: auto !important; }
  :root body .app .quiz-option { min-height: 0 !important; height: auto !important; }
}
:root body .app .quiz-option.has-image { grid-template-columns: none !important; }
:root body .app .quiz-footer > span { grid-column: auto !important; grid-row: auto !important; }
:root body .app .quiz-next > span,
:root body .app .quiz-back > span { font: inherit !important; }
:root body .app .quiz-layout { min-height: 0 !important; }
@media (min-width: 1192px) {
  :root body .app .quiz-advisor { min-height: 773px !important; }
}
@media (min-width: 1500px) {
  :root body .app .quiz-advisor { min-height: 730px !important; }
}
:root body .app .quiz-advisor > div { padding: 0 !important; }
:root body .app .quiz-advisor-badge > span { font: inherit !important; letter-spacing: inherit !important; }
:root body .app .quiz-advisor > div strong br { display: initial; }

/* ---------- как работаем ---------- */
:root body .app .process-card { gap: 0 !important; border: 0 !important; }
:root body .app .process-card-copy { padding: 0 !important; }
:root body .app .process-card li { position: static !important; }
:root body .app .process-card li::before { display: none !important; content: none !important; }
:root body .app .process-card li > span { display: inline !important; padding: 0 !important; font: inherit !important; color: inherit !important; }
:root body .app .process-card-cta { grid-column: auto; }
/* планшет: «Начните с расчёта» встаёт в пустую клетку рядом с последней карточкой (правка 24.09) */
@media (min-width: 768px) and (max-width: 1191.98px) {
  :root body .app .process-card-cta { grid-column: auto !important; min-height: 0 !important; }
}
:root body .app .process-card-cta .button > span { font: inherit !important; }

/* ---------- кейсы ---------- */
:root body .app .case-card > * { grid-column: auto !important; grid-row: auto !important; }
:root body .app .case-card { border: 0 !important; }
:root body .app .case-photo { max-width: none !important; width: auto !important; justify-self: stretch !important; align-self: stretch !important; }
:root body .app .case-actions .button > span { font: inherit !important; }
@media (max-width: 1191.98px) {
  :root body .app .case-card { position: relative !important; top: auto !important; }
  :root body .app .case-photo { min-height: 0 !important; }
}

/* ---------- о компании ---------- */
:root body .app .about-side > * { width: auto !important; max-width: none !important; }
:root body .app .about-grid { padding: 0 !important; }
:root body .app .about-fact,
:root body .app .about-fact + .about-fact { padding: 0 !important; border: 0 !important; }

/* ---------- цены ---------- */
:root body .app .price-table h3 { display: block !important; }
:root body .app .price-row dt,
:root body .app .price-row dd { width: auto !important; padding: 0 !important; border: 0 !important; }

/* ---------- финальный экран ---------- */
:root body .app .cta-points li > span { display: inline !important; font: inherit !important; color: inherit !important; }
:root body .app .cta-contacts > * { grid-column: auto !important; }
:root body .app .cta-card form > .sf-form-status { grid-column: 1 / -1 !important; order: 3 !important; }
:root body .app .sf-form-status:empty { display: none !important; }
/* согласие у Instatic — флажок, текст и ссылка отдельными узлами: одной строкой, флажок слева */
:root body .app :is(.cta-card, .quiz-contact) .sf-consent { display: block !important; position: relative !important; padding-left: 25px !important; }
:root body .app :is(.cta-card, .quiz-contact) .sf-consent input[type='checkbox'] { position: absolute !important; top: 0 !important; left: 0 !important; }
:root body .app .cta-card form > input[type='hidden'] { display: none !important; }

/* ---------- холст редактора Instatic: vh там равен высоте кадра ---------- */
:root body[data-instatic-iframe-interaction="canvas"] .app .hero { min-height: 812px !important; }
@media (min-width: 768px) {
  :root body[data-instatic-iframe-interaction="canvas"] .app .hero { min-height: 900px !important; }
}

/* ===== Служебные страницы: политика и 404 — как у Payload =====
   Разметка Instatic своя (sf-page-header, sf-legal-main, sf-not-found-main),
   переводчик её не знает. Шапка — то же стекло, что на главной; переключатель
   языков остаётся. Меню на этих страницах нет, поэтому на телефоне кнопку
   расчёта прячем, как Payload (у него она в шторке). Подвал страниц не трогаем. */
:root body :is(.sf-legal-page, .sf-not-found-page) {
  color: var(--sf-ink) !important;
  background: var(--sf-page) !important;
  font-family: 'Manrope SF', Manrope, 'Avenir Next', Arial, sans-serif !important;
  font-synthesis: none;
}
:root body :is(.sf-legal-page, .sf-not-found-page) * { font-family: inherit !important; }
:root body .sf-page-header {
  position: fixed !important;
  z-index: 40 !important;
  top: 10px !important;
  left: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: var(--sf-container) !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 8px 9px 8px 14px !important;
  transform: translateX(-50%) !important;
  border-radius: 14px !important;
  background: rgba(255, 252, 245, 0.7) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 16px 50px rgba(81, 55, 32, 0.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
:root body .sf-page-brand {
  flex: none !important;
  margin-right: auto !important;
  color: #fb6402 !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.0536em !important;
  white-space: nowrap !important;
}
:root body .sf-page-brand small { display: none !important; }
:root body .sf-page-header .sf-lang { margin: 0 !important; }
:root body .sf-page-header .button { display: none !important; }
@media (min-width: 768px) {
  :root body .sf-page-header {
    top: 18px !important;
    min-height: 76px !important;
    padding: 10px 12px 10px 22px !important;
    border-radius: 18px !important;
    gap: 20px !important;
  }
  :root body .sf-page-brand { color: #fb6300 !important; font-size: 30px !important; line-height: 1.4286 !important; letter-spacing: 0 !important; }
  :root body .sf-page-brand small {
    display: block !important;
    margin: 0 !important;
    color: #777065 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01875em !important;
  }
  :root body .sf-page-header .button { display: inline-flex !important; }
}
/* кнопки служебных страниц — как у Payload */
:root body :is(.sf-legal-page, .sf-not-found-page) .button {
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 18px 25px !important;
  border: 1px solid #e95700 !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: #fb6300 !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4286 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
:root body :is(.sf-legal-page, .sf-not-found-page) .button:hover { border-color: #ff8b41 !important; background: #ff8b41 !important; }
:root body .sf-page-header .button { min-width: 214px !important; padding: 15px 20px !important; font-size: 15px !important; background: #fb6400 !important; }
@media (min-width: 768px) {
  :root body :is(.sf-legal-main, .sf-not-found-main) .button { font-size: 17px !important; }
}

:root body :is(.sf-legal-main, .sf-not-found-main, .sf-page-footer) { width: var(--sf-container) !important; margin-inline: auto !important; }
:root body .sf-legal-main { padding: 110px 0 64px !important; }
:root body .sf-legal-main h1,
:root body :lang(hy) .sf-legal-main h1 {
  max-width: none !important;
  margin: 0 0 24px !important;
  font-size: clamp(28px, 6vw, 40px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
  text-wrap: pretty;
}
:root body .sf-legal-copy {
  max-width: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
:root body .sf-legal-copy p {
  max-width: 68ch !important;
  margin: 0 0 12px !important;
  color: var(--sf-muted) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
:root body .sf-legal-copy strong {
  display: inline-block !important;
  margin-top: 20px !important;
  color: var(--sf-ink) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.03em !important;
}
:root body .sf-legal-copy p:first-child strong:first-child { margin-top: 0 !important; }
:root body .sf-legal-copy a { color: var(--sf-accent) !important; }

:root body .sf-not-found-main {
  display: flex !important;
  min-height: 100svh !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 110px 0 64px !important;
}
:root body .sf-not-found-main > * { margin: 0 !important; }
:root body .sf-not-found-code {
  width: auto !important;
  color: var(--sf-accent) !important;
  font-size: clamp(64px, 18vw, 140px) !important;
  font-weight: 600 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
}
:root body .sf-not-found-main h1 {
  max-width: none !important;
  font-size: clamp(26px, 6vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.035em !important;
}
:root body .sf-not-found-main > p:not(.sf-not-found-code) {
  max-width: 68ch !important;
  color: var(--sf-muted) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
:root body[data-instatic-iframe-interaction="canvas"] .sf-not-found-main { min-height: 700px !important; }

/* ===== Переключатель языков: флаг в кружке, имя на своём письме, стрелка =====
   Кнопку и список собирает sf-interactions-v3.js (span.sf-flag[data-lang] + span.sf-lang-name).
   До скрипта (холст редактора) — плашка текущего языка с флагом из ::before. */
:root {
  --sf-flag-ru: linear-gradient(#fff 0 33.4%, #0039a6 33.4% 66.7%, #d52b1e 66.7%);
  --sf-flag-hy: linear-gradient(#d90012 0 33.4%, #0033a0 33.4% 66.7%, #f2a800 66.7%);
  --sf-flag-en: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect width='30' height='30' fill='%23fff'/%3E%3Cpath d='M0 0h30v2.31H0zm0 4.62h30v2.31H0zm0 4.62h30v2.31H0zm0 4.62h30v2.31H0zm0 4.62h30v2.31H0zm0 4.62h30v2.31H0zm0 4.62h30v2.31H0z' fill='%23B22234'/%3E%3Crect width='15.5' height='16.15' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='3' cy='3' r='.9'/%3E%3Ccircle cx='7.7' cy='3' r='.9'/%3E%3Ccircle cx='12.4' cy='3' r='.9'/%3E%3Ccircle cx='5.35' cy='5.9' r='.9'/%3E%3Ccircle cx='10.05' cy='5.9' r='.9'/%3E%3Ccircle cx='3' cy='8.8' r='.9'/%3E%3Ccircle cx='7.7' cy='8.8' r='.9'/%3E%3Ccircle cx='12.4' cy='8.8' r='.9'/%3E%3Ccircle cx='5.35' cy='11.7' r='.9'/%3E%3Ccircle cx='10.05' cy='11.7' r='.9'/%3E%3Ccircle cx='3' cy='14.4' r='.9'/%3E%3Ccircle cx='7.7' cy='14.4' r='.9'/%3E%3Ccircle cx='12.4' cy='14.4' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  --sf-flag-gloss: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.14));
}
:root body .sf-flag,
:root body .sf-lang:not(.is-dropdown) .sf-lang-link[aria-current="true"]::before {
  position: relative;
  display: inline-block;
  flex: none;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(20, 23, 26, 0.1), 0 2px 5px rgba(20, 23, 26, 0.18);
}
:root body .sf-flag::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sf-flag-gloss);
  content: '';
}
:root body .sf-flag[data-lang="ru"] { background-image: var(--sf-flag-ru); }
:root body .sf-flag[data-lang="hy"] { background-image: var(--sf-flag-hy); }
:root body .sf-flag[data-lang="en"] { background-image: var(--sf-flag-en); }
:root body .sf-lang:not(.is-dropdown) .sf-lang-link[aria-current="true"]::before { content: ''; }
:root body .sf-lang:not(.is-dropdown) .sf-lang-link[hreflang="ru"]::before { background-image: var(--sf-flag-gloss), var(--sf-flag-ru); }
:root body .sf-lang:not(.is-dropdown) .sf-lang-link[hreflang="hy"]::before { background-image: var(--sf-flag-gloss), var(--sf-flag-hy); }
:root body .sf-lang:not(.is-dropdown) .sf-lang-link[hreflang="en"]::before { background-image: var(--sf-flag-gloss), var(--sf-flag-en); }

/* кнопка: пилюля как на образце — флаг, имя, стрелка вниз */
:root body .sf-lang-current,
:root body .sf-lang:not(.is-dropdown) .sf-lang-link[aria-current="true"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 14px 0 8px !important;
  border: 1px solid rgba(55, 47, 37, 0.12) !important;
  border-radius: 999px !important;
  color: #211f1b !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 6px 18px rgba(81, 55, 32, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-family: 'Manrope SF', Manrope, 'Avenir Next', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
:root body .sf-lang-current::after,
:root body .sf-lang:not(.is-dropdown) .sf-lang-link[aria-current="true"]::after {
  width: 7px !important;
  height: 7px !important;
  margin: 0 0 3px 2px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  content: '' !important;
  transition: transform 160ms ease, margin 160ms ease;
}
:root body .sf-lang-current[aria-expanded="true"]::after { margin: 3px 0 0 2px !important; transform: rotate(-135deg) !important; }
:root body .sf-lang-current:hover,
:root body .sf-lang-current[aria-expanded="true"] {
  border-color: var(--sf-accent, #fb6402) !important;
  color: #211f1b !important;
  box-shadow: 0 8px 22px rgba(251, 100, 2, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* список: флаг, полное имя, галочка у текущего */
:root body .sf-lang-menu {
  min-width: 190px !important;
  padding: 6px !important;
  border: 1px solid rgba(55, 47, 37, 0.1) !important;
  border-radius: 18px !important;
  background: #fffdf9 !important;
  box-shadow: 0 18px 44px rgba(81, 55, 32, 0.18) !important;
}
:root body .sf-lang-menu .sf-lang-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 0 14px 0 8px !important;
  border-radius: 12px !important;
  color: #211f1b !important;
  font-family: 'Manrope SF', Manrope, 'Avenir Next', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
:root body .sf-lang-menu .sf-lang-link:hover { background: #f4f2ef !important; }
:root body .sf-lang-menu .sf-lang-link[aria-current="true"] { font-weight: 600 !important; }
:root body .sf-lang-menu .sf-lang-link[aria-current="true"]::after {
  width: 6px;
  height: 11px;
  margin: 0 3px 3px auto;
  border-right: 2px solid var(--sf-accent, #fb6402);
  border-bottom: 2px solid var(--sf-accent, #fb6402);
  transform: rotate(45deg);
  content: '';
}

/* подпись под логотипом не шире самого логотипа (правка Никиты 24.09): армянская и английская
   фразы длиннее русской — кегль под ширину «Sewing Factory» (218 px при 30 px) */
@media (min-width: 768px) {
  :root body :lang(hy) :is(.brand .brand-description, .sf-page-brand small) { font-size: 9.3px !important; }
  :root body :lang(en) :is(.brand .brand-description, .sf-page-brand small) { font-size: 8.9px !important; }
}


/* ===== Правки Никиты по видео 24.09 ===== */

/* --- квиз: метка «Вопрос N» 14 px; метка и вопрос в одну строку на компьютере и планшете --- */
:root body .app .quiz-question-head > span { font-size: 14px !important; padding: 7px 14px !important; }
@media (min-width: 768px) {
  :root body .app .quiz-question-head { flex-direction: row !important; align-items: center !important; gap: 14px !important; }
}

/* --- квиз: квадратные карточки; шаги с четырьмя вариантами — четыре высокие колонки;
   область вариантов одной высоты на всех шагах (по первому). Ширину берём от .sf-quiz. --- */
@media (min-width: 768px) {
  :root body .app .quiz-card > .sf-quiz { container-type: inline-size; }
  :root body .app .quiz-card .sf-quiz-step .quiz-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: calc((100cqw - 28px) / 3) !important;
    gap: 14px !important;
  }
  :root body .app .quiz-card .sf-quiz-step:nth-child(4) .quiz-options,
  :root body .app .quiz-card .sf-quiz-step:nth-child(5) .quiz-options {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: calc((100cqw - 28px) / 3 * 2 + 14px) !important;
  }
  :root body .app .quiz-option,
  :root body .app .sf-quiz-step:nth-child(4) .quiz-options .quiz-option {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  :root body .app .quiz-option-image { min-height: 0 !important; height: auto !important; }
  /* все шаги одной высоты: прогресс, вопрос, две строки квадратов, низ карточки */
  :root body .app .quiz-card .sf-quiz .sf-quiz-step:not([hidden]) { min-height: calc((100cqw - 28px) / 3 * 2 + 14px + 200px) !important; }
  :root body .app .quiz-card { min-height: 0 !important; }
}

/* --- квиз: технолог по высоте равен карточке --- */
@media (min-width: 1192px) {
  :root body .app .quiz-layout { align-items: stretch !important; }
  :root body .app .quiz-advisor,
  :root body .app .quiz-advisor[class] { min-height: 0 !important; height: auto !important; }
}

/* --- квиз: «Расчёт почти готов» — как обычный шаг: те же поля, «Назад» слева,
   «Отправить» справа внизу, согласие над кнопками --- */
:root body .app .quiz-contact {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
:root body .app .quiz-contact > .sf-consent { order: 1 !important; margin: 18px 0 0 !important; }
:root body .app .quiz-contact > .quiz-contact-actions {
  order: 2 !important;
  width: 100% !important;
  margin-top: auto !important;
  padding: 18px 0 0 !important;
  justify-content: space-between !important;
}
:root body .app .quiz-contact > .sf-form-status { order: 3 !important; }
:root body .app .quiz-contact > .sf-consent + * { margin-top: 0; }
:root body .app .quiz-contact .quiz-contact-grid,
:root body .app .quiz-contact fieldset { width: 100% !important; max-width: none !important; }

/* --- кнопки: текст по центру --- */
:root body .app .button { justify-content: center !important; text-align: center !important; }
:root body .app .button > span { text-align: center !important; }

/* --- цены: колонки пополам, заголовок в две строки, текст крупнее --- */
@media (min-width: 1192px) {
  :root body .app .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  :root body .app .price-copy { max-width: none !important; width: auto !important; padding-right: 40px !important; }
}
:root body .app .price-copy h2 { max-width: 16em !important; }
:root body .app .price-copy p { font-size: 18px !important; line-height: 1.55 !important; }
:root body .app .price-row :is(dt, dd) { font-size: 19px !important; }

/* --- финальный экран: заголовок в две строки, колонки одной ширины --- */
@media (min-width: 1192px) {
  :root body .app .cta-copy h2 { max-width: 14em !important; }
  :root body .app .cta-copy { padding-right: 20px !important; }
}
/* узкие высокие карточки (шаги 4 и 5): длинные слова переносим, а не обрезаем */
@media (min-width: 768px) {
  :root body .app .quiz-card .sf-quiz-step:is(:nth-child(4), :nth-child(5)) .quiz-option-label { font-size: 15px !important; }
  :root body .app .quiz-card .sf-quiz-step:is(:nth-child(4), :nth-child(5)) .quiz-option-label > b { hyphens: auto; overflow-wrap: break-word; }
}

/* ===== Окно заявки из шапки и кейсов (правка 24.09). Собирает sf-interactions-v3.js ===== */
.sf-lead-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 23, 26, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: 'Manrope SF', Manrope, 'Avenir Next', Arial, sans-serif;
}
.sf-lead-modal[hidden] { display: none !important; }
.sf-lead-dialog {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  padding: 36px 32px 28px;
  border-radius: 24px;
  background: var(--sf-card, #fffdf9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.84), 0 30px 90px rgba(35, 25, 15, 0.3);
  color: var(--sf-ink, #211f1b);
}
.sf-lead-dialog * { font-family: inherit; box-sizing: border-box; }
.sf-lead-dialog h2 {
  margin: 0 36px 12px 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.sf-lead-text {
  margin: 0 0 24px;
  color: var(--sf-muted, #68635a);
  font-size: 16px;
  line-height: 1.55;
}
.sf-lead-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sf-line, rgba(55, 47, 37, 0.14));
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.sf-lead-close::before,
.sf-lead-close::after {
  position: absolute;
  top: 19px;
  left: 12px;
  width: 15px;
  height: 1.6px;
  background: #23211c;
  content: '';
}
.sf-lead-close::before { transform: rotate(45deg); }
.sf-lead-close::after { transform: rotate(-45deg); }
.sf-lead-close:hover { border-color: var(--sf-accent, #fb6402); }
.sf-lead-form { display: grid; gap: 16px; }
.sf-lead-form .sf-lead-field { display: block; width: auto; font-size: 16px; font-weight: 600; }
.sf-lead-form .sf-lead-field > span {
  display: block;
  margin-bottom: 8px;
  color: var(--sf-muted, #68635a);
  font: inherit;
  line-height: 1.4286;
}
.sf-lead-form input:not([type='checkbox']):not([type='hidden']) {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--sf-line, rgba(55, 47, 37, 0.14));
  border-radius: 12px;
  color: var(--sf-ink, #211f1b);
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  outline: none;
}
.sf-lead-form input:focus { border-color: var(--sf-accent, #fb6402); box-shadow: 0 0 0 3px rgba(251, 100, 2, 0.14); }
.sf-lead-form input[data-instatic-honeypot] { display: none; }
.sf-lead-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 17px 20px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--sf-accent, #fb6402);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}
.sf-lead-submit:hover { background: #ff8b41; }
.sf-lead-form .sf-consent {
  position: relative;
  display: block !important;
  padding-left: 25px;
  color: var(--sf-muted, #68635a);
  font-size: 13px;
  line-height: 1.45;
}
.sf-lead-form .sf-consent input { position: absolute; top: 0; left: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--sf-accent, #fb6402); }
.sf-lead-form .sf-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sf-lead-form .sf-form-status:empty { display: none; }
@media (max-width: 767.98px) {
  .sf-lead-dialog { padding: 30px 20px 22px; border-radius: 20px; }
  .sf-lead-dialog h2 { font-size: 24px; }
}

/* квиз, русская версия: заголовок и подзаголовок слиты в одну фразу в две строки (правка 24.09);
   на hy и en перенесено 24.09 после приёмки русской */
:root body .app .quiz-intro > p { display: none !important; }
@media (min-width: 768px) {
  :root body .app .quiz-intro > h2 { max-width: 20em !important; }
}

/* --- кейсы: стопка карточек (правка 24.09). Карточки одной высоты, нижние отступы 32 / 16 / 0:
   при выходе из списка стопка уезжает целиком, отступы 16 px между краями сохраняются --- */
@media (min-width: 1192px) {
  :root body .app .case-card { min-height: var(--sf-case-h, 0px) !important; }
  :root body .app .case-card:nth-child(1) { margin-bottom: 32px !important; }
  :root body .app .case-card:nth-child(2) { margin-bottom: 16px !important; }
  :root body .app .case-card:nth-child(3) { margin-bottom: 0 !important; }
}


/* ===== Политика и 404 — как на Creatium (правка 24.09) ===== */
:root body .sf-legal-main { padding: 118px 0 72px !important; }
@media (min-width: 768px) { :root body .sf-legal-main { padding-top: 130px !important; } }
:root body .sf-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.4;
}
:root body .sf-breadcrumbs a { color: var(--sf-ink, #211f1b); text-decoration: none; }
:root body .sf-breadcrumbs a:hover { color: var(--sf-accent, #fb6402); }
:root body .sf-breadcrumbs [aria-current] { color: var(--sf-accent, #fb6402); }
:root body .sf-breadcrumbs-sep { width: 7px; height: 7px; border-top: 1.6px solid var(--sf-accent, #fb6402); border-right: 1.6px solid var(--sf-accent, #fb6402); transform: rotate(45deg); }
:root body .sf-legal-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 28px 22px 36px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(69, 45, 24, 0.06);
}
@media (min-width: 768px) { :root body .sf-legal-card { padding: 32px 26px 44px; } }
:root body .sf-legal-card h1,
:root body :lang(hy) .sf-legal-card h1 {
  margin: 0 0 28px !important;
  color: #3d3a36 !important;
  font-size: clamp(26px, 4vw, 34px) !important;
  line-height: 1.18 !important;
}
:root body .sf-legal-card .sf-legal-copy p { max-width: none !important; color: #4a4640 !important; }
:root body .sf-legal-card .sf-legal-copy strong { color: #3d3a36 !important; font-size: 17px !important; }

:root body .sf-not-found-main {
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 120px 0 90px !important;
  text-align: center !important;
}
:root body .sf-not-found-code {
  color: #3d3a36 !important;
  font-size: clamp(64px, 10vw, 96px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
:root body .sf-not-found-main h1 { max-width: 20em !important; font-size: clamp(20px, 2.4vw, 24px) !important; font-weight: 500 !important; letter-spacing: -0.01em !important; }
:root body .sf-not-found-main > p:not(.sf-not-found-code) { max-width: 36em !important; font-size: 17px !important; color: #4a4640 !important; }
:root body .sf-not-found-main .button { min-width: min(320px, 100%) !important; margin-top: 18px !important; font-weight: 600 !important; }
:root body .sf-404-icon { width: 150px; height: 210px; margin-bottom: 10px; }
:root body .sf-404-icon svg { width: 100%; height: 100%; overflow: visible; }
:root body .sf-404-top { transform-origin: 20% 100%; animation: sf-404-tear 3.2s ease-in-out infinite; }
:root body .sf-404-bottom { animation: sf-404-drop 3.2s ease-in-out infinite; }
@keyframes sf-404-tear { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes sf-404-drop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { :root body :is(.sf-404-top, .sf-404-bottom) { animation: none; } }

/* ===== Правки Никиты 24.09, круг 2 ===== */

/* --- квиз на компьютере: весь блок (заголовок, карточка, технолог) помещается в один экран.
   Сетка 4 колонки: карточка квиза 3/4, технолог 1/4. Строка вариантов считается от высоты окна. --- */
@media (min-width: 1192px) {
  :root body .app .quiz-section { --sf-q-row: clamp(132px, calc((100svh - 548px) / 2), 214px); }
  :root body .app .quiz-intro { margin-bottom: 20px !important; }
  :root body .app .quiz-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  :root body .app .quiz-card[class] { padding: 26px 30px 24px !important; }
  :root body .app .quiz-card .sf-quiz-step:not([hidden]) { gap: 16px !important; }
  :root body .app .quiz-card .sf-quiz-step .quiz-options {
    grid-auto-rows: var(--sf-q-row) !important;
    gap: 12px !important;
  }
  :root body .app .quiz-card .sf-quiz-step:nth-child(4) .quiz-options {
    grid-auto-rows: calc(var(--sf-q-row) * 2 + 12px) !important;
  }
  :root body .app .quiz-card .sf-quiz .sf-quiz-step:not([hidden]) {
    min-height: calc(var(--sf-q-row) * 2 + 262px) !important;
  }
  /* переход к квизу из меню и кнопок: заголовок квиза сразу под шапкой */
  :root body .app .quiz-section { scroll-margin-top: 0 !important; }
  :root body .app .quiz-footer { padding-top: 16px !important; margin-top: auto !important; }
  /* технолог в узкой колонке: текст мельче, чтобы не распирал колонку */
  :root body .app .quiz-advisor > div strong { font-size: 20px !important; line-height: 1.15 !important; }
  :root body .app .quiz-advisor > div :is(p, span):not(.quiz-advisor-badge *) { font-size: 14px !important; line-height: 1.45 !important; }
}

/* --- квиз, вопрос 5 «Упаковка и маркировка»: вместо четырёх узких колонок — сетка 2 × 2,
   в карточке фото слева квадратом, подпись справа. Высота области та же, что у других шагов. --- */
@media (min-width: 768px) {
  :root body .app .quiz-card .sf-quiz-step:nth-child(5) .quiz-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: var(--sf-q-row, calc((100cqw - 28px) / 3)) !important;
  }
  :root body .app .quiz-card .sf-quiz-step:nth-child(5) .quiz-options .quiz-option {
    grid-template-rows: none !important;
    grid-template-columns: 42% minmax(0, 1fr) !important;
    align-items: center !important;
  }
  :root body .app .quiz-card .sf-quiz-step:nth-child(5) .quiz-option-image {
    height: 100% !important;
    aspect-ratio: auto !important;
    width: 100% !important;
  }
  :root body .app .quiz-card .sf-quiz-step:nth-child(5) .quiz-option-label { font-size: 16px !important; }
  :root body .app .quiz-card .sf-quiz-step:nth-child(5) .quiz-option-label > b { hyphens: manual; }
}

/* --- кейсы: высота карточек одна — по самой высокой (считает скрипт), без пустоты под кнопками;
   боковые поля текста чуть уже --- */
@media (min-width: 1192px) {
  :root body .app .case-card .case-body { padding-top: 12px !important; padding-bottom: 6px !important; padding-right: 12px !important; }
}

/* --- цены: левая колонка по центру высоты таблицы --- */
@media (min-width: 1192px) {
  :root body .app .price-grid { align-items: center !important; }
  :root body .app .price-copy { align-self: center !important; }
}

/* --- финальный экран: «Цех», «Время работы», «Телефон» на равных расстояниях --- */
@media (min-width: 1192px) {
  :root body .app .cta-contacts {
    display: flex !important;
    justify-content: space-between !important;
    gap: 24px !important;
  }
  :root body .app .cta-contacts > div { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; }
}

/* --- меню шапки: наведение и активный раздел — оранжевый, вес medium.
   Невидимая копия подписи весом 500 держит ширину, чтобы пункты не прыгали --- */
:root body .app .header > nav a,
:root body .sf-menu-nav a:not(.button) { transition: color 0.18s ease; }
:root body .app .header > nav a > span { display: inline-flex !important; flex-direction: column !important; }
:root body .app .header > nav a > span::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 500;
  pointer-events: none;
}
:root body .app .header > nav a:is(:hover, :focus-visible, .is-active),
:root body .sf-menu-nav a:not(.button):is(:hover, .is-active) {
  color: var(--sf-accent, #fb6402) !important;
  font-weight: 500 !important;
}
:root body .app .header > nav a:is(:hover, :focus-visible, .is-active) > span { font-weight: 500 !important; color: inherit !important; }

/* --- окно заявки: шире (подзаголовок в три строки) и выше центра — на уровне глаз --- */
.sf-lead-modal { align-items: flex-start; padding-top: max(16px, 9vh); }
.sf-lead-dialog { width: min(560px, 100%); max-height: calc(100svh - max(16px, 9vh) - 16px); }
@media (max-height: 700px) { .sf-lead-modal { padding-top: 16px; } }

/* --- телефон с кодом страны: кнопка с флагом слева в поле, список стран --- */
.sf-tel { position: relative; display: block; width: 100%; }
.sf-tel > input[type='tel'] { padding-left: 68px !important; width: 100% !important; }
.sf-tel-country {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 6px 0 8px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6e747c;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.sf-tel-country:hover, .sf-tel-country[aria-expanded='true'] { background: rgba(251, 100, 2, 0.08); }
.sf-tel-country::after {
  width: 7px; height: 7px; margin: -4px 2px 0 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); content: '';
}
.sf-tel-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, 100%);
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(55, 47, 37, 0.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(35, 25, 15, 0.18);
  list-style: none;
}
.sf-tel-list[hidden] { display: none !important; }
.sf-tel-list button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #211f1b;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.sf-tel-list button > i { font-style: normal; font-size: 19px; line-height: 1; }
.sf-tel-list button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tel-list button > b { color: #6e747c; font-weight: 500; }
.sf-tel-list button:hover, .sf-tel-list button[aria-selected='true'] { background: rgba(251, 100, 2, 0.08); }

/* квиз: одна линия над кнопками — у области вариантов своя нижняя линия лишняя */
@media (min-width: 768px) {
  :root body .app .quiz-card .quiz-options { border-bottom: 0 !important; padding-bottom: 0 !important; }
  /* полоса прогресса тянется, подпись справа не вылезает за карточку */
  :root body .app .quiz-progress-row { display: flex !important; align-items: center !important; gap: 20px !important; }
  :root body .app .quiz-progress-row > .quiz-progress-track { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  :root body .app .quiz-progress-row > :not(.quiz-progress-track) { flex: none !important; white-space: nowrap !important; }
  /* длинные армянские и английские слова в узких карточках переносим */
  :root body .app .quiz-card .sf-quiz-step:is(:nth-child(4), :nth-child(5)) .quiz-option-label > b { overflow-wrap: break-word !important; hyphens: auto !important; min-width: 0 !important; }
  :root body .app .quiz-card .sf-quiz-step:is(:nth-child(4), :nth-child(5)) .quiz-option-label { min-width: 0 !important; }
}
/* шаг контактов: согласие прижато к кнопкам, свободное место — над ним */
:root body .app .quiz-contact > .sf-consent { margin-top: auto !important; padding-top: 18px !important; }
:root body .app .quiz-contact > .quiz-contact-actions { margin-top: 0 !important; }
/* поле телефона с кнопкой страны — отступ под флаг сильнее правил полей форм */
:root body :is(.app, .sf-lead-form) .sf-tel > input[type='tel'][type] { padding-left: 64px !important; }
:root body .app .quiz-contact .sf-tel, :root body .app .cta-card .sf-tel { display: block !important; }

/* ===== Правки Никиты 24.09, круг 3 ===== */

/* --- кейсы: кнопки прижаты к низу карточки — у всех карточек отступ под кнопками как у самой высокой --- */
:root body .app .case-card .case-body { height: 100% !important; }
:root body .app .case-card .case-actions { margin-top: auto !important; padding-top: 22px !important; }

/* --- кейсы: стопка только на компьютере (правка Никиты 24.09, вечер: на телефоне и планшете
   наложение выглядит плохо). Отступ сверху и снизу у каждой карточки ставит скрипт --- */
@media (min-width: 1192px) {
  :root body .app .case-card {
    position: sticky !important;
    min-height: var(--sf-case-h, 0px) !important;
  }
}
@media (max-width: 1191.98px) {
  :root body .app .cases-list { display: grid !important; gap: 16px !important; }
  :root body .app .case-card { position: relative !important; top: auto !important; min-height: 0 !important; margin-bottom: 0 !important; }
  /* кнопки на всю ширину карточки: на планшете две половины, на телефоне одна под другой */
  :root body .app .case-card .case-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  :root body .app .case-card .case-actions .button { width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 767.98px) {
  :root body .app .case-card .case-actions { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- первый экран на планшете: стеклянная карточка во всю ширину шапки --- */
@media (min-width: 768px) and (max-width: 1191.98px) {
  :root body .app .hero-content { width: 100% !important; max-width: none !important; }
}

/* --- мобильное меню на весь экран: логотип и крестик сверху, пункты меню, кнопка, контакты --- */
.sf-menu-layer.sf-menu-full { align-items: stretch !important; background: #fffdf9 !important; }
.sf-menu-full .sf-menu-sheet {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  height: 100svh;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px max(20px, calc((100vw - 720px) / 2)) max(28px, env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translateY(-16px) !important;
  opacity: 0;
  transition: transform 260ms cubic-bezier(.22, .8, .24, 1), opacity 200ms ease !important;
  font-family: 'Manrope SF', Manrope, 'Avenir Next', Arial, sans-serif;
}
.sf-menu-full.is-active .sf-menu-sheet { transform: none !important; opacity: 1; }
.sf-menu-full .sf-menu-brand {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  min-height: 48px;
  justify-content: center;
  color: #fb6402;
  text-decoration: none;
}
.sf-menu-full .sf-menu-brand .brand-name { font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: #fb6402; }
.sf-menu-full .sf-menu-brand .brand-description { margin-top: 4px; font-size: 11px; line-height: 1.3; color: #6e747c; }
.sf-menu-full .sf-menu-close {
  top: 18px !important;
  right: max(20px, calc((100vw - 720px) / 2)) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  color: #fff;
  background: #fb6402 !important;
  font-size: 28px !important;
  line-height: 1;
}
.sf-menu-full .sf-menu-nav { padding: 28px 0 8px !important; gap: 0 !important; }
.sf-menu-full .sf-menu-nav a:not(.button) {
  padding: 16px 0 !important;
  border-bottom: 1px solid #e5e2dd;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}
.sf-menu-full .sf-menu-nav a[href^='tel:'] { display: none !important; }
.sf-menu-full .sf-menu-nav .button {
  display: flex !important;
  align-items: center;
  min-height: 56px;
  margin-top: 22px !important;
  border-radius: 14px;
  background: #fb6402;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.sf-menu-contacts {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 26px;
  color: #6e747c;
  font-size: 16px;
  line-height: 1.5;
}
.sf-menu-contacts strong { color: #14171a; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-menu-contacts a { color: #14171a; text-decoration: none; }
.sf-menu-contacts a[href^='tel:'] span, .sf-menu-contacts > a[href^='tel:'] { font-size: 22px; font-weight: 600; color: #14171a; }
.sf-menu-contacts .footer-messengers a { color: #fb6402; font-weight: 500; }

/* длинные армянские слова: не распирают блоки и не обрезаются */
:root body .app :is(h1, h2, h3, p) { overflow-wrap: break-word; }
:root body .app .price-grid { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 1192px) {
  :root body .app .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
:root body .app .price-grid > * { min-width: 0 !important; }
:root body .app .quiz-option-label { min-width: 0 !important; }
:root body .app .quiz-option-label > b { min-width: 0 !important; overflow-wrap: break-word !important; hyphens: auto; }

/* ===== Фото карточек квиза 25.09: у каждого варианта своё фото, WebP 640×640 =====
   Фон карточки задан в самом узле (inline style), через MCP Instatic его не поменять.
   Перекрываем !important по номеру шага и варианта: одинаковые старые фото стояли в разных вопросах. */
:root body .app .sf-quiz-step:nth-child(1) .quiz-option:nth-child(1) .quiz-option-image { background-image: url('/uploads/St06j8flzfq4F4Tc1Xq-h-sf-quiz-q1-1.webp') !important; }
:root body .app .sf-quiz-step:nth-child(1) .quiz-option:nth-child(2) .quiz-option-image { background-image: url('/uploads/TcpWwSyu1rltU2Hn8G-Rp-sf-quiz-q1-2.webp') !important; }
:root body .app .sf-quiz-step:nth-child(1) .quiz-option:nth-child(3) .quiz-option-image { background-image: url('/uploads/X5wL4z2fhgWImnK_Yiktj-sf-quiz-q1-3.webp') !important; }
:root body .app .sf-quiz-step:nth-child(1) .quiz-option:nth-child(4) .quiz-option-image { background-image: url('/uploads/_LN2vVHIiz1BJME1Lv9Pk-sf-quiz-q1-4.webp') !important; }
:root body .app .sf-quiz-step:nth-child(1) .quiz-option:nth-child(5) .quiz-option-image { background-image: url('/uploads/sSl4FamimCNQkyEIjC1Bt-sf-quiz-q1-5.webp') !important; }
:root body .app .sf-quiz-step:nth-child(1) .quiz-option:nth-child(6) .quiz-option-image { background-image: url('/uploads/6i0-ZDD8X3FX6jhLl2MXu-sf-quiz-q1-6.webp') !important; }
:root body .app .sf-quiz-step:nth-child(2) .quiz-option:nth-child(1) .quiz-option-image { background-image: url('/uploads/geSrBS5C8C2ijw7OWK-eW-sf-quiz-q2-1.webp') !important; }
:root body .app .sf-quiz-step:nth-child(2) .quiz-option:nth-child(2) .quiz-option-image { background-image: url('/uploads/PvNHBihyZDo-1VpIjm3P0-sf-quiz-q2-2.webp') !important; }
:root body .app .sf-quiz-step:nth-child(2) .quiz-option:nth-child(3) .quiz-option-image { background-image: url('/uploads/_tTpdGvYA8v58pT9W1co2-sf-quiz-q2-3.webp') !important; }
:root body .app .sf-quiz-step:nth-child(2) .quiz-option:nth-child(4) .quiz-option-image { background-image: url('/uploads/3LW6RPA-Zcx9Mh5iHssPH-sf-quiz-q2-4.webp') !important; }
:root body .app .sf-quiz-step:nth-child(2) .quiz-option:nth-child(5) .quiz-option-image { background-image: url('/uploads/KOvLknld2OjjqwhknwrPv-sf-quiz-q2-5.webp') !important; }
:root body .app .sf-quiz-step:nth-child(2) .quiz-option:nth-child(6) .quiz-option-image { background-image: url('/uploads/lbJ5SrE8UBVJ6_oZbZ91U-sf-quiz-q2-6.webp') !important; }
:root body .app .sf-quiz-step:nth-child(3) .quiz-option:nth-child(1) .quiz-option-image { background-image: url('/uploads/3iXG1L44bmlA310GW8Nq_-sf-quiz-q3-1.webp') !important; }
:root body .app .sf-quiz-step:nth-child(3) .quiz-option:nth-child(2) .quiz-option-image { background-image: url('/uploads/YYwGeE6rJuafKHqjYiYPb-sf-quiz-q3-2.webp') !important; }
:root body .app .sf-quiz-step:nth-child(3) .quiz-option:nth-child(3) .quiz-option-image { background-image: url('/uploads/RV1DBHa6cIzb5guwe6vNi-sf-quiz-q3-3.webp') !important; }
:root body .app .sf-quiz-step:nth-child(3) .quiz-option:nth-child(4) .quiz-option-image { background-image: url('/uploads/95NPiys_wAOsy-bzVZ88n-sf-quiz-q3-4.webp') !important; }
:root body .app .sf-quiz-step:nth-child(3) .quiz-option:nth-child(5) .quiz-option-image { background-image: url('/uploads/v4bM0OOLJdtix7egTmROn-sf-quiz-q3-5.webp') !important; }
:root body .app .sf-quiz-step:nth-child(3) .quiz-option:nth-child(6) .quiz-option-image { background-image: url('/uploads/xZ6RKqtX2Qt_nQMAAl-Vt-sf-quiz-q3-6.webp') !important; }
:root body .app .sf-quiz-step:nth-child(4) .quiz-option:nth-child(1) .quiz-option-image { background-image: url('/uploads/Lzct9MZkVxMMpKuZHI342-sf-quiz-q4-1.webp') !important; }
:root body .app .sf-quiz-step:nth-child(4) .quiz-option:nth-child(2) .quiz-option-image { background-image: url('/uploads/eFGmy_9CnapRMi_alvdeQ-sf-quiz-q4-2.webp') !important; }
:root body .app .sf-quiz-step:nth-child(4) .quiz-option:nth-child(3) .quiz-option-image { background-image: url('/uploads/4exOuKJ7WAbEvYYFHZqIE-sf-quiz-q4-3.webp') !important; }
:root body .app .sf-quiz-step:nth-child(4) .quiz-option:nth-child(4) .quiz-option-image { background-image: url('/uploads/a0OYq0jK6f6BlN6eJdaJu-sf-quiz-q4-4.webp') !important; }
:root body .app .sf-quiz-step:nth-child(5) .quiz-option:nth-child(1) .quiz-option-image { background-image: url('/uploads/uCaX9VLU6kqIHO7i60DlP-sf-quiz-q5-1.webp') !important; }
:root body .app .sf-quiz-step:nth-child(5) .quiz-option:nth-child(2) .quiz-option-image { background-image: url('/uploads/8Rnl07ctScWdFXJ6J6UVY-sf-quiz-q5-2.webp') !important; }
:root body .app .sf-quiz-step:nth-child(5) .quiz-option:nth-child(3) .quiz-option-image { background-image: url('/uploads/mJ0PXtoXPUMmehfoyxY2Z-sf-quiz-q5-3.webp') !important; }
:root body .app .sf-quiz-step:nth-child(5) .quiz-option:nth-child(4) .quiz-option-image { background-image: url('/uploads/JYIXkBGYVXk_ewpgzuLCb-sf-quiz-q5-4.webp') !important; }
:root body .app .sf-quiz-step:nth-child(6) .quiz-option:nth-child(1) .quiz-option-image { background-image: url('/uploads/fUjJKyC01EfgIGyXn2GdP-sf-quiz-q6-1.webp') !important; }
:root body .app .sf-quiz-step:nth-child(6) .quiz-option:nth-child(2) .quiz-option-image { background-image: url('/uploads/AUvLeU3FvCtNNHQGe3r6C-sf-quiz-q6-2.webp') !important; }
:root body .app .sf-quiz-step:nth-child(6) .quiz-option:nth-child(3) .quiz-option-image { background-image: url('/uploads/15TBhQ_GkVtcS6ODGXsMg-sf-quiz-q6-3.webp') !important; }
:root body .app .sf-quiz-step:nth-child(6) .quiz-option:nth-child(4) .quiz-option-image { background-image: url('/uploads/K0Q7Xjr7sXssEse8cv1Bp-sf-quiz-q6-4.webp') !important; }
:root body .app .sf-quiz-step:nth-child(6) .quiz-option:nth-child(5) .quiz-option-image { background-image: url('/uploads/V9ge8eKtBtBitgUfZR5LH-sf-quiz-q6-5.webp') !important; }
:root body .app .sf-quiz-step:nth-child(6) .quiz-option:nth-child(6) .quiz-option-image { background-image: url('/uploads/HQf6L37Nujq2LfZtPgwrG-sf-quiz-q6-6.webp') !important; }

/* ===== Доступность 24.09 ===== */
/* заголовки преимуществ первого экрана стали h2 (порядок H1 → H2) — те же размеры, что у h3 */
:root body .app .benefit h2 { display: block !important; margin: 0 !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.32 !important; letter-spacing: -0.015em !important; }

/* курсор: класс редактора .inline-editable давал текстовый курсор на ссылках (политика в подвале),
   в меню и окне заявки — везде наследуем, у ссылок и кнопок — рука */
:root body .inline-editable { cursor: inherit !important; }
:root body :is(a[href], button:not(:disabled), [role='button'], summary, .quiz-option, .sf-lang button) { cursor: pointer !important; }
/* телефон в блоке контактов — ссылка, одной строкой (на армянском переносился «153-» / «596») */
:root body .app .cta-contacts .sf-contact-phone { display: block !important; white-space: nowrap !important; color: var(--sf-accent) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; text-decoration: none !important; }
:root body .app .cta-contacts .sf-contact-phone:hover { text-decoration: underline !important; }
/* квиз, последний шаг: галочка стояла над подписью (padding-top 18 px сдвигал текст, а галочка
   прибита к top: 0) и согласие уезжало к низу карточки (margin-top: auto) — пустота ~270 px */
:root body .app .quiz-contact > .sf-consent { margin-top: 20px !important; padding-top: 0 !important; margin-bottom: 18px !important; }
:root body .app .quiz-contact > .quiz-contact-actions .quiz-back { white-space: nowrap !important; }
:root body .app .quiz-contact > .sf-consent input[type='checkbox'] { top: 2px !important; }
:root body .app .quiz-contact > .quiz-contact-actions { margin-top: auto !important; }

/* ===== Правки Никиты с телефона 25.09: цены, подвал «SF», меню, шапка ===== */

/* 1. цены: длинное название переносится и сжимается, цена одной строкой всегда справа внутри карточки
   (армянские «Բլուզներ և վերնաշապիկներ», «Կիսաշրջազգեստներ» выталкивали цену за край) */
:root body .app .price-row dt { flex: 1 1 auto !important; min-width: 0 !important; overflow-wrap: anywhere !important; }
:root body .app .price-row dd { flex: 0 0 auto !important; margin-left: auto !important; text-align: right !important; white-space: nowrap !important; }
@media (max-width: 767.98px) {
  :root body .app .price-row { gap: 12px !important; }
  :root body .app .price-row :is(dt, dd) { font-size: 17px !important; }
}

/* 2. подвал на телефоне: вместо «Sewing Factory» во всю ширину — крупное «SF».
   Текст узла прячем кеглем 0, буквы рисует ::before; градиент надписи остаётся (background-clip: text).
   Масштаб от sf-footer-motion.js отключаем, контур не нужен. aria-label у блока не трогаем */
@media (max-width: 767.98px) {
  :root body .footer-marquee { margin: 12px 0 0 !important; text-align: left !important; }
  :root body .footer-marquee > div { width: 100% !important; transform: none !important; }
  :root body .footer-marquee .inline-editable {
    width: 100% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
  }
  :root body .footer-marquee .inline-editable::before {
    display: block;
    content: 'SF';
    font-size: min(46vw, 300px);
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: -0.05em;
    padding-bottom: 0.07em;
  }
  :root body .footer-marquee-outline { display: none !important; }
}

/* 3. мобильное меню: пункты 16 px, отступы пропорционально меньше (было 24 px и 16 px сверху-снизу) */
:root body .sf-menu-full .sf-menu-nav { padding-top: 20px !important; }
:root body .sf-menu-full .sf-menu-nav a:not(.button) {
  padding: 12px 0 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
:root body .sf-menu-full .sf-menu-brand .brand-name { font-size: 23px !important; letter-spacing: -0.0536em !important; }
:root body .sf-menu-full .sf-menu-close { width: 40px !important; height: 40px !important; border-radius: 11px !important; font-size: 24px !important; }
@media (min-width: 768px) { :root body .sf-menu-full .sf-menu-brand .brand-name { font-size: 27px !important; letter-spacing: 0 !important; } }
:root body .sf-menu-full .sf-menu-nav .button { min-height: 50px !important; margin-top: 18px !important; font-size: 16px !important; }

/* 4. шапка: логотип и кнопки на 10–15 % меньше, зазоры не меньше 12 px, логотип в одну строку */
:root body :is(.app .header, .sf-page-header) :is(.brand-name, .brand) { white-space: nowrap !important; }
:root body :is(.app .header, .sf-page-header) .sf-lang-current { height: 38px !important; gap: 6px !important; padding: 0 11px 0 6px !important; font-size: 14px !important; }
:root body :is(.app .header, .sf-page-header) .sf-flag { width: 22px !important; height: 22px !important; }
:root body .app .header .sf-menu-toggle { width: 38px !important; height: 38px !important; margin-left: 12px !important; border-radius: 11px !important; }
@media (max-width: 767.98px) {
  :root body :is(.app .header, .sf-page-header) { min-height: 54px !important; padding: 6px 8px 6px 14px !important; }
  :root body .app .header .brand-name,
  :root body .sf-page-brand { font-size: 23px !important; letter-spacing: -0.0536em !important; }
  :root body .app .header .brand { flex: none !important; margin-right: 12px !important; }
  :root body .app .header .header-actions { gap: 12px !important; margin-left: auto !important; }
}
/* 320–359: места нет — логотип ещё чуть меньше, у переключателя остаются флаг и стрелка */
@media (max-width: 359.98px) {
  :root body .app .header .brand-name,
  :root body .sf-page-brand { font-size: 21px !important; }
  :root body :is(.app .header, .sf-page-header) .sf-lang-name { display: none !important; }
}
@media (min-width: 768px) {
  :root body :is(.app .header, .sf-page-header) { min-height: 66px !important; padding: 8px 12px 8px 20px !important; }
  :root body .app .header .brand-name,
  :root body .sf-page-brand { font-size: 27px !important; line-height: 1.3 !important; }
  /* подпись под логотипом — тем же масштабом 0,9, чтобы не стала шире «Sewing Factory» */
  :root body :is(.brand .brand-description, .sf-page-brand small) { font-size: 9.9px !important; }
  :root body :lang(hy) :is(.brand .brand-description, .sf-page-brand small) { font-size: 8.4px !important; }
  :root body :lang(en) :is(.brand .brand-description, .sf-page-brand small) { font-size: 8px !important; }
  :root body :is(.app .header, .sf-page-header) .sf-lang-current { height: 40px !important; font-size: 15px !important; }
  :root body :is(.app .header, .sf-page-header) .sf-flag { width: 24px !important; height: 24px !important; }
  :root body .app .header .sf-menu-toggle { width: 40px !important; height: 40px !important; }
  :root body .app .header .header-actions { gap: 16px !important; }
  :root body .app .header .phone { font-size: 16px !important; }
  :root body :is(.app .header-actions, .sf-page-header) > .button { padding: 13px 18px !important; font-size: 14px !important; }
}
@media (min-width: 1192px) and (max-width: 1499.98px) {
  :root body .app .header .header-actions { gap: 12px !important; }
}