.grid {
    display: grid;
    gap: 20px;
}

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

/* Cards are hairline-ruled list items: no box, no fill, no shadow. */
.card {
    padding-block: 18px 22px;
    border-top: 1px solid var(--rule);
}

.card h3 {
    margin-bottom: 8px;
}

.card p {
    color: var(--umber-soft);
    font-size: var(--type-body);
}

.card .card-link {
    display: inline-block;
    margin-top: 14px;
    font-size: var(--type-ui);
}

a.card {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.card:hover h3 {
    color: var(--door-juniper);
    text-decoration: underline;
}

.section-dark .card {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--trim-white);
}

.section-dark .card p {
    color: var(--on-door);
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.split.top {
    align-items: start;
}

.split > div > p {
    max-width: 56ch;
}

.split > div > p + p {
    margin-top: 14px;
}

.split h2 {
    margin-bottom: 16px;
}

.split h3 {
    margin-bottom: 18px;
}

.split h3 + .checklist {
    margin-top: 0;
}

.split .fine-print {
    max-width: 56ch;
}

.portal-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* A board on siding holds a heading block and its actions side by side. Without
   this the copy keeps its 56ch measure and leaves two-thirds of the board empty. */
.band-split {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.band-split .section-head {
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .band-split {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

.terms-grid,
.why-grid,
.services-grid,
.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.why-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
}

.services-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    margin-top: 36px;
}

@media (max-width: 960px) {
    .terms-grid,
    .why-grid,
    .services-grid,
    .faq-grid,
    .split,
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .grid-3,
    .grid-4,
    .stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .card-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Stacked split columns (move-out): keep a gap between the two blocks. */
@media (max-width: 720px) {
    .split.top {
        row-gap: 40px;
    }
}