/* ============================================================
   THE ONE PERCENT NATION — SHARED DESIGN SYSTEM
   Extracted from webinar.html so class pages, the generic
   class renderer, and the admin console stay visually identical
   to the rest of the site without duplicating 400 lines of CSS.
   ============================================================ */

:root {
  --red: #E60306; --red-dark: #B30205; --red-glow: rgba(230,3,6,0.12);
  --black: #080808; --black-2: #0F0F0F; --charcoal: #151515;
  --surface: #1A1A1A; --surface-2: #222222;
  --border: rgba(255,255,255,0.08); --border-red: rgba(230,3,6,0.3);
  --white: #FFFFFF; --gray-400: #A0A0A0; --gray-600: #606060;
  --green: #1DB954; --amber: #E6A503;
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Nav bar height. The bar, the clearance every consuming page puts
     above its first block, and the anchor scroll offset all derive
     from this one value. */
  --nav-h: 68px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute only sets display:none through the UA
   stylesheet, so any class rule that sets display (.spots-row is
   display:flex) silently overrides it. Without this, elements the
   page marks hidden still render. */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  /* The nav is position:fixed, so anchor jumps must clear it. */
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
body {
  background: var(--black); color: var(--white);
  font-family: var(--font-body); overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }

/* NOISE OVERLAY */
.noise::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* ── NAV ─────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); background: rgba(8,8,8,0.9); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-text { font-family: var(--font-display); letter-spacing: 0.06em; line-height: 1; }
.nav-logo-text .l1 { font-size: 11px; color: var(--gray-400); display: block; }
.nav-logo-text .l2 { font-size: 17px; display: block; }
.nav-back {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-400);
  display: flex; align-items: center; gap: 8px; transition: color 0.2s;
}
.nav-back:hover { color: var(--white); }

/* ── TAGS & LABELS ───────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); border: 1px solid var(--border-red);
  padding: 5px 12px; border-radius: 2px;
}
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.tag.tag-plain::before { display: none; }
.eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gray-600);
}

/* ── FORM PANEL ──────────────────────────────────────────── */
.form-panel {
  background: var(--charcoal); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.form-panel-header {
  padding: 28px 32px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: relative;
}
.form-panel-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.form-panel-title { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.04em; }
.form-panel-sub { font-size: 13px; font-weight: 300; color: var(--gray-400); margin-top: 6px; }

/* Real seat / interest meter. Values come from Firestore, never simulated. */
.spots-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.spots-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600); }
.spots-bar-wrap { flex: 1; margin: 0 16px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.spots-bar { height: 100%; background: var(--red); border-radius: 2px; width: 0; transition: width 0.6s var(--ease-out); }
.spots-count { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; color: var(--red); }

/* ── FORM FIELDS ─────────────────────────────────────────── */
.custom-form { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-400);
}
.field-required { color: var(--red); }
.field-optional { color: var(--gray-600); text-transform: none; letter-spacing: 0.04em; font-size: 10px; }
.field-help { font-size: 11px; font-weight: 300; color: var(--gray-600); line-height: 1.5; }
.field-input, .field-select, .field-textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 16px; font-family: var(--font-body); font-size: 14px; color: var(--white);
  outline: none; transition: border-color 0.2s; width: 100%;
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--gray-600); }
.field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--border-red); }
.field-select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23606060' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.field-select option { background: var(--charcoal); color: var(--white); }
.field-textarea { resize: vertical; min-height: 88px; }

/* Honeypot. Off-screen rather than display:none so bots that
   skip hidden inputs still fill it. Never shown to a human. */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── CHIP GROUPS (radio and checkbox share the styling) ──── */
.radio-group-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px;
}
.radio-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-chip { position: relative; }
.radio-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-chip label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--gray-400);
  cursor: pointer; transition: all 0.15s; user-select: none;
}
.radio-chip input:checked + label { border-color: var(--red); background: var(--red-glow); color: var(--white); }
.radio-chip label:hover { border-color: rgba(255,255,255,0.2); color: var(--white); }
.radio-chip input:focus-visible + label { outline: 2px solid var(--red); outline-offset: 2px; }
.radio-chip input[type="checkbox"]:checked + label::before { content: '✓'; font-size: 10px; color: var(--red); }

/* ── CONSENT ─────────────────────────────────────────────── */
.consent-block { display: flex; flex-direction: column; gap: 10px; }
.consent-item { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.consent-box {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 3px;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s; margin-top: 1px; cursor: pointer;
}
.consent-box.checked { border-color: var(--red); background: var(--red); }
.consent-box.checked::after { content: '✓'; color: var(--white); font-size: 11px; font-weight: 700; }
.consent-text { font-size: 11px; font-weight: 300; color: var(--gray-600); line-height: 1.5; }
.consent-text strong { color: var(--white); font-weight: 500; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-submit {
  width: 100%; padding: 16px; border-radius: 6px;
  background: var(--red); color: var(--white);
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
  border: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-submit:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(230,3,6,0.3); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost {
  padding: 12px 20px; border-radius: 6px; background: transparent;
  border: 1px solid var(--border); color: var(--gray-400);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.btn-ghost:hover { border-color: var(--border-red); color: var(--white); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.form-legal { font-size: 11px; font-weight: 300; color: var(--gray-600); text-align: center; line-height: 1.5; }
.form-legal a { color: var(--gray-400); text-decoration: underline; text-decoration-color: var(--gray-600); }

/* ── STATES ──────────────────────────────────────────────── */
.form-success {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 32px; gap: 20px;
}
.success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--red-glow); border: 2px solid var(--border-red);
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.success-title { font-family: var(--font-display); font-size: 40px; letter-spacing: 0.04em; }
.success-title .red { color: var(--red); }
.success-desc { font-size: 15px; font-weight: 300; color: var(--gray-400); line-height: 1.7; max-width: 340px; }
.success-next {
  margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-600);
}
.field-error { font-size: 11px; color: var(--red); margin-top: 4px; display: none; }
.field.invalid .field-input,
.field.invalid .field-select,
.field.invalid .field-textarea { border-color: var(--red); }
.field.invalid .field-error { display: block; }
.form-alert {
  display: none; padding: 12px 16px; border-radius: 6px; font-size: 13px; line-height: 1.5;
  background: var(--red-glow); border: 1px solid var(--border-red); color: var(--white);
}
.form-alert.show { display: block; }

/* ── PRICE BLOCK ─────────────────────────────────────────── */
.price-block {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.price-now { font-family: var(--font-display); font-size: 44px; letter-spacing: 0.02em; line-height: 1; }
.price-was { font-size: 16px; color: var(--gray-600); text-decoration: line-through; }
.price-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }

/* ── SCARCITY BANNER ─────────────────────────────────────── */
.scarcity-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--red-glow); border: 1px solid var(--border-red);
  border-radius: 8px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
}
.scarcity-bar strong { color: var(--red); }

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background: var(--black-2); border-top: 1px solid var(--border); padding: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.footer-copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--gray-600); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 12px; color: var(--gray-600); transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }

/* ── ANIMATION ───────────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; }
.stagger-list > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.stagger-list.visible > * { opacity: 1; transform: none; }
.stagger-list.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-list.visible > *:nth-child(2) { transition-delay: 0.11s; }
.stagger-list.visible > *:nth-child(3) { transition-delay: 0.17s; }
.stagger-list.visible > *:nth-child(4) { transition-delay: 0.23s; }
.stagger-list.visible > *:nth-child(5) { transition-delay: 0.29s; }
.stagger-list.visible > *:nth-child(6) { transition-delay: 0.35s; }
.stagger-list.visible > *:nth-child(7) { transition-delay: 0.41s; }
.stagger-list.visible > *:nth-child(8) { transition-delay: 0.47s; }

/* Respect reduced-motion: reveal everything immediately. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .fade-up, .stagger-list > * { opacity: 1; transform: none; }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .form-row { grid-template-columns: 1fr; }
  .custom-form { padding: 24px; }
  .form-panel-header { padding: 24px; }
  .nav-inner { padding: 0 20px; }
}

/* Mobile only: form controls at 16px so iOS Safari doesn't auto-zoom on focus.
   Scoped to phones; desktop rendering is unchanged. */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Phone-width refinements shared by the class, matrix and enrolled pages.
   Scoped to phones; desktop rendering is unchanged. */
@media (max-width: 700px) {
  .radio-chip label, .btn-ghost { min-height: 44px; }
  .nav-back, .footer-links a { display: inline-flex; align-items: center; padding: 10px 0; }
  footer { padding: 28px 20px; }
}