/*
 * Companion stylesheet for the System Health Check funnel
 * (/av-health-check + /av-health-report).
 *
 * The two pages carry the design verbatim as inline styles (the design handoff's
 * source of truth). This file supplies only what inline styles can't express:
 * base document styles, keyframes, :hover / :focus states, and the responsive
 * breakpoints the desktop-first design leaves open. Hover/focus/responsive rules
 * use !important because they must win over the element's own inline style.
 */

/* ---- Base (ported from the prototype <style> block) ---- */
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: #14130F;
  color: #F4F0E8;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
::selection { background: #C6A15B; color: #14130F; }
a { color: #D9B872; text-decoration: none; }
a:hover { color: #E6CF97; }
img { max-width: 100%; }

/* ---- Keyframes ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Interactive states (override inline styles) ---- */
.hc-btn-outline:hover { background: rgba(198,161,91,0.1) !important; border-color: #C6A15B !important; }
.hc-btn-gold:not(:disabled):hover { background: #D9B872 !important; }
.hc-btn-dark:hover { background: #2A2620 !important; }
.hc-link-founder:hover { color: #C6A15B !important; }
.hc-link-back:hover { color: #D9B872 !important; }
.hc-opt:hover { border-color: rgba(198,161,91,0.65) !important; }
.hc-input:focus { border-color: #C6A15B !important; }

/* ---- Responsive: the design is desktop-first; these collapse it gracefully.
 *      Hero drops to one column with the quiz card below the copy; multi-column
 *      grids stack; decorative column dividers are dropped. ---- */
@media (max-width: 900px) {
  .hc-hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; min-height: 0 !important; padding-top: 40px !important; padding-bottom: 48px !important; }
  .hc-hero-media { width: 100% !important; }
  .hc-hero-scrim { background: linear-gradient(180deg, rgba(20,19,15,0.66), rgba(20,19,15,0.92)) !important; }
  .hc-hero-report { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hc-pitch-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hc-grid-3 { grid-template-columns: 1fr !important; }
  .hc-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 32px 24px !important; }
  .hc-stat-div { border-left: none !important; }
  .hc-fieldstat-mid { border-left: none !important; border-right: none !important; padding: 0 !important; }
}

@media (max-width: 600px) {
  .hc-grid-2 { grid-template-columns: 1fr !important; }
  .hc-grid-4 { grid-template-columns: 1fr !important; }
  /* Hero trust stats: a clean 2x2 grid instead of a flex row whose border
     dividers wrap awkwardly onto the second line. */
  .hc-hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px 14px !important; }
  .hc-hero-stat { padding: 0 !important; border-left: none !important; }
  /* Nav gets crowded on phones: drop the "Austin, TX" label, tighten padding,
     shrink the logo, and keep the CTA on one line so it never clips. */
  .hc-nav-loc { display: none !important; }
  .hc-nav-inner { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }
  .hc-nav-inner img { height: 30px !important; }
  .hc-nav-inner button { font-size: 13px !important; padding: 10px 14px !important; letter-spacing: 0.02em !important; white-space: nowrap; }
}