/* Section treatments shared by /home and the /for/<slug> audience pages:
   the dark teal CTA band, the About photo backdrop and its frosted card, and
   the two button styles that sit on the dark band.

   These are the only rules either page ever needed from landing.css. Everything
   else in that file re-authored the hero — flattening the floating cards,
   hiding the background grid, desaturating the icon-circle and progress-bar
   gradients — for pages that were meant to render from tailwind.build.css.
   Loading this instead of landing.css is what keeps both heroes looking alike. */

.landing-cta-backdrop {
    background:
        radial-gradient(130% 150% at 12% -10%, color-mix(in srgb, var(--primary-500) 42%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, color-mix(in srgb, var(--primary-700) 88%, transparent) 0%, color-mix(in srgb, var(--primary-800) 88%, transparent) 100%),
        var(--landing-section-image);
    background-size: cover;
    background-position: center;
    color: #fff;
}
.landing-cta-backdrop :is(h1, h2, h3, p) { color: #fff; }
/* About section: section photo under the original light brand overlay */
.landing-about-backdrop {
    background-image: linear-gradient(to bottom right,
        color-mix(in srgb, var(--primary-50) 70%, transparent),
        color-mix(in srgb, var(--stone-50) 70%, transparent)),
        var(--landing-section-image);
    background-size: cover;
    background-position: center;
}
/* Frosted content card that lets the about photo read through its edges */
.landing-about-card {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, .4);
}
.cta-invert-btn { background:#fff; color:var(--primary-800); border-radius:12px; font-weight:700; transition:background .18s ease, transform .18s ease; }
.cta-invert-btn:hover { background:var(--primary-50); transform:translateY(-1px); }
.cta-invert-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .cta-invert-btn { transition:none; } .cta-invert-btn:hover { transform:none; } }
/* Secondary CTA on the dark teal .landing-cta-backdrop — a legible white ghost
   button that pairs with the filled .cta-invert-btn without competing with it.
   (hz-link-chat is teal-on-light and disappears on this dark surface.) */
.cta-ghost-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: calc(1rem - 1.5px) calc(2.5rem - 1.5px);
    border-radius: 12px; color: #fff; font-weight: 700; font-family: inherit;
    text-decoration: none; border: 1.5px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.05);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.cta-ghost-btn:hover { background: rgba(255,255,255,.15); border-color: #fff; transform: translateY(-1px); }
.cta-ghost-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cta-ghost-btn .fa-rocket { color: #fff; }