/* ============================================================
   MODE — Interaction layer (hover/focus).
   Scoped component styles (layout + responsive) live inside each
   .astro component's <style> block — Astro auto-scopes them.
   Load order: colors_and_type.css → mode.css → responsive.css
   ============================================================ */

/* ---- Hero primary button hover ---- */
.md-hero-btn-primary {
  transition: background var(--md-dur-base) var(--md-ease-out);
}
.md-hero-btn-primary:hover,
.md-hero-btn-primary:focus-visible {
  background: #1A120A;
}