:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin:0; background:#0b0d12; color:#e8edf3; }
a { color:#8bd3ff; text-decoration:none; }
.container { max-width: 980px; margin: 0 auto; padding: 24px; }
.card { background:#121726; border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.grid { display:grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
h1,h2,h3 { margin: 0 0 10px; }
input, select, textarea { width:100%; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background:#0f1422; color:#e8edf3; }
button { padding: 12px 14px; border-radius: 12px; border:1px solid rgba(255,255,255,.14); background:#1a2440; color:#fff; cursor:pointer; }
button:hover { filter: brightness(1.08); }
.badge { display:inline-block; padding: 3px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); font-size: 12px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 18px; gap:12px; flex-wrap: wrap; }
.msg { padding: 10px 12px; border-radius: 12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); margin: 12px 0; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding: 10px; border-bottom:1px solid rgba(255,255,255,.10); vertical-align: top; }
.muted { color: rgba(232,237,243,.75); }
hr { border:0; border-top:1px solid rgba(255,255,255,.10); margin: 16px 0; }

/* ==========================================================
   HEOS v5.7.2 — Premium Homepage Polish
   ----------------------------------------------------------
   - Mobile-first spacing & typography
   - Uniform hero / cards / CTA strip
   - Non-invasive (scoped) styles: .heos-home*
   ========================================================== */

.heos-home { padding: 6px 0 28px; }
.heos-shell { max-width: 980px; margin: 0 auto; padding: 0 12px; }

.heos-hero {
  padding: 18px 0 10px;
}
.heos-eyebrow {
  margin: 0 0 10px;
  letter-spacing: .02em;
  font-weight: 800;
  opacity: .78;
}
.heos-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
}
.heos-lead {
  margin: 0 0 12px;
  font-size: clamp(15px, 1.55vw, 18px);
  font-weight: 800;
  opacity: .92;
}
.heos-sublead {
  margin: 0 0 14px;
  max-width: 860px;
  opacity: .78;
}

.heos-proof {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
}

.heos-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.heos-trust { margin-top: 14px; }
.heos-h2 { margin: 0 0 8px; }
.heos-h3 { margin: 0 0 8px; }
.heos-muted { margin: 0; opacity: .78; }
.heos-tight { margin-top: 10px; margin-bottom: 8px; }

.heos-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 840px) {
  .heos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.heos-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.heos-list { margin: 0; padding-left: 18px; }
.heos-card p { margin: 0 0 10px; }

/* Make the public Back/Next strip look premium without touching admin */
.admin-nav-bar {
  border-radius: 12px;
  padding: 10px 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
}
.nav-btn {
  border-radius: 10px;
}

/* ==========================================================
   HEOS v5.7.3 — Public Wizard Strip (steps + active highlight)
   ---------------------------------------------------------- */
.heos-wizard-strip{
  margin: 10px 0 0;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.heos-wizard-strip::-webkit-scrollbar{ height: 8px; }
.heos-wizard-strip::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius: 999px; }

.heos-wstep{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(255,255,255,.75);
}
.heos-wstep:hover{ background: rgba(255,255,255,.95); }
.heos-wstep-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  background: rgba(212,175,55,.55);
  flex: 0 0 auto;
}
.heos-wstep.is-active{
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.heos-wstep.is-active .heos-wstep-dot{
  background: rgba(212,175,55,.92);
  border-color: rgba(212,175,55,.65);
}
.heos-wsep{
  opacity: .55;
  font-weight: 900;
  flex: 0 0 auto;
}