:root{ --bg:#0f1724; --surface:#ffffff; --surface-alt:#f8fafc; --accent:#00a3d9; --text:#111827; --muted:#475569; --border:#e2e8f0; --radius:16px; font-family:Inter,ui-sans-serif,system-ui,-apple-system, "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } *{ box-sizing:border-box; } 
body{ margin:0; min-height:100vh; background: radial-gradient(1200px 600px at 10% 10%, rgba(0,163,217,.06), transparent 8%), radial-gradient(900px 400px at 90% 90%, rgba(0,163,217,.04), transparent 8%), var(--bg); color:var(--text); display:flex; justify-content:center; padding:40px 20px; } .wrap{ width:100%; max-width:980px; background:white; border-radius:var(--radius); padding:28px; box-shadow:0 8px 30px rgba(2,6,23,.6); } 
/* ---------- HEADER ---------- */ header{ display:flex; align-items:center; gap:18px; } #bs-logo{ width:clamp(140px,35vw,300px); height:auto; } .chapter-title{ flex:1; text-align:center; } .chapter-name{ font-size:1.15rem; font-weight:600; } .sub{ color:var(--muted); } 
/* ---------- NAV ---------- */ .main-nav{ margin-top:18px; padding-top:14px; border-top:1px solid var(--border); } .main-nav ul{ margin:0; padding:0; display:flex; list-style:none; gap:22px; flex-wrap:wrap; } .main-nav a{ text-decoration:none; color:#334155; font-weight:600; } .main-nav a:hover{ color:var(--accent); } .main-nav .active{ color:var(--accent); } 
/* ---------- CONTENT ---------- */ main{ margin-top:24px; } h1{ margin-top:0; font-size:2rem; } h2{ margin-top:48px; } p{ line-height:1.65; } .lead{ color:var(--muted); font-size:1.05rem; } 
/* ---------- CALLOUT ---------- */ .note{ background:#eef9fc; border-left:4px solid var(--accent); padding:18px; border-radius:8px; margin:30px 0; } 
/* ---------- WORKFLOW ---------- */ .workflow{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin:36px 0; } .workflow-step{ background:white; border:1px solid var(--border); padding:14px 18px; border-radius:10px; font-weight:600; text-align:center; } .workflow-arrow{ font-size:28px; color:var(--accent); } 
/* ---------- CODE ---------- */ pre{ background:#0f172a; color:#dbeafe; padding:20px; overflow:auto; border-radius:10px; font-size:.9rem; } 
/* ---------- TABLES ---------- */ table{ width:100%; border-collapse:collapse; margin:18px 0; } th{ background:#f1f5f9; } th,td{ border:1px solid var(--border); padding:10px; } .pass{ color:#15803d; font-weight:600; } .fail{ color:#b91c1c; font-weight:600; } 
/* ---------- FOOTER ---------- */ footer{ margin-top:40px; padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; color:var(--muted); font-size:.9rem; } 
/* ---------- MOBILE ---------- */ @media(max-width:760px){ header{ flex-direction:column; align-items:flex-start; } .chapter-title{ text-align:left; } .workflow{ flex-direction:column; } .workflow-arrow{ transform:rotate(90deg); } footer{ flex-direction:column; gap:8px; } }
button{

    margin-top:25px;

    background:#00a3d9;
    color:white;

    border:none;

    padding:14px 28px;

    font-size:16px;

    border-radius:8px;

    cursor:pointer;

}

button:hover{

    background:#008cbc;

}

/* ---------- LOWER PANELS (Certification + What we'll do) ---------- */
.lower-panels {
  display: flex;
  gap: 24px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Certification panel */
.cert-callout {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 18px;
  flex: 1 1 360px;
}

.cert-callout h3 {
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 1rem;
}

.cert-callout p {
  margin: 0 0 14px 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.cert-btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 163, 217, 0.25);
}

.cert-btn:hover {
  filter: brightness(1.05);
}

/* Right sidebar / "What we'll do" */
.right {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  flex: 0 0 330px;
  max-width: 330px;
}

.card-heading {
  font-weight: 700;
  margin: 0 0 8px 0;
  font-size: 0.98rem;
}

.meta {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.48;
}

/* Make sure they stack nicely on mobile */
@media (max-width: 760px) {
  .lower-panels {
    flex-direction: column;
  }
  .right {
    max-width: 100%;
    flex: 1 1 auto;
  }
}