/* ==========================================================================
   SWYFT CORP LLC -- Responsive overrides
   Loaded after the other stylesheets so these rules win. Breakpoints
   checked: 1440 / 1280 / 1024 / 768 / 430 / 390 / 375.
   ========================================================================== */

@media (max-width: 1024px) {
  .structure-grid,
  .pricing-grid,
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .factor-grid { grid-template-columns: repeat(2, 1fr); }
  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row-3 { grid-template-columns: repeat(2, 1fr); }

  /* Split hero collapses to a single column -- text first, graphic below
     it, both centered -- rather than squeezing two narrow columns. */
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-content { text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-trust-badges { justify-content: center; }
  .hero-visual-svg { max-width: 320px; }
}

/* 861px-1200px: the desktop nav is still visible here (it's hidden below
   860px), but there isn't room for the header's full premium spacing plus
   the phone number -- without this the header overflows horizontally.
   Compact it just in this squeezed zone; the wider premium sizing above
   1200px and the mobile menu below 860px are untouched. */
@media (max-width: 1200px) {
  .header-phone { display: none; }
  .primary-nav, .primary-nav > ul { gap: 0; }
  .nav-item > button.nav-link,
  .nav-item > a.nav-link { padding: 11px 6px; font-size: 0.72rem; }
  .header-actions { gap: 4px; }
  .header-actions .btn { padding: 9px 12px; font-size: 0.74rem; }
}

/* Below ~950px there still isn't room for "Log In" alongside the nav and
   the primary CTA -- drop it a little earlier than the 860px mobile-menu
   cutoff so the nav never overflows or wraps in between. */
@media (max-width: 950px) {
  .header-actions .btn-secondary { display: none; }
}

@media (max-width: 860px) {
  .primary-nav, .header-actions .btn-secondary, .header-phone { display: none; }
  .menu-toggle { display: flex; }
  .steps-grid { grid-template-columns: 1fr; gap: 40px; }
  .entity-grid { grid-template-columns: repeat(2, 1fr); }
  .support-panel { grid-template-columns: 1fr; padding: 40px 28px; text-align: center; }
  .support-panel-text > p { margin-left: auto; margin-right: auto; }
  .support-feature { text-align: left; }
  .support-panel-visual { order: -1; }
  .support-visual-rings { width: 160px; height: 160px; }
  .support-visual-badge { width: 90px; height: 90px; }
  .support-visual-badge svg { width: 40px; height: 40px; }

  .split-grid, .split-grid.split-grid-reverse { grid-template-columns: 1fr; }
  .split-grid .usage-mockup, .split-grid img { order: -1; }
  .split-grid .kit-visual, .split-grid .doc-stack, .split-grid .binder-row { order: -1; margin-bottom: 8px; }
  .order-panel { max-width: 100%; margin-left: 0; }
  .factstrip { grid-template-columns: 1fr; }
  .guide-layout { grid-template-columns: 1fr; gap: 28px; }
  .guide-toc { position: static; }
  .guide-toc-list { flex-direction: row; flex-wrap: wrap; }
  .guide-toc-title { margin-left: 0; }
  .usage-mockup-float { position: static; margin-top: -20px; display: inline-flex; }

  .package-select-bar { padding: 22px 18px; }
  .package-select-fields { flex-direction: column; align-items: stretch; }
  .compare-layout { grid-template-columns: 1fr; }
  .order-summary-card { position: static; }
}

@media (max-width: 768px) {
  section { padding: 56px 0; }
  .formation-selector { margin-top: -40px; padding: 28px 20px; }
  .structure-grid,
  .pricing-grid,
  .service-grid,
  .trust-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-social-block { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .hero { padding: 64px 0 56px; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .picker-grid { grid-template-columns: 1fr; }
  .factor-grid,
  .match-grid,
  .compare-grid,
  .package-grid,
  .showcase-grid { grid-template-columns: 1fr; }
  .compare-trap-grid { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .compare-trap-card { padding: 28px 24px; }
  .compare-trap-card:hover { transform: none; }
  .compare-trap-vs { display: none; }
  .service-tablist { max-width: 100%; overflow-x: auto; }
  .service-tab { flex: 0 0 auto; } /* keep each tab's natural width so the bar scrolls instead of squeezing into unreadable slivers */
  .service-row { padding: 16px 18px; }
  .kit-included-panel { padding: 36px 24px; }
  .kit-included-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .footer-top { grid-template-columns: 1fr; }
  .entity-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .device-showcase-img { max-width: 170px; }
  .device-showcase-img-b { margin-left: -45px; }
}