/* ============================================================
   VERIXID — COMING SOON / API EARLY ACCESS PAGE CSS
   ============================================================ */

/* ─── HERO ───────────────────────────────────────────────── */
.cs-hero {
  width     : 100%;
  max-width : 560px;
  margin    : 2.5rem auto 0;
  text-align: center;
}

.cs-hero-badge {
  display      : inline-block;
  font-size    : 0.7rem;
  font-weight  : 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color        : #fff;
  background   : #0067b8;
  padding      : 0.2rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.cs-hero-title {
  font-size     : 2.5rem;
  font-weight   : 800;
  letter-spacing: -0.03em;
  color         : #171717;
  margin        : 0 0 1rem;
  line-height   : 1.1;
}

.cs-hero-desc {
  font-size  : 1.0625rem;
  line-height: 1.6;
  color      : rgb(74, 74, 74);
  margin     : 0 0 0.75rem;
}

.cs-hero-sub {
  font-size  : 0.875rem;
  color      : var(--color-text-muted, #555);
  margin     : 0 0 2rem;
}

/* ─── FORM ───────────────────────────────────────────────── */
.cs-form-wrap {
  width    : 100%;
  max-width: 420px;
  margin   : 0 auto;
}

.cs-form {
  display: flex;
  gap    : 0.5rem;
}

@media (max-width: 480px) {
  .cs-form { flex-direction: column; }
}

.cs-input {
  flex             : 1;
  padding          : 0.75rem 1rem;
  background       : var(--color-surface, #111);
  border           : 1px solid var(--color-border, #2a2a2a);
  border-radius    : 8px;
  color            : var(--color-text, #f0f0f0);
  font-size        : 0.9rem;
  outline          : none;
  transition       : border-color 0.15s ease;
}

.cs-input::placeholder { color: var(--color-text-muted, #444); }
.cs-input:focus { border-color: var(--color-accent, #4ade80); }

.cs-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.4rem;
  padding        : 0.75rem 1.25rem;
  background     : var(--color-accent, #4ade80);
  color          : #171717;
  font-size      : 0.875rem;
  font-weight    : 700;
  border         : none;
  border-radius  : 8px;
  cursor         : pointer;
  white-space    : nowrap;
  transition     : opacity 0.15s ease;
}

.cs-btn:hover:not(:disabled) { opacity: 0.88; }
.cs-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cs-spinner {
  width        : 14px;
  height       : 14px;
  border       : 2px solid rgba(0,0,0,0.3);
  border-top   : 2px solid #171717;
  border-radius: 50%;
  animation    : spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.cs-form-note {
  font-size : 0.75rem;
  color     : var(--color-text-muted, #555);
  margin    : 0.625rem 0 0;
}

/* ─── STATES ─────────────────────────────────────────────── */
.cs-success {
  display      : flex;
  align-items  : center;
  justify-content: center;
  gap          : 0.625rem;
  padding      : 0.875rem 1.25rem;
  background   : rgba(74, 222, 128, 0.07);
  border       : 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 8px;
  max-width    : 420px;
  margin       : 0 auto;
}

.cs-success-icon {
  color     : var(--color-accent, #4ade80);
  font-size : 1rem;
  flex-shrink: 0;
}

.cs-success-text {
  font-size: 0.875rem;
  color    : var(--color-accent, #4ade80);
  margin   : 0;
}

.cs-error {
  max-width    : 420px;
  margin       : 0.5rem auto 0;
  padding      : 0.625rem 1rem;
  background   : rgba(248, 113, 113, 0.07);
  border       : 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 8px;
}

.cs-error p {
  font-size: 0.8125rem;
  color    : #f87171;
  margin   : 0;
}

/* ─── SECTION ────────────────────────────────────────────── */
.cs-section {
  width     : 100%;
  max-width : 600px;
  margin    : 3.5rem auto 0;
}

.cs-label {
  font-size     : 0.75rem;
  font-weight   : 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : #0067b8;
  margin        : 0 0 0.375rem;
}

.cs-title {
  font-size  : 1.1875rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 1.75rem;
}

/* ─── ENDPOINTS ──────────────────────────────────────────── */
.cs-endpoints {
  display       : flex;
  flex-direction: column;
  border        : 1px solid var(--color-border, #2a2a2a);
  border-radius : 12px;
  overflow      : hidden;
}

.cs-endpoint {
  display      : flex;
  align-items  : flex-start;
  gap          : 1rem;
  padding      : 1rem 1.25rem;
  border-bottom: 1px solid rgb(182, 182, 182));
  transition   : background 0.15s ease;
}

.cs-endpoint:last-child { border-bottom: none; }
.cs-endpoint:hover { background: rgba(255,255,255,0.02); }

.cs-endpoint-method {
  font-size     : 0.7rem;
  font-weight   : 800;
  font-family   : 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  padding       : 0.2rem 0.5rem;
  border-radius : 4px;
  flex-shrink   : 0;
  min-width     : 3.5rem;
  text-align    : center;
  margin-top    : 0.1rem;
}

.cs-method--post {
  color     : #fb923c;
  background: rgba(251, 146, 60, 0.1);
}

.cs-method--get {
  color     : #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.cs-endpoint-path {
  font-family: 'JetBrains Mono', monospace;
  font-size  : 0.875rem;
  font-weight: 600;
  color      : #171717;
  margin     : 0 0 0.25rem;
}

.cs-endpoint-desc {
  font-size  : 0.8125rem;
  line-height: 1.6;
  color      : rgb(74, 74, 74);
  margin     : 0;
}

/* ─── USE CASES ──────────────────────────────────────────── */
.cs-usecases {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 1rem;
}

@media (max-width: 480px) {
  .cs-usecases { grid-template-columns: 1fr; }
}

.cs-usecase {
  background   : #fff;
  border       : 1px solid var(--slate-200);
  border-radius: 10px;
  padding      : 1.125rem;
}

.cs-usecase-title {
  font-size  : 0.875rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 0.375rem;
}

.cs-usecase-desc {
  font-size  : 0.8125rem;
  line-height: 1.6;
  color      : rgb(74, 74, 74);
  margin     : 0;
}

/* ─── PRICING TEASER ─────────────────────────────────────── */
.cs-pricing-teaser {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 0.75rem;
  margin-bottom        : 1rem;
}

@media (max-width: 560px) {
  .cs-pricing-teaser { grid-template-columns: 1fr 1fr; }
}

.cs-price-teaser-card {
  background   : var(--color-surface, #111);
  border       : 1px solid var(--color-border, #2a2a2a);
  border-radius: 10px;
  padding      : 1rem;
  text-align   : center;
}

.cs-price-teaser-card--early {
  border-color: rgba(74, 222, 128, 0.2);
  background  : rgba(74, 222, 128, 0.03);
}

.cs-price-teaser-name {
  font-size  : 0.75rem;
  font-weight: 700;
  color      : var(--color-text-muted, #555);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin     : 0 0 0.5rem;
}

.cs-price-teaser-price {
  font-size  : 1rem;
  font-weight: 800;
  color      : var(--color-text, #f0f0f0);
  margin     : 0 0 0.25rem;
}

.cs-price-teaser-card--early .cs-price-teaser-price {
  color: var(--color-accent, #4ade80);
}

.cs-price-teaser-price span {
  font-size  : 0.7rem;
  font-weight: 500;
  color      : var(--color-text-muted, #555);
}

.cs-price-teaser-note {
  font-size: 0.7rem;
  color    : var(--color-text-muted, #555);
  margin   : 0;
  font-family: 'JetBrains Mono', monospace;
}

.cs-pricing-note {
  font-size  : 0.775rem;
  color      : var(--color-text-muted, #555);
  text-align : center;
  margin     : 0;
}

/* ─── BOTTOM CTA ─────────────────────────────────────────── */
.cs-bottom-cta {
  width        : 100%;
  max-width    : 600px;
  margin       : 3rem auto 0;
  text-align   : center;
  padding      : 2.5rem 1.5rem;
  background   : var(--color-surface, #111);
  border       : 1px solid var(--color-border, #2a2a2a);
  border-radius: 14px;
}

.cs-bottom-cta-title {
  font-size  : 1.125rem;
  font-weight: 700;
  color      : var(--color-text, #f0f0f0);
  margin     : 0 0 0.5rem;
}

.cs-bottom-cta-desc {
  font-size : 0.875rem;
  color     : rgb(74, 74, 74);
  margin    : 0 0 1.5rem;
}

/* ─── HIDDEN UTIL ────────────────────────────────────────── */
.hidden { display: none !important; }