/* =========================================================================
   Start Here page specific styles
   See DESIGN-SYSTEM.md for tokens/components used here.
   All tokens, buttons, cards (canonical), pills, tags, and container are
   expected to come from foundation.css and design-system.css.
   ========================================================================= */

/* Scope link color + hover-underline to main content only */
main a { color: var(--hvb-teal); text-decoration: none; }
main a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Mission panel — one-breath mission statement at top of page
   ------------------------------------------------------------------------- */
.mission-panel {
  padding: 64px 0;
  background: linear-gradient(180deg, rgba(14, 59, 46, 0.05) 0%, transparent 100%);
  border-bottom: 1px solid rgba(14, 59, 46, 0.08);
}

.lead {
  margin: 16px 0 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--hvb-slate);
  max-width: 72ch;
}

/* -------------------------------------------------------------------------
   Section backgrounds — alternating rhythm mirrors the home page
   ------------------------------------------------------------------------- */
.mechanism-panel { background: #fff; }
.proof-panel     { background: var(--hvb-mist); }
.paths-panel     { background: #fff; }

/* -------------------------------------------------------------------------
   Mechanism cards — suppress foundation.css strip-out so .tile wins cleanly
   ------------------------------------------------------------------------- */
.mechanism-card h3 {
  color: var(--hvb-green);
  font-size: 18px;
}
.mechanism-card p {
  color: var(--hvb-slate);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Proof tiles — 4-column grid; links inside proof cards
   ------------------------------------------------------------------------- */
.proof-card h3 { color: var(--hvb-green); }
.proof-card p  { color: var(--hvb-slate); }

.proof-card ul {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
}
.proof-card ul li::before { display: none; }
.proof-card ul li a {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hvb-teal);
  text-decoration: none;
}
.proof-card ul li a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Path cards — audience lane links; need correct color + flex column
   ------------------------------------------------------------------------- */
.path-card {
  color: var(--hvb-black);
  display: flex;
  flex-direction: column;
}
.path-card h3 {
  color: var(--hvb-green);
  font-size: 20px;
  min-height: 0;
}
.path-card p {
  color: var(--hvb-slate);
  line-height: 1.55;
}
.path-card__cta {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hvb-teal);
  letter-spacing: 0.01em;
}