:root {
    --tmk-focus-ring: rgba(109, 40, 217, 0.24);
    --tmk-mobile-safe-gap: calc(76px + env(safe-area-inset-bottom));
}

.marketing-body {
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.marketing-body :target {
    scroll-margin-block-start: calc(var(--tmk-header-height) + 24px);
}

.tmk-main:focus {
    outline: none;
}

.tmk-nav a,
.tmk-footer__links a,
.tmk-mobile-menu nav a,
.tmk-link-button,
.tmk-button,
.tmk-mobile-cta {
    -webkit-tap-highlight-color: transparent;
}

.tmk-nav a,
.tmk-footer__links a {
    border-radius: 12px;
}

.tmk-nav a:focus-visible,
.tmk-footer__links a:focus-visible,
.tmk-mobile-menu nav a:focus-visible,
.tmk-link-button:focus-visible,
.tmk-button:focus-visible,
.tmk-mobile-cta:focus-visible,
.tmk-brand:focus-visible,
.tmk-mobile-menu summary:focus-visible {
    outline: 3px solid var(--tmk-focus-ring);
    outline-offset: 4px;
}

.tmk-link-button:hover,
.tmk-link-button:focus-visible {
    border-color: var(--tmk-border-strong);
    background: rgba(241, 231, 255, 0.58);
}

.tmk-button:active,
.tmk-link-button:active,
.tmk-mobile-cta:active {
    transform: translateY(1px);
}

.tmk-header {
    isolation: isolate;
}

.tmk-mobile-menu[open] summary {
    color: var(--tmk-brand);
    border-color: var(--tmk-border-strong);
    background: var(--tmk-brand-soft);
}

.tmk-mobile-menu summary::after {
    width: 7px;
    height: 7px;
    margin-inline-start: 8px;
    border-block-end: 2px solid currentColor;
    border-inline-start: 2px solid currentColor;
    content: "";
    transform: rotate(-45deg) translateY(-1px);
    transition: transform 0.2s ease;
}

.tmk-mobile-menu[open] summary::after {
    transform: rotate(135deg) translateY(-1px);
}

.tmk-mobile-menu nav {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.tmk-mobile-menu nav .tmk-button {
    width: 100%;
    margin-block-start: 4px;
}

.tmk-mobile-cta {
    display: none;
}

.tmk-card,
.tmk-link-button,
.tmk-mobile-menu nav,
.tmk-footer,
.tmk-header {
    contain: layout style;
}

@media (max-width: 1024px) {
    .tmk-header {
        background: rgba(255, 255, 255, 0.92);
    }

    .tmk-header__actions .tmk-button {
        display: none;
    }
}

@media (max-width: 768px) {
    .marketing-body {
        padding-block-end: var(--tmk-mobile-safe-gap);
    }

    .tmk-header {
        background: rgba(255, 255, 255, 0.96);
    }

    .tmk-mobile-menu nav {
        position: fixed;
        inset-block-start: calc(var(--tmk-header-height) + 10px);
        inset-inline: 14px;
        width: auto;
        max-height: calc(100dvh - var(--tmk-header-height) - 28px);
        overflow-y: auto;
        padding: 16px;
    }

    .tmk-mobile-menu nav a {
        min-height: 48px;
        align-items: center;
    }

    .tmk-mobile-menu nav a:not(.tmk-button) {
        display: flex;
    }

    .tmk-mobile-cta {
        position: fixed;
        inset-inline: 14px;
        inset-block-end: calc(14px + env(safe-area-inset-bottom));
        z-index: 30;
        display: inline-flex;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #FFFFFF;
        background: linear-gradient(135deg, var(--tmk-brand), var(--tmk-accent));
        box-shadow: 0 18px 46px rgba(109, 40, 217, 0.28);
        text-decoration: none;
        font-size: 14px;
        font-weight: 900;
    }

    .tmk-footer {
        margin-block-start: clamp(56px, 18vw, 96px);
    }

    .tmk-footer__inner {
        padding-block-end: calc(clamp(42px, 7vw, 76px) + 10px);
    }
}

@media (max-width: 420px) {
    .tmk-brand small {
        display: none;
    }

    .tmk-mobile-menu summary {
        min-height: 40px;
        padding-inline: 14px;
    }

    .tmk-container {
        width: min(100% - 24px, var(--tmk-container));
    }
}

@media (prefers-reduced-motion: reduce) {
    .tmk-mobile-menu summary::after {
        transition: none;
    }
}
