/* ===========================================================================
   Homepage only (index.html, built by scripts/build_home.py). Loaded after style.css,
   landing-page.css and site.css; everything else on the page is a lander or site.css component.
   Bump PAGE_CSS_VERSION in build_home.py on every edit (1-year immutable cache).
   =========================================================================== */

/* --- Hero: two columns from 901px. The general card is taller than a lander's first step, so the
   photo sits in the left column under the rating instead of a full-width band (our only copy of
   this photo is 768px wide, too small for the band). --- */
@media (min-width: 901px) {
    .home-page .lp-hero-grid--quote {
        grid-template-areas: "copy quote" "proof quote" "photo quote";
        grid-template-rows: auto auto 1fr;
    }

    .home-page .lp-hero-photo {
        grid-column: auto;
        align-self: start;
        max-width: 680px;
        margin-top: var(--space-xl);
    }

    .home-page .lp-hero-photo img {
        aspect-ratio: 16 / 10;
    }
}

/* --- Services --- */
.home-services .lp-section-head {
    margin-bottom: var(--space-xl);
}

/* --- Proof band: four facts, so four columns, two by two on phones --- */
.home-proof .lp-proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1100px;
}

.home-proof .lp-proof-item a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--clr-teal-dark);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.home-proof .lp-proof-item a:focus-visible {
    outline: 3px solid var(--clr-navy);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (max-width: 700px) {
    .home-proof .lp-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-lg);
    }
}

/* --- Before and after --- */
.home-ba .gal-more {
    margin-top: var(--space-xl);
}

/* --- Recurring window cleaning: four plans as one plain ruled table, each column a link --- */
.home-plan-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--clr-border);
    border-radius: 12px;
}

.home-plan-list li {
    display: flex;
}

.home-plan-list li + li {
    border-left: 1px solid var(--clr-border);
}

.home-plan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: var(--space-lg);
    color: var(--clr-navy);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.home-plan-list li:first-child .home-plan {
    border-radius: 11px 0 0 11px;
}

.home-plan-list li:last-child .home-plan {
    border-radius: 0 11px 11px 0;
}

.home-plan-name {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 1.25rem;
    line-height: 1.25;
}

.home-plan-visits {
    color: var(--clr-text-body);
}

.home-plan-off {
    margin-top: var(--space-md);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.1;
}

.home-plan-off b {
    font-size: 2.5rem;
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
}

.home-plan-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-md);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-color: var(--clr-teal-dark);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.home-plan-cue svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--clr-teal-dark);
}

.home-plan:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--clr-navy);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .home-plan:hover {
        background-color: var(--clr-off-white);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-plan {
        transition: none;
    }
}

.home-plans-note {
    margin: var(--space-md) 0 0;
    color: var(--clr-text-muted);
    font-size: 0.95rem;
}

/* Tablets: two plans per row, so "Ask about this plan" stays on one line with its arrow. */
@media (min-width: 761px) and (max-width: 1000px) {
    .home-plan-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-plan-list li + li {
        border-left: 0;
    }

    .home-plan-list li:nth-child(even) {
        border-left: 1px solid var(--clr-border);
    }

    .home-plan-list li:nth-child(n + 3) {
        border-top: 1px solid var(--clr-border);
    }

    .home-plan-list li:first-child .home-plan {
        border-radius: 11px 0 0 0;
    }

    .home-plan-list li:nth-child(2) .home-plan {
        border-radius: 0 11px 0 0;
    }

    .home-plan-list li:nth-child(3) .home-plan {
        border-radius: 0 0 0 11px;
    }

    .home-plan-list li:last-child .home-plan {
        border-radius: 0 0 11px 0;
    }
}

/* Phones and small tablets: one row per plan, name and visits on the left, the discount on the right. */
@media (max-width: 760px) {
    .home-plan-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-plan-list li + li {
        border-left: 0;
        border-top: 1px solid var(--clr-border);
    }

    .home-plan {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name off" "visits off" "cue cue";
        column-gap: var(--space-md);
        row-gap: 2px;
        padding: 18px var(--space-md);
    }

    .home-plan-list li:first-child .home-plan,
    .home-plan-list li:last-child .home-plan {
        border-radius: 0;
    }

    .home-plan-list li:first-child .home-plan {
        border-radius: 11px 11px 0 0;
    }

    .home-plan-list li:last-child .home-plan {
        border-radius: 0 0 11px 11px;
    }

    .home-plan-name {
        grid-area: name;
    }

    .home-plan-visits {
        grid-area: visits;
    }

    .home-plan-off {
        grid-area: off;
        align-self: center;
        margin: 0;
        text-align: right;
    }

    .home-plan-off b {
        font-size: 2rem;
    }

    .home-plan-cue {
        grid-area: cue;
        margin-top: var(--space-sm);
    }
}

/* The reviews carousel follows the white plans section: no doubled white gap (lander rule). */

/* --- How it works: the includes checklist on an off-white band --- */
.home-how {
    background-color: var(--clr-off-white);
}

.home-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-how .lp-include-icon {
    background: var(--clr-off-white);
    box-shadow: 0 0 0 6px var(--clr-off-white);
}