/* Site fixes: typography + hero spacing
   Load this AFTER the main Vite CSS.
*/

:root {
    --font-main:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    --font-mono:
        ui-monospace,
        "Cascadia Mono",
        "Segoe UI Mono",
        Consolas,
        "Liberation Mono",
        monospace;

    --hero-pad-x: 40px;
}

/* Typography */
html,
body,
button,
input,
textarea,
select {
    font-family: var(--font-main);
}

h1,
h2,
h3,
.eyebrow,
.site-name,
.catalog-number,
.catalog-price,
.package-type,
.package-module-count,
.hero-meta,
.hero-product > span,
.hero-product strong,
.hero-product > b,
.program-home-count strong,
.program-price-row strong,
.package-pricing strong {
    font-family: var(--font-mono);
}

.site-nav a,
.cart-link,
.hero-description,
.hero-product small,
section p {
    font-family: var(--font-main);
}

/* Hero: one consistent inner grid */
.hero-meta {
    box-sizing: border-box;
    padding-left: var(--hero-pad-x) !important;
    padding-right: var(--hero-pad-x) !important;
}

.hero-layout {
    border-left: 1px solid var(--border);
}

.hero-copy {
    box-sizing: border-box;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px var(--hero-pad-x) !important;
}

.hero-copy h1 {
    width: 100%;
    max-width: 860px;
    margin: 0 !important;
    font-family: var(--font-mono);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.hero-description {
    width: 100%;
    max-width: 680px;
    margin: 28px 0 0 !important;
    font-family: var(--font-main);
    font-size: 17px !important;
    line-height: 1.65 !important;
    text-wrap: pretty;
}

.hero-product {
    box-sizing: border-box;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

@media (max-width: 1050px) {
    :root {
        --hero-pad-x: 30px;
    }

    .hero-copy {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    .hero-product {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }
}

@media (max-width: 760px) {
    :root {
        --hero-pad-x: 20px;
    }

    .hero-meta {
        padding-bottom: 14px !important;
    }

    .hero-layout {
        border-left: 0;
    }

    .hero-copy {
        min-height: 0;
        justify-content: flex-start;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(38px, 11vw, 54px);
        line-height: 1.02;
    }

    .hero-description {
        max-width: 100%;
        margin-top: 22px !important;
        font-size: 16px !important;
    }

    .hero-product {
        padding: 22px 20px !important;
    }
}

@media (max-width: 390px) {
    .hero-copy h1 {
        font-size: 38px;
    }
}

/* =========================================================
   HERO — EQUAL HEIGHT COLUMNS
========================================================= */

@media (min-width: 761px) {
    .hero-product-choice {
        display: grid !important;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        align-self: stretch;
    }

    .hero-product {
        min-height: 0 !important;
        height: auto;
    }
}

/* =========================================================
   MODULES GRID — 5 PER ROW
========================================================= */

@media (min-width: 1051px) {
    .modules-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}