/* ==========================================================================
   /data_insights/ — page-scoped layout only.
   Shared pieces come from site.css (tokens, .wrap, .section, .pill-btn) and
   inner.css (.ihero dark hero shell, .grad-head, .body-copy, .two-col, .ipanel).
   ========================================================================== */

/* --- 2nd-level submenu active item: bold "Data Insights".
   The partial's inline script sets font-weight, but t396_init can clobber the
   inline style, so re-assert it here (same pattern as ad_formats). --------- */
#menu-2nd #to-data-insights a { font-weight: 900; }

/* ============================================================= 01 HERO ==== */
.di-hero { padding: 64px 0 72px; }
/* The shared dark veil (`.ihero::before` in inner.css) is an absolutely
   positioned gradient with z-index:auto, so it paints ABOVE the hero's static
   in-flow content — it was greying out the whole hero here (title #f3f3f3 →
   #a6a5b2, the coral eyebrow #eb6868 → #b04f5a, and the illustration with it).
   Every other cluster page raises its hero content with
   `.ihero-inner { position: relative; z-index: 1 }`; this page's hero uses
   `.wrap.di-hero-grid` instead of an `.ihero-inner`, so raise that. Same rule,
   same effect — copy is back to live's brightness. */
.di-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  grid-template-areas:
    "title  visual"
    "body   visual";
  column-gap: 32px;
  align-items: center;
  min-height: 470px;
}
.di-hero-title-block { grid-area: title; align-self: end; }
.di-hero-body        { grid-area: body;  align-self: start; padding-top: 6px; }
.di-hero-visual      { grid-area: visual; align-self: center; }

.di-eyebrow {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--coral);
  margin: 0 0 2px;
}
.di-hero-title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.di-hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: #fff;
  margin: 0 0 30px;
  max-width: 430px;
}
.di-hero-btn { font-size: 14px; letter-spacing: .02em; }
.di-hero-visual img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin-left: auto;
}

/* ================================================= 02 Four benefit cards == */
.di-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.di-card {
  background: var(--tint);
  border-radius: 18px;
  padding: 30px 28px 34px;
}
.di-card-icon { display: block; height: 58px; width: auto; margin: 0 0 26px; }
.di-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.2;
}
.di-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}

/* ============================================ 03 Pinpoint opportunities === */
.di-pinpoint-intro { max-width: 620px; margin-bottom: 34px; }
.di-pinpoint-outro { max-width: 640px; margin: 34px 0 0; }
.di-chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.di-chip {
  min-width: 0;
  background: #fff;
  border-radius: 18px;
  padding: 26px 12px 22px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(13,18,64,.05);
}
.di-chip img { display: block; height: 74px; width: auto; margin: 0 auto 16px; }
.di-chip span {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

/* ================================================== 04 Easy Data Comparison */
.di-compare { align-items: center; }
.di-compare-visual img {
  border-radius: 8px;
  box-shadow: 0 24px 55px rgba(13,18,64,.12);
}
.di-compare-copy { align-self: center; }

/* ========================================= 05 Improve Revenue and UX ====== */
.di-revenue { align-items: center; }
.di-revenue-visual img { width: 100%; height: auto; }

/* ================================= 06 Comply with Google Discover / News == */
.di-google { align-items: center; }
.di-google-copy .grad-head { max-width: 560px; }
.di-google-badges {
  display: inline-flex;
  gap: 26px;
  align-items: center;
  background: #fff;
  border: 1px solid #E4E8F0;
  border-radius: 16px;
  padding: 16px 26px;
  margin-top: 30px;
}
.di-google-badges img { height: 52px; width: auto; display: block; }
.di-google-visual {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
}
.di-google-visual img.di-phone { width: 46%; max-width: 210px; height: auto; }

/* ==================================================== 07 Empower your team = */
.di-empower { align-items: center; }
.di-empower-visual img { width: 100%; height: auto; }
.di-empower-copy { align-self: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 980px) {
  .di-cards { grid-template-columns: repeat(2, 1fr); }
  .di-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .di-chip { padding: 22px 8px 18px; }
  .di-chip img { height: 64px; margin-bottom: 12px; }
  .di-chip span { font-size: 16px; }
}

@media screen and (max-width: 760px) {
  /* hero → single column, order: title, illustration, body (matches live) */
  .di-hero { padding: 44px 0 52px; }
  .di-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "visual"
      "body";
    row-gap: 24px;
    min-height: 0;
  }
  .di-hero-title-block, .di-hero-body { align-self: auto; padding-top: 0; }
  .di-hero-sub { max-width: none; }
  .di-hero-visual img { margin: 0 auto; max-width: 100%; }

  /* every two-col section stacks; keep copy above visual where copy leads,
     and force visual-first sections back to copy-first is not needed — live
     stacks copy-first on mobile for all these rows. */
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .di-compare, .di-empower { }
  .di-compare-visual, .di-empower-visual { order: 2; }
  .di-compare-copy, .di-empower-copy { order: 1; }

  .di-google-visual { justify-content: flex-start; }
  .di-google-visual img.di-phone { max-width: 190px; }

  .ipanel { padding: 30px 26px; }
}

@media screen and (max-width: 480px) {
  .di-cards { grid-template-columns: 1fr; }
  .di-google-badges { gap: 18px; padding: 14px 20px; }
  .di-google-badges img { height: 44px; }
}