/* Narrow-screen finish: keep the mobile reading rhythm clear and deliberate. */
@media (max-width: 760px) {
  /* Show each complete illustration within its card, without a swipe surface. */
  .mobile-disclosure > .disclosure-surface { overflow: visible; }
  #capabilities :is(.search-visual,.company-ui,.interpretation-ui,.brief-ui) {
    zoom: var(--mobile-visual-scale, .36);
    margin-inline: 0;
  }
  #capabilities .company-ui, #capabilities .brief-ui { width: 540px; }
  #capabilities .interpretation-ui { width: 580px; }
  #paid-acquisition .paid-coded-scene { overflow: visible; padding-bottom: 0; }
  #paid-acquisition .paid-market-scene { width: 100%; max-width: 100%; }
  #intelligence-deck .deck-art-window { overflow: visible; }
  #intelligence-deck .deck-illustration { width: 100%; min-width: 0; height: auto; }
  #intelligence-deck .deck-art-hint { display: none; }

  /* Bring the first message closer to the header while keeping the hero open. */
  #top .hero-copy { top: clamp(148px, 40vw, 158px); }

  /* Keep the two-part headline on its intended two lines on common phones. */
  #referrals .problem-copy h2 { font-size: clamp(36px, 11vw, 46px); line-height: 1.02; }
  #referrals h2 .referrals-secondary { font-size: inherit; }

  /* Preserve the editorial contrast without stranding a short word alone. */
  #blind-spot .blindspot-copy h2 { font-size: clamp(36px, 10vw, 40px); line-height: 1; }
  #blind-spot h2 .blindspot-secondary { font-size: .94em; line-height: 1.08; }
}

/* Keep the definition chapter legible on phones and narrow tablets. The word
   wheel is atmosphere on desktop, but it crowds the message at small widths. */
@media (max-width: 1100px) {
  #definition { min-height: 0; height: auto; overflow: hidden; }
  #definition .word-cloud,
  #definition .definition-word-wheel { display: none !important; }
}

@media (max-width: 760px) {
  #definition { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; padding: 76px 24px 48px; }
  #definition .definition-left { min-width: 0; width: 100%; padding: 0 0 25px; }
  #definition .definition-left h2 { max-width: 12ch; margin: 18px 0 0; font-size: clamp(39px,10.5vw,48px); line-height: .99; letter-spacing: -.055em; }
  #definition .green-label { display: flex; align-items: center; gap: 18px; font-size: 10px; letter-spacing: .22em; }
  #definition .green-label i { width: 42px; flex: 0 0 42px; }
  #definition .definition-divider { width: 54px; height: 2px; margin: 0 0 26px; background: #356b54; }
  #definition .definition-right { min-width: 0; width: 100%; margin: 0; padding: 0; }
  #definition .definition-right .eyebrow { margin: 0 0 14px; font-size: 10px; letter-spacing: .22em; }
  #definition .definition-right h3 { font-size: clamp(38px,10vw,48px); line-height: .98; }
  #definition .definition-right h3 span { margin-top: 9px; font-size: .48em; line-height: 1.15; }
  #definition .definition-right .copy-rule { width: 42px; height: 2px; margin: 23px 0 16px; }
  #definition .definition-right > p:not(.eyebrow) { font-size: 18px; line-height: 1.4; }
  #definition .definition-right > small { margin-top: 24px; font-size: 9px; letter-spacing: .2em; }
}

@media (max-width: 360px) {
  #top .hero-copy { top: 144px; }
  #referrals .referral-frame,
  #blind-spot .blindspot-frame { padding-inline: 18px; }
  #outbound .outbound-reference-frame { padding-inline: 18px; }
  #blind-spot .blindspot-copy h2 { font-size: 32px; }
}