/* ============================================================
   HEALTHSPAN INDEX — marketing / landing page for the separate
   longevity-intelligence product (hosted on Render). Terminal feel.
   ============================================================ */
:root { --hsx-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; }

/* ---- HERO (dark terminal) ---- */
.hsx-hero {
  position: relative; overflow: hidden;
  background: #2E4239; color: #F4F4F4;
  padding: var(--space-20) var(--space-6) var(--space-16);}
.hsx-hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(124,168,142,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,168,142,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);}
.hsx-hero-inner { position: relative; max-width: var(--content-page); margin: 0 auto; text-align: center;}
.hsx-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--hsx-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  color: #C6C6C6; background: rgba(255,255,255,0.10);
  border: 1px solid rgba(124,168,142,0.25);
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); margin-bottom: var(--space-6);}
.hsx-badge.dark { color: var(--color-text-muted); background: var(--color-field); border-color: transparent;}
.hsx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent);}
.hsx-hero h1 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; color: #FFFFFF; margin-bottom: var(--space-4);}
.hsx-tagline { font-size: var(--text-lg); font-weight: 600; color: #F4F4F4; margin-bottom: var(--space-3);}
.hsx-lede { font-size: var(--text-base); color: #C6C6C6; line-height: 1.7; max-width: 62ch; margin: 0 auto var(--space-10);}

.hsx-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  max-width: var(--content-page); margin: 0 auto var(--space-10);}
.hsx-stat {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(124,168,142,0.18);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); text-align: center;}
.hsx-num { display: block; font-family: var(--hsx-mono); font-size: var(--text-lg); font-weight: 700; color: #FFFFFF; letter-spacing: -0.02em;}
.hsx-lab { display: block; font-size: var(--text-xs); color: #C6C6C6; margin-top: var(--space-1);}

.hsx-cta-row { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap;}
.hsx-cta-ghost { color: #C6C6C6; font-weight: 600; font-size: var(--text-sm);}
.hsx-cta-ghost:hover { color: #FFFFFF; text-decoration: underline;}

/* ---- SECTIONS ---- */
.hsx-section { padding: var(--space-16) var(--space-6); background: var(--color-bg);}
.hsx-section.hsx-alt { background: var(--color-surface-2);}
.hsx-inner { max-width: var(--content-page); margin: 0 auto;}
.hsx-eyebrow {
  font-family: var(--hsx-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-primary-text); margin-bottom: var(--space-6);}

/* Coverage */
.hsx-cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);}
.hsx-cat-col h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-4); color: var(--color-text);}
.hsx-cat-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2);}
.hsx-cat-col li {
  font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface); box-shadow: var(--shadow-xs);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-primary);}

/* How to read — features */
.hsx-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);}
.hsx-feature {
  background: var(--color-surface); box-shadow: var(--shadow-sm); border-radius: var(--radius-xl);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2);}
.hsx-fnum { font-family: var(--hsx-mono); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent);}
.hsx-feature h3 { font-size: var(--text-base); font-weight: 700; color: var(--color-text);}
.hsx-feature p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6;}

/* Audience */
.hsx-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);}
.hsx-aud { background: var(--color-surface); box-shadow: var(--shadow-sm); border-radius: var(--radius-xl); padding: var(--space-6);}
.hsx-aud h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2); color: var(--color-text);}
.hsx-aud p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6;}

/* How it works */
.hsx-works { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-10); align-items: center;}
.hsx-works h2 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-3); color: var(--color-text);}
.hsx-works p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-3);}
.hsx-caveat { color: var(--color-text)!important; font-weight: 600;}
.hsx-sources { display: flex; flex-direction: column; gap: var(--space-3);}
.hsx-source {
  background: var(--color-surface); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); display: flex; flex-direction: column;}
.hsx-source span { font-family: var(--hsx-mono); font-weight: 700; color: var(--color-text);}
.hsx-source small { font-size: var(--text-xs); color: var(--color-text-muted);}

/* Access */
.hsx-access { background: #2E4239; color: #F4F4F4; padding: var(--space-20) var(--space-6); text-align: center;}
.hsx-access-inner { max-width: var(--content-page); margin: 0 auto;}
.hsx-access h2 { font-size: var(--text-xl); font-weight: 800; color: #FFFFFF; margin: var(--space-4) 0 var(--space-3);}
.hsx-access p { color: #C6C6C6; font-size: var(--text-base); line-height: 1.6; margin-bottom: var(--space-6);}
.hsx-access .btn-primary-lg { margin: 0 auto;}
.hsx-legal { font-size: var(--text-xs); color: #6E8377; margin-top: var(--space-6);}

@media (max-width: 800px) {
  .hsx-stats { grid-template-columns: 1fr 1fr;}
  .hsx-cats, .hsx-features, .hsx-audience, .hsx-works { grid-template-columns: 1fr;}
}

/* How it works — single centered block */
.hsx-method { max-width: 72ch;}
.hsx-method h2 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-3); color: var(--color-text);}
.hsx-method p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-3);}
.hsx-method .hsx-caveat { color: var(--color-text)!important; font-weight: 600;}