/**
 * 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 ----------------------------------------------------------- */
  /* Grids collapse to a single column by default. */
  .rox-manus [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* …except the ones the team asked to keep paired. Matched on their inline
     track definition, which is unique per component. */

  /* Footer — two columns rather than five stacked. */
  .rox-manus footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    /* minmax(0,…) not 1fr: a bare 1fr floors at min-content, which gave a
       lopsided 220px/103px split off the first column's logo blurb. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 22px 20px !important;
  }
  .rox-manus footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] > * { min-width: 0; }

  /* Leadership "Meet the Team" — 4-up becomes 2-up. */
  .rox-manus [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Carrier "Benefits" tiles — 3-up becomes 2-up so the section fits one view. */
  .rox-manus [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Contact form field pairs stay side by side. */
  .rox-manus form [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Flex rows: do NOT wrap.
     An earlier blanket `flex-wrap: wrap` here is what pushed the check icons
     onto their own line above their text (and split the RoxVault hero
     buttons). Leaving these rows `nowrap` keeps the icon beside its text and
     lets the text wrap inside its own box, which is the intended rendering. */
  .rox-manus [style*="display: flex"][style*="flex-wrap: wrap"] > * { min-width: 0; }

  /* Both CTA-row rules below are scoped to rows whose children are only links
     or buttons. The bare inline signature (flex + gap + wrap) also matches the
     News byline row and the blog meta row, which were being centred, padded,
     forced to 14px and nowrap. */
  /* RoxVault hero CTA pair carries `flex-wrap: wrap` inline, which stacked
     "Request a Demo" under the primary CTA. Keep them on one line. */
  .rox-manus [style*="display: flex"][style*="gap: 14px"][style*="flex-wrap: wrap"]:not(:has(> :not(a, button))) {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100%;
  }
  /* `flex: 1 1 0` + `min-width: 0` is load-bearing: without a zero floor the
     two nowrap buttons contribute a 395px min-content width and inflate the
     whole hero column past the viewport. */
  .rox-manus [style*="display: flex"][style*="gap: 14px"][style*="flex-wrap: wrap"]:not(:has(> :not(a, button))) > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap;
  }

  /* 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;
  }

  /* --- Oversized graphics ------------------------------------------------
     The isometric vault illustration renders 126x422 on a phone — a tall thin
     sliver of its desktop self. Per the review call: kept but scaled on the
     RoxVault page where it anchors the hero, removed elsewhere. */

  /* --- Home hero: picture first ------------------------------------------
     The RoxVault block leads the page now. Stacked on a phone it ran
     copy-then-screenshot, burying the record under five bullets. The right
     column becomes `display: contents` so its two children join the stack,
     and only the screenshot jumps the queue: record, copy, supporting card. */
  .rox-manus #roxvault [style*="grid-template-columns: 1fr 1fr"] { display: flex !important; flex-direction: column; }
  .rox-manus #roxvault [style*="grid-template-columns: 1fr 1fr"] > div:last-child { display: contents; }
  .rox-manus #roxvault .rox-record { order: -1; margin-bottom: 28px; }

  /* Full-platform diagram and the carrier tablet render as unreadable
     thumbnails at this width — removed rather than shrunk further. */
  .rox-manus img[alt*="RoxStart AI Platform"],
  .rox-manus img[alt^="Tablet showing"] { display: none !important; }
  .rox-manus div:has(> img[alt*="RoxStart AI Platform"]),
  .rox-manus div:has(> img[alt^="Tablet showing"]) { display: none !important; }

  /* --- Broker / Carrier Solutions tabs -----------------------------------
     Two sibling 2-column grids: a tab strip (`margin-bottom: 0px`) and a panel
     strip (`border-radius: 0 0 12px 12px`). Pinning both to two columns lined
     the labels up with their panels but left each panel 163px wide — two or
     three words a line. Stacking them naively would re-break the pairing
     (label, label, panel, panel), so both grids become `display: contents`
     and their children are interleaved with `order` on the shared parent:
     label 1, panel 1, label 2, panel 2. */
  .rox-manus div:has(> [style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"][style*="margin-bottom: 0px"]) {
    display: flex !important;
    flex-direction: column !important;
  }
  .rox-manus div:has(> [style*="gap: 2px"][style*="margin-bottom: 0px"]) > h2 { order: 0; }

  .rox-manus [style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"][style*="margin-bottom: 0px"],
  .rox-manus [style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"][style*="border-radius: 0px 0px 12px 12px"] {
    display: contents !important;
  }
  .rox-manus [style*="gap: 2px"][style*="margin-bottom: 0px"] > *:nth-child(1) { order: 1; }
  .rox-manus [style*="gap: 2px"][style*="border-radius: 0px 0px 12px 12px"] > *:nth-child(1) { order: 2; }
  .rox-manus [style*="gap: 2px"][style*="margin-bottom: 0px"] > *:nth-child(2) { order: 3; }
  .rox-manus [style*="gap: 2px"][style*="border-radius: 0px 0px 12px 12px"] > *:nth-child(2) { order: 4; }

  /* The panel wrapper's rounding/clipping is lost with display:contents, so
     put it back on the panels themselves. */
  .rox-manus [style*="gap: 2px"][style*="border-radius: 0px 0px 12px 12px"] > * {
    border-radius: 12px;
    overflow: hidden;
  }
  .rox-manus [style*="gap: 2px"][style*="margin-bottom: 0px"] > * {
    border-radius: 12px 12px 0 0;
  }

  /* --- Why Choose RoxStart -----------------------------------------------
     Each card's description is `max-height: 0; opacity: 0` and revealed on
     hover. Touch devices have no hover, so that copy was unreachable on a
     phone. Show it and lay the cards out as a stacked list. */
  /* The section ran 1701px ("goes on forever" on the call) and the last two
     tiles rendered 229px wide against 328px for the first three. Uniform
     full-width rows, compact, with the copy on tap (JS) rather than on hover —
     hover does not exist on touch, so it was unreachable. */
  .rox-manus div:has(> [style*="min-height: 180px"][style*="cursor: default"]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .rox-manus [style*="min-height: 180px"][style*="cursor: default"] {
    min-height: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 14px 40px 14px 16px !important;
    text-align: left !important;
    align-items: center !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px;
    position: relative;
  }
  .rox-manus [style*="min-height: 180px"][style*="cursor: default"] [style*="width: 80px"] {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }
  .rox-manus [style*="min-height: 180px"][style*="cursor: default"] h3 {
    font-size: 16px !important;
    margin: 0 !important;
  }

  /* The second Why-Choose row is capped at `calc(66.66% + ...)` so two tiles
     centre under three on desktop. On a phone that just renders the last two
     narrower than the first three — the exact mismatch raised on the call. */
  .rox-manus [style*="max-width: calc(66.66%"] {
    max-width: 100% !important;
  }

  /* --- Tap-to-expand cards ------------------------------------------------
     JS binds these unconditionally; the breakpoint lives here, so above 860px
     aria-expanded is ignored and the original hover behaviour is untouched. */
  .rox-manus .rox-acc { cursor: pointer; position: relative; }
  .rox-manus .rox-acc .rox-acc-caret { display: block; }
  .rox-manus .rox-acc[aria-expanded="false"] .rox-acc-body { display: none !important; }
  .rox-manus .rox-acc[aria-expanded="true"] .rox-acc-body {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* --- Blog: "Built for the Post-Montgomery World" ------------------------
     Check rows stacked their glyph above the text, and the CTA pair (gap:16px
     variant) stacked as well. */
  .rox-manus [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12px"] > * {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0;
  }
  /* `flex: 1 1 0` gave this row no intrinsic width, so inside its centred
     parent it shrink-wrapped to 214px and clipped the primary CTA label (text
     139px in a 101px button). Full-width row; the buttons share it when they
     fit and stack when they don't. */
  .rox-manus [style*="display: flex"][style*="gap: 16px"][style*="flex-wrap: wrap"]:not(:has(> :not(a, button))) {
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100%;
    align-self: stretch;
  }
  .rox-manus [style*="display: flex"][style*="gap: 16px"][style*="flex-wrap: wrap"]:not(:has(> :not(a, button))) > * {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 14px !important;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* --- Blog: "What Changed / What Didn't" ---------------------------------
     A two-column comparison the blanket rule had stacked; the call asked for
     the check column and the x column to stay side by side. */
  .rox-manus .rox-article-full [style*="grid-template-columns: 1fr 1fr"][style*="gap: 24px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .rox-manus .rox-article-full [style*="grid-template-columns: 1fr 1fr"][style*="gap: 24px"] > * {
    min-width: 0;
    padding: 16px 14px !important;
    font-size: 14px !important;
  }

  /* --- Platform: "Our Design Philosophy" carousel -------------------------
     `object-fit: contain` in a fixed 420px box letterboxes the art into a
     band of empty white on a phone. Crop to fill instead. */
  .rox-manus [style*="object-fit: contain"][style*="height: 420px"] {
    height: 210px !important;
    object-fit: cover !important;
    padding: 0 !important;
  }

  /* --- Events: denser cards ----------------------------------------------
     40px/44px of padding is a quarter of the screen before any content. */
  .rox-manus [style*="padding: 40px 44px"] { padding: 20px 18px !important; }

  /* Numbered step lists (01-04 "How it works" / "What Brokers Must Do Now")
     carry desktop-sized gaps; tighten so a sequence reads in one view. */
  .rox-manus [style*="flex-direction: column"][style*="gap: 20px"] { gap: 12px !important; }
  .rox-manus [style*="flex-direction: column"][style*="gap: 24px"] { gap: 14px !important; }

  /* The Solution cards need a positioning context for the accordion caret,
     and room so the title does not run under it. */
  .rox-manus [style*="border-radius: 10px"][style*="padding: 22px 26px"][role="button"] {
    position: relative;
    padding-right: 40px !important;
  }

  /* --- Footer: brand row, then paired link columns -----------------------
     Company sat beside the logo. The brand cell now spans both tracks, so the
     link groups pair up underneath: Company | Solutions, Resources | Connect. */
  .rox-manus footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] > :first-child {
    grid-column: 1 / -1;
  }
  /* Legal links were a single non-wrapping row; "Do Not Sell or Share…" ran
     off the right edge. */
  .rox-manus footer [style*="display: flex"][style*="gap: 24px"] {
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
  }

  /* --- Homepage Solutions callouts ----------------------------------------
     With both panels visible neither tab is "inactive", but the Carrier tab
     kept its pale inactive tint (rgb 178,240,248). */
  .rox-manus [style*="gap: 2px"][style*="margin-bottom: 0px"] > * > span {
    background-color: rgb(24, 209, 237) !important;
  }
  /* The Carrier label sat directly on the Broker panel (0px). */
  .rox-manus [style*="gap: 2px"][style*="margin-bottom: 0px"] > *:nth-child(2) {
    margin-top: 28px;
  }
  /* Trim the white band below the Carrier panel. */
  .rox-manus section:has([style*="gap: 2px"][style*="margin-bottom: 0px"]) {
    padding-bottom: 12px !important;
  }

  /* --- Blog "Built for the Post-Montgomery World" card --------------------
     48px padding on all sides left a 214px content column, so the two CTAs
     either clipped or stacked as narrow pills. Tighter padding gives them the
     card's width; they stack full-width. */
  .rox-manus [style*="border: 1px solid rgba(24, 209, 237, 0.25)"][style*="padding: 48px;"] {
    padding: 24px 20px !important;
  }
  .rox-manus [style*="padding: 48px;"] [style*="gap: 16px"][style*="flex-wrap: wrap"] > * {
    min-height: 48px;
  }

  /* --- "Stay Ahead of the Freight Revolution" card ------------------------
     56px side padding left the form a 200px column and a 74px email field. */
  .rox-manus [style*="padding: 48px 56px"] { padding: 28px 20px !important; }
  .rox-manus [style*="display: flex"][style*="gap: 10px"]:has(> input[type="email"]) {
    flex-wrap: wrap !important;
  }
  .rox-manus [style*="display: flex"][style*="gap: 10px"]:has(> input[type="email"]) > * {
    flex: 1 1 100% !important;
  }

  /* --- News articles -------------------------------------------------------
     "On this page" is a sticky sidebar. Once the 220px|1fr grid stacks, sticky
     lets it ride over the article body — it overlapped the Key Takeaway box. */
  .rox-manus [style*="position: sticky"][style*="top: 100px"] {
    position: static !important;
  }
  /* Author row: avatar, name/title and date were squeezed into three ~97px
     columns, so the title under Katie's name wrapped word by word. Avatar
     fixed, name takes the row, date drops beneath the name. */
  .rox-manus [style*="display: flex"][style*="gap: 16px"][style*="padding-bottom: 32px"][style*="border-bottom"] {
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
  }
  .rox-manus [style*="display: flex"][style*="gap: 16px"][style*="padding-bottom: 32px"][style*="border-bottom"] > :nth-child(1) {
    flex: 0 0 44px !important;
    width: 44px !important;
  }
  .rox-manus [style*="display: flex"][style*="gap: 16px"][style*="padding-bottom: 32px"][style*="border-bottom"] > :nth-child(2) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .rox-manus [style*="display: flex"][style*="gap: 16px"][style*="padding-bottom: 32px"][style*="border-bottom"] > :nth-child(3) {
    flex: 1 1 100% !important;
    padding-left: 58px;
  }
  /* Lead images: a fixed 480px crop is taller than it is wide on a phone. */
  .rox-manus img[style*="height: 480px"][style*="object-fit: cover"] { height: 220px !important; }
  .rox-manus [style*="max-height: 480px"] { max-height: 220px !important; }

  /* --- Footer logo --------------------------------------------------------
     The mark is `max-width: 220px` but the two-column footer gives it a ~161px
     track, so it overflowed into the next column and sat on top of the
     Company links. */
  .rox-manus footer img[style*="max-width: 220px"],
  .rox-manus footer img {
    max-width: 100% !important;
    height: auto;
  }

  /* --- Bullet rows -------------------------------------------------------
     The marker is a 6px dot in a flex row with `align-items: center`. Against
     a label that wraps to two or three lines it centres on the whole block and
     lands ~20px below the first line, which reads as misaligned. Top-align it
     and drop it onto the first line's optical centre. */
  .rox-manus [style*="display: flex"][style*="align-items: center"]:has(> [style*="width: 6px"][style*="border-radius: 50%"]) {
    align-items: flex-start !important;
  }
  .rox-manus [style*="display: flex"] > [style*="width: 6px"][style*="border-radius: 50%"] {
    margin-top: 8px;
    flex: 0 0 auto;
  }

  /* --- About: YouTube embed ----------------------------------------------
     The 16:9 wrapper carries no bottom margin, so the following copy sits hard
     against the video. */
  .rox-manus [style*="padding-top: 56.25%"] { margin-bottom: 22px !important; }

  /* --- Form controls -----------------------------------------------------
     Inputs carry a ~180px intrinsic width and, as flex items, default to
     `min-width: auto` so they refuse to shrink below it. That is what pushed
     the /news/ newsletter row to 396px on a 375px screen. */
  .rox-manus input:not([type="checkbox"]):not([type="radio"]),
  .rox-manus textarea,
  .rox-manus select {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }
  .rox-manus [style*="display: flex"] > input,
  .rox-manus [style*="display: flex"] > textarea,
  .rox-manus [style*="display: flex"] > select { flex: 1 1 0; }

  /* --- Section rhythm ---------------------------------------------------
     The composition uses 64-120px of vertical section padding, which reads as
     huge dead bands on a phone (120px above the breadcrumb on every landing
     page). Scaled to roughly a third, proportions preserved. */
  .rox-manus [style*="padding-top: 120px"]    { padding-top: 44px !important; }
  .rox-manus [style*="padding-bottom: 120px"] { padding-bottom: 44px !important; }
  .rox-manus [style*="padding-top: 100px"]    { padding-top: 40px !important; }
  .rox-manus [style*="padding-bottom: 100px"] { padding-bottom: 40px !important; }
  .rox-manus [style*="padding-top: 96px"]     { padding-top: 38px !important; }
  .rox-manus [style*="padding-bottom: 96px"]  { padding-bottom: 38px !important; }
  .rox-manus [style*="padding-top: 80px"]     { padding-top: 36px !important; }
  .rox-manus [style*="padding-bottom: 80px"]  { padding-bottom: 36px !important; }
  .rox-manus [style*="padding-top: 72px"]     { padding-top: 32px !important; }
  .rox-manus [style*="padding-bottom: 72px"]  { padding-bottom: 32px !important; }
  .rox-manus [style*="padding-top: 64px"]     { padding-top: 30px !important; }
  .rox-manus [style*="padding-bottom: 64px"]  { padding-bottom: 30px !important; }
  .rox-manus [style*="padding: 64px 0px"]     { padding: 30px 0 !important; }

  /* --- FAQ ---------------------------------------------------------------
     The +/- indicator sat immediately after the question text, so it landed in
     a different place on every row. Push it to the far right and stop it
     shrinking. */
  .rox-manus [data-rox-faq] button,
  .rox-manus [data-faq] button,
  .rox-manus button[aria-expanded] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    text-align: left !important;
    width: 100% !important;
  }
  .rox-manus button[aria-expanded] > :last-child { margin-left: auto; flex: 0 0 auto; }

  /* Decorative blobs are absolutely positioned at up to 600px with negative
     offsets. Hide them rather than clipping their section: `overflow-x: clip`
     on the section silently swallowed a genuine 36px overflow here and made
     every automated check report a clean page. */
  .rox-manus section > [style*="position: absolute"][style*="border-radius: 50%"] {
    display: none !important;
  }
}

/* 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; }
}