/* Brimstone – System Monitoring (page only via .monitoring-page) */
.monitoring-page{
  --brand:#1e3c72; --accent:#0ea5e9;
  --ink:#0f172a; --muted:#64748b; --panel:#fff; --soft:#f6f8fb;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --shadow-soft:0 6px 16px rgba(2,6,23,.06);
}

/* Typography & rhythm */
.monitoring-page .section{padding-block:clamp(48px,6vw,96px)}
.monitoring-page h1{font-size:clamp(34px,6vw,56px);line-height:1.05;margin:0 0 .4em;color:var(--ink)}
.monitoring-page h2{font-size:clamp(22px,3.4vw,32px);margin:28px 0 12px;color:var(--ink)}
.monitoring-page p{margin:.5rem 0 1rem;color:var(--ink)}
.monitoring-page .lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted)}

/* Lists (clean bullets) */
.monitoring-page ul{margin:.5rem 0 1rem 1.1rem}
.monitoring-page ul li{margin:.35rem 0}
.monitoring-page ul li::marker{color:var(--accent)}

/* Columns spacing */
.monitoring-page .wp-block-columns{gap:32px}

/* Framed images + captions (apply class "figure" to images you want framed) */
.monitoring-page .figure{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft)}
.monitoring-page .figure img{display:block;width:100%;height:auto}
.monitoring-page .figure figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}

/* Benefit items (wrap text in a Group inside each column, add classes "card stat") */
.monitoring-page .card{background:var(--panel);border:1px solid #e9eef5;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.monitoring-page .stat{display:flex;gap:12px;align-items:flex-start}
.monitoring-page .stat b{font-size:20px;line-height:1.1}

/* “Generation meter” note box (wrap in a Group, add class "note") */
.monitoring-page .note{background:var(--soft);border:1px solid #e5e7eb;border-radius:12px;padding:20px}

/* CTA section (add classes "cta-bar section" to the final Group) */
.monitoring-page .cta-bar{background:var(--soft);border:1px solid #e6ecf5;border-radius:16px;padding:24px}

/* Optional hero tint (add classes "hero-soft section" to the top banner Group) */
.monitoring-page .hero-soft{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(14,165,233,.15), transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, rgba(30,60,114,.18), transparent 55%),
    #f0f5ff;
  border-bottom:1px solid #e6ecf5;
}