/* Compatibility layer between the shared shadcn CTA component and legacy
   marketing layout selectors. Visual variants live in Marketing:Cta. */
.marketing-site .marketing-cta {
    border: 1px solid transparent;
    font-weight: 650;
    letter-spacing: -.01em;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.marketing-site .marketing-cta[data-marketing-size="compact"] { min-height: 36px; padding-inline: 16px; border-radius: 12px; font-size: 13px; }
.marketing-site .marketing-cta[data-marketing-size="default"] { min-height: 44px; padding-inline: 20px; border-radius: 12px; font-size: 14px; }
.marketing-site .marketing-cta[data-marketing-size="large"] { min-height: 48px; padding-inline: 24px; border-radius: 12px; font-size: 15px; }
.marketing-site .marketing-cta[data-marketing-full="true"] { width: 100%; }

.marketing-site .marketing-cta[data-marketing-variant="primary"][data-marketing-surface="light"] {
    border-color: var(--brand-pink, #f81f5c);
    background: var(--brand-pink, #f81f5c);
    color: white;
    box-shadow: 0 10px 24px rgba(248,31,92,.18);
}
.marketing-site .marketing-cta[data-marketing-variant="primary"][data-marketing-surface="dark"] {
    border-color: white;
    background: white;
    color: var(--brand-navy, #11182a);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}
.marketing-site .marketing-cta[data-marketing-variant="secondary"][data-marketing-surface="light"] {
    border-color: rgba(17,24,39,.15);
    background: rgba(255,255,255,.76);
    color: var(--brand-navy, #11182a);
}
.marketing-site .marketing-cta[data-marketing-variant="secondary"][data-marketing-surface="dark"] {
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.1);
    color: white;
}
.marketing-site .marketing-cta[data-marketing-variant="ghost"][data-marketing-surface="light"] { background: transparent; color: var(--brand-navy, #11182a); }
.marketing-site .marketing-cta[data-marketing-variant="ghost"][data-marketing-surface="dark"] { background: transparent; color: white; }
.marketing-site .marketing-cta:hover { transform: translateY(-1px); }
.marketing-site .marketing-cta[data-marketing-variant="primary"][data-marketing-surface="light"]:hover { border-color: var(--brand-pink-hover, #d90f49); background: var(--brand-pink-hover, #d90f49); color: white; box-shadow: 0 14px 30px rgba(248,31,92,.24); }
.marketing-site .marketing-cta[data-marketing-variant="primary"][data-marketing-surface="dark"]:hover { border-color: var(--brand-pink, #f81f5c); background: var(--brand-pink, #f81f5c); color: white; }
.marketing-site .marketing-cta[data-marketing-variant="secondary"][data-marketing-surface="light"]:hover { border-color: rgba(17,24,42,.3); background: white; color: var(--brand-navy, #11182a); }
.marketing-site .marketing-cta[data-marketing-variant="secondary"][data-marketing-surface="dark"]:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.16); color: white; }
.marketing-site .marketing-cta[data-marketing-variant="ghost"][data-marketing-surface="light"]:hover { background: rgba(17,24,42,.06); color: var(--brand-navy, #11182a); }
.marketing-site .marketing-cta[data-marketing-variant="ghost"][data-marketing-surface="dark"]:hover { background: rgba(255,255,255,.1); color: white; }
.marketing-site .marketing-cta:active { transform: translateY(0); }
.marketing-site .marketing-cta:focus-visible {
    outline: 2px solid var(--brand-pink, #f81f5c);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--brand-focus-ring, rgba(248,31,92,.25));
}
.marketing-site .marketing-cta:disabled,
.marketing-site .marketing-cta[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none; }

.marketing-site .mp-actions > a.marketing-cta,
.marketing-site .stack-inner > a.marketing-cta,
.marketing-site .final-cta-inner > div > a.marketing-cta {
    border-bottom: 0;
    padding-bottom: 0;
    font-size: inherit;
}

.marketing-site .pricing-table .marketing-cta {
    margin-top: auto;
}

@media (max-width: 780px) {
    .marketing-site .hero-actions .marketing-cta,
    .marketing-site .mp-actions .marketing-cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-site .marketing-cta {
        transition: none;
        transform: none;
    }
}