.page-shell {
    width: min(100% - (var(--space-4) * 2), 1120px);
    margin-inline: auto;
    padding-block: var(--space-12);
}

.hero {
    display: grid;
    gap: var(--space-6);
    padding-block-end: var(--space-8);
    border-block-end: 1px solid var(--border-default);
}

.hero-heading {
    display: grid;
    gap: var(--space-4);
}

.compact-hero {
    max-width: 760px;
}

.hero h1 {
    max-width: 15ch;
    font-size: var(--text-display);
    font-weight: 600;
    letter-spacing: -0.035em;
}

.hero-copy {
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: var(--text-body-lg);
    word-break: keep-all;
}

.readiness-stamp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--surface-secondary);
}

.dashboard,
.showcase-page {
    display: grid;
    gap: var(--space-6);
}

.dashboard {
    padding-block-start: var(--space-6);
}

.content-section,
.showcase-section {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
}

.content-heading,
.section-heading {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: flex-start;
}

.section-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.content-heading h2,
.section-heading h2 {
    margin-block-start: var(--space-1);
    font-size: var(--text-h2);
    font-weight: 600;
}

.content-heading > p,
.section-heading p:not(.section-index) {
    color: var(--text-muted);
    font-size: var(--text-body-sm);
}

.system-list {
    display: grid;
    gap: var(--space-3);
}

.information-grid,
.showcase-grid {
    display: grid;
    gap: var(--space-6);
}

.quickstart .content-heading {
    display: grid;
}

@media (min-width: 640px) {
    .metadata-list > div {
        grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 1fr);
        gap: var(--space-4);
    }
}

@media (min-width: 768px) {
    .page-shell {
        width: min(100% - (var(--space-16) * 2), 1120px);
        padding-block: var(--space-16);
    }

    .readiness-hero {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.38fr);
        align-items: end;
    }

    .readiness-stamp {
        min-height: 112px;
        align-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }

    .status-row {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, auto);
        align-items: center;
    }

    .quickstart .content-heading {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .command-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .information-grid,
    .showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}