/* ==========================================================================
   RAZORBLED GROUP — ERP PORTAL
   css/erp.css
   Loaded only by erp-portal.html, alongside theme.css (shared tokens) and
   hub.css (reused for .portfolio-grid / .co-card / .co-card-* — the same
   card anatomy as the hub's portfolio grid). This file only adds what's
   specific to the ERP selection screen: the live/soon status pill and the
   launch button, both keyed off each card's own --co-rgb custom property
   so a live card picks up that company's brand color automatically.
   ========================================================================== */

.erp-hero{ padding-top: 160px; padding-bottom: 10px; text-align:center; }
.erp-hero .kicker{ justify-content:center; }
.erp-hero h1{ font-size: clamp(2rem,4vw,3rem); margin: 18px auto 14px; max-width: 720px; }
.erp-hero p{ color: var(--ink-dim); max-width: 560px; margin: 0 auto; font-size:15.5px; }

.erp-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media (max-width: 980px){ .erp-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .erp-grid{ grid-template-columns: 1fr; } }

/* Live card: same lift/glow behaviour as .co-card, already inherited.
   Soon card: same shape, deliberately inert. */
.erp-card--soon{
  cursor: not-allowed;
  opacity: 0.62;
}
.erp-card--soon:hover{ transform:none; box-shadow: var(--glass-shadow); border-color: var(--glass-border); }
.erp-card--soon::before{ display:none; }

.erp-status{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-display); font-size:12.5px; font-weight:600;
  letter-spacing:0.02em; width: fit-content;
  padding: 5px 12px; border-radius:999px;
  position:relative; z-index:1;
}
.erp-status--live{
  color: rgb(var(--co-rgb));
  background: rgba(var(--co-rgb),0.14);
  border: 1px solid rgba(var(--co-rgb),0.35);
}
.erp-status--live .dot{
  width:6px; height:6px; border-radius:50%;
  background: rgb(var(--co-rgb));
  box-shadow: 0 0 0 3px rgba(var(--co-rgb),0.25);
}
.erp-status--soon{
  color: var(--ink-faint);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
}

.erp-cta{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 18px; border-radius:12px;
  font-family: var(--font-display); font-size:13.5px; font-weight:600;
  position:relative; z-index:1;
  transition: transform .3s var(--ease-out);
}
.erp-cta svg{ transition: transform .3s ease; }
a.erp-card:hover .erp-cta svg{ transform: translateX(4px); }
.erp-cta--live{
  background: linear-gradient(120deg, rgba(var(--co-rgb),0.9), rgba(var(--co-rgb),0.65));
  color: #0b0b0f;
}
.erp-cta--soon{
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  color: var(--ink-faint);
}

.erp-note{ max-width:720px; margin: 8px auto 0; text-align:center; }
.erp-note p{ color: var(--ink-faint); font-size:13.5px; line-height:1.7; }
.erp-note a{ color: var(--ink-dim); text-decoration: underline; text-underline-offset:3px; }