/* DriveVision public marketing pages — scoped to .ws-skin */

.ws-skin {
  --ws-primary: #ffe566;
  --ws-primary-container: #ffe566;
  --ws-primary-fixed-dim: #f1c100;
  --ws-on-primary-fixed: #241a00;
  --ws-checker-black: #000000;
  --ws-deep-navy: #0f4c5c;
  --ws-background: #f7f9fb;
  --ws-on-background: #191c1e;
  --ws-secondary: #565e74;
  --ws-success: #059669;
  --ws-warning: #f4a261;
  --ws-surface-variant: #e0e3e5;
  --ws-outline-variant: #d2c5ab;
  --ws-surface-container-low: #f2f4f6;
  color: var(--ws-on-background);
}

.ws-skin .ws-checkerboard {
  height: 12px;
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-color: #fff;
}

.ws-skin .ws-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
  background: rgba(255, 229, 102, 0.2);
  border-left: 4px solid var(--ws-primary-container);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #1a4883;
}

.ws-skin .ws-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  background: var(--ws-checker-black);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  transition: background 0.2s, transform 0.15s;
}

.ws-skin .ws-btn-primary:hover {
  background: var(--ws-secondary);
}

.ws-skin .ws-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid var(--ws-checker-black);
  color: var(--ws-checker-black);
  font-weight: 700;
  font-size: 0.875rem;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.ws-skin .ws-btn-outline:hover {
  background: var(--ws-checker-black);
  color: #fff;
}

.ws-skin .ws-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 0.5rem;
  background: var(--ws-primary-container);
  color: var(--ws-on-primary-fixed);
  font-weight: 700;
  font-size: 0.875rem;
  transition: transform 0.15s, background 0.2s;
}

.ws-skin .ws-btn-gold:hover {
  background: var(--ws-primary-fixed-dim);
}

.ws-skin .ws-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-primary);
}

.ws-skin .ws-card {
  background: #fff;
  border: 1px solid var(--ws-outline-variant);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ws-skin .ws-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--ws-primary-container);
  color: var(--ws-on-primary-fixed);
  font-size: 0.75rem;
  font-weight: 700;
}

.ws-skin .embla-dot.ws-active {
  background: var(--ws-primary-container) !important;
}

.ws-skin .embla-dot.ws-inactive {
  background: rgba(255, 229, 102, 0.35) !important;
}

/* Book page */
.ws-skin .ws-progress-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--ws-surface-container-low);
  overflow: hidden;
}

.ws-skin .ws-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--ws-primary-container), var(--ws-primary));
  transition: width 0.5s ease;
}

.ws-skin .ws-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ws-secondary);
}

.ws-skin .ws-step-pill-active {
  color: var(--ws-primary);
}

.ws-skin .ws-step-pill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--ws-primary-container);
  color: var(--ws-on-primary-fixed);
  font-size: 0.65rem;
  font-weight: 700;
}

.ws-skin .ws-input {
  margin-top: 0.25rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--ws-outline-variant);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: #fff;
  color: var(--ws-on-background);
}

.ws-skin .ws-input:focus {
  outline: 2px solid var(--ws-primary-container);
  outline-offset: 1px;
}

.ws-skin .ws-input.is-invalid {
  border-color: #ba1a1a;
}

.ws-skin .ws-field-error {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ba1a1a;
}

.ws-skin .ws-ticker-panel {
  border: 2px solid var(--ws-primary-container);
  border-radius: 0.75rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.ws-skin .ws-slot-jackpot {
  border: 2px solid var(--ws-primary-container);
  box-shadow: 0 0 20px rgba(255, 229, 102, 0.35);
  border-radius: 0.75rem;
  padding: 2px;
  background: linear-gradient(135deg, #ffe566, #f1c100, #ffe566);
}

.ws-skin .ws-slot-card {
  border: 1px solid var(--ws-outline-variant);
  border-radius: 0.75rem;
  background: #fff;
}

.ws-skin .ws-callback-box {
  border: 1px solid var(--ws-outline-variant);
  border-radius: 0.75rem;
  background: var(--ws-surface-container-low);
  padding: 1rem;
  border-left: 4px solid var(--ws-primary-container);
}

.ws-skin .ws-step-investment {
  border: 2px solid var(--ws-primary-container);
  border-radius: 0.75rem;
  background: rgba(255, 229, 102, 0.12);
  padding: 1.25rem;
}

/* Site header + logo (home / book skin pages) — dark blue strip, brand gold text */
.ws-site-header {
  --ws-header-bg: #0f4c5c;
  --ws-header-fg: #ffe566;
  border-top: none;
  border-bottom: 1px solid rgba(255, 229, 102, 0.4);
  background: var(--ws-header-bg);
  backdrop-filter: none;
}

.ws-site-header .ws-brand-logo__icon,
.ws-site-header .ws-brand-logo__text {
  color: var(--ws-header-fg);
}

.ws-site-header .ws-brand__img,
.ws-brand-logo .ws-brand__img {
  height: 40px;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  background: transparent;
  border-radius: 0.4rem;
  padding: 0;
}

.ws-brand-logo__icon {
  font-size: 1.75rem;
  line-height: 1;
}

.ws-brand-logo__text {
  font-family: Montserrat, Inter, system-ui, sans-serif;
}

.ws-site-header nav a,
.ws-site-header nav summary {
  color: var(--ws-header-fg) !important;
}

.ws-site-header nav a:hover,
.ws-site-header nav summary:hover {
  background: rgba(255, 229, 102, 0.18) !important;
  color: #fff !important;
}

.ws-site-header nav a.font-medium.text-emerald-700,
.ws-site-header nav a.dark\:text-emerald-400 {
  color: var(--ws-header-fg) !important;
}

.ws-site-header nav a:hover.bg-emerald-50,
.ws-site-header nav a.dark\:hover\:bg-emerald-950\/40,
.ws-site-header nav a.dark\:hover\:bg-slate-800,
.ws-site-header nav a.hover\:bg-slate-100 {
  background: rgba(255, 229, 102, 0.18) !important;
  color: #fff !important;
}

.ws-site-header nav svg {
  color: var(--ws-header-fg);
}