.hero-in{position:relative;z-index:1;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero-r{display:flex;flex-direction:column;gap:0;align-self:stretch;justify-content:center}
.stat-card:last-child{border-radius:0 0 var(--radius) var(--radius)}
.panel-green{background:rgba(60,224,0,0.04);border:1px solid rgba(60,224,0,0.18);border-radius:var(--radius-lg);padding:40px 36px}
/* ── CREAM HERO OVERRIDE ── */
.hero {
  background: var(--bg);
}
.hero::before {
  background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(60,224,0,0.10) 0%, transparent 68%),
              radial-gradient(ellipse 40% 35% at 10% 80%, rgba(60,224,0,0.04) 0%, transparent 60%);
}
.hero-l h1 { color: var(--text); }
.hero-l h1 em { color: var(--highlight-dim); }
.hero-lede { color: #555; }
.badge {
  color: var(--highlight-dim);
  border-color: rgba(60,224,0,0.25);
  background: rgba(60,224,0,0.07);
}
.pulse { background: var(--highlight); }
.hero-actions .btn-outline-w {
  background: rgba(0,0,0,0.05);
  color: var(--text);
  border-color: rgba(0,0,0,0.12);
}
.hero-actions .btn-outline-w:hover {
  background: rgba(0,0,0,0.09);
}
.stat-card {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.08);
}
.stat-card:first-child { border-color: rgba(0,0,0,0.08); }
.stat-num { color: var(--text); }
.stat-num em { color: var(--highlight-dim); }
.stat-lbl { color: var(--muted); }

/* ─── RESPONSIVE FIX ───
   This page redefines .hero-in unconditionally (grid-template-columns:1fr 1fr),
   which loads after op-base-b and, at equal specificity + later source order,
   beats op-base-b's mobile collapse so the hero never stacks. Re-collapse it
   with a body-scoped rule that wins by specificity regardless of order.
   Everything else (card-grid-4, two-col, hero padding) is handled by op-base-b;
   the hero-right stat cards stay visible and stack below the hero copy. */
@media (max-width:900px){
  body .hero-in{grid-template-columns:1fr;gap:40px}
}