/**
 * Mobile adaptation for the Manus-ported pages.
 *
 * Everything here lives inside `max-width` media queries, so the desktop
 * rendering is untouched by construction — no rule can apply above 860px.
 *
 * Why `!important` and attribute selectors: the partials are captured from the
 * Manus React build, so nearly all styling is *inline* on the elements
 * (417 `display: flex`, 57 grids, dozens of `clamp()` headings). Inline styles
 * beat stylesheet rules, and we cannot restructure the markup without losing
 * the design, so we override by matching the inline declaration itself.
 *
 * The two structural culprits on small screens:
 *   1. `grid-template-columns: 2fr 1fr 1fr 1fr 1fr` (and friends). `fr` tracks
 *      have an automatic min-content floor, so they refuse to shrink and the
 *      children overflow the container. The footer blew out to 710px on a
 *      375px viewport this way.
 *   2. `clamp(52px, 5.8vw, 90px)` headings — the *minimum* is the problem, not
 *      the maximum. We lower the floor and keep the desktop ceiling.
 */

/**
 * Nav switch. This lived in an inline <style> inside the *partials*, so only
 * the 14 pages that happen to embed it ever hid the desktop nav — the 9 article
 * pages and 8 others overflowed AND had no working hamburger, because the
 * button carries an inline `display:none` that only that rule lifted.
 * Kept at 900px to match the original breakpoint exactly.
 */
@media (max-width: 900px) {
  .rox-manus .rox-desktop-nav { display: none !important; }
  .rox-manus .rox-mobile-btn  { display: block !important; }
}

@media (max-width: 860px) {

  /* --- Navigation -------------------------------------------------------
     The desktop mega-menu is already hidden at 900px. The Login / Request a
     Demo cluster still overflowed (logo 180 + buttons 222 > 375), and both
     links already exist in the mobile drawer, so hide the cluster and give the
     hamburger back the right alignment the hidden flex child was providing. */
  .rox-manus .rox-nav-cta { display: none !important; }
  .rox-manus .rox-mobile-btn { margin-left: auto !important; }

  /* --- Headings: lower the clamp floor, keep the desktop ceiling --------- */
  .rox-manus [style*="font-size: clamp(52px"] { font-size: clamp(30px, 8vw, 52px) !important; }
  .rox-manus [style*="font-size: clamp(40px"] { font-size: clamp(27px, 7.5vw, 40px) !important; }
  .rox-manus [style*="font-size: clamp(36px"] { font-size: clamp(25px, 7vw, 36px) !important; }
  .rox-manus [style*="font-size: clamp(32px"] { font-size: clamp(23px, 6.5vw, 32px) !important; }
  .rox-manus [style*="font-size: clamp(28px"] { font-size: clamp(22px, 6vw, 28px) !important; }

  /* Fixed sizes with no clamp to fall back on. */
  .rox-manus [style*="font-size: 56px"] { font-size: 30px !important; line-height: 1.15 !important; }
  .rox-manus [style*="font-size: 48px"] { font-size: 27px !important; line-height: 1.18 !important; }
  .rox-manus [style*="font-size: 38px"] { font-size: 24px !important; line-height: 1.25 !important; }
  .rox-manus [style*="font-size: 36px"] { font-size: 24px !important; line-height: 1.25 !important; }
  .rox-manus [style*="font-size: 32px"] { font-size: 22px !important; line-height: 1.3  !important; }

  /* --- Wrapping --------------------------------------------------------- */
  /* The hero headline is split into `white-space: nowrap` spans so the rotating
     word never breaks mid-phrase. On a phone that guarantees clipping. */
  .rox-manus [style*="white-space: nowrap"] { white-space: normal !important; }

  /* Hero copy is capped at 67% for the desktop composition. */
  .rox-manus [style*="max-width: 67%"] { max-width: 100% !important; }

  /* --- Layout ----------------------------------------------------------- */
  .rox-manus [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Inline flex rows are `nowrap` by default; let them reflow rather than
     overflow. Not !important, so the rules above and any deliberate
     nowrap utility can still win. */
  .rox-manus [style*="display: flex"] { flex-wrap: wrap; }

  /* The hero reserves 88vh for a desktop composition that no longer applies
     once the headline wraps to three lines. */
  .rox-manus section[style*="min-height: 88vh"] { min-height: 0 !important; }
  .rox-manus section[style*="min-height: 88vh"] .container {
    padding-top: 36px !important;
    padding-bottom: 48px !important;
  }

  /* Decorative blobs are absolutely positioned at up to 600px with negative
     offsets. Their sections already clip, but belt-and-braces so a new one
     cannot reintroduce a horizontal scrollbar. */
  .rox-manus section { overflow-x: clip; }
}

/* Narrow phones (iPhone SE and similar). */
@media (max-width: 400px) {
  .rox-manus [style*="font-size: clamp(52px"] { font-size: 27px !important; }
  .rox-manus .container { padding-left: 16px !important; padding-right: 16px !important; }
}