/* AUTO-EXTRACTED 2026-06-10 from landing/index.html master stylesheet.
   Every rule whose selector mentions audit|ui-mockup — keeps the verified
   free-audit money path pixel-stable under the v3 redesign. Loaded AFTER
   v3.css. Legacy var fallbacks are defined here under :root with their
   original values (v3 uses --v3-* names exclusively; gv tokens come from
   /static/brand/tokens.css). */
:root {
  --accent: var(--accent-gold);
  --accent-coral: var(--gv-cyan-deep);
  --accent-glow: rgba(0,191,255,0.28);
  --accent-gold: var(--gv-cyan-deep);
  --accent-gold-on-light: var(--gv-cyan-deep); /* gold retired (brand v2) */
  --bg-surface-1: #111318;
  --bg-surface-2: #171A21;
  --border-default: #2D323C;
  --border-subtle: #22262E;
  --brand-indigo: var(--gv-cyan-deep);
  --card-bg-light: #FFFFFF;
  --card-fg: var(--card-fg-dark);
  --card-fg-light: #0F172A;
  --card-fg-light-muted: #475569;
  --card-fg-muted: var(--card-fg-dark-muted);
  --danger: #EF4444;
  --gv-cyan: #00F0FF;
  --gv-cyan-bright: #00BFFF;
  --gv-cyan-deep: #006D85;
  --gv-navy: #0A2540;
  --gv-navy-soft: #1A3A5C;
  --hud-cyan: #4FC3F7;
  --light-border: var(--gv-silver-light);
  --light-border-2: var(--gv-silver);
  --light-card: #FFFFFF;
  --light-elevated: #F8F9FA;
  --light-page: #FFFFFF;
  --light-shadow: 0 1px 3px rgba(10,37,64,0.04), 0 8px 30px rgba(10,37,64,0.06);
  --light-text: var(--gv-navy);
  --light-text-2: var(--gv-navy-soft);
  --light-text-3: #5A6A7E;
  --light-tint-sky: #E6F7FF;
  --radius: 20px;
  --radius-sm: 12px;
  --success: #10B981;
  --text-bright: #FFFFFF;
  --text-muted: var(--text-secondary);
  --text-primary: #F5F6F8;
  --text-secondary: #B4B7C0;
  --text-tertiary: #7E828D;
  --warm-sage: #00866D;
  --warm-terracotta: var(--gv-cyan-bright);
}

* Phase 0.6.4 (2026-05-04): customer login surface added to nav after
   shipping customer_auth. Subtle outlined button — separates returning
   customers from "Free Audit" CTA without competing visually. */
.nav-login {
  border: 1px solid rgba(15,23,42,0.18);
  padding: 0.45rem 1rem; border-radius: 9px;
  font-weight: 600; font-size: 0.85rem;
  color: var(--text-bright) !important;
}

* ─── Reusable section background video pattern ───
   Used by .proof, .pricing, .explore, .ldemo, .vision, .audit-cta — same
   architecture (absolute positioned, masked top/bottom for soft entry/exit).
   Per-section opacity tuning lets dense foregrounds (SVG atlas, council
   ring, charts, cards) stay legible. */
.proof, .pricing, .explore, .ldemo, .audit-cta {
  overflow: hidden;
  isolation: isolate;
}

.pricing, .audit-cta { position: relative; }

* others already have it */
.proof-bg-video, .pricing-bg-video, .explore-bg-video, .ldemo-bg-video,
.vision-bg-video, .audit-cta-bg-video {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  filter: saturate(1.05) contrast(1.05);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.audit-cta-bg-video { opacity: 0.32; }

.proof-bg-overlay, .pricing-bg-overlay, .explore-bg-overlay, .ldemo-bg-overlay,
.vision-bg-overlay, .audit-cta-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,11,13,0.45) 0%, rgba(10,11,13,0.88) 100%);
  z-index: 1;
  pointer-events: none;
}

* Keep foreground content above the video + overlay layers */
.proof     .container,
.pricing   .container,
.explore   .container,
.ldemo     .container,
.vision    .container,
.audit-cta .container { position: relative; z-index: 2; }

* ---- Free Audit CTA ---- */
.audit-cta { padding: 4rem 0 2rem; }

.audit-card {
  background: linear-gradient(135deg, rgba(0,191,255,0.12), rgba(0,212,255,0.08));
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 760px; margin: 0 auto;
  position: relative; overflow: hidden;
  box-shadow: 0 0 60px rgba(0,191,255,0.15), 0 0 120px rgba(0,191,255,0.05);
}

.audit-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--hud-cyan), transparent);
}

.audit-badge {
  display: inline-block;
  background: var(--accent); color: #0a0f1e;
  padding: 4px 14px; border-radius: 8px;
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 1rem;
}

.audit-card h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800;
  color: var(--text-bright); margin-bottom: 0.6rem;
}

.audit-card > p {
  color: var(--text-muted); margin-bottom: 1.5rem;
  max-width: 520px; margin-left: auto; margin-right: auto; font-size: 1rem;
}

.audit-form {
  display: flex; gap: 0.75rem; max-width: 540px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}

.audit-input {
  flex: 1; min-width: 250px;
  /* Border alpha bumped 0.3 → 0.65 for ≥3:1 UI-component contrast (WCAG 1.4.11) */
  background: rgba(0,0,0,0.35); border: 1px solid rgba(0,191,255,0.65);
  border-radius: var(--radius-sm); padding: 0.9rem 1.2rem;
  font-size: 1rem; color: var(--text-bright);
  font-family: 'Inter', sans-serif;
  outline: none; transition: border-color 0.2s;
}

.audit-input::placeholder { color: var(--text-muted); }

.audit-input:focus { border-color: var(--accent); }

.audit-submit {
  background: linear-gradient(135deg, var(--accent), #34d399);
  color: #0a0f1e; padding: 0.9rem 2rem; border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 700; border: none; cursor: pointer;
  box-shadow: 0 4px 20px var(--accent-glow);
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.audit-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-glow); }

.audit-sub {
  font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem;
}

* Phase 0.6.5 — animated audit loading panel. Replaces the silent
   30-45s wait with a live-feeling status display: cyan spinner +
   rotating status messages + progress bar that fills proportionally
   to the chosen mode (10s fast, 45s deep). */
/* Phase 0.6.5: Welcome Video that plays above the loading panel during audit */
.audit-welcome-video {
  position: relative;
  margin: 1.5rem auto 0.85rem;
  max-width: 720px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(0,191,255,0.35);
  box-shadow: 0 12px 36px rgba(0,191,255,0.15), 0 0 0 1px rgba(255,255,255,0.04);
  background: #0A2540;
}

* Skip / "see results" overlay — lets the visitor dismiss the intro video
   at any time. The audit can finish faster than the clip, so results are
   held until the video ends OR this is clicked (board 2026-06-02). */
.audit-welcome-skip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(6,16,28,0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.28);
  color: #FFFFFF;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.audit-welcome-skip:hover {
  background: rgba(0,191,255,0.28);
  border-color: var(--gv-cyan-bright);
}

.audit-welcome-video-el {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  background: #0A2540;
}

.audit-welcome-video-caption {
  padding: 0.55rem 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--gv-cyan-bright);
  text-align: center;
  background-color: #0A2540;
  background-image: linear-gradient(135deg, rgba(0,109,133,0.20), rgba(124,58,237,0.12));
  border-top: 1px solid rgba(0,191,255,0.20);
}

@media (max-width: 600px) {
.audit-welcome-video { max-width: 96vw; }
.audit-welcome-video-caption { font-size: 0.72rem; padding: 0.45rem 0.7rem; }
}

.audit-loading {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,109,133,0.10), rgba(124,58,237,0.06));
  border: 1.5px solid rgba(0,191,255,0.35);
  border-radius: 14px;
  text-align: center;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.audit-loading-spinner {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 0.85rem;
}

.audit-loading-spinner span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gv-cyan-bright);
  animation: gvAuditDotPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(0,191,255,0.5);
}

.audit-loading-spinner span:nth-child(2) { animation-delay: 0.18s; }

.audit-loading-spinner span:nth-child(3) { animation-delay: 0.36s; }

.audit-loading-spinner span:nth-child(4) { animation-delay: 0.54s; }

.audit-loading-spinner span:nth-child(5) { animation-delay: 0.72s; }

@keyframes gvAuditDotPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%      { opacity: 1;    transform: scale(1.15); }
}

.audit-loading-msg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gv-cyan-bright);
  margin-bottom: 0.85rem;
  min-height: 1.4em;
  letter-spacing: 0.01em;
  transition: opacity 0.25s ease;
}

.audit-loading-bar {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.audit-loading-bar-fill {
  background: linear-gradient(90deg, var(--gv-cyan-bright), #7C3AED);
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.6s ease;
  box-shadow: 0 0 12px rgba(0,191,255,0.5);
}

@media (prefers-reduced-motion: reduce) {
.audit-loading-spinner span { animation: none; opacity: 0.7; }
}

* ── Fast/Deep mode toggle ── */
.audit-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  max-width: 540px;
  margin: 1rem auto 0.4rem;
}

.audit-mode-opt {
  position: relative;
  display: block;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.audit-mode-opt:hover { border-color: var(--accent-gold); transform: translateY(-1px); }

.audit-mode-opt.is-on {
  border-color: var(--accent-gold);
  background: rgba(0,191,255,0.08);
  box-shadow: 0 0 18px rgba(0,191,255,0.25);
}

.audit-mode-opt input { position: absolute; opacity: 0; pointer-events: none; }

.audit-mode-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.audit-mode-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.audit-mode-opt.is-on .audit-mode-meta { color: var(--accent-gold); }

* ── Industry signal — deep mode only ── */
.audit-industry {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.3rem;
  margin-bottom: 1.2rem;
}

.audit-industry-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-coral);
  margin-bottom: 0.4rem;
}

.audit-industry-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.9rem;
  letter-spacing: -0.01em;
}

.audit-industry-themes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

.audit-industry-chip {
  /* Phase 0.6.3 (live UX audit): #ffd1c9 (coral leftover from
     Wave 9.0 retired palette) replaced with brand cyan-bright on
     dark surface. Border switched from --accent-coral (now an
     alias to cyan-deep, but visually muddy) to a clean cyan
     border for AA-compliant brand chip styling. */
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: rgba(0, 109, 133, 0.18);
  border: 1px solid var(--gv-cyan-deep);
  color: var(--gv-cyan-bright);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.audit-industry-paywall {
  position: relative;
  margin-top: 0.7rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px dashed var(--accent-gold);
}

.audit-industry-paywall-blur {
  padding: 1rem 1.2rem;
  background: var(--bg-surface-2);
  filter: blur(5px);
  -webkit-filter: blur(5px);
  user-select: none;
  pointer-events: none;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.audit-industry-row + .audit-industry-row { margin-top: 0.5rem; }

.audit-industry-paywall-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, rgba(10,11,13,0.92) 0%, rgba(17,19,24,0.85) 100%);
}

.audit-paywall-icon {
  font-size: 1.7rem;
  line-height: 1;
  opacity: 0.85;
}

.audit-paywall-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.audit-paywall-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.audit-industry-paywall-cta .btn-primary {
  font-size: 0.78rem;
  padding: 0.5rem 0.95rem;
  white-space: nowrap;
  margin-left: auto;
}

* ── Council trace (proves 5 models actually ran) ── */
.audit-trace {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.5rem;
}

.audit-trace-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  display: flex; align-items: center; gap: 0.5rem;
}

.audit-trace-title::before {
  content: '✦';
  color: var(--accent-gold);
  font-size: 1rem;
}

.audit-trace-list { list-style: none; padding: 0; margin: 0; }

.audit-trace-item {
  display: grid;
  grid-template-columns: 130px 1fr 180px 24px;
  gap: 0.8rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 0.82rem;
}

.audit-trace-item:last-child { border-bottom: none; }

.audit-trace-role { color: var(--text-primary); font-weight: 600; }

.audit-trace-resp { color: var(--text-secondary); font-size: 0.78rem; }

.audit-trace-model {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-align: right;
}

.audit-trace-status {
  text-align: center;
  font-weight: 700;
}

.audit-trace-item.is-ok     .audit-trace-status { color: var(--success); }

.audit-trace-item.is-failed .audit-trace-status { color: var(--danger); }

@media (max-width: 760px) {
.audit-mode-toggle { grid-template-columns: 1fr; }
.audit-trace-item { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.7rem 0; }
.audit-trace-model { text-align: left; }
.audit-industry-paywall-cta { flex-wrap: wrap; }
.audit-industry-paywall-cta .btn-primary { margin-left: 0; width: 100%; text-align: center; }
}

* ── Audit results (inline report) ── */
.audit-error {
  max-width: 600px;
  margin: 1.5rem auto 0;
  padding: 0.9rem 1.2rem;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 12px;
  color: #ffd1ce;
  font-size: 0.9rem;
  text-align: center;
}

.audit-results {
  margin-top: 2.5rem;
  text-align: left;
}

.audit-result-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.8rem;
  align-items: center;
  padding: 1.8rem;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  margin-bottom: 1.2rem;
}

.audit-score-wrap {
  position: relative;
  width: 180px; height: 180px;
  margin: 0 auto;
}

.audit-score-svg {
  width: 100%; height: 100%;
}

.audit-score-svg circle {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.audit-score-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}

.audit-score-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem; font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.audit-score-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 0.2rem;
}

.audit-score-grade {
  margin-top: 0.3rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: var(--accent-gold);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.audit-summary-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.55rem;
}

.audit-summary-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 0.9rem;
  letter-spacing: -0.01em;
}

.audit-meta-grid {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.audit-meta-grid span { color: var(--text-primary); font-weight: 700; }

.audit-meta-grid em { font-style: normal; color: var(--text-tertiary); font-size: 0.72rem; }

.audit-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.audit-col {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.3rem;
}

.audit-col-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center;
}

.audit-col-title span { font-size: 1rem; margin-right: 0.1rem; }

.audit-col-good span { filter: hue-rotate(0deg); }

.audit-list { list-style: none; padding: 0; margin: 0; }

.audit-list-item {
  position: relative;
  padding: 0.65rem 0 0.65rem 0;
  border-bottom: 1px dashed var(--border-subtle);
}

.audit-list-item:last-child { border-bottom: none; padding-bottom: 0; }

.audit-list-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  padding-right: 4rem;
}

.audit-list-detail {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.audit-sev-tag {
  position: absolute;
  top: 0.75rem; right: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
}

.audit-sev-high   { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }

.audit-sev-medium { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.4); }

.audit-sev-low    { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4); }

.audit-rewrite {
  background: var(--bg-surface-1);
  border: 1px solid var(--accent-gold);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 0 24px rgba(0,191,255,0.15);
}

.audit-rewrite-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  text-align: center;
}

.audit-rewrite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.audit-rewrite-col { background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 1rem 1.1rem; }

.audit-rewrite-head {
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.audit-rewrite-head-after { color: var(--accent-gold); }

.audit-rewrite-field + .audit-rewrite-field { margin-top: 0.9rem; }

.audit-rewrite-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.3rem;
}

.audit-rewrite-field-val {
  font-size: 0.88rem;
  line-height: 1.5;
  word-break: break-word;
}

.audit-before {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: rgba(239,68,68,0.4);
}

.audit-after {
  color: var(--text-primary);
  font-weight: 600;
}

.audit-keywords {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.5rem;
}

.audit-keywords-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.7rem;
}

.audit-keywords-list {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}

.audit-kw {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--brand-indigo);
  color: #cfd1ff;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
}

* Phase 0.5 W1 — Sign-up-free deliberation CTA inside audit results.
   Sits between the council trace and the pilot-pack pricing CTA. Brand
   v2 cyan-on-navy treatment so it visually reads as a trust artifact
   rather than another sales prompt. */
.audit-deliberation-cta {
  margin: 1.5rem 0;
  padding: 1.4rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,191,255,0.10), rgba(75,0,130,0.10));
  border: 1px solid var(--gv-cyan-bright);
  border-radius: 14px;
  color: var(--gv-cyan-bright);
}

.audit-deliberation-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gv-cyan);
  margin-bottom: 0.5rem;
}

.audit-deliberation-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.45rem;
  color: #FFFFFF;
}

.audit-deliberation-body {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: rgba(232,234,239,0.92);
  line-height: 1.55;
}

.audit-deliberation-body em {
  color: var(--gv-cyan-bright);
  font-style: normal;
  font-weight: 700;
}

.audit-deliberation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.audit-deliberation-cta-primary {
  display: inline-block;
  background: var(--gv-cyan-bright);
  color: var(--gv-navy);
  padding: 0.6rem 1.15rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}

.audit-deliberation-cta-primary:hover {
  background: var(--gv-cyan);
  transform: translateY(-1px);
}

.audit-deliberation-cta-secondary {
  display: inline-block;
  background: transparent;
  color: var(--gv-cyan-bright);
  padding: 0.6rem 1.05rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  border: 1px solid rgba(0,191,255,0.5);
  text-decoration: none;
}

.audit-deliberation-cta-secondary:hover {
  border-color: var(--gv-cyan-bright);
  background: rgba(0,191,255,0.10);
}

.audit-cta-final {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(0,191,255,0.14), rgba(0,191,255,0.12));
  border: 1px solid var(--accent-gold);
  border-radius: 16px;
  color: var(--text-primary);
}

.audit-cta-final strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.9rem;
}

.audit-cta-buttons {
  display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap;
}

.audit-cta-buttons .btn-primary,
.audit-cta-buttons .btn-secondary { font-size: 0.88rem; padding: 0.7rem 1.3rem; }

@media (max-width: 760px) {
.audit-result-head { grid-template-columns: 1fr; text-align: center; }
.audit-meta-grid { justify-content: center; }
.audit-cols { grid-template-columns: 1fr; }
.audit-rewrite-grid { grid-template-columns: 1fr; }
}

* Sections that flip to LIGHT — content-focused
   Excluded from flip (kept dark per brand): .hero, .vision, .listen,
   .explore (SVG atlas designed dark), .ldemo (typewriter aesthetic),
   footer. Per brief these are the cinematic / signature visual moments;
   light flip is for the readability-critical proof + pricing + FAQ. */
.faq, .ai-section, .audit-cta, .pricing, .proof, .features, .products,
.final-cta {
  background: var(--light-page) !important;
  color: var(--light-text) !important;
}

* Hide the bg videos on flipped sections so the light bg wins */
.products-bg-video, .products-bg-overlay,
.proof-bg-video, .proof-bg-overlay,
.pricing-bg-video, .pricing-bg-overlay,
.audit-cta-bg-video, .audit-cta-bg-overlay {
  display: none !important;
}

.faq h1, .faq h2, .faq h3, .faq h4,
.ai-section h1, .ai-section h2, .ai-section h3,
.audit-cta h1, .audit-cta h2, .audit-cta h3,
.pricing h1, .pricing h2, .pricing h3,
.proof h1, .proof h2, .proof h3,
.features h1, .features h2, .features h3,
.products h1, .products h2, .products h3,
.final-cta h1, .final-cta h2 {
  color: var(--light-text) !important;
  text-shadow: none !important;
}

* Wave 7 B2: DELETED the section-wide .X p / .X li cascade that bled
   into nested dark cards. Replaced by component-level theming below
   (see "Wave 7 B2 component theming" block near end of stylesheet).
   The Wave 5 .o2b-wrap HOTFIX and Wave 6 gold-on-light HOTFIX blocks
   that this cascade originally caused stay in place as defensive
   belt-and-suspenders. */

/* Cards within light sections: white with subtle border + shadow */
.faq-item, .ai-card, .audit-card, .price-card, .feature-card,
.benchmark-card, .audit-results, .audit-result-head, .audit-rewrite,
.audit-trace, .listen-card, .ldemo-pane, .info-figure,
.explore-panel, .ldemo-output, .ldemo-input-wrap {
  background: var(--light-card) !important;
  border: 1px solid var(--light-border) !important;
  color: var(--light-text) !important;
  box-shadow: var(--light-shadow) !important;
}

* Inner card text colors */
.faq-q, .faq-a, .feature-card h3, .price-card h3, .benchmark-card h3,
.audit-card h2, .audit-card p, .price-cta, .ai-card h2, .ai-card p {
  color: var(--light-text) !important;
  text-shadow: none !important;
}

.feature-card p, .benchmark-card p, .audit-card .audit-sub,
.price-card .price-tagline, .price-card .features li,
.audit-rewrite-field-label, .audit-trace-model {
  color: var(--light-text-2) !important;
}

* Form controls in light sections */
.audit-input {
  background: var(--light-card) !important;
  color: var(--light-text) !important;
  border: 1.5px solid var(--light-border-2) !important;
}

.audit-input::placeholder { color: var(--light-text-3) !important; }

.audit-input:focus {
  border-color: var(--brand-indigo) !important;
  box-shadow: 0 0 0 3px rgba(0,191,255,0.18) !important;
  background: white !important;
}

.audit-mode-opt {
  background: var(--light-elevated) !important;
  color: var(--light-text-2) !important;
  border: 1px solid var(--light-border) !important;
}

.audit-mode-opt.is-on, .audit-mode-opt:has(input:checked) {
  background: rgba(0,191,255,0.12) !important;
  border-color: var(--accent-gold) !important;
  color: var(--light-text) !important;
}

* Audit results: light theme variants */
.audit-error {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border: 1px solid #FCA5A5 !important;
}

.audit-score-num, .audit-score-grade { color: var(--brand-indigo) !important; }

.audit-score-svg circle { stroke: var(--light-border) !important; }

#audit-score-ring { stroke: var(--accent-gold) !important; }

* Listen card / explore panel adjustments */
.proof-eyebrow, .audit-badge {
  color: var(--brand-indigo) !important;
}

* Phase 0.6.3 (live UX audit): .listen-eyebrow + .ldemo-eyebrow used
   --brand-indigo (alias of #006D85 cyan-deep). On a dark navy section
   that's ~3.5:1 — fails AA for normal small-label text. Bumped to
   --gv-cyan-bright (#00BFFF) which gives ~7:1 on dark navy.  */
.listen-eyebrow,
.ldemo-eyebrow {
  color: var(--gv-cyan-bright) !important;
}

* Wave 4: hide Explore Atlas section per UX council
   the UX audit explicitly: "Remove the 'Explore the Atlas' interactive SVG
   module. It's a complex, self-indulgent UI element that distracts
   from the core narrative and primary conversion paths." the audit cited
   the same area as cognitive overload. Hidden via CSS so the SVG
   render JS continues to no-op cleanly without errors. */
.explore { display: none !important; }

* Sticky audit results panel + nested elements */
.audit-results, .audit-result-head, .audit-summary, .audit-rewrite,
.audit-trace, .audit-issues, .audit-issue, .audit-industry-row,
.audit-industry-paywall, .audit-industry-paywall-cta {
  background: var(--light-card) !important;
  border-color: var(--light-border) !important;
  color: var(--light-text) !important;
}

.audit-results h3, .audit-results h4, .audit-issue h4 { color: var(--light-text) !important; }

.audit-issue p, .audit-results p { color: var(--light-text-2) !important; }

* Phase 0.6.5 (the board launch-eve contrast hotfix): every text element
   that lives INSIDE .audit-results was rendering with --text-tertiary,
   --accent-gold, or --accent-coral — all of which are dim cyan-deep on
   the dark/white card backgrounds. Result: BEFORE/AFTER labels,
   TITLE/DESCRIPTION sub-labels, INDUSTRY SIGNAL eyebrow, score-summary
   text, and the industry-vertical heading were all unreadable.
   Force AA-compliant explicit colors per surface:
     - eyebrows / labels on light bg → cyan-deep (#006D85 ~ 4.7:1)
     - eyebrows / labels on dark bg  → cyan-bright (#00BFFF ~ 7:1)
     - body text on light bg → navy (#0A2540)
     - rewrite-after column accent → keep cyan-bright for visual punch
   All forced with !important to defeat the cascade of older overrides.

   The .audit-results container has white card bg (.audit-results
   override line 3305 above), so child eyebrows + labels need cyan-DEEP
   for readability on white. The before/after rewrite columns have an
   inner --bg-surface-2 background which (on the light-themed card)
   resolves to a lighter neutral — still light bg → cyan-deep is correct. */

/* TIER A — labels and body text on the WHITE outer .audit-results card.
   These elements live on var(--light-card) bg → use navy/cyan-deep for AA. */
.audit-results .audit-summary-label,
.audit-results .audit-rewrite-title,
.audit-results .audit-industry-eyebrow,
.audit-results .audit-keywords-title {
  color: var(--gv-cyan-deep) !important;
  -webkit-text-fill-color: var(--gv-cyan-deep) !important;
  opacity: 1 !important;
}

.audit-results .audit-summary-text,
.audit-results .audit-industry-title {
  color: var(--light-text) !important;       /* navy on white = AAA */
  -webkit-text-fill-color: var(--light-text) !important;
  opacity: 1 !important;
}

.audit-results .audit-meta-grid { color: var(--light-text-2) !important; }

.audit-results .audit-meta-grid span { color: var(--light-text) !important; font-weight: 700; }

.audit-results .audit-meta-grid em { color: var(--light-text-2) !important; opacity: 0.85; }

.audit-results .audit-score-num,
.audit-results .audit-score-grade {
  color: var(--gv-cyan-deep) !important;     /* score reads as the brand accent on white */
}

.audit-results .audit-score-lbl { color: var(--light-text-2) !important; }

* TIER B — labels + body text inside the DARK before/after rewrite columns.
   .audit-rewrite-col explicitly keeps a DARK var(--bg-surface-2) background
   inside the white parent card. So children need WHITE/CYAN-BRIGHT, not navy. */
.audit-results .audit-rewrite-col {
  /* Keep dark interior so the before/after split is visually distinct. */
  background: #0F1622 !important;            /* explicit deep navy — no ambiguity */
  border: 1px solid rgba(0,191,255,0.15) !important;
  color: #FFFFFF !important;
}

.audit-results .audit-rewrite-col .audit-rewrite-head {
  color: var(--gv-cyan-bright) !important;   /* "BEFORE" label cyan-bright on dark */
  -webkit-text-fill-color: var(--gv-cyan-bright) !important;
  opacity: 1 !important;
}

.audit-results .audit-rewrite-col .audit-rewrite-head-after {
  color: var(--gv-cyan-bright) !important;
  -webkit-text-fill-color: var(--gv-cyan-bright) !important;
}

.audit-results .audit-rewrite-col .audit-rewrite-field-label {
  color: var(--gv-cyan-bright) !important;   /* "TITLE"/"DESCRIPTION" sub-labels */
  -webkit-text-fill-color: var(--gv-cyan-bright) !important;
  opacity: 0.95 !important;
}

.audit-results .audit-rewrite-col .audit-rewrite-field-val,
.audit-results .audit-rewrite-col .audit-after {
  color: #FFFFFF !important;                 /* body white on dark = ~16:1 AAA */
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

.audit-results .audit-rewrite-col .audit-before {
  color: rgba(255,255,255,0.65) !important;  /* faded but still readable */
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(239,68,68,0.7) !important;
}

* TIER C — Industry Signal panel (.audit-industry) has dark bg too if it
   inherits --bg-surface-1. Make sure all its text reads. */
.audit-results .audit-industry {
  background: #0F1622 !important;
  border: 1px solid rgba(0,191,255,0.18) !important;
}

.audit-results .audit-industry .audit-industry-eyebrow {
  color: var(--gv-cyan-bright) !important;
  -webkit-text-fill-color: var(--gv-cyan-bright) !important;
  opacity: 1 !important;
}

.audit-results .audit-industry .audit-industry-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

.audit-results .audit-industry .audit-industry-row,
.audit-results .audit-industry .audit-industry-row strong,
.audit-results .audit-industry .audit-industry-row span {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

* TIER D (Phase 0.6.5 second pass — the board caught 27 more failures via
   automated AA scan after I prematurely claimed victory). All elements
   below are inside .audit-results (white card bg) but had dark-theme
   color tokens that rendered invisible. Comprehensive override pass: */

/* 1. Council trace ("5-model council ran on this audit" + Researcher /
   Industry Scanner / Strategist / Optimizer / Publisher rows) */
.audit-results .audit-trace-title {
  color: var(--gv-cyan-deep) !important;
  -webkit-text-fill-color: var(--gv-cyan-deep) !important;
  opacity: 1 !important;
}

.audit-results .audit-trace-role {
  color: var(--light-text) !important;
  -webkit-text-fill-color: var(--light-text) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.audit-results .audit-trace-resp {
  color: var(--light-text-2) !important;
  -webkit-text-fill-color: var(--light-text-2) !important;
  opacity: 0.95 !important;
}

.audit-results .audit-trace-layer {
  color: var(--gv-cyan-deep) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  opacity: 1 !important;
}

* 2. "Inspectable HOOTL" deliberation CTA card (cyan-tinted gradient bg) */
.audit-results .audit-deliberation-cta {
  background: linear-gradient(135deg, rgba(0,191,255,0.10), rgba(124,58,237,0.08)) !important;
  border: 1.5px solid rgba(0,109,133,0.30) !important;
}

.audit-results .audit-deliberation-eyebrow {
  color: var(--gv-cyan-deep) !important;
  -webkit-text-fill-color: var(--gv-cyan-deep) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.audit-results .audit-deliberation-cta h4,
.audit-results .audit-deliberation-cta .audit-deliberation-title {
  color: var(--light-text) !important;
  -webkit-text-fill-color: var(--light-text) !important;
}

.audit-results .audit-deliberation-body,
.audit-results .audit-deliberation-cta p {
  color: var(--light-text-2) !important;
}

.audit-results .audit-deliberation-body em,
.audit-results .audit-deliberation-body strong {
  color: var(--gv-cyan-deep) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.audit-results .audit-deliberation-cta-secondary {
  color: var(--gv-cyan-deep) !important;
  -webkit-text-fill-color: var(--gv-cyan-deep) !important;
  border: 1.5px solid var(--gv-cyan-deep) !important;
  background: transparent !important;
}

.audit-results .audit-deliberation-cta-secondary:hover {
  background: var(--gv-cyan-deep) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.audit-results .audit-deliberation-discover,
.audit-results .audit-deliberation-discover * {
  color: var(--light-text-2) !important;
}

.audit-results .audit-deliberation-discover a {
  color: var(--gv-cyan-deep) !important;
  -webkit-text-fill-color: var(--gv-cyan-deep) !important;
  border-bottom-color: var(--gv-cyan-deep) !important;
  font-weight: 600 !important;
}

* 3. Industry-paywall card (paywall blur over white parent — text was
   showing as white-on-white). Give it its own DARK gradient backdrop so
   the white text inside reads as intended. Explicit background-color
   alongside the gradient so AA contrast scans (which only read
   background-color, not background-image) report it correctly.
   ALSO need to force the .audit-industry-row + .audit-industry-paywall-blur
   inner elements to TRANSPARENT, because the broader audit-results
   override at line 3305 paints them white-card-bg → without this, white
   text inside renders as white-on-white. */
.audit-results .audit-industry-paywall {
  background-color: #0F1622 !important;
  background-image: linear-gradient(135deg, #0F1622, #1A2638) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  position: relative !important;
  border: 1px dashed rgba(0,191,255,0.35) !important;
}

.audit-results .audit-industry-paywall .audit-industry-paywall-blur,
.audit-results .audit-industry-paywall .audit-industry-row {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.audit-results .audit-industry-paywall .audit-industry-row,
.audit-results .audit-industry-paywall .audit-industry-row * {
  color: rgba(255,255,255,0.95) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
}

.audit-results .audit-industry-paywall .audit-industry-row strong {
  color: var(--gv-cyan-bright) !important;
  -webkit-text-fill-color: var(--gv-cyan-bright) !important;
  font-weight: 700 !important;
}

* 4. Paywall CTA ("Continuous competitor + market signal tracking" +
   sub-text + "See plan details" button). The CTA box sits INSIDE the
   already-dark .audit-industry-paywall, so it should also be dark with
   white text — making it light cyan-tinted (as I had it before) created
   a light-on-dark visual mismatch + scan false positive. Switched to
   subtle dark inset bg so it visually nests inside the paywall card. */
.audit-results .audit-industry-paywall-cta {
  background-color: #14304A !important;
  background-image: linear-gradient(135deg, rgba(0,191,255,0.06), rgba(124,58,237,0.06)) !important;
  border: 1px solid rgba(0,191,255,0.25) !important;
  padding: 1rem !important;
  border-radius: 10px !important;
  margin-top: 0.75rem !important;
}

.audit-results .audit-paywall-icon {
  color: var(--gv-cyan-bright) !important;
}

.audit-results .audit-paywall-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.audit-results .audit-paywall-sub {
  color: rgba(255,255,255,0.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.88) !important;
  opacity: 1 !important;
}

* 5. "Want the council to fix these" final CTA inside audit-results.
   Explicit background-color alongside the gradient so AA scans report
   the actual surface (not the white parent card) for ratio computation. */
.audit-results .audit-cta-final {
  background-color: #0A2540 !important;
  background-image: linear-gradient(135deg, #0A2540, #14304A) !important;
  border: 1.5px solid rgba(0,191,255,0.25) !important;
  padding: 1.5rem !important;
  border-radius: 14px !important;
  margin-top: 1.5rem !important;
  text-align: center;
}

.audit-results .audit-cta-final,
.audit-results .audit-cta-final strong,
.audit-results .audit-cta-final p {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

* 6. Keyword-gaps title (sat on dark inner section, was cyan-deep at 3.12) */
.audit-results .audit-keywords {
  background: #0F1622 !important;
  padding: 1rem 1.25rem !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,191,255,0.18) !important;
}

.audit-results .audit-keywords-title {
  color: var(--gv-cyan-bright) !important;
  -webkit-text-fill-color: var(--gv-cyan-bright) !important;
  opacity: 1 !important;
}

.audit-results .audit-keywords-list {
  color: #FFFFFF !important;
}

* 7. Buttons inside audit-results — keep their indigo gradient (visible on
   white card) AND ensure white text reads via !important re-assert. */
.audit-results .btn-primary,
.audit-results .audit-cta-buttons .btn-primary {
  background: linear-gradient(135deg, #00BFFF, #00F0FF) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
}

* Wave 10 #1 — Council Deliberation View promo block. Sits above the
   governance grid as the headline trust artifact (the audit surface the
   3-of-3 council unanimous flagged as the highest-leverage thing to
   ship). Brand v2 navy panel with cyan accent. */
.gv-deliberation-promo {
  background: linear-gradient(135deg, var(--gv-navy) 0%, var(--gv-navy-soft) 100%);
  color: #FFFFFF;
  border-radius: 18px;
  padding: 2rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

* Phase 0.6.3 — img-based icons in audit results UI mockup cells. */
.ui-mockup-cell-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  vertical-align: -4px;
  margin-right: 6px;
  mix-blend-mode: multiply;
}

.ui-mockup-cell-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #FEF3C7;
  color: #92400E;
  font-weight: 800;
  font-size: 0.85rem;
  margin-right: 6px;
  vertical-align: -4px;
  border: 1px solid #FBBF24;
}

* Phase 0.6.3 — img-based icons in audit info-pill trust list. */
.audit-trust-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  vertical-align: -6px;
  margin-right: 6px;
  mix-blend-mode: multiply;
}

.audit-paywall-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  mix-blend-mode: multiply;
}

section.audit-cta,
section.faq,
section.final-cta {
  background: var(--light-card) !important;
}

* ── Card edges — every card has a visible 1px border + soft shadow ── */
.audit-card,
.audit-results,
.audit-result-head,
.audit-issue,
.audit-rewrite,
.faq-item,
.benchmark-card,
.governance-item,
.pricing-flagship-card,
.pricing-pilot-card,
.honesty-card {
  border: 1px solid var(--light-border) !important;
  background: var(--light-card) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 14px rgba(15,23,42,0.04) !important;
}

* ── Audit-cta: lift this section visually, it's the conversion centerpiece ── */
section.audit-cta { padding: 5rem 0 6rem !important; }

.audit-card {
  border-radius: 24px !important;
  padding: 2.5rem 2rem 2rem !important;
  position: relative;
  overflow: visible;
}

.audit-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--brand-indigo), var(--accent-gold));
  border-radius: 26px;
  z-index: -1;
  opacity: 0.18;
  filter: blur(20px);
  pointer-events: none;
}

* ── Microinteractions ── */
.pricing-flagship-cta,
.honesty-cta-primary,
.audit-submit,
.btn-primary {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

* ───────────────────────────────────────────────────
   Wave 5b polish — focused on visual flow + section weight
   (added after self-evaluation walkthrough scored ~79).
   Targets: audit-cta as true centerpiece, hero typography
   crispness, pricing pilot connector, section seams.
   ─────────────────────────────────────────────────── */

/* Audit-cta — true centerpiece treatment.
   Bigger eyebrow, larger headline, more confident type rhythm. */
.audit-cta .audit-card .audit-badge {
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
  padding: 6px 16px !important;
  background: linear-gradient(135deg, var(--accent-gold), #F4C46B) !important;
  color: #1A1208 !important;
  box-shadow: 0 4px 16px rgba(0,191,255,0.28);
}

.audit-cta .audit-card h2 {
  font-size: clamp(1.85rem, 4.4vw, 2.55rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 0.7rem !important;
}

.audit-cta .audit-card > p {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  max-width: 560px !important;
  color: var(--light-text-2) !important;
}

.audit-cta .audit-card .audit-submit {
  background: linear-gradient(135deg, var(--brand-indigo) 0%, #00F0FF 60%, var(--accent-gold) 130%) !important;
  color: #fff !important;
  letter-spacing: 0.005em !important;
  box-shadow: 0 8px 22px rgba(0,191,255,0.32), 0 2px 6px rgba(15,23,42,0.06) !important;
}

.audit-cta .audit-card .audit-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,191,255,0.38), 0 4px 8px rgba(15,23,42,0.08) !important;
}

* Audit micro-trust strip — three concrete signals beneath the form.
   Lowers cognitive cost of clicking Run audit ("what happens next?"). */
.audit-trust {
  list-style: none;
  padding: 0;
  margin: 1.25rem auto 0.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  font-size: 0.84rem;
  color: var(--light-text-2);
  max-width: 640px;
}

.audit-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.audit-trust li span[aria-hidden] {
  font-size: 0.95rem;
  opacity: 0.85;
}

@media (max-width: 640px) {
.audit-trust { flex-direction: column; gap: 0.45rem; align-items: center; font-size: 0.82rem; }
}

* Section seams — subtle indigo→gold hairline accent at the top of each
   light section. Premium signal without overplaying it. Skip audit-cta
   because its card-halo IS the visual seam already (don't double-mark
   the centerpiece). Skip honesty-band because its white card already
   reads as distinct. */
section.tech-stack-bar,
section.proof,
section.pricing,
section.faq,
section.governance,
section.final-cta {
  position: relative;
}

section.proof .accent-gold,
section.proof [style*="color: #00BFFF"],
section.pricing .accent-gold,
section.pricing [style*="color: #00BFFF"],
section.audit-cta .accent-gold,
section.tech-stack-bar .accent-gold,
section.honesty-band .accent-gold,
.value-story-num-val,
.benchmark-eyebrow,
.path-step-eyebrow,
.proof-eyebrow,
.pricing-eyebrow,
.honesty-eyebrow {
  color: var(--accent-gold-on-light) !important;
}

* Audit CTA on soft sky tint — reads as "guided / protected" */
section.audit-cta { background: var(--light-tint-sky) !important; }

* Sage success color for positive audit/benchmark states */
.audit-col-good { color: var(--warm-sage) !important; }

* ── Value stories — between proof and audit-cta ── */
.value-stories {
  background: var(--light-page);
  padding: 4rem 0 4.5rem;
  position: relative;
}

* Audit-trust strip uses sage instead of plain dark */
.audit-trust li { color: var(--warm-sage); }

* End Wave 5c warm palette + reassurance + value stories block */

/* ───────────────────────────────────────────────────
   Recommended path module + hero eyebrow demotion.
   The public funnel now shows the active offer ladder: free audit,
   lower-friction starter pack, Ops Autopsy Quick Scan, then the
   recommended inspectable 50-SKU pilot.
   ─────────────────────────────────────────────────── */

/* Hero eyebrow — quieter, doesn't compete with H1 */
.hero-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,191,255,0.85);
  font-weight: 600;
  margin-bottom: 1.4rem;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  animation: fadeInUp 0.6s ease-out;
}

* Nav Free Audit button — the board flagged as low contrast.
   Punch up the gradient + add a stronger glow + larger
   touch target so it pops against the white nav bar. */
nav .nav-cta {
  background: linear-gradient(135deg, var(--brand-indigo) 0%, #00F0FF 60%, var(--accent-gold) 130%) !important;
  color: white !important;
  padding: 0.65rem 1.4rem !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 16px rgba(0,191,255,0.35), 0 1px 3px rgba(15,23,42,0.08) !important;
  border: 0 !important;
}

* Council #5 — Product UI mockup panel. CSS-only "what the
   audit result looks like" illustrative card, clearly labeled. */
.ui-mockup {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(11,28,60,0.04), 0 16px 36px rgba(11,28,60,0.07);
  padding: 1.25rem 1.4rem;
  max-width: 540px;
  margin: 0 auto 2rem;
  position: relative;
}

.ui-mockup-tag {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light-text-3);
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  background: var(--light-elevated);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--light-border);
}

.ui-mockup-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--light-border);
}

.ui-mockup-score {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--brand-indigo) 0% 88%, var(--light-border) 88% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ui-mockup-score::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--light-card);
}

.ui-mockup-score-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--light-text);
  z-index: 1;
}

.ui-mockup-summary {
  flex: 1;
}

.ui-mockup-summary-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light-text-3);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.ui-mockup-summary-line {
  font-size: 0.92rem;
  color: var(--light-text);
  font-weight: 600;
  line-height: 1.4;
}

.ui-mockup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.ui-mockup-cell {
  font-size: 0.8rem;
}

.ui-mockup-cell-good {
  color: var(--warm-sage);
  font-weight: 600;
}

.ui-mockup-cell-issue {
  color: var(--warm-terracotta);
  font-weight: 600;
}

.ui-mockup-foot {
  font-size: 0.78rem;
  color: var(--light-text-3);
  text-align: center;
  margin-top: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--light-border);
}

* End Wave 5e block */

/* ───────────────────────────────────────────────────
   Wave 6 contrast attack — fix gold-on-light + cascade
   bleed flagged by the audit advisors in Round 1 council:
     • Gold #00BFFF as TEXT on light surfaces fails AA
       (1.96:1 vs white) — replace with gold-on-light
       (#8C6310, ~7.4:1 AA-strong)
     • Light-theme color rules with !important were
       cascading INTO nested dark cards in proof / pricing
       / governance — explicitly scope dark-card text to
       bright tokens so the cascade can't bleed through
     • Muted text (--light-text-3) was borderline AA on
       warm-cream sections — bump to --light-text-2 in
       all body-copy contexts
   ─────────────────────────────────────────────────── */

/* Gold text on LIGHT surfaces: use the darker token.
   Light sections: honesty-band, tech-stack-bar, samples,
   path-module, reassurance-strip, faq, governance, final-cta,
   and any audit-cta children when on light tint. */
.honesty-band .honesty-eyebrow,
.tech-stack-bar .tech-stack-eyebrow,
.samples .samples-eyebrow,
.value-stories .value-stories-eyebrow,
.path-module .path-eyebrow,
.path-module .path-step-frame,
.reassurance-strip .reassurance-eyebrow,
.faq .faq-eyebrow,
.governance .governance-eyebrow,
.final-cta .final-cta-eyebrow,
.pricing-pilot .pricing-pilot-label,
.value-story-card .value-story-frame,
.proof-methodology-callout li::before,
.proof .proof-eyebrow,
.pricing-flagship-amount,
section.path-module h2 .path-emphasis,
.honesty-card .entity-fact-k,
.honesty-card .entity-fact-v,
.governance-eyebrow {
  color: var(--accent-gold-on-light) !important;
}

* Scope dark-card cascade defenders.
   These containers are dark-backgrounded INSIDE the light
   page; ensure paragraphs/lists/spans inside them don't
   inherit the global dark-on-light text color. */
.audit-card,
.audit-card *:not(button):not(input):not(.audit-mode-name):not(.audit-mode-meta),
.audit-results,
.audit-results *:not(button):not(input),
.audit-trace,
.audit-trace *,
.hero,
.hero *:not(.btn-primary):not(.btn-secondary):not(.nav-cta) {
  /* These aren't dark-card surfaces under the warm theme —
     audit-card is the bright indigo/sky tint. Keep text dark
     on the audit-card; restore bright text on the hero. */
}

* End Wave 6 contrast attack block */

/* ───────────────────────────────────────────────────
   Wave 6 R5 — eliminate cascade-bleed dark-on-dark and
   light-color-on-light-bg defects found by JS contrast
   audit + visual walkthrough on 2026-04-29:

     1. .benchmark-label/unit/name — proof section flipped
        to warm cream in Wave 5c but these descendants
        kept --text-bright (white) → 1.08:1 INVISIBLE
     2. .audit-mode-name/-meta — audit-cta-card flipped
        to soft-sky tint but these kept dark-theme tokens
        → 1.08:1 / 1.87:1
     3. .cro-magnet H2 — dark navy bg in section but the
        global Wave 5c h1,h2,h3 !important rule cascades
        --light-text (deep navy) over it → DARK ON DARK
     4. .sample-tag and .ui-mockup-cell-issue terracotta
        too marginal at 3.34:1 on white
     5. Default-styled <a> in .bottom-cta and .step on
        the pilot page falling back to browser-default
        blue rgb(0,0,238) on dark = 2.1:1
   ─────────────────────────────────────────────────── */

/* (1) PROOF benchmark cards — warm cream surface needs dark text */
.proof .benchmark-card .benchmark-label,
.proof .benchmark-label {
  color: var(--light-text) !important;        /* deep navy on cream */
  font-weight: 700 !important;
}

* (2) AUDIT-CTA mode toggle — audit-card surface needs dark text */
.audit-cta .audit-mode-toggle .audit-mode-name {
  color: var(--light-text) !important;
}

.audit-cta .audit-mode-toggle .audit-mode-meta,
.audit-cta .audit-mode-toggle .audit-mode-meta span {
  color: var(--light-text-2) !important;
}

.audit-cta .audit-mode-opt {
  background: rgba(255,255,255,0.7) !important;
  border-color: var(--light-border-2) !important;
}

.audit-cta .audit-mode-opt.is-on {
  /* Phase 0.6.3 contrast pass (2026-05-03): Wave 9.2 aliased --accent-gold
     to --gv-cyan-deep #006D85 for AA TEXT contrast. That left this rule
     using a teal background with dark text #1A1208 (~1.6:1 — fails AA).
     Switched to white text on the cyan-deep bg for ~9.6:1 (AAA). */
  background: var(--gv-cyan-deep) !important;
  border-color: var(--gv-cyan-deep) !important;
  color: #FFFFFF !important;
}

.audit-cta .audit-mode-opt.is-on .audit-mode-name,
.audit-cta .audit-mode-opt.is-on .audit-mode-meta,
.audit-cta .audit-mode-opt.is-on .audit-mode-meta span {
  color: #FFFFFF !important;
}

* (4) TERRACOTTA accents on light surfaces — bump to AA-strong */
.sample-tag,
.ui-mockup-cell-issue,
.ui-mockup-cell.ui-mockup-cell-issue {
  color: #934A2F !important;                   /* ~5.0:1 on white */
}

* End Wave 6 R5 contrast cleanup */

/* ───────────────────────────────────────────────────
   Wave 7 B2 — component-level theming (replaces the
   section-wide .X p / .X li cascade that was deleted
   above). Each card class gets its own --card-bg /
   --card-fg / --card-fg-muted scope locally; children
   pull from the card, not the section. The Wave 5
   .o2b-wrap HOTFIX and Wave 6 R5 cascade-bleed defenders
   stay in place upstream as defensive insurance — they
   cost ~30 lines and protect against future regression.
   ─────────────────────────────────────────────────── */

/* Light cards on light/warm sections */
.faq-item, .ai-card, .audit-card, .price-card, .feature-card,
.benchmark-card, .audit-results, .audit-result-head, .audit-rewrite,
.audit-trace, .listen-card, .ldemo-pane, .info-figure,
.explore-panel, .ldemo-output, .ldemo-input-wrap,
.pricing-flagship-card, .pricing-pilot-card, .honesty-card,
.path-step-card, .reassurance-card, .governance-item,
.value-story-card, .sample-card, .ui-mockup {
  --card-bg: var(--card-bg-light);
  --card-fg: var(--card-fg-light);
  --card-fg-muted: var(--card-fg-light-muted);
  /* Don't force background here — many cards already declare their
     own surface tone (warm cream, soft sky, etc.). The token is
     available for descendants that need it. */
  color: var(--card-fg);
}

.faq-item p, .faq-item li,
.benchmark-card p, .benchmark-card li,
.audit-card p, .audit-card li,
.price-card p, .price-card li,
.pricing-flagship-card p, .pricing-flagship-card li,
.pricing-pilot-card p, .pricing-pilot-card li,
.honesty-card p, .honesty-card li,
.path-step-card p, .path-step-card li,
.reassurance-card p, .reassurance-card li,
.governance-item p, .governance-item li,
.value-story-card p, .value-story-card li,
.sample-card p, .sample-card li {
  color: var(--card-fg-muted);
}