:root{
  --brand:#0b5fff;
  --accent:#00c389;
  --bg:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{background:var(--card);position:sticky;top:0;z-index:10;border-bottom:1px solid #e5e7eb}
.nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px 0}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.nav .actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:999px;background:var(--brand);color:#fff;font-weight:600}
.btn.outline{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.hero{padding:48px 0;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.hero h1{font-size:40px;margin:0 0 12px}
.hero p{color:var(--muted);font-size:18px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.section{padding:28px 0}
.h2{font-size:28px;margin:0 0 10px}
.badge{display:inline-block;background:#eef2ff;color:#3730a3;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.list{margin:0;padding-left:18px}
.list li{margin:6px 0}
.footer{background:#0b1220;color:#cbd5e1;margin-top:40px}
.footer a{color:#e2e8f0}
.footer .cols{display:grid;gap:20px;grid-template-columns:2fr 1fr}
.small{font-size:13px;color:var(--muted)}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;background:#f1f5f9;padding:2px 6px;border-radius:6px;border:1px solid #e2e8f0}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.faq dt{font-weight:700;margin-top:10px}
.faq dd{margin:0 0 12px 0;color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e5e7eb;padding:10px;text-align:left}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
}

/* === Custom Overrides for Hero Section === */
.hero h1.hero-title {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
  white-space: normal;   /* allow wrapping by default */
}

@media (min-width: 992px) {
  .hero h1.hero-title {
    white-space: nowrap; /* desktop only: force one line */
  }
}

.hero-subtitle {
  font-size: 14px;
  margin: 8px 0;
  color: var(--muted);
}

.actions .cta.small {
  padding: 8px 18px;
  font-size: 14px;
  border-radius: 6px;
}

@media(max-width:600px){
  .hero h1.hero-title {
    font-size: 18px; /* smaller on very small screens */
  }
}