/* 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;
}

.billing-toggle {
  display: inline-flex; gap: .25rem; padding: .25rem; margin: .5rem 0 1.4rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.billing-toggle button { border: 0; background: transparent; color: var(--text-muted); padding: .45rem .85rem; }
.billing-toggle button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.billing-saving { color: var(--success); font-size: .78rem; font-weight: 700; min-height: 1.2rem; }

.product-preview {
  margin: 1.5rem 0 2rem; overflow: hidden; border: 1px solid var(--border);
  border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-md);
}
.product-preview-bar {
  display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .9rem;
  border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .75rem;
}
.product-preview-body { padding: 1rem; display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; }
.product-preview-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; background: var(--bg); }
.product-preview-title { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.product-preview-title p { margin: .15rem 0 0; color: var(--text-muted); font-size: .78rem; }
.change-row { margin-top: .75rem; padding: .65rem .75rem; border-radius: var(--radius); background: var(--surface); border-left: 3px solid var(--danger); }
.change-row code { display: block; margin-bottom: .25rem; }
.slack-preview { margin-top: .8rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .8rem; }
.preview-caption { margin: -.8rem 0 1.7rem; color: var(--text-muted); font-size: .78rem; }
.service-offer { margin: 2rem 0; padding: 1.35rem; border: 1px solid var(--primary); border-radius: var(--radius-lg); background: var(--secondary-hover); }
.service-offer h2 { margin-top: 0; }
.service-price { font-size: 1.8rem; font-weight: 800; margin: .25rem 0; }

@media (max-width: 680px) {
  .product-preview-body { grid-template-columns: 1fr; }
}

/* 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; }
}