html, body { height: 100%; }
.page { position: relative; display: flex; flex-direction: row; }
.sidebar { width: 260px; }
.content { padding-top: 1rem; }

.top-row { height: 3.5rem; display: flex; align-items: center; background: #1b1f23; color: #fff; }
.top-row a { color: #fff; text-decoration: none; }

.nav-scrollable { height: calc(100vh - 3.5rem); overflow-y: auto; background: #212529; padding-top: .5rem; }
.nav-link { color: rgba(255,255,255,.85); }
.nav-link.active { background: rgba(255,255,255,.10); color: #fff; border-radius: .25rem; }

.navbar-toggler { display:none; }
@media (max-width: 768px) {
  .page { flex-direction: column; }
  .sidebar { width: 100%; }
  .navbar-toggler { display:block; position: absolute; top: .75rem; right: 1rem; width: 1.5rem; height: 1.5rem; opacity:0; }
  .nav-scrollable { height: auto; }
}
pre { white-space: pre-wrap; word-break: break-word; }


/* ============================
   MedClaimsIQ Marketing
   ============================ */

.hero{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.12), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(45,106,79,.14), transparent 55%),
              linear-gradient(180deg, rgba(248,255,251,1), rgba(244,251,247,1));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.brand-pill{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.4rem .7rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.75);
}

.brand-pill .dot{width:10px;height:10px;border-radius:50%;background:#2d6a4f;}
.brand-pill .text{font-weight:600;}

.hero-card{
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:white;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
}

.hero-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1rem;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:rgba(248,249,250,.8);
}

.fake-window{display:flex;gap:.35rem;}
.w-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.w-dot.red{background:#ff5f57;}
.w-dot.yellow{background:#febc2e;}
.w-dot.green{background:#28c840;}

.hero-card-body{padding:1rem 1rem 1.2rem;}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
.kpi{
  border:1px solid rgba(0,0,0,.07);
  border-radius:14px;
  padding:.8rem;
  background:rgba(248,249,250,.65);
}
.kpi .label{font-size:.85rem;color:rgba(0,0,0,.62);}
.kpi .value{font-size:1.35rem;font-weight:800;}
.kpi .hint{font-size:.8rem;color:rgba(0,0,0,.55);}

.feature-list{margin:0;padding-left:1.1rem;}
.feature-list li{margin-bottom:.35rem;}

.info-card{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:white;
  padding:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.info-card .title{font-weight:800;margin-bottom:.25rem;}

/* Primary buttons in green */
.btn-primary{
  background-color:#2d6a4f;
  border-color:#2d6a4f;
}
.btn-primary:hover{
  background-color:#1b4332;
  border-color:#1b4332;
}