/* shared/cta.css — the site's one call to action (PR #45, PR45-Q20): a bold label beside a purple square holding an
   arrow; the square darkens on hover and focus. Moved here unchanged from pages/home/hero.css and its verbatim copy in
   shared/page-hero.css, so every page and every new design takes it from one place. The phone size of the square
   stays with the pages that set it (hero.css, section-extras.css). Linked by every page before its page styles. */
.cta { display:inline-flex; align-items:center; gap:0.75rem; cursor:pointer; width:fit-content; padding:0.125rem 0; margin-bottom:2rem; }
.cta__label { font-size:1rem; font-weight:var(--fw-bold); color:var(--color-brand-white); letter-spacing:0.005em; }
.cta__icon { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; background:var(--color-brand-purple); flex-shrink:0; transition:background var(--duration-ui) var(--ease-standard); }
.cta:hover .cta__icon, .cta:focus-visible .cta__icon { background:var(--color-purple-hover); }
.cta__icon svg { width:0.9rem; height:0.9rem; fill:none; stroke:var(--color-on-brand); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
button.cta { background:none; border:none; font-family:var(--font-primary); }