/* GRO Phase 2 – Compact Banner + Modal */
.gro-phase2-wrap{max-width:1100px;margin:0 auto;}
.gro-phase2-bar{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg, rgba(90,185,76,.18), rgba(0,0,0,.0));
  border:1px solid rgba(90,185,76,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.gro-phase2-left{min-width:0}
.gro-phase2-kicker{font-size:12px;letter-spacing:.12em;opacity:.85}
.gro-phase2-title{font-size:18px;font-weight:800;line-height:1.1;margin-top:2px}
.gro-phase2-sub{font-size:13px;opacity:.9;margin-top:6px;max-width:720px}
.gro-phase2-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gro-pill{
  font-size:12px;opacity:.92;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
}

.gro-phase2-right{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gro-phase2-btn{
  appearance:none;cursor:pointer;text-decoration:none;
  border-radius:12px;padding:10px 12px;font-weight:700;font-size:13px;
  border:1px solid rgba(90,185,76,.55);
  background:rgba(90,185,76,.18);
  color:#fff;
}
.gro-phase2-btn.ghost{
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.16);
}
.gro-phase2-btn:hover{filter:brightness(1.06)}

@media (max-width:820px){
  .gro-phase2-bar{flex-direction:column;align-items:flex-start}
  .gro-phase2-right{width:100%}
}

/* Modal */
.gro-phase2-modal{position:fixed;inset:0;display:none;z-index:999999}
.gro-phase2-modal.open{display:block}
.gro-phase2-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.gro-phase2-panel{
  position:relative;max-width:860px;margin:6vh auto 0 auto;
  background:#0b0f0b;color:#fff;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.gro-phase2-head{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:16px 16px;border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(90,185,76,.10);
}
.gro-phase2-modal-title{font-weight:900;font-size:16px}
.gro-phase2-modal-sub{opacity:.85;font-size:13px;margin-top:4px}
.gro-phase2-x{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);color:#fff;font-size:20px;cursor:pointer;
}
.gro-phase2-body{padding:14px 16px;max-height:72vh;overflow:auto}
.gro-phase2-section{margin:0 0 14px}
.gro-phase2-section h3{margin:0 0 8px;font-size:14px}
.gro-phase2-section ul{margin:0;padding-left:18px;opacity:.95}
.gro-phase2-section li{margin:6px 0}
.gro-phase2-note{
  margin-top:10px;padding:10px 12px;border-radius:14px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  opacity:.92;font-size:12.5px;
}
.gro-phase2-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
html.gro-phase2-lock{overflow:hidden}
/* Force GRO-green titles inside Phase 2 modal */
.gro-phase2-panel .gro-phase2-modal-title,
.gro-phase2-panel .gro-phase2-section h3{
  color:#5AB94C !important;
}
/* --- FIX hard: always readable formula blocks --- */
.gro-phase2-body code {
  display: block !important;
  padding: 10px 12px !important;
  margin: 8px 0 !important;
  border-radius: 10px !important;
  line-height: 1.35 !important;

  white-space: normal !important;
  word-break: break-word !important;

  /* Force contrast regardless of theme */
  background-color: #f2f4f7 !important;
  color: #0b0f14 !important;
  -webkit-text-fill-color: #0b0f14 !important;

  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* If any highlighter injects spans inside code */
.gro-phase2-body code * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: transparent !important;
}