/* =========================================================
   TABLET LAYOUT (980px and below)
   ========================================================= */

@media (max-width: 980px) {

    /* -----------------------------------------------------
       Desktop Navigation
       Hide the normal navigation bar.
       ----------------------------------------------------- */

    .desktop-nav {
        display: none;
    }

        /* -----------------------------------------------------
       Mobile Navigation Menu
       Dropdown shown when the hamburger menu is opened.
       ----------------------------------------------------- */

        .desktop-nav.open {
            position: absolute;
            top: 74px;
            left: 20px;
            right: 20px;
            display: grid;
            gap: 15px;
            padding: 20px;
            background: var(--background-alt);
            border: 1px solid var(--line);
            border-radius: 16px;
        }

    /* -----------------------------------------------------
       Hamburger Menu Button
       Show the ☰ button on tablets and phones.
       ----------------------------------------------------- */

    .mobile-toggle {
        display: block;
    }

    /* -----------------------------------------------------
       Section Layout
       Stack all two-column layouts vertically.
       ----------------------------------------------------- */

    .hero-grid,
    .product-grid,
    .live-layout {
        grid-template-columns: 1fr;
    }

    /* -----------------------------------------------------
       Hero Text
       Center the opening text.
       ----------------------------------------------------- */

    .hero-copy {
        text-align: center;
    }

        /* -----------------------------------------------------
       Hero Title
       Main heading:
       "Measure. Learn. Improve."
       ----------------------------------------------------- */

        .hero-copy h1 {
            font-size: 45px;
            line-height: 1;
            letter-spacing: -0.04em;
        }

    /* -----------------------------------------------------
       Hero Buttons
       Center the CTA buttons.
       ----------------------------------------------------- */

    .button-row {
        justify-content: center;
    }

    /* -----------------------------------------------------
       Hero Image
       Reduce image height for tablets.
       ----------------------------------------------------- */

    .hero-media img {
        min-height: 420px;
    }

    /* -----------------------------------------------------
       Card Grids
       Use two columns instead of four.
       ----------------------------------------------------- */

    .card-grid-four,
    .audience-grid,
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* -----------------------------------------------------
       Coaching Dashboard
       Stack dashboard sections vertically.
       ----------------------------------------------------- */

    .coaching-dashboard {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOBILE LAYOUT (640px and below)
   ========================================================= */

@media (max-width: 640px) {

    /* -----------------------------------------------------
       Sections
       Remove forced full-screen height on phones.
       ----------------------------------------------------- */

    .panel {
        min-height: auto;
        padding: 100px 0 72px;
        overflow: visible;
    }

    /* -----------------------------------------------------
       Overall Page Width
       Reduce side margins.
       ----------------------------------------------------- */

    .panel-inner,
    .nav-shell {
        width: min(calc(100% - 24px), var(--content-width));
    }

    /* -----------------------------------------------------
       Contact Button
       Hide the email button in the navigation.
       ----------------------------------------------------- */

    .nav-contact {
        display: none;
    }

    /* -----------------------------------------------------
       Hero Title
       Smaller heading for phones.
       ----------------------------------------------------- */

    .hero-copy h1 {
        margin: 0 0 14px;
        font-size: 28px;
        line-height: 1.02;
        letter-spacing: -0.035em;
    }

    /* -----------------------------------------------------
       Hero Image
       Smaller image for phones.
       ----------------------------------------------------- */

    .hero-media img {
        min-height: 360px;
    }

    /* -----------------------------------------------------
       All Card Layouts
       Switch every grid to a single column.
       ----------------------------------------------------- */

    .card-grid-four,
    .card-grid-three,
    .feature-grid,
    .metric-grid,
    .audience-grid,
    .steps {
        grid-template-columns: 1fr;
    }

    /* -----------------------------------------------------
       Footer
       Stack footer items vertically.
       ----------------------------------------------------- */

    .footer-row {
        display: grid;
        align-items: start;
    }

    /* -----------------------------------------------------
       Reveal Animations
       Shorter animation distance on phones.
       ----------------------------------------------------- */

    .reveal,
    .reveal-group > *,
    .reveal-media,
    .stagger-children > * {
        transform: translateY(10px);
    }
}