/* AimSight Design System — 06 Responsive */

@media (max-width: 1180px) {
  .as-header {
    width: calc(100% - 24px) !important;
    border-radius: 22px !important;
  }

  .as-header .as-nav {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto !important;
    height: 66px !important;
    gap: 10px !important;
    padding: 0 12px 0 16px !important;
  }

  .as-header .as-brand-img {
    width: 94px !important;
    max-width: 94px !important;
  }

  .as-nav-links {
    justify-self: end !important;
    gap: 0 !important;
  }

  .as-nav-links a:not(.as-download) {
    display: none !important;
  }

  .as-menu-btn {
    display: inline-flex !important;
  }

  .as-nav-links.is-open {
    position: fixed !important;
    top: calc(var(--as-header-top) + var(--as-header-height) + 12px) !important;
    left: auto !important;
    right: max(12px, calc((100vw - min(100vw - 24px, var(--as-container-wide))) / 2 + 12px)) !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: min(260px, calc(100vw - 48px)) !important;
    padding: 16px !important;
    border: 1px solid var(--as-color-border) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--as-shadow-lg) !important;
    backdrop-filter: blur(18px) !important;
  }

  .as-nav-links.is-open a:not(.as-download) {
    display: block !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  .as-nav-links.is-open a:not(.as-download)::after {
    display: none !important;
  }

  .as-hero-grid-alt,
  .as-analytics-layout,
  .as-scoring-layout,
  .as-control-panel,
  .as-faq-layout,
  .as-final-cta-card,
  .as-real-preview-grid {
    grid-template-columns: 1fr !important;
  }

  .as-hero-visual,
  .as-dashboard-visual,
  .as-target-visual,
  .as-control-visual {
    max-width: 640px !important;
    margin-inline: auto !important;
  }

  .as-feature-grid,
  .as-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .as-real-preview-head,
  .as-section-title.centered {
    text-align: left !important;
    margin-inline: 0 auto !important;
  }

  .as-final-cta-card {
    align-items: start !important;
  }
}

@media (max-width: 760px) {
  :root {
    --as-page-gutter: 1rem;
    --as-header-height: 64px;
  }

  .as-header {
    width: calc(100% - 20px) !important;
  }

  .as-header .as-nav {
    height: var(--as-header-height) !important;
    gap: 7px !important;
    padding: 0 9px 0 12px !important;
  }

  .as-header .as-brand-img {
    width: 82px !important;
    max-width: 82px !important;
  }

  .as-language-menu,
  .as-language-trigger,
  .as-theme-toggle,
  .as-menu-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .as-download {
    min-width: 100px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
  }

  .as-download::after {
    font-size: 12px !important;
  }

  .as-nav-links.is-open {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  .as-feature-grid,
  .as-process-grid,
  .as-metric-row,
  .as-privacy-grid,
  .as-footer-grid,
  .as-proof-grid {
    grid-template-columns: 1fr !important;
  }

  .as-actions,
  .as-final-cta-actions,
  .as-news-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .as-btn,
  .as-final-cta-actions a,
  .as-news-form input,
  .as-news-form button {
    width: 100% !important;
  }

  .as-hero-visual-alt {
    min-height: 390px !important;
  }

  .as-hero-visual-alt::before {
    border-radius: 30px !important;
  }

  .as-phone-scene-alt {
    top: 30px !important;
    width: 196px !important;
  }

  .as-real-phone-screen {
    inset: 44px 23px auto !important;
    height: 337px !important;
  }

  .as-card-top,
  .as-card-bottom,
  .as-benefits-alt,
  .as-avatar-bubble {
    display: none !important;
  }

  .as-proof-strip {
    margin-top: 0 !important;
  }

  .as-real-preview-main {
    min-height: auto !important;
  }

  .as-real-preview-main img,
  .as-real-preview-phone,
  .as-real-screenshot-card img,
  .as-login-preview img {
    max-height: 430px !important;
    object-fit: contain !important;
  }

  .as-analytics-showcase::before {
    display: none !important;
  }

  .as-dashboard-floating,
  .as-target-score {
    position: static !important;
    margin-top: var(--as-space-4) !important;
  }

  .as-target-visual {
    min-height: 340px !important;
  }

  .as-control-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

@media (max-width: 430px) {
  :root {
    --as-page-gutter: 0.75rem;
    --as-header-height: 60px;
  }

  .as-header {
    width: calc(100% - 16px) !important;
    border-radius: 20px !important;
  }

  .as-header .as-nav {
    gap: 5px !important;
    padding: 0 7px 0 10px !important;
  }

  .as-header .as-brand-img {
    width: 70px !important;
    max-width: 70px !important;
  }

  .as-nav-preferences {
    gap: 5px !important;
  }

  .as-language-menu,
  .as-language-trigger,
  .as-theme-toggle,
  .as-menu-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 13px !important;
  }

  .as-download {
    min-width: 86px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
  }

  .as-download::after {
    font-size: 11px !important;
  }

  .as-hero h1 {
    font-size: clamp(2.35rem, 15vw, 3.7rem) !important;
  }

  .as-news-card,
  .as-real-preview-main,
  .as-real-preview-side,
  .as-real-screenshot-card,
  .as-target-visual,
  .as-control-visual {
    border-radius: 26px !important;
  }
}

@media (max-width: 360px) {
  .as-header .as-brand-img {
    width: 62px !important;
    max-width: 62px !important;
  }

  .as-header .as-nav {
    gap: 4px !important;
    padding: 0 6px 0 8px !important;
  }

  .as-nav-preferences {
    gap: 4px !important;
  }

  .as-language-menu,
  .as-language-trigger,
  .as-theme-toggle,
  .as-menu-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
  }

  .as-download {
    min-width: 78px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
  }

  .as-download::after {
    font-size: 10px !important;
  }
}