/* UX v2 — usability fixes layered over styles.css / analytics.css. Structure of pages unchanged. */
:root { --red-aa: #d63a24; }

/* Contact action always reachable from the header */
.header-cta { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; background: var(--red-aa); color: #fff; font-size: 13px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.header-cta:hover { background: var(--red-dark); }
.header-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Contrast: white on brand red was 3.77:1, red labels on light 3.63:1 */
.button { background: var(--red-aa); }
.eyebrow, .product-kicker, .post-card-cat, .post-toc p { color: var(--red-dark); }
.dark .eyebrow, .section.dark .eyebrow, .hero .eyebrow { color: var(--red); }

/* Content stays visible when JavaScript does not run (crawlers, slow devices) */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* Case carousel: say which cards are records and which are models */
.case-badge { display: inline-block; margin-left: 8px; padding: 3px 7px; border-radius: 999px; font-style: normal; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }
.case-badge.is-record { background: var(--ink); color: #fff; }
.case-badge.is-model { border: 1px solid currentColor; color: var(--muted); }
.feature-case .case-badge.is-model, .dark .case-badge.is-model { color: rgba(255, 255, 255, 0.72); }
.feature-case .case-badge.is-record { background: #fff; color: var(--ink); }

/* Country filter: visible keyboard focus */
.country-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Lead form: 16px fields (no iOS zoom), required marks, clear invalid state */
.lead-form input, .lead-form select, .lead-form textarea { font-size: 16px; }
.lead-form label:has(:required) > span:first-child::after { content: " *"; color: var(--red); }
.lead-form input:user-invalid, .lead-form select:user-invalid, .lead-form textarea:user-invalid { border-color: #ff8a78; box-shadow: 0 0 0 1px #ff8a78; }

@media (max-width: 640px) {
  .header-cta { min-height: 40px; padding: 7px 11px; font-size: 0; }
  .header-cta::after { content: attr(data-short); font-size: 12px; }
  /* Cookie banner: was 220px tall and covered the first call to action */
  .gg-consent { gap: 10px; padding: 12px 14px; }
  .gg-consent h2 { display: none; }
  .gg-consent p { margin: 0 0 4px; font-size: 13px; line-height: 1.4; }
  .gg-consent-policy { font-size: 12px; }
  .gg-consent-actions { flex-direction: row; }
  .gg-consent-actions button { min-height: 42px; padding: 8px; font-size: 13px; }
}
@media (max-width: 640px) {
  html[lang="ru"] .header-cta::after { content: "Заявка"; }
  html[lang="es"] .header-cta::after { content: "Solicitar"; }
  html[lang="pt-BR"] .header-cta::after { content: "Solicitar"; }
  html[lang="zh-CN"] .header-cta::after { content: "咨询"; }
}