/* ==== FEATURED (features list) ==== */
.features-featured__media {
    margin-top: var(--s-7);
}

.features-featured__media img {
    width: 100%;
    height: auto;
}

/* ==== HERO (feature detail) ==== */
/* The shared 680px column breaks display titles into four lines; detail heroes get a wider title measure, lead stays at its token width. */
@media (min-width: 1024px) {
    .page-hero--center .page-hero__inner {
        max-width: calc(920px + 2 * var(--container-pad));
    }
}

.page-hero--center .t-display {
    text-wrap: balance;
}

/* ==== CLOSING ==== */
/* Feature CTA titles run longer than the home one; on one line they slide under the right-edge closing photo. */
.closing__title {
    max-width: 1040px;
    text-wrap: balance;
}

/* ==== SUMMARY (feature detail) ==== */
.features-summary__grid {
    display: grid;
    gap: var(--grid-gap);
    margin-top: var(--s-7);
}

.features-summary .card {
    padding: var(--s-6);
    border: 1px solid var(--c-line);
    background: var(--c-canvas);
}

@media (min-width: 768px) {
    .features-summary__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==== SECTIONS (feature detail) ==== */
.feature-head {
    display: grid;
    gap: var(--s-5);
    margin-bottom: var(--s-7);
}

.feature-head__title {
    display: grid;
    gap: var(--s-5);
    justify-items: start;
}

.feature-body {
    display: grid;
    gap: var(--s-7) var(--grid-gap);
}

.feature-items {
    display: grid;
    gap: var(--s-6) var(--grid-gap);
}

.feature-item {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-line-strong);
}

.feature-shot {
    display: grid;
    place-items: center;
    padding: var(--s-6);
    background: var(--c-chalk);
}

.feature-shot img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: contain;
}

/* Product screenshots keep their full frame (no letterboxing) and read as a window on the chalk mat. */
.feature-shot--screen {
    padding: var(--s-5);
}

.feature-shot--screen img {
    max-height: none;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px -16px rgba(17, 17, 17, 0.25);
}

.feature-body--wide .feature-shot {
    order: -1;
}

.features-section .quote-card {
    margin-top: var(--s-8);
    border-top: 1px solid var(--c-line);
}

@media (min-width: 1024px) {
    /* Title left, lead right on the shared 10-column content grid, so the head row has no empty half. */
    .feature-head {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        align-items: end;
        gap: 0 var(--grid-gap);
        margin-bottom: var(--s-8);
    }

    .feature-head__title {
        grid-column: 1 / span 6;
    }

    .feature-head .lead {
        grid-column: 7 / span 4;
    }

    .feature-items {
        grid-template-columns: repeat(3, 1fr);
    }

    /* With tall art the points stack beside it instead of trailing a full-width frame. */
    .feature-body--side {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        align-items: start;
    }

    .feature-body--side .feature-items {
        grid-column: 1 / span 4;
        grid-template-columns: 1fr;
    }

    .feature-body--side .feature-shot {
        grid-column: 5 / span 6;
    }

    .feature-shot--screen {
        padding: var(--s-6);
    }

    /* Use-case card: label and quote share one row instead of a tall card with an empty left gutter. */
    .features-section .quote-card--text {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        column-gap: var(--grid-gap);
        row-gap: 0;
        padding: var(--s-7) var(--s-6);
    }

    .features-section .quote-card--text .quote-card__company {
        grid-column: 1 / span 3;
        grid-row: 1;
        padding-left: var(--s-3);
        padding-top: 0.4em;
        font-size: var(--fs-label);
    }

    .features-section .quote-card--text .quote-card__body {
        grid-column: 4 / span 6;
        grid-row: 1;
        gap: var(--s-6);
        max-width: none;
    }
}