/* ── Container ──────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--s-24);
    padding-right: var(--s-24);
}

/* ── Sections ───────────────────────────────────────── */
.section {
    padding-top: var(--s-80);
    padding-bottom: var(--s-80);
}

.section--surface {
    background-color: var(--c-surface);
}

.section--special {
    background-color: var(--c-special);
}

.section__header {
    margin-bottom: var(--s-48);
}

.section__header h2 {
    margin-bottom: var(--s-16);
}

.section__header p {
    color: var(--c-text-dim);
    max-width: 640px;
}

/* ── Grids ──────────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--s-24);
}

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

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

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

/* ── Two-column layout ──────────────────────────────── */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-48);
    align-items: center;
}

.two-col--reversed {
    direction: rtl;
}

.two-col--reversed > * {
    direction: ltr;
}

.two-col__content {
    display: flex;
    flex-direction: column;
    gap: var(--s-24);
}

.two-col__media img {
    width: 100%;
    border-radius: var(--r-md);
    object-fit: cover;
}

/* ── Feature list ───────────────────────────────────── */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
}

.feature-list li {
    position: relative;
    padding-left: var(--s-24);
    color: var(--c-text);
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background-color: var(--c-accent);
    border-radius: 2px;
    transform: rotate(45deg);
}

/* ── Dual CTA row ───────────────────────────────────── */
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-16);
    margin-top: var(--s-24);
}

/* ── Badges row ─────────────────────────────────────── */
.badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
    margin-top: var(--s-16);
}

.badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: var(--s-4) var(--s-12);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text-dim);
}

/* ── Pills row ──────────────────────────────────────── */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
}

.pill {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: var(--s-4) var(--s-16);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    color: var(--c-text-dim);
}

/* ── Steps (inside two-col: vertical grid) ──────────── */
.steps {
    display: flex;
    flex-direction: column;
    gap: var(--s-24);
    counter-reset: step;
}

.steps--cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-24);
    flex-direction: unset;
}

.step {
    counter-increment: step;
    position: relative;
    padding-left: var(--s-48);
}

.step::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-heading);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--c-white);
    background-color: var(--c-accent);
    border-radius: var(--r-sm);
}

.step__title {
    font-family: var(--f-heading);
    font-weight: 600;
    font-size: 1rem;
    color: var(--c-white);
    margin-bottom: var(--s-4);
}

.step__text {
    color: var(--c-text-dim);
    font-size: 0.9375rem;
}