/*
 * Gixo Lex public acquisition layer.
 *
 * Legal SEO pages pre-date the Lex product theme and still carry component-local
 * cyan/purple styles. PublicLayout adds .lex-public-route only on verified Lex
 * marketing routes, so these higher-specificity rules create one trustworthy
 * visual system without changing authenticated workspaces or other products.
 */

.lex-public-route {
  --lex-public-accent: #f87171;
  --lex-public-accent-strong: #dc2626;
  --lex-public-accent-soft: #fda4af;
  --lex-public-link: #fecaca;
  --lex-public-copy: #cbd5e1;
  --lex-public-muted: #a8b5c7;
  --lex-public-border: rgba(248, 113, 113, 0.2);
  --lex-public-panel: rgba(35, 20, 24, 0.74);
  --lex-public-panel-strong: rgba(48, 28, 32, 0.88);
  background:
    radial-gradient(circle at 50% -8%, rgba(127, 29, 29, 0.2), transparent 34rem),
    #05070d;
  color: #f8fafc;
}

.lex-public-route :is(.seo-hero-title, .seo-section-title, .lex-title, .lex-section-title) {
  font-family: 'Fraunces', 'Source Serif Pro', Georgia, serif !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
}

.lex-public-route :is(.seo-eyebrow, .lex-eyebrow) {
  color: var(--lex-public-accent-soft) !important;
  letter-spacing: 0.11em !important;
}

.lex-public-route :is(.seo-hero-subtitle, .seo-section-subtitle, .lex-subtitle, .lex-section-copy) {
  color: var(--lex-public-copy) !important;
}

.lex-public-route :is(.seo-feature-desc, .seo-step-desc, .seo-faq-a, .lex-card p, .lex-card li, .lex-step p) {
  color: var(--lex-public-muted) !important;
}

.lex-public-route :is(.seo-feature-card-inner, .seo-faq-item, .seo-step, .lex-card, .lex-step) {
  background: linear-gradient(155deg, var(--lex-public-panel-strong), var(--lex-public-panel)) !important;
  border-color: var(--lex-public-border) !important;
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.18);
}

.lex-public-route :is(.seo-feature-icon, .seo-step-num, .seo-stat-number, .lex-step-num) {
  color: var(--lex-public-accent) !important;
}

.lex-public-route .seo-stat-number {
  background: linear-gradient(135deg, #fecaca, var(--lex-public-accent)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.lex-public-route :is(.seo-feature-card, .seo-cta-box) {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.52), rgba(127, 29, 29, 0.72)) !important;
}

.lex-public-route :is(.seo-feature-icon, .seo-step-num) {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.72), rgba(220, 38, 38, 0.28)) !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
}

.lex-public-route :is(.seo-link, .lex-link, .seo-figure a) {
  color: var(--lex-public-link) !important;
}

.lex-public-route .lex-link {
  border-color: var(--lex-public-border) !important;
}

.lex-public-route :is(.seo-figure, .lex-product-proof) {
  border-color: var(--lex-public-border) !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.lex-public-route .seo-figure img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.lex-public-route :is(.mud-button-filled.mud-button-filled-primary, .mud-button-filled.mud-button-filled-success) {
  background: linear-gradient(135deg, var(--lex-public-accent-strong), #991b1b) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.22) !important;
}

.lex-public-route :is(.mud-button-outlined.mud-button-outlined-info, .mud-button-outlined.mud-button-outlined-primary) {
  border-color: rgba(248, 113, 113, 0.52) !important;
  color: #fecaca !important;
}

.lex-public-route :is(a, button, [role='button']):focus-visible {
  outline: 3px solid #fda4af !important;
  outline-offset: 3px;
}

/* FocusOnNavigate moves screen-reader focus to h1 with tabindex="-1". Keep that
   semantic focus without drawing the global interactive-control glow around a
   non-interactive page title. */
.lex-public-route h1[tabindex='-1']:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.lex-public-route :is(h2, h3, [id]) {
  scroll-margin-top: 8rem;
}

.lex-public-route table {
  border-collapse: separate;
  border-spacing: 0;
}

.lex-public-route :is(th, td) {
  border-color: rgba(248, 113, 113, 0.14) !important;
}

.lex-public-route .seo-comparison-table tbody th[scope='row'] {
  color: #e2e8f0 !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

@media (max-width: 767px) {
  .lex-public-route :is(.seo-hero, .lex-hero) {
    padding-top: 3.25rem !important;
  }

  .lex-public-route :is(.seo-section, .lex-section) {
    padding-block: 2.75rem !important;
  }
}

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