/* The hero CTA block, shared by /home and the /for/<slug> audience heroes.

   Row 1 is the two product CTAs side by side; row 2 is the free lead magnet
   with its small print tucked underneath. The 1.375rem gap ABOVE the lead
   magnet against the .3125rem gap BELOW it is what makes that small print read
   as a caption for the free insight alone rather than for the whole block —
   keep the ratio if you retune the spacing.

   This lived in both landing.css and home-page.css and had already drifted
   between the two. One copy, loaded by every page that uses it.

   The .hz-copy prefix on the fills is vestigial: it outranked a
   button[onclick*="openLeadMagnetModal('home')"] rule in landing.css, which
   /home no longer loads. Harmless, and still correct if it ever returns. */
.hz-cta-block { max-width: 34rem; margin-top: 3rem; margin-bottom: 1.4rem; }
/* Colour emoji (sparkle, rocket). The emoji font stack keeps them from falling
   back to the flat monochrome glyph on Windows. */
.hz-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; line-height: 1; }
.hz-cta-pair { display: flex; flex-wrap: wrap; gap: .65rem; }
.hz-cta-alt { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .68rem 1.05rem; border-radius: .8rem; font-family: inherit; font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.hz-cta-alt:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.hz-cta-alt .hz-arrow { transition: transform .18s ease; }
.hz-cta-alt:hover .hz-arrow { transform: translateX(3px); }
.hz-copy .hz-cta-alt-primary { background: var(--primary-600); color: white; border: 1.5px solid var(--primary-600); box-shadow: 0 10px 24px -12px rgba(28,25,23,.35); }
.hz-copy .hz-cta-alt-primary:hover { background: var(--primary-700); border-color: var(--primary-700); transform: translateY(-2px); }
.hz-cta-alt-plain { background: white; color: var(--stone-800); border: 1.5px solid var(--stone-200); }
.hz-cta-alt-plain:hover { background: var(--stone-50); border-color: var(--primary-300); }
.hz-cta-lead { margin-top: 1.375rem; }
.hz-copy .hz-cta-alt-tint { background: color-mix(in srgb, var(--primary-500) 10%, transparent); color: var(--primary-700); border: 1.5px solid transparent; }
.hz-copy .hz-cta-alt-tint:hover { background: color-mix(in srgb, var(--primary-500) 18%, transparent); }
/* Indented to the pill's TEXT, not its border, so it hangs off that button. */
.hz-cta-facts { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .3125rem 0 0; padding-left: 1.125rem; font-size: .8rem; font-weight: 600; color: var(--stone-500); }
.hz-cta-dot { width: .25rem; height: .25rem; border-radius: 50%; background: var(--stone-300); }
@media (prefers-reduced-motion: reduce) {
  .hz-cta-alt { transition: none; }
  .hz-copy .hz-cta-alt-primary:hover { transform: none; }
}