/* Cryonel API Guard — SaaS surface polish.
   Loaded by /api-guard, /pricing, /app/*, and the homepage's hero/API Guard section.
   Only ever adds new classes on top of style.css rather than overriding its rules — so
   nothing here can regress a free-tool page that happens to load this file too. */

.hero-badge {
  display: inline-block; font-size: .75rem; font-weight: 700; color: var(--primary);
  background: var(--secondary-hover); border: 1px solid var(--border);
  padding: .25rem .7rem; border-radius: 999px; margin-bottom: .8rem; letter-spacing: .02em;
}

/* Numbered step list ("How it works") in place of a plain <ol> */
.steps { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .75rem; }
.steps li {
  display: flex; gap: .85rem; align-items: flex-start; margin: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: .9rem 1rem; box-shadow: var(--shadow-sm);
}
.steps .step-num {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: var(--primary); color: #fff; font-weight: 800; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}

/* Severity pills — used on the /api-guard explainer and in the dashboard/history tables */
.severity-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; white-space: nowrap; }
.severity-pill.breaking { background: rgba(220,38,38,.12); color: var(--danger); }
.severity-pill.potentially_breaking { background: rgba(217,119,6,.15); color: #d97706; }
.severity-pill.non_breaking { background: rgba(22,163,74,.12); color: var(--success); }
.severity-pill.docs_only { background: rgba(91,107,124,.15); color: var(--text-muted); }
:root[data-theme="dark"] .severity-pill.potentially_breaking { color: #fbbf24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .severity-pill.potentially_breaking { color: #fbbf24; }
}

.severity-key { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }

/* Pricing cards */
.pricing-card { position: relative; }
.pricing-card.featured { border-color: var(--primary); box-shadow: var(--shadow-md); }
.pricing-card .ribbon {
  position: absolute; top: -.7rem; left: 1.1rem; background: var(--primary); color: #fff;
  font-size: .7rem; font-weight: 800; padding: .25rem .65rem; border-radius: 999px; letter-spacing: .03em;
}

/* Narrow centered card for login/signup/forgot/reset/verify — overrides .wrap's 860px
   on the same element; source order (loaded after style.css) makes this win. */
.auth-wrap { max-width: 380px; }
.auth-mark {
  width: 46px; height: 46px; border-radius: 12px; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; margin: .5rem auto 1.25rem;
}

@media (max-width: 480px) {
  .steps li { padding: .75rem .85rem; }
}