/* ======================================================================
   FOLDABLE / UNUSUAL-VIEWPORT ENHANCEMENT — isolated, removable module.
   Gating (at least one required per rule):
     a) `.foldable` root class (segments / posture / spanning detection,
        assets/foldable.js) — standard phones/tablets/desktops never match;
     b) viewport-segments media (progressive enhancement, no JS needed);
     c) impossible-for-standard ranges (no matrix device can match).
   Never touches: colors, branding, fonts, copy, SEO, backend, or the
   existing 760px / 480px / 400px breakpoints.
   ====================================================================== */

/* ---- L2a. Book-style open: touch ergonomics + tablet-like space ---------
   .foldable + min-width excludes cover displays and small phones. */
@media (min-width: 600px) {
  .foldable .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}
  .foldable .hero-cta{grid-template-columns:1fr 1fr}
  .foldable .pain-grid,
  .foldable .steps,
  .foldable .price-grid,
  .foldable .form-shell{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foldable .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foldable .why-grid .why{grid-column:auto}
}
.foldable h1{font-size:clamp(36px,7vw,58px)}
.foldable .hero .lead,
.foldable .sub{max-inline-size:60ch}
.foldable .hero-cta .btn{min-height:52px}

/* Navbar by effective space (foldables only): desktop links when they fit,
   hamburger otherwise. Threshold mirrors the existing 760px logic. */
@media (min-width: 760px) {
  .foldable .nav-links{display:flex}
  .foldable .nav-toggle,
  .foldable .nav-menu{display:none}
}

/* Chatbot + modal caps on foldables (input stays visible via visualViewport). */
.foldable #gs-chat-panel{width:min(430px,calc(100vw - 24px))}
.foldable .modal{width:min(540px,calc(100% - 24px));max-height:calc(100dvh - 40px)}
@media (max-height: 500px) {
  .foldable #gs-chat-panel{height:min(480px,86dvh)}
  .foldable .gs-disclaimer,
  .foldable .gs-foot{display:none}
}

/* ---- L4. Viewport Segments: hinge-aware progressive enhancement --------
   env() with fallback: unsupported browsers drop the declaration safely. */
@media (horizontal-viewport-segments: 2) {
  .foldable .hero-cta{max-inline-size:env(viewport-segment-width 0 0, 100vi)}
  .foldable .pain-grid,
  .foldable .steps,
  .foldable .price-grid{column-gap:max(12px,env(viewport-segment-left 1 0, 12px))}
}
@media (vertical-viewport-segments: 2) {
  .foldable .modal{max-height:env(viewport-segment-height 0 0, 88dvh)}
  .foldable #gs-chat-panel{max-height:env(viewport-segment-height 0 0, 72dvh)}
}

/* ---- L2b. Tiny-square fallback (FlexWindow-class stress) ----------------
   No standard phone is BOTH ≤380px wide AND ≤560px tall, so this can never
   alter phones (320–430px), tablets, or desktop. Priorities kept:
   logo, nav, title, primary CTA, phone/WhatsApp. Decorative only is hidden. */
@media (max-width: 380px) and (max-height: 560px) {
  .wrap{padding:0 16px}
  .hero-grid{gap:16px;padding-top:20px;padding-bottom:20px}
  .hero::before{display:none}
  h1{font-size:clamp(30px,12vw,40px)}
  .trust{grid-template-columns:1fr;gap:8px}
  .hero-cta{grid-template-columns:1fr}
  .pain-grid,
  .steps,
  .why-grid,
  .price-grid,
  .form-shell{grid-template-columns:1fr}
  #gs-chat-panel{width:calc(100vw - 16px);height:min(480px,88dvh)}
  .modal{width:calc(100% - 16px);max-height:calc(100dvh - 24px)}
  .nav-menu{max-height:calc(100dvh - 100px);overflow-y:auto}
}