p.center {
    text-align: center;
}

:is(header, section) > .container {
    width: 90%;
    max-inline-size: 1280px;
    margin-inline: auto;
}

h1, h2 {
    text-align: center;
}

:is(h1, h2) + p {
    max-inline-size: 60ch;
    align-self: center;
}

header + section,
section + section {
    margin-block-start: var(--space-2xl);
}

section {
    padding-block: var(--space-2xl);
}

/*
h2 + :is(p, ul, ol) {
    margin-block-start: var(--space-l);
}
*/

header .column {
    gap: var(--space-l);
}

header .button {
    align-self: center;
}

section:nth-child(even) {
    background-color: var(--color-background-alt);
}

#problem > .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-s);
}

.card-list {
    max-inline-size: 800px;
    margin-inline: auto;
    margin-block-start: var(--space-l-xl);
}

#four-step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
    gap: var(--space-s);
    margin-block-start: var(--space-l-xl);
    margin-inline: auto;
    max-inline-size: 800px;
}

#four-step-grid h3 {
    font-size: var(--step-2);
}

#four-step-grid h3 + p {
    margin-block-start: var(--space-xs);
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    border-radius: var(--border-radius-card);
    background-color: var(--color-card-background);
    padding: var(--space-l) var(--space-s);
}

:is(.card, .ghost-card) h3 {
    font-size: var(--step-1);
    letter-spacing: -1px;
}

.card .icon {
    color: var(--color-danger);
    width: 28px;
    height: 28px;
}

.ghost-card > .row {
    align-items: center;
    gap: var(--space-m);
}

.ghost-card .icon {
    width: 32px;
    height: 32px;
    color: var(--color-highlight);
}

.ghost-card h3 + p {
    margin-block-start: var(--space-xs)
}

.icon.website {
    margin-inline-start: -8px; /* FIXME: Hack */
}

.card-list li {
    margin-bottom: var(--space-m-l);
}

#pricing > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-l);
}

#pricing-grid {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: 1fr;
    margin-inline: auto;
}

:not(#pricing-grid) li {
    list-style-type: none;
}

#pricing-grid .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

#pricing-grid .bullets {
    padding-inline-start: var(--space-m);
}

li {
    list-style-position: outside;
}

#pricing-grid .bullets li {
    list-style-type: disc;
    display: list-item; /* ✅ must be this */
}

#pricing-grid .bullets > li + li {
    list-style-type: none;
    margin-block-start: var(--space-2xs);
}

#pricing-grid h3 {
    font-size: var(--step-2);
    letter-spacing: -1px;
}

#pricing-grid .icon {
    width: 48px;
    height: 48px;
}

#call-to-action > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-l);
}

/* On screens wider than 900px, snap to exactly 3 columns */
@media (min-width: 900px) {
    #pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}