/* Gartner report pages (Magic Quadrant 2026, AI FinOps Emerging Market Quadrant): coralogix.com's
   layout, the version Gartner approved, in this site's dark design.
   hero → intro + report form → graphic + "What we believe" + Gartner notes (white) → platform banner → AI ready CTA */
.gr-hero { text-align: center; padding-bottom: 24px; }
.gr-hero .container { display: flex; flex-direction: column; align-items: center; }
.gr-label { margin: 0 0 18px; font-size: 18px; color: var(--fg-2); }
.gr-hero h1 { max-width: 1000px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.12; }
.gr-hero .lead { max-width: 820px; margin-inline: auto; }

.gr-first, .gr-second { padding-block: 96px; }
.gr-first::after, .gr-second::after { display: none; }
.gr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.gr-split-media { align-items: center; }
.gr-copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 560; }
.gr-copy > p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--fg-2); }
.gr-copy h3 { margin-top: 36px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.gr-copy h3 + p { margin-top: 12px; }
.gr-copy sup { font-size: .65em; }

/* The official Gartner graphic stays unaltered on its own white sheet */
.gr-figure { margin: 0; padding: clamp(14px, 2vw, 24px); border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.gr-figure img { display: block; width: 100%; height: auto; }


.gr-banner-section { padding: 96px 0 40px; }
.gr-banner { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); min-height: 300px; display: flex; align-items: center; }
.gr-banner-bg { position: absolute; inset: 0; pointer-events: none; }
.gr-banner-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.gr-banner-text { position: relative; padding: clamp(32px, 5vw, 64px); max-width: 520px; }
.gr-banner-text h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.035em; font-weight: 560; margin: 0 0 28px; }

.gr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; max-width: 900px; margin: 88px auto 0; padding-top: 48px; border-top: 1px solid var(--line); }
.gr-stats b { display: block; font-size: clamp(36px, 4vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--fg); }
.gr-stats span { display: block; margin-top: 10px; font-size: 14px; color: var(--fg-2); }

.gr-notes { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.gr-notes ul { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.gr-notes li { font-size: 12px; line-height: 1.6; color: var(--fg-3); }
.gr-notes sup { font-size: .8em; }

@media (max-width: 960px) {
  .gr-split { grid-template-columns: minmax(0, 1fr); }
  .gr-split-media .gr-figure { order: 2; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .gr-first, .gr-second { padding-block: 64px; }
  .gr-banner-section { padding-top: 64px; }
  .gr-banner { min-height: 420px; align-items: flex-start; }
  .gr-banner-bg img { object-position: center bottom; }
  .gr-stats { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 64px; }
}

/* Graphic + "What we believe": a white section, so Gartner's white-sheet graphic sits on its own
   ground, with the light skin's darker text colours (tokens copied from :root[data-theme="light"]). */
.gr-second {
  --bg: #fff; --line: rgba(10, 12, 11, .14); --fg: #0b0c0c; --fg-2: #474b4a; --fg-3: #656a69;
  --accent: #0b9e5e; --grad: linear-gradient(90deg, #064e33 0%, #08854f 45%, #0fbf73 100%); --ink: 10 12 11;
  background: var(--bg); color: var(--fg); color-scheme: light;
}
.gr-second .gr-figure { padding: 0; box-shadow: none; border-radius: 0; }