/* ==========================================================================
   /analytics/ — Analytics cluster hub/overview page
   Page-specific layout only. Shared pieces come from site.css + inner.css:
   .ihero dark-art hero shell, .grad-head, .lead, .body-copy, .two-col,
   .ipanel tinted panels, .point-list--plain, .pill-btn, 2nd-menu glue.
   ========================================================================== */

/* Submenu active-item fallback: t396_init can clobber the partial's inline
   font-weight, so pin "Overview" bold via a page-scoped rule (same pattern as
   ad_formats). data-elem-id 1714637539193 = the "Overview" link. */
#menu-2nd #to-analytics a { font-weight: 900; }

/* ============================================================= 01 HERO ===== */
/* Copy on the left, large product-dashboard illustration on the right that
   bleeds off the right edge (clipped by .ihero overflow:hidden). */
.an-hero { padding: 0; }
.an-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 470px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 700px;
}
.an-hero-copy { position: relative; z-index: 2; padding: 40px 0; }
.an-hero-title {
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 26px;
}
/* block, like .ihero-title em: live breaks after the coral phrase so
   "of your data" always starts its own line. */
.an-hero-title em { font-style: normal; color: var(--coral); display: block; }
.an-hero-sub {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 400;
  color: #fff;
  max-width: 430px;
  margin: 0 0 38px;
}
.an-hero-cta { display: flex; gap: 22px; flex-wrap: wrap; }
.an-hero-cta .pill-btn { height: 56px; padding: 0 40px; font-size: 14px; font-weight: 700; }
.an-hero-cta .pill-btn--white { font-weight: 600; }

/* absolute so the 860px art bleeds off the right edge (clipped by .ihero
   overflow:hidden) without inflating the grid track and squeezing the copy. */
.an-hero-visual {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 860px;
}
.an-hero-visual img {
  width: 860px;
  max-width: none;
  height: auto;
  display: block;
}

/* ============================================ 02 All reports in one place === */
.an-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.an-feature {
  background: var(--tint);
  border-radius: 24px;
  padding: 30px 30px 36px;
}
.an-feature-icon { width: 72px; height: 56px; object-fit: contain; object-position: left center; margin: 0 0 26px; }
.an-feature h2 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 14px; }
.an-feature p { font-size: 16px; line-height: 1.5; color: var(--body); margin: 0; }

/* ================================================ 03-06 teaser sections ==== */
.an-teaser-head { margin-bottom: 12px; }
.an-teaser-lead { max-width: 700px; margin-bottom: 46px; }

.an-teaser-grid { align-items: center; gap: 56px; }
/* reversed rows: image on the left, copy panel on the right (04, 06) */
.an-teaser-grid--rev .col-visual { order: 1; }
.an-teaser-grid--rev .col-copy { order: 2; }

.an-teaser-visual img { width: 100%; height: auto; }

.an-teaser-panel { padding: 44px 48px; }
.an-teaser-panel .grad-head { margin-bottom: 20px; }
.an-teaser-panel .body-copy { margin-bottom: 28px; }
.an-teaser-panel .pill-btn { height: 56px; padding: 0 40px; font-size: 14px; }

/* section 03 — "You can check revenue by" panel */
.an-insights-panel { padding: 40px 44px 44px; }
.an-insights-label { font-size: 24px; font-weight: 700; color: var(--navy); margin: 0 0 22px; }
.an-insights-list { margin: 0 0 32px; }
.an-insights-list li { font-size: 18px; }
.an-insights-panel .pill-btn { height: 56px; padding: 0 40px; font-size: 14px; }

/* ================================================================ mobile === */
@media screen and (max-width: 960px) {
  .an-hero-inner {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 56px 0 40px;
    text-align: center;
  }
  .an-hero-copy { padding: 0; }
  .an-hero-title { margin-left: auto; margin-right: auto; }
  .an-hero-sub { max-width: 520px; margin-left: auto; margin-right: auto; }
  .an-hero-cta { justify-content: center; }
  .an-hero-visual { position: static; transform: none; width: 100%; margin-top: 26px; }
  .an-hero-visual img { width: 100%; max-width: 560px; margin: 0 auto; }

  .an-feature-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  .an-teaser-grid, .an-teaser-grid--rev { grid-template-columns: 1fr; gap: 34px; }
  .an-teaser-grid--rev .col-visual,
  .an-teaser-grid--rev .col-copy { order: 0; }
}

@media screen and (max-width: 600px) {
  .an-feature-grid { grid-template-columns: 1fr; }
  .an-teaser-panel, .an-insights-panel { padding: 32px 26px; }
}