/* membership-point-card.html: native tablet reflow. Desktop >= 1280px stays unchanged.
   2026-09-19: narrowed from 1400px so that common laptop widths (1280/1366px) get the
   real desktop header/nav and fluid content layout instead of the hamburger-menu
   tablet treatment. This is a pilot for this page only; other pages sharing the same
   sitewide 641-1400px compact-tablet breakpoint (order.html, the pvc-detail-responsive.css
   template pages, etc.) are intentionally left unchanged for now. */

/* 2026-09-19: this page reflows natively at every width from 641px up (no hard floor),
   so it must not be held to style.css's sitewide legacy fixed-design floor
   (html,body / .header-container min-width:1300px) — that floor exists only for
   older pages that rely on JS zoom-to-fit (js/desktop-scale-fit.js) instead of a real
   CSS reflow. Without this, viewports between 1280px and 1299px (just above this
   page's own 1279px tablet cutoff, but below the sitewide 1300px floor) got a stray
   20px horizontal scrollbar. */
@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 {
    padding-top: 68px !important;
  }

  body > header {
    display: block !important;
    visibility: visible !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 8px 0 !important;
    border-bottom: 0 !important;
  }

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

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

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

  html[data-adaptive-layout] body:not(.admin-page):not(.admin-layout) > 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;
  }

  html[data-adaptive-layout] body:not(.admin-page):not(.admin-layout) > header .mobile-menu-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    margin: 5px auto !important;
  }

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

  body > 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 > header .main-nav.active ul,
  body > header .main-nav.active .mobile-menu-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

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

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

  body > 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 > 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 > 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 > header .header-right > a.header-link,
  body > header #authSection,
  body > header .consult-btn,
  body > header .upload-btn {
    display: none !important;
  }

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

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

  .pvc-page,
  .pvc-page .container {
    min-width: 0 !important;
    width: 100% !important;
  }

  .pvc-page .container {
    max-width: 1180px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .card-type-nav {
    overflow: hidden !important;
  }

  .card-type-nav-inner {
    padding: 10px 18px !important;
  }

  .card-type-nav-scroll {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px 12px !important;
    overflow: visible !important;
  }

  .card-type-nav-link {
    min-width: 0 !important;
    width: 100% !important;
  }

  .card-type-nav-text,
  .card-type-nav-line {
    white-space: normal !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }

  .pvc-hero {
    padding-top: 34px !important;
  }

  .pvc-hero-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr) !important;
    gap: clamp(26px, 4vw, 52px) !important;
    align-items: center !important;
  }

  .pvc-hero-copy,
  .pvc-hero-visual,
  .pvc-hero-image-frame {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .pvc-hero-copy .pvc-product-title-compact {
    font-size: clamp(1.55rem, 2.8vw, 2.1rem) !important;
    line-height: 1.35 !important;
  }

  .pvc-hero-copy .pvc-lead,
  .pvc-bullets li,
  .pvc-bullets li span {
    font-size: clamp(0.86rem, 1.25vw, 1rem) !important;
  }

  .pvc-page .pvc-hero-actions.pvc-home-button-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .pvc-page .pvc-hero-actions.pvc-home-button-actions .btn-blue,
  .pvc-page .pvc-hero-actions.pvc-home-button-actions .btn-outline {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .pvc-feature-band {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .pvc-feature-item {
    min-width: 0 !important;
    padding: 16px 12px !important;
  }

  .pvc-feature-item strong,
  .pvc-feature-item span {
    white-space: normal !important;
  }

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

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

  .member-order-journey-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  .member-order-journey-step {
    width: 100% !important;
    min-width: 0 !important;
  }

  .member-order-journey-step:not(:last-child)::after {
    display: none !important;
  }

  .pricing-table-wrapper,
  .table-responsive,
  .option-price-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  footer .footer-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  footer .footer-brand {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 36px !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  footer .footer-logo {
    margin-left: 0 !important;
    transform: none !important;
  }

  footer .footer-logo img {
    margin-inline: auto !important;
  }

  footer .business-calendar {
    width: min(100%, 300px) !important;
    min-width: 0 !important;
    max-width: 300px !important;
    margin: 18px auto 14px !important;
    transform: none !important;
  }

  footer .footer-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    width: 100% !important;
    gap: 34px !important;
    padding-right: 0 !important;
  }

  footer .footer-col {
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }

  footer .footer-col .footer-main-link {
    width: 100% !important;
    padding-bottom: 9px !important;
    border-bottom: 1px solid #dce5f2 !important;
    color: #234f9a !important;
    font-size: 1rem !important;
  }

  footer .footer-links .footer-col:last-child {
    grid-column: 1 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding-top: 28px !important;
    border-top: 1px solid #e5eaf2 !important;
  }

  footer .footer-bottom {
    flex-direction: column !important;
    gap: 20px !important;
    text-align: center !important;
  }

  footer .footer-legal {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px 28px !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .pvc-specs-grid > .pvc-spec-block:only-child .pvc-spec-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .pvc-spec-kpi {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 82px !important;
    padding: 14px !important;
  }

  .pvc-spec-kpi > div,
  .pvc-spec-kpi small,
  .pvc-spec-kpi-value {
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  .member-thickness-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .member-thickness-card {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 18px !important;
    align-items: center !important;
  }

  .member-thickness-copy,
  .member-thickness-copy h4,
  .member-thickness-copy p {
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  footer .footer-col {
    max-width: 360px !important;
  }

  footer .footer-links {
    gap: 30px !important;
  }

  footer .footer-links .footer-col:last-child {
    padding-top: 22px !important;
  }

  footer .footer-legal {
    gap: 12px 18px !important;
  }

  .card-type-nav-scroll {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .pvc-hero-layout {
    grid-template-columns: 1fr !important;
  }

  .pvc-hero-visual {
    max-width: 500px !important;
    margin: 0 auto !important;
  }

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

  .design-support-section .pvc-specs-grid,
  .member-specs-section .pvc-specs-grid,
  .design-support-section .compact-design-support,
  .member-specs-section .member-order-journey {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .design-support-section .compact-design-support {
    padding: 24px !important;
  }

  .compact-design-head,
  .compact-design-head h2,
  .compact-design-head p,
  .compact-design-eyebrow {
    width: auto !important;
    max-width: none !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  .compact-design-action {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 20px !important;
    text-align: left !important;
  }

  .compact-design-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .compact-design-action-choice,
  .compact-design-action-buttons .btn-blue,
  .compact-design-action-buttons .compact-design-upload-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .member-specs-section .member-order-journey {
    padding: 28px 24px 22px !important;
  }

  .member-order-journey-head {
    justify-items: start !important;
    margin-bottom: 18px !important;
    text-align: left !important;
  }

  .member-order-journey-steps {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .member-order-journey-step {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #e5eaf2 !important;
  }

  .member-order-journey-step:last-child {
    border-bottom: 0 !important;
  }

  .member-order-journey-node {
    width: 74px !important;
    min-height: 76px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .member-order-journey-number {
    font-size: 1.35rem !important;
  }

  .member-order-journey-icon {
    width: 50px !important;
    height: 42px !important;
    margin-top: 5px !important;
    border-radius: 12px !important;
  }

  .member-order-journey-copy {
    margin-top: 0 !important;
  }
}

/* 2026-09-19: Apple iphone-duo style fluid-scaling pilot, desktop range only
   (>=1280px; the 641-1279px tablet range above is untouched). Content width
   scales proportionally with the viewport (matching Apple's measured ~86.5%
   ratio there) instead of "full-width box minus fixed-px padding", so the
   page feels designed at every width instead of just at the handful of
   values that were explicitly built for. Caps at 1280px content width,
   matching this design's existing content width at its current 1480px box
   cap, so nothing changes visually at >=1480px viewports. Also brings
   .card-type-nav-inner into the same formula, fixing a pre-existing ~60-70px
   misalignment between the usage-nav icon row and the section content below
   it (the nav row used the page's generic 24px .container padding, while
   .pvc-hero/.pvc-section used a fixed 100px padding from style.css). Placed
   after style.css in the page and at equal selector specificity, so the
   later rule here wins for the properties it sets. */
@media (min-width: 1280px) {
  html body .pvc-hero > .container,
  html body .pvc-section > .container,
  html body .pvc-faq-section > .container,
  html body .card-type-nav-inner {
    width: min(86.49%, 1280px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}