/* ============================================================================
   theme_gos.css — ТЕСТОВАЯ тема «гос-сервис» (похоже на Госуслуги: серьёзно,
   привычно, доверие), но НЕ клон. Накладывается поверх style_v2 + v2_overrides
   на странице /v3. Текущая страница (/) не затрагивается.

   Принципы навыка ui-ux-pro-max: стиль «Accessible & Ethical» (WCAG AAA),
   высокий контраст, видимые фокус-кольца, шрифт Lexend, единый синий + navy,
   плоские карточки с тонкими бордерами.
   ============================================================================ */

/* ── Токены под gosuslugi.ru: серый фон, белые скруглённые карточки, синий ──── */
:root {
  --primary: #0d4cd3;          /* насыщенный гос-синий (CTA/ссылки/акцент) */
  --primary-dark: #0a3aa6;     /* hover/active */
  --primary-soft: #e8eefc;     /* светло-синяя подложка */
  --fg: #0b1f33;               /* почти-чёрный текст */
  --fg-muted: #5c6a7a;
  --bg: #ffffff;               /* карточки белые */
  --bg-soft: #eef1f6;          /* подложки */
  --border: #e3e6ec;
  --success: #15a05a;
  --success-soft: #e7f6ee;
  --warn: #b8761a;
  --warn-soft: #fbf2df;
  --error: #d23d3d;
  --error-soft: #fbecec;
  /* РОЛИ ЦВЕТА (по навыку «Trust & Authority»): синий = структура/доверие,
     оранжевый = ТОЛЬКО действие (главные кнопки). */
  --action: #ff6a1a;           /* чистый оранжевый CTA (был красноватый #ff4726) */
  --action-dark: #e25a0c;
  /* строго: мягкие тени, УМЕРЕННЫЙ радиус (не «пузыри») */
  --shadow-sm: 0 1px 2px rgba(11, 31, 51, 0.05);
  --shadow-md: 0 2px 8px rgba(11, 31, 51, 0.05);
  --shadow-lg: 0 4px 16px rgba(11, 31, 51, 0.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
}

/* ── Типографика: Inter (нейтральный гротеск, как на gosuslugi) ─────────────── */
body, button, input, select, textarea,
h1, h2, h3, .section-title, .step-label, .logo {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.005em;
}
/* Светло-лавандовый фон + белые карточки поверх — как на gosuslugi (логин/портал). */
body { color: var(--fg); background: #e8edf8; }
.section { background: transparent; }
.section-soft { background: #dfe6f5; }

/* ── Шапка: белая, тонкий низ-бордер, синий логотип ────────────────────────── */
.nav {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
/* Логотип ОСТАВЛЯЕМ фирменным рыжим (по просьбе) — не перекрашиваем. */

/* Поля ввода как на gosuslugi: серая заливка, без бордера, фокус-синий. */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], textarea, select {
  background: #f1f3f7;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--fg);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
  background: #fff;
  border-color: var(--primary);
  outline: none;
}

/* ── Кнопки: главное действие — ОРАНЖЕВЫЙ; структура — синий ────────────────── */
.btn-primary {
  background: var(--action) !important;       /* CTA = оранжевый (бренд) */
  border: 1px solid var(--action) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.btn-primary:hover { background: var(--action-dark) !important; border-color: var(--action-dark) !important; }
.btn-ghost, .btn-outline {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
  font-weight: 500 !important;
}
.btn-ghost:hover, .btn-outline:hover { background: var(--bg-soft) !important; border-color: #c2ccdb !important; }
.btn:focus-visible, a:focus-visible, input:focus-visible, .format-card-static:focus-visible, .tab-btn:focus-visible {
  outline: 3px solid rgba(20, 82, 217, 0.45);
  outline-offset: 2px;
}

/* ── Карточки приложения и секции — плоско, тонкий бордер ───────────────────── */
.app-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.section-soft, .bg-soft { background: var(--bg-soft); }
.section-title { color: var(--fg); font-weight: 700; }
.section-sub { color: var(--fg-muted); }

/* Разделители шагов — спокойнее */
.quiz-step { border-top-color: var(--border) !important; }
.step-label { color: var(--fg) !important; }

/* ── Сетка форматов: чистые выбираемые карточки, синий выбор ───────────────── */
.format-card-static, .size-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .15s, background .15s;
}
.format-card-static:hover, .size-card:hover { border-color: #b7c4da; }
.format-card-static.selected, .size-card.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}

/* ── Табы / чипы фильтров — синий active ───────────────────────────────────── */
.tab-btn.active, .docs-filters .chip.active, .attire-btn.active, .attire-btn.selected {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
.tab-btn { color: var(--fg-muted); }

/* ── Пол: синий выбранный ──────────────────────────────────────────────────── */
.gender-btn { background: #fff; border: 1px solid var(--border); color: var(--fg); }
.gender-btn.selected { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }

/* ── Дропзона — пунктир синий, спокойный фон ───────────────────────────────── */
.dropzone {
  background: var(--bg-soft);
  border: 1.5px dashed #b9c6dd;
  border-radius: var(--radius-lg);
}
.dropzone:hover { border-color: var(--primary); background: var(--primary-soft); }
.dz-text u { color: var(--primary); }

/* ── Карточка загруженного фото — белая, бордер (поверх grid из v2_overrides) ─ */
.upload-confirmed {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
}
.upload-status { color: var(--success); font-weight: 600; }

/* ── Trust-bar — светлая лента статов (фикс контраста: текст был white-on-white) ── */
.trust-bar { background: #fff; border-bottom: 1px solid var(--border); color: var(--fg) !important; }
.trust-bar b { color: var(--fg) !important; }
.trust-bar span { color: var(--fg-muted) !important; opacity: 1 !important; }
.step-card { background: #fff; border: 1px solid var(--border); box-shadow: none; }
.step-bg-num { color: var(--primary-soft); }

/* ── Бейдж «тестовая версия» ───────────────────────────────────────────────── */
.gos-test-badge {
  position: fixed; left: 12px; bottom: 12px; z-index: 9000;
  background: #11203a; color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; letter-spacing: .02em;
  box-shadow: var(--shadow-md); font-family: "Lexend", sans-serif;
}

/* ── Ссылки (структура = синий) ────────────────────────────────────────────── */
a { color: var(--primary); }
.nav-links a:not(.btn) { color: var(--fg-muted); font-weight: 500; }
.nav-links a:not(.btn):hover { color: var(--fg); }

/* ── Строгая типошкала: чёткая иерархия, спокойные размеры ──────────────────── */
.section-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.section-sub { font-size: 16px; color: var(--fg-muted); line-height: 1.6; }
.step-label { font-size: 19px !important; font-weight: 600 !important; letter-spacing: -0.01em; }
.hero h1, .hero-title { letter-spacing: -0.02em; font-weight: 700; }
p, .text-sm { line-height: 1.6; }

/* ── Бейдж доверия (синий, для ГОСТ/гарантий) ──────────────────────────────── */
.trust-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-soft); color: var(--primary-dark);
  font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px;
}

/* ── Карточки: ровный плоский вид, единый бордер ───────────────────────────── */
.app-card { padding: 24px; }
.format-card-static, .size-card, .step-card { box-shadow: none; }
.section { padding-top: 40px; padding-bottom: 40px; }

/* ── Тогглы/чекбоксы — синий аккуратный акцент ─────────────────────────────── */
input[type="checkbox"]:checked, .toggle:checked { accent-color: var(--primary); }
.consent-cb { accent-color: var(--primary); }

/* ════════════════════════════════════════════════════════════════════════════
   ГЛУБОКИЙ ПАС: типографика, единые иконки-плитки, строгие карточки
   ════════════════════════════════════════════════════════════════════════════ */

/* Типошкала — строгая иерархия (где нет inline-перебивки). */
.section-title { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.section-sub { font-size: 16px; color: var(--fg-muted); }
h1 { font-weight: 600; letter-spacing: -0.025em; }
.step-card h3, .feature-card h3, .doc-card-title { font-weight: 600; letter-spacing: -0.01em; }

/* Единые иконки-плитки (синий = структура): документ, преимущества, советы. */
.doc-card-icon, .feature-icon, .selfie-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.feature-icon, .selfie-icon { margin-bottom: 14px; }
/* .step-icon уже плитка 56px (v2_overrides) — задаём размер иконки внутри. */
.step-icon { font-size: 26px !important; color: var(--primary) !important; background: var(--primary-soft) !important; }
.doc-card-icon i.ti, .feature-icon i.ti, .selfie-icon i.ti, .step-icon i.ti { line-height: 1; }

/* Строгие карточки: белые, тонкий бордер, мягкая тень, синий hover. */
.doc-card, .feature-card, .step-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color .15s, box-shadow .15s;
}
.doc-card:hover, .feature-card:hover { border-color: #b3c2dd !important; box-shadow: var(--shadow-md) !important; }
/* Цифры-принты шагов: видимый бледно-коралловый watermark (бренд-акцент действия, как в проде/скрине).
   var(--primary) в gos-теме = синий → задаём корал явно. */
.step-bg-num { color: #FF5A3C !important; opacity: 0.11 !important; }

/* Trust-chip — синий бейдж доверия. */
.trust-chip { background: var(--primary-soft); color: var(--primary-dark); border: 1px solid #cdd9f6; }

/* btn-white (на тёмной секции) — белая с оранжевым текстом-действием. */
.btn-white { background: #fff !important; color: var(--action) !important; border: 1px solid #fff !important; font-weight: 600 !important; }

/* ── Прайс — строгий: цена navy, единый бордер, оранжевый CTA ───────────────── */
.price-card { border: 1px solid var(--border) !important; box-shadow: var(--shadow-md); }
.price-tag { color: var(--fg) !important; font-weight: 700 !important; }

/* ── FAQ — синий акцент на открытом вопросе ────────────────────────────────── */
.faq-item summary { color: var(--fg); }
.faq-item[open] summary { color: var(--primary); }
.faq-item[open] { border-bottom-color: #cdd9f6; }

/* ── info-секции — строгая шкала заголовков ────────────────────────────────── */
.info-section h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.info-section .lead { color: var(--fg-muted); }
.info-section.alt-bg, .info-section .alt-bg { background: #eef1f7; }

/* ── Финальный CTA — чистый тёмный блок (структура), оранжевая кнопка ───────── */
.final-cta { background: #0f1f33; }
.final-cta h2 { font-weight: 600; letter-spacing: -0.02em; }

/* ── Шапка: кнопка-CTA в навбаре тоже оранжевая (действие) ──────────────────── */
.nav-cta-btn { background: var(--action) !important; border-color: var(--action) !important; }
.nav-links a { color: var(--fg-muted); font-weight: 500; }
.nav-links a:hover { color: var(--fg); }
.nav-links a.btn { color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   ГЕРОЙ · ОТЗЫВЫ · МОБИЛЬНАЯ АДАПТАЦИЯ
   ════════════════════════════════════════════════════════════════════════════ */

/* Герой: чистый СИНИЙ структурный градиент (вместо кораллового). */
.hero { background: linear-gradient(180deg, #e9eff9 0%, #f2f3f7 100%) !important; }
.hero h1 { font-size: 42px; line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; }
.hero .lead { color: var(--fg-muted); }

/* Отзывы (влияние selfiedoc): строгие белые карточки, золотые звёзды. */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.review-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); text-align: left; }
.review-stars { color: #f5a623; font-size: 15px; letter-spacing: 3px; margin-bottom: 10px; }
.review-text { font-size: 14.5px; line-height: 1.6; color: var(--fg); margin-bottom: 16px; }
.review-author { display: flex; align-items: center; gap: 10px; }
.review-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; }
.review-name { font-weight: 600; font-size: 14px; color: var(--fg); }
.review-role { font-size: 12.5px; color: var(--fg-muted); }

/* Мобильная адаптация: сетки в меньше столбцов на узком экране. */
@media (max-width: 768px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .steps-grid, .steps-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .doc-cards { grid-template-columns: 1fr 1fr !important; }
  .features-grid, .selfie-grid { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 32px; }
}
@media (max-width: 480px) {
  .steps-grid, .steps-grid-4, .doc-cards { grid-template-columns: 1fr !important; }
  .section-title, .info-section h2 { font-size: 24px !important; }
  .hero h1 { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ШИРОКИЕ БЛОКИ · единая ширина контента (никаких «заужённых» секций)
   Принцип: контентные блоки тянутся на всю ширину контейнера (1180px), а не
   жмутся в узкую колонку — чтобы плотность секций была одинаковой по странице.
   Узкими остаются только ВВОДНЫЕ абзацы (.section-sub/.lead) — это типографика.
   ════════════════════════════════════════════════════════════════════════════ */

/* FAQ: было max-width 760px → на всю ширину, 2 колонки (как на гос-порталах). */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
@media (max-width: 760px) { .faq-list { grid-template-columns: 1fr; gap: 0; } }

/* Прайс: было одинокой карточкой 460px по центру → широкий тариф-баннер
   (цена · список · действие) на всю ширину контейнера. */
.price-card.price-card-wide {
  max-width: none !important;
  margin: 36px 0 0 !important;
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) 1.25fr minmax(220px, 0.9fr);
  gap: 40px;
  align-items: center;
  text-align: left;
  padding: 34px 40px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}
.price-card-wide .price-tag { font-size: 52px; line-height: 1; }
.price-card-wide .price-name { font-size: 16px; margin-bottom: 8px; }
.price-card-wide .price-hint { font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; }
.price-card-wide .price-list { margin: 0; }
.price-card-wide .price-card-action { display: flex; flex-direction: column; gap: 10px; }
.price-card-wide .price-action-note { font-size: 12.5px; color: var(--fg-muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.price-card-wide .price-action-note i { color: var(--primary); font-size: 15px; }
@media (max-width: 860px) {
  .price-card.price-card-wide { grid-template-columns: 1fr; text-align: center; gap: 22px; }
  .price-card-wide .price-list { text-align: left; max-width: 380px; margin: 0 auto; }
}

/* Добор ширины: «Как это работает» (steps-grid капнут 900px) и анкета/форма
   (.app-card капнута 860px) — тянем на всю ширину контейнера. */
.steps-grid, .steps-grid-4 { max-width: none !important; }
#app .app-card { max-width: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   ГЕРОЙ (компактный) · инфо слева + наложение 3 карточек справа; столпы в строку
   (иконка+слово); низ — фото за неделю / возвраты
   ════════════════════════════════════════════════════════════════════════════ */
.hero-flow-v { padding-top: 40px !important; padding-bottom: 44px !important; }

/* 2 колонки: текст слева, визуал справа */
.hx-top { display: grid; grid-template-columns: 1fr 0.92fr; gap: 40px; align-items: center; }
.hx-left { text-align: left; }
.hx-left .trust-chip { margin-bottom: 18px; }
.hx-left h1 { font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; margin: 0; color: var(--fg); }
.hx-accent { color: var(--action); }
.hx-left .lead { font-size: 16.5px; line-height: 1.6; color: var(--fg-muted); margin: 14px 0 0; max-width: 520px; }
.hx-left .hx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; justify-content: flex-start; }
.hx-left .hx-cta .btn i { margin-right: 6px; }
.hx-cost { font-size: 13px; color: var(--fg-muted); line-height: 1.55; margin: 14px 0 0; max-width: 480px; }
.hx-cost b { color: var(--fg); font-weight: 600; }

/* наложение 3 карточек */
.hx-right { display: flex; justify-content: center; }
.hx-stack { position: relative; width: 460px; height: 300px; }
.hx-stack .hx-card { position: absolute; width: 178px; margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.hx-c1 { left: 0; top: 30px; z-index: 1; }
.hx-c2 { left: 141px; top: 0; z-index: 3; box-shadow: 0 12px 32px rgba(11,31,51,.18); }
.hx-c3 { left: 282px; top: 36px; z-index: 2; }
.hx-stack .hx-media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #eef1f6; }
.hx-stack .hx-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hx-tag { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; background: rgba(11,31,51,.74); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px 3px 3px; border-radius: 999px; }
.hx-tag .hx-n { width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--fg); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.hx-tag-ai { background: rgba(13,76,211,.92); } .hx-tag-ai .hx-n { color: var(--primary); }
.hx-tag-ok { background: rgba(21,160,90,.95); } .hx-tag-ok .hx-n { color: var(--success); }

/* overlay анализа / результата */
.hx-analysis .hx-oval { position: absolute; left: 30%; top: 13%; width: 40%; height: 60%; border: 2px dashed rgba(13,76,211,.9); border-radius: 50%; }
.hx-analysis .hx-eyeline { position: absolute; left: 28%; right: 28%; top: 44%; border-top: 2px dashed rgba(13,76,211,.85); }
.hx-eye { position: absolute; width: 12px; height: 12px; border: 2px solid #0d4cd3; border-radius: 50%; background: rgba(13,76,211,.18); transform: translate(-50%,-50%); }
.hx-scan { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(180deg, rgba(13,76,211,.22), rgba(13,76,211,0)); animation: hx-scan-move 3.2s ease-in-out infinite; }
@keyframes hx-scan-move { 0%, 100% { top: 0; } 50% { top: 74%; } }
@media (prefers-reduced-motion: reduce) { .hx-scan { animation: none; opacity: .45; } }
.hx-result .hx-docframe { position: absolute; inset: 9px; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(13,76,211,.5) inset; border-radius: 3px; }
.hx-ok { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }

/* столпы компактно: иконка+слово в строку, описание ниже */
.hx-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 34px 0 0; }
.hx-pillar { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.hx-ph { display: flex; align-items: center; gap: 9px; }
.hx-ph i { color: var(--primary); font-size: 20px; line-height: 1; }
.hx-ph b { font-size: 15px; font-weight: 600; color: var(--fg); }
.hx-pillar p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-muted); }

/* низ: фото за неделю / возвраты */
.hx-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 22px 0 0; font-size: 13.5px; color: var(--fg-muted); }
.hx-stats b { color: var(--fg); font-weight: 700; }
.hx-stats .hx-dot { color: #c2ccdb; }
.hx-stats-total { width: 100%; text-align: center; font-size: 12.5px; color: #8a96a8; margin-top: 2px; }

/* адаптив героя */
@media (max-width: 980px) {
  .hx-top { grid-template-columns: 1fr; gap: 28px; }
  .hx-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hx-left h1 { font-size: 30px; }
  .hx-stack { width: 100%; max-width: 360px; height: auto; display: flex; gap: 8px; }
  .hx-stack .hx-card { position: static; width: 33.33%; box-shadow: var(--shadow-sm); }
  .hx-c2 { box-shadow: var(--shadow-sm); }
  .hx-pillars { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ПРАВКИ СЕКЦИЙ (вёрстка по фидбэку)
   ════════════════════════════════════════════════════════════════════════════ */

/* Ревью «Нам доверяют» — на всю ширину контейнера. */
.reviews-grid { max-width: none !important; }

/* Карточки «преимущества» и «селфи»: единое ЛЕВОЕ выравнивание (было вразнобой —
   иконка слева, заголовок по центру). Иконка-плитка + заголовок + текст слева. */
.feature-card, .selfie-card { text-align: left !important; }
.feature-icon, .selfie-icon { margin-left: 0 !important; margin-right: 0 !important; }

/* Карточки документов: ровная горизонтальная раскладка (иконка | название). */
#docs .doc-card { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 12px; }
#docs .doc-card .doc-card-body { align-items: flex-start !important; text-align: left !important; }

/* Финальный CTA: больше нижнего воздуха. */
.final-cta { padding-top: 64px !important; padding-bottom: 88px !important; }

/* Плавающий бейдж теста: ниже, 4px от низа. */
.gos-test-badge { bottom: 4px !important; }

/* Форма, «Как сделать идеальное селфи»: 3 в ряд, а не строка на правило. */
.quiz-instructions { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.quiz-instructions > div { flex-direction: column !important; align-items: flex-start !important; }
@media (max-width: 720px) { .quiz-instructions { grid-template-columns: 1fr !important; } }

/* тег 3-й карточки — вправо, иначе уходит под среднюю (наложение) */
.hx-c3 .hx-tag { left: auto; right: 8px; }


/* ════════════════════════════════════════════════════════════════════════════
   ГЕРОЙ · ЗЕСТ + ВОЗДУХ (оверрайды: больше воздуха и один яркий акцент)
   ════════════════════════════════════════════════════════════════════════════ */
.hero-flow-v { padding-top: 54px !important; padding-bottom: 56px !important; }
.hx-top { gap: 54px !important; align-items: center; }

/* левая колонка — просторнее */
.hx-left h1 { font-size: 43px !important; line-height: 1.1 !important; }
.hx-left .lead { font-size: 17px !important; margin-top: 18px !important; max-width: 500px; }
.hx-left .hx-cta { margin-top: 30px !important; gap: 14px !important; }
.hx-cost { margin-top: 16px !important; }

/* ИЗЮМ 1 — оранжевый маркер-подчёркивание под акцентным словом */
.hx-accent { position: relative; color: var(--action); white-space: nowrap; }
.hx-accent::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 3px; height: 9px;
  background: rgba(255, 71, 38, 0.20); border-radius: 4px; z-index: -1;
}

/* визуал — больше места */
.hx-right { position: relative; min-height: 360px; }
.hx-stack { position: relative; width: 484px !important; height: 330px !important; z-index: 1; }
.hx-stack .hx-card { width: 188px !important; }
.hx-c1 { left: 0 !important; top: 40px !important; transform: rotate(-5deg); }
.hx-c3 { left: 296px !important; top: 48px !important; transform: rotate(5deg); }
/* средняя — звезда: прямо, крупнее, с мягким кольцом */
.hx-c2 {
  left: 148px !important; top: 0 !important; transform: scale(1.06);
  box-shadow: 0 18px 44px rgba(11, 31, 51, 0.20) !important;
  border-color: rgba(13, 76, 211, 0.30) !important;
}

/* ИЗЮМ 2 — мягкое синее свечение за карточками (глубина) */
.hx-glow {
  position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%);
  width: 460px; height: 340px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(13, 76, 211, 0.18), rgba(13, 76, 211, 0) 70%);
  filter: blur(18px);
}

/* ИЗЮМ 3 — плавающие чипы-спеки (полировка, как «настоящий продукт») */
.hx-float {
  position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(11, 31, 51, 0.10);
  border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--fg);
}
.hx-float i { color: var(--primary); font-size: 16px; line-height: 1; }
.hx-float-1 { top: 6px; right: -6px; }
.hx-float-2 { bottom: 2px; left: -10px; }

/* столпы и низ — больше воздуха между блоками */
.hx-pillars { margin-top: 46px !important; gap: 16px !important; }
.hx-pillar { padding: 17px 18px !important; }
.hx-stats { margin-top: 30px !important; }

@media (max-width: 980px) {
  .hx-right { min-height: 0; margin-top: 4px; }
  .hx-float-1 { right: 4px; } .hx-float-2 { left: 4px; }
}
@media (max-width: 560px) {
  .hx-stack { transform: none; }
  .hx-c1, .hx-c3 { transform: none; } .hx-c2 { transform: none; }
  .hx-float { display: none; }
  .hx-glow { display: none; }
}


/* === Фото-блок выше/больше + вертикальный воздух (фидбэк) === */
.hero-flow-v { padding-top: 64px !important; padding-bottom: 64px !important; }
.hx-right { min-height: 420px !important; }
.hx-stack { width: 540px !important; height: 392px !important; }
.hx-stack .hx-card { width: 210px !important; }
.hx-c1 { left: 0 !important; top: 46px !important; }
.hx-c2 { left: 165px !important; top: 0 !important; }
.hx-c3 { left: 330px !important; top: 56px !important; }
.hx-glow { width: 540px !important; height: 400px !important; }
.hx-pillars { margin-top: 56px !important; }
.hx-stats { margin-top: 34px !important; }
@media (max-width: 980px){ .hx-stack{ width: 100% !important; max-width: 540px; } }


/* ── Конструктор (стадия 1): параметры в колонки, блок «Образ», ГОСТ-запреты ── */
#quiz-params-dynamic .params-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { #quiz-params-dynamic .params-grid { grid-template-columns: 1fr; } }
.obraz-block { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.obraz-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; }
.obraz-head { font-size: 13px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.obraz-head i { color: var(--primary); font-size: 17px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-sel { border: 1px solid var(--border); background: #fff; color: var(--fg); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.chip-sel:hover { border-color: #b7c4da; }
.chip-sel.sel { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
#doc-restrictions { background: #fff5f5 !important; border: 1px solid #f3d4d4 !important; color: var(--fg) !important; padding: 14px 16px !important; }
.gost-title { font-size: 13.5px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gost-title i { color: var(--primary); font-size: 17px; }
.gost-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg); padding: 5px 0; }
.gost-ban { width: 22px; height: 22px; border-radius: 50%; background: #fbe3e3; color: var(--error); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }


/* ── Конструктор стадия 2: степпер, поиск, акцент качества, пакеты, ГОСТ компактнее ── */
.quiz-stepper { display:flex; gap:6px; margin:0 0 22px; flex-wrap:wrap; }
.qstep { flex:1; min-width:120px; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--fg-muted); padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:#fff; cursor:pointer; transition:all .15s; }
.qstep .qs-n { width:22px; height:22px; border-radius:50%; background:var(--bg-soft); color:var(--fg-muted); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.qstep.active { color:var(--fg); border-color:var(--primary); }
.qstep.active .qs-n { background:var(--primary); color:#fff; }
@media (max-width:640px){ .qstep{ min-width:0; flex:1 1 46%; font-size:12.5px; padding:8px 10px; } }

.doc-search { display:flex; align-items:center; gap:10px; background:#f1f3f7; border:1px solid var(--border); border-radius:var(--radius-md); padding:11px 14px; margin:0 0 16px; }
.doc-search i { color:var(--fg-muted); font-size:18px; }
.doc-search input { border:0; background:transparent; outline:none; width:100%; font-size:14.5px; color:var(--fg); font-family:inherit; }

.quality-accent { background:var(--primary-soft); border:1px solid #cdd9f6; border-radius:var(--radius-md); padding:14px 16px; margin:0 0 20px; }
.qa-head { font-size:14.5px; font-weight:600; color:var(--primary-dark); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.qa-head i { font-size:18px; }
.qa-items { display:flex; flex-direction:column; gap:7px; }
.qa-items span { font-size:13px; color:var(--fg); display:flex; align-items:center; gap:9px; }
.qa-items i { color:var(--primary); font-size:16px; flex-shrink:0; }

.price-pkgs { margin-top:16px; }
.pkg-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pkg { background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; text-align:center; }
.pkg b { display:block; font-size:20px; font-weight:700; color:var(--fg); }
.pkg span { font-size:11.5px; color:var(--fg-muted); }
.pkg-main { border-color:var(--primary); background:var(--primary-soft); }
.price-pkgs-note { text-align:center; font-size:12px; color:var(--fg-muted); margin:10px 0 0; }
@media (max-width:480px){ .pkg-row{ grid-template-columns:1fr; } }

/* ГОСТ — компактнее */
.gost-title { font-size:13px; margin-bottom:7px; }
.gost-row { gap:8px; padding:2px 0; font-size:12.5px; }
.gost-ban { width:18px; height:18px; font-size:12px; }


/* ── Селфи-гайд: визуал правильно/неправильно (стадия 3) ── */
.quiz-instructions { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:14px !important; }
.quiz-instructions > .sg-card { flex-direction:column !important; align-items:stretch !important; }
.sg-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; }
.sg-title { font-size:14px; font-weight:600; color:var(--fg); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sg-title i { color:var(--primary); font-size:18px; }
.sg-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sg-ex { border:2px solid; border-radius:10px; padding:8px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.sg-ex.good { border-color:var(--success); background:#f1faf4; }
.sg-ex.bad { border-color:var(--error); background:#fdf2f2; }
.sg-ex svg { width:48px; height:58px; display:block; }
.sg-tag { font-size:10.5px; font-weight:600; display:flex; align-items:center; gap:4px; text-align:center; line-height:1.2; }
.sg-tag i { font-size:12px; }
.sg-tag.good { color:#15803d; }
.sg-tag.bad { color:var(--error); }
.sg-tip { font-size:12px; color:var(--fg-muted); margin:10px 0 0; line-height:1.4; }
@media (max-width:720px){ .quiz-instructions { grid-template-columns:1fr !important; } }


/* === Адаптив: герой-стек на мобиле — 3 карточки в ряд, без наложения (перебить ≤980) === */
@media (max-width: 560px) {
  .hx-top { grid-template-columns: 1fr !important; }
  .hx-top > * { min-width: 0 !important; }
  .hx-right { min-height: 0 !important; min-width: 0 !important; display: block !important; }
  .hx-stack { position: relative !important; width: 100% !important; max-width: 100% !important; height: auto !important; display: flex !important; gap: 8px !important; min-width: 0 !important; }
  .hx-stack .hx-card { position: static !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; top: auto !important; left: auto !important; transform: none !important; box-shadow: var(--shadow-sm) !important; }
  .hx-c1, .hx-c2, .hx-c3 { transform: none !important; }
  .hx-glow, .hx-float { display: none !important; }
}


/* ── Загрузка: камера рекомендуемая (выделена) + «или» + выравнивание (стадия 3 polish) ── */
#upload-buttons-container { display:flex; flex-direction:column; }
.cam-rec { position:relative; border:1px solid #ffd9cf; background:#fff6f3; border-radius:var(--radius-lg); padding:16px; }
.cam-rec-tag { display:inline-flex; align-items:center; gap:5px; background:var(--action); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; margin-bottom:10px; }
.cam-rec-tag i { font-size:13px; }
.cam-rec-note { font-size:12.5px; color:var(--fg-muted); line-height:1.5; margin:10px 0 0; display:flex; gap:7px; align-items:flex-start; }
.cam-rec-note i { color:var(--action); font-size:15px; flex-shrink:0; margin-top:1px; }
.upload-or { text-align:center; font-size:12.5px; color:var(--fg-muted); margin:18px 0; position:relative; }
.upload-or span { background:var(--bg); padding:0 12px; position:relative; z-index:1; }
.upload-or::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border); }
#upload-buttons-container .dropzone { width:100%; box-sizing:border-box; margin:0; }

/* селфи-гайд: 4 карточки */
.quiz-instructions { grid-template-columns:repeat(4,1fr) !important; }
@media (max-width:900px){ .quiz-instructions { grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:520px){ .quiz-instructions { grid-template-columns:1fr !important; } }


/* === Степпер — плавающий (sticky) внутри карточки-конструктора === */
/* Фикс: body имел overflow:hidden auto → создавал скролл-контекст, ломавший sticky.
   overflow-x:clip клипает горизонталь без скролл-контекста; overflow-y:visible → скроллит окно → sticky работает. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
/* На /v3 шапка НЕ липкая (уезжает) → плашка-степпер липнет к самому верху на 4px без перекрытия */
.nav { position: static !important; }

.app-card { overflow: visible; }
.quiz-stepper {
  position: sticky;
  top: 4px;
  z-index: 90;
  background: #fff;
  margin: -24px -24px 18px !important;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (max-width: 640px){ .quiz-stepper { top: 4px; padding: 10px 16px; margin: -20px -20px 14px !important; } }


/* ── ГОСТ и Загрузка в 2 колонки; блок генерации (стадия 3 polish-2) ── */
#doc-restrictions { display:grid; grid-template-columns: minmax(130px,180px) 1fr; gap:18px; align-items:start; }
#doc-restrictions .gost-title { margin-bottom:0; line-height:1.3; }
#doc-restrictions .gost-sub { font-weight:500; color:var(--error); font-size:12px; }
#doc-restrictions .gost-list { display:flex; flex-direction:column; gap:3px; }
@media (max-width:600px){ #doc-restrictions { grid-template-columns:1fr; gap:10px; } }

.upload-grid { display:grid; grid-template-columns: minmax(210px,290px) 1fr; gap:24px; align-items:start; }
.upload-right { min-width:0; }
@media (max-width:720px){ .upload-grid { grid-template-columns:1fr; gap:14px; } }

.gen-privacy { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:var(--radius-md); padding:10px 14px; margin-top:14px; line-height:1.45; }
.gen-privacy i { color:#15803d; font-size:15px; flex-shrink:0; margin-top:1px; }
.gen-info { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.gen-info-row { display:flex; gap:11px; align-items:flex-start; }
.gi-ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.gi-ic.free { background:var(--bg-soft); color:var(--fg-muted); }
.gi-ic.paid { background:#e7f6ee; color:var(--success); }
.gen-info-row b { display:block; font-size:13.5px; color:var(--fg); }
.gen-info-row > div span { font-size:12.5px; color:var(--fg-muted); line-height:1.45; }


/* ── quality-accent пересобрать (иконки-плитки, воздух) + камера светло-зелёная ── */
.qa-head { font-size:14px; font-weight:600; color:var(--primary-dark); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.qa-head i { font-size:18px; }
.qa-items { display:flex; flex-direction:column; gap:10px; }
.qa-items span { font-size:13px; color:var(--fg); display:flex; align-items:center; gap:10px; line-height:1.35; }
.qa-items span i.ti { width:26px; height:26px; border-radius:7px; background:#fff; color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.quality-accent { padding:16px 18px; }

/* Главное CTA «Сделать селфи на камеру» — светло-зелёное (рекомендуемое действие) */
#start-camera-btn { background:#1da85e !important; border-color:#1da85e !important; color:#fff !important; }
#start-camera-btn:hover { background:#178a4c !important; border-color:#178a4c !important; }
.cam-rec { background:#f0fdf4; border-color:#bbf7d0; }
.cam-rec-tag { background:#1da85e; }
.cam-rec-note i { color:#1da85e; }


/* ── «Любые форматы»: flex + min-width (не жать/переносить криво), максимум 6 ── */
#doc-cards { display:flex !important; flex-wrap:wrap; gap:14px; justify-content:center; }
#doc-cards .doc-card { flex:1 1 170px; min-width:170px; max-width:230px; }

/* Превью загруженного фото — ниже на ~30% (ширина та же, aspect 4/5 → 7/6) */
.upload-confirmed #upload-thumb, .upload-confirmed img { aspect-ratio: 7 / 6 !important; }


/* ── Батч: H1 онлайн, Госуслуги, поиск, фото-contain, образ 2 кол, согласие ── */
.hx-online { color: var(--fg); }
.gos-accept { display:inline-flex; align-items:center; gap:8px; background:#e7f6ee; color:#15803d; border:1px solid #bbf7d0; border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:600; margin:14px 0 0; }
.gos-accept i { font-size:17px; }

/* Поиск — заметнее, во всю ширину, фокус внутри */
.doc-search { width:100% !important; margin:0 0 18px !important; padding:13px 16px; border:1.5px solid #c2ccdb; background:#fff; border-radius:var(--radius-md); transition:border-color .15s, box-shadow .15s; }
.doc-search:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(13,76,211,.13); }
.doc-search i { color:var(--primary); font-size:19px; }
.doc-search input { font-size:15px; font-weight:500; }
.doc-search input::placeholder { color:var(--fg-muted); font-weight:400; }

/* Загруженное фото — НЕ обрезать (contain), высота контейнера прежняя (7/6) */
.upload-confirmed #upload-thumb, .upload-confirmed img { object-fit: contain !important; background:#eef1f6; }
.upload-thumb-wrapper { background:#eef1f6; }

/* Образ — в одну строку, 2 колонки (пол | одежда) */
#obraz-dynamic { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#obraz-dynamic .obraz-card { margin-bottom:0; }
@media (max-width:560px){ #obraz-dynamic { grid-template-columns:1fr; } }

/* Согласие — явное, заметным блоком у кнопки */
.obraz-block .consent-row { margin-top:14px !important; background:var(--primary-soft); border:1px solid #cdd9f6; border-radius:var(--radius-md); padding:12px 14px; display:flex; gap:11px; align-items:flex-start; }
.obraz-block .consent-row .consent-cb { width:20px; height:20px; flex-shrink:0; margin-top:1px; accent-color:var(--primary); }
.obraz-block .consent-label { font-size:13px !important; line-height:1.45; color:var(--fg); }

/* заметка про время проверки */
.analysis-note { font-size:12.5px; color:var(--fg-muted); line-height:1.45; margin:10px 0 0; display:flex; gap:7px; align-items:flex-start; }
.analysis-note i { color:var(--primary); font-size:15px; flex-shrink:0; margin-top:1px; }

/* Чеклист анализа: реальный спиннер (эмодзи ⏳ не везде рендерится) + видимый текст пока грузится */
.analysis-check-item.checking .check-icon::before { content: "" !important; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: ac-spin .7s linear infinite; display: block; }
.analysis-check-item.checking .check-text { color: var(--fg) !important; font-style: italic; }
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* Загрузка: одна колонка — шпаргалка во всю ширину сверху, контент (кнопки→фото) ниже */
.upload-grid { display: block !important; }
.upload-left { margin-bottom: 16px; }
.quality-accent .qa-items { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.quality-accent .qa-items span { flex: 1 1 230px; }
@media (max-width: 640px){
  .quality-accent .qa-items { flex-direction: column; gap: 10px; }
  /* Сброс flex-basis 230px (он для row-раскладки) — иначе в column пункты по 230px высотой (огромные пробелы) */
  .quality-accent .qa-items span { flex: 0 0 auto; }
}
/* ФИКС: пункты чеклиста на всю ширину (был баг — пункт 24px, текст пола переносился по буквам) */
.upload-confirmed-info .analysis-check-item { display: flex !important; width: 100% !important; align-items: center; gap: 8px; }
.upload-confirmed-info .analysis-check-item .check-text { flex: 1 1 auto; white-space: normal; }

/* Чеклист: галочка ✓ (готово) / крестик ✗ (не прошло) — чёткие цветные символы вместо эмодзи */
.analysis-check-item.done .check-icon::before { content: "✓" !important; color: #15a05a !important; font-weight: 700; font-size: 15px; animation: none !important; border: none !important; width: auto !important; height: auto !important; }
.analysis-check-item.error .check-icon::before { content: "✕" !important; color: #d23d3d !important; font-weight: 700; font-size: 14px; animation: none !important; border: none !important; width: auto !important; height: auto !important; }

/* Блок оплаты: промпт почты, цена после ввода, ошибка под кнопкой */
.pay-email-prompt { font-size: 13.5px; color: var(--fg); font-weight: 600; margin: 6px 0 8px; }
.pay-price { margin: 12px 0; padding: 12px 14px; background: var(--primary-soft); border: 1px solid #cdd9f6; border-radius: var(--radius-md); }
.pay-price-main { display: block; font-size: 15px; color: var(--fg); }
.pay-price-main b { font-size: 21px; color: var(--primary-dark); }
.pay-price-note { display: block; font-size: 12.5px; color: var(--fg-muted); margin-top: 4px; line-height: 1.45; }
.email-error { color: var(--error); font-size: 13px; font-weight: 500; margin: 8px 0 0; }

/* ============ АДАПТИВ — консолидация брейкпоинтов (2026-06-18) ============ */
/* Грузится последним → перебивает разрозненные правила. Планшет = ≤1024. */
@media (max-width: 1024px) {
  /* 4-карточные ряды → 2 колонки уже с планшета (шаги «Как это работает»,
     «Как мы делаем», гайд «Как сделать идеальное селфи»). */
  .steps-grid, .steps-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .quiz-instructions { grid-template-columns: repeat(2, 1fr) !important; }
  /* FAQ: 1 вопрос в строку начиная с планшета. */
  .faq-list { grid-template-columns: 1fr !important; gap: 0 !important; }
  /* «Прозрачная цена»: широкая карта стекается в 1 колонку (не 3 на планшете). */
  .price-card.price-card-wide { grid-template-columns: 1fr !important; text-align: center; gap: 22px; }
  .price-card-wide .price-list { text-align: left; max-width: 380px; margin: 0 auto; }
}
@media (max-width: 600px) {
  /* Мобайл: 4-карточные ряды и гайд селфи → в одну колонку. */
  .steps-grid, .steps-grid-4 { grid-template-columns: 1fr !important; }
  .quiz-instructions { grid-template-columns: 1fr !important; }
}
/* Кнопка «Сделать селфи на камеру»: разрешаем перенос текста и авто-высоту
   (был клип «…КАМЕР» из-за nowrap + фикс-высоты на узких экранах). !important —
   перебить инлайновый height:54px. */
#start-camera-btn {
  white-space: normal !important;
  height: auto !important;
  min-height: 54px;
  padding: 12px 18px !important;
  line-height: 1.25;
}

/* Hero: на планшете (≤980) две колонки text|карточки → стек в одну, по центру (#6). */
@media (max-width: 980px) {
  .hx-top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .hx-left { text-align: center; }
  .hx-left .lead { max-width: 560px; margin-left: auto; margin-right: auto; }
  .hx-left .hx-cta { justify-content: center; }
  .hx-left .hx-cost { text-align: center; }
}

/* Под-текст оверлея прогресса (#5): ободряющая ротация во время долгой генерации. */
.po-sub { margin: 10px 0 0; font-size: 14px; color: var(--fg-muted); line-height: 1.5; min-height: 21px; }

/* После загрузки фото — прячем всю область загрузки (у .upload-grid display:block !important,
   поэтому нужен побеждающий класс). На её месте показывается карточка подтверждения (#1). */
.upload-grid.upload-hidden { display: none !important; }