/* ============================================================
   Site styles — Летай Таттелеком (production)
   colors_and_type.css подгружается параллельным <link> из header_meta.php
   (раньше был @import — он сериализовал загрузку CSS).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg); }
body.no-scroll { overflow: hidden; }

/* Global focus-visible — clear ring everywhere.
   Run-14 C6: ring через box-shadow rgba(brand, 0.35–0.45) давал 1.67–1.95:1
   на белом → fail WCAG 1.4.11. Сейчас solid outline тем же брэндом (4.28:1 на
   белом, 4.62:1 на dark). На primary CTA снаружи оранжевой кнопки получается
   «двойная рамка одного оттенка» — это компромисс ради читаемости. */
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible, .icon-btn:focus-visible, .hamburger:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 2px; box-shadow: none; }
.tariff.popular *:focus-visible { outline-color: #fff; }

/* Tap-action manipulation + tap-highlight reset on all interactive elements */
button, a, [role="button"], [role="tab"], .menu-trigger, .city-btn, .calc-toggle, .tariff-tabs button, .mega-link, .contact-card, .faq-q {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Видимый focus для клавиатурной навигации (Tab). Раньше outline был выключен
   глобально — пользователи без мыши не видели, где курсор (тест 2026-05-15-1218
   a11y, WCAG SC 2.4.7 + 2.4.11). У .field-обёрток свой box-shadow-индикатор
   (см. строку 1179), там outline отключаем чтобы не было двойной рамки. */
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { text-decoration: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1440px) { .container { max-width: 1360px; } }
@media (min-width: 1600px) { .container { max-width: 1440px; } }
@media (min-width: 1920px) { .container { max-width: 1600px; } }

/* ----- Buttons ----- */
.btn {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500; line-height: 1;
  padding: 12px 28px; border-radius: 4px; min-height: 44px;
  border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing), box-shadow var(--duration) var(--easing), transform 80ms var(--easing);
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 2px; box-shadow: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; transform: none !important; }
.btn .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 700ms linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-lg { padding: 16px 40px; font-size: 17px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-primary { background: var(--color-brand); color: #fff; }
.btn-primary:hover { background: var(--color-brand-dark); color: #fff; }
.btn-primary:active { background: var(--color-brand-darker); color: #fff; }
.btn-secondary { background: transparent; border: 2px solid var(--color-brand); color: var(--color-brand); padding: 10px 26px; }
.btn-secondary:hover { background: var(--color-brand-pale); color: var(--color-brand); }
.btn-on-orange { background: rgba(255,255,255,0.12); border: 2px solid #fff; color: #fff; padding: 10px 26px; }
.btn-on-orange:hover { background: rgba(255,255,255,0.22); color: #fff; }
.btn-white { background: #fff; color: var(--color-brand); border: none; }
.btn-white:hover { background: rgba(255,255,255,0.9); color: var(--color-brand); }

/* ----- Site header (utility row + main nav row) ----- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); transition: transform 0.25s ease; }
/* Auto-hide на mobile при скролле вниз (toggle через JS, см. main.js).
   На desktop класс не вешается — там шапка всегда видна. */
.site-header.site-header--hidden { transform: translateY(-100%); }

/* Utility row — secondary nav: тоньше и тише main-nav, чтобы держать иерархию.
   Высота ~32px, фон чуть приглушён нейтральным surface (отделяет слой от primary-row), текст muted. */
.utility {
  background: var(--color-gray-100); border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--fg-muted);
}
.utility-inner {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 16px;
}
.utility .left, .utility .right { display: flex; align-items: center; gap: 8px; }
.utility a, .utility button { color: var(--fg-muted); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 8px 4px; font-family: inherit; font-size: inherit; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.utility a:hover, .utility button:hover { color: var(--color-brand); }
.utility .seg-tab { padding: 8px 4px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration) var(--easing), border-color var(--duration) var(--easing); }
.utility .seg-tab.active { color: var(--color-brand); font-weight: 600; border-bottom-color: var(--color-brand); }
.utility .seg-divider { color: var(--color-gray-300); margin: 0 6px; padding: 0; user-select: none; }
/* Group separators: 6px base + 6px margin = 12px between blocks (плотнее) */
.utility .left > .messengers { margin: 0 6px; }
.utility .left > a:not(.seg-tab) + a { margin-left: 6px; }
.utility .city-btn i { color: var(--color-gray-500); }
.utility .city-btn:hover i { color: var(--color-brand); }
.utility .phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-brand-dark); background: var(--color-brand-pale); padding: 8px 14px; border-radius: 999px; transition: background var(--duration) var(--easing), color var(--duration) var(--easing); }
.utility .phone:hover { background: var(--surface-warm-pale); color: var(--color-brand-dark); }

/* Messenger pill-chips (Variant C) — icon + label inside utility row */
.utility .messengers { display: inline-flex; align-items: center; gap: 4px; padding: 0; }
.utility .messengers a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--color-gray-100);
  font-size: 13px; font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.utility .messengers a:hover {
  background: var(--color-brand-pale);
  color: var(--color-brand);
}
.utility .messengers img { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.utility .messengers .label { white-space: nowrap; }
/* Narrow utility — collapse to icon-only before phone wraps.
   Threshold tuned to ru/tt (widest locales): phone bubble wraps at ~1430px,
   so we collapse at 1440 to keep the phone on one line. */
@media (max-width: 1440px) {
  .utility .messengers a { padding: 7px; background: transparent; gap: 0; }
  .utility .messengers a:hover { background: var(--color-gray-100); }
  .utility .messengers .label { display: none; }
  .utility .messengers img { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .utility .messengers a { transition: none; }
}
.utility .phone .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(46,168,79,0.18);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46,168,79,0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(46,168,79,0.05); }
}

/* City picker dropdown */
.city-menu {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-md);
  padding: 8px; min-width: 280px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 150ms var(--easing), transform 150ms var(--easing), visibility 150ms;
  z-index: 70;
  max-height: 320px; overflow-y: auto;
}
.city-picker { position: relative; }
.city-picker.open .city-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.city-picker.open .city-btn { color: var(--color-brand); }
.city-menu a { display: block; padding: 10px 14px; font-size: 14px; color: var(--fg); border-radius: 4px; font-weight: 500; }
.city-menu a:hover, .city-menu a.active { background: var(--color-brand-pale); color: var(--color-brand); }
.city-menu .group-label { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-gray-500); }
.city-menu a.is-building, .mm-city-menu a.is-building { color: var(--color-gray-500); }
.city-menu a.is-building .badge--soon, .mm-city-menu a.is-building .badge--soon {
  display: inline-block; margin-left: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 5px; border-radius: 3px; font-weight: 600;
  background: rgba(250, 73, 6, 0.1); color: var(--color-brand);
  vertical-align: middle;
}

/* Поиск города внутри выпадашки. Sticky-positioning чтобы при прокрутке
   списка поле оставалось наверху. На mobile (.mm-city-menu) — те же стили. */
.city-menu .city-search,
.mm-city-menu .city-search {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-elevated);
  padding: 2px 0 6px;
  margin-bottom: 2px;
}
.city-menu .city-search-input,
.mm-city-menu .city-search-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px;
  /* 16px обязательно: iOS Safari зумит при focus на input < 16px (баг 2026-05-16) */
  font-size: 16px;
  color: var(--fg);
  background: var(--color-gray-100, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  outline: none;
  transition: border-color var(--duration) var(--easing), background var(--duration) var(--easing);
}
.city-menu .city-search-input:focus,
.mm-city-menu .city-search-input:focus { border-color: var(--color-brand); }
.city-menu .city-search-input::-webkit-search-cancel-button,
.mm-city-menu .city-search-input::-webkit-search-cancel-button { filter: opacity(0.55); cursor: pointer; }
.city-menu .city-no-results,
.mm-city-menu .city-no-results {
  padding: 12px 14px; font-size: 13px; color: var(--color-gray-500); margin: 0; text-align: center;
}

/* Language pills — 3 visible (RU/EN/TT), Chinese expands on hover/focus.
   Globe icon left, pills inline. Active pill = brand-pale background.
   Hover any pill: tooltip with native lang name (CSS attr from data-lang-native). */
.lang-pills {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 4px;
  position: relative;
}
.lang-pills .lang-pills-globe { color: var(--color-gray-500); margin-right: 4px; flex-shrink: 0; transition: color var(--duration) var(--easing); }
.lang-pills:hover .lang-pills-globe,
.lang-pills:focus-within .lang-pills-globe { color: var(--color-brand); }

.utility .lang-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; min-width: 28px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-gray-500);
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing), max-width 220ms var(--easing), opacity 180ms var(--easing), padding 220ms var(--easing), margin 220ms var(--easing);
}
.utility .lang-pill:hover { background: var(--color-brand-pale); color: var(--color-brand); }
.utility .lang-pill.is-active { background: var(--color-brand-pale); color: var(--color-brand); }

/* Chinese pill — collapsed by default, expands on hover/focus of the group.
   Uses max-width transition (not display:none) so it animates smoothly.
   min-width: 0 + margin-left: -2px нужны чтобы компенсировать gap:2px родителя
   и min-width: 28px базового pill — иначе collapsed-китайский оставлял пустое
   28-30px пространство справа от «Тат». */
.utility .lang-pill--extra {
  max-width: 0; min-width: 0;
  padding-left: 0; padding-right: 0; margin-left: -2px;
  opacity: 0; overflow: hidden; pointer-events: none;
  white-space: nowrap;
}
.lang-pills:hover .lang-pill--extra,
.lang-pills:focus-within .lang-pill--extra,
.utility .lang-pill--extra.is-active {
  max-width: 60px; min-width: 28px;
  padding-left: 8px; padding-right: 8px; margin-left: 2px;
  opacity: 1; pointer-events: auto;
}

/* Tooltip с нативным именем языка (Русский / English / Татарча / 中文) */
.utility .lang-pill::after {
  content: attr(data-lang-native);
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--fg); color: var(--bg);
  padding: 4px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 150ms var(--easing), transform 150ms var(--easing);
  z-index: 75;
}
.utility .lang-pill { position: relative; }
.utility .lang-pill:hover::after,
.utility .lang-pill:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

@media (max-width: 1100px) {
  .utility .lang-pill { padding: 3px 6px; font-size: 11px; }
}

/* Mobile menu — drawer-шапка из 2 ярусов:
   .mm-city-row   — город full-width (длинные топонимы вмещаются без переноса)
   .mm-tools-row  — поиск (только RU) + переключатель языка одной плоскостью */
.mobile-menu .mm-city-row { position: relative; }

.mobile-menu .mm-tools-row {
  display: flex; align-items: stretch; gap: 8px;
  margin-top: 10px;
  min-width: 0;
}

/* Language switcher: pill-контейнер визуального паритета с .mm-city-btn.
   ISO-639 коды (RU/EN/TT/中) в одной системе записи, активный — brand-pale. */
.mobile-menu .mm-lang {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 6px 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 44px;
}
.mobile-menu .mm-lang-globe {
  color: var(--color-gray-500); flex-shrink: 0; margin-right: 2px;
}
.mobile-menu .mm-lang__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 36px;
  padding: 4px 6px;
  font-size: 13px; font-weight: 600;
  color: var(--color-gray-500);
  text-decoration: none;
  border-radius: 8px;
  letter-spacing: 0.02em;
  transition: color var(--duration) var(--easing), background var(--duration) var(--easing);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* CJK-глиф визуально мельче латиницы при том же font-size → компенсация */
.mobile-menu .mm-lang__pill[hreflang="zh"] {
  font-size: 15px; line-height: 1; padding-top: 2px;
}
.mobile-menu .mm-lang__pill:hover { background: var(--color-gray-100); }
.mobile-menu .mm-lang__pill:active { background: var(--color-gray-200); }
.mobile-menu .mm-lang__pill.is-active {
  color: var(--color-brand);
  background: var(--color-brand-pale);
}

/* ----- Main nav (no sticky — site-header is sticky) ----- */
.main-nav { background: var(--bg); }
.main-nav-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.main-nav .brand-row { display: flex; align-items: center; gap: 16px; }
.main-nav .brand-row .logo-combo { height: 40px; width: auto; }
.main-nav .brand-row .logo-combo--white,
.mobile-menu .mm-header .mm-brand .logo-combo--white { display: none; }
:root[data-theme="dark"] .main-nav .brand-row .logo-combo--color,
:root[data-theme="dark"] .mobile-menu .mm-header .mm-brand .logo-combo--color { display: none; }
:root[data-theme="dark"] .main-nav .brand-row .logo-combo--white,
:root[data-theme="dark"] .mobile-menu .mm-header .mm-brand .logo-combo--white { display: block; }
.main-nav .brand-row .logo-letai { height: 30px; }
.main-nav .brand-row .logo-tatt {
  height: 20px; padding-left: 16px; margin-left: 4px; border-left: 1px solid var(--color-gray-200); opacity: 0.8;
}
.main-nav .links { display: flex; gap: 6px; align-items: center; flex: 1; margin-left: 16px; }
.main-nav .links a, .main-nav .links .has-menu > span {
  font-size: 16px; font-weight: 500; color: var(--fg);
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
.main-nav .links a.active,
.main-nav .links .has-menu .menu-trigger.active {
  background: var(--color-brand-pale); color: var(--color-brand);
}
.main-nav .links a:hover, .main-nav .links .has-menu:hover > span { background: var(--color-gray-100); color: var(--color-brand); }
/* Borderless pill for action-y nav item (e.g. "Проверить адрес") — relies on brand-orange text colour to stand out */
.main-nav .links .menu-trigger--accent {
  margin-left: auto;
  color: var(--color-brand);
  background: var(--bg);
}
.main-nav .links .menu-trigger--accent:hover { background: var(--color-brand-pale); color: var(--color-brand); }
.main-nav .links .menu-trigger--accent.active { background: var(--color-brand-pale); color: var(--color-brand); }
.main-nav .links .menu-trigger--accent i { color: currentColor; }
.main-nav .right { display: flex; align-items: center; gap: 12px; }
.main-nav .icon-btn {
  width: 44px; height: 44px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg); cursor: pointer;
  background: transparent; border: none; padding: 0;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.main-nav .icon-btn:hover { background: var(--color-gray-100); color: var(--color-brand); }

/* Mobile-only quick actions in main nav (phone + whatsapp); hidden by default */
.main-nav .right .quick-action {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 8px; transition: filter var(--duration) var(--easing);
}
/* Телефон — серый, как поиск. Был оранжевым (color-brand на color-brand-pale),
   но рядом с оранжевой .btn-primary «Заявка» оба warm-акцента конкурировали и
   ни один не читался как primary. Единый оранжевый — только «Заявка».
   iPhone SE override (≤340) ниже сохраняет оранжевый primary, когда .btn-primary скрыт. */
.main-nav .right .quick-action.quick-call { color: var(--fg); background: var(--color-gray-100); }
.main-nav .right .quick-action.quick-chat { color: var(--fg); background: var(--color-gray-100); }
.main-nav .right .quick-action.quick-call:hover { background: var(--color-brand-pale); color: var(--color-brand); }
.main-nav .right .quick-action:hover { filter: brightness(0.96); }

/* ----- Hamburger + mobile menu ----- */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
.hamburger span { width: 24px; height: 2px; background: var(--fg); border-radius: 2px; transition: all 0.2s; }
.mobile-menu { display: none; }

/* ----- Hero context bar (city + building-type segment) — mobile only, sits above hero card ----- */
.hero-bar { display: none; }

/* ----- Mobile top bar (city + theme) — mobile only, sits above hero on every page.
   Surfaces both controls without forcing the user into the burger menu.
   Hidden on desktop where .utility row carries the same controls. ----- */
.mobile-top-bar { display: none; }

/* ----- Hero ----- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand-darker) 100%);
  color: #fff;
  border-radius: 16px; margin: 24px 0 64px;
}
.hero-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px;
  align-items: center; padding: 64px 56px;
  position: relative; z-index: 1;
}
.hero h1 {
  font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: 0;
  margin: 0 0 20px; color: #fff;
}
.hero h1 .accent {
  color: #FFE8C7; position: relative; display: inline-block; white-space: nowrap; z-index: 0;
}
.hero h1 .accent::before {
  content: ''; position: absolute; left: -0.12em; right: -0.12em; bottom: 0.05em; height: 0.32em;
  background: rgba(255,255,255,0.22); border-radius: 6px; z-index: -1;
}
.hero p.lede { font-size: 18px; line-height: 1.55; max-width: 480px; margin: 0 0 32px; color: #fff; font-weight: 500; }
.hero-stats {
  display: flex; gap: 32px; margin-bottom: 28px; flex-wrap: wrap;
}
.hero-stats .stat .num { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: 0; color: #fff; }
.hero-stats .stat .lbl { font-size: 14px; margin-top: 6px; color: #fff; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta-aux:hover, .hero-cta-aux:focus-visible { color: #fff; border-color: rgba(255,255,255,0.85); gap: 10px; }
.hero-art { position: relative; height: 100%; min-height: 540px; }
.hero-art .hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  object-fit: cover; object-position: 50% 40%;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
.hero-art .speed-pill {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  background: var(--bg-elevated); color: var(--fg);
  padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 12px;
}
.hero-art .speed-pill .num { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.hero-art .speed-pill .lbl { font-size: 12px; color: var(--color-gray-500); margin-top: 2px; }

.hero-art .bonus-pill {
  position: absolute; right: 24px; top: 24px; z-index: 2;
  background: var(--color-brand); color: #fff;
  padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.2; max-width: 240px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
a.bonus-pill:hover, a.bonus-pill:focus-visible { background: var(--color-brand-600, #c84a13); box-shadow: var(--shadow-lg, 0 10px 28px rgba(0,0,0,.18)); transform: translateY(-1px); }
a.bonus-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-art .bonus-pill i { width: 18px; height: 18px; flex: none; }
@media (max-width: 768px) {
  .hero-art .bonus-pill { right: 12px; top: 12px; padding: 8px 12px; font-size: 12px; max-width: 180px; }
  .hero-art .bonus-pill i { width: 14px; height: 14px; }
}

/* ===========================================================================
   Hero V3L — Photo Cinematic (light theme)
   Используется на главной (sections/hero_v3l.php). Фон-фото с кремовым градиент-
   оверлеем, тёмный текст, оранжевый primary CTA.
   =========================================================================== */
.hero-v3l {
  background: var(--surface-warm);
  color: var(--fg);
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  border-radius: 0;
  margin: 24px 0 64px;
  /* full-bleed: вырываемся из container на полный viewport */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hero-v3l-bg { position: absolute; inset: 0; }
.hero-v3l-bg picture, .hero-v3l-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-v3l-bg::after {
  content: ''; position: absolute; inset: 0;
  /* Break point 38% покрывает весь текстовый блок solid cream
     (max-width 540px + 56px padding ≈ 47% от 1280px container).
     Правый край открыт почти полностью (0.05 alpha) — фото
     читается чётко, лица семьи, ТВ, обстановка. */
  background:
    linear-gradient(95deg,
      var(--surface-warm) 0%,
      var(--surface-warm) 38%,
      rgba(250, 247, 244, 0.45) 62%,
      rgba(250, 247, 244, 0.05) 100%);
}
.hero-v3l .container {
  position: relative; z-index: 2;
  padding-top: 56px; padding-bottom: 56px;
  width: 100%;
}
.hero-v3l-content { max-width: 540px; }
.hero-v3l h1 {
  font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
  color: var(--fg); margin: 0 0 18px; text-wrap: balance;
}
.hero-v3l h1 .accent { color: var(--color-brand); }
.hero-v3l h1 .nb { white-space: nowrap; }
.hero-v3l-lede {
  font-size: 20px; line-height: 1.5; color: var(--fg);
  margin: 0 0 26px; max-width: 480px; overflow-wrap: break-word;
}
.hero-v3l-lede strong { font-weight: 700; }

.hero-v3l-features {
  display: flex; flex-wrap: wrap;
  gap: 24px 32px; margin: 0 0 32px;
}
.hero-v3l-feature { display: flex; align-items: center; gap: 12px; }
.hero-v3l-feature .ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--color-brand-pale);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brand); flex-shrink: 0;
}
.hero-v3l-feature .num {
  font-size: 22px; font-weight: 700; color: var(--fg);
  line-height: 1.1; letter-spacing: -0.01em;
}
.hero-v3l-feature .lbl {
  font-size: 13px; color: var(--fg-muted);
  font-weight: 500; margin-top: 4px;
}

.hero-v3l-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-v3l-cta .btn-v3l-primary {
  background: var(--color-brand); color: #fff;
  padding: 14px 28px; border-radius: 999px;
  font-size: 16px; font-weight: 600;
  font-family: inherit;
  border: 0;
  cursor: pointer;
  min-height: 48px;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 28px rgba(224, 64, 0,0.32);
  transition: background var(--duration) var(--easing), box-shadow var(--duration) var(--easing), transform 80ms var(--easing);
  white-space: nowrap;
}
.hero-v3l-cta .btn-v3l-primary:hover { background: var(--color-brand-dark); color: #fff; }
.hero-v3l-cta .btn-v3l-primary:active { transform: scale(0.97); }
.hero-v3l-cta .btn-v3l-secondary {
  background: var(--bg-soft);
  border: 0;                                /* убрали 1px border — выравнивает с primary (Run-13b H2) */
  color: var(--fg);
  padding: 14px 28px; border-radius: 999px;  /* padding совпадает с primary */
  font-size: 16px; font-weight: 600;
  min-height: 48px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
  white-space: nowrap;
}
.hero-v3l-cta .btn-v3l-secondary:hover {
  background: var(--color-gray-200);
  color: var(--fg);
}
/* Run-14 I7 (Ильдар): secondary в dark = bg-soft (~0.30 oklch) на bg
   (~0.255) = ratio 1.4:1 — edge кнопки почти невидим. Добавляем тонкую
   светлую рамку чтобы выделить кнопку без перекрашивания фона.
   Прод-чек после деплоя — попросить пользователя. */
:root[data-theme="dark"] .hero-v3l-cta .btn-v3l-secondary {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
:root[data-theme="dark"] .hero-v3l-cta .btn-v3l-secondary:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.hero-v3l-cta .btn-v3l-primary:focus-visible,
.hero-v3l-cta .btn-v3l-secondary:focus-visible {
  outline: 2px solid var(--color-brand-darker);
  outline-offset: 3px;
}

@media (min-width: 1440px) { .hero-v3l-content { max-width: 600px; } }
@media (max-width: 1024px) { .hero-v3l h1 { font-size: 44px; } }
@media (max-width: 960px) {
  .hero-v3l { min-height: 640px; align-items: flex-start; }
  .hero-v3l h1 { font-size: 38px; }
  .hero-v3l-lede { font-size: 18px; }
  .hero-v3l-bg img {
    height: 220%;
    object-position: 65% top;
  }
  .hero-v3l-bg::after {
    background:
      linear-gradient(180deg, var(--surface-warm) 0%, var(--surface-warm) 45%, transparent 100%);
  }
}
@media (max-width: 768px) { .hero-v3l h1 { font-size: 34px; } }
@media (max-width: 600px) {
  .hero-v3l {
    min-height: 460px;
    margin: 0 0 40px;
    /* full-bleed и на mobile: фон до краёв экрана */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
  }
  /* Mobile photo: лёгкое затемнение через filter, чтобы семья читалась
     как тёплый фон, а не «спорила» с текстом яркостью. */
  .hero-v3l-bg img {
    height: 140%;
    object-position: 70% top;
    filter: brightness(0.92) saturate(0.92);
  }
  /* Mirror тёмной темы по структуре: верх solid cream под H1+лидом,
     середина 0.55 alpha (фичи и CTA — основа текстуры), низ 0.20 alpha
     (семья видна как мягкий warm-фон, не focal element). */
  .hero-v3l-bg::after {
    background: linear-gradient(180deg,
      var(--surface-warm) 0%,
      var(--surface-warm) 42%,
      rgba(250, 247, 244, 0.55) 72%,
      rgba(250, 247, 244, 0.20) 100%
    );
  }
  .hero-v3l .container { padding-top: 28px; padding-bottom: 36px; }
  .hero-v3l-content, .hero-v3l-lede {
    max-width: 100%; box-sizing: border-box;
    word-break: normal; overflow-wrap: anywhere;
  }
  .hero-v3l h1 { font-size: 32px; }
  .hero-v3l-features { gap: 14px 20px; margin-bottom: 24px; }
  .hero-v3l-feature .ic { width: 36px; height: 36px; border-radius: 10px; }
  /* Smart halo: невидим на solid cream сверху, читаемость над фото
     в нижней зоне где cream уже фейдится. Не ломает контраст
     в solid (тень растворяется в фоне того же цвета). Применяется
     ко всему тексту, который может попадать в fading зону. */
  .hero-v3l-lede,
  .hero-v3l-feature .num {
    text-shadow: 0 0 10px rgba(250, 247, 244, 0.85);
  }
  .hero-v3l-feature .num { font-size: 18px; }
  .hero-v3l-feature .lbl {
    font-size: 12px;
    text-shadow: 0 0 8px rgba(250, 247, 244, 0.85);
  }
  .hero-v3l-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-v3l-cta .btn-v3l-primary,
  .hero-v3l-cta .btn-v3l-secondary {
    width: 100%; justify-content: center;
  }
}

/* ----- Section ----- */
section.block       { padding-block: var(--section-py); padding-inline: 0; }
section.block.tight { padding-block: var(--section-py-tight); }
section.block.dark  { background: var(--bg-dark); color: var(--fg-on-dark); }
section.block.soft  { background: var(--color-gray-100); }

/* Section adjacency — когда две секции стоят подряд с одним фоном,
   у второй убираем верхний padding: иначе 80+80=160px «двойной пустоты»
   на одном фоне читается как провал, а не как ритм. После правила:
   gap = padding-bottom предыдущей секции (~56-80px). Разные фоны
   (e.g. transparent → soft) друг от друга оставляем нетронутыми —
   там цвет уже задаёт визуальную границу.
   Варианты «+ script +» — на случай inline JSON-LD между секциями
   (e.g. howto.php эмитит HowTo schema после </section>). */
section.block.soft + section.block.soft,
section.block.soft + script + section.block.soft,
section.block.dark + section.block.dark,
section.block.dark + script + section.block.dark,
section.block:not(.soft):not(.dark):not(.connect-orange) +
  section.block:not(.soft):not(.dark):not(.connect-orange),
section.block:not(.soft):not(.dark):not(.connect-orange) + script +
  section.block:not(.soft):not(.dark):not(.connect-orange) {
  padding-block-start: 0;
}
.section-head { margin-bottom: 40px; max-width: 820px; }
.section-head h2 { font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0 0 12px; }
.section-head > p:not(.eyebrow) { font-size: 18px; color: var(--color-gray-500); margin: 0; }
.section-head .eyebrow { margin: 0 0 8px; }
section.dark .section-head > p:not(.eyebrow) { color: var(--fg-on-dark-muted); }

/* ----- Tariff tabs ----- */
.tariff-tabs {
  display: inline-flex; background: var(--tabs-track);
  border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 32px;
}
.tariff-tabs button {
  background: transparent; border: none; padding: 12px 22px; min-height: 44px;
  border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
  color: var(--color-gray-500);
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.tariff-tabs button.active { background: var(--tabs-thumb); color: var(--fg); box-shadow: var(--shadow-xs); }

/* ----- Tariff cards ----- */
.tariff-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.tariff-grid.single { grid-template-columns: minmax(0, 420px); }
.tariff {
  border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--fg);
  transition: box-shadow var(--duration) var(--easing), border-color var(--duration) var(--easing), transform var(--duration) var(--easing);
  position: relative;
}
.tariff:hover { box-shadow: var(--shadow-md); border-color: transparent; transform: translateY(-2px); }
.tariff.popular {
  background: var(--color-brand); color: #fff; border-color: transparent;
}
.tariff.popular:hover { box-shadow: 0 16px 40px rgba(224, 64, 0,0.35); }
.tariff .badge {
  position: absolute; top: 18px; right: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  padding: 4px 10px; border-radius: 999px; background: var(--color-brand); color: #fff;
}
.tariff.popular .badge { background: #fff; color: var(--color-brand); }
.tariff .name { font-size: 16px; font-weight: 600; padding-right: 96px; }
.tariff.popular .name { color: #fff; }
.tariff .price { display: flex; align-items: baseline; gap: 4px; }
.tariff .price .val { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: 0; display: inline-block; transform-origin: left center; }
.tariff .price.changed .val { animation: tariff-price-pulse 360ms var(--easing); }
@keyframes tariff-price-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.tariff .price .unit { font-size: 16px; font-weight: 500; opacity: 0.7; }
.tariff .features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
/* Features растягивается, забирая пустое место в выровненных-по-высоте
   карточках; actions садится сразу за features без «дыры»
   (раньше margin-top:auto давал 84px пустоты на GPON 350+ТВ). */
.tariff .features li { font-size: 14px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.tariff .features li:first-child { font-size: 18px; font-weight: 600; }
.tariff .features li:first-child i { width: 18px; height: 18px; }
.tariff .features li i { color: var(--color-brand); flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; }
.tariff.popular .features li i { color: rgba(255,255,255,0.92); }
.tariff .router-toggle {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--color-gray-100); border-radius: 10px; font-size: 15px;
  min-height: 52px;
  transition: background var(--duration) var(--easing);
}
/* При включении фон карточки не меняется — состояние сигнализируют
   только сам switch (оранжевый) и price-tag (брендовый цвет + 600). */
.tariff.popular .router-toggle { background: rgba(255,255,255,0.15); color: #fff; }
.tariff.popular .router-toggle.on .switch { background: #fff; }
.tariff.popular .router-toggle.on .switch::after { background: var(--color-brand); }
.tariff .router-toggle .switch {
  position: relative; width: 36px; height: 20px; border-radius: 999px;
  background: var(--color-gray-300); cursor: pointer; flex-shrink: 0;
  transition: background var(--duration) var(--easing);
}
.tariff .router-toggle .switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 999px; background: #fff;
  transition: transform var(--duration) var(--easing);
}
.tariff .router-toggle.on .switch { background: var(--color-brand); }
.tariff .router-toggle.on .switch::after { transform: translateX(16px); }
.tariff .router-toggle .label { flex: 1; transition: color var(--duration) var(--easing); }
.tariff .router-toggle .price-tag {
  font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
  transition: color var(--duration) var(--easing);
}
.tariff .router-toggle.on .price-tag { color: var(--color-brand); font-weight: 600; }
.tariff.popular .router-toggle .price-tag { color: rgba(255,255,255,0.72); }
.tariff.popular .router-toggle.on .price-tag { color: #fff; font-weight: 600; }
.tariff .term { font-size: 12px; color: var(--color-gray-500); }
.tariff.popular .term { color: rgba(255,255,255,0.75); }
.tariff .tariff-actions { display: flex; flex-direction: column; gap: 8px; }
.tariff .tariff-actions .cta { width: 100%; }
.tariff-detail-link {
  display: block; width: 100%;
  min-height: 44px; line-height: 28px;              /* WCAG/Apple HIG/MD touch target */
  text-align: center; font-size: 14px; font-weight: 500;
  color: var(--color-gray-500); text-decoration: none; padding: 8px 12px;
  box-sizing: border-box;
  transition: color var(--duration) var(--easing);
}
.tariff-detail-link:hover { color: var(--color-brand); }
.tariff.popular .tariff-detail-link { color: rgba(255,255,255,0.78); }
.tariff.popular .tariff-detail-link:hover { color: #fff; }
/* Popular tariff (orange bg) — invert primary CTA so it stays visible */
.tariff.popular .btn-primary { background: #fff; color: var(--color-brand); }
.tariff.popular .btn-primary:hover { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.16); transform: translateY(-1px); }
.tariff.popular .btn-primary:active { background: rgba(255,255,255,0.92); transform: translateY(0); box-shadow: none; }
.tariff.popular .btn-secondary { border-color: #fff; color: #fff; }
.tariff.popular .btn-secondary:hover { background: rgba(255,255,255,0.15); }

/* ----- Shared info under apartment-tabs > internet-tv pane ----- */
.tariffs-shared-info {
  list-style: none; padding: 16px 20px; margin: 24px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-around;
  background: var(--color-gray-100); border-radius: 12px;
  font-size: 14px; color: var(--fg);
}
.tariffs-shared-info li { display: inline-flex; align-items: center; gap: 8px; }
.tariffs-shared-info li i { width: 16px; height: 16px; color: var(--color-brand); flex-shrink: 0; }
@media (max-width: 640px) {
  .tariffs-shared-info {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 16px;
  }
}

/* ----- Service / equipment cards ----- */
.eq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.eq-card {
  display: grid; grid-template-columns: 220px 1fr;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; transition: box-shadow var(--duration) var(--easing);
}
.eq-card:hover { box-shadow: var(--shadow-md); }
.eq-photo { background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; padding: 24px; }
.eq-photo img { max-height: 160px; object-fit: contain; }
.eq-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.eq-body h3 { font-size: 20px; font-weight: 600; margin: 0; }
.eq-body p { font-size: 14px; color: var(--color-gray-500); margin: 0; line-height: 1.5; }
.eq-body .price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.eq-body .price-row .val { font-size: 22px; font-weight: 700; }
.eq-body .price-row .note { font-size: 13px; color: var(--color-gray-500); }
.eq-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.eq-cta { min-height: 44px; }
.eq-detail-link { font-size: 14px; color: var(--brand-on-dark); text-decoration: none; font-weight: 500; }
.eq-detail-link:hover { text-decoration: underline; }

/* ----- Why / features ----- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-item { display: flex; flex-direction: column; gap: 12px; }

.why-letai-groups { display: flex; flex-direction: column; gap: 44px; }
.why-letai-group-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-200);
}
@media (max-width: 768px) {
  .why-letai-groups { gap: 32px; }
}

.why-item .ico {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--color-brand-pale); color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.why-item .ico i { width: 24px; height: 24px; }
.why-item h3, .why-item h4 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.why-item p { margin: 0; font-size: 14px; color: var(--color-gray-500); line-height: 1.55; }
.why-item .why-item-chev { display: none; }

/* ----- HowTo (3-step connection) ----- */
.howto-head { max-width: 720px; margin-bottom: 44px; }
.howto-head .section-h2 { margin: 4px 0 0; }
.howto-head .howto-sub {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-gray-500);
}

.howto-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.howto-step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition:
    transform var(--duration) var(--easing),
    border-color var(--duration) var(--easing),
    box-shadow var(--duration) var(--easing);
}
.howto-step:hover {
  transform: translateY(-2px);
  border-color: var(--surface-warm-edge);
  box-shadow: var(--shadow-sm);
}

.howto-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0;
  background: var(--color-gray-100);
}
.howto-photo picture { display: block; height: 100%; }
.howto-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}

.howto-num {
  position: absolute;
  left: 20px;
  bottom: -22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-light) 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 22px -6px rgba(224, 64, 0, 0.55), 0 0 0 4px var(--bg-elevated);
}

.howto-step-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 38px 24px 24px;
  flex: 1 1 auto;
}

.howto-step-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.howto-step-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-gray-500);
}

.howto-eta {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.howto-eta i { width: 14px; height: 14px; }

.howto-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 36px;
}
.howto-cta-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.howto-cta-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 4px;
  font-size: 15px;
  color: var(--color-gray-500);
}
.howto-cta-note i { width: 16px; height: 16px; color: var(--color-success); }

@media (max-width: 1024px) {
  .howto-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .howto-head { margin-bottom: 28px; }
  .howto-head .howto-sub { font-size: 15px; margin-top: 10px; }
  .howto-steps { grid-template-columns: 1fr; gap: 16px; }
  .howto-step { border-radius: 16px; }
  .howto-photo { aspect-ratio: 16 / 9; }
  .howto-num {
    width: 48px; height: 48px; font-size: 20px;
    left: 16px; bottom: -18px;
    box-shadow: 0 8px 18px -6px rgba(224, 64, 0, 0.55), 0 0 0 3px var(--color-white);
  }
  .howto-step-body { padding: 32px 20px 20px; gap: 8px; }
  .howto-step-title { font-size: 18px; }
  .howto-cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .howto-cta .btn { width: 100%; justify-content: center; text-align: center; }
  .howto-cta-note { justify-content: center; margin: 4px 0 0; }
}

/* ----- Safe Home (security camera add-on) ----- */
.safe-home-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
}
/* min-width:0 нужен grid-children, иначе grid пытается вместить
   intrinsic размер картинки (1600px) и контейнер растёт > viewport
   на узких экранах (≤340 px). См. M320-002 в TEST_REPORT. */
.safe-home-hero > * { min-width: 0; }
.safe-home-photo {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-gray-100);
  max-width: 100%;
}
.safe-home-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}
.safe-home-text { display: flex; flex-direction: column; gap: 0; }
.safe-home-text .eyebrow { margin-bottom: 8px; }
.safe-home-text .section-h2 { margin: 0 0 18px; max-width: 28ch; }
.safe-home-lede {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gray-500);
  max-width: 52ch;
}
.safe-home-cta { align-self: flex-start; }
.safe-home-grid { gap: 28px; }

@media (max-width: 900px) {
  .safe-home-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
  }
  .safe-home-photo { aspect-ratio: 16 / 9; border-radius: 16px; }
  .safe-home-text .section-h2 { font-size: 26px; max-width: none; }
  .safe-home-cta { align-self: stretch; text-align: center; justify-content: center; }
}

/* ----- Camera (indoor smart Wi-Fi camera) ----- */
.camera-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
}
.camera-photo {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-gray-100);
}
.camera-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.camera-text { display: flex; flex-direction: column; gap: 0; }
.camera-text .eyebrow { margin-bottom: 8px; }
.camera-text .section-h2 { margin: 0 0 18px; max-width: 28ch; }
.camera-lede {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gray-500);
  max-width: 52ch;
}
.camera-price { margin: 0 0 24px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.camera-price .val { font-size: 28px; font-weight: 700; color: var(--fg); }
.camera-price .note { font-size: 14px; color: var(--color-gray-500); }
.camera-cta { align-self: flex-start; }
.camera-grid { gap: 28px; }

@media (max-width: 900px) {
  .camera-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
  }
  .camera-photo { aspect-ratio: 16 / 9; border-radius: 16px; }
  .camera-text .section-h2 { font-size: 26px; max-width: none; }
  .camera-cta { align-self: stretch; text-align: center; justify-content: center; }
}

/* ----- Connect form ----- */
.connect-form {
  background: var(--color-brand-pale); border-radius: 16px;
  padding: 48px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
}
.connect-form h2 { font-size: 36px; font-weight: 700; margin: 0 0 12px; line-height: 1.15; letter-spacing: 0; }
.connect-form p { font-size: 16px; color: var(--fg-muted); margin: 0; }
.connect-form-fields { display: flex; flex-direction: column; gap: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--fg); margin-bottom: 6px; }
.field label .field-hint { font-weight: 400; color: var(--color-gray-500); }
.field input[type=tel], .field input[type=text], .field textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  padding: 12px 16px; font-size: 16px; font-family: var(--font-sans);
  color: var(--fg); background: var(--bg); outline: none;
  transition: border-color var(--duration) var(--easing);
}
.field textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  min-height: 48px;
  max-height: 200px; /* ~5-6 строк — после переключаемся на внутренний скролл */
  field-sizing: content; /* native auto-grow в Chrome/Edge 123+, Safari 18.4+ */
}
/* На старых браузерах (Safari <18.4, iOS Safari ≤17) field-sizing не работает —
   там подхватывает JS auto-resize (site/js/main.js). max-height гарантирует
   что длинный текст не съест весь экран — после лимита текст скроллится внутри. */
.field textarea[data-auto-grown] { overflow: auto; }
/* Run-14 C6: α 0.15 = 1.16:1 (fail). Border-color уже brand (~4.28:1), но ring почти невидим. Усилили до 0.55 (~3.1:1, pass). */
.field input:focus, .field textarea:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(224, 64, 0,0.55); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-gray-500); }

/* ----- Comment field (disclosure) ----- */
.cf-comment-field { display: block; }
.cf-comment-disclosure {
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color var(--duration) var(--easing);
}
.cf-comment-disclosure summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  user-select: none;
  transition: background var(--duration) var(--easing);
}
.cf-comment-disclosure summary::-webkit-details-marker { display: none; }
.cf-comment-disclosure summary:hover { background: var(--color-brand-pale); }
.cf-comment-disclosure summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}
.cf-comment-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}
.cf-comment-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.cf-comment-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.cf-comment-optional {
  font-size: 14px;
  color: var(--color-gray-500);
  font-weight: 400;
}
.cf-comment-hint {
  font-size: 12px;
  color: var(--color-gray-500);
}
.cf-comment-chev {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-gray-500);
  transition: transform var(--duration) var(--easing);
}
.cf-comment-disclosure[open] .cf-comment-chev { transform: rotate(180deg); }
.cf-comment-disclosure[open] summary { border-bottom: 1px solid var(--border-strong); }
.cf-comment-body { padding: 10px 14px 12px; }
.cf-comment-body textarea {
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg);
}

/* ----- Comment field — on orange brand background (.connect-new-fields) -----
   Поле необязательное — должно быть менее заметно, чем имя/телефон и CTA.
   Прозрачный фон, тонкая бледная обводка, без иконки и подпись-хинта,
   приглушённый заголовок. При раскрытии — textarea получает обычный контраст. */
.connect-new-fields .cf-comment-disclosure {
  border-color: rgba(255,255,255,0.22);
  background: transparent;
}
.connect-new-fields .cf-comment-disclosure summary {
  padding: 10px 12px;
  gap: 10px;
}
.connect-new-fields .cf-comment-disclosure summary:hover { background: rgba(255,255,255,0.08); }
.connect-new-fields .cf-comment-disclosure summary:focus-visible { outline-color: #fff; }
.connect-new-fields .cf-comment-icon { display: none; }
.connect-new-fields .cf-comment-chev { color: rgba(255,255,255,0.6); }
.connect-new-fields .cf-comment-title {
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  font-weight: 400;
}
.connect-new-fields .cf-comment-optional { color: rgba(255,255,255,0.62); }
.connect-new-fields .cf-comment-hint { display: none; }
.connect-new-fields .cf-comment-disclosure[open] {
  border-color: rgba(255,255,255,0.4);
}
.connect-new-fields .cf-comment-disclosure[open] summary { border-bottom-color: rgba(255,255,255,0.22); }
.connect-new-fields .cf-comment-disclosure[open] .cf-comment-title { color: #fff; }
.connect-new-fields .cf-comment-body textarea {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--fg-muted); line-height: 1.5; cursor: pointer; }
.consent input { accent-color: var(--color-brand); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.consent a { color: var(--color-brand); }

/* ----- DaData address autocomplete ----- */
.dadata-wrap { position: relative; }
.dadata-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  z-index: 100;
  font-size: 15px;
  line-height: 1.4;
  font-family: var(--font-sans);
}
.dadata-drop[hidden] { display: none; }
.dadata-item {
  display: block;
  padding: 12px 16px;
  cursor: pointer;
  min-height: 44px;
  border: none;
  background: transparent;
}
.dadata-item:hover,
.dadata-item.is-active { background: var(--color-brand-pale, #FFF1EB); }
/* Highlight совпадения — только bold; цвет наследуется (--fg). Раньше был
 * brand-orange, но на тёмной теме весь текст подсказки становился оранжевым
 * (плохо читался на тёмном фоне). */
.dadata-item b { font-weight: 600; color: inherit; }

/* Empty-state: подсказок нет.
 * Два визуальных варианта одной разметки:
 *   .dadata-empty--clickable — на /check-address, кликабельный CTA → ручная проверка.
 *   .dadata-empty--hint      — в обычных лид-формах, не-кликабельный hint.
 */
.dadata-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  min-height: 44px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
}
.dadata-empty__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-brand-pale, #FFF1EB);
  color: var(--color-brand);
}
.dadata-empty__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dadata-empty__text strong {
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
}
.dadata-empty__text span {
  font-size: 13px;
  color: var(--fg-muted, var(--fg-subtle, #6b7280));
  line-height: 1.4;
}
.dadata-empty__chev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--fg-muted, #6b7280);
  margin-top: 6px;
  transition: transform 0.15s ease;
}
.dadata-empty--clickable {
  cursor: pointer;
  transition: background 0.12s ease;
}
.dadata-empty--clickable:hover,
.dadata-empty--clickable:focus-visible {
  background: var(--color-brand-pale, #FFF1EB);
  outline: none;
}
.dadata-empty--clickable:hover .dadata-empty__chev,
.dadata-empty--clickable:focus-visible .dadata-empty__chev {
  transform: translateX(2px);
  color: var(--color-brand);
}
.dadata-empty--hint {
  cursor: default;
}
.dadata-empty--hint .dadata-empty__icon {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg-muted, #6b7280);
}
/* Hint в лид-формах — inline (не floating), чтобы не перекрывать кнопку
 * submit. Сиблинги поля адреса (consent, button) уезжают вниз сами.
 * Кликабельный --clickable вариант на /check-address остаётся floating. */
.dadata-drop:has(.dadata-empty--hint) {
  position: static;
  margin-top: 8px;
  box-shadow: none;
  max-height: none;
  overflow: visible;
}
.dadata-empty__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--fg-muted, #6b7280);
  cursor: pointer;
  margin: -4px -4px -4px 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.dadata-empty__dismiss:hover,
.dadata-empty__dismiss:focus-visible {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
  outline: none;
}

@media (max-width: 640px) {
  .dadata-drop { font-size: 16px; max-height: 280px; }
  .dadata-item { padding: 14px 16px; }
  .dadata-empty { padding: 14px 16px; }
  .dadata-empty__text span { font-size: 14px; }
}

/* ----- Thanks page ----- */
.thanks-wrap {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 24px;
}
.thanks-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-sm); padding: 64px 48px;
  text-align: center; max-width: 640px; width: 100%;
}
.thanks-card .check-circle {
  width: 80px; height: 80px; border-radius: 999px;
  background: var(--color-success); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.thanks-card h1 { font-size: 32px; margin: 0 0 12px; }
.thanks-card p { color: var(--color-gray-500); font-size: 16px; margin: 0 0 20px; line-height: 1.6; }
.thanks-card .btn-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Пилюлька «Перезвоним в течение 15 минут — до 22:00» (онлайн)
   или «Заявка у нас. Менеджер позвонит после 8:00» (вне часов).
   Серверная логика в helpers.php is_connect_online(). Точка
   статичная: зелёная в окно 8–22, серая вне. Цвет фона у пилюли
   привязан к токенам (gray-100), в тёмной теме — авто-инверсия. */
.thanks-when {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto 24px;
  padding: 10px 18px;
  background: var(--color-gray-100);
  border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--color-gray-500);
  line-height: 1.4;
  max-width: max-content;
  text-align: left;
}
.thanks-when__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #6B7280;
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
  flex-shrink: 0;
}
.thanks-when[data-online="true"] .thanks-when__dot {
  background: #4ADE80;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}

/* Срочный контакт и secondary CTA (внизу карточки) */
.thanks-urgent { margin: 28px 0 16px; font-size: 14px; color: var(--color-gray-500); }
.thanks-urgent a { color: var(--color-brand); font-weight: 600; text-decoration: none; }
.thanks-urgent a:hover { text-decoration: underline; }
.thanks-secondary-row {
  display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center;
}
.thanks-secondary-row .btn { min-height: 48px; }
.thanks-home-link {
  color: var(--color-gray-500); font-size: 14px;
  text-decoration: underline; text-decoration-style: dashed;
  text-underline-offset: 4px;
  padding: 8px 12px;
}
.thanks-home-link:hover { color: var(--color-brand); text-decoration-color: var(--color-brand); }
@media (min-width: 480px) {
  .thanks-secondary-row { flex-direction: row; }
}

/* ----- Thanks: ФИО (шаг 2) ----- */
.thanks-fio {
  margin-top: 8px;
  padding: 28px 24px 24px;
  background: var(--color-brand-pale, #FFF1EB);
  border-radius: 12px;
  text-align: left;
}
.thanks-fio-h {
  font-size: 18px; font-weight: 600;
  color: var(--fg);
  margin: 0 0 6px;
  text-align: center;
}
.thanks-fio-lede {
  font-size: 14px; color: var(--color-gray-500);
  margin: 0 0 18px !important;
  text-align: center;
}
.thanks-fio-form .field { margin-bottom: 14px; }
.thanks-fio-form input[type=text] {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  padding: 12px 16px; font-size: 16px; font-family: var(--font-sans);
  color: var(--fg); background: var(--bg); outline: none;
  transition: border-color var(--duration) var(--easing);
}
.thanks-fio-form input[type=text]:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(224, 64, 0,0.55); }
.thanks-fio-actions {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 18px;
}
.thanks-fio-actions .btn { width: 100%; max-width: 320px; }
.thanks-fio-skip {
  font-size: 14px; color: var(--color-gray-500);
  text-decoration: underline; text-underline-offset: 2px;
}
.thanks-fio-skip:hover { color: var(--fg); }

/* «Номер квартиры» — вторичное поле под ФИО. Уже ФИО (max-width),
   inputmode=numeric. При выборе «частный дом» гасим через .is-disabled. */
.thanks-flat-field {
  max-width: 200px;
  transition: opacity var(--duration) var(--easing);
}
.thanks-flat-field.is-disabled { opacity: 0.4; pointer-events: none; }
.thanks-flat-field input[type=text]:disabled {
  background: transparent;
  cursor: not-allowed;
}

/* Чекбокс «частный дом» — ниже поля квартиры, мелким шрифтом.
   Не commitment-checkbox (consent), а UX-helper. */
.thanks-house-check {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 14px; color: var(--color-gray-600, var(--color-gray-500));
  cursor: pointer;
  user-select: none;
}
.thanks-house-check input[type=checkbox] {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--color-brand);
  cursor: pointer;
}
.thanks-house-check:hover { color: var(--fg); }

/* ----- Mobile (mobile-services) plans ----- */
.mnp-banner {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 24px 28px; margin-bottom: 32px;
  background: linear-gradient(135deg, var(--surface-warm-card) 0%, var(--surface-warm-card2) 100%);
  border-left: 4px solid var(--color-brand);
  border-radius: 12px;
}
.mnp-banner__icon {
  flex: none;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--color-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mnp-banner__icon i { width: 26px; height: 26px; }
.mnp-banner__body { flex: 1; min-width: 0; }
.mnp-banner__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--fg); }
.mnp-banner__list { margin: 0; padding: 0 0 0 18px; color: var(--color-gray-600); font-size: 15px; line-height: 1.55; }
.mnp-banner__list li { margin-bottom: 6px; }
.mnp-banner__list li:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .mnp-banner { flex-direction: column; padding: 20px; gap: 12px; }
  .mnp-banner__icon { width: 40px; height: 40px; }
  .mnp-banner__icon i { width: 22px; height: 22px; }
  .mnp-banner__title { font-size: 17px; }
  .mnp-banner__list { font-size: 14px; }
}

.mob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mob-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow var(--duration) var(--easing);
}
.mob-card:hover { box-shadow: var(--shadow-sm); }
.mob-card .name { font-size: 15px; font-weight: 600; }
.mob-card .price { display: flex; align-items: baseline; gap: 6px; }
.mob-card .price .val { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.mob-card .price .unit { font-size: 14px; color: var(--color-gray-500); }
.mob-card .price .strike { font-size: 14px; color: var(--color-gray-500); text-decoration: line-through; margin-left: 6px; }
.mob-card .price .promo-val { color: var(--color-brand); }
.mob-card .desc { font-size: 14px; color: var(--color-gray-500); line-height: 1.5; }
.mob-card .promo-note { font-size: 12px; color: var(--color-brand); font-weight: 600; }

.sim-office-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  margin-top: 28px; padding: 22px 26px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
}
.sim-office-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-warm-card); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.sim-office-card__body { min-width: 0; }
.sim-office-card__title { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--fg); line-height: 1.3; }
.sim-office-card__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-gray-500); }
.sim-office-card__cta {
  flex: none; font-size: 14px; font-weight: 600; color: var(--color-brand);
  text-decoration: none; white-space: nowrap;
}
.sim-office-card__cta:hover { color: var(--color-brand-dark); text-decoration: underline; }
@media (max-width: 600px) {
  .sim-office-card { grid-template-columns: auto 1fr; padding: 18px 20px; gap: 14px 16px; }
  .sim-office-card__cta { grid-column: 1 / -1; padding-top: 4px; }
}

/* ----- Footer ----- */
footer.site-footer {
  background: var(--bg-dark);
  color: var(--color-gray-300);
  padding: 80px 0 28px;
  position: relative;
}
footer.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 90, 31, 0.7) 50%, transparent 100%);
  pointer-events: none;
}
footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) repeat(3, minmax(0, 1fr));
  gap: 56px 48px;
  align-items: start;
  justify-content: space-between;
}
.f-brand { display: flex; flex-direction: column; gap: 20px; }
.f-contacts { align-items: stretch; }
/* SVG-спрайт logo-combo имеет ~21px внутреннего левого паддинга в viewBox.
   Гасим его отрицательным margin-left, чтобы видимое «ТАТТЕЛЕКОМ» было
   заподлицо с partner-note под ним. Триугольник «летай» при этом слегка
   выходит в левый gutter контейнера — это OK, container padding 24px. */
.f-brand .f-logo { width: 240px; height: 58px; align-self: flex-start; filter: brightness(0) invert(1); margin-left: -22px; }
.f-brand-tag { font-size: 14px; line-height: 1.55; color: var(--fg-on-dark-muted, rgba(255,255,255,0.65)); margin: 0; max-width: 300px; }
.f-contacts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.f-phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background .18s ease, border-color .18s ease;
}
.f-phone { max-width: 320px; }
.f-phone:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
.f-phone:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: 2px; }
.f-phone:hover .f-phone-icon { background: rgba(224, 64, 0, 0.22); }
.f-phone-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(224, 64, 0, 0.14);
  color: var(--color-brand-light);
  flex-shrink: 0;
}
.f-phone-icon i, .f-phone-icon svg { width: 18px; height: 18px; }
.f-phone-meta { display: flex; flex-direction: column; line-height: 1.2; gap: 2px; }
.f-phone-num { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.f-phone-lbl { font-size: 12px; color: #a0a0a0; text-transform: uppercase; letter-spacing: 0.06em; }
.f-msgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.f-msg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease;
}
.f-msg:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.18); }
.f-msg:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: 2px; }
.f-msg svg { display: block; flex-shrink: 0; }
.f-col-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.f-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.f-col li { color: #B0B0B0; font-size: 14px; line-height: 1.4; }
.f-col a {
  color: #B0B0B0;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  transition: color .15s ease;
}
.f-col a:hover { color: #fff; }
.f-link-ext {
  width: 12px; height: 12px;
  color: #6a6a6a;
  transition: color .15s ease, transform .15s ease;
}
.f-col a:hover .f-link-ext { color: #fff; transform: translate(1px, -1px); }
footer .f-legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 13px;
  line-height: 1.55;
  /* #a0a0a0 на тёмном footer-bg ≈ 5.4:1 (WCAG AA). Раньше #7e7e7e давало
     ≈3.3:1 — fail для normal text (тест 2026-05-15-1218 dark-theme). */
  color: #a0a0a0;
}
.f-legal-copy { max-width: 680px; }
.f-legal-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.f-legal-dot { margin: 0 8px; opacity: 0.5; }
.f-feedback-wrap { position: relative; display: inline-block; }
.f-feedback {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-underline-offset: 3px;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}
.f-feedback:hover, .f-feedback:focus-visible { color: #fff; text-decoration-color: #fff; }
.f-feedback:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: 3px; border-radius: 2px; }

.f-feedback-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 14px 16px;
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: #e6e6e6;
  font-size: 13px;
  line-height: 1.4;
  z-index: 50;
  text-align: left;
}
.f-feedback-popup[hidden] { display: none; }
.f-feedback-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-top-color: #2a2a2a;
}
.f-feedback-state { color: #a0a0a0; text-align: center; padding: 4px 0; }
.f-feedback-row + .f-feedback-row { margin-top: 12px; }
.f-feedback-row-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #909090;
  margin-bottom: 4px;
}
.f-feedback-row-line { display: flex; align-items: center; gap: 8px; }
.f-feedback-row-value {
  color: #f0f0f0;
  font-size: 13px;
  user-select: all;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.f-feedback-copy {
  flex-shrink: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #d0d0d0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.f-feedback-copy:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.24); }
.f-feedback-copy:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: 2px; }
.f-feedback-copy.is-copied { background: rgba(80, 200, 120, 0.18); border-color: rgba(80, 200, 120, 0.38); color: #b4e8c4; }
.f-back-to-top {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--color-gray-300);
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
  flex-shrink: 0;
}
.f-back-to-top:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.f-back-to-top svg { width: 14px; height: 14px; }
.f-col a:focus-visible { outline: 2px solid var(--color-brand-light); outline-offset: 3px; border-radius: 2px; }
footer.site-footer-min { padding: 24px 0; }
footer.site-footer-min::before { display: none; }
footer.site-footer-min .legal { margin-top: 0; padding-top: 0; border-top: none; font-size: 12px; color: #a0a0a0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
footer.site-footer-min .legal a { color: #B0B0B0; }
footer.site-footer-min .legal a:hover { color: #fff; }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .utility .left { gap: 10px; }
  .utility .right { gap: 10px; }
  .utility-inner { font-size: 12px; }
}
@media (max-width: 960px) {
  .utility .left { gap: 8px; }
  .utility .right { gap: 8px; }
  .utility-inner { flex-wrap: wrap; height: auto; padding: 6px 0; gap: 6px; }
}
@media (max-width: 1200px) {
  .hero h1 { font-size: 44px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  footer .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px 32px; }
  .mob-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .hero-inner, .connect-form { grid-template-columns: 1fr; padding: 48px 32px; }
  .hero-art { height: 320px; min-height: 0; margin-top: 24px; }
  .tariff-grid { grid-template-columns: 1fr 1fr; }
  .tariff-grid.single { grid-template-columns: 1fr; }
  .eq-grid { grid-template-columns: 1fr; }
  .eq-card { grid-template-columns: 1fr; }
  .eq-photo { padding: 32px; }
  footer .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 48px 32px; }
  .f-brand { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px 40px; align-items: start; }
  .f-brand .f-logo { grid-column: 1; }
  .f-brand-tag { grid-column: 1; }
  .f-contacts { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; margin-top: 0; }
  .f-msgs { grid-column: 1; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .hero-stats { gap: 16px; }
  .hero-stats .stat .num { font-size: 22px; }
  .hero-art { height: 220px; min-height: 0; }
  .hero-art .speed-pill { padding: 10px 14px; }
  .hero-art .speed-pill .num { font-size: 20px; }
  .section-head h2 { font-size: 24px; }
  .section-head > p:not(.eyebrow) { font-size: 15px; }
  .mob-grid { grid-template-columns: 1fr; gap: 12px; }
  .mob-card { padding: 20px; }
  .mob-card .price .val { font-size: 28px; }
  .tariff { padding: 22px; }
  .tariff .price .val { font-size: 40px; }
  .connect-form h2 { font-size: 24px; }
  .thanks-card { padding: 32px 20px; }
  .thanks-card h1 { font-size: 26px; }
  .thanks-wrap { padding: 40px 16px; }
}
/* Узкий ноут (1101–1280): полное меню ещё показывается, но дефолтные
   28px gap в .main-nav-inner и 18px горизонтальный padding у menu-trigger
   не помещаются — «Проверить адрес» / «Подключить» уходят за viewport.
   Поджимаем гэпы и паддинги, не трогая шрифт. */
@media (min-width: 1101px) and (max-width: 1280px) {
  .main-nav-inner { gap: 16px; }
  .main-nav .links { gap: 4px; margin-left: 8px; }
  .main-nav .links a, .main-nav .links .has-menu > span { padding: 10px 12px; }

  /* Длинные имена городов («Набережные Челны», «Зеленодольск») в утилитарном
     ряду съедают место — телефон уходит за viewport. Ограничиваем ширину
     имени с ellipsis и поджимаем gap'ы между ссылками: на широком
     десктопе (>1280) город виден целиком. */
  .utility .left, .utility .right { gap: 4px; }
  .utility .seg-divider { margin: 0 2px; }
  .utility .city-btn .city-name {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Navigation collapses to hamburger early — desktop nav doesn't fit narrow viewports */
@media (max-width: 1100px) {
  /* Utility row hides at the same breakpoint as the hamburger — items move into mobile-menu.
     Avoids duplicate city/payment/login at 769–1100px where the main nav is already hidden. */
  .utility { display: none; }

  .hamburger {
    display: flex; min-height: 44px; min-width: 44px;
    align-items: center; justify-content: center;
    margin-left: auto;
  }

  /* Hero context bar — one row: city (left, shrinks/truncates) + segment (right, fixed natural width). */
  .hero-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0 12px;
    min-width: 0;
  }

  /* City — minimal style (no pill bg). Grows to fill, truncates name when row is tight. */
  .hero-bar .city-picker { position: relative; flex: 1 1 auto; min-width: 0; }
  .hero-bar .city-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none;
    padding: 6px 4px 6px 0;
    font: inherit; font-size: 14px; font-weight: 500;
    color: var(--color-gray-700); cursor: pointer;
    max-width: 100%;
    transition: color var(--duration) var(--easing);
  }
  .hero-bar .city-btn .pin { color: var(--color-gray-500); flex-shrink: 0; }
  .hero-bar .city-btn .city-name {
    color: var(--color-gray-700); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .hero-bar .city-btn .chev { color: var(--color-gray-500); flex-shrink: 0; transition: transform var(--duration) var(--easing); }
  .hero-bar .city-btn:hover,
  .hero-bar .city-btn:hover .city-name,
  .hero-bar .city-btn:hover .pin,
  .hero-bar .city-btn:hover .chev { color: var(--color-brand); }
  .hero-bar .city-picker.open .city-btn,
  .hero-bar .city-picker.open .city-btn .city-name,
  .hero-bar .city-picker.open .city-btn .pin { color: var(--color-brand); }
  .hero-bar .city-picker.open .city-btn .chev { transform: rotate(180deg); color: var(--color-brand); }
  /* Reuse global .city-menu styling, anchored under the trigger */
  .hero-bar .city-menu { left: 0; min-width: 220px; max-width: calc(100vw - 32px); }
  /* Run-14 I5 (Ильдар): на mobile 390 picker открывается (class=open),
     но menu иногда остаётся visibility:hidden — конфликт specificity или
     transition. Явно поднимаем specificity и гарантируем visible. */
  .hero-bar .city-picker.open .city-menu { opacity: 1; visibility: visible; transform: translateY(0); z-index: 200; }

  /* Building-type segment — pill, FIXED natural content width (never overflows) */
  .hero-bar .hero-seg {
    flex: 0 0 auto;
    display: flex; padding: 4px; gap: 2px;
    background: var(--color-gray-100);
    border-radius: 999px;
  }
  .hero-bar .hero-seg a {
    text-align: center;
    padding: 8px 14px; min-height: 36px;
    font-size: 14px; font-weight: 600;
    color: var(--color-gray-500); text-decoration: none;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
    transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
  }
  .hero-bar .hero-seg a.active { background: var(--bg-elevated); color: var(--fg); box-shadow: var(--shadow-xs); }
  .hero-bar .hero-seg a:not(.active):hover { color: var(--color-brand); }

  /* Compress hero top spacing since hero-bar already separates from header */
  .hero-bar + .hero { margin-top: 0; }

  @media (prefers-reduced-motion: reduce) {
    .hero-bar .city-btn,
    .hero-bar .city-btn .chev,
    .hero-bar .hero-seg a { transition: none; }
  }
  /* Phones до iPhone 14 Pro Max (414) — компактный сегмент Квартира/Дом,
     город получает приоритет и не обрезается («Альметьевск», «Набережные Челны»).
     Раньше брейк был 380 → на 381-414 сегмент рос (padding 7×14, font 13)
     и съедал место → «Альметьев…». */
  @media (max-width: 414px) {
    .hero-bar { gap: 8px; }
    .hero-bar .city-btn { font-size: 13px; gap: 4px; }
    .hero-bar .hero-seg a { font-size: 13px; padding: 8px 10px; }
  }

  /* Mobile top bar — city + theme pills above hero on every page. */
  .mobile-top-bar { display: block; padding: 10px 0 0; }
  .mobile-top-bar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-width: 0;
  }

  /* City picker в верхней мобильной полоске. По правке от пользователя:
     просто текст с иконкой и стрелкой, без круглого бордера и фона. */
  .mobile-top-bar .city-picker { position: relative; flex: 0 1 auto; min-width: 0; }
  .mobile-top-bar .city-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0;
    padding: 6px 0;
    font: inherit; font-size: 14px; font-weight: 600;
    color: var(--fg); cursor: pointer;
    min-height: 32px; max-width: 100%;
    touch-action: manipulation;
    transition: color var(--duration) var(--easing);
  }
  .mobile-top-bar .city-btn .pin { color: var(--color-gray-500); flex-shrink: 0; }
  .mobile-top-bar .city-btn .city-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .mobile-top-bar .city-btn .chev { color: var(--color-gray-500); flex-shrink: 0; transition: transform var(--duration) var(--easing); }
  .mobile-top-bar .city-btn:hover,
  .mobile-top-bar .city-btn:hover .pin,
  .mobile-top-bar .city-btn:hover .chev { color: var(--color-brand); }
  .mobile-top-bar .city-picker.open .city-btn,
  .mobile-top-bar .city-picker.open .city-btn .pin { color: var(--color-brand); }
  .mobile-top-bar .city-picker.open .city-btn .chev { transform: rotate(180deg); color: var(--color-brand); }
  .mobile-top-bar .city-menu { left: 0; min-width: 220px; max-width: calc(100vw - 32px); }
  /* На страницах с собственным .hero-bar (главная, /private, LP) city-picker
     уже живёт там — прячем весь верхний блок, чтобы не было двух пилюль и
     лишнего вертикального пробела. */
  .mobile-top-bar:has(+ main .hero-bar),
  .mobile-top-bar:has(~ main .hero-bar) { display: none; }

  .main-nav-inner { gap: 8px; height: 56px; flex-wrap: nowrap; }
  .main-nav .brand-row { gap: 8px; }
  .main-nav .brand-row .logo-combo { height: 36px; }
  .main-nav .links { display: none; }
  .main-nav .right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  /* Шапка дышит — единый ряд кнопок 36×36 (поиск, луна, телефон, чат, бургер) +
     .btn-primary той же высоты. Раньше было 40 у quick-action и .btn-primary,
     44 у .quick-search/.quick-theme — визуально перегружено. */
  .main-nav .right .btn-primary { padding: 6px 13px; min-height: 36px; font-size: 13px; }
  .main-nav .right .icon-btn { display: none; }
  .main-nav .right .quick-action { display: inline-flex; width: 36px; height: 36px; }
  .main-nav .right .quick-action.quick-search,
  .main-nav .right .quick-action.quick-theme { width: 36px; height: 36px; }
  .main-nav .brand-row .logo-tatt { display: none; }
  .mega-menu { display: none; }
  .mobile-menu {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg); z-index: 200;
    padding: 0 24px max(32px, env(safe-area-inset-bottom));
    flex-direction: column; gap: 0; overflow-y: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { font-size: 17px; font-weight: 600; color: var(--fg); padding: 12px 0; display: block; }
  .mobile-menu a:hover { color: var(--color-brand); }
  .mobile-menu a.active { color: var(--color-brand); }
  /* Контейнер диалога фокусируется программно при открытии (см. main.js openMenu).
     Видимое кольцо здесь не нужно — это служебный фокус для screen reader. */
  .mobile-menu:focus { outline: none; }
  .mobile-menu:focus-visible { outline: none; }

  /* Sticky brand-header at the top (logo + close) */
  .mobile-menu .mm-header {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: max(8px, env(safe-area-inset-top)) 0 16px;
    background: var(--bg);
    margin-bottom: 0;
  }
  .mobile-menu .mm-header .mm-brand { display: inline-flex; align-items: center; padding: 4px 0; }
  .mobile-menu .mm-header .mm-brand img,
  .mobile-menu .mm-header .mm-brand svg { height: 40px; width: auto; display: block; }
  .mobile-menu .mm-header .close-btn {
    position: static; padding: 0;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1;
    background: var(--color-gray-100); border: none; border-radius: 999px;
    color: var(--fg); cursor: pointer;
  }
  .mobile-menu .mm-header .close-btn:hover { background: var(--color-gray-200); color: var(--color-brand); }
  .mobile-menu .mm-header .close-btn svg { display: block; }

  /* Drag handle (visual hint for swipe-down to dismiss) */
  .mobile-menu .mm-grabber {
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--color-gray-200);
    margin: 8px auto 4px; flex-shrink: 0;
  }

  /* Segment switch (Для дома / Для бизнеса) */
  .mobile-menu .mm-segment {
    display: flex; padding: 4px;
    background: var(--color-gray-100); border-radius: 999px;
    margin: 12px 0 0; gap: 2px;
  }
  .mobile-menu .mm-segment a {
    flex: 1; text-align: center;
    padding: 10px 16px; min-height: 44px;
    font-size: 14px; font-weight: 600;
    color: var(--color-gray-500);
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    touch-action: manipulation;
    transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
  }
  .mobile-menu .mm-segment a.active { background: var(--bg-elevated); color: var(--fg); box-shadow: var(--shadow-xs); }
  .mobile-menu .mm-segment a:not(.active):hover { color: var(--color-brand); }
  .mobile-menu .mm-segment a:not(.active):active { background: var(--color-gray-200); }

  /* City picker — mobile variant */
  .mobile-menu .mm-city-row { margin: 12px 0 0; }
  .mobile-menu .mm-city-picker { position: relative; }
  /* Visual divider between header-controls (segment+city+tools) and the menu list below */
  .mobile-menu .mm-tools-row + .mobile-menu-section,
  .mobile-menu .mm-city-row + .mobile-menu-section {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--color-gray-200);
  }
  .mobile-menu .mm-city-picker .mm-city-btn {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    background: var(--bg);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 8px 16px; min-height: 48px;
    font: inherit; color: var(--fg);
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--duration) var(--easing), background var(--duration) var(--easing);
  }
  .mobile-menu .mm-city-picker .mm-city-btn:hover { border-color: var(--color-gray-500); }
  .mobile-menu .mm-city-picker .mm-city-btn:active { background: var(--color-gray-100); }
  .mobile-menu .mm-city-picker .mm-city-btn .pin { color: var(--color-brand); flex-shrink: 0; width: 20px; height: 20px; }
  .mobile-menu .mm-city-picker .mm-city-btn .label-line { display: flex; flex: 1; min-width: 0; }
  .mobile-menu .mm-city-picker .mm-city-btn .city-name {
    font-size: 16px; font-weight: 600; color: var(--fg); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .mobile-menu .mm-city-picker .mm-city-btn .chev { color: var(--color-gray-500); margin-left: auto; flex-shrink: 0; transition: transform var(--duration) var(--easing); }
  .mobile-menu .mm-city-picker.open .mm-city-btn .chev { transform: rotate(180deg); }
  .mobile-menu .mm-city-menu {
    margin-top: 8px; background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 8px;
    /* Adapt to short viewports (Android 568px etc.) — leaves ~280px for header/segment/city-btn/footer */
    max-height: min(320px, calc(100dvh - 280px));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
  }
  .mobile-menu .mm-city-picker.open .mm-city-menu { display: block; }
  .mobile-menu .mm-city-menu .group-label { padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-gray-500); margin: 0; }
  .mobile-menu .mm-city-menu a { display: block; padding: 12px; font-size: 15px; line-height: 1.3; color: var(--fg); border-radius: 10px; font-weight: 500; min-height: 44px; }
  .mobile-menu .mm-city-menu a:hover, .mobile-menu .mm-city-menu a.active { background: var(--color-brand-pale); color: var(--color-brand); }

  /* Section block — visible separation via border + spacing */
  .mobile-menu-section { padding: 8px 0; }
  .mobile-menu-section + .mobile-menu-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-gray-200); }
  .mobile-menu .close-btn { font-size: 28px; cursor: pointer; background: none; border: none; color: var(--fg); line-height: 1; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu .mm-segment a,
    .mobile-menu .mm-row,
    .mobile-menu .mm-city-btn,
    .mobile-menu .mm-phone,
    .mobile-menu .close-btn.mm-close-bottom,
    .mobile-menu .mm-city-picker .mm-city-btn .chev { transition: none; }
  }
  /* Stronger section label */
  .mobile-menu .mm-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-500); padding: 0 0 10px; margin: 0; border-bottom: none; }
  /* Item rows with icon */
  .mobile-menu .mm-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 0; touch-action: manipulation; transition: color var(--duration) var(--easing); }
  .mobile-menu .mm-row .mm-ico { flex-shrink: 0; width: 24px; height: 24px; color: var(--color-gray-500); transition: color var(--duration) var(--easing); }
  .mobile-menu .mm-row:hover .mm-ico, .mobile-menu .mm-row.active .mm-ico { color: var(--color-brand); }
  .mobile-menu .mm-row:active { color: var(--color-brand); }
  .mobile-menu .mm-row:active .mm-ico { color: var(--color-brand); }
  /* Expandable row (Для квартиры + chevron toggle) */
  .mobile-menu .mm-expandable { display: flex; flex-direction: column; }
  .mobile-menu .mm-expandable-row { display: flex; align-items: stretch; }
  .mobile-menu .mm-expandable-row > .mm-row { flex: 1; }
  .mobile-menu .mm-toggle { flex-shrink: 0; width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--color-gray-500); padding: 0; }
  .mobile-menu .mm-toggle > * { transition: transform var(--duration) var(--easing); }
  .mobile-menu .mm-toggle:hover { color: var(--color-brand); }
  .mobile-menu .mm-toggle[aria-expanded="true"] > * { transform: rotate(180deg); }
  /* Sublist — indented, smaller font, gray */
  .mobile-menu .mm-sublist { display: flex; flex-direction: column; padding: 2px 0 6px 38px; }
  .mobile-menu .mm-sublist[hidden] { display: none; }
  .mobile-menu .mm-sublist a { font-size: 15px; font-weight: 500; color: var(--color-gray-500); padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
  .mobile-menu .mm-sublist a:hover { color: var(--color-brand); }
  /* Messengers — list rows with icon + name + phone (Variant A) */
  .mobile-menu .mm-messengers {
    list-style: none; margin: 4px 0 0; padding: 0;
  }
  .mobile-menu .mm-messengers li { border-top: 1px solid var(--color-gray-100); }
  .mobile-menu .mm-messengers li:first-child { border-top-color: transparent; }
  .mobile-menu .mm-messengers a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; min-height: 48px;
    text-decoration: none; color: var(--fg);
    touch-action: manipulation;
  }
  .mobile-menu .mm-messengers img { width: 28px; height: 28px; flex-shrink: 0; }
  .mobile-menu .mm-messengers .name { font-size: 16px; font-weight: 600; }
  .mobile-menu .mm-messengers .num {
    margin-left: auto; font-size: 13px; font-weight: 400; color: var(--color-gray-500);
  }
  /* Bottom close action */
  .mobile-menu .close-btn.mm-close-bottom { position: static; width: 100%; margin-top: 4px; padding: 14px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--color-gray-500); background: none; border: 1px solid var(--color-gray-200); border-radius: 12px; min-width: auto; min-height: 52px; touch-action: manipulation; transition: color var(--duration) var(--easing), border-color var(--duration) var(--easing), background var(--duration) var(--easing); }
  .mobile-menu .close-btn.mm-close-bottom:hover { color: var(--color-brand); border-color: var(--color-brand); }
  .mobile-menu .close-btn.mm-close-bottom:active { background: var(--color-gray-100); }
  /* CTA-блок «Подключить + телефон» — сразу под header'ом, перед сегментом.
     Кнопка слева, плитка номера справа. Снизу блок ограничен divider'ом,
     который раньше висел под header'ом — теперь группирует [header + CTA]
     в primary-action зону.
     Адаптация плитки на узких экранах — @media по viewport (см. .mm-phone-tile ниже). */
  .mobile-menu-cta {
    margin-top: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    /* Grid 1fr/1fr — обе колонки точно 50/50 независимо от min-content
       (у плитки длинный nowrap номер, через flex 1:1 не получалось). */
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch;
  }
  .mobile-menu-cta .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 14px; min-height: 48px;
    font-size: 15px; color: #fff;
    border-radius: 12px;
    border-bottom: none;
    min-width: 0;
  }
  .mobile-menu-cta .btn:hover { color: #fff; }
  /* Плитка с номером подключения. По умолчанию — двухстрочно: номер сверху,
     «● онлайн · до 22:00» снизу. Точка показывается только в окно 8:00–22:00
     МСК (см. helpers.php is_connect_online()). Под 360px — слово
     «онлайн · до 22:00» скрывается, точка переезжает в одну строку перед
     номером. Под 310px — возврат к двухстрочной раскладке (естественный
     fallback). */
  .mobile-menu .mm-phone-tile {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 2px; padding: 8px 8px;
    background: var(--bg-elevated); border-radius: 12px;
    text-decoration: none; touch-action: manipulation;
    transition: filter var(--duration) var(--easing);
    line-height: 1.15;
    min-width: 0;
  }
  /* В тёмной теме плитка — «утопленная», чтобы не конкурировать с brand-button:
     bg темнее drawer'а (--bg-sunken oklch 0.20) vs «приподнятая» в светлой
     (--bg-elevated #fff на тёплом #FAF9F7). */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mobile-menu .mm-phone-tile { background: var(--bg-sunken); }
  }
  :root[data-theme="dark"] .mobile-menu .mm-phone-tile { background: var(--bg-sunken); }
  .mobile-menu .mm-phone-tile:hover { filter: brightness(0.96); }
  .mobile-menu .mm-phone-tile:active { filter: brightness(0.92); }
  .mobile-menu .mm-phone-tile__num {
    font-size: 15px; font-weight: 700; color: var(--fg);
    letter-spacing: -0.01em; white-space: nowrap;
  }
  .mobile-menu .mm-phone-tile__status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500; color: var(--color-gray-500);
  }
  .mobile-menu .mm-phone-tile__dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: #4ADE80; box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
    flex-shrink: 0;
  }
  /* Строка «Поддержка» в разделе «Помощь и контакты» — заменяет
     прежний нижний блок mm-phone-support, чтобы освободить место в sticky-CTA. */
  .mobile-menu .mm-row--support .mm-row__tail {
    margin-left: auto; font-size: 13px; font-weight: 400;
    color: var(--color-gray-500); white-space: nowrap;
  }
}

/* Гибрид-адаптация sticky-плитки под номер на узких экранах.
   ≤359px — слово «онлайн · до 22:00» скрывается, точка в строку перед номером.
   На узких 1fr/1fr grid не вмещает номер 15px nowrap — переключаемся на flex,
   плитка берёт по контенту (с уменьшенным шрифтом 14px), кнопка занимает остаток.
   ≤309px — возврат к двухстрочной раскладке (естественный fallback). */
@media (max-width: 359px) {
  .mobile-menu-cta { display: flex; }
  .mobile-menu-cta .btn { flex: 1; min-width: 0; }
  .mobile-menu .mm-phone-tile { flex: 0 0 auto; flex-direction: row; gap: 6px; align-items: center; padding: 8px 10px; }
  .mobile-menu .mm-phone-tile__num { font-size: 14px; }
  .mobile-menu .mm-phone-tile__status { order: -1; }
  .mobile-menu .mm-phone-tile__text { display: none; }
}
@media (max-width: 309px) {
  .mobile-menu .mm-phone-tile { flex-direction: column; gap: 2px; }
  .mobile-menu .mm-phone-tile__status { order: 0; }
  .mobile-menu .mm-phone-tile__text { display: inline; }
}

@media (max-width: 768px) {
  /* utility-row already hidden at ≤1100px (with hamburger). */
  .hero p.lede { font-size: 16px; }
  .hero-art { height: 260px; min-height: 0; }
  /* section.block padding теперь масштабируется через --section-py (clamp). */
  .section-head h2 { font-size: 28px; }
  /* Run-13b T2: на планшете 768 оставляем tariff-grid в 2 колонки — карточки
     можно сравнивать рядом. why/mob → одна колонка как было. */
  .why-grid, .mob-grid { grid-template-columns: 1fr; }
  .connect-form { padding: 32px 24px; }
  .connect-form h2 { font-size: 28px; }
  .thanks-card { padding: 48px 24px; }
}
@media (max-width: 540px) {
  /* Реальный mobile — карточки тарифов в один столбик (на планшете остаётся 2). */
  .tariff-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Stats bar — credibility strip under hero
   ========================================================================== */
.stats-bar {
  background: var(--bg);
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-bar .stats-row {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.stats-bar .stat-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 28px;
  border-right: 1px solid var(--color-gray-200);
  text-align: left;
}
.stats-bar .stat-item:first-child { padding-left: 0; }
.stats-bar .stat-item:last-child { border-right: 0; padding-right: 0; }

.stats-bar .stat-num {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  margin: 0;
}
.stats-bar .stat-num-big {
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--fg); letter-spacing: -0.01em;
}
.stats-bar .stat-num-unit {
  font-size: 17px; font-weight: 500;
  color: var(--color-gray-500);
  letter-spacing: 0;
}
.stats-bar .stat-lbl {
  display: block;
  font-size: 14px; line-height: 1.4;
  color: var(--color-gray-500);
}

/* ==========================================================================
   Why-features grid — premium feature cards under stats
   ========================================================================== */
/* Why-features: чуть теснее снизу, чтобы pill-ряд читался как «лид» к тарифам ниже. */
.why-features.block.tight {
  padding-block-start: var(--section-py-tight);
  padding-block-end: clamp(24px, 0.9vw + 16px, 32px);
}
.why-grid-features { gap: 28px 32px; }

.why-feat {
  display: flex; flex-direction: column;
  gap: 10px;
}
.why-feat-ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  transition: transform 280ms var(--easing), background-color 280ms var(--easing);
}
.why-feat-ico i { width: 24px; height: 24px; }
.why-feat h3 {
  margin: 0;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.why-feat p {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--color-gray-500);
}
.why-feat-meta {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-brand-dark);
  margin-top: 4px;
  align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  background: var(--color-brand-pale);
}
.why-feat:hover .why-feat-ico {
  transform: translateY(-3px);
  background: var(--surface-warm-deep);
}
@media (prefers-reduced-motion: reduce) {
  .why-feat-ico { transition: none; }
  .why-feat:hover .why-feat-ico { transform: none; }
}

/* ==========================================================================
   Gift section — "В подарок" panel with floating cards
   ========================================================================== */
/* Gift: верх теснее, чтобы панель «приклеилась» к калькулятору; низ обычный tight. */
.gift-section.block.tight {
  padding-block-start: clamp(24px, 0.9vw + 16px, 32px);
  padding-block-end: var(--section-py-tight);
}

.gift-panel {
  position: relative;
  border-radius: 28px;
  padding: 56px 56px 60px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 90, 31, 0.10) 0%, transparent 55%),
    radial-gradient(70% 90% at 100% 100%, rgba(224, 64, 0, 0.09) 0%, transparent 65%),
    var(--color-brand-pale);
  border: 1px solid rgba(224, 64, 0, 0.12);
}

.gift-head { position: relative; z-index: 1; max-width: 720px; margin-bottom: 36px; }
.eyebrow.gift-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
}
.gift-eyebrow svg, .gift-eyebrow i { width: 16px; height: 16px; flex: 0 0 auto; }
.gift-head .section-h2 {
  margin: 0 0 12px;
  font-size: 36px; line-height: 1.15;
  color: var(--fg);
}
.gift-accent { color: var(--color-brand); white-space: nowrap; }
.gift-lede {
  margin: 0;
  font-size: 16px; line-height: 1.55;
  color: var(--color-gray-700);
  max-width: 620px;
}

.gift-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.gift-card {
  background: var(--bg-elevated);
  border: 1px solid rgba(224, 64, 0, 0.10);
  border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 14px -8px rgba(60, 30, 10, 0.08);
  transition:
    transform 280ms var(--easing),
    box-shadow 280ms var(--easing),
    border-color 280ms var(--easing);
}
.gift-card:hover {
  transform: translateY(-3px);
  border-color: rgba(224, 64, 0, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 18px 30px -16px rgba(224, 64, 0, 0.30);
}
@media (prefers-reduced-motion: reduce) {
  .gift-card { transition: none; }
  .gift-card:hover { transform: none; }
}
.gift-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.gift-card-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gift-card-ico i { width: 24px; height: 24px; }
.gift-pill {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--color-brand-dark);
  color: #fff;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px -4px rgba(196, 56, 0, 0.45);
}
.gift-pill-paid {
  background: var(--color-gray-700);
  box-shadow: 0 4px 10px -4px rgba(90, 90, 90, 0.35);
}
.gift-card h3 {
  margin: 0;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  color: var(--fg);
}
.gift-card p {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--color-gray-500);
  flex: 1;
}
.gift-card p strong { color: var(--fg); font-weight: 600; }
.gift-card-meta {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600;
  color: var(--color-brand-dark);
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(224, 64, 0, 0.12);
  width: 100%;
}

/* ----- Stats / why-features / gift responsive ----- */
@media (max-width: 1100px) {
  .why-grid-features { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .gift-grid { grid-template-columns: repeat(2, 1fr); }
  .gift-panel { padding: 44px 36px 48px; }
}
@media (max-width: 880px) {
  .stats-bar { padding: 22px 0; }
  .stats-bar .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px; column-gap: 0;
  }
  .stats-bar .stat-item {
    padding: 0 18px;
    border-right: 1px solid var(--color-gray-200);
  }
  .stats-bar .stat-item:nth-child(odd) { padding-left: 0; }
  .stats-bar .stat-item:nth-child(even) { padding-right: 0; border-right: 0; }
  .stats-bar .stat-num-big { font-size: 30px; }
}
@media (max-width: 600px) {
  /* Stats: 2x2 grid вместо колонки — все 4 цифры в одном экране */
  .stats-bar { padding: 18px 0; }
  .stats-bar .stats-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 18px; column-gap: 16px;
  }
  .stats-bar .stat-item {
    padding: 0; border: 0;
  }
  .stats-bar .stat-item:nth-child(odd) { padding-left: 0; }
  .stats-bar .stat-item:nth-child(even) { padding-right: 0; }
  .stats-bar .stat-num-big { font-size: 26px; }
  .stats-bar .stat-num-unit { font-size: 13px; }
  .stats-bar .stat-lbl { font-size: 14px; line-height: 1.3; margin-top: 4px; }

  /* Why-features: 2x2 grid + компактнее (иконки, шрифты) — без meta-чипа */
  .why-features { padding-top: 36px; }
  .why-grid-features { grid-template-columns: 1fr 1fr; gap: 14px; }
  .why-feat { padding: 0; }
  .why-feat-ico { width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; }
  .why-feat-ico i { width: 18px; height: 18px; }
  .why-feat h3 { font-size: 15px; line-height: 1.25; margin-bottom: 4px; }
  .why-feat p { font-size: 14px; line-height: 1.4; margin-bottom: 0; }
  .why-feat-meta { display: none; }

  /* Why-letai: на mobile карточки сворачиваются до заголовка с иконкой;
     описание раскрывается по клику (см. main.js) */
  .why-letai-groups { gap: 24px; }
  .why-letai-group-label { font-size: 13px; margin-bottom: 10px; }
  .why-letai-groups .why-grid-2-loose,
  .why-letai-groups .why-grid-3 {
    grid-template-columns: 1fr; gap: 8px;
    align-items: start;
  }
  .why-letai-groups .why-item {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px;
    background: var(--color-gray-100, #f4f4f4);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration, 0.18s) var(--easing, ease);
  }
  .why-letai-groups .why-item:hover,
  .why-letai-groups .why-item:focus-visible { background: var(--color-gray-200, #e8e8e8); }
  .why-letai-groups .why-item:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
  .why-letai-groups .why-item .ico { width: 32px; height: 32px; flex: none; margin: 0; }
  .why-letai-groups .why-item .ico i { width: 16px; height: 16px; }
  .why-letai-groups .why-item h3 { font-size: 15px; line-height: 1.25; margin: 0; flex: 1; min-width: 0; }
  .why-letai-groups .why-item p { display: none; flex-basis: 100%; margin: 0; font-size: 15px; line-height: 1.5; }
  .why-letai-groups .why-item .why-item-chev {
    flex: none;
    color: var(--color-gray-500);
    transition: transform var(--duration, 0.18s) var(--easing, ease);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .why-letai-groups .why-item.is-open p { display: block; }
  .why-letai-groups .why-item.is-open .why-item-chev { transform: rotate(180deg); }
  .why-letai-groups .why-item.is-open strong { font-weight: 600; color: var(--color-text, inherit); }

  .gift-section { padding-bottom: 48px; }
  .gift-panel {
    padding: 32px 0 36px;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  .gift-head .section-h2 { font-size: 26px; }
  .gift-grid { grid-template-columns: 1fr; gap: 14px; }
  .gift-card { padding: 22px 20px 20px; }
  .gift-card h3 { padding-right: 60px; }
}

/* ----- FAQ ----- */
.faq { padding-block: var(--section-py); padding-inline: 0; }
.faq .section-head { margin-bottom: 32px; }
.faq-list {
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px 16px;
}
@media (max-width: 1023.98px) {
  .faq-list { grid-template-columns: 1fr; }
}
.faq-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
}
.faq-item:hover { border-color: var(--color-gray-300); }
.faq-item.open { border-color: var(--surface-warm-edge); box-shadow: var(--shadow-xs); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
}
.faq-q::after {
  content: '';
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 12px 2px, 2px 12px;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: transform var(--duration) var(--easing), background-color var(--duration) var(--easing);
}
.faq-item.open .faq-q::after {
  background-size: 12px 2px, 0 0;
  background-color: var(--color-brand);
  color: #fff;
}
.faq-a {
  display: none;
  padding: 0 24px 22px;
  font-size: 15px;
  color: var(--color-gray-500);
  line-height: 1.65;
  max-width: 720px;
}
.faq-item.open .faq-a { display: block; }

/* ----- Why grid 3-col variant ----- */
.why-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ----- About company ----- */
.about-head { max-width: 880px; margin-bottom: 56px; }
.about-head .section-h2 { margin-bottom: 20px; }
.about-lead { font-size: 18px; line-height: 1.6; color: var(--color-gray-700); margin: 0; }
.about-lead strong { color: var(--fg); font-weight: 600; }


.about-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.about-feature { display: flex; flex-direction: column; gap: 14px; }
.about-feature .ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--color-brand-pale); color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.about-feature .ico i { width: 24px; height: 24px; }
.about-feature h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.about-feature p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-gray-500); }
.about-feature p strong { color: var(--fg); font-weight: 600; }

/* ----- News ----- */
.news-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--easing), box-shadow 200ms var(--easing), border-color 200ms var(--easing);
}
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-gray-300); }
.news-card:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

.news-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #ffd9c9 0%, #ff8a5c 60%, #e84735 100%);
}
.news-media--2 { background: linear-gradient(135deg, #cfe9ff 0%, #6cb4f0 55%, #007bc3 100%); }
.news-media--3 { background: linear-gradient(135deg, #ffe4d6 0%, #ffb88a 50%, #f97443 100%); }
.news-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--easing); }
.news-card:hover .news-media img { transform: scale(1.04); }

.news-media:not(.has-image)::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.35) 0, transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(255,255,255,0.25) 0, transparent 50%);
  pointer-events: none;
}

.news-tag {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-brand);
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.news-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-date { font-size: 13px; color: var(--color-gray-500); }
.news-title { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 0; flex: 1; color: var(--fg); }
.news-link { font-size: 14px; font-weight: 600; color: var(--color-brand); margin-top: 4px; }
.news-card:hover .news-link { color: var(--color-brand-dark); }

/* ----- News article (detail) ----- */
.news-grid--2 { grid-template-columns: repeat(2, 1fr); }
.news-crumbs { font-size: 14px; color: var(--color-gray-500); margin-bottom: 28px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.news-crumbs a { color: var(--color-gray-500); text-decoration: none; transition: color 160ms var(--easing); }
.news-crumbs a:hover { color: var(--color-brand); }
.news-crumbs span { color: var(--color-gray-300); }

.news-article { padding-top: 64px; padding-bottom: 64px; }
.news-article-head { max-width: 760px; margin: 0 0 32px; }
.news-tag--inline {
  position: static;
  display: inline-block;
  background: var(--color-brand-pale);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  margin-bottom: 14px;
}
.news-article-head .news-date { display: block; margin-bottom: 14px; font-size: 14px; }
.news-article-title { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 20px; color: var(--fg); }
.news-article-lead { font-size: 20px; line-height: 1.5; color: var(--color-gray-700, #4a4a4a); margin: 0; }

.news-article-figure {
  margin: 36px 0 36px;
  max-width: 960px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-gray-100, #f5f5f5);
}
.news-article-figure img { display: block; width: 100%; height: auto; }

.news-article-body { max-width: 760px; margin: 0; }
.news-article-body p { font-size: 17px; line-height: 1.65; color: var(--fg); margin: 0 0 18px; }
.news-article-body p:last-child { margin-bottom: 0; }

.news-article-actions { max-width: 760px; margin: 40px 0 0; }

/* ----- News chips (категории) ----- */
.news-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}
.news-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg);
  background: var(--color-gray-100, #f5f5f5);
  border: 1px solid var(--color-gray-200, #e5e5e5);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms var(--easing), color 160ms var(--easing), border-color 160ms var(--easing);
}
.news-chip:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.news-chip:hover { background: var(--color-brand-pale); border-color: var(--color-brand-pale); }
.news-chip.is-active {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}
[data-theme="dark"] .news-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .news-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .news-chip.is-active {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}

.news-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 24px;
  background: var(--color-gray-100, #f5f5f5);
  border-radius: 16px;
  color: var(--color-gray-700, #4a4a4a);
}
[data-theme="dark"] .news-empty {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
}

@media (max-width: 768px) {
  .news-grid--2 { grid-template-columns: 1fr; }
  .news-article { padding-top: 32px; padding-bottom: 40px; }
  .news-article-title { font-size: 28px; }
  .news-article-lead { font-size: 17px; }
  .news-article-figure { margin: 24px -20px; border-radius: 0; }
  .news-article-body p { font-size: 16px; }
  .news-chips { gap: 6px; margin-bottom: 24px; }
  .news-chip { padding: 6px 12px; font-size: 13px; }
}

/* ----- Check-address page ----- */

@media (max-width: 768px) {
}

/* ----- Contact cards (Связаться с нами) ----- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-elevated); color: var(--fg); text-decoration: none;
  transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing), transform var(--duration) var(--easing);
}
.contact-card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--fg); }
.contact-card .ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
  background: var(--color-brand-pale); color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-card .ico i { width: 22px; height: 22px; }
.contact-card .ico-brand { background: transparent; padding: 0; }
.contact-card .ico-brand img,
.contact-card .ico-brand > svg { width: 100%; height: 100%; display: block; border-radius: inherit; }
.contact-card .name { font-size: 13px; font-weight: 600; color: var(--color-gray-500); margin: 0 0 4px; }
.contact-card .num { font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0 0 4px; color: var(--fg); }
.contact-card .sub { font-size: 13px; color: var(--color-gray-500); margin: 0; }
.contact-card.cb { background: var(--color-brand-pale); border-color: var(--color-brand-pale); }
.contact-card.cb:hover { background: var(--color-brand); color: #fff; }
.contact-card.cb:hover .ico { background: rgba(255,255,255,0.18); color: #fff; }
.contact-card.cb:hover .num, .contact-card.cb:hover .name, .contact-card.cb:hover .sub { color: #fff; }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; } }

/* ----- Sticky mobile CTA ----- */
.sticky-cta {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 90;
  background: var(--color-brand); color: #fff;
  padding: 14px 20px; border-radius: 999px;
  font-size: 16px; font-weight: 600;
  text-align: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.06);
  align-items: center; gap: 8px;
  transform: translateY(120%); transition: transform 240ms var(--easing);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta:hover { color: #fff; background: var(--color-brand-dark); }

/* ----- Visually-hidden helper ----- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ----- Skip link (visible on focus) ----- */
.skip-link {
  position: absolute; left: 8px; top: -100px;
  z-index: 1000;
  background: var(--color-brand); color: #fff;
  padding: 12px 20px; border-radius: 4px;
  font-weight: 600; font-size: 15px;
  transition: top 150ms var(--easing);
}
.skip-link:focus { top: 8px; color: #fff; outline: 3px solid #fff; outline-offset: 2px; }

/* ----- Connect new (form on orange section) ----- */
section.connect-orange { background: var(--color-brand); color: #fff; }
.connect-orange-h { color: #fff; font-size: 40px; line-height: 1.1; margin: 0 0 16px; letter-spacing: 0; }
.connect-orange-lede { color: rgba(255,255,255,0.95); font-size: 17px; line-height: 1.55; margin: 0 0 28px; max-width: 480px; }
.connect-orange-eyebrow { display: block; font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.connect-orange-phone { display: block; font-size: 32px; font-weight: 700; color: #fff; letter-spacing: 0; line-height: 1.1; }
.connect-orange-phone:hover { color: #fff; opacity: 0.9; }
.connect-orange-note { display: block; font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 6px; }
.connect-orange-submit { width: 100%; justify-content: center; margin-top: 8px; }
.connect-new-wrap {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  row-gap: 24px;
  align-items: start;
}
.connect-new-heading { grid-column: 1; grid-row: 1; }
.connect-new-form-col { grid-column: 1; grid-row: 2; }
.connect-new-wrap > .connect-new-side { grid-column: 2; grid-row: 2; }
.connect-new-support { background: rgba(255,255,255,0.15); border-radius: 16px; padding: 28px 32px; }

/* === Карточка «Позвонить» (главная форма, orange) === */
.connect-call-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon eyebrow"
    "icon phone"
    "icon meta"
    "icon hours";
  column-gap: 16px;
  row-gap: 2px;
  align-items: start;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 180ms var(--easing),
    border-color 180ms var(--easing),
    transform 80ms var(--easing);
}
.connect-call-card:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.4);
}
.connect-call-card:active { transform: scale(0.99); }
.connect-call-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
.connect-call-icon {
  grid-area: icon;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
  align-self: center;
  flex-shrink: 0;
}
.connect-call-eyebrow {
  grid-area: eyebrow;
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.85);
}
.connect-call-phone {
  grid-area: phone;
  font-size: 26px; font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: 2px;
  line-height: 1.1;
}
.connect-call-meta {
  grid-area: meta;
  display: flex; align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 6px;
}
.connect-call-status {
  display: inline-flex; align-items: center;
  gap: 6px; font-weight: 500;
}
.connect-call-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #6B7280; /* gray default — для offline */
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.25);
  flex-shrink: 0;
}
.connect-call-status[data-online="true"] .connect-call-dot {
  background: #4ADE80;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}
/* Пульс через отдельный pseudo-слой: анимируем transform + opacity —
   composited на GPU, никаких layout shifts (Lighthouse CLS=0). Раньше
   анимировался box-shadow, что заставляло браузер пересчитывать layout
   каждый кадр (CLS=1.0 на trace). */
.connect-call-status[data-online="true"] .connect-call-dot::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: rgba(74, 222, 128, 0.45);
  pointer-events: none;
  animation: connect-call-pulse 2.4s ease-in-out infinite;
}
@keyframes connect-call-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .connect-call-status[data-online="true"] .connect-call-dot::before { animation: none; opacity: 0; }
}
.connect-call-hours {
  grid-area: hours;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}
.connect-new-fields { display: flex; flex-direction: column; gap: 14px; }
.connect-new-fields .field { display: flex; flex-direction: column; gap: 6px; }
.connect-new-fields .field label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0;
}
.connect-new-fields .field label .field-hint {
  color: rgba(255,255,255,0.7);
  font-weight: 400;
}
.connect-new-fields .field input,
.connect-new-fields .field textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid rgba(255,255,255,0.5); border-radius: 4px;
  padding: 14px 16px; font-size: 16px; font-family: var(--font-sans);
  color: #fff; background: rgba(255,255,255,0.18); outline: none;
  transition: border-color var(--duration) var(--easing), background var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
}
.connect-new-fields .field textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  min-height: 50px;
  field-sizing: content;
}
.connect-new-fields .field input::placeholder,
.connect-new-fields .field textarea::placeholder { color: rgba(255,255,255,0.85); }
.connect-new-fields .field input:hover,
.connect-new-fields .field textarea:hover { background: rgba(255,255,255,0.22); }
.connect-new-fields .field input:focus,
.connect-new-fields .field textarea:focus { border-color: #fff; background: rgba(255,255,255,0.28); box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.connect-new-fields .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.95); }
.connect-new-fields .consent input { accent-color: #fff; width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.connect-new-fields .consent a { color: #fff; text-decoration: underline; }

/* Call-time chooser */
.connect-new-fields .cf-time { gap: 8px; }
.cf-time-label { font-size: 14px; font-weight: 500; color: #fff; opacity: 0.95; }
.cf-time-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-time-chip {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.40);   /* Run-13b F4: 0.32→0.40 — границы читаемы на бордовом */
  background: rgba(255,255,255,0.18);         /* 0.12→0.18 — pill заметнее */
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 11px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing), border-color var(--duration) var(--easing), transform var(--duration) var(--easing);
}
.cf-time-chip:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.55); }
.cf-time-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cf-time-chip.is-active { background: #fff; color: var(--color-brand); border-color: #fff; }
.cf-time-chip-pick::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--duration) var(--easing); }
.cf-time-chip-pick[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.cf-time-picker { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin-top: 4px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; }
.cf-time-picker[hidden] { display: none; }
.cf-time-picker-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-time-day, .cf-time-slot {
  appearance: none;
  display: inline-flex;                       /* центр по обоим осям независимо от */
  align-items: center;                        /* высоты соседей в row stretch'е    */
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.38);   /* Run-13b F4: 0.28→0.38 */
  background: rgba(255,255,255,0.14);         /* 0.08→0.14 — слоты заметнее */
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 11px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
.cf-time-day { flex: 1; min-width: 96px; text-align: center; }
.cf-time-slot { flex: 1 1 calc(25% - 6px); min-width: 64px; text-align: center; padding: 8px 10px; }
.cf-time-day:hover, .cf-time-slot:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.45); }
.cf-time-day:focus-visible, .cf-time-slot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cf-time-day.is-active, .cf-time-slot.is-active { background: #fff; color: var(--color-brand); border-color: #fff; }
.cf-time-day[disabled] { opacity: 0.45; cursor: not-allowed; background: rgba(255,255,255,0.04); }
.cf-time-day[disabled]:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.28); }
.cf-time-slot[hidden] { display: none; }

/* Tariff summary pill — set when user clicks calculator CTA */
.connect-tariff-summary { display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; margin: -8px 0 20px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); border-radius: 12px; color: #fff; max-width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transform: translateY(-6px); opacity: 0; transition: transform 280ms var(--easing), opacity 220ms var(--easing); pointer-events: none; }
.connect-tariff-summary.is-arriving { transform: translateY(0); opacity: 1; pointer-events: auto; }
.connect-tariff-summary[hidden] { display: none; }
.connect-tariff-summary-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; flex-shrink: 0; }
.connect-tariff-summary-text { font-size: 14px; font-weight: 600; line-height: 1.3; flex: 1; min-width: 0; }
.connect-tariff-summary-clear { appearance: none; background: rgba(255,255,255,0.18); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color var(--duration) var(--easing); }
.connect-tariff-summary-clear:hover { background: rgba(255,255,255,0.32); }
.connect-tariff-summary-clear:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.connect-orange .connect-form-anchor-pulse { animation: form-arrived 900ms var(--easing); }
@keyframes form-arrived {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(255,255,255,0.0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ----- Responsive additions ----- */
@media (max-width: 768px) {
  .calc-wrap { grid-template-columns: 1fr; }
  .calc-main .section-h2 { font-size: 32px; max-width: none; }
  .why-grid-3 { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .news-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Mobile: стэкаем grid в одну колонку. grid-template-rows должен быть
     `auto auto auto`, иначе остатки от desktop'овской `auto 1fr` устраивают
     второй строке свободное пространство — между heading и form-col появлялся
     пустой блок ~120-160px (особенно заметно когда виден ещё и call-card). */
  .connect-new-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 16px;
    align-items: start;
  }
  .connect-new-heading,
  .connect-new-form-col,
  .connect-new-wrap > .connect-new-side { grid-column: auto; grid-row: auto; min-height: 0; }
  /* Mobile: убираем double-gap после lede («Перезвоним за 15 минут…»):
     был margin-bottom 28px + grid row-gap 32px = 60px пустоты до формы. */
  .connect-orange-lede { margin-bottom: 8px; font-size: 16px; }
}

/* ----- About: responsive ----- */
@media (max-width: 960px) {
  .about-features { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .about-head { margin-bottom: 40px; }
  .about-head .section-h2 { font-size: 26px; }
  .about-lead { font-size: 16px; }
}

/* ----- Production polish: layout stability, mobile ergonomics ----- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
[hidden] { display: none !important; }
h1, h2, h3, h4,
.hero h1,
.section-h2,
.price .val,
.stat-num,
.calc-total-num,
.connect-orange-phone {
  letter-spacing: 0;
}

.main-nav .brand-row { flex: 0 0 auto; min-width: 0; }
.main-nav .links .menu-trigger,
.main-nav .links a {
  white-space: nowrap;
}

.tariffs-section { overflow: clip; }
.tariff-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tariff-tabs::-webkit-scrollbar { display: none; }
.tariff-tabs button { white-space: nowrap; flex: 0 0 auto; }

/* Mobile carousel — Swiper.js (см. js/libs/swiper-bundle.min.js + main.js).
   Структуру создаёт JS: <div class="swiper tariff-panes-swiper">
   <div class="swiper-wrapper"><div class="swiper-slide" data-tab-pane>...</div></div></div>
   Свои padding/overflow для .popular-теней — на slide-уровне. */
.tariff-panes-swiper {
  width: 100%;
  /* запас под тень/scale-эффект .popular карточки */
  padding-bottom: 12px;
}
.tariff-panes-swiper .swiper-slide {
  /* высота слайда подстраивается под контент через autoHeight: true в Swiper */
  height: auto;
}

.tariff {
  min-height: 100%;
  overflow: hidden;
}
.tariff.popular {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 34%),
    var(--color-brand);
}
.tariff .name {
  min-height: 42px;
  line-height: 1.35;
}
.tariff .features { flex: 1 1 auto; }
.tariff .features li span { min-width: 0; }
.tariff .router-toggle {
  width: 100%;
  border: 0;
  font-family: var(--font-sans);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tariff .router-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 64, 0,0.22);
}
.tariff.popular .router-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.45);
}
.tariff .cta { width: 100%; }

.tariffs-phone-cta {
  margin: 32px 0 0;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.tariffs-phone-cta__text { min-width: 0; flex: 0 1 auto; text-align: left; }
.tariffs-phone-cta__title { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.tariffs-phone-cta__desc { margin: 0; color: var(--color-gray-500); font-size: 15px; line-height: 1.5; }
.tariffs-phone-cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.tariffs-phone-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: background-color 150ms ease-out, transform 120ms ease-out;
}
.tariffs-phone-cta__btn:active { transform: scale(0.985); }
.tariffs-phone-cta__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(224, 64, 0, 0.55);
}
.tariffs-phone-cta__btn i,
.tariffs-phone-cta__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.tariffs-phone-cta__hours { color: var(--color-gray-500); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .tariffs-phone-cta__btn { transition: none; }
  .tariffs-phone-cta__btn:active { transform: none; }
}

@media (max-width: 640px) {
  .tariffs-phone-cta {
    margin-top: 24px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .tariffs-phone-cta__text { flex: 0 0 auto; text-align: left; }
  .tariffs-phone-cta__action { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
  .tariffs-phone-cta__btn { width: auto; min-width: 0; justify-content: flex-start; padding: 12px 22px; }
  .tariffs-phone-cta__hours { text-align: left; }
}

.calc-wrap,
.eq-grid,
.news-grid,
.why-grid {
  min-width: 0;
}
.calc-toggle { min-height: 78px; }
.connect-new-side { min-width: 0; }

@media (min-width: 1025px) {
  .tariff-grid { align-items: stretch; }
  .tariff { padding: 30px; }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 72px; }
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }

  .container { padding: 0 20px; }
  .site-header { box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
  .main-nav-inner { height: 56px; }
  .main-nav .brand-row .logo-letai { height: 28px; }
  .main-nav .right .btn-primary {
    min-width: 0;
    padding: 10px 14px;
  }
  .main-nav .right .quick-chat { display: none; }

  .hero {
    margin: 12px -20px 32px;  /* edge-to-edge, compensates .container 20px padding */
    border-radius: 0;          /* no rounded corners when full-width */
  }
  .hero-inner {
    padding: 32px 20px 28px;
    gap: 20px;
  }
  .hero-art .hero-photo { border-radius: 8px; object-position: center 30%; }
  .hero h1 {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .hero p.lede {
    margin-bottom: 22px;
    line-height: 1.5;
  }
  .hero-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 22px;
  }
  .hero-stats .stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    background: transparent;
  }
  .hero-stats .stat .num { font-size: 18px; }
  .hero-stats .stat .lbl { font-size: 11px; line-height: 1.3; margin-top: 4px; }
  .hero-cta .btn {
    flex: 1 1 150px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero-art {
    height: 220px;
    min-height: 0;
    margin-top: 0;
  }
  .hero-art .speed-pill {
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 8px;
  }

  /* section.block / .faq / .block.tight padding теперь через --section-py /
     --section-py-tight (clamp в colors_and_type.css) — масштабируются плавно. */
  .section-head {
    margin-bottom: 28px;
  }
  .section-head h2,
  .section-h2 {
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: 0;
  }

  .tariff-tabs {
    display: flex;
    margin: 0 0 24px;
    padding: 4px;
    border-radius: 999px;
    background: var(--tabs-track);
    gap: 4px;
    overflow: visible;
  }
  .tariff-tabs button {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    white-space: nowrap;
    text-align: center;
    padding: 10px 8px;
    font-size: 14px;
    line-height: 1.2;
  }
  .tariff-tabs button.active {
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }

  /* На iPhone SE и узких андроидах (≤380) при равных слотах «Интернет + ТВ»
     при 14px тексте лез на соседний таб. Решение — слегка ужать шрифт до 13px
     и обнулить боковой padding кнопки, чтобы вытащить текст в 1/3 даже на 360-375. */
  @media (max-width: 380px) {
    .tariff-tabs button {
      padding: 10px 4px;
      font-size: 13px;
    }
  }
  .tariff-grid {
    gap: 14px;
  }
  .tariff {
    padding: 22px;
    gap: 14px;
  }
  .tariff .name {
    min-height: 0;
    font-size: 17px;
  }
  .tariff .price .val {
    font-size: 44px;
  }
  .tariff .router-toggle {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
  }
  .tariff .router-toggle .price-tag {
    grid-column: 2;
    white-space: normal;
  }

  .calc-wrap {
    gap: 24px;
  }
  .calc-toggles {
    grid-template-columns: 1fr;
  }
  .calc-side {
    border-radius: 16px;
  }
  .calc-side-inner {
    padding: 24px;
  }
  .calc-total-num {
    font-size: 52px;
  }
  .calc-cta {
    height: 48px;
    font-size: 15px;
  }
  /* Touch target ergonomics — Fitts's Law */
  .calc-slider-wrap { height: 44px; }
  .calc-slider { height: 44px; }
  .calc-slider::-webkit-slider-runnable-track { height: 44px; }
  .calc-slider::-moz-range-track { height: 44px; }
  .calc-slider::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: 7px; }
  .calc-slider::-moz-range-thumb { width: 30px; height: 30px; }
  /* .calc-mark 44pt туч-таргет теперь в extras.css (base) — здесь только padding edge */
  .calc-mark:nth-child(1) { padding-left: 6px; }
  .calc-mark:nth-child(3) { padding-right: 6px; }

  /* Sticky live-total bar — keeps the price visible while user moves slider/toggles.
     Явные width/flex-direction/box-sizing — на iOS Safari при определённых
     условиях родителя sticky-элемент мог «поплыть» в узкую вертикальную
     колонку (Safari sticky bug + min-content на flex-children). */
  .calc-sticky-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 56px;
    z-index: 30;
    margin: 0 0 16px;
    padding: 14px 18px;
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(160deg, var(--color-brand-light) 0%, var(--color-brand) 70%, var(--color-brand-dark) 100%);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(224, 64, 0,0.55), 0 2px 6px rgba(0,0,0,0.06);
    border-radius: 14px;
  }
  .calc-sticky-mobile-info { position: relative; display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; line-height: 1.1; padding-right: 12px; }
  .calc-sticky-mobile-info::after { content: ''; position: absolute; right: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(255,255,255,0.28); }
  .calc-sticky-mobile-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; opacity: 0.85; }
  .calc-sticky-mobile-price { display: inline-flex; align-items: baseline; gap: 1px; }
  .calc-sticky-mobile-price .calc-total-num { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; transform-origin: center; }
  .calc-sticky-mobile-unit { font-size: 13px; font-weight: 500; opacity: 0.9; }
  .calc-sticky-mobile-cta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 20px;
    background: #fff; color: var(--color-brand);
    border-radius: 999px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: transform 160ms var(--easing), box-shadow 160ms var(--easing);
  }
  .calc-sticky-mobile-cta:active { transform: scale(0.97); color: var(--color-brand-dark); }

  .eq-card,
  .news-card,
  .contact-card {
    border-radius: 8px;
  }
  .eq-photo {
    min-height: 190px;
  }
  .connect-orange-h {
    font-size: 30px;
    letter-spacing: 0;
  }
  .connect-new-support {
    border-radius: 10px;
    padding: 22px;
  }
  .connect-orange-phone {
    font-size: 25px;
  }
  .connect-call-card { padding: 20px; column-gap: 14px; border-radius: 12px; }
  .connect-call-icon { width: 42px; height: 42px; }
  .connect-call-phone { font-size: 24px; }
  .connect-call-eyebrow { font-size: 12px; }
  .connect-new-fields .field input {
    min-height: 48px;
  }
  footer.site-footer {
    padding: 56px 0 32px;
  }
  footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .f-brand { display: flex; grid-template-columns: none; gap: 20px; }
  .f-brand .f-logo, .f-brand-tag, .f-contacts, .f-msgs { grid-column: auto; grid-row: auto; }
  .f-brand .f-contacts { flex-direction: column; }
  .f-phone { flex: 1 1 auto; }
  footer .f-legal {
    margin-top: 32px;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .f-legal-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .f-legal-meta .f-legal-dot { display: none; }
  .f-feedback-popup { right: auto; left: 0; }
  .f-feedback-popup::after { right: auto; left: 14px; }
  .f-back-to-top { margin-left: 0; align-self: flex-start; }

  .sticky-cta {
    left: 16px;
    right: 16px;
    bottom: max(14px, env(safe-area-inset-bottom));
    border-radius: 8px;
    min-height: 52px;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  /* .hero отрицательным margin'ом «выходит» за padding контейнера для
   * edge-to-edge на mobile (см. правило в @≤768px: margin: 12px -20px 32px).
   * На ≤480px padding контейнера = 16, поэтому margin -20 даёт горизонтальный
   * скролл 4px с каждой стороны. Подравниваем под актуальный padding. */
  .hero { margin-left: -16px; margin-right: -16px; }
}
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  /* То же самое: padding = 12 → margin = -12 без перелива за viewport. */
  .hero { margin-left: -12px; margin-right: -12px; }
}

@media (max-width: 420px) {
  /* Primary CTA stays visible on small screens — compact label per UX best-practice (persistent-nav + primary-action).
     gap: 0 prevents the (font-size:0) source text from offsetting the ::after label — base .btn has gap: 8px. */
  .main-nav .right .btn-primary { padding: 8px 14px; min-height: 40px; font-size: 0; gap: 0; }
  .main-nav .right .btn-primary::after { content: "Заявка"; font-size: 13px; font-weight: 600; }
  :lang(en) .main-nav .right .btn-primary::after { content: "Connect"; }
  :lang(tt) .main-nav .right .btn-primary::after { content: "Гариза"; }
  :lang(zh) .main-nav .right .btn-primary::after { content: "开通"; }
  /* check-address.html / contacts.html — button leads to phone callback, label matches intent */
  .main-nav .right a.btn-primary[href*="callback"]::after,
  .main-nav .right a.btn-primary[href="contacts.html"]::after { content: "Звонок"; }
  :lang(en) .main-nav .right a.btn-primary[href*="callback"]::after,
  :lang(en) .main-nav .right a.btn-primary[href="contacts.html"]::after { content: "Call"; }
  :lang(tt) .main-nav .right a.btn-primary[href*="callback"]::after,
  :lang(tt) .main-nav .right a.btn-primary[href="contacts.html"]::after { content: "Шалтырату"; }
  :lang(zh) .main-nav .right a.btn-primary[href*="callback"]::after,
  :lang(zh) .main-nav .right a.btn-primary[href="contacts.html"]::after { content: "致电"; }
  /* Phone icon stays — primary contact channel for ISP. Messengers hidden (available in mobile-menu + utility row) */
  .main-nav .right .quick-chat { display: none; }
  .main-nav .right { gap: 4px; }
  .main-nav .brand-row .logo-combo { height: 30px; }
  /* На 375px шесть элементов справа + бренд не помещались в container с
     padding: 0 20px (получался horizontal scroll на 14px). Локально ужимаем
     padding только в шапке, не трогая остальные секции. */
  .main-nav .container { padding: 0 12px; }
  .hero h1 { font-size: 30px; }
  .hero-cta .btn { flex-basis: 100%; }
  .tariff-tabs { margin-left: 0; margin-right: 0; padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 360px) {
  .main-nav .brand-row .logo-combo { height: 30px; }
  /* Сохраняем единую высоту 36px со всеми quick-action — не возвращаем 40+. */
  .main-nav .right .btn-primary { padding: 6px 10px; min-width: auto; }
}
@media (max-width: 340px) {
  /* iPhone SE (320) — phone is primary CTA (single-tap call > multi-step form). Form available via hamburger */
  .main-nav .right .btn-primary { display: none; }
  .main-nav .right .quick-action.quick-call {
    background: var(--color-brand); color: #fff;
    border-radius: 8px; width: 44px; height: 44px;
  }
  .main-nav .right .quick-action.quick-call:hover { background: var(--color-brand-dark); color: #fff; }
  .main-nav .right .quick-action.quick-call i { color: #fff; width: 20px; height: 20px; }
}

/* ==========================================================================
   Tariff detail page (/internet-tv/{slug}, /internet/{slug}, /tv/{slug})
   ========================================================================== */

/* Хлебные крошки страницы тарифа. Иконка home + шевроны › вместо слэшей,
   ссылки с pill-hover, последний crumb — bold + темнее. На мобайле —
   горизонтальный scroll вместо переноса (длинные «Тарифы для частного дома»,
   «GPON 350 + ТВ» удобнее в одну строку). Раньше main удалил `.breadcrumb`
   как dead code (perf-cleanup) — здесь восстановлено с полировкой. */
.breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; line-height: 1.4; color: var(--color-gray-500);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.breadcrumb a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; margin: -4px -2px;
  border-radius: 6px;
  color: var(--color-gray-500); text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.breadcrumb a:hover { background: var(--color-gray-100); color: var(--color-brand); }
.breadcrumb a:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.breadcrumb .breadcrumb__home svg { flex-shrink: 0; opacity: 0.85; }
.breadcrumb .sep {
  color: var(--color-gray-300); font-size: 14px; line-height: 1;
  user-select: none; flex-shrink: 0;
}
.breadcrumb [aria-current="page"] {
  color: var(--fg); font-weight: 600;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (max-width: 720px) {
  /* Wrap вместо горизонтального скролла: на узких экранах длинные крошки
     («Тарифы для частного дома» + «GPON 350 + ТВ») переносятся на новую
     строку, не теряются за кадром. row-gap чуть больше gap'а — двухстрочный
     ряд читается как два уровня иерархии, не как одна слипшаяся строка. */
  .breadcrumb { gap: 2px; row-gap: 6px; }
  .breadcrumb [aria-current="page"] { overflow: visible; text-overflow: clip; }
}

.block.tariff-hero { padding: 24px 0 56px; }
.tariff-hero-cover {
  margin: 0 0 32px; border-radius: 20px; overflow: hidden;
  /* Десктоп — широкий формат, чтобы цена и CTA поместились выше сгиба.
     Раньше 16/9 на 1232px ≈ 693px высоты съедало весь above-the-fold,
     цена начиналась на y≈929 (тест 2026-05-15-1218 tariffs P1).
     Мобильный — оставляем 16/9: на 375px это ≈ 200px, не мешает. */
  aspect-ratio: 21 / 7;
  background: var(--color-gray-100);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) {
  .tariff-hero-cover { aspect-ratio: 16 / 9; }
}
.tariff-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tariff-hero-grid {
  display: grid; gap: 32px;
  grid-template-columns: 1fr 360px;
  align-items: start;
}
.tariff-hero-info { min-width: 0; }
.tariff-hero-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--color-brand); background: var(--color-brand-pale);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.tariff-hero-title {
  font-size: 40px; font-weight: 700; line-height: 1.15;
  letter-spacing: -0.01em; margin: 0 0 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
/* «На letai.ru — Летай. Оранжевый. Профит» — справочный alias под H1.
   Маленький, серый, не привлекает внимания. Помогает пользователю
   сопоставить наш simplified name с тем, что показывает letai.ru. */
.tariff-hero-badge {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  padding: 5px 12px; border-radius: 999px;
  background: var(--color-brand); color: #fff;
}
.tariff-hero-stats {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.tariff-hero-stats li {
  padding: 16px 18px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 14px;
}
.tariff-hero-stats .num { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--fg); }
.tariff-hero-stats .num .unit { font-size: 14px; font-weight: 500; color: var(--color-gray-500); margin-left: 4px; }
.tariff-hero-stats .lbl { font-size: 13px; color: var(--color-gray-500); margin-top: 4px; line-height: 1.4; }
.tariff-hero-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.tariff-hero-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.tariff-hero-features li i,
.tariff-hero-features li > svg { width: 18px; height: 18px; color: var(--color-brand); flex-shrink: 0; margin-top: 3px; }
/* На мобильной (≤390px) с длинным текстом галочки flex-shrink'ились до
   17–21px — выглядело как разный размер; теперь фиксируем. */

.tariff-hero-price {
  position: sticky; top: 96px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-sm);
}
.tariff-hero-price .price-amount { display: flex; align-items: baseline; gap: 6px; }
.tariff-hero-price .price-amount .val { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.tariff-hero-price .price-amount .unit { font-size: 16px; font-weight: 500; color: var(--color-gray-500); }
.tariff-hero-price .price-note { margin: 0; font-size: 13px; color: var(--color-gray-500); line-height: 1.5; }
.tariff-hero-back {
  font-size: 14px; color: var(--color-gray-500); text-align: center;
  text-decoration: none; padding: 6px 0;
  transition: color var(--duration) var(--easing);
}
.tariff-hero-back:hover { color: var(--color-brand); }

/* ----- Что входит ----- */
.tariff-services { padding: 56px 0; }
.tariff-services-grid {
  display: grid; gap: 20px;
  /* На viewport ≤320 px (container=272 px) обычный minmax(320px,1fr) даёт
     overflow карточки = 320 > container. min(320px, 100%) разрешает
     схлопывание до 100% container на самых узких экранах. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.tariff-services-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.tariff-services-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--color-brand-pale); color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.tariff-services-icon i { width: 22px; height: 22px; }
.tariff-services-card h3 { margin: 0; font-size: 18px; font-weight: 600; }
.tariff-services-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tariff-services-card ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--fg); }
.tariff-services-card ul li i { width: 16px; height: 16px; color: var(--color-brand); flex-shrink: 0; margin-top: 2px; }
/* Текст в feature-строке должен схлопываться по ширине узкой карточки — без
   min-width: 0 flex-чайлд берёт intrinsic min-content и вылезает за border
   (особенно «Smart TV через приложение «Летай 2.0»» — нет пробелов). */
.tariff-services-card ul li > span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.tariff-services-card ul li > svg { flex-shrink: 0; }

@media (max-width: 960px) {
  /* Мобиле/планшет: переставляем порядок eyebrow → H1 → ЦЕНА → stats → features.
     Раньше price-aside шёл в конце инфо-блока, цена начиналась на y≈954 при
     viewport 844px (P1-7). display: contents «расплющивает» info, чтобы
     grid-template-areas мог раскладывать его детей. */
  .tariff-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "price"
      "stats"
      "features";
  }
  .tariff-hero-info { display: contents; }
  .tariff-hero-eyebrow { grid-area: eyebrow; }
  .tariff-hero-title  { grid-area: title; font-size: 32px; }
  .tariff-hero-stats  { grid-area: stats; grid-template-columns: 1fr 1fr; }
  .tariff-hero-features { grid-area: features; }
  .tariff-hero-price {
    grid-area: price; position: static; padding: 20px;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .tariff-hero-title { font-size: 26px; }
  /* Stats оставляем в 3 колонки даже на узком экране — это экономит ~260px
     по вертикали и убирает цену выше сгиба. Ужимаем content card. */
  .tariff-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tariff-hero-stats li { padding: 10px 8px; }
  .tariff-hero-stats .num { font-size: 16px; }
  .tariff-hero-stats .num .unit { font-size: 11px; margin-left: 2px; }
  .tariff-hero-stats .lbl { font-size: 11px; line-height: 1.3; margin-top: 2px; }
  .tariff-hero-price .price-amount .val { font-size: 38px; }
  .tariff-hero-price { padding: 16px; }
  /* Сжатые поля карточек «Что входит» на узком экране — иначе features
     обрезаются «Smart TV через пр...» / «Несколько ТВ в...». */
  .tariff-services-card { padding: 20px; }
  .tariff-services-card ul li { gap: 8px; font-size: 13.5px; }
}

/* ============================================================================
   Поиск по сайту — лупа в шапке + overlay
   ============================================================================ */

/* Десктопная лупа в .main-nav .right (по дефолту .quick-action скрыт до 1100px,
   нашу лупу хотим видеть всегда — переопределяем) */
.main-nav .right .quick-action.quick-search {
  display: inline-flex; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--color-gray-100); color: var(--fg);
  border: none; cursor: pointer; padding: 0;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.main-nav .right .quick-action.quick-search:hover { background: var(--color-brand-pale); color: var(--color-brand); }

/* Theme toggle в .main-nav .right — видна на мобайле и tablet (≤1100px).
   На десктопе (>1100) тема живёт в .utility row → здесь скрыта, чтобы не было дубля.
   Ниже 1100 .utility скрыт, и тёмная тема нужна в шапке в один тап (без бургера). */
.main-nav .right .quick-action.quick-theme {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--color-gray-100); color: var(--fg-muted);
  border: none; cursor: pointer; padding: 0;
  flex-shrink: 0;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.main-nav .right .quick-action.quick-theme:hover { background: var(--color-brand-pale); color: var(--color-brand); }
/* Активное состояние (тема dark) — фон не подсвечиваем, чтобы кнопки темы,
   поиска и звонка визуально не различались. Индикатор активной темы даёт
   сама иконка (JS переключает луну ↔ солнце). */
.main-nav .right .quick-action.quick-theme.is-active svg { fill: currentColor; }
.main-nav .right .quick-action.quick-theme:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
@media (max-width: 1100px) {
  .main-nav .right .quick-action.quick-theme { display: inline-flex; }
}

/* Мобильное поле-триггер — выглядит как input, но открывает overlay.
   Живёт в .mm-tools-row рядом с .mm-lang, занимает оставшееся место (flex:1).
   Высота 44px чтобы совпадать с .mm-lang-контейнером. */
.mm-search-trigger {
  display: none;
  flex: 1 1 auto; min-width: 0;
  align-items: center; gap: 10px;
  padding: 10px 14px; min-height: 44px;
  background: var(--color-gray-100); color: var(--color-gray-500);
  border: 1px solid transparent; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: left;
  touch-action: manipulation;
  transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
.mm-search-trigger:hover, .mm-search-trigger:focus-visible {
  background: var(--bg-elevated); border-color: var(--border); color: var(--fg);
  outline: none;
}
.mm-search-trigger .mm-search-ico { color: var(--color-brand); flex-shrink: 0; }
.mm-search-trigger .mm-search-placeholder {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-search-trigger .mm-search-kbd {
  flex-shrink: 0; font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--color-gray-200); color: var(--color-gray-700);
}
@media (max-width: 1100px) {
  .mm-search-trigger { display: flex; }
}

/* ----- App stores grid -----
   Карточки магазинов: компактный ряд из 4 шт. на десктопе, 2 на планшете, 1 на мобайле.
   Стрелка-«открыть» — в правом верхнем углу через absolute, чтобы name/sub занимали
   всю ширину карточки и длинные «Google Play»/«App Store» не обрезались на 1280
   container (раньше body 68px не вмещал 82px «Google Play»). Карточка-целиком —
   ссылка; повторять текст «Установить» 4× в каждой карте — лишний шум. */
.stores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.store-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 36px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--fg);
  text-decoration: none;
  min-width: 0;
  transition: border-color var(--duration) var(--easing),
              box-shadow var(--duration) var(--easing),
              transform var(--duration) var(--easing);
}
.store-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--fg);
}
.store-card:hover .store-card__cta { color: var(--color-brand); }
.store-card__ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.store-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.store-card__name {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.store-card__sub {
  font-size: 12px; color: var(--color-gray-500); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.store-card__cta {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: var(--color-gray-500);
  pointer-events: none;
  transition: color var(--duration) var(--easing);
}
.store-card__cta svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .stores-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stores-grid { grid-template-columns: 1fr; } }

/* ----- LK steps — карточки с фото-иллюстрацией сверху и номером в углу ----- */
.lk-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lk-step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--duration) var(--easing),
              border-color var(--duration) var(--easing),
              box-shadow var(--duration) var(--easing);
}
.lk-step:hover {
  transform: translateY(-2px);
  border-color: var(--surface-warm-edge);
  box-shadow: var(--shadow-sm);
}

/* Фото-вариант: иллюстрация сверху, номер в круге на стыке. */
.lk-step__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  background: var(--color-brand-pale);
}
.lk-step__photo picture,
.lk-step__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lk-num {
  position: absolute;
  left: 20px;
  bottom: -22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-light) 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 22px -6px rgba(224, 64, 0, 0.55), 0 0 0 4px var(--bg-elevated);
}
.lk-step__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 38px 24px 24px;
  flex: 1 1 auto;
}

/* Fallback-вариант без фото — старая мини-карточка с иконкой (если где-то ещё используется) */
.lk-step:not(:has(.lk-step__photo)) {
  padding: 32px 24px 24px;
  gap: 8px;
}
.lk-step:not(:has(.lk-step__photo)) .lk-num {
  position: absolute;
  top: -22px;
  bottom: auto;
  width: 48px; height: 48px;
  font-size: 20px;
}
.lk-step__title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.lk-step__text  { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-gray-500); }

@media (max-width: 900px) { .lk-steps { grid-template-columns: 1fr; gap: 24px; } }

/* ----- Feature list (galochki) ----- */
.feats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
.feats-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}
.feats-list li > i,
.feats-list li > svg { flex-shrink: 0; color: var(--color-brand); margin-top: 1px; }
@media (max-width: 700px) { .feats-list { grid-template-columns: 1fr; } }

/* ----- Note card (предупреждение / инфо) ----- */
.note-card {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  margin: 0 0 28px;
  border-radius: 14px;
  background: var(--color-brand-pale);
  border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
}
.note-card__ico { flex-shrink: 0; color: var(--color-brand); }
.note-card__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--fg); }
.note-card__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-gray-600, var(--fg)); }

/* ----- LK ordered list (нумерация в стиле бренда) ----- */
.lk-h3 {
  margin: 8px 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lk-list {
  counter-reset: lk;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.lk-list li {
  counter-increment: lk;
  position: relative;
  padding: 14px 16px 14px 56px;
  margin: 0 0 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
}
.lk-list li::before {
  content: counter(lk);
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.lk-disclaimer {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--color-brand);
  background: color-mix(in srgb, var(--color-brand-pale) 60%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray-600, var(--fg));
}
.lk-disclaimer > i,
.lk-disclaimer > svg { flex-shrink: 0; color: var(--color-brand); margin-top: 2px; }

/* ----- Web cabinet CTA card ----- */
.web-cta-card {
  display: flex;
  gap: 20px;
  padding: 28px;
  border-radius: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.web-cta-card__ico {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.web-cta-card__body { display: flex; flex-direction: column; gap: 14px; }
.web-cta-card__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-gray-500); }
.web-cta-card__body .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }
.web-cta-card__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--color-gray-500);
}
@media (max-width: 700px) { .web-cta-card { flex-direction: column; gap: 14px; padding: 22px; } }

/* ----- Help banner ----- */
.lk-help {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px;
  border-radius: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.lk-help__title { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.lk-help__text  { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-gray-500); }
.lk-help__actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.lk-help__actions .btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 900px) {
  .lk-help { flex-direction: column; align-items: flex-start; padding: 22px; }
  .lk-help__actions { width: 100%; }
  .lk-help__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ----- Payment methods grid ----- */
.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pay-method {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration) var(--easing),
              border-color var(--duration) var(--easing),
              box-shadow var(--duration) var(--easing);
}
.pay-method:hover {
  transform: translateY(-2px);
  border-color: var(--surface-warm-edge);
  box-shadow: var(--shadow-sm);
}
.pay-method--accent {
  border-color: var(--color-brand);
  background: linear-gradient(180deg, var(--color-brand-pale) 0%, var(--bg-elevated) 35%);
}
.pay-method__head { display: flex; align-items: center; gap: 10px; }
.pay-method__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pay-method__ico {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pay-method__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pay-method__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-gray-500);
}
.pay-method__steps {
  margin: 4px 0 0;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--color-gray-100) 70%, transparent);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray-600, var(--fg));
}
.pay-method__hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-gray-500);
}
.pay-method__hint > i,
.pay-method__hint > svg { flex-shrink: 0; color: var(--color-brand); margin-top: 2px; }
.pay-method__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
}
.pay-method__cta:hover { text-decoration: underline; }
.pay-method__inline {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pay-method__inline:hover { color: var(--color-brand); }
@media (max-width: 1024px) { .pay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pay-grid { grid-template-columns: 1fr; } }

/* ----- Tips grid ----- */
.tips-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tip-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.tip-card__ico {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 0 4px;
}
.tip-card__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.tip-card__text  { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-gray-500); }
@media (max-width: 900px) { .tips-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tips-grid { grid-template-columns: 1fr; } }

/* ----- Dark theme adjustments ----- */
:root[data-theme="dark"] .store-card,
:root[data-theme="dark"] .lk-step,
:root[data-theme="dark"] .web-cta-card,
:root[data-theme="dark"] .lk-help,
:root[data-theme="dark"] .pay-method,
:root[data-theme="dark"] .tip-card,
:root[data-theme="dark"] .lk-list li {
  background: var(--bg-elevated);
  border-color: var(--border);
}
:root[data-theme="dark"] .pay-method--accent {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand) 18%, var(--bg-elevated)) 0%, var(--bg-elevated) 50%);
  border-color: var(--color-brand);
}
:root[data-theme="dark"] .pay-method__steps {
  background: color-mix(in srgb, var(--bg) 65%, transparent);
}


/* Блок «О посёлке» под hero (топ-100): intro из Wiki + статистика */
.village-about { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border, rgba(0,0,0,0.08)); }
.village-about__intro { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--fg, #111); max-width: 860px; }
.village-about__stats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.village-about__stats li { font-size: 15px; }
.village-about__stats strong { font-size: 22px; color: var(--color-brand, #fa4906); font-weight: 700; }
.village-about__lbl { color: var(--color-gray-500, #6b7280); }
@media (max-width: 720px) { .village-about__stats { gap: 16px; } .village-about__stats li { font-size: 14px; } .village-about__stats strong { font-size: 18px; } }
.village-list__dist { font-size: 12px; color: var(--color-gray-500, #6b7280); margin-left: 8px; }

/* ============================================================================
   Cabinet/Payment — дополнительные компоненты
   (QR-карточка, breadcrumbs, security-баннер, cross-links сетка)
   ============================================================================ */

/* ----- Apps section с QR справа -----
   gap 24→20 — карточки магазинов и QR-блок ближе, секция плотнее.
   align-items: start — каждая сторона стартует от верха, QR не растягивается под
   высоту grid. */
.apps-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}
.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 200px;
  text-align: center;
}
.qr-card img {
  display: block;
  width: 144px;
  height: 144px;
  background: #FFF6EE;
  border-radius: 8px;
  padding: 4px;
}
.qr-card__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.35; }
.qr-card__hint  { margin: 0; font-size: 11px; color: var(--color-gray-500); line-height: 1.35; }
@media (max-width: 900px) {
  .apps-layout { grid-template-columns: 1fr; gap: 16px; }
  .qr-card { width: 100%; max-width: 260px; margin: 0 auto; order: 2; }
}

/* ----- Breadcrumbs ----- */
.crumbs {
  font-size: 13px;
  color: var(--color-gray-500);
  padding: 16px 0 0;
}
.crumbs .container { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a {
  color: var(--color-gray-500);
  text-decoration: none;
}
.crumbs a:hover { color: var(--color-brand); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--fg); font-weight: 600; }
.crumbs span[aria-hidden]  { color: var(--color-gray-400, var(--color-gray-500)); }

/* ----- Security / anti-fraud баннер ----- */
.security-note {
  display: flex;
  gap: 18px;
  padding: 24px 28px;
  background: color-mix(in srgb, var(--color-brand-pale) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
  border-left: 4px solid var(--color-brand);
  border-radius: 14px;
}
.security-note__ico {
  flex-shrink: 0;
  display: inline-flex;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--color-brand);
  color: #fff;
  align-items: center;
  justify-content: center;
}
.security-note__title { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.security-note__text  { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-gray-600, var(--fg)); }
@media (max-width: 700px) { .security-note { flex-direction: column; padding: 20px; gap: 12px; } }

/* ----- Related / cross-links сетка ----- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--fg);
  text-decoration: none;
  transition: transform var(--duration) var(--easing),
              border-color var(--duration) var(--easing),
              box-shadow var(--duration) var(--easing);
}
.related-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  color: var(--fg);
}
.related-card__ico {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
}
.related-card__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.related-card__text  { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-gray-500); }
@media (max-width: 1024px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .related-grid { grid-template-columns: 1fr; } }

/* ----- Dark theme ----- */
:root[data-theme="dark"] .qr-card,
:root[data-theme="dark"] .related-card {
  background: var(--bg-elevated);
  border-color: var(--border);
}
:root[data-theme="dark"] .security-note {
  background: color-mix(in srgb, var(--color-brand) 18%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
}

/* ----- Payment methods illustration (banner) ----- */
.pay-methods-art {
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  max-width: 1232px;
}
.pay-methods-art picture,
.pay-methods-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================================
   TV CHANNELS — page /tv/channels, modal, "ТВ-каналы в тарифе" section
   ========================================================================== */

/* ---- Page ---------------------------------------------------------------- */

.tv-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 24px 0 28px;
}
.tv-toolbar__search {
  flex: 1 1 280px;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tv-toolbar__search:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 18%, transparent);
}
.tv-toolbar__search svg {
  width: 18px;
  height: 18px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.tv-toolbar__search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 12px;
  font: inherit;
  color: var(--fg);
  outline: none;
}
.tv-toolbar__search input::placeholder { color: var(--fg-muted); }

.tv-toolbar__filter {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 2px;
}
.tv-toolbar__filter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--fg-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.tv-toolbar__filter button:hover { color: var(--fg); }
.tv-toolbar__filter button.is-active {
  background: var(--color-brand);
  color: var(--fg-on-brand);
}

.tv-channels-groups {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.tv-channels-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.tv-channels-group__head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
}
.tv-channels-group__count {
  font-size: 13px;
  color: var(--fg-muted);
  flex-shrink: 0;
}

.tv-channels-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.tv-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.3;
  color: var(--fg);
  transition: border-color 160ms ease, background 160ms ease;
}
.tv-channel:hover {
  border-color: color-mix(in srgb, var(--color-brand) 40%, var(--border));
}
/* Логотип — <picture> с webp+png, либо аббревиатурный <span> */
.tv-channel__logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
}
picture.tv-channel__logo { display: inline-flex; }
picture.tv-channel__logo > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.tv-channel__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tv-channel__hd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--color-brand-pale);
  color: var(--color-brand);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.tv-channel.is-hidden { display: none; }
.tv-channels-group.is-hidden { display: none; }

.tv-empty {
  margin: 40px 0;
  padding: 24px;
  text-align: center;
  color: var(--fg-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.tv-disclaimer {
  margin: 32px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* ---- Section on tariff detail page ("ТВ-каналы в тарифе") --------------- */
.tv-channels-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}
.tv-channels-section__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* На узких экранах (320 px) текст «Посмотреть все каналы · 147 каналов»
     с full .btn padding перерастал 320 px и давал горизонтальный скролл.
     max-width:100% даёт контейнеру обрезать, white-space:normal + text-align
     переносит текст в 2 строки на ≤360 px. */
  max-width: 100%;
}
.tv-channels-section__actions .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 380px) {
  .tv-channels-section__actions .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}
.tv-channels-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tv-channels-section__cta:hover { text-decoration: underline; }
.tv-channels-section__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}
.tv-channels-section__cta:hover svg { transform: translateX(2px); }

/* Hero on tariff detail — кликабельная "230 каналов" плитка.
   Эта кнопка наследует .tv-channels-trigger (border-bottom dashed currentColor),
   но то правило задумано для inline-кнопки внутри текста. Здесь кнопка
   display: block; width: 100% — поэтому dashed-линия тянулась через всю
   карточку. Подменяем на inline-dashed под .lbl-текстом. Цепочка
   .tv-channels-trigger.tariff-hero-channels-trigger даёт specificity (0,2,0)
   и перебивает чистую .tv-channels-trigger (0,1,0) ниже по файлу. */
.tariff-hero-channels-trigger,
.tv-channels-trigger.tariff-hero-channels-trigger {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  transition: color 160ms ease;
}
.tariff-hero-channels-trigger .lbl {
  display: inline-block;
  border-bottom: 1px dashed currentColor;
  transition: border-color 160ms ease;
}
.tariff-hero-channels-trigger:hover { color: var(--color-brand); }
.tariff-hero-channels-trigger:hover .lbl { border-color: var(--color-brand); }
.tariff-hero-channels-trigger:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

/* ---- Trigger ("230 каналов" → clickable) --------------------------------
   text-decoration: underline dashed — рисуется под глифами на каждой строке,
   в отличие от border-bottom, который при двустрочном тексте даёт длинную
   горизонтальную линию по нижнему краю кнопки и читается как разделитель.
*/
.tv-channels-trigger {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: underline dashed currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: 2px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.tv-channels-trigger:hover {
  color: var(--color-brand);
  text-decoration-color: var(--color-brand);
}
.tv-channels-trigger:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ---- Form error banner (рендерится над формой после redirect ?err=) ---- */
.form-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-error) 10%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.45;
}
.form-error-banner__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-error);
}
:root[data-theme="dark"] .form-error-banner {
  background: color-mix(in srgb, var(--color-error) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 55%, transparent);
}
.connect-orange .form-error-banner { margin-bottom: 14px; }

/* ===========================================================================
   Connect modal — попап с формой заявки на «безформенных» страницах
   (cabinet/news/payment/rayon). Открывается из шапки/моб.меню/sticky CTA.
   =========================================================================== */
.connect-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 480px;
  width: calc(100% - 32px);
  /* 85vh оставляет место под нижний край в landscape, чтобы submit был виден
     без скролла. Нижняя safe-area учтена в padding inner. */
  max-height: min(85vh, calc(100dvh - env(safe-area-inset-top) - 24px));
  border-radius: 16px;
  overflow: visible;
  color: var(--fg);
  /* Анимация появления — паттерн как у .tv-modal */
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.connect-modal[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@starting-style {
  .connect-modal[open] {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
.connect-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 220ms ease;
}
.connect-modal[open]::backdrop { opacity: 1; }
@starting-style {
  .connect-modal[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .connect-modal,
  .connect-modal[open],
  .connect-modal::backdrop,
  .connect-modal[open]::backdrop {
    transition: none;
    transform: none;
  }
}
.connect-modal__inner {
  position: relative;
  background: var(--bg);
  border-radius: 16px;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-height: inherit;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.connect-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  /* Touch target ≥44×44, видимый icon 20px остаётся центрированным */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--fg-muted);
  border-radius: var(--radius-sm, 8px);
  transition: background 160ms ease, color 160ms ease;
}
.connect-modal__close:hover { background: var(--bg-soft); color: var(--fg); }
.connect-modal__close:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.connect-modal__head {
  margin: 0 0 18px;
  padding-right: 44px; /* запас под кнопку X */
}
.connect-modal__head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.connect-modal__head p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.connect-modal__form .connect-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.connect-modal__form .field { margin: 0; }
.connect-modal__form .field label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
}
.connect-modal__form .field input,
.connect-modal__form .field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border, var(--color-gray-200));
  border-radius: 10px;
  font: inherit;
  /* 16px — порог, ниже которого iOS Safari автозумит при focus */
  font-size: 16px;
  background: var(--bg);
  color: var(--fg);
  min-height: 46px;
  resize: vertical;
}
.connect-modal__form .field input:focus,
.connect-modal__form .field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(224, 64, 0, 0.12);
}
.connect-modal__form .consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* 13px — комфортный минимум для secondary text на мобильных */
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-muted);
  /* Расширяем тапаемую область по вертикали (checkbox 18×18 без этого мал) */
  padding: 6px 0;
}
.connect-modal__form .consent input { margin-top: 2px; flex-shrink: 0; }
.connect-modal__form .consent a { color: var(--color-brand); }
.connect-modal__form .btn { width: 100%; margin-top: 4px; }

/* Селектор времени звонка в модалке. Структура [data-cf-time] идентична
   orange-форме (обработчик один в main.js), но фон модалки нейтральный —
   переопределяем цвета чипов/picker'а под var(--bg)/--fg вместо бордового. */
.connect-modal__form .cf-time { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.connect-modal__form .cf-time-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  opacity: 1;
}
.connect-modal__form .cf-time-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.connect-modal__form .cf-time-chip {
  border: 1px solid var(--border, var(--color-gray-200));
  background: var(--bg-soft, var(--bg));
  color: var(--fg);
  padding: 9px 14px;
  min-height: 40px;
}
.connect-modal__form .cf-time-chip:hover {
  background: var(--bg);
  border-color: var(--fg-muted);
}
.connect-modal__form .cf-time-chip:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.connect-modal__form .cf-time-chip.is-active {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}
.connect-modal__form .cf-time-chip-pick::after {
  border-color: currentColor;
}
.connect-modal__form .cf-time-picker {
  background: var(--bg-soft, var(--bg));
  border-color: var(--border, var(--color-gray-200));
  padding: 10px;
  gap: 8px;
}
.connect-modal__form .cf-time-day,
.connect-modal__form .cf-time-slot {
  background: var(--bg);
  border: 1px solid var(--border, var(--color-gray-200));
  color: var(--fg);
}
.connect-modal__form .cf-time-day:hover,
.connect-modal__form .cf-time-slot:hover {
  background: var(--bg-soft, var(--bg));
  border-color: var(--fg-muted);
}
.connect-modal__form .cf-time-day:focus-visible,
.connect-modal__form .cf-time-slot:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.connect-modal__form .cf-time-day.is-active,
.connect-modal__form .cf-time-slot.is-active {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}
.connect-modal__form .cf-time-day[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
}

@media (max-width: 480px) {
  /* 24px суммарно по бокам — «дышит» от safe-area, не липнет к экрану */
  .connect-modal { width: calc(100% - 24px); }
  .connect-modal__inner { padding: 24px 18px calc(20px + env(safe-area-inset-bottom)); }
  .connect-modal__head h2 { font-size: 20px; }
}

/* Dark theme: input / textarea получают чуть более светлый фон, чтобы поля
   визуально отделялись от inner (без этого они одного цвета и видны лишь
   через border). */
:root[data-theme="dark"] .connect-modal__inner {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .connect-modal__form .field input,
:root[data-theme="dark"] .connect-modal__form .field textarea {
  background: var(--bg-soft, color-mix(in oklab, var(--bg) 88%, white 12%));
  border-color: var(--border-strong, color-mix(in oklab, var(--bg) 70%, white 30%));
}

/* Финальное переопределение размеров шапки на мобайле/tablet (≤1100). Идёт в самом
   конце CSS, потому что базовые .quick-search/.quick-theme правила 44×44 определены
   позже основного @media-блока в этом файле и иначе перекрывают мобильные размеры.
   ТЗ: TZ_2026-05-15_mobile-header.md (Задача 2 — единый ряд 36×36). */
@media (max-width: 1100px) {
  .main-nav .right .quick-action,
  .main-nav .right .quick-action.quick-search,
  .main-nav .right .quick-action.quick-theme,
  .main-nav .right .quick-action.quick-call,
  .main-nav .right .quick-action.quick-chat { width: 36px; height: 36px; }
  .main-nav .right .btn-primary { min-height: 36px; padding: 6px 13px; }
}
/* font-size вынесен под min-width: 421px, чтобы не перебивать font-size:0
   из блока @media (max-width: 420px) на строке 3444 — иначе исходный текст
   "Подключить" остаётся видим поверх ::after "Заявка" (слитное наложение). */
@media (max-width: 1100px) and (min-width: 421px) {
  .main-nav .right .btn-primary { font-size: 13px; }
}
@media (max-width: 360px) {
  .main-nav .right .btn-primary { padding: 6px 10px; }
}
@media (max-width: 340px) {
  /* iPhone SE — .btn-primary скрыт, .quick-call становится primary 44×44 оранжевый.
     Перекрываем мобильные 36×36 обратно — этот блок должен быть позже. */
  .main-nav .right .quick-action.quick-call { width: 44px; height: 44px; }
}