/* ═══════════════════════════════════════════════════════════════
   Holdfast Public Theme v4
   Bold, dark-first masculine design. 2026 aesthetic.
   No glassmorphism. No geometric shapes. Raw, confident, human.
   Supports 4 themes via data-theme attribute.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens: Default = Warm (dark earth, amber/gold) ── */
:root {
  --hf-primary: #F59E0B;
  --hf-primary-hover: #FBBF24;
  --hf-primary-light: rgba(245,158,11,0.15);
  --hf-primary-50: rgba(245,158,11,0.08);
  --hf-primary-900: #78350F;
  --hf-accent: #FBBF24;
  --hf-accent-light: rgba(251,191,36,0.15);

  --hf-white: #FFFFFF;
  --hf-bg: #0D0A07;
  --hf-bg-alt: #14100B;
  --hf-surface: #1A1510;
  --hf-surface-glass: #1A1510;
  --hf-border: #2E2720;
  --hf-border-light: #231E18;
  --hf-divider: #1E1912;

  --hf-ink: #FEF3C7;
  --hf-text: #BFB094;
  --hf-text-secondary: #8A7D6B;
  --hf-text-muted: #5C5347;

  --hf-amber: #F59E0B;
  --hf-amber-light: rgba(245,158,11,0.12);
  --hf-amber-50: rgba(245,158,11,0.06);
  --hf-coral: #EF4444;
  --hf-coral-light: rgba(239,68,68,0.12);
  --hf-emerald: #10B981;
  --hf-emerald-light: rgba(16,185,129,0.12);

  --hf-shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --hf-shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
  --hf-shadow: 0 4px 12px rgba(0,0,0,0.4);
  --hf-shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --hf-shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
  --hf-shadow-glow: 0 0 30px rgba(245,158,11,0.1);

  --hf-radius: 3px;
  --hf-radius-lg: 4px;
  --hf-radius-xl: 6px;
  --hf-radius-2xl: 8px;
  --hf-radius-full: 3px;

  --hf-font: 'Inter', system-ui, -apple-system, sans-serif;
  --hf-transition: 200ms ease;
  --hf-transition-slow: 400ms ease;

  --hf-max-w: 80rem;
  --hf-content-w: 56rem;

  /* Legacy aliases */
  --hf-snow: var(--hf-bg);
  --hf-mist: var(--hf-bg-alt);
  --hf-slate: var(--hf-text-secondary);
  --hf-slate-dark: var(--hf-text);
  --hf-navy: var(--hf-primary-900);
  --hf-sky: var(--hf-primary);
  --hf-sky-hover: var(--hf-primary-hover);
  --hf-sky-light: var(--hf-primary-light);
  --hf-sky-50: var(--hf-primary-50);
  --hf-sage: var(--hf-accent);
  --hf-sage-light: var(--hf-accent-light);
  --hf-sage-50: var(--hf-primary-50);
  --hf-teal: var(--hf-accent);
  --hf-teal-hover: var(--hf-primary-hover);
  --hf-teal-light: var(--hf-accent-light);
  --hf-teal-50: var(--hf-primary-50);
  --hf-blue: var(--hf-primary);
  --hf-blue-hover: var(--hf-primary-hover);
  --hf-blue-light: var(--hf-primary-light);
  --hf-blue-50: var(--hf-primary-50);
}

/* ══════════════════════════════════════════════════════════
   THEME: MIDNIGHT - Deep navy, cyan glow, techy polish
   ══════════════════════════════════════════════════════════ */
[data-theme="midnight"] {
  --hf-primary: #06B6D4;
  --hf-primary-hover: #22D3EE;
  --hf-primary-light: rgba(6,182,212,0.15);
  --hf-primary-50: rgba(6,182,212,0.08);
  --hf-primary-900: #164E63;
  --hf-accent: #22D3EE;
  --hf-accent-light: rgba(34,211,238,0.15);
  --hf-bg: #0C1222;
  --hf-bg-alt: #111828;
  --hf-surface: #182030;
  --hf-surface-glass: #182030;
  --hf-border: #243044;
  --hf-border-light: #1C2638;
  --hf-divider: #182030;
  --hf-ink: #F0F9FF;
  --hf-text: #94A3B8;
  --hf-text-secondary: #64748B;
  --hf-text-muted: #475569;
  --hf-shadow-glow: 0 0 30px rgba(6,182,212,0.12);
  --hf-emerald: #2DD4BF;
  --hf-emerald-light: rgba(45,212,191,0.15);
}

/* ══════════════════════════════════════════════════════════
   THEME: MONO - Editorial white, pure black type, zero color
   ══════════════════════════════════════════════════════════ */
[data-theme="mono"] {
  --hf-primary: #000000;
  --hf-primary-hover: #1A1A1A;
  --hf-primary-light: #F0F0F0;
  --hf-primary-50: #F7F7F7;
  --hf-primary-900: #000000;
  --hf-accent: #666666;
  --hf-accent-light: #E5E5E5;
  --hf-bg: #FFFFFF;
  --hf-bg-alt: #F7F7F7;
  --hf-surface: #FFFFFF;
  --hf-surface-glass: #FFFFFF;
  --hf-border: #E0E0E0;
  --hf-border-light: #EEEEEE;
  --hf-divider: #F0F0F0;
  --hf-ink: #000000;
  --hf-text: #333333;
  --hf-text-secondary: #666666;
  --hf-text-muted: #999999;
  --hf-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --hf-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --hf-shadow: 0 2px 8px rgba(0,0,0,0.08);
  --hf-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --hf-shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
  --hf-shadow-glow: none;
  --hf-radius: 0;
  --hf-radius-lg: 0;
  --hf-radius-xl: 0;
  --hf-radius-2xl: 0;
  --hf-radius-full: 0;
}
[data-theme="mono"] .emergency-banner {
  background: #000 !important;
  color: #FCA5A5 !important;
  border-bottom: none !important;
}
[data-theme="mono"] .emergency-banner a {
  color: #FCA5A5 !important;
}
[data-theme="mono"] .hf-nav {
  background: #FFFFFF !important;
  border-bottom: 2px solid #000 !important;
  backdrop-filter: none !important;
}
[data-theme="mono"] .hf-hero {
  border-bottom: 2px solid #000;
}
[data-theme="mono"] .hf-hero-label {
  background: #000 !important;
  color: #FFF !important;
  border: none !important;
}
[data-theme="mono"] .hf-hero-label::before { display: none !important; }
[data-theme="mono"] .hf-section-alt {
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}
[data-theme="mono"] .hf-card {
  border: 1px solid #E0E0E0 !important;
}
[data-theme="mono"] .hf-card:hover {
  border-color: #000 !important;
}
[data-theme="mono"] .hf-cta-block {
  background: #000 !important;
}
[data-theme="mono"] .hf-footer {
  background: #000 !important;
}
[data-theme="mono"] .hf-stat-value {
  color: #000 !important;
}
[data-theme="mono"] .hf-geo { display: none !important; }

/* ══════════════════════════════════════════════════════════
   THEME: BOLD - Electric blue on near-black
   ══════════════════════════════════════════════════════════ */
[data-theme="bold"] {
  --hf-primary: #3B82F6;
  --hf-primary-hover: #60A5FA;
  --hf-primary-light: rgba(59,130,246,0.15);
  --hf-primary-50: rgba(59,130,246,0.08);
  --hf-primary-900: #1E3A8A;
  --hf-accent: #60A5FA;
  --hf-accent-light: rgba(96,165,250,0.15);
  --hf-bg: #0A0A0B;
  --hf-bg-alt: #111113;
  --hf-surface: #161618;
  --hf-surface-glass: #161618;
  --hf-border: #2A2A2E;
  --hf-border-light: #1F1F23;
  --hf-divider: #1A1A1D;
  --hf-ink: #FFFFFF;
  --hf-text: #B0B0B8;
  --hf-text-secondary: #8A8A94;
  --hf-text-muted: #5A5A64;
  --hf-shadow-glow: 0 0 30px rgba(59,130,246,0.15);
}

/* ══════════════════════════════════════════════════════════
   BASE - Override Tailwind body classes
   ══════════════════════════════════════════════════════════ */
.hf-public {
  background: var(--hf-bg) !important;
  color: var(--hf-text) !important;
  font-family: var(--hf-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
  font-size: 1rem;
  position: relative;
  overflow-x: hidden;
}

.hf-public *, .hf-public *::before, .hf-public *::after {
  border-color: var(--hf-border-light);
}

/* ── Emergency Banner ── */
.hf-public .emergency-banner {
  background: #7F1D1D;
  color: #FCA5A5;
  border-bottom: 1px solid #991B1B;
  font-size: 0.8125rem;
  padding: 0.625rem 1.5rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
}

.hf-public .emergency-banner a {
  color: #FCA5A5;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hf-public .emergency-banner a:hover {
  color: #FECACA;
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   NAVIGATION - Minimal, dark, confident
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-nav {
  background: rgba(13, 10, 7, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hf-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.hf-public .hf-nav-inner {
  max-width: var(--hf-max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.hf-public .hf-nav-logo {
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--hf-ink);
  text-decoration: none;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.hf-public .hf-nav-logo::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 1.75rem;
  background: var(--hf-primary);
  flex-shrink: 0;
}

.hf-public .hf-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hf-public .hf-nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hf-text-secondary);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: var(--hf-radius);
  transition: color var(--hf-transition);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hf-public .hf-nav-link:hover {
  color: var(--hf-ink);
}

.hf-public .hf-nav-link.active {
  color: var(--hf-primary);
  font-weight: 600;
}

.hf-public .hf-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--hf-primary);
}

.hf-public .hf-nav-cta {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hf-bg);
  background: var(--hf-primary);
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--hf-radius);
  transition: all var(--hf-transition);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hf-public .hf-nav-cta:hover {
  background: var(--hf-primary-hover);
}

/* Mobile hamburger */
.hf-public .hf-nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--hf-ink);
}

.hf-public .hf-nav-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 768px) {
  .hf-public .hf-nav-inner {
    padding: 0 1rem;
  }

  .hf-public .hf-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hf-public .hf-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hf-bg);
    border-bottom: 1px solid var(--hf-border);
    box-shadow: var(--hf-shadow-md);
    flex-direction: column;
    padding: 1rem;
    gap: 0.25rem;
  }

  .hf-public .hf-nav-links.open {
    display: flex;
  }

  .hf-public .hf-nav-link,
  .hf-public .hf-nav-cta {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1rem;
  }

  .hf-public .hf-nav-link.active::after {
    display: none;
  }

  .hf-public .hf-nav-cta {
    margin-top: 0.5rem;
  }
}

/* ══════════════════════════════════════════════════════════
   HERO - Oversized type, bold, fills the space
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-hero {
  text-align: center;
  padding: clamp(3rem, 2rem + 4vw, 6rem) 2rem clamp(2.5rem, 2rem + 3vw, 5rem);
  position: relative;
  overflow: hidden;
  background: var(--hf-bg);
  border-bottom: 1px solid var(--hf-border);
}

.hf-public .hf-hero > * {
  position: relative;
  z-index: 1;
}

.hf-public .hf-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hf-primary);
  background: var(--hf-primary-50);
  padding: 0.5rem 1.25rem;
  border-radius: var(--hf-radius);
  margin-bottom: 1.5rem;
  border: 1px solid var(--hf-border);
}

.hf-public .hf-hero-label::before {
  content: '';
  width: 8px;
  height: 2px;
  background: var(--hf-primary);
}

.hf-public .hf-hero h1 {
  font-size: clamp(2.5rem, 1.75rem + 4vw, 4.5rem);
  font-weight: 800;
  color: var(--hf-ink);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 auto 1.25rem;
  max-width: 52rem;
}

.hf-public .hf-hero p {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
  color: var(--hf-text-secondary);
  max-width: 38rem;
  margin: 0 auto;
  line-height: 1.7;
}

/* Hero bright: employer pages */
.hf-public .hf-hero-bright {
  background: var(--hf-bg-alt);
}

.hf-public .hf-hero-bright::before {
  content: none;
}

/* ── Hero Action Buttons ── */
.hf-public .hf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS - Hard edges, bold, confident
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.875rem 2.25rem;
  border-radius: var(--hf-radius);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--hf-transition);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
}

.hf-public .hf-btn-primary {
  background: var(--hf-primary);
  color: #000;
}

.hf-public .hf-btn-primary:hover {
  background: var(--hf-primary-hover);
  box-shadow: var(--hf-shadow-glow);
}

.hf-public .hf-btn-secondary {
  background: transparent;
  color: var(--hf-ink);
  box-shadow: inset 0 0 0 1.5px var(--hf-border);
}

.hf-public .hf-btn-secondary:hover {
  box-shadow: inset 0 0 0 1.5px var(--hf-primary);
  color: var(--hf-primary);
}

.hf-public .hf-btn-teal {
  background: var(--hf-accent);
  color: #000;
}

.hf-public .hf-btn-teal:hover {
  background: var(--hf-primary-hover);
  box-shadow: var(--hf-shadow-glow);
}

.hf-public .hf-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS - Solid, hard-edged, no glass
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-card {
  background: var(--hf-surface);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  padding: 2rem;
  transition: border-color var(--hf-transition);
  position: relative;
}

.hf-public .hf-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--hf-primary);
  opacity: 0;
  transition: opacity var(--hf-transition);
  border-radius: var(--hf-radius-xl) 0 0 var(--hf-radius-xl);
}

.hf-public .hf-card:hover {
  border-color: var(--hf-primary);
}

.hf-public .hf-card:hover::before {
  opacity: 1;
}

.hf-public .hf-card h3 {
  font-weight: 700;
  color: var(--hf-ink);
  margin-bottom: 0.5rem;
}

.hf-public .hf-card p {
  font-size: 0.9375rem;
  color: var(--hf-text-secondary);
  line-height: 1.7;
}

/* Card that links */
.hf-public a.hf-card {
  text-decoration: none;
  display: block;
}

/* ── Service Cards ── */
.hf-public .service-card {
  background: var(--hf-surface);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  padding: 1.75rem;
  transition: border-color var(--hf-transition);
  position: relative;
}

.hf-public .service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--hf-primary);
  opacity: 0;
  transition: opacity var(--hf-transition);
}

.hf-public .service-card:hover {
  border-color: var(--hf-primary);
}

.hf-public .service-card:hover::before {
  opacity: 1;
}

.hf-public .service-card h3 {
  font-weight: 700;
  color: var(--hf-ink);
  margin-bottom: 0.25rem;
}

.hf-public .service-card p {
  font-size: 0.875rem;
  color: var(--hf-text-secondary);
}

/* ══════════════════════════════════════════════════════════
   SECTIONS - Wide, clean, bold dividers
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-section {
  padding: clamp(4rem, 3rem + 3vw, 7rem) 2rem;
  position: relative;
}

.hf-public .hf-section-alt {
  background: var(--hf-bg-alt);
  position: relative;
}

.hf-public .hf-section-dark {
  background: var(--hf-ink);
  color: var(--hf-bg);
}

.hf-public .hf-section-dark h2,
.hf-public .hf-section-dark h3 {
  color: var(--hf-bg);
}

.hf-public .hf-section-dark p,
.hf-public .hf-section-dark li {
  color: #5C5347;
}

.hf-public .hf-section-inner {
  max-width: var(--hf-max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hf-public .hf-section-narrow {
  max-width: var(--hf-content-w);
  margin: 0 auto;
}

/* ── Section Headings ── */
.hf-public .hf-heading {
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  font-weight: 800;
  color: var(--hf-ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hf-public .hf-subheading {
  font-size: 1.0625rem;
  color: var(--hf-text-secondary);
  max-width: 40rem;
  line-height: 1.7;
}

/* ── Stat / Trust Badges ── */
.hf-public .hf-stat {
  background: var(--hf-surface);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  padding: 2rem;
  text-align: center;
  position: relative;
}

.hf-public .hf-stat::before {
  content: none;
}

.hf-public .hf-stat-value {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--hf-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.625rem;
  font-variant-numeric: tabular-nums;
}

.hf-public .hf-stat-label {
  font-size: 0.8125rem;
  color: var(--hf-text-secondary);
  font-weight: 500;
}

/* ── Feature Grid ── */
.hf-public .hf-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.75rem;
  border-radius: var(--hf-radius-lg);
  transition: background var(--hf-transition);
}

.hf-public .hf-feature:hover {
  background: var(--hf-primary-50);
}

.hf-public .hf-feature-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hf-radius);
  background: var(--hf-primary-light);
  color: var(--hf-primary);
}

.hf-public .hf-feature-icon.teal {
  background: var(--hf-accent-light);
  color: var(--hf-accent);
}

.hf-public .hf-feature-icon.amber {
  background: var(--hf-amber-light);
  color: var(--hf-amber);
}

.hf-public .hf-feature h4 {
  font-weight: 700;
  color: var(--hf-ink);
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
}

.hf-public .hf-feature p {
  font-size: 0.8125rem;
  color: var(--hf-text-secondary);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-input,
.hf-public input[type="text"],
.hf-public input[type="email"],
.hf-public input[type="tel"],
.hf-public input[type="number"],
.hf-public textarea,
.hf-public select {
  font-family: var(--hf-font);
}

.hf-public .hf-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: var(--hf-surface);
  border: 1.5px solid var(--hf-border);
  border-radius: var(--hf-radius);
  font-size: 0.9375rem;
  color: var(--hf-ink);
  outline: none;
  transition: border-color var(--hf-transition), box-shadow var(--hf-transition);
}

.hf-public .hf-input:focus {
  border-color: var(--hf-primary);
  box-shadow: 0 0 0 3px var(--hf-primary-50);
}

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

.hf-public .hf-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hf-text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hf-public .hf-select {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: var(--hf-surface);
  border: 1.5px solid var(--hf-border);
  border-radius: var(--hf-radius);
  font-size: 0.9375rem;
  color: var(--hf-ink);
  font-family: var(--hf-font);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  transition: border-color var(--hf-transition), box-shadow var(--hf-transition);
}

.hf-public .hf-select:focus {
  border-color: var(--hf-primary);
  box-shadow: 0 0 0 3px var(--hf-primary-50);
}

/* ── Assessment ── */
.hf-public .assessment-option {
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  border-radius: var(--hf-radius);
  border: 1.5px solid var(--hf-border);
  background: var(--hf-surface);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--hf-text);
  transition: all var(--hf-transition);
}

.hf-public .assessment-option:hover {
  border-color: var(--hf-primary);
  color: var(--hf-ink);
}

.hf-public .assessment-option.selected {
  border-color: var(--hf-primary);
  background: var(--hf-primary-light);
  color: var(--hf-primary);
}

.hf-public .assessment-progress {
  height: 3px;
  background: var(--hf-border);
  border-radius: 0;
  overflow: hidden;
}

.hf-public .assessment-progress-bar {
  height: 100%;
  background: var(--hf-primary);
  border-radius: 0;
  transition: width 400ms ease;
}

/* ── Escalation Ladder ── */
.hf-public .ladder-step {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 2.5rem;
  border-left: 2px solid var(--hf-border);
}

.hf-public .ladder-step:last-child {
  border-left-color: transparent;
}

.hf-public .ladder-step::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--hf-primary);
  border: 3px solid var(--hf-bg);
  box-shadow: 0 0 0 2px var(--hf-primary);
}

.hf-public .ladder-step.danger::before {
  background: var(--hf-coral);
  box-shadow: 0 0 0 2px var(--hf-coral);
}

.hf-public .ladder-step.warning::before {
  background: var(--hf-amber);
  box-shadow: 0 0 0 2px var(--hf-amber);
}

/* ── Pricing Cards ── */
.hf-public .hf-pricing {
  background: var(--hf-surface);
  border: 1.5px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  padding: 2.5rem;
  text-align: center;
  transition: border-color var(--hf-transition);
  position: relative;
}

.hf-public .hf-pricing:hover {
  border-color: var(--hf-primary);
}

.hf-public .hf-pricing-featured {
  border-color: var(--hf-primary);
  box-shadow: var(--hf-shadow-glow);
}

.hf-public .hf-pricing-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  background: var(--hf-primary);
  padding: 0.375rem 1rem;
  border-radius: var(--hf-radius);
  margin-bottom: 1rem;
}

.hf-public .hf-pricing h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hf-ink);
  margin-bottom: 0.5rem;
}

.hf-public .hf-pricing-amount {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--hf-ink);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.hf-public .hf-pricing-period {
  font-size: 0.8125rem;
  color: var(--hf-text-secondary);
  font-weight: 400;
}

.hf-public .hf-pricing ul {
  text-align: left;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.hf-public .hf-pricing li {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--hf-text);
  border-bottom: 1px solid var(--hf-divider);
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.hf-public .hf-pricing li::before {
  content: '\2713';
  color: var(--hf-emerald);
  font-weight: 700;
  flex-shrink: 0;
}

.hf-public .hf-pricing li:last-child {
  border-bottom: none;
}

/* ── FAQ Accordion ── */
.hf-public .hf-faq {
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  overflow: hidden;
}

.hf-public .hf-faq-item {
  border-bottom: 1px solid var(--hf-border);
}

.hf-public .hf-faq-item:last-child {
  border-bottom: none;
}

.hf-public .hf-faq-q {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  background: var(--hf-surface);
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hf-ink);
  font-family: var(--hf-font);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color var(--hf-transition);
}

.hf-public .hf-faq-q:hover {
  color: var(--hf-primary);
}

.hf-public .hf-faq-q svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--hf-text-muted);
  transition: transform 200ms ease;
}

.hf-public .hf-faq-a {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--hf-text-secondary);
  line-height: 1.7;
}

/* ── Tags / Badges ── */
.hf-public .hf-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--hf-radius);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hf-public .hf-badge-sky {
  background: var(--hf-primary-light);
  color: var(--hf-primary);
}

.hf-public .hf-badge-teal {
  background: var(--hf-accent-light);
  color: var(--hf-accent);
}

.hf-public .hf-badge-amber {
  background: var(--hf-amber-light);
  color: var(--hf-amber);
}

.hf-public .hf-badge-coral {
  background: var(--hf-coral-light);
  color: var(--hf-coral);
}

.hf-public .hf-badge-emerald {
  background: var(--hf-emerald-light);
  color: var(--hf-emerald);
}

/* ── Callout Boxes ── */
.hf-public .hf-callout {
  border-radius: var(--hf-radius);
  padding: 1.75rem;
  border-left: 3px solid;
}

.hf-public .hf-callout-sky {
  background: var(--hf-primary-50);
  border-color: var(--hf-primary);
}

.hf-public .hf-callout-amber {
  background: var(--hf-amber-50);
  border-color: var(--hf-amber);
}

.hf-public .hf-callout-teal {
  background: var(--hf-primary-50);
  border-color: var(--hf-accent);
}

/* ── Helplines Box ── */
.hf-public .hf-helplines {
  background: var(--hf-surface);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  padding: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hf-public .hf-helplines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hf-primary);
}

.hf-public .hf-helplines::after {
  content: none;
}

.hf-public .hf-helplines h3 {
  color: var(--hf-ink);
  font-weight: 700;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
}

.hf-public .hf-helplines a {
  color: var(--hf-primary);
  text-decoration: none;
  transition: color var(--hf-transition);
}

.hf-public .hf-helplines a:hover {
  color: var(--hf-primary-hover);
}

/* ── Dark panel labels: ensure contrast on cream bg ── */
.hf-public .hf-section-dark .text-teal-400 {
  color: var(--hf-primary) !important;
}

/* ── Dark panel sub-cards (amber bg): brown titles, readable body ── */
.hf-public .hf-section-dark .bg-navy-900 h3,
.hf-public .hf-section-dark .bg-navy-900 .hf-card-title {
  color: var(--hf-primary-900) !important;
}

.hf-public .hf-section-dark .bg-navy-900 p,
.hf-public .hf-section-dark .bg-navy-900 li {
  color: #44300D !important;
}

/* ══════════════════════════════════════════════════════════
   FOOTER - Dark, clean, bold accent bar
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-footer {
  background: #050506;
  padding: 4rem 2rem 3rem;
  margin-top: 0;
  color: var(--hf-text-secondary);
  position: relative;
  overflow: hidden;
}

.hf-public .hf-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hf-primary);
}

.hf-public .hf-footer::after {
  content: none;
}

.hf-public .hf-footer-inner {
  max-width: var(--hf-max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}

.hf-public .hf-footer-brand {
  max-width: 22rem;
}

.hf-public .hf-footer-brand h3 {
  color: var(--hf-ink);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hf-public .hf-footer-brand h3::before {
  content: '';
  width: 0.375rem;
  height: 1.25rem;
  background: var(--hf-primary);
  flex-shrink: 0;
}

.hf-public .hf-footer-brand p {
  font-size: 0.875rem;
  color: var(--hf-text-muted);
  line-height: 1.7;
}

.hf-public .hf-footer-links {
  display: flex;
  gap: 3.5rem;
}

.hf-public .hf-footer-col h4 {
  color: var(--hf-text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hf-public .hf-footer-col a {
  display: block;
  color: var(--hf-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.3125rem 0;
  transition: color var(--hf-transition);
}

.hf-public .hf-footer-col a:hover {
  color: var(--hf-ink);
}

.hf-public .hf-footer-bottom {
  width: 100%;
  border-top: 1px solid var(--hf-border);
  padding-top: 1.75rem;
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.hf-public .hf-footer-bottom p {
  font-size: 0.8125rem;
  color: var(--hf-text-muted);
}

/* Legacy simple footer fallback */
.hf-public .hf-footer p {
  font-size: 0.875rem;
  color: var(--hf-text-muted);
}

.hf-public .hf-footer a {
  color: var(--hf-primary);
  text-decoration: none;
  transition: color var(--hf-transition);
}

.hf-public .hf-footer a:hover {
  color: var(--hf-primary-hover);
}

@media (max-width: 640px) {
  .hf-public .hf-footer {
    padding: 3rem 1.25rem 2rem;
  }

  .hf-public .hf-footer-inner {
    flex-direction: column;
  }

  .hf-public .hf-footer-links {
    flex-direction: column;
    gap: 2rem;
  }

  .hf-public .hf-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════
   UTILITY OVERRIDES - Tailwind class mapping
   Remaps light-mode Tailwind utilities to dark theme
   ══════════════════════════════════════════════════════════ */

/* ── Backgrounds ── */
.hf-public .bg-white { background-color: var(--hf-surface) !important; }
.hf-public .bg-gray-50 { background-color: var(--hf-bg-alt) !important; }
.hf-public .bg-gray-100 { background-color: var(--hf-bg-alt) !important; }
.hf-public .bg-gray-200 { background-color: var(--hf-border) !important; }

/* ── Text colors ── */
.hf-public .text-gray-300 { color: var(--hf-text) !important; }
.hf-public .text-gray-400 { color: var(--hf-text-muted) !important; }
.hf-public .text-gray-500 { color: var(--hf-text-secondary) !important; }
.hf-public .text-gray-600 { color: var(--hf-text) !important; }
.hf-public .text-gray-700 { color: var(--hf-text) !important; }
.hf-public .text-gray-800 { color: var(--hf-ink) !important; }
.hf-public .text-gray-900 { color: var(--hf-ink) !important; }

/* ── Border colors ── */
.hf-public .border-gray-100 { border-color: var(--hf-border-light) !important; }
.hf-public .border-gray-200 { border-color: var(--hf-border) !important; }
.hf-public .border-gray-300 { border-color: var(--hf-border) !important; }
.hf-public .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hf-border-light) !important; }
.hf-public .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hf-border) !important; }

/* ── Rounded overrides for brutalist feel ── */
.hf-public .rounded-xl { border-radius: var(--hf-radius-xl) !important; }
.hf-public .rounded-2xl { border-radius: var(--hf-radius-2xl) !important; }
.hf-public .rounded-lg { border-radius: var(--hf-radius-lg) !important; }
.hf-public .rounded-full { border-radius: var(--hf-radius-full) !important; }

/* ── Form inputs inside hf-public ── */
.hf-public input[type="text"],
.hf-public input[type="email"],
.hf-public input[type="tel"],
.hf-public input[type="number"],
.hf-public input[type="password"],
.hf-public select,
.hf-public textarea {
  background-color: var(--hf-surface) !important;
  border-color: var(--hf-border) !important;
  color: var(--hf-ink) !important;
}
.hf-public input::placeholder,
.hf-public textarea::placeholder {
  color: var(--hf-text-muted) !important;
}
.hf-public input:focus,
.hf-public select:focus,
.hf-public textarea:focus {
  border-color: var(--hf-primary) !important;
  --tw-ring-color: var(--hf-primary-light) !important;
}
.hf-public select option {
  background: var(--hf-surface);
  color: var(--hf-ink);
}

/* ── Custom brand colors ── */
.hf-public .text-navy-900 { color: var(--hf-ink) !important; }
.hf-public .text-navy-800 { color: var(--hf-ink) !important; }
.hf-public .text-navy-700 { color: var(--hf-primary) !important; }
.hf-public .text-navy-600 { color: var(--hf-primary) !important; }
.hf-public .text-navy-500 { color: var(--hf-primary) !important; }
.hf-public .bg-navy-50 { background: var(--hf-primary-50) !important; }
.hf-public .bg-navy-800 { background: var(--hf-primary) !important; }
.hf-public .bg-navy-900 { background: var(--hf-primary) !important; }
.hf-public .bg-navy-950 { background: var(--hf-ink) !important; }
.hf-public .text-navy-950 { color: var(--hf-ink) !important; }
.hf-public .text-teal-400 { color: var(--hf-accent) !important; }
.hf-public .text-teal-500 { color: var(--hf-primary) !important; }
.hf-public .text-teal-600 { color: var(--hf-primary) !important; }
.hf-public .bg-teal-500 { background: var(--hf-primary) !important; }
.hf-public .bg-teal-50 { background: var(--hf-primary-50) !important; }
.hf-public .text-teal-700 { color: var(--hf-primary) !important; }
.hf-public .border-navy-500 { border-color: var(--hf-primary) !important; }
.hf-public .focus\:border-navy-500:focus { border-color: var(--hf-primary) !important; }
.hf-public .focus\:ring-navy-500:focus { --tw-ring-color: var(--hf-primary-light) !important; }
.hf-public .hover\:bg-navy-700:hover { background: var(--hf-primary-hover) !important; }
.hf-public .hover\:bg-navy-800:hover { background: var(--hf-primary-hover) !important; }
.hf-public .hover\:text-navy-800:hover { color: var(--hf-primary) !important; }
.hf-public .hover\:border-navy-500:hover { border-color: var(--hf-primary) !important; }

/* ── Status colors (keep visible on dark) ── */
.hf-public .text-red-400,
.hf-public .text-red-500 { color: var(--hf-coral) !important; }
.hf-public .text-green-500,
.hf-public .text-green-600 { color: var(--hf-emerald) !important; }
.hf-public .text-yellow-500 { color: var(--hf-amber) !important; }
.hf-public .bg-red-50 { background: var(--hf-coral-light) !important; }
.hf-public .bg-green-50 { background: var(--hf-emerald-light) !important; }
.hf-public .bg-yellow-50 { background: var(--hf-amber-light) !important; }
.hf-public .border-red-200 { border-color: rgba(239,68,68,0.2) !important; }
.hf-public .border-green-200 { border-color: rgba(16,185,129,0.2) !important; }

/* ── Shadow overrides ── */
.hf-public .shadow { box-shadow: var(--hf-shadow) !important; }
.hf-public .shadow-sm { box-shadow: var(--hf-shadow-sm) !important; }
.hf-public .shadow-md { box-shadow: var(--hf-shadow-md) !important; }
.hf-public .shadow-lg { box-shadow: var(--hf-shadow-lg) !important; }

/* ── Hover state overrides ── */
.hf-public .hover\:bg-gray-50:hover { background-color: var(--hf-primary-50) !important; }
.hf-public .hover\:bg-gray-100:hover { background-color: var(--hf-bg-alt) !important; }
.hf-public .hover\:bg-white:hover { background-color: var(--hf-surface) !important; }
.hf-public .hover\:text-gray-900:hover { color: var(--hf-ink) !important; }
.hf-public .hover\:border-gray-300:hover { border-color: var(--hf-primary) !important; }

/* ── Ring overrides ── */
.hf-public .ring-1 { --tw-ring-color: var(--hf-border) !important; }
.hf-public .focus\:ring-2:focus { --tw-ring-color: var(--hf-primary-light) !important; }

/* ══════════════════════════════════════════════════════════
   GRID UTILITIES
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.hf-public .hf-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.hf-public .hf-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .hf-public .hf-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .hf-public .hf-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .hf-public .hf-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.hf-public .hf-grid-4-wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
}

.hf-public .hf-grid-3-wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .hf-public .hf-grid-4-wide { grid-template-columns: repeat(2, 1fr); }
  .hf-public .hf-grid-3-wide { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .hf-public .hf-grid-4-wide { grid-template-columns: repeat(4, 1fr); }
  .hf-public .hf-grid-3-wide { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   TAGS / PILLS
   ══════════════════════════════════════════════════════════ */
.hf-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hf-text-secondary);
  background: var(--hf-surface);
  border: 1px solid var(--hf-border);
  padding: 0.4375rem 1rem;
  border-radius: var(--hf-radius);
  transition: all var(--hf-transition);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hf-tag:hover {
  border-color: var(--hf-primary);
  color: var(--hf-primary);
}

/* ══════════════════════════════════════════════════════════
   TIMELINE
   ══════════════════════════════════════════════════════════ */
.hf-timeline {
  position: relative;
  padding-left: 3rem;
}

.hf-timeline::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--hf-primary), var(--hf-border));
}

.hf-timeline-item {
  position: relative;
  padding-bottom: 2.5rem;
}

.hf-timeline-item:last-child {
  padding-bottom: 0;
}

.hf-timeline-dot {
  position: absolute;
  left: -1.75rem;
  top: 0.125rem;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hf-timeline-dot::before {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  background: var(--hf-primary);
  border: 3px solid var(--hf-bg);
  box-shadow: 0 0 0 2px var(--hf-primary);
  border-radius: 50%;
}

.hf-timeline-dot.done::before {
  background: var(--hf-emerald);
  box-shadow: 0 0 0 2px var(--hf-emerald);
}

.hf-timeline-item h3 {
  font-weight: 700;
  color: var(--hf-ink);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.hf-timeline-item p {
  font-size: 0.9375rem;
  color: var(--hf-text-secondary);
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════
   NUMBERED STEP CARDS
   ══════════════════════════════════════════════════════════ */
.hf-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.hf-step-num {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 900;
  color: #000;
  background: var(--hf-primary);
  border-radius: var(--hf-radius);
}

.hf-step-content h3 {
  font-weight: 700;
  color: var(--hf-ink);
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

.hf-step-content p {
  font-size: 0.9375rem;
  color: var(--hf-text-secondary);
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════
   LARGE STAT CARDS
   ══════════════════════════════════════════════════════════ */
.hf-stat-lg {
  text-align: center;
  padding: 2rem;
}

.hf-stat-lg .hf-stat-value {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* ══════════════════════════════════════════════════════════
   SPLIT SECTION (2 columns)
   ══════════════════════════════════════════════════════════ */
.hf-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .hf-split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.hf-split-text h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  font-weight: 800;
  color: var(--hf-ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.hf-split-text p {
  font-size: 1.0625rem;
  color: var(--hf-text-secondary);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.hf-split-text p:last-child {
  margin-bottom: 0;
}

.hf-split-text .hf-highlight {
  color: var(--hf-primary);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   DARK CTA BLOCK
   ══════════════════════════════════════════════════════════ */
.hf-cta-block {
  background: var(--hf-surface);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  padding: clamp(3rem, 2rem + 3vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hf-cta-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hf-primary);
}

.hf-cta-block::after {
  content: none;
}

.hf-cta-block h2 {
  color: var(--hf-ink) !important;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.hf-cta-block p {
  color: var(--hf-text-secondary) !important;
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 32rem;
  margin: 0 auto 2rem;
}

.hf-cta-block .hf-check-list {
  list-style: none;
  padding: 0;
  max-width: 24rem;
  margin: 0 auto 2.5rem;
  text-align: left;
}

.hf-cta-block .hf-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: var(--hf-text);
  font-size: 0.9375rem;
}

.hf-cta-block .hf-check-list li svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--hf-emerald);
  margin-top: 0.125rem;
}

.hf-cta-block .hf-btn-primary {
  background: var(--hf-primary) !important;
  color: #000 !important;
}

.hf-cta-block .hf-btn-primary:hover {
  background: var(--hf-primary-hover) !important;
  box-shadow: var(--hf-shadow-glow);
}

.hf-cta-block .hf-small {
  font-size: 0.8125rem;
  color: var(--hf-text-muted) !important;
  margin-top: 1rem;
}

/* ══════════════════════════════════════════════════════════
   TRAINING MODULE LIST
   ══════════════════════════════════════════════════════════ */
.hf-module-list {
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-xl);
  overflow: hidden;
  background: var(--hf-surface);
}

.hf-module {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--hf-divider);
  transition: background var(--hf-transition);
}

.hf-module:last-child {
  border-bottom: none;
}

.hf-module:hover {
  background: var(--hf-primary-50);
}

.hf-module-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: #000;
  background: var(--hf-primary);
  border-radius: var(--hf-radius);
}

.hf-module-info h3 {
  font-weight: 700;
  color: var(--hf-ink);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.hf-module-info h3 span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--hf-text-muted);
}

.hf-module-info p {
  font-size: 0.9375rem;
  color: var(--hf-text-secondary);
  line-height: 1.7;
  margin-top: 0.25rem;
}

/* ══════════════════════════════════════════════════════════
   ORG INFO CARD
   ══════════════════════════════════════════════════════════ */
.hf-org-card {
  background: var(--hf-surface);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius);
  padding: 1.5rem 2rem;
  display: inline-block;
}

.hf-org-card strong {
  color: var(--hf-ink);
  font-weight: 700;
}

.hf-org-card p {
  font-size: 0.9375rem;
  color: var(--hf-text-secondary);
  margin: 0;
}

.hf-org-card p + p {
  margin-top: 0.125rem;
}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════ */
.hf-public .hf-fade-in {
  animation: hfFadeIn 0.4s ease-out forwards;
}

.hf-public .hf-fade-in-up {
  animation: hfFadeInUp 0.5s ease-out forwards;
}

@keyframes hfFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hfFadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hf-public .hf-fade-in,
  .hf-public .hf-fade-in-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════
   DECORATIVE GEOMETRIC SHAPES (hidden by default now)
   ══════════════════════════════════════════════════════════ */
.hf-geo {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */
@media print {
  .hf-public .hf-nav,
  .hf-public .emergency-banner,
  .hf-public .hf-nav-toggle {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════
   THEME SWITCHER (dev/preview only)
   ══════════════════════════════════════════════════════════ */
.hf-theme-switcher {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10000;
  background: #111113;
  border: 1px solid #2A2A2E;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none;
  flex-direction: column;
  gap: 0.375rem;
  font-family: var(--hf-font);
}

.hf-theme-switcher span {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #5A5A64;
  margin-bottom: 0.25rem;
}

.hf-theme-switcher button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: none;
  border: 1.5px solid transparent;
  color: #8A8A94;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4375rem 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 150ms ease;
  font-family: inherit;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hf-theme-switcher button:hover {
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
}

.hf-theme-switcher button.active {
  border-color: var(--hf-primary);
  background: rgba(255,255,255,0.04);
  color: #FFFFFF;
}

.hf-theme-switcher button .swatch {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}