/* Test and Track landing page only. White, black, Inter. */

body.tt-landing,
body.tt-landing h1,
body.tt-landing h2,
body.tt-landing h3,
body.tt-landing p,
body.tt-landing a,
body.tt-landing button,
body.tt-landing label,
body.tt-landing input {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

body.tt-landing {
    background: #ffffff !important;
    color: #5c5c5c;
}

body.tt-house.tt-landing .landing-hero {
    background: #ffffff !important;
    color: #111111 !important;
    overflow: hidden;
}

body.tt-landing .hero-gradient-mesh,
body.tt-landing .hero-grid,
body.tt-landing .floating-orb {
    display: none !important;
}

body.tt-landing .landing-hero-nav {
    background: #000000;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

body.tt-landing .landing-hero .tt-brand-mark {
    background: linear-gradient(145deg, #f0c85c, #d4a843) !important;
    color: #1a2744 !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
}

body.tt-landing .landing-hero .tt-brand-name,
body.tt-landing .landing-hero .tt-brand-and {
    color: #ffffff !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-style: normal;
}

body.tt-landing .landing-hero .tt-brand-tagline {
    color: rgba(255, 255, 255, 0.62) !important;
}

body.tt-landing .landing-hero nav a {
    color: #ffffff !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: 999px;
    padding: 8px 12px;
}

body.tt-landing .landing-hero nav a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14);
}

body.tt-landing .tt-suite {
    position: relative;
}

body.tt-landing .landing-hero .tt-suite-link {
    background: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: none !important;
    font-weight: 500 !important;
    font-size: 0.875rem;
    padding: 8px 12px;
    cursor: pointer;
}

body.tt-landing .landing-hero .tt-suite-link:hover,
body.tt-landing .tt-suite.is-open .tt-suite-link {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

body.tt-landing .tt-suite-panel {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: min(360px, 78vw);
    padding: 8px;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    z-index: 80;
    text-align: left;
}

body.tt-landing .tt-suite:hover .tt-suite-panel,
body.tt-landing .tt-suite:focus-within .tt-suite-panel,
body.tt-landing .tt-suite.is-open .tt-suite-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

body.tt-landing .landing-hero .tt-suite-panel a {
    display: block;
    color: #111111 !important;
    background: transparent !important;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 400 !important;
    white-space: normal;
    line-height: 1.4;
}

body.tt-landing .landing-hero .tt-suite-panel a:hover {
    background: #f6f6f6 !important;
    color: #111111 !important;
}

body.tt-landing .tt-suite-panel strong {
    display: block;
    color: #111111;
    font-size: 14px;
    font-weight: 600;
}

body.tt-landing .tt-suite-panel span {
    display: block;
    margin-top: 2px;
    color: #5c5c5c;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

body.tt-landing .tt-suite-new {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px 2px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 1px;
}

body.tt-landing .landing-hero-nav button[onclick*="login"] {
    background: #ffffff !important;
    color: #111111 !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

body.tt-landing #mobile-menu-button {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

body.tt-landing #mobile-menu-button svg {
    color: #ffffff !important;
}

body.tt-landing .tt-hero-copy {
    align-items: flex-start;
    text-align: left;
    width: min(640px, 52vw);
    margin-left: min(46vw, 560px);
    margin-right: auto;
}

body.tt-landing .tt-hero-copy .flex-wrap {
    justify-content: flex-start;
}

body.tt-landing .landing-hero h1,
body.tt-landing .landing-hero h1 span,
body.tt-house.tt-landing .hero-headline-accent {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    background: none !important;
    background-clip: border-box !important;
    font-weight: 600 !important;
}

body.tt-landing .tt-hero-world {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    left: 0;
    top: 0;
    width: min(680px, 50vw);
    height: 90%;
    -webkit-mask-image:
        linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
        linear-gradient(90deg, #000 0%, #000 62%, transparent 94%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
        linear-gradient(90deg, #000 0%, #000 62%, transparent 94%);
    mask-composite: intersect;
}

body.tt-landing .tt-hero-world img {
    position: absolute;
    inset: 0;
    width: 118%;
    height: 100%;
    object-fit: cover;
    object-position: 28% center;
}

body.tt-landing .tt-scene {
    opacity: 0;
    animation: tt-scene 12s ease-in-out infinite;
}

body.tt-landing .tt-scene:nth-child(1) { animation-delay: 0s; }
body.tt-landing .tt-scene:nth-child(2) { animation-delay: -10s; }
body.tt-landing .tt-scene:nth-child(3) { animation-delay: -8s; }
body.tt-landing .tt-scene:nth-child(4) { animation-delay: -6s; }
body.tt-landing .tt-scene:nth-child(5) { animation-delay: -4s; }
body.tt-landing .tt-scene:nth-child(6) { animation-delay: -2s; }

body.tt-landing .tt-scene:nth-child(5) {
    animation-name: tt-scene-maths;
}

body.tt-landing .landing-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    right: -14%;
    top: -12%;
    width: min(980px, 62vw);
    height: 100%;
    background:
        radial-gradient(circle at 70% 24%, rgba(96, 150, 230, 0.62), transparent 56%),
        radial-gradient(circle at 46% 46%, rgba(198, 176, 242, 0.48), transparent 60%),
        radial-gradient(circle at 82% 68%, rgba(166, 224, 204, 0.32), transparent 58%);
    filter: blur(30px);
    animation: tt-blue-wash 16s ease-in-out infinite;
}

@keyframes tt-scene {
    0% { opacity: 1; transform: scale(1.04) translate3d(0, 0, 0); }
    14% { opacity: 1; transform: scale(1.08) translate3d(-1.2%, -1%, 0); }
    20%, 96% { opacity: 0; transform: scale(1.08) translate3d(-1.2%, -1%, 0); }
    100% { opacity: 1; transform: scale(1.04) translate3d(0, 0, 0); }
}

@keyframes tt-scene-maths {
    0% { opacity: 1; transform: scale(1.04) translate3d(0, 0, 0); }
    14% { opacity: 1; transform: scale(1.1) translate3d(-2.4%, -1.6%, 0); }
    20%, 96% { opacity: 0; transform: scale(1.1) translate3d(-2.4%, -1.6%, 0); }
    100% { opacity: 1; transform: scale(1.04) translate3d(0, 0, 0); }
}

@keyframes tt-blue-wash {
    0%, 100% { opacity: 0.82; }
    50% { opacity: 1; }
}

@media (max-width: 1100px) {
    body.tt-landing .tt-hero-copy {
        width: auto;
        margin-left: 0;
        align-items: center;
        text-align: center;
    }

    body.tt-landing .tt-hero-copy .flex-wrap {
        justify-content: center;
    }

    body.tt-landing .tt-hero-world {
        left: -8%;
        width: 70%;
        height: 38%;
        -webkit-mask-image:
            linear-gradient(180deg, #000 0%, #000 28%, transparent 72%),
            linear-gradient(90deg, #000 0%, #000 34%, transparent 78%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(180deg, #000 0%, #000 28%, transparent 72%),
            linear-gradient(90deg, #000 0%, #000 34%, transparent 78%);
        mask-composite: intersect;
    }
}

body.tt-landing .landing-hero .text-white\/80,
body.tt-landing .landing-hero .text-white\/60 {
    color: #5c5c5c !important;
}

body.tt-landing .landing-hero .hero-eyebrow-badge {
    background: #f6f6f6 !important;
    border-color: #e6e6e6 !important;
}

body.tt-landing .landing-hero .hero-eyebrow-badge span {
    color: #111111 !important;
}

body.tt-landing .landing-hero .relative button[onclick*="register"],
body.tt-landing .home-cta-band button,
body.tt-landing #mobile-menu button[onclick*="register"] {
    background: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

body.tt-landing .landing-hero .relative button[onclick*="login"] {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    border-radius: 999px !important;
}

body.tt-landing .landing-hero .bg-clip-text {
    background: none !important;
    -webkit-text-fill-color: #111111 !important;
    color: #111111 !important;
}

body.tt-landing .landing-hero .border-purple-300\/40 {
    border-color: #e6e6e6 !important;
}

body.tt-landing section.bg-\[\#fafaff\] {
    background: #ffffff !important;
}

body.tt-landing section.bg-\[\#fafaff\] .bg-white {
    border-color: #e6e6e6 !important;
    box-shadow: none !important;
}

body.tt-landing section.bg-\[\#fafaff\] h3 {
    color: #111111 !important;
}

body.tt-landing section.bg-\[\#fafaff\] .bg-gradient-to-br {
    background: #f6f6f6 !important;
}

body.tt-landing .home-cta-band {
    background: #f6f6f6 !important;
}

body.tt-landing .home-cta-band h2,
body.tt-landing .home-cta-band h2 span,
body.tt-landing .home-cta-band p {
    color: #111111 !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

body.tt-landing footer {
    background: #000000 !important;
    border: 0 !important;
}

body.tt-landing footer p {
    color: rgba(255, 255, 255, 0.72) !important;
}

body.tt-landing .tt-auth-btn-primary {
    background: #111111 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
}

body.tt-landing #mobile-menu .bg-white {
    border-color: #e6e6e6 !important;
}

body.tt-landing #mobile-menu .font-serif,
body.tt-landing #mobile-menu a {
    color: #111111 !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

@media (prefers-reduced-motion: reduce) {
    body.tt-landing .tt-scene,
    body.tt-landing .landing-hero::after {
        animation: none;
    }

    body.tt-landing .tt-scene {
        opacity: 0;
    }

    body.tt-landing .tt-scene:first-child {
        opacity: 1;
    }
}