/*
 * Mobile system layer.
 *
 * This stylesheet is loaded after route-owned CSS so shared mobile rules have
 * one final owner. It normalizes primitives and layout behavior without
 * targeting individual pages or generated content classes.
 */

@media (max-width: 899px) {
  :where(main, section, article, div) {
    min-width: 0;
  }

  :where(.container, .hero-container, .page-hero__shell, .hire-container, .form-centered-container) {
    width: 100%;
    max-width: var(--page-max);
    padding-inline: var(--page-gutter);
    margin-inline: auto;
  }

  :where(.hero-container, .page-hero__shell) {
    box-sizing: border-box;
  }

  :where(.cards, .cards.threeUp, .cards.fourUp, .pipeline-grid, .service-grid,
    .timeline-grid, .about-proof-cards, .hire-evidence-grid, .hire-two-column,
    .start-proof-row, .form-helper-grid, .metric-grid, .safeguards-grid,
    .about-lane, .about-value-grid,
    .content-style-182fc1d2, .content-style-cc52a46d, .content-style-6ca40269,
    .content-style-2a6df86e, .content-style-b5b1beed) {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.site-section, .section, .about-band, .about-value-strip-section) {
    padding-block: clamp(2.5rem, 6vw, 4rem);
  }

  :where(.btn, .btn-primary, .btn-secondary, .btn-ghost, button,
    .hero-primary-cta, .hero-secondary-cta, .page-hero__actions a,
    .hire-primary, .hire-secondary, .btn-authorize) {
    min-height: 44px;
  }

  :where(.card, .step-card, .step-card-premium, .metric, .hero-full .content,
    .intake-shell, .form-status--error, .form-status__retry,
    input, select, textarea, .hire-evidence-card) {
    border-radius: var(--radius-sm);
  }

  :where(.card, .step-card, .step-card-premium, .metric, .hero-full .content,
    .intake-shell) {
    overflow-wrap: anywhere;
  }

  :where(.hero-full .content) {
    margin-inline: var(--page-gutter);
    padding-inline: var(--space-5);
  }

  :where(.form-centered-container) {
    box-sizing: border-box;
  }

  :where(.mobile-nav-link, .mobile-nav-link--cta) {
    min-height: 52px;
  }
}

@media (max-width: 480px) {
  :where(.section-header, .section-title, .section-description) {
    max-width: 100%;
  }

  :where(.section-title, .hero-title, .page-hero h1, .start-title) {
    overflow-wrap: anywhere;
  }
}