/* Vista Smile Studio — shared mobile/tablet overrides.
   The standalone design pages use inline styles, so these rules need
   !important to win. Loaded from every *.dc.html page.
   Note: some inline styles are re-serialised by the runtime with spaces after
   the colon ("flex: none"), so every attribute selector covers both forms. */

html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }

@media (max-width: 1024px) {
  /* Collapse wide multi-column grids */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Keep compact stat/feature grids two-up so they don't become a long ribbon */
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(2,1fr)"],
  [style*="repeat(2, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Horizontal section gutters */
  [style*="px 56px"],
  [style*="px 64px"],
  [style*="px 72px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Tame very large inner padding and gaps */
  [style*="padding:56px"], [style*="padding: 56px"],
  [style*="padding:48px"], [style*="padding: 48px"],
  [style*="padding:40px"], [style*="padding: 40px"] {
    padding: 24px !important;
  }
  [style*="gap:64px"], [style*="gap: 64px"],
  [style*="gap:56px"], [style*="gap: 56px"],
  [style*="gap:48px"], [style*="gap: 48px"] {
    gap: 28px !important;
  }

  /* Rows should wrap instead of overflowing */
  [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]),
  [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) {
    flex-wrap: wrap !important;
  }

  /* Grid and flex children must be allowed to shrink inside their track */
  [style*="display:grid"] > *, [style*="display: grid"] > *,
  [style*="display:flex"] > *, [style*="display: flex"] > * {
    min-width: 0 !important;
  }

  /* Items locked to their intrinsic width on desktop */
  [style*="flex:none"], [style*="flex: none"],
  [style*="flex:0 0 auto"], [style*="flex: 0 0 auto"] {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* nowrap on wrappers pushes rows past the viewport; keep it only on
     phone numbers and other short atomic links */
  div[style*="white-space:nowrap"], div[style*="white-space: nowrap"],
  span[style*="white-space:nowrap"], span[style*="white-space: nowrap"],
  p[style*="white-space:nowrap"], p[style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* Long words / URLs shouldn't punch through cards */
  body { overflow-wrap: break-word; }

  /* Order swaps designed for two-column desktop layouts */
  [style*="order:2"], [style*="order: 2"] { order: 0 !important; }
  [style*="order:1"], [style*="order: 1"] { order: 0 !important; }

  /* Sticky desktop sidebars shouldn't pin on small screens */
  [style*="position:sticky"]:not([style*="z-index:50"]),
  [style*="position: sticky"]:not([style*="z-index: 50"]) {
    position: static !important;
  }
}

@media (max-width: 820px) {
  h1[style] {
    font-size: clamp(28px, 7.6vw, 40px) !important;
    line-height: 1.12 !important;
  }
  h2[style] {
    font-size: clamp(23px, 6vw, 30px) !important;
    line-height: 1.2 !important;
  }
  h3[style] { font-size: clamp(18px, 4.8vw, 22px) !important; }

  /* Long-form / lead paragraphs */
  p[style*="font-size:18px"], p[style*="font-size: 18px"],
  p[style*="font-size:19px"], p[style*="font-size: 19px"],
  p[style*="font-size:20px"], p[style*="font-size: 20px"] {
    font-size: 16px !important;
  }

  /* Vertical rhythm */
  section[style] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Any pill/CTA link or button goes full width so nothing hangs out of its card */
  a[style*="border-radius"][style*="padding:14px"], a[style*="border-radius"][style*="padding: 14px"],
  a[style*="border-radius"][style*="padding:16px"], a[style*="border-radius"][style*="padding: 16px"],
  a[style*="border-radius"][style*="padding:18px"], a[style*="border-radius"][style*="padding: 18px"],
  a[style*="border-radius"][style*="padding:20px"], a[style*="border-radius"][style*="padding: 20px"],
  button[style*="border-radius"][style*="padding:14px"], button[style*="border-radius"][style*="padding: 14px"],
  button[style*="border-radius"][style*="padding:16px"], button[style*="border-radius"][style*="padding: 16px"],
  button[style*="border-radius"][style*="padding:18px"], button[style*="border-radius"][style*="padding: 18px"] {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Stacked CTA rows keep a comfortable vertical gap */
  [style*="display:flex"][style*="gap:12px"], [style*="display: flex"][style*="gap: 12px"],
  [style*="display:flex"][style*="gap:14px"], [style*="display: flex"][style*="gap: 14px"],
  [style*="display:flex"][style*="gap:16px"], [style*="display: flex"][style*="gap: 16px"] {
    row-gap: 12px !important;
  }

  /* Images sized with height:100% for desktop collages need a real ratio */
  img[style*="height:100%"], img[style*="height: 100%"] {
    height: auto !important;
    aspect-ratio: 16 / 10;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Media collages become a simple single-column stack */
  [style*="grid-template-rows"] { grid-template-rows: auto !important; }

  /* Wide tables scroll rather than break the layout */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; }
}

@media (max-width: 560px) {
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="font-size:40px"], [style*="font-size: 40px"],
  [style*="font-size:44px"], [style*="font-size: 44px"],
  [style*="font-size:52px"], [style*="font-size: 52px"] {
    letter-spacing: -0.02em !important;
  }
}

/* Comparison tables built as fixed-width grids: keep the columns side by side
   inside their own horizontal scroller instead of collapsing to one column. */
@media (max-width: 1024px) {
  [style*="min-width:640px"][style*="grid-template-columns"],
  [style*="min-width: 640px"][style*="grid-template-columns"] {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(110px, 1fr) !important;
  }
  [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
}

/* Small fixed-size badges and icons keep their size and stay on the same line
   as the label they annotate, so tick lists do not break into two rows. */
@media (max-width: 1024px) {
  :is([style*="width:8px"], [style*="width: 8px"], [style*="width:10px"], [style*="width: 10px"], [style*="width:12px"], [style*="width: 12px"], [style*="width:14px"], [style*="width: 14px"], [style*="width:16px"], [style*="width: 16px"], [style*="width:18px"], [style*="width: 18px"], [style*="width:20px"], [style*="width: 20px"], [style*="width:22px"], [style*="width: 22px"], [style*="width:24px"], [style*="width: 24px"], [style*="width:26px"], [style*="width: 26px"], [style*="width:28px"], [style*="width: 28px"], [style*="width:32px"], [style*="width: 32px"], [style*="width:36px"], [style*="width: 36px"], [style*="width:40px"], [style*="width: 40px"], [style*="width:44px"], [style*="width: 44px"], [style*="width:48px"], [style*="width: 48px"], [style*="width:56px"], [style*="width: 56px"]) {
    flex: 0 0 auto !important;
  }

  [style*="display:flex"]:has(> :is([style*="width:8px"], [style*="width: 8px"], [style*="width:10px"], [style*="width: 10px"], [style*="width:12px"], [style*="width: 12px"], [style*="width:14px"], [style*="width: 14px"], [style*="width:16px"], [style*="width: 16px"], [style*="width:18px"], [style*="width: 18px"], [style*="width:20px"], [style*="width: 20px"], [style*="width:22px"], [style*="width: 22px"], [style*="width:24px"], [style*="width: 24px"], [style*="width:26px"], [style*="width: 26px"], [style*="width:28px"], [style*="width: 28px"], [style*="width:32px"], [style*="width: 32px"], [style*="width:36px"], [style*="width: 36px"], [style*="width:40px"], [style*="width: 40px"], [style*="width:44px"], [style*="width: 44px"], [style*="width:48px"], [style*="width: 48px"], [style*="width:56px"], [style*="width: 56px"])),
  [style*="display: flex"]:has(> :is([style*="width:8px"], [style*="width: 8px"], [style*="width:10px"], [style*="width: 10px"], [style*="width:12px"], [style*="width: 12px"], [style*="width:14px"], [style*="width: 14px"], [style*="width:16px"], [style*="width: 16px"], [style*="width:18px"], [style*="width: 18px"], [style*="width:20px"], [style*="width: 20px"], [style*="width:22px"], [style*="width: 22px"], [style*="width:24px"], [style*="width: 24px"], [style*="width:26px"], [style*="width: 26px"], [style*="width:28px"], [style*="width: 28px"], [style*="width:32px"], [style*="width: 32px"], [style*="width:36px"], [style*="width: 36px"], [style*="width:40px"], [style*="width: 40px"], [style*="width:44px"], [style*="width: 44px"], [style*="width:48px"], [style*="width: 48px"], [style*="width:56px"], [style*="width: 56px"])) {
    flex-wrap: nowrap !important;
  }
}

/* The label next to a small badge shrinks to the remaining space instead of
   wrapping onto its own line under the badge. */
@media (max-width: 1024px) {
  :is([style*="width:8px"], [style*="width: 8px"], [style*="width:10px"], [style*="width: 10px"], [style*="width:12px"], [style*="width: 12px"], [style*="width:14px"], [style*="width: 14px"], [style*="width:16px"], [style*="width: 16px"], [style*="width:18px"], [style*="width: 18px"], [style*="width:20px"], [style*="width: 20px"], [style*="width:22px"], [style*="width: 22px"], [style*="width:24px"], [style*="width: 24px"], [style*="width:26px"], [style*="width: 26px"], [style*="width:28px"], [style*="width: 28px"], [style*="width:32px"], [style*="width: 32px"], [style*="width:36px"], [style*="width: 36px"], [style*="width:40px"], [style*="width: 40px"], [style*="width:44px"], [style*="width: 44px"], [style*="width:48px"], [style*="width: 48px"], [style*="width:56px"], [style*="width: 56px"]) + * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}