/* health-landing.css — styles for /health-landing.html (health.retireplusplus.com).
 * RetirePlusPlus-branded landing introducing HealthHaven as an INDEPENDENT PARTNER
 * (co-marketing + SSO hand-off). Pure REM (DEV_GUIDE.txt: zero px); theme-aware via
 * retireplusplus.css --retire-* tokens.
 */

.hl-hero {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
  text-align: center;
}

.hl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--retire-text-secondary, #5A4D3E);
  margin: 0 0 1rem;
}
.hl-eyebrow i { color: var(--retire-primary, #8A5A05); }

.hl-title {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 0.875rem;
  color: var(--retire-text, #2A211A);
}
@media (min-width: 48rem) { .hl-title { font-size: 2.5rem; } }

.hl-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--retire-text-secondary, #5A4D3E);
  max-width: 40rem;
  margin: 0 auto 1.75rem;
}
.hl-lead strong { color: var(--retire-text, #2A211A); }

.hl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.hl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 0.0625rem solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hl-btn:hover { transform: translateY(-0.0625rem); }
.hl-btn:focus-visible { outline: 0.1875rem solid var(--retire-focus, #2F5D50); outline-offset: 0.125rem; }

/* Amber FILL + dark ink. --retire-primary repoints to a LIGHT amber in dark
   mode (it is a FOREGROUND token there), so white-on-primary inverts to
   1.65:1. --retire-accent/--retire-on-accent are theme-invariant (7:1). */
.hl-btn--primary {
  background: var(--retire-accent, #F59E0B);
  color: var(--retire-on-accent, #1F2937);
  box-shadow: var(--retire-shadow-md, 0 0.25rem 0.75rem rgba(74,54,30,0.10));
}
.hl-btn--primary:hover {
  background: var(--retire-accent-dark, #D97706);
  color: var(--retire-on-accent, #1F2937);
}
.hl-btn--primary.hl-btn--busy { opacity: 0.7; pointer-events: none; }

.hl-btn--ghost {
  background: var(--retire-surface, #FCF6EC);
  color: var(--retire-text, #2A211A);
  border-color: var(--retire-border, #E9DCC6);
}
.hl-btn--ghost:hover { background: var(--retire-card-hover-bg, #F1E6D3); }

.hl-sso-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--retire-text-muted, #6E5F4E);
  margin: 0;
}
/* amber-as-text sits on paper here, so it must NOT follow the dark-mode
   repoint — --retire-secondary reads on both themes. */
.hl-sso-note i { color: var(--retire-secondary, #2F5D50); }
.hl-sso-note.hl-sso-note--error i { color: var(--retire-rose, #8C3A2B); }

/* Feature grid */
.hl-grid {
  max-width: 60rem;
  margin: 1.5rem auto 3rem;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 48rem) { .hl-grid { grid-template-columns: repeat(3, 1fr); } }

.hl-card {
  background: var(--retire-surface, #FCF6EC);
  border: 0.0625rem solid var(--retire-border, #E9DCC6);
  border-radius: 0.875rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hl-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  /* amber glyph on an amber wash: the wash is a translucent tint of the
     surface (not a fixed light pill), so the foreground may follow the theme
     repoint. Was primary-on-accent-light, which collapsed to #F5C24B on
     #F5C24B (1:1, invisible) in dark. */
  color: var(--retire-primary, #8A5A05);
  background: var(--retire-amber-wash, rgba(245, 158, 11, 0.14));
  margin-bottom: 0.25rem;
}

.hl-card-title { font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--retire-text, #2A211A); }
.hl-card-desc { font-size: 0.875rem; line-height: 1.5; color: var(--retire-text-secondary, #5A4D3E); margin: 0; flex: 1 1 auto; }

.hl-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--retire-primary, #8A5A05);
  margin-top: 0.5rem;
}
.hl-card-link:hover { text-decoration: underline; }
.hl-card-link i { font-size: 0.6875rem; }

/* Partner disclaimer container — the banner itself is injected + styled by
 * disclaimer.js; this just constrains and centres it to match the grid width. */
.hl-disclaimer {
  max-width: 60rem;
  margin: 0 auto 3rem;
  padding: 0 1.25rem;
}