/* =============================================================
   STERE RESPONSIVE LAYER
   Mobile/tablet corrections layered on top of pages that rely
   heavily on inline styles. `!important` is used deliberately —
   inline style specificity cannot be beaten otherwise, and this
   layer only takes effect below the desktop breakpoint.

   Pairs with layout.css (container widths) and motion.css.
   Breakpoints match layout.css:
        Mobile        <  768px
        Tablet     768–1199px
        Desktop     >= 1200px
   ============================================================= */

/* -------------------------------------------------------------
   Global safety: keep the page from scrolling sideways.
   Individual sections use `overflow:hidden` for their own blobs,
   but a stray full-viewport-width child at the root will still
   introduce horizontal scroll if we do not clip here.
   ------------------------------------------------------------- */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Media should never blow out its container. */
main img,
main svg,
main video,
main canvas {
  max-width: 100%;
  height: auto;
}

/* Code blocks: allow their own horizontal scroll rather than
   forcing the page wider. The inline overflow-x:auto is already
   there — this just makes sure they never widen their parent. */
pre {
  max-width: 100%;
}

/* Long unbroken tokens (URLs, IDs) should wrap rather than
   overflow their bubble. */
p, li, dd, blockquote {
  overflow-wrap: anywhere;
}

/* =============================================================
   TABLET & MOBILE  (< 1200px)
   ============================================================= */

@media (max-width: 1199px) {
  /* Hero: full-viewport-height sections use `padding:125px 0`
     inline. Ease that off before mobile. */
  main > section:first-child > .container,
  .hero-content {
    padding-top: 96px !important;
    padding-bottom: 88px !important;
  }
}

/* =============================================================
   MOBILE  (< 768px)
   ============================================================= */

@media (max-width: 767px) {

  /* -----------------------------------------------------------
     Hero shell — release the 100vh grip so short heroes don't
     leave the CTA hanging halfway down the page.
     ----------------------------------------------------------- */
  main > section:first-child {
    min-height: auto !important;
  }

  main > section:first-child > .container,
  .hero-content {
    padding-top: 108px !important;   /* nav + a little breathing room */
    padding-bottom: 64px !important;
  }

  /* Sticky nav a touch shorter on mobile so it steals less of the
     viewport when scrolled. */
  header[data-motion-nav] > div {
    height: 58px !important;
  }
  main > section:first-child {
    margin-top: -75px;
  }

  /* -----------------------------------------------------------
     Grids — most site grids use auto-fit/minmax and already
     collapse. The remainder are explicit 2-col grids that need a
     nudge to stack.
     ----------------------------------------------------------- */
  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Icon + badge + content rows (e.g. platform capability list)
     — the middle 46px column is decorative; drop it into a two-col
     layout so labels don't crush. */
  main [style*="grid-template-columns:auto 46px 1fr"] {
    grid-template-columns: auto 1fr !important;
    gap: 12px 16px !important;
  }
  main [style*="grid-template-columns:auto 46px 1fr"] > *:nth-child(2) {
    display: none !important;
  }

  /* -----------------------------------------------------------
     Card padding — several bands use fixed 26–44px which crowds
     content on a 360-wide phone. Give the card back a bit of
     inner room.
     ----------------------------------------------------------- */
  main [style*="padding:26px"] { padding: 20px !important; }
  main [style*="padding:28px"] { padding: 20px !important; }
  main [style*="padding:32px"] { padding: 22px !important; }
  main [style*="padding:44px"] { padding: 24px !important; }
  main [style*="padding:18px 20px"] { padding: 14px 16px !important; }
  main [style*="padding:20px 22px"] { padding: 14px 16px !important; }
  main [style*="padding:22px 28px 28px"] { padding: 18px 18px 20px !important; }

  /* -----------------------------------------------------------
     Section vertical rhythm — `padding:64px 0` and above eats a
     lot of a phone screen. Tighten anything above ~72px.
     ----------------------------------------------------------- */
  main section > .container[style*="padding:80px 0"] { padding: 56px 0 !important; }
  main section > .container[style*="padding:96px 0"] { padding: 64px 0 !important; }
  main section > .container[style*="padding:104px 0"] { padding: 64px 0 !important; }

  /* -----------------------------------------------------------
     Buttons — CTAs stacked at the top of a hero should span the
     column so the tap target is generous.
     ----------------------------------------------------------- */
  .hero-content a[href][style*="display:inline-flex"],
  main > section:first-child a[href][style*="padding:15px 26px"],
  main > section:first-child a[href][style*="padding:15px 24px"],
  main > section:first-child a[href][style*="padding:15px 28px"] {
    justify-content: center;
  }

  /* -----------------------------------------------------------
     Fixed display type that isn't already using clamp().
     ----------------------------------------------------------- */
  main [style*="font-size:32px"] { font-size: 26px !important; }
  main [style*="font-size:28px"] { font-size: 23px !important; }
  main [style*="font-size:23px"] { font-size: 20px !important; }
  main [style*="font-size:21px"] { font-size: 19px !important; }

  /* Big headings without clamp — scale relative to viewport.
     These match a handful of secondary headings. */
  main h1[style*="font-size:clamp(38px"],
  main h1[style*="font-size:clamp(36px"] {
    font-size: clamp(30px, 8vw, 40px) !important;
    letter-spacing: -0.02em !important;
  }

  /* -----------------------------------------------------------
     Nav — the mobile drawer is already handled by <sc-if>. Make
     sure the drawer sits above any hero blob.
     ----------------------------------------------------------- */
  header nav[aria-label="Mobile"] {
    position: relative;
    z-index: 61;
  }

  /* -----------------------------------------------------------
     Screenshots — many hero/feature screenshots sit in bordered
     frames and can extend past the viewport when set with fixed
     max-widths. Clamp the frame itself.
     ----------------------------------------------------------- */
  main img[src*="shot-"],
  main img[src*="client-portal"],
  main img[src*="agent-portal"],
  main img[src*="uw-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* -----------------------------------------------------------
     Flex rows with wide gaps — reduce so wrapped items regroup
     tightly instead of leaving big vertical gaps.
     ----------------------------------------------------------- */
  main [style*="gap:clamp(26px,4vw,48px)"] {
    gap: 22px !important;
  }

  /* -----------------------------------------------------------
     Hero decorative gradient blobs — scale down the ones anchored
     off-canvas so they don't disproportionately weight the top of
     the page on a small screen (and can't push overflow).
     ----------------------------------------------------------- */
  section [aria-hidden="true"][style*="width:48%"] {
    width: 80% !important;
    filter: blur(48px) !important;
  }
}

  /* -----------------------------------------------------------
     <doc-page> — a printable document component sized for
     letter/A4 paper. Its shadow DOM sets `min-width:max-content`
     which forces horizontal overflow on a phone. Let the outer
     host scroll horizontally instead of the whole page.
     ----------------------------------------------------------- */
  doc-page {
    display: block;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =============================================================
   SMALL MOBILE  (< 420px)
   Extra tightening for one-hand phones (iPhone SE, small Android).
   ============================================================= */

@media (max-width: 419px) {
  main > section:first-child > .container,
  .hero-content {
    padding-top: 96px !important;
    padding-bottom: 48px !important;
  }

  /* CTAs full-width when there is barely room for two side by side. */
  main > section:first-child a[href][style*="padding:15px 26px"],
  main > section:first-child a[href][style*="padding:15px 24px"],
  main > section:first-child a[href][style*="padding:15px 28px"] {
    width: 100%;
  }

  /* Trust-strip logos — shrink a hair so 5–6 fit before wrapping. */
  main > section:first-child span[role="img"] {
    transform: scale(0.9);
    transform-origin: left center;
  }
}