/**
 * Shared mobile content overrides for static .dc.html pages.
 * Aligns with nav breakpoint (900px). Inline styles need !important.
 */

@media (max-width: 900px) {
  html,
  body {
    overflow-x: clip;
  }

  img,
  video,
  svg,
  canvas {
    max-width: 100%;
    height: auto;
  }

  /* ——— Horizontal padding ——— */
  [style*="max-width:1200px"],
  [style*="max-width:1100px"],
  [style*="max-width:1080px"],
  [style*="max-width:1040px"],
  [style*="max-width:1000px"],
  [style*="max-width:960px"],
  [style*="max-width:900px"],
  [style*="max-width:880px"],
  [style*="max-width:840px"],
  [style*="max-width:800px"],
  [style*="max-width:780px"],
  [style*="max-width:760px"],
  [style*="max-width:720px"],
  [style*="max-width:680px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ——— Stack multi-column grids ——— */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns:0.9fr"],
  [style*="grid-template-columns:0.95fr"] {
    grid-template-columns: 1fr !important;
  }

  /* auto-fit / auto-fill with min tracks that overflow phones */
  [style*="minmax(260"],
  [style*="minmax(270"],
  [style*="minmax(280"],
  [style*="minmax(290"],
  [style*="minmax(300"],
  [style*="minmax(310"],
  [style*="minmax(320"],
  [style*="minmax(330"],
  [style*="minmax(340"],
  [style*="minmax(350"],
  [style*="minmax(360"],
  [style*="minmax(370"],
  [style*="minmax(380"],
  [style*="minmax(390"],
  [style*="minmax(400"],
  [style*="minmax(410"],
  [style*="minmax(420"] {
    grid-template-columns: 1fr !important;
  }

  /* Compact card grids: prefer 2 cols when min is small */
  [style*="minmax(120"],
  [style*="minmax(130"],
  [style*="minmax(140"],
  [style*="minmax(150"],
  [style*="minmax(170"],
  [style*="minmax(180"],
  [style*="minmax(190"],
  [style*="minmax(200"],
  [style*="minmax(210"],
  [style*="minmax(215"],
  [style*="minmax(220"],
  [style*="minmax(230"],
  [style*="minmax(240"],
  [style*="minmax(250"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Fixed multi-column game / tool shells */
  [style*="grid-template-columns:236px"],
  [style*="grid-template-columns:220px"],
  [style*="grid-template-columns:240px"],
  [style*="grid-template-columns:260px"],
  [style*="grid-template-columns:280px"],
  [style*="grid-template-columns:300px"],
  [style*="grid-template-columns:320px"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [style*="height:648px"],
  [style*="height:620px"],
  [style*="height:600px"],
  [style*="height:580px"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* ——— Wide table / comparison panels ——— */
  div:has(> [style*="min-width:6"]),
  div:has(> [style*="min-width:7"]),
  div:has(> [style*="min-width:8"]),
  div:has(> [style*="min-width:9"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-break: break-word;
  }

  /* Large headings — restore readable word gaps (neg. letter-spacing collapses spaces) */
  h1[style*="letter-spacing:-0.04"],
  h1[style*="letter-spacing:-0.035"],
  h1[style*="letter-spacing:-0.03"],
  h2[style*="letter-spacing:-0.04"],
  h2[style*="letter-spacing:-0.035"],
  h2[style*="clamp(30px"],
  h2[style*="clamp(28px"],
  h1[style*="clamp(34px"],
  h1[style*="clamp(42"] {
    letter-spacing: -0.015em !important;
    word-spacing: 0.08em !important;
  }

  /* ——— Typography (only oversized heroes; leave compact UI headings alone) ——— */
  h1[style*="clamp(42"],
  h1[style*="clamp(40"],
  h1[style*="clamp(38"],
  h1[style*="clamp(36"],
  h1[style*="font-size:48"],
  h1[style*="font-size:44"],
  h1[style*="font-size:42"],
  h1[style*="font-size:40"] {
    font-size: clamp(1.75rem, 7.2vw, 2.35rem) !important;
    line-height: 1.15 !important;
  }

  h2[style*="clamp(36"],
  h2[style*="clamp(34"],
  h2[style*="clamp(32"],
  h2[style*="clamp(30"],
  h2[style*="font-size:36"],
  h2[style*="font-size:34"],
  h2[style*="font-size:32"] {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }

  p[style*="font-size:18"],
  p[style*="font-size:17"],
  p[style*="font-size:16.5"] {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  /* ——— Flex / CTA polish ——— */
  [style*="display:flex"][style*="gap:"] {
    max-width: 100%;
  }

  a[style*="white-space:nowrap"],
  button[style*="white-space:nowrap"],
  span[style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  /* Keep short nav/header CTAs on one line */
  header a[style*="white-space:nowrap"],
  header button[style*="white-space:nowrap"] {
    white-space: nowrap !important;
  }

  [style*="flex:1 1 2"],
  [style*="flex:1 1 3"],
  [style*="flex: 1 1 2"],
  [style*="flex: 1 1 3"],
  [style*="min-width:280px"],
  [style*="min-width:300px"],
  [style*="min-width:320px"],
  [style*="min-width:340px"],
  [style*="min-width:360px"],
  [style*="min-width:380px"],
  [style*="min-width:400px"] {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  /* Form controls fill width */
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input:not([type]),
  textarea,
  select {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Case study + legal sticky sidebars — hide on mobile */
  .bg-m-cs-aside,
  aside[style*="position:sticky"][style*="min-width:230"],
  [style*="position:sticky"][style*="top:88px"][style*="flex:0 1"] {
    display: none !important;
  }

  /* Case study detail hero: tighter top, hide sector pill, left title at 28px */
  .bg-m-cs-pill,
  .bg-m-cs-cta-hide {
    display: none !important;
  }

  .bg-m-cs-end-cta {
    margin-top: 16px !important;
  }

  .bg-m-cs-end-cta > .bg-m-cs-end-cta-inner {
    padding: 20px 16px 22px !important;
    gap: 14px !important;
  }

  .bg-m-cs-end-cta h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .bg-m-cs-end-cta p {
    margin-top: 8px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .bg-m-cs-end-cta-inner > div:last-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    align-items: center !important;
  }

  .bg-m-cs-end-cta a[href="/contact"] {
    width: 100% !important;
    max-width: 280px;
    margin: 0 auto;
  }

  main > section[style*="background-color:#000000"] > div[style*="padding:30px 32px 56px"],
  main > section[style*="background-color:#000000"] > div[style*="padding: 30px 32px 56px"] {
    padding: 20px 16px 36px !important;
  }

  main > section[style*="background-color:#000000"] nav[aria-label="Breadcrumb"] {
    padding-top: 8px !important;
  }

  main > section[style*="background-color:#000000"] nav[aria-label="Breadcrumb"] + div {
    margin-top: 12px !important;
  }

  main > section[style*="background-color:#000000"] h1[style*="clamp(34px"] {
    text-align: left !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin-top: 12px !important;
  }

  /* Case study points — cut large gaps between sections/cards */
  section[data-cs] {
    margin-top: 20px !important;
    padding-top: 16px !important;
    scroll-margin-top: 64px !important;
  }

  section[data-cs]#words,
  section[data-cs]:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .bg-m-cs-aeo-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }

  .bg-m-cs-aeo-scroll > div[style*="display:flex"] {
    min-width: 520px;
    flex-wrap: nowrap !important;
  }

  section[data-cs] h2 {
    margin-top: 6px !important;
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
    line-height: 1.15 !important;
  }

  section[data-cs] > span[style*="text-transform:uppercase"] {
    font-size: 10px !important;
  }

  section[data-cs] [style*="margin-top:20px"],
  section[data-cs] [style*="margin-top:24px"],
  section[data-cs] [style*="margin-top:26px"],
  section[data-cs] [style*="margin-top:28px"],
  section[data-cs] [style*="margin-top:14px"],
  section[data-cs] [style*="margin-top:12px"],
  section[data-cs] [style*="margin-top:16px"],
  section[data-cs] [style*="margin-top:18px"] {
    margin-top: 10px !important;
  }

  section[data-cs] [style*="gap:16px"][style*="flex-direction:column"],
  section[data-cs] [style*="gap:14px"][style*="flex-direction:column"],
  section[data-cs] [style*="gap:10px"][style*="flex-direction:column"] {
    gap: 8px !important;
  }

  section[data-cs] [style*="font-size:16.5px"],
  section[data-cs] [style*="font-size:15px"][style*="line-height"] {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  section[data-cs] [style*="padding:26px 28px"],
  section[data-cs] [style*="padding:20px 22px"],
  section[data-cs] [style*="padding:18px 20px"],
  section[data-cs] [style*="padding:34px 36px"],
  section[data-cs] [style*="padding:14px"] {
    padding: 12px !important;
  }

  section[data-cs] h3[style*="font-size:20px"] {
    font-size: 15.5px !important;
  }

  [style*="padding:56px 0 0"][style*="gap:56px"],
  [style*="padding:20px 0 0"][style*="gap:56px"] {
    padding-top: 12px !important;
    gap: 0 !important;
  }

  /* Soften large decorative radii / padding on cards */
  [style*="padding:56px"],
  [style*="padding:64px"],
  [style*="padding:72px"],
  [style*="padding:80px"],
  [style*="padding:88px"],
  [style*="padding:96px"] {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Homepage hero: kill large top gap under sticky header */
  .bg-m-home-hero-inner,
  main > section:first-of-type > div[style*="padding:88px"] {
    padding: 16px 16px 40px !important;
    gap: 24px !important;
  }

  .bg-m-home-hero h1,
  main > section:first-of-type h1[style*="margin-top:22px"] {
    margin-top: 12px !important;
  }

  .bg-m-home-hero h1 + p,
  main > section:first-of-type h1 + p {
    margin-top: 12px !important;
    font-size: 15.5px !important;
  }

  .bg-m-home-hero h1 + p + div,
  main > section:first-of-type [style*="margin-top:30px"][style*="display:flex"] {
    margin-top: 18px !important;
  }

  header > div[style*="min-height:64px"] {
    min-height: 56px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* ——— Homepage: compact every section ——— */
  .bg-m-home section[style*="padding:96px"],
  .bg-m-home section[style*="padding:56px"],
  .bg-m-home > section > div[style*="padding:96px"],
  .bg-m-home > section > div[style*="padding:88px"],
  .bg-m-home > section > div[style*="padding:72px"] {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .bg-m-home section[style*="padding:96px 32px 0"],
  .bg-m-home section[style*="padding:56px 32px 0"] {
    padding-top: 28px !important;
    padding-bottom: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .bg-m-home section[style*="padding:96px 32px 104px"] {
    padding: 28px 16px 40px !important;
  }

  .bg-m-home section[style*="margin-top:96px"],
  .bg-m-home section[style*="margin-top:72px"] {
    margin-top: 0 !important;
  }

  /* Section intros: label → heading → body → CTA */
  .bg-m-home h2[style*="margin-top:14px"],
  .bg-m-home h2[style*="margin-top:12px"] {
    margin-top: 8px !important;
    font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }

  .bg-m-home p[style*="margin-top:16px"],
  .bg-m-home p[style*="margin-top:14px"] {
    margin-top: 8px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .bg-m-home [style*="margin-top:36px"],
  .bg-m-home [style*="margin-top:40px"] {
    margin-top: 16px !important;
  }

  .bg-m-home [style*="gap:48px"] {
    gap: 20px !important;
  }

  .bg-m-home [style*="gap:36px"] {
    gap: 16px !important;
  }

  .bg-m-home [style*="padding:34px"],
  .bg-m-home [style*="padding:30px"],
  .bg-m-home [style*="padding:28px 26px"],
  .bg-m-home [style*="padding:26px"],
  .bg-m-home [style*="padding:24px"] {
    padding: 14px !important;
  }

  .bg-m-home a[style*="padding:24px"] {
    padding: 14px !important;
  }

  .bg-m-home [style*="padding:64px 48px"] {
    padding: 28px 18px !important;
    border-radius: 14px !important;
  }

  .bg-m-home [style*="padding:0 32px 56px"] {
    padding: 0 16px 24px !important;
  }

  .bg-m-home [style*="padding:22px 24px"] {
    padding: 14px !important;
  }

  .bg-m-home button[style*="padding:20px 4px"] {
    padding: 14px 4px !important;
    font-size: 14.5px !important;
  }

  .bg-m-home #services > div:first-child,
  .bg-m-home #work > div:first-child {
    gap: 12px !important;
    align-items: flex-start !important;
  }

  .bg-m-home #services > div:first-child > a,
  .bg-m-home #work > div:first-child > a {
    margin-top: 4px !important;
  }

  [style*="padding:32px"][style*="border-radius"] {
    padding: 16px 14px !important;
  }

  /* ——— Section vertical rhythm (tighten top/bottom) ——— */
  section[style*="padding:62px 32px"],
  section[style*="padding:80px 32px"],
  div[style*="padding:62px 32px"],
  div[style*="padding:80px 32px"] {
    padding-top: 36px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  div[style*="padding:80px 32px"] {
    padding-bottom: 36px !important;
  }

  section[style*="margin-top:62px"],
  section[style*="margin-top:80px"],
  section[style*="margin-top:72px"],
  section[style*="margin-top:64px"] {
    margin-top: 36px !important;
  }

  /* Intro blocks inside sections */
  [style*="max-width:680px"] > h2[style*="margin-top:14px"],
  [style*="max-width:680px"] > h2 {
    margin-top: 8px !important;
  }

  [style*="max-width:680px"] > p[style*="margin-top:16px"] {
    margin-top: 10px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  [style*="margin-top:30px"][style*="gap:12px"],
  [style*="margin-top:28px"][style*="gap:16px"] {
    margin-top: 16px !important;
  }

  /* ——— Symptom / checklist cards (heading vs body) ——— */
  .bg-m-check-grid,
  [style*="minmax(340px"][style*="gap:12px"] {
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .bg-m-check-card,
  button[style*="padding:18px 20px"][style*="border-radius:14px"][style*="text-align:left"] {
    padding: 11px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  .bg-m-check-card > span[style*="width:22px"],
  button[style*="padding:18px 20px"][style*="border-radius:14px"] > span[style*="width:22px"] {
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
    font-size: 10px !important;
  }

  /* Card title (symptom) */
  .bg-m-check-card .bg-m-check-title,
  button[style*="padding:18px 20px"][style*="border-radius:14px"] span[style*="font-size:15px"][style*="font-weight:500"] {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em;
  }

  /* Card subtext (cause) */
  .bg-m-check-card .bg-m-check-sub,
  button[style*="padding:18px 20px"][style*="border-radius:14px"] span[style*="font-size:13.5px"][style*="margin-top:7px"] {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    margin-top: 3px !important;
  }

  /* Verdict strip under checklist */
  [style*="padding:20px 24px"][style*="border-radius:14px"][style*="flex-wrap:wrap"] {
    padding: 12px 14px !important;
    gap: 10px !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
  }

  [style*="padding:20px 24px"][style*="border-radius:14px"] > span[style*="font-size:26px"] {
    font-size: 20px !important;
  }

  [style*="padding:20px 24px"][style*="border-radius:14px"] > p[style*="font-size:15px"] {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ——— Intent / SERP insight card ——— */
  .bg-m-intent-card,
  [style*="border-radius:16px"][style*="background:#fafafa"][style*="overflow:hidden"][style*="color:#000000"] {
    border-radius: 12px !important;
  }

  .bg-m-intent-card > div[style*="padding:14px 18px"],
  [style*="border-radius:16px"][style*="background:#fafafa"] > div[style*="padding:14px 18px"][style*="border-bottom"] {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .bg-m-intent-card > div[style*="padding:14px 18px"] > span[style*="font-size:12px"],
  [style*="border-radius:16px"][style*="background:#fafafa"] > div[style*="padding:14px 18px"] > span[style*="font-size:12px"] {
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  .bg-m-intent-card > div[style*="padding:14px 18px"] > span[style*="font-size:10.5px"],
  [style*="border-radius:16px"][style*="background:#fafafa"] > div[style*="padding:14px 18px"] > span[style*="text-transform:uppercase"][style*="font-size:10.5px"] {
    font-size: 9px !important;
    padding: 2px 8px !important;
  }

  .bg-m-intent-body,
  [style*="padding:24px"][style*="flex-direction:column"][style*="gap:20px"] {
    padding: 12px !important;
    gap: 12px !important;
  }

  /* Section labels inside intent card only */
  .bg-m-intent-label {
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
  }

  .bg-m-intent-body > div > div[style*="margin-top:11px"][style*="gap:8px"],
  [style*="padding:24px"][style*="gap:20px"] > div > div[style*="margin-top:11px"] {
    margin-top: 6px !important;
    gap: 6px !important;
  }

  /* Dashed SERP feature rows */
  .bg-m-intent-row,
  [style*="padding:11px 14px"][style*="border:1px dashed"] {
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  .bg-m-intent-row span[style*="font-size:14px"],
  [style*="padding:11px 14px"][style*="border:1px dashed"] span[style*="font-size:14px"] {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* “Page type that wins” highlight */
  .bg-m-intent-win,
  [style*="padding:18px 20px"][style*="rgba(6,114,203,0.12)"] {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .bg-m-intent-win p,
  [style*="padding:18px 20px"][style*="rgba(6,114,203,0.12)"] p[style*="font-size:16px"] {
    margin-top: 4px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }

  .bg-m-intent-body p[style*="font-size:14.5px"],
  [style*="padding:24px"][style*="gap:20px"] p[style*="font-size:14.5px"][style*="color:#71717a"] {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Interactive query chips */
  button[style*="padding:10px 16px"][style*="border-radius:999px"][style*="font-size:13px"] {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
  }

  [style*="gap:48px"][style*="minmax(330px"],
  [style*="gap:48px"][style*="minmax(320px"] {
    gap: 20px !important;
  }

  /* Generic bordered content cards */
  [style*="border-radius:18px"][style*="padding:22px"],
  [style*="border-radius:18px"][style*="padding:28px"],
  [style*="border-radius:16px"][style*="padding:22px"],
  [style*="border-radius:16px"][style*="padding:24px"] {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  [style*="min-height:290px"] {
    min-height: 0 !important;
  }

  /* Footer link columns: single column on very small phones */
  footer [style*="minmax(230"],
  footer [style*="minmax(240"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 480px) {
  /* Single column for compact card grids on narrow phones */
  [style*="minmax(120"],
  [style*="minmax(130"],
  [style*="minmax(140"],
  [style*="minmax(150"],
  [style*="minmax(170"],
  [style*="minmax(180"],
  [style*="minmax(190"],
  [style*="minmax(200"],
  [style*="minmax(210"],
  [style*="minmax(215"],
  [style*="minmax(220"],
  [style*="minmax(230"],
  [style*="minmax(240"],
  [style*="minmax(250"] {
    grid-template-columns: 1fr !important;
  }

  a[style*="height:46px"],
  a[style*="height:48px"],
  a[style*="height:50px"],
  a[style*="height:52px"],
  a[style*="height:54px"],
  button[style*="height:46px"],
  button[style*="height:48px"],
  button[style*="height:50px"],
  button[style*="height:52px"],
  button[style*="height:54px"] {
    width: 100%;
    justify-content: center !important;
    box-sizing: border-box;
  }

  /* CTA row stacks */
  [style*="display:flex"][style*="gap:12px"],
  [style*="display:flex"][style*="gap:14px"],
  [style*="display:flex"][style*="gap:16px"] {
    flex-wrap: wrap !important;
  }
}