/*
 * sPMS — Premium Public Design System
 * Loaded last on all public-facing pages.
 * Covers: landing, pricing, signup, website-admin login,
 *         customer login, reset-password.
 * ─────────────────────────────────────────────────────────
 * Cascade strategy: this file is linked AFTER every inline
 * <style> block, so equal-specificity rules here win.
 * ─────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --p-brand:          #0f766e;
  --p-brand-dark:     #0a5c57;
  --p-brand-vivid:    #14b8a6;
  --p-brand-soft:     rgba(15,118,110,.10);
  --p-brand-ring:     rgba(15,118,110,.25);
  --p-accent:         #6366f1;
  --p-accent-soft:    rgba(99,102,241,.12);

  /* Ink / dark surfaces */
  --p-ink:            #060d1a;
  --p-ink-2:          #0d1f35;
  --p-ink-3:          #152a45;
  --p-ink-4:          #1e3a5f;

  /* Text */
  --p-text:           #0f172a;
  --p-text-soft:      #334155;
  --p-muted:          #64748b;
  --p-faint:          #94a3b8;

  /* Surfaces */
  --p-surface:        #ffffff;
  --p-surface-2:      #f8fafc;
  --p-surface-3:      #f1f5f9;

  /* Borders */
  --p-border:         #e2e8f0;
  --p-border-dark:    rgba(255,255,255,.10);
  --p-border-dark2:   rgba(255,255,255,.07);

  /* Gradients */
  --p-grad-brand:     linear-gradient(135deg, #0f766e 0%, #0a5c57 100%);
  --p-grad-dark:      linear-gradient(160deg, #060d1a 0%, #0d2136 100%);
  --p-grad-hero:      linear-gradient(160deg, #06111f 0%, #0a1e36 50%, #060d1a 100%);
  --p-grad-card:      linear-gradient(160deg, #0d2136 0%, #0a1828 100%);

  /* Shadows */
  --p-shadow-xs:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
  --p-shadow-sm:      0 2px 8px rgba(0,0,0,.08);
  --p-shadow:         0 4px 20px rgba(0,0,0,.10);
  --p-shadow-lg:      0 8px 40px rgba(0,0,0,.13);
  --p-shadow-xl:      0 20px 60px rgba(0,0,0,.18);
  --p-glow:           0 0 0 1px rgba(15,118,110,.30), 0 8px 40px rgba(15,118,110,.22);
  --p-glow-sm:        0 0 0 1px rgba(15,118,110,.22), 0 4px 20px rgba(15,118,110,.16);

  /* Radius */
  --p-r-xs:  6px;
  --p-r-sm:  10px;
  --p-r:     14px;
  --p-r-lg:  20px;
  --p-r-xl:  28px;
  --p-r-full:999px;

  /* Motion */
  --p-ease:  0.18s ease;
  --p-spring:0.22s cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════════════════════════
   2. GLOBAL BASE
   ══════════════════════════════════════════════════════════ */
body {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

::selection {
  background: var(--p-brand-soft);
  color: var(--p-brand-dark);
}

/* ══════════════════════════════════════════════════════════
   3. GLOBAL NAV (.spms-public-nav — injected by public-nav.js)
   ══════════════════════════════════════════════════════════ */
.spms-public-nav {
  background: rgba(6,13,26,.88) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 24px rgba(0,0,0,.18) !important;
}

.spms-public-brand-mark {
  background: var(--p-grad-brand) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(15,118,110,.30) !important;
}

.spms-public-brand-name {
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
}

.spms-public-brand-tagline {
  color: rgba(255,255,255,.45) !important;
  font-size: 11px !important;
}

.spms-public-nav-links a {
  color: rgba(255,255,255,.72) !important;
  font-weight: 500 !important;
  transition: color var(--p-ease) !important;
}

.spms-public-nav-links a:hover { color: #fff !important; }

.spms-public-nav .spms-nav-cta {
  background: var(--p-grad-brand) !important;
  border-color: var(--p-brand-dark) !important;
  color: #fff !important;
  border-radius: var(--p-r-sm) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(15,118,110,.28) !important;
}

/* ══════════════════════════════════════════════════════════
   4. WEBSITE-ADMIN LOGIN + RESET PASSWORD
      Class scope: .wa-login, .wa-login-shell, .wa-login-brand,
                   .wa-login-card, body.wa-premium
   ══════════════════════════════════════════════════════════ */

/* Page background */
.wa-login {
  background: var(--p-surface-2) !important;
  min-height: 100vh !important;
}

/* Shell — 2-column split */
.wa-login-shell {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 100vh !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--p-surface) !important;
}

/* ── Brand panel (left) ── */
.wa-login-brand {
  background:
    radial-gradient(ellipse 60% 40% at 10% 10%, rgba(15,118,110,.30), transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 90%, rgba(99,102,241,.20), transparent 55%),
    var(--p-grad-hero) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(36px,5vw,60px) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Decorative grid overlay */
.wa-login-brand::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
}

/* Inner border */
.wa-login-brand::after {
  content: '' !important;
  position: absolute !important;
  inset: 20px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  pointer-events: none !important;
}

.wa-login-brand-panel {
  position: relative !important;
  z-index: 1 !important;
}

/* Logo mark */
.wa-login-brand .wa-login-logo,
.wa-login-brand .wa-logo-mark {
  width: 52px !important;
  height: 52px !important;
  background: var(--p-grad-brand) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(15,118,110,.35) !important;
  margin-bottom: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kicker chip */
.wa-login-kicker {
  display: inline-flex !important;
  background: rgba(15,118,110,.20) !important;
  border: 1px solid rgba(15,118,110,.38) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: var(--p-r-full) !important;
  margin-bottom: 20px !important;
}

.wa-login-brand-panel h1,
.wa-login-brand-panel h2 {
  font-size: clamp(26px,3vw,42px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: #fff !important;
  line-height: 1.07 !important;
  margin: 0 0 16px !important;
}

.wa-login-brand-panel > p,
.wa-login-brand-panel .wa-login-desc {
  color: rgba(255,255,255,.62) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  max-width: 400px !important;
  margin: 0 !important;
}

/* Feature points */
.wa-login-points {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 28px !important;
}

.wa-login-points span,
.wa-login-points li {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  border-radius: var(--p-r-full) !important;
}

/* Brand footer text inside panel */
.wa-login-brand-footer,
.wa-login-brand .wa-footer-note {
  position: relative !important;
  z-index: 1 !important;
  color: rgba(255,255,255,.32) !important;
  font-size: 12px !important;
  margin-top: auto !important;
  padding-top: 32px !important;
}

/* ── Form card (right) ── */
.wa-login-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(36px,5vw,60px) !important;
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  max-width: none !important;
  width: auto !important;
}

.wa-login-card .wa-login-card-head h2,
.wa-login-card h2 {
  font-size: clamp(22px,2.5vw,30px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: var(--p-text) !important;
  margin: 0 0 6px !important;
}

.wa-login-card .wa-login-card-head p,
.wa-login-card > p {
  color: var(--p-muted) !important;
  font-size: 14px !important;
  margin: 0 0 28px !important;
}

/* Fields */
.wa-field span,
.wa-field label {
  color: var(--p-text-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.wa-field input,
.wa-field select,
.wa-field textarea {
  border: 1.5px solid var(--p-border) !important;
  border-radius: var(--p-r-sm) !important;
  background: #fff !important;
  color: var(--p-text) !important;
  font-size: 14.5px !important;
  font-family: inherit !important;
  height: 46px !important;
  padding: 0 14px !important;
  transition: border-color var(--p-ease), box-shadow var(--p-ease) !important;
}

.wa-field input:focus,
.wa-field select:focus,
.wa-field textarea:focus {
  border-color: var(--p-brand) !important;
  box-shadow: 0 0 0 3px var(--p-brand-soft) !important;
  outline: none !important;
}

/* Primary button */
.wa-login-actions button.primary,
.wa-login-actions .primary,
.public-auth-page .wa-actions .primary {
  background: var(--p-grad-brand) !important;
  border-color: var(--p-brand-dark) !important;
  color: #fff !important;
  height: 48px !important;
  width: 100% !important;
  border-radius: var(--p-r-sm) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 4px 16px rgba(15,118,110,.30) !important;
  transition: filter var(--p-ease), transform var(--p-ease) !important;
}

.wa-login-actions button.primary:hover,
.public-auth-page .wa-actions .primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(15,118,110,.36) !important;
}

/* Status / error message */
.wa-status {
  font-size: 13px !important;
  text-align: center !important;
  margin-top: 12px !important;
  color: var(--p-muted) !important;
}

.wa-status a {
  color: var(--p-brand) !important;
  font-weight: 600 !important;
}

/* Reset password page specific */
.public-auth-page .wa-login {
  background: var(--p-surface-2) !important;
}

/* ══════════════════════════════════════════════════════════
   5. SIGNUP PAGE
      Class scope: .signup-*, .signup-shell, .signup-brand,
                   .signup-card
   ══════════════════════════════════════════════════════════ */
.signup-shell {
  background: var(--p-surface) !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Left brand panel ── */
.signup-brand {
  background:
    radial-gradient(ellipse 60% 40% at 10% 10%, rgba(15,118,110,.28), transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 90%, rgba(99,102,241,.20), transparent 55%),
    var(--p-grad-hero) !important;
  position: relative !important;
  overflow: hidden !important;
}

.signup-brand::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
}

.signup-brand::after {
  content: '' !important;
  position: absolute !important;
  inset: 20px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  pointer-events: none !important;
}

/* Brand panel inner content */
.signup-brand-inner {
  position: relative !important;
  z-index: 1 !important;
}

.signup-kicker {
  background: rgba(15,118,110,.20) !important;
  border: 1px solid rgba(15,118,110,.35) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: var(--p-r-full) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  display: inline-flex !important;
  margin-bottom: 20px !important;
}

.signup-brand h1,
.signup-brand h2 {
  font-size: clamp(26px,3vw,40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: #fff !important;
  line-height: 1.08 !important;
  margin: 0 0 14px !important;
}

.signup-brand .signup-desc,
.signup-brand > p {
  color: rgba(255,255,255,.60) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* Feature points (pill chips) */
.signup-point {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  border-radius: var(--p-r-full) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
}

/* Steps list */
.signup-step {
  border-left: 2px solid rgba(15,118,110,.50) !important;
  padding-left: 16px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
}

.signup-step strong,
.signup-step-title {
  color: #fff !important;
  font-weight: 700 !important;
}

/* ── Right form card ── */
.signup-card {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(36px,5vw,60px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.signup-card h2,
.signup-card .signup-card-title {
  font-size: clamp(22px,2.5vw,28px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: var(--p-text) !important;
  margin: 0 0 6px !important;
}

.signup-card .signup-card-sub,
.signup-card > p {
  color: var(--p-muted) !important;
  font-size: 14px !important;
  margin: 0 0 24px !important;
}

.signup-field span,
.signup-field label {
  color: var(--p-text-soft) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.signup-field input,
.signup-field select {
  border: 1.5px solid var(--p-border) !important;
  border-radius: var(--p-r-sm) !important;
  background: #fff !important;
  color: var(--p-text) !important;
  font-size: 14.5px !important;
  height: 48px !important;
  padding: 0 14px !important;
  font-family: inherit !important;
  transition: border-color var(--p-ease), box-shadow var(--p-ease) !important;
}

.signup-field input:focus,
.signup-field select:focus {
  border-color: var(--p-brand) !important;
  box-shadow: 0 0 0 3px var(--p-brand-soft) !important;
  outline: none !important;
}

.signup-button {
  background: var(--p-grad-brand) !important;
  border-color: var(--p-brand-dark) !important;
  color: #fff !important;
  height: 50px !important;
  border-radius: var(--p-r-sm) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 4px 16px rgba(15,118,110,.30) !important;
  transition: filter var(--p-ease), transform var(--p-ease), box-shadow var(--p-ease) !important;
}

.signup-button:hover:not(:disabled) {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(15,118,110,.36) !important;
}

.signup-link {
  border-color: var(--p-border) !important;
  color: var(--p-text-soft) !important;
  border-radius: var(--p-r-sm) !important;
  height: 50px !important;
  font-weight: 600 !important;
}

.signup-link:hover {
  border-color: var(--p-brand) !important;
  color: var(--p-brand) !important;
}

.signup-status {
  font-size: 13px !important;
  text-align: center !important;
  color: var(--p-muted) !important;
}

.signup-commercial-note {
  background: var(--p-brand-soft) !important;
  border: 1px solid var(--p-brand-ring) !important;
  border-radius: var(--p-r-sm) !important;
  color: var(--p-brand-dark) !important;
  font-size: 12.5px !important;
  padding: 12px 16px !important;
}

/* Lang switch — unified style */
.lang-switch button,
.lang-switch a {
  border-radius: var(--p-r-full) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: background-color var(--p-ease), color var(--p-ease) !important;
}

.lang-switch button.is-active,
.lang-switch a.is-active {
  background: var(--p-grad-brand) !important;
  color: #fff !important;
  border-color: var(--p-brand-dark) !important;
}

/* ══════════════════════════════════════════════════════════
   6. CUSTOMER LOGIN
      Class scope: .cp-auth-shell, .cp-auth-hero, .cp-auth-panel
   ══════════════════════════════════════════════════════════ */
.cp-auth-shell {
  background: var(--p-surface) !important;
  min-height: 100svh !important;
}

/* ── Hero / brand panel (left) ── */
.cp-auth-hero {
  background:
    radial-gradient(ellipse 60% 40% at 5% 5%, rgba(15,118,110,.32), transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 95%, rgba(99,102,241,.22), transparent 55%),
    var(--p-grad-hero) !important;
  position: relative !important;
  overflow: hidden !important;
}

.cp-auth-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
}

.cp-auth-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 20px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  pointer-events: none !important;
}

.cp-auth-hero-body {
  position: relative !important;
  z-index: 1 !important;
}

.cp-eyebrow {
  background: rgba(15,118,110,.22) !important;
  border: 1px solid rgba(15,118,110,.38) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: var(--p-r-full) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.cp-auth-hero h1,
.cp-auth-title {
  font-size: clamp(26px,3vw,40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: #fff !important;
  line-height: 1.08 !important;
}

.cp-auth-hero p,
.cp-auth-desc {
  color: rgba(255,255,255,.62) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

/* Proof stats */
.cp-auth-proof {
  position: relative !important;
  z-index: 1 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding-top: 20px !important;
  margin-top: 32px !important;
}

.cp-proof-item strong {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

.cp-proof-item span {
  color: rgba(255,255,255,.52) !important;
  font-size: 12px !important;
}

/* ── Form panel (right) ── */
.cp-auth-panel {
  background: #fff !important;
  padding: clamp(36px,5vw,60px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.cp-auth-panel-head h2 {
  font-size: clamp(20px,2.5vw,28px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: var(--p-text) !important;
  margin: 0 0 6px !important;
}

.cp-auth-panel-head p {
  color: var(--p-muted) !important;
  font-size: 13.5px !important;
  margin: 0 0 24px !important;
}

/* Tab switcher */
.cp-tabs {
  background: var(--p-surface-3) !important;
  border-radius: var(--p-r-sm) !important;
  padding: 4px !important;
  margin-bottom: 24px !important;
}

.cp-tabs button {
  border-radius: var(--p-r-xs) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--p-muted) !important;
  transition: background-color var(--p-ease), color var(--p-ease) !important;
}

.cp-tabs button.is-active {
  background: var(--p-surface) !important;
  color: var(--p-text) !important;
  box-shadow: var(--p-shadow-xs) !important;
}

/* Fields */
.cp-form .cp-field-label,
.cp-form label {
  color: var(--p-text-soft) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.cp-form input,
.cp-form select {
  border: 1.5px solid var(--p-border) !important;
  border-radius: var(--p-r-sm) !important;
  background: #fff !important;
  color: var(--p-text) !important;
  font-size: 14.5px !important;
  height: 48px !important;
  font-family: inherit !important;
  transition: border-color var(--p-ease), box-shadow var(--p-ease) !important;
}

.cp-form input:focus,
.cp-form select:focus {
  border-color: var(--p-brand) !important;
  box-shadow: 0 0 0 3px var(--p-brand-soft) !important;
  outline: none !important;
}

.cp-primary {
  background: var(--p-grad-brand) !important;
  border-color: var(--p-brand-dark) !important;
  color: #fff !important;
  height: 50px !important;
  border-radius: var(--p-r-sm) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(15,118,110,.28) !important;
  transition: filter var(--p-ease), transform var(--p-ease) !important;
}

.cp-primary:hover:not(:disabled) {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(15,118,110,.34) !important;
}

.cp-status.is-error  { color: #b42318 !important; }
.cp-status.is-success{ color: var(--p-brand) !important; }

/* ══════════════════════════════════════════════════════════
   7. PRICING PAGE
      Class scope: .pricing-*, .pricing-hero, .pricing-card
   ══════════════════════════════════════════════════════════ */

/* Page base */
body:has(.pricing-shell),
.pricing-shell {
  background: var(--p-ink) !important;
}

/* Hero section */
.pricing-hero {
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(15,118,110,.25), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(99,102,241,.18), transparent 55%),
    linear-gradient(180deg, #06111f 0%, #060d1a 100%) !important;
  padding: clamp(64px,8vw,100px) clamp(20px,5vw,60px) clamp(56px,7vw,88px) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.pricing-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  pointer-events: none !important;
}

.pricing-kicker {
  background: rgba(15,118,110,.20) !important;
  border: 1px solid rgba(15,118,110,.38) !important;
  color: var(--p-brand-vivid) !important;
  border-radius: var(--p-r-full) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
  display: inline-flex !important;
  margin-bottom: 20px !important;
}

.pricing-hero h1 {
  font-size: clamp(32px,5vw,58px) !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  color: #fff !important;
  line-height: 1.04 !important;
  margin: 0 0 16px !important;
}

.pricing-hero p,
.pricing-hero-sub {
  color: rgba(255,255,255,.58) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}

/* Cards section background */
.pricing-grid {
  background:
    linear-gradient(180deg, #060d1a 0%, #0a1628 60%, #060d1a 100%) !important;
  padding: clamp(48px,6vw,80px) clamp(20px,5vw,60px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

/* Base card */
.pricing-card {
  background: #0d1f35 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: var(--p-r-lg) !important;
  padding: 32px !important;
  transition: transform var(--p-ease), box-shadow var(--p-ease) !important;
}

.pricing-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--p-shadow-lg) !important;
}

/* Featured card */
.pricing-card.is-featured {
  background: linear-gradient(160deg, #0f2a3d 0%, #0d1f35 100%) !important;
  border: 1px solid rgba(15,118,110,.38) !important;
  box-shadow: var(--p-glow) !important;
  transform: translateY(-8px) !important;
  position: relative !important;
}

.pricing-card.is-featured:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 0 0 1px rgba(15,118,110,.40), 0 16px 60px rgba(15,118,110,.28) !important;
}

/* Featured badge */
.pricing-card.is-featured .pricing-badge,
.pricing-badge {
  background: var(--p-grad-brand) !important;
  color: #fff !important;
  border-radius: var(--p-r-full) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
}

.pricing-card-name {
  color: rgba(255,255,255,.72) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.pricing-card-price strong,
.pricing-price-amount {
  font-size: clamp(36px,4vw,48px) !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  color: #fff !important;
}

.pricing-card-price span,
.pricing-price-period {
  color: rgba(255,255,255,.45) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.pricing-card-desc {
  color: rgba(255,255,255,.52) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  margin: 12px 0 20px !important;
}

/* Card divider */
.pricing-card hr,
.pricing-card-divider {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  margin: 20px 0 !important;
}

/* Feature list */
.pricing-feature {
  color: rgba(255,255,255,.78) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 0 !important;
}

.pricing-feature-check {
  color: var(--p-brand-vivid) !important;
  flex-shrink: 0 !important;
}

/* Buttons */
.pricing-button {
  background: var(--p-grad-brand) !important;
  border-color: var(--p-brand-dark) !important;
  color: #fff !important;
  height: 48px !important;
  border-radius: var(--p-r-sm) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(15,118,110,.28) !important;
  transition: filter var(--p-ease), transform var(--p-ease) !important;
}

.pricing-button:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}

.pricing-link {
  border: 1.5px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.78) !important;
  background: transparent !important;
  height: 48px !important;
  border-radius: var(--p-r-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  width: 100% !important;
  transition: border-color var(--p-ease), color var(--p-ease) !important;
}

.pricing-link:hover {
  border-color: rgba(255,255,255,.38) !important;
  color: #fff !important;
}

/* Assurance section */
.pricing-assurance {
  background: linear-gradient(180deg, #0a1628 0%, #060d1a 100%) !important;
  padding: clamp(48px,6vw,72px) clamp(20px,5vw,60px) !important;
}

.pricing-assurance-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--p-r) !important;
  padding: 28px !important;
  transition: border-color var(--p-ease) !important;
}

.pricing-assurance-card:hover {
  border-color: rgba(15,118,110,.30) !important;
}

.pricing-assurance-card h3 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 8px !important;
}

.pricing-assurance-card p {
  color: rgba(255,255,255,.52) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Note / footer */
.pricing-note {
  background: #060d1a !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  padding: 40px clamp(20px,5vw,60px) !important;
  text-align: center !important;
}

.pricing-note p,
.pricing-legal {
  color: rgba(255,255,255,.38) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

.pricing-note a {
  color: rgba(255,255,255,.55) !important;
}

.pricing-footer {
  background: #040910 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* ══════════════════════════════════════════════════════════
   8. LANDING PAGE
      Class scope: .hero, .section, .gallery-*, .proof-*,
                   .trust-*, .final-cta, .site-footer
   ══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(15,118,110,.22), transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 80%, rgba(99,102,241,.18), transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(20,184,166,.08), transparent 50%),
    linear-gradient(180deg, #04101f 0%, #060d1a 60%, #060d1a 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  pointer-events: none !important;
}

/* Hero text */
.hero h1,
.hero-heading {
  font-size: clamp(36px,6vw,68px) !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  color: #fff !important;
  line-height: 1.04 !important;
}

.hero-heading em,
.hero h1 em {
  font-style: normal !important;
  background: linear-gradient(135deg, var(--p-brand-vivid), var(--p-brand)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero p,
.hero-sub {
  color: rgba(255,255,255,.60) !important;
  font-size: clamp(15px,1.5vw,18px) !important;
  line-height: 1.75 !important;
}

/* Launch pill / audience chips */
.launch-pill {
  background: rgba(15,118,110,.16) !important;
  border: 1px solid rgba(15,118,110,.32) !important;
  color: var(--p-brand-vivid) !important;
  border-radius: var(--p-r-full) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  padding: 6px 16px !important;
}

.audience-chip {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.82) !important;
  border-radius: var(--p-r-full) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  transition: background-color var(--p-ease) !important;
}

.audience-chip:hover {
  background: rgba(255,255,255,.10) !important;
}

/* Hero trust row */
.trust-row {
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding-top: 24px !important;
  margin-top: 32px !important;
}

.trust-item {
  color: rgba(255,255,255,.52) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.trust-item strong {
  color: rgba(255,255,255,.88) !important;
  font-weight: 700 !important;
}

/* Login panel inside hero */
.login-panel {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--p-r-lg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.30) !important;
}

.login-panel input {
  background: rgba(255,255,255,.07) !important;
  border: 1.5px solid rgba(255,255,255,.14) !important;
  border-radius: var(--p-r-sm) !important;
  color: #fff !important;
  font-size: 14px !important;
  height: 46px !important;
  font-family: inherit !important;
}

.login-panel input::placeholder { color: rgba(255,255,255,.38) !important; }

.login-panel input:focus {
  border-color: var(--p-brand) !important;
  box-shadow: 0 0 0 3px rgba(15,118,110,.22) !important;
  outline: none !important;
}

/* ── Main buttons ── */
.button.button-primary,
.hero .button-primary {
  background: var(--p-grad-brand) !important;
  border-color: var(--p-brand-dark) !important;
  color: #fff !important;
  border-radius: var(--p-r-sm) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(15,118,110,.30) !important;
  transition: filter var(--p-ease), transform var(--p-ease), box-shadow var(--p-ease) !important;
}

.button.button-primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(15,118,110,.36) !important;
}

.button.button-secondary,
.hero .button-secondary {
  border: 1.5px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: var(--p-r-sm) !important;
  font-weight: 600 !important;
  transition: border-color var(--p-ease), background-color var(--p-ease) !important;
}

.button.button-secondary:hover {
  border-color: rgba(255,255,255,.40) !important;
  background: rgba(255,255,255,.10) !important;
}

/* ── Sections (light background) ── */
.section {
  background: var(--p-surface) !important;
}

.section-head {
  text-align: center !important;
  margin-bottom: clamp(40px,5vw,60px) !important;
}

.eyebrow,
.section-kicker {
  background: var(--p-brand-soft) !important;
  border: 1px solid var(--p-brand-ring) !important;
  color: var(--p-brand) !important;
  border-radius: var(--p-r-full) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  display: inline-flex !important;
  margin-bottom: 16px !important;
}

.section-head h2 {
  font-size: clamp(28px,4vw,44px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: var(--p-text) !important;
  margin: 0 0 12px !important;
  line-height: 1.1 !important;
}

.section-head p {
  color: var(--p-muted) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 540px !important;
  margin: 0 auto !important;
}

/* ── Gallery section ── */
.service-gallery {
  background: var(--p-surface-2) !important;
}

.gallery-head h2 {
  font-size: clamp(24px,3.5vw,38px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: var(--p-text) !important;
}

.gallery-card {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-r) !important;
  box-shadow: var(--p-shadow-xs) !important;
  transition: transform var(--p-ease), box-shadow var(--p-ease), border-color var(--p-ease) !important;
}

.gallery-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--p-shadow) !important;
  border-color: var(--p-brand-ring) !important;
}

.gallery-card h3 {
  color: var(--p-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

.gallery-card p {
  color: var(--p-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

/* ── Proof / access cards ── */
.proof-card {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-r-lg) !important;
  box-shadow: var(--p-shadow-xs) !important;
  transition: transform var(--p-ease), box-shadow var(--p-ease) !important;
  padding: 28px !important;
}

.proof-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--p-shadow) !important;
}

.card-head h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--p-text) !important;
  margin: 0 0 8px !important;
}

.card-head p {
  color: var(--p-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── Flow band (dark section) ── */
.flow-band {
  background:
    radial-gradient(ellipse 50% 40% at 10% 50%, rgba(15,118,110,.14), transparent 55%),
    linear-gradient(180deg, #06111f 0%, #060d1a 100%) !important;
}

.flow-band .section-head h2 { color: #fff !important; }
.flow-band .section-head p  { color: rgba(255,255,255,.55) !important; }
.flow-band .eyebrow {
  background: rgba(15,118,110,.20) !important;
  border-color: rgba(15,118,110,.38) !important;
  color: var(--p-brand-vivid) !important;
}

.flow-step {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--p-r) !important;
  padding: 24px !important;
  transition: border-color var(--p-ease) !important;
}

.flow-step:hover {
  border-color: rgba(15,118,110,.30) !important;
}

.flow-step h3 {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.flow-step p {
  color: rgba(255,255,255,.52) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

/* Step number */
.flow-step-num {
  background: var(--p-grad-brand) !important;
  color: #fff !important;
  border-radius: var(--p-r-sm) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(15,118,110,.28) !important;
}

/* ── Trust cards ── */
.trust-card {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-r) !important;
  box-shadow: var(--p-shadow-xs) !important;
  padding: 24px !important;
  transition: transform var(--p-ease), box-shadow var(--p-ease) !important;
}

.trust-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--p-shadow-sm) !important;
}

.trust-card h3 {
  color: var(--p-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

.trust-card p {
  color: var(--p-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

/* ── In-page pricing section ── */
#pricing.section {
  background: var(--p-surface-2) !important;
}

#pricing .pricing-kicker {
  background: var(--p-brand-soft) !important;
  border-color: var(--p-brand-ring) !important;
  color: var(--p-brand) !important;
}

#pricing .pricing-hero {
  background: transparent !important;
  padding: 0 !important;
}

#pricing .pricing-hero::before { display: none !important; }

#pricing .pricing-hero h1 {
  color: var(--p-text) !important;
  font-size: clamp(26px,3.5vw,38px) !important;
}

#pricing .pricing-hero p { color: var(--p-muted) !important; }

#pricing .pricing-card {
  background: var(--p-surface) !important;
  border-color: var(--p-border) !important;
}

#pricing .pricing-card.is-featured {
  background: var(--p-ink-2) !important;
  border-color: rgba(15,118,110,.40) !important;
}

#pricing .pricing-card-name { color: var(--p-muted) !important; }

#pricing .pricing-card-price strong { color: var(--p-text) !important; }
#pricing .pricing-card.is-featured .pricing-card-price strong { color: #fff !important; }

#pricing .pricing-card-desc { color: var(--p-muted) !important; }
#pricing .pricing-card.is-featured .pricing-card-desc { color: rgba(255,255,255,.55) !important; }

#pricing .pricing-feature { color: var(--p-text-soft) !important; }
#pricing .pricing-card.is-featured .pricing-feature { color: rgba(255,255,255,.75) !important; }

#pricing .pricing-card hr { border-color: var(--p-border) !important; }
#pricing .pricing-card.is-featured hr { border-color: rgba(255,255,255,.10) !important; }

#pricing .pricing-link {
  border-color: var(--p-border) !important;
  color: var(--p-text-soft) !important;
}

/* ── Final CTA section ── */
.final-cta {
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(15,118,110,.25), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(99,102,241,.18), transparent 55%),
    linear-gradient(160deg, #06111f 0%, #060d1a 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.final-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  pointer-events: none !important;
}

.final-cta-inner {
  position: relative !important;
  z-index: 1 !important;
}

.final-cta h2 {
  font-size: clamp(28px,4.5vw,52px) !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  color: #fff !important;
  line-height: 1.06 !important;
}

.final-cta p {
  color: rgba(255,255,255,.58) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* ── Platform / dark feature section ── */
#platform.section {
  background:
    radial-gradient(ellipse 60% 45% at 90% 20%, rgba(99,102,241,.12), transparent 55%),
    linear-gradient(180deg, #06111f 0%, #060d1a 100%) !important;
}

#platform .section-head h2 { color: #fff !important; }
#platform .section-head p  { color: rgba(255,255,255,.55) !important; }
#platform .eyebrow {
  background: rgba(99,102,241,.16) !important;
  border-color: rgba(99,102,241,.32) !important;
  color: #a5b4fc !important;
}

/* ── Footer ── */
.site-footer {
  background: #040910 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

.site-footer .footer-brand-name {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

.site-footer .footer-brand-desc {
  color: rgba(255,255,255,.40) !important;
  font-size: 13px !important;
}

.site-footer .footer-links a {
  color: rgba(255,255,255,.45) !important;
  font-size: 13px !important;
  transition: color var(--p-ease) !important;
}

.site-footer .footer-links a:hover {
  color: rgba(255,255,255,.80) !important;
}

.site-footer .footer-copy {
  color: rgba(255,255,255,.28) !important;
  font-size: 12px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  padding-top: 20px !important;
}

/* Pricing page footer */
.pricing-footer {
  color: rgba(255,255,255,.40) !important;
  font-size: 12px !important;
}

.pricing-footer a { color: rgba(255,255,255,.50) !important; }
.pricing-footer a:hover { color: rgba(255,255,255,.80) !important; }

/* ══════════════════════════════════════════════════════════
   9. MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Auth pages: single column at ≤760px */
@media (max-width: 760px) {
  .wa-login-shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .wa-login-brand { display: none !important; }

  .wa-login-card {
    min-height: 100svh !important;
    padding: 40px 24px !important;
  }

  .signup-shell {
    grid-template-columns: 1fr !important;
  }

  .signup-brand { display: none !important; }

  .signup-card {
    min-height: 100svh !important;
    padding: 40px 24px !important;
  }

  .cp-auth-shell {
    grid-template-columns: 1fr !important;
  }

  .cp-auth-hero { display: none !important; }

  .cp-auth-panel {
    min-height: 100svh !important;
    padding: 40px 24px !important;
  }
}

/* Pricing grid: stack at 900px */
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  .pricing-card.is-featured {
    transform: none !important;
  }

  .pricing-card.is-featured:hover {
    transform: translateY(-4px) !important;
  }
}

/* Landing: section adjustments at ≤768px */
@media (max-width: 768px) {
  .hero h1,
  .hero-heading {
    font-size: clamp(30px,7vw,42px) !important;
  }

  .section-head h2 {
    font-size: clamp(24px,5vw,32px) !important;
  }

  .final-cta h2 {
    font-size: clamp(24px,6vw,38px) !important;
  }

  .gallery-card {
    border-radius: var(--p-r-sm) !important;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .wa-login-card,
  .signup-card,
  .cp-auth-panel {
    padding: 28px 20px !important;
  }

  .pricing-hero {
    padding: 48px 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   10. CORRECTIVE RULES — real class names from the HTML
   ══════════════════════════════════════════════════════════ */

/* ── Standalone pricing.html: actual inner class names ── */
.pricing-card h2 {
  font-size: clamp(18px,2vw,24px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: #fff !important;
  margin: 8px 0 0 !important;
}

.pricing-price {
  font-size: clamp(34px,4vw,46px) !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin: 4px 0 0 !important;
}

.pricing-price span {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,.45) !important;
}

.pricing-copy {
  color: rgba(255,255,255,.52) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  margin: 12px 0 20px !important;
}

.pricing-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.pricing-list li {
  color: rgba(255,255,255,.78) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding-left: 20px !important;
  position: relative !important;
}

.pricing-list li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--p-brand-vivid) !important;
  font-weight: 700 !important;
}

.pricing-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* ── Landing page: icon badges ── */
.icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  background: var(--p-brand-soft) !important;
  border: 1px solid var(--p-brand-ring) !important;
  border-radius: var(--p-r-sm) !important;
  color: var(--p-brand) !important;
  flex-shrink: 0 !important;
}

.icon-badge svg { width: 20px; height: 20px; }

.flow-band .icon-badge {
  background: rgba(15,118,110,.16) !important;
  border-color: rgba(15,118,110,.32) !important;
  color: var(--p-brand-vivid) !important;
}

/* Flow step number badge */
.flow-step strong {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: var(--p-brand-vivid) !important;
  opacity: .85 !important;
}

/* ── Landing: workspace cards ── */
.workspace-card {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-r) !important;
  padding: 24px !important;
  box-shadow: var(--p-shadow-xs) !important;
  transition: transform var(--p-ease), box-shadow var(--p-ease), border-color var(--p-ease) !important;
}

.workspace-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--p-shadow-sm) !important;
  border-color: var(--p-brand-ring) !important;
}

#platform .workspace-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}

#platform .workspace-card:hover {
  border-color: rgba(15,118,110,.30) !important;
}

.workspace-mark {
  width: 40px !important;
  height: 40px !important;
  background: var(--p-grad-brand) !important;
  border-radius: var(--p-r-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 14px rgba(15,118,110,.28) !important;
}

.workspace-card h3 {
  color: var(--p-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 8px !important;
}

.workspace-card p {
  color: var(--p-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

#platform .workspace-card h3 { color: #fff !important; }
#platform .workspace-card p  { color: rgba(255,255,255,.52) !important; }

/* ── Landing hero copy ── */
.hero-copy {
  color: rgba(255,255,255,.60) !important;
  font-size: clamp(15px,1.5vw,18px) !important;
  line-height: 1.75 !important;
}

/* ── Landing hero trust row ── */
.trust-item-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.trust-item-head strong {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

.trust-item p {
  color: rgba(255,255,255,.52) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* ── Landing: in-page pricing section (.price-card) ── */
.price-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--p-r-lg) !important;
  padding: 28px !important;
  transition: transform var(--p-ease), border-color var(--p-ease) !important;
}

.price-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(15,118,110,.30) !important;
}

.price-card h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.65) !important;
  margin: 0 0 12px !important;
}

.price-card .price {
  font-size: clamp(28px,3.5vw,40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  color: #fff !important;
  margin-bottom: 14px !important;
}

.price-card .price span { font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: rgba(255,255,255,.45) !important; }

.price-card p {
  color: rgba(255,255,255,.52) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  margin: 0 0 20px !important;
}

.feature-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.feature-list li {
  color: rgba(255,255,255,.78) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding-left: 20px !important;
  position: relative !important;
}

.feature-list li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--p-brand-vivid) !important;
  font-weight: 700 !important;
}

/* In-page pricing on light background */
#pricing.section .price-card {
  background: var(--p-surface) !important;
  border-color: var(--p-border) !important;
  box-shadow: var(--p-shadow-xs) !important;
}

#pricing.section .price-card h3 { color: var(--p-muted) !important; }
#pricing.section .price-card .price { color: var(--p-text) !important; }
#pricing.section .price-card .price span { color: var(--p-muted) !important; }
#pricing.section .price-card p { color: var(--p-muted) !important; }
#pricing.section .feature-list li { color: var(--p-text-soft) !important; }

/* ── Final CTA trust note ── */
.final-cta .trust-row {
  border-color: rgba(255,255,255,.10) !important;
}

.final-cta .trust-item { color: rgba(255,255,255,.52) !important; }
.final-cta .trust-item strong { color: rgba(255,255,255,.88) !important; }

/* ══════════════════════════════════════════════════════════
   11. FOCUS ACCESSIBILITY
   ══════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--p-brand) !important;
  outline-offset: 3px !important;
  border-radius: var(--p-r-xs) !important;
}