/* Лендинг «Бьюти.Говорит». Разметка пришла из макета с инлайн-стилями, поэтому адаптив
   держится на селекторах по фрагментам style. Эту часть правят вместе с index.html. */
html { scroll-behavior: smooth; }
/* Маскоты в плитках выступают за край: не даём им растянуть страницу вбок */
html, body, main { overflow-x: clip; }
body { margin: 0; background: #F4F1FA; font-family: 'Onest', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #5B2BD9; text-decoration: none; }
a:hover { color: #7C4DF0; }
img { max-width: 100%; }
a[data-cta] { box-sizing: border-box; }
.lbl-short { display: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 16px; }

.rail { overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
  .rail::-webkit-scrollbar { display:none; }
  #prob-grid > div { overflow-wrap:anywhere; }
  @container (max-width: 1080px) { #prob-grid > div { grid-column:span 6 !important; } }
  @container (max-width: 640px) { #prob-grid > div { grid-column:span 12 !important; } }
  @container (max-width: 640px) {
    #stats-row br { display:none; }
  }
  @container (max-width: 760px) {
    #niche-img { order:3 !important; }
    #niche-text { display:contents !important; }
    #niche-eyebrow { order:1 !important; flex:1 1 100% !important; }
    #niche-h2 { order:2 !important; flex:1 1 100% !important; }
    #niche-body { order:4 !important; flex:1 1 100% !important; }
  }

/* Наведение: из макета */
.hv1:hover{color:#181022 !important}
.hv2:hover{color:#181022 !important}
.hv3:hover{color:#181022 !important}
.hv4:hover{color:#181022 !important}
.hv5:hover{background:#7C3DF0 !important}
.hv6:hover{transform:translateY(-2px) !important}
.hv7:hover{background:#EDE6FE !important}
.hv8:hover{transform:translateY(-2px) !important;box-shadow:0 18px 34px rgba(24,16,34,0.28) !important}
.hv9:hover{transform:translateY(-2px) !important;box-shadow:0 18px 34px rgba(24,16,34,0.28) !important}
.hv10:hover{color:#fff !important}
.hv11:hover{color:#fff !important}
.hv12:hover{color:#fff !important}
.hv13:hover{color:#fff !important}
.hv14:hover{color:#fff !important}
.hv15:hover{color:#fff !important}
.hv16:hover{color:#fff !important}
.hv17:hover{color:#fff !important}
.hv18:hover{color:#fff !important}
.hv19:hover{color:#fff !important}
.hv20:hover{color:#fff !important}
.hv21:hover{color:#fff !important}
.hv22:hover{color:#fff !important}
.hv23:hover{color:#fff !important}
.hv24:hover{color:#fff !important}
.hv25:hover{color:#C6F94B !important}
.hv26:hover{color:#C6F94B !important}
.hv27:hover{background:#8B5CF6 !important;color:#fff !important}
.hv28:hover{background:#8B5CF6 !important;color:#fff !important}
.hv29:hover{background:#8B5CF6 !important;color:#fff !important}
.hv30:hover{color:#fff !important}
.hv31:hover{color:#fff !important}
.hv32:hover{color:#fff !important}

/* FAQ */
[data-faq] { -webkit-tap-highlight-color: transparent; }
[data-faq] > span:last-child { transition: transform .2s ease, background .2s ease; }
[data-faq][aria-expanded="true"] > span:last-child { transform: rotate(45deg); background: #8B5CF6; color: #fff; }

/* Фокус с клавиатуры */
a:focus-visible, button:focus-visible { outline: 3px solid rgba(139, 92, 246, .45); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Планшет и телефон ---------- */
@media (max-width: 960px) {
  /* Поля страницы: на широком экране 40 px */
  [style*="padding:40px;"] { padding: clamp(14px, 4vw, 40px) !important; }
  [style*="padding:56px 40px;"] { padding: clamp(24px, 6vw, 56px) clamp(14px, 4vw, 40px) !important; }

  /* Плитки в одну колонку */
  [style*="repeat(12, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-column:span 7"], [style*="grid-column:span 5"], [style*="grid-column:span 4"], [style*="grid-column:span 3"] { grid-column: 1 / -1 !important; }

  /* Навбар: без ссылок, кнопка помещается */
  [style*="gap:36px"] { gap: 12px !important; padding: 10px 12px 10px 16px !important; border-radius: 20px !important; }
  [style*="gap:28px; font-size:16px"] { display: none !important; }
  [style*="gap:36px"] > a[data-cta] { padding: 12px 16px !important; font-size: 14px !important; border-radius: 13px !important; white-space: nowrap; }

  /* Герой */
  [style*="padding:48px 44px 44px"] { padding: 28px 22px 26px !important; border-radius: 26px !important; }
  [style*="left:-70px"] { left: 14px !important; bottom: -18px !important; }
  #hero-tile { border-radius: 26px !important; }
  [style*="min-height:520px"] { min-height: 420px !important; }
  [style*="font-size:21px; line-height:1.4"] { font-size: 17px !important; }
  [style*="padding:20px 34px"], [style*="padding:20px 30px"] { padding: 16px 22px !important; font-size: 17px !important; }

  /* Тарифы */
  [style*="repeat(4, minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:1fr 1fr; gap:14px 24px"] { grid-template-columns: 1fr !important; }
  [style*="font-size:52px"] { font-size: clamp(32px, 8vw, 52px) !important; }
  [style*="padding:36px 36px 32px"], [style*="padding:36px 32px 32px"] { padding: 26px 20px 24px !important; }

  /* Финальный блок */
  [style*="font-size:19px; font-weight:700; padding:20px"] { font-size: 17px !important; }
}

@media (max-width: 520px) {
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
  [style*="gap:36px"] > a[data-cta] { padding: 12px 14px !important; }
  [style*="gap:36px"] span[style*="font-size:20px"] { font-size: 17px !important; }
  [style*="font-size:56px; font-weight:800"] { font-size: 44px !important; }
}