/**
 * Hero / slideshow CTAs: match feature-chip dark glass language
 * (beats contact.css .subscribe .subbtn--notify gold styles)
 */

.hero_logo_container,
.hero-content,
.social-share-btn-container,
.client-cloud-slideshow {
    --contact-cta-radius: 999px;
    --contact-cta-shadow: 0 10px 22px color-mix(in srgb, var(--scheme-black) 35%, transparent);
    --contact-cta-shadow-hover: 0 14px 28px color-mix(in srgb, var(--scheme-black) 42%, transparent);
    --chip-accent: var(--scheme-button-bg);
    --chip-accent-deep: var(--scheme-button-bg);
    --chip-glow: color-mix(in srgb, var(--scheme-button-bg) 40%, transparent);
    --contact-cta-accent-border: var(--hero-border-color);
    --contact-cta-ink: var(--hero-text-color);
    --contact-cta-ink-muted: color-mix(in srgb, var(--hero-text-color) 78%, transparent);
}

.hero_logo_container .contact-cta,
.hero_logo_container .hero-cta-list .contact-cta,
.hero_logo_container .subscribe .subbtn--notify,
.hero_logo_container .subscribe .subbtn--notify.contact-cta,
.hero_logo_container .subscribe .subbtn--notify.btn,
.hero-content .contact-cta,
.social-share-btn-container .contact-cta,
.client-cloud-slideshow .contact-cta {
    --chip-accent: var(--scheme-button-bg);
    --chip-accent-deep: var(--scheme-button-bg);
    --chip-glow: color-mix(in srgb, var(--scheme-button-bg) 40%, transparent);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    min-width: 0;
    max-width: 100%;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--hero-border-color) 70%, transparent);
    background: linear-gradient(155deg, color-mix(in srgb, var(--scheme-button-bg) 32%, transparent) 0%, color-mix(in srgb, var(--scheme-black) 72%, transparent) 100%);
    color: var(--hero-text-color);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--scheme-white) 14%, transparent) inset,
        0 0 0 1px color-mix(in srgb, var(--scheme-button-bg) 25%, transparent),
        0 10px 22px color-mix(in srgb, var(--scheme-black) 35%, transparent),
        0 0 24px color-mix(in srgb, var(--scheme-button-bg) 28%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    justify-content: flex-start;
    padding: 0.38rem 0.85rem 0.38rem 0.38rem;
}

.hero_logo_container .contact-cta--notify,
.hero_logo_container .subscribe .subbtn--notify,
.hero_logo_container .subscribe .subbtn--notify.contact-cta,
.hero_logo_container .subscribe .subbtn--notify.btn {
    --chip-accent: var(--scheme-accent-2);
    --chip-accent-deep: var(--scheme-accent-deep);
    --chip-glow: color-mix(in srgb, var(--scheme-accent-2) 40%, transparent);
    border-color: color-mix(in srgb, var(--hero-border-color) 70%, transparent);
    background: linear-gradient(155deg, color-mix(in srgb, var(--scheme-accent-2) 32%, transparent) 0%, color-mix(in srgb, var(--scheme-black) 72%, transparent) 100%);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--scheme-white) 14%, transparent) inset,
        0 0 0 1px color-mix(in srgb, var(--scheme-accent-2) 25%, transparent),
        0 10px 22px color-mix(in srgb, var(--scheme-black) 35%, transparent),
        0 0 24px color-mix(in srgb, var(--scheme-accent-2) 28%, transparent);
}

.hero_logo_container .contact-cta--install {
    --chip-accent: var(--scheme-button-bg);
    --chip-accent-deep: var(--scheme-button-bg);
    --chip-glow: color-mix(in srgb, var(--scheme-button-bg) 40%, transparent);
}

.hero_logo_container .contact-cta:hover,
.hero_logo_container .contact-cta:focus-visible,
.hero_logo_container .subscribe .subbtn--notify:hover,
.hero_logo_container .subscribe .subbtn--notify:focus-visible,
.hero-content .contact-cta:hover,
.hero-content .contact-cta:focus-visible,
.social-share-btn-container .contact-cta:hover,
.social-share-btn-container .contact-cta:focus-visible,
.client-cloud-slideshow .contact-cta:hover,
.client-cloud-slideshow .contact-cta:focus-visible {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--hero-border-color);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--scheme-white) 18%, transparent) inset,
        0 0 0 1px color-mix(in srgb, var(--scheme-white) 18%, transparent),
        var(--contact-cta-shadow-hover),
        0 0 28px color-mix(in srgb, var(--scheme-button-bg) 35%, transparent);
    outline: none;
}

.hero_logo_container .contact-cta:active,
.hero_logo_container .subscribe .subbtn--notify:active,
.hero-content .contact-cta:active,
.social-share-btn-container .contact-cta:active,
.client-cloud-slideshow .contact-cta:active {
    transform: translateY(0) scale(0.99);
}

.hero_logo_container .contact-cta__icon,
.hero_logo_container .subscribe .subbtn--notify .contact-cta__icon,
.hero_logo_container .contact-cta--install .contact-cta__icon,
.hero-content .contact-cta__icon,
.social-share-btn-container .contact-cta__icon,
.client-cloud-slideshow .contact-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    color: var(--scheme-white);
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--scheme-white) 42%, transparent), transparent 50%),
        linear-gradient(160deg, var(--chip-accent) 0%, var(--chip-accent-deep) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--scheme-white) 35%, transparent) inset,
        0 0 16px color-mix(in srgb, var(--scheme-button-bg) 35%, transparent),
        0 4px 10px color-mix(in srgb, var(--scheme-black) 35%, transparent);
}

.hero_logo_container .contact-cta__icon svg,
.hero_logo_container .subscribe .subbtn--notify .contact-cta__icon svg,
.hero-content .contact-cta__icon svg,
.social-share-btn-container .contact-cta__icon svg,
.client-cloud-slideshow .contact-cta__icon svg {
    width: 15px;
    height: 15px;
}

.hero_logo_container .contact-cta__icon svg path,
.hero-content .contact-cta__icon svg path,
.social-share-btn-container .contact-cta__icon svg path,
.client-cloud-slideshow .contact-cta__icon svg path {
    fill: currentColor;
}

.hero_logo_container .contact-cta__copy,
.hero_logo_container .subscribe .subbtn--notify .contact-cta__copy,
.hero-content .contact-cta__copy,
.social-share-btn-container .contact-cta__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08em;
    min-width: 0;
    text-align: left;
    line-height: 1;
    padding-right: 0.1rem;
}

.hero_logo_container .contact-cta__title,
.hero_logo_container .subscribe .subbtn--notify .contact-cta__title,
.hero-content .contact-cta__title,
.social-share-btn-container .contact-cta__title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.hero_logo_container .contact-cta__hint,
.hero_logo_container .subscribe .subbtn--notify .contact-cta__hint,
.hero-content .contact-cta__hint,
.social-share-btn-container .contact-cta__hint {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--contact-cta-ink-muted);
    opacity: 1;
    line-height: 1.15;
}

/* Subscribed state: match payments/emerald chip */
.hero_logo_container .subscribe .subbtn--notify.subscribed,
.hero_logo_container .subbtn--notify.subscribed {
    --chip-accent: var(--scheme-accent);
    --chip-accent-deep: var(--scheme-accent);
    --chip-glow: color-mix(in srgb, var(--scheme-accent) 40%, transparent);
    color: var(--scheme-white-muted);
    background: linear-gradient(155deg, color-mix(in srgb, var(--scheme-accent) 32%, transparent) 0%, color-mix(in srgb, var(--scheme-black) 72%, transparent) 100%);
    border-color: var(--hero-border-color);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--scheme-white) 14%, transparent) inset,
        0 0 0 1px color-mix(in srgb, var(--scheme-accent) 25%, transparent),
        0 10px 22px color-mix(in srgb, var(--scheme-black) 35%, transparent),
        0 0 24px color-mix(in srgb, var(--scheme-accent) 28%, transparent);
}

.hero_logo_container .subscribe .subbtn--notify.subscribed .contact-cta__icon,
.hero_logo_container .subbtn--notify.subscribed .contact-cta__icon {
    color: var(--scheme-white);
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--scheme-white) 42%, transparent), transparent 50%),
        linear-gradient(160deg, var(--chip-accent) 0%, var(--chip-accent-deep) 100%);
}

.hero_logo_container .subscribe .subbtn--notify.subscribed .contact-cta__hint,
.hero_logo_container .subbtn--notify.subscribed .contact-cta__hint {
    color: color-mix(in srgb, var(--scheme-white-muted) 80%, transparent);
    opacity: 1;
}

/* Share */
.social-share-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 1rem;
}

.social-share-btn-container .contact-cta--share {
    padding: 0.35rem 0.9rem 0.35rem 0.35rem;
}

/* Slideshow nav chips stay circular */
.client-cloud-slideshow .slideshow-nav.contact-cta--nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

.client-cloud-slideshow .slideshow-nav.contact-cta--nav:hover,
.client-cloud-slideshow .slideshow-nav.contact-cta--nav:focus-visible {
    transform: translateY(-50%) scale(1.05);
}

.client-cloud-slideshow .slideshow-nav.contact-cta--nav:active {
    transform: translateY(-50%) scale(0.98);
}

.client-cloud-slideshow .slideshow-nav.contact-cta--nav .contact-cta__icon {
    width: 2rem;
    height: 2rem;
}

.client-cloud-slideshow .slideshow-nav.prev {
    left: 0.5rem;
}

.client-cloud-slideshow .slideshow-nav.next {
    right: 0.5rem;
}

/* Share toast */
.share-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: color-mix(in srgb, var(--scheme-black) 92%, transparent);
    color: var(--scheme-white);
    padding: 1rem 1.5rem;
    border-radius: 14px;
    border: 1.5px solid color-mix(in srgb, var(--scheme-button-bg) 55%, transparent);
    box-shadow: var(--contact-cta-shadow);
    z-index: var(--ttms-z-toast, 10100);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 0.9rem;
    text-align: center;
}

.share-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .hero-content .contact-cta,
    .social-share-btn-container .contact-cta,
    .client-cloud-slideshow .contact-cta,
    .share-notification {
        transition: none;
    }
}

/* iOS: keep dark-glass chips even when contact.css gold rules still load */
html.ttms-ios .hero_logo_container .contact-cta,
html.ttms-ios .hero_logo_container .hero-cta-list .contact-cta,
html.ttms-ios .hero_logo_container .subscribe .subbtn--notify,
html.ttms-ios .hero_logo_container .subscribe .subbtn--notify.contact-cta,
html.ttms-ios .hero_logo_container .subscribe .subbtn--notify.btn {
    background: linear-gradient(155deg, color-mix(in srgb, var(--scheme-button-bg) 32%, transparent) 0%, color-mix(in srgb, var(--scheme-black) 72%, transparent) 100%);
    border: 1.5px solid color-mix(in srgb, var(--hero-border-color) 70%, transparent);
    color: var(--hero-text-color);
}

html.ttms-ios .hero_logo_container .contact-cta--notify,
html.ttms-ios .hero_logo_container .subscribe .subbtn--notify,
html.ttms-ios .hero_logo_container .subscribe .subbtn--notify.contact-cta,
html.ttms-ios .hero_logo_container .subscribe .subbtn--notify.btn {
    background: linear-gradient(155deg, color-mix(in srgb, var(--scheme-accent-2) 32%, transparent) 0%, color-mix(in srgb, var(--scheme-black) 72%, transparent) 100%);
    border-color: color-mix(in srgb, var(--hero-border-color) 70%, transparent);
}