/* ==========================================================
   TrackDayCTRL
   Landing Page v1.0
   Footer + Benefit Band
   ========================================================== */


/* ==========================================================
   Shared container
   ========================================================== */

.footer-container,
.benefit-band-container,
.footer-bottom {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--container-max)
    );

    margin-inline: auto;
}


/* ==========================================================
   Footer
   ========================================================== */

.footer {
    width: 100%;

    background: var(--page-bg);
}


/* ==========================================================
   Benefit Band
   ========================================================== */

.benefit-band {
    width: 100%;

    padding-block:
        0
        clamp(1.5rem, 3vw, 2.5rem);
}


.benefit-band-container {
    position: relative;

    display: grid;
    grid-template-columns:
    minmax(14rem, 1.45fr)
    auto
    minmax(12rem, 1fr)
    auto
    minmax(12rem, 1fr)
    auto
    minmax(12rem, 1fr);

    align-items: center;

    gap: clamp(0.8rem, 1.4vw, 1.35rem);

    padding:
        clamp(1rem, 1.7vw, 1.4rem)
        clamp(1.2rem, 2vw, 1.8rem);

    background:
        linear-gradient(
            145deg,
            rgba(13, 15, 17, 0.98),
            rgba(5, 6, 7, 0.99)
        );

    border: 1px solid transparent;
    border-radius: clamp(0.55rem, 0.8vw, 0.75rem);

    background-clip: padding-box;
}


.benefit-band-container::before {
    content: "";

    position: absolute;
    inset: -1px;

    z-index: -1;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #d32916 0%,
            #ff8a00 24%,
            #8aa82f 62%,
            var(--green) 100%
        );
}


/* ==========================================================
   Benefit Band message
   ========================================================== */

.benefit-band-message {
    min-width: 0;
}


.benefit-band-message p {
    margin: 0;

    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    line-height: 1.05;

    text-transform: uppercase;
}


.benefit-band-message-top {
    color: var(--text);

    font-size: clamp(1.15rem, 1.65vw, 1.55rem);
}


.benefit-band-message-bottom {
    margin-top: 0.2rem !important;

    color: var(--green);

    font-size: clamp(1.25rem, 1.8vw, 1.7rem);
}


/* ==========================================================
   Benefit Band divider
   ========================================================== */

.benefit-band-divider {
    width: 1px;
    height: clamp(3.25rem, 5vw, 4.5rem);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );
}


/* ==========================================================
   Benefit Band items
   ========================================================== */

.benefit-band-item {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: clamp(0.65rem, 1vw, 0.9rem);
}


.benefit-band-icon {
    width: clamp(2.2rem, 2.8vw, 2.8rem);
    aspect-ratio: 1;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--green);

    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
}


.benefit-band-icon-accent {
    color: var(--green);
}


.benefit-band-copy {
    min-width: 0;
}


.benefit-band-copy h2 {
    margin:
        0
        0
        0.25rem;

    color: var(--text);

    font-family: "Rajdhani", sans-serif;
    font-size: clamp(0.95rem, 1.15vw, 1.15rem);
    font-weight: 600;
    line-height: 1;

    text-transform: uppercase;
}


.benefit-band-copy p {
    margin: 0;

    color: var(--muted);

    font-size: clamp(0.7rem, 0.75vw, 0.82rem);
    line-height: 1.45;
}


/* ==========================================================
   Main Footer
   ========================================================== */

.footer-main {
    width: 100%;

    padding-block:
        clamp(1.5rem, 3vw, 2.5rem)
        clamp(1rem, 2vw, 1.5rem);

    background:
        linear-gradient(
            180deg,
            rgba(7, 8, 9, 0.98),
            rgba(3, 4, 4, 1)
        );

    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


/* ==========================================================
   Footer grid
   ========================================================== */

.footer-grid {
    display: grid;

    grid-template-columns:
        minmax(12rem, 1.4fr)
        auto
        minmax(8rem, auto);

    align-items: center;

    gap: clamp(1rem, 2vw, 2rem);
}


/* ==========================================================
   Footer brand
   ========================================================== */

.footer-brand {
    min-width: 0;
}


.footer-brand img {
    display: block;

    width: clamp(11rem, 16vw, 15.5rem);
    max-width: 100%;
    height: auto;

    user-select: none;
}


/* ==========================================================
   Footer dividers
   ========================================================== */

.footer-divider {
    width: 1px;
    height: clamp(3rem, 5vw, 4.5rem);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );
}


/* ==========================================================
   Footer quote
   ========================================================== */

.footer-quote {
    min-width: 0;

    margin: 0;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap: clamp(0.45rem, 0.8vw, 0.7rem);
}


.footer-quote i {
    color: var(--green);

    font-size: clamp(1rem, 1.4vw, 1.35rem);
}


.footer-quote p {
    margin: 0;

    color: var(--muted);

    font-size: clamp(0.78rem, 0.9vw, 0.95rem);
    line-height: 1.5;
}


/* ==========================================================
   Footer social links
   ========================================================== */

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-right: clamp(0.5rem, 1vw, 1rem);

    gap: clamp(0.7rem, 1.1vw, 1rem);
}


.footer-socials a {
    width: clamp(1.8rem, 2.3vw, 2.2rem);
    aspect-ratio: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--text);

    font-size: clamp(1.1rem, 1.45vw, 1.4rem);

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.footer-socials a:hover,
.footer-socials a:focus-visible {
    color: var(--green);

    transform: translateY(-0.1rem);
}


/* ==========================================================
   Footer bottom
   ========================================================== */

.footer-bottom {
    margin-top: clamp(1.3rem, 2.5vw, 2rem);

    padding-top: clamp(0.8rem, 1.3vw, 1.1rem);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap:
        clamp(0.75rem, 1.5vw, 1.25rem)
        clamp(1.5rem, 3vw, 3rem);

    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


.footer-bottom p {
    margin: 0;

    color: #727a81;

    font-size: clamp(0.65rem, 0.72vw, 0.78rem);
    line-height: 1.4;
}


.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: clamp(1rem, 2vw, 2rem);
}


.footer-legal a {
    color: #727a81;

    font-size: clamp(0.65rem, 0.72vw, 0.78rem);
    line-height: 1.4;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        color var(--transition-fast);
}


.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--green);
}


/* ==========================================================
   Compact desktop
   ========================================================== */

@media (max-width: 75rem) {

    .benefit-band-container {
        grid-template-columns:
            minmax(11rem, 1.25fr)
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        gap: clamp(0.65rem, 1vw, 1rem);
    }


    .footer-grid {
        grid-template-columns:
            minmax(11rem, 1.2fr)
            auto
            minmax(8rem, auto);

        gap: clamp(0.8rem, 1.4vw, 1.35rem);
    }

}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 62rem) {

    .benefit-band-container {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: clamp(1rem, 2.5vw, 1.5rem);
    }


    .benefit-band-message {
        grid-column: 1 / -1;

        text-align: center;
    }


    .benefit-band-divider {
        display: none;
    }


    .benefit-band-item {
        align-items: flex-start;
    }


    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: clamp(1.5rem, 4vw, 2.5rem);
    }


    .footer-divider {
        display: none;
    }


    .footer-brand,
    .footer-quote {
        align-self: start;
    }


    .footer-socials {
        justify-content: flex-start;
    }

}

/* ==========================================================
   Mobile

   Preserve the approved desktop composition in miniature.
   ========================================================== */

@media (max-width: 44rem) {

    .footer-container,
    .benefit-band-container,
    .footer-bottom {
        width: calc(100% - 1rem);
    }


    /* ======================================================
       Benefit Band
       ====================================================== */

    .benefit-band {
        padding-block:
            clamp(0.5rem, 2vw, 0.8rem)
            clamp(1rem, 4vw, 1.5rem);
    }


    .benefit-band-container {
        grid-template-columns:
                
            minmax(0, 1.45fr)
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: center;

        gap: clamp(0.2rem, 0.8vw, 0.4rem);

        padding:
            clamp(0.5rem, 2vw, 0.7rem)
            clamp(0.45rem, 1.8vw, 0.65rem);

        border-radius: clamp(0.25rem, 0.8vw, 0.4rem);
    }


    .benefit-band-message {
        grid-column: auto;

        text-align: left;
    }


    .benefit-band-message-top {
        font-size: clamp(0.48rem, 2vw, 0.65rem);
    }


    .benefit-band-message-bottom {
        margin-top: 0.08rem !important;

        font-size: clamp(0.52rem, 2.2vw, 0.7rem);
    }


    .benefit-band-divider {
        display: block;

        height: clamp(1.8rem, 7vw, 2.5rem);
    }


    .benefit-band-item {
        align-items: center;

        gap: clamp(0.15rem, 0.6vw, 0.28rem);
    }


    .benefit-band-icon {
        width: clamp(0.75rem, 3vw, 1rem);

        font-size: clamp(0.48rem, 2vw, 0.68rem);
    }


    .benefit-band-copy h2 {
        margin:
            0
            0
            clamp(0.08rem, 0.35vw, 0.14rem);

        font-size: clamp(0.32rem, 1.35vw, 0.43rem);
        line-height: 1;
    }


    .benefit-band-copy p {
        font-size: clamp(0.26rem, 1.1vw, 0.35rem);
        line-height: 1.25;
    }


    /* ======================================================
       Main Footer
       ====================================================== */

    .footer-main {
        padding-block:
            clamp(0.8rem, 3vw, 1.15rem)
            clamp(0.55rem, 2vw, 0.8rem);
    }


    .footer-grid {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: center;

        gap: clamp(0.25rem, 1vw, 0.45rem);
    }


    .footer-brand,
    .footer-quote {
        align-self: center;
    }


    .footer-brand img {
        width: 100%;
        max-width: clamp(4.5rem, 19vw, 6rem);
    }


    .footer-divider {
        display: block;

        height: clamp(1.8rem, 7vw, 2.5rem);
    }


    .footer-quote {
        gap: clamp(0.12rem, 0.5vw, 0.22rem);
    }


    .footer-quote i {
        font-size: clamp(0.38rem, 1.6vw, 0.52rem);
    }


    .footer-quote p {
        font-size: clamp(0.27rem, 1.15vw, 0.36rem);
        line-height: 1.3;
    }


    .footer-socials {
        justify-content: flex-end;

        padding-right: 0;

        gap: clamp(0.15rem, 0.6vw, 0.25rem);
    }


    .footer-socials a {
        width: clamp(0.65rem, 2.7vw, 0.9rem);

        font-size: clamp(0.45rem, 1.9vw, 0.62rem);
    }


    /* ======================================================
       Footer Bottom
       ====================================================== */

    .footer-bottom {
        margin-top: clamp(0.55rem, 2vw, 0.8rem);

        padding-top: clamp(0.35rem, 1.3vw, 0.5rem);

        flex-direction: row;

        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        gap:
            clamp(0.2rem, 0.8vw, 0.35rem)
            clamp(0.5rem, 2vw, 0.8rem);
    }


    .footer-bottom p,
    .footer-legal a {
        font-size: clamp(0.24rem, 1vw, 0.32rem);
    }


    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;

        gap: clamp(0.4rem, 1.6vw, 0.65rem);
    }

}


/* ==========================================================
   Touch devices
   ========================================================== */

@media (hover: none) {

    .footer-socials a:hover {
        color: var(--text);

        transform: none;
    }


    .footer-legal a:hover {
        color: #727a81;
    }

}

.demo-cta { padding-block: clamp(3rem, 6vw, 5rem); background: #0a0d0b; }
.demo-cta-container { width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-max)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid rgba(115, 152, 52, 0.4); border-radius: 1rem; background: linear-gradient(135deg, rgba(115, 152, 52, 0.14), rgba(255, 255, 255, 0.02)); }
.demo-cta-kicker { margin-bottom: 0.35rem; color: var(--green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.demo-cta h2 { margin-bottom: 0.55rem; font-family: "Rajdhani", sans-serif; font-size: clamp(1.75rem, 3vw, 2.75rem); text-transform: uppercase; }
.demo-cta p:not(.demo-cta-kicker) { color: var(--muted); }
.demo-cta .btn-primary {
    min-height: 2.8rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.2rem;
    color: #050505;
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 48rem) {
    .demo-cta { padding-block: 3rem; }
    .demo-cta-container { width: calc(100% - 2rem); flex-direction: column; align-items: stretch; padding: 1.4rem; }
    .demo-cta .btn-primary { width: 100%; justify-content: center; }
    .benefit-band { padding-block: 1rem 2rem; }
    .benefit-band-container { width: calc(100% - 2rem); grid-template-columns: 1fr; align-items: stretch; gap: 1rem; padding: 1.25rem; border-radius: 0.8rem; }
    .benefit-band-message { text-align: center; }
    .benefit-band-message-top { font-size: 1rem; }
    .benefit-band-message-bottom { font-size: 1.2rem; }
    .benefit-band-divider { display: none; }
    .benefit-band-item { align-items: center; gap: 0.8rem; }
    .benefit-band-icon { width: 2.25rem; font-size: 1.35rem; }
    .benefit-band-copy h2 { font-size: 1rem; }
    .benefit-band-copy p { font-size: 0.78rem; }
    .footer-container, .footer-bottom { width: calc(100% - 2rem); }
    .footer-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1rem; }
    .footer-divider { display: none; }
    .footer-brand img { width: min(14rem, 70vw); max-width: none; }
    .footer-socials { justify-content: center; gap: 0.8rem; }
    .footer-socials a { width: 2rem; font-size: 1.25rem; }
    .footer-bottom { flex-direction: column; gap: 0.75rem; }
    .footer-bottom p, .footer-legal a { font-size: 0.68rem; }
    .footer-legal { gap: 0.8rem 1.2rem; }
}