/* employee-home.html: native tablet reflow (desktop >= 1401px stays unchanged). */
/* 2026-09-19: narrowed from 1400px to 1279px (see membership-point-card-responsive.css
   for the full rationale). Unconditional reset keeps html/body/.header-container off
   style.css's sitewide min-width:1300px floor at every width from 641px up. */
@media (min-width: 641px) {
  html,
  body {
    min-width: 0 !important;
  }

  .header-container {
    min-width: 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 1279px) {
  html,
  body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: clip !important;
  }

  body.home-page {
    padding-top: 68px !important;
  }

  body.home-page > header {
    display: block !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 8px 0 !important;
  }

  body.home-page > header .header-container {
    display: flex !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 18px !important;
    transform: none !important;
  }

  body.home-page > header .header-left {
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  body.home-page > header .logo img {
    width: auto !important;
    height: 46px !important;
    max-width: 230px !important;
  }

  body.home-page > header .mobile-menu-toggle {
    display: block !important;
    position: absolute !important;
    top: 5px !important;
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    z-index: 10000 !important;
  }

  body.home-page > header .mobile-menu-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    margin: 5px auto !important;
  }

  body.home-page > header .main-nav {
    display: none !important;
  }

  body.home-page > header .main-nav.active {
    display: block !important;
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: 100% !important;
    height: 100vh !important;
    padding: 78px 22px 32px !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: -8px 0 28px rgba(15, 23, 42, 0.18) !important;
    z-index: 9999 !important;
  }

  body.home-page > header .main-nav.active ul,
  body.home-page > header .main-nav.active .mobile-menu-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.home-page > header .main-nav.active li {
    width: 100% !important;
    border-bottom: 1px solid #e8edf5 !important;
  }

  body.home-page > header .main-nav.active > ul > li > a {
    display: block !important;
    padding: 14px 4px !important;
    font-size: 0.94rem !important;
  }

  body.home-page > header .main-nav.active .mobile-order-btn {
    display: block !important;
    background: #00aaff !important;
    color: #fff !important;
    padding: 14px 20px !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body.home-page > header .main-nav.active .mobile-consult-btn {
    display: block !important;
    color: #00aaff !important;
    padding: 12px 20px !important;
    border: 1px solid #00aaff !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body.home-page > header .header-right {
    display: flex !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: 54px !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }

  body.home-page > header .header-right > a.header-link,
  body.home-page > header #authSection,
  body.home-page > header .consult-btn,
  body.home-page > header .upload-btn {
    display: none !important;
  }

  body.home-page > header .cart-icon,
  body.home-page > header .cart-icon a,
  body.home-page > header .cart-icon svg {
    display: flex !important;
    width: 24px !important;
    height: 24px !important;
  }

  .vertical-faq-btn {
    display: none !important;
  }

  .container,
  .hero-content-wrapper {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 1180px !important;
  }

  .reasons > .container,
  .color-card > .container,
  .of-section > .container,
  .news-section > .container,
  .price-comparison > .container,
  .case-studies > .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .hero {
    padding: 28px 0 18px !important;
    overflow: hidden !important;
  }

  .hero-content-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr) !important;
    align-items: center !important;
    gap: clamp(20px, 3vw, 42px) !important;
    padding: 0 32px !important;
  }

  .hero .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-brand-kicker,
  #hero-brand-h1,
  #hero-title-wide,
  #hero-title-center {
    font-size: clamp(1.55rem, 3.1vw, 2.12rem) !important;
  }

  #hero-title-wide {
    white-space: normal !important;
  }

  .hero-brand-copy,
  .hero-brand-copy p,
  .hero-brand-copy span {
    font-size: clamp(0.88rem, 1.35vw, 1rem) !important;
  }

  .hero-image-section {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }

  .hero-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 610px !important;
    gap: 16px !important;
  }

  .hero-buttons > div,
  .hero-buttons a {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .hero-buttons > div > div:first-child {
    max-width: 100% !important;
  }

  .hero-buttons p {
    width: auto !important;
  }

  .specs-bar {
    margin-top: 0 !important;
  }

  .reasons-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin-top: 0 !important;
  }

  .reasons .reason-icon {
    width: clamp(120px, 16vw, 160px) !important;
    height: clamp(120px, 16vw, 160px) !important;
  }

  .reason-card h3,
  .reason-card h3 * {
    font-size: clamp(1.05rem, 1.8vw, 1.28rem) !important;
  }

  .color-card-content {
    gap: 30px !important;
  }

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

  .of-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px 24px !important;
  }

  .of-step {
    width: 100% !important;
    max-width: none !important;
  }

  .of-arrow {
    display: none !important;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

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

@media (min-width: 641px) and (max-width: 900px) {
  .hero-content-wrapper {
    grid-template-columns: 1fr !important;
    max-width: 760px !important;
  }

  .hero-image-section {
    max-width: 390px !important;
  }

  .reasons-grid,
  .member-choice-grid {
    grid-template-columns: 1fr !important;
  }

  .case-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .reason-card {
    max-width: 560px !important;
    margin: 0 auto !important;
  }

  .color-card-content {
    flex-direction: column !important;
  }

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