/* BCSI Styles — Slate Hero + SEO build */
/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;color:#111827;background:#f8fafc}
/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);border-radius:12px}
/* Header / Nav */
.site-header{background:#ffffff;color:#0f172a;position:sticky;top:0;z-index:10;
  border-bottom:1px solid #e5e7eb}
.topbar{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.brand a{color:#0f172a;text-decoration:none}
.brand img{height:28px;width:auto;display:block}
/* Hamburger toggle (CSS-only) */
#nav-toggle{display:none}
.nav-toggle-label{display:none;color:#334155;border:1px solid #e5e7eb;padding:6px 10px;border-radius:8px;cursor:pointer}
nav ul{list-style:none;display:flex;gap:16px;padding:0;margin:0}
nav a{color:#334155;text-decoration:none;padding:8px 10px;border-radius:8px;transition:background .2s,color .2s}
nav a:hover,nav a:focus,nav a[aria-current="page"]{background:#f1f5f9;color:#0f172a}
/* Hero */
.hero{
  padding:56px 16px 32px;
  background:linear-gradient(180deg,#334155 0%,#1e293b 100%);
  color:#ffffff;
  text-align:left;
  border-bottom:4px solid #0ea5a5;
}
.hero .inner{max-width:1100px;margin:0 auto}
.hero h1{margin:0 0 8px 0;font-size:34px;line-height:1.2;color:#ffffff}
.hero p{margin:0 0 16px 0;color:#d1d5db;max-width:780px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid #0ea5a5;
  text-decoration:none;background:#0ea5a5;color:#ffffff;font-weight:500}
.btn:hover{background:#14b8b8;border-color:#14b8b8}
/* Sections */
.section{padding:28px 0}
h2{margin-top:0;font-size:24px;color:#0f172a}
h3{font-size:18px;margin-bottom:8px;color:#0f172a}
.lead{font-size:18px;color:#334155}
/* Grid cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.card{border:1px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff}
/* Lists */
ul.clean{padding-left:18px}
ul.clean li{margin-bottom:6px}
/* Table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border:1px solid #e5e7eb;text-align:left}
.table th{background:#f8fafc;color:#0f172a}
/* Footer */
.site-footer{color:#64748b;padding:24px 16px 48px;text-align:center;font-size:14px}
/* Responsive */
@media (max-width: 720px){
  .topbar{flex-direction:column;align-items:flex-start;gap:8px}
  .nav-toggle-label{display:inline-block}
  nav ul{display:none;flex-direction:column;gap:8px;width:100%;background:#ffffff;border:1px solid #e5e7eb;border-radius:10px;padding:8px}
  #nav-toggle:checked + nav ul{display:flex}
  .hero{text-align:left;padding:40px 16px 24px}
  .hero h1{font-size:28px}
  .brand img{height:24px}
}