/* Дизайн-токены (ТЗ, раздел 4). Вёрстка макетов перенесена со своими
   inline-стилями — это эталон отступов; здесь только общее и адаптив. */
:root {
  --bg: #F5F6F8; --surface: #FFFFFF; --ink: #0F1B2D; --ink-2: #3D4756; --muted: #5A6474;
  --border: #E3E6EB; --field: #C9D0DA; --nav-active: #1E2B40; --nav-text: #C7CEDA;
  --primary: #1F4FD8; --primary-hover: #163BA6; --primary-soft: #E8EEFC; --primary-soft-text: #1E40AF;
  --accent: #FFB547; --warn-text: #B45309; --warn-bg: #FEF3E2; --warn-ink: #92400E;
  --success-text: #166534; --success-bg: #E7F5EC; --danger-text: #B42318; --danger-bg: #FDECEC;
  --telegram: #17699A; --hl-user: #FDE68A; --hl-ai-bg: #DBEAFE;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); font-family: Inter, system-ui, sans-serif; color: var(--ink); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid #7FA2FF; outline-offset: 2px; border-radius: 6px; }
.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 { position: absolute; left: -9999px; top: 8px; background: #fff; color: var(--ink);
  padding: 10px 14px; border-radius: 8px; z-index: 10; }
.skip-link:focus { left: 8px; }

/* Кнопки с hover там, где в макете их нет inline. */
.btn-tg:hover { background: #125A84 !important; }
.btn-accent:hover { background: #F5A62E !important; }
.btn-outline:hover { background: #F1F3F6 !important; }
.choice:hover { border-color: var(--primary) !important; }

/* FAQ — нативный <details>: работает без JS и доступен с клавиатуры. */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] .faq-sign::before { content: "−"; }
.faq details:not([open]) .faq-sign::before { content: "+"; }

/* Переключатель «Помесячно / За год». */
.period [aria-checked="true"] { background: #FFFFFF !important; }
.price-yearly { display: none; }
.yearly .price-yearly { display: inline; }
.yearly .price-monthly { display: none; }

.notice-ai { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5;
  color: var(--ink-2); background: #F1F5FE; border: 1px solid #D6E0FA; border-radius: 10px; padding: 10px 12px; }

/* Адаптив: макеты нарисованы на 1440 px, держим и 360 px. */
@media (max-width: 720px) {
  .hero-title { font-size: 36px !important; }
  .section-title { font-size: 28px !important; }
  .login-aside { padding: 28px 24px !important; gap: 24px !important; }
  .login-aside h1 { font-size: 28px !important; }
  .app-main { padding: 24px 16px 48px !important; }
  .cta-box { padding: 36px 24px !important; }
  .hero-badge { right: 8px !important; }
  .landing-nav { order: 3; flex-basis: 100% !important; }
}
@media (max-width: 900px) {
  .app-nav { flex-basis: 100% !important; }
  .app-nav .nav-bot { display: none !important; }
  .app-nav .nav-links { flex-direction: row !important; flex-wrap: wrap; }
}
/* Экран входа на телефоне: кнопка входа — на первом экране. */
@media (max-width: 720px) {
  .login-aside ul, .login-aside > p { display: none !important; }
  .login-aside > div { margin: 0 !important; }
}

/* ---- Рассылки: чипы, переключатель, карточки формата (флажки и радио —
   настоящие, поэтому форма работает и без JS). */
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid #D5DAE1; background: #FFFFFF; color: #24303F;
  font-size: 14px; font-weight: 600; box-sizing: border-box; }
.chip input:checked + span { background: #1F4FD8; border-color: #1F4FD8; color: #FFFFFF; }
.chip input:focus-visible + span { outline: 3px solid #7FA2FF; outline-offset: 2px; }
.chip-square span { border-radius: 10px; }
.chip-square input:checked + span { background: #E8EEFC; border-color: #1F4FD8; color: #1E40AF; }

.switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px;
  font-weight: 600; color: #0F1B2D; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 44px; height: 26px; border-radius: 999px; background: #C9D0DA; display: flex;
  align-items: center; padding: 3px; box-sizing: border-box; justify-content: flex-start; }
.switch-track span { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.switch input:checked + .switch-track { background: #1F4FD8; justify-content: flex-end; }
.switch input:focus-visible + .switch-track { outline: 3px solid #7FA2FF; outline-offset: 2px; }
.alerts .when-all { display: none; }
.alerts:has([data-all-regions]:checked) .when-all { display: block; }
.alerts:has([data-all-regions]:checked) .when-some { display: none !important; }

.radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px;
  border: 2px solid #E3E6EB; background: #FFFFFF; cursor: pointer; }
.radio-card input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #1F4FD8; flex: 0 0 auto; }
.radio-card:has(input:checked) { border-color: #1F4FD8; background: #F5F8FF; }
.alerts .preview-full { display: none !important; }
.alerts:has(input[name="format"][value="full"]:checked) .preview-full { display: flex !important; }
.alerts:has(input[name="format"][value="full"]:checked) .preview-short { display: none !important; }

.region-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 12px; height: 36px;
  border-radius: 999px; background: #EEF0F4; font-size: 14px; font-weight: 600; }
.region-chip button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent;
  color: #5A6474; cursor: pointer; font-size: 16px; }
.region-chip button:hover { background: #DDE1E8; }
.region-list { position: absolute; z-index: 5; left: 0; right: 0; top: 48px; margin: 0; padding: 4px;
  list-style: none; background: #FFFFFF; border: 1px solid #D5DAE1; border-radius: 10px;
  box-shadow: 0 12px 24px rgba(15,27,45,0.12); max-height: 280px; overflow: auto; }
.region-list li { padding: 10px 12px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.region-list li[aria-selected="true"], .region-list li:hover { background: #E8EEFC; }
@media (max-width: 720px) {
  .topics-grid, .format-grid { grid-template-columns: minmax(0, 1fr) !important; }
}