.container {
    width: min(calc(100% - 2rem), var(--max-width-container));
    margin-inline: auto;
}

.container-narrow {
    width: min(calc(100% - 2rem), 52rem);
    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--section-padding-y-mobile);
}

.section-tight {
    padding-block: var(--space-12);
}

.section-hero {
    min-height: calc(100svh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: calc(var(--section-padding-y-mobile) + var(--header-height)) var(--section-padding-y-mobile);
}

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

.section-header {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.section-header.centered {
    justify-items: center;
    text-align: center;
}

.stack-lg {
    display: grid;
    gap: var(--space-8);
}

.stack-md {
    display: grid;
    gap: var(--space-6);
}

.stack-sm {
    display: grid;
    gap: var(--space-4);
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.grid-2,
.grid-3,
.grid-4 {
    display: grid;
    gap: var(--grid-gap-mobile);
}

.hero-grid {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

.media-frame {
    position: relative;
    isolation: isolate;
}

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

.metric-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-subtle);
    background: rgba(255, 255, 255, 0.02);
}

.metric-card strong {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
}

.split-section {
    display: grid;
    gap: var(--space-8);
}

.split-section.reverse .split-copy {
    order: 2;
}

.split-section.reverse .split-visual {
    order: 1;
}

.feature-columns {
    display: grid;
    gap: var(--space-8);
}

.hero-copy {
    display: grid;
    gap: var(--space-6);
}

.hero-copy p {
    font-size: var(--text-lg);
}

.hero-art {
    position: relative;
}

.subgrid-list {
    display: grid;
    gap: var(--space-4);
}

.comparison-layout {
    display: grid;
    gap: var(--space-6);
}

.faq-grid {
    display: grid;
    gap: var(--space-6);
}

.hero-center {
    text-align: center;
}

.hero-center>* {
    margin-inline: auto;
}

.legal-layout {
    display: grid;
    gap: var(--space-8);
}

.legal-sidebar {
    position: relative;
}

.sticky-panel {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: var(--border-subtle);
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.center-panel {
    width: min(100%, 48rem);
    margin-inline: auto;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (min-width: 640px) {

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

@media (min-width: 768px) {
    .container {
        width: min(calc(100% - 3rem), var(--max-width-container));
    }

    .section {
        padding-block: var(--section-padding-y-tablet);
    }

    .section-hero {
        padding-block: calc(var(--section-padding-y-hero) + var(--header-height)) var(--section-padding-y-tablet);
    }

    .hero-grid,
    .split-section,
    .comparison-layout,
    .feature-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .split-section.reverse .split-copy,
    .split-section.reverse .split-visual {
        order: initial;
    }

    .split-section.reverse .split-copy {
        grid-column: 1;
        grid-row: 1;
    }

    .split-section.reverse .split-visual {
        grid-column: 2;
        grid-row: 1;
    }

    .legal-sidebar .sticky-panel {
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
    }
}

@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--grid-gap-desktop);
    }

    .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--grid-gap-desktop);
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    .feature-columns {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .legal-layout {
        grid-template-columns: 280px 1fr;
        gap: var(--space-16);
    }

    .comparison-layout {
        grid-template-columns: minmax(0, 1fr);
    }

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

/* desktop padding for existing section classes */
@media (min-width: 1024px) {
    .section {
        padding-block: var(--section-padding-y-desktop);
    }

    .section-hero {
        padding-block: calc(var(--section-padding-y-hero) + var(--header-height)) var(--section-padding-y-desktop);
    }
}

/* ========================================= */
/* SECTION PATTERN LIBRARY (Light Theme)     */
/* ========================================= */

/* Pattern 1: Full-bleed hero */
.section-hero-fullbleed {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(var(--section-padding-y-mobile) + var(--header-height)) var(--section-padding-y-mobile);
    background: var(--gradient-hero);
    text-align: center;
}

.section-hero-fullbleed .section-inner {
    width: min(calc(100% - 2rem), var(--max-width-copy));
    margin-inline: auto;
}

/* Pattern 2: Split sections */
.section-split-left,
.section-split-right {
    padding-block: var(--section-padding-y-mobile);
}

.section-split-left {
    background: var(--color-bg-primary);
}

.section-split-right {
    background: var(--color-bg-secondary);
}

.section-split-inner {
    display: grid;
    gap: var(--space-8);
    width: min(calc(100% - 2rem), var(--max-width-container));
    margin-inline: auto;
}

/* Image first on mobile for both split variants */
.section-split-left .split-image,
.section-split-right .split-image {
    order: -1;
}

.section-split-left .split-copy,
.section-split-right .split-copy {
    order: 1;
}

/* Pattern 3: Stats bar */
.section-stats-bar {
    padding-block: var(--space-16);
    background: var(--color-bg-secondary);
    border-block: var(--border-subtle);
}

.stats-bar-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    width: min(calc(100% - 2rem), var(--max-width-wide));
    margin-inline: auto;
}

.stat-block {
    display: grid;
    gap: var(--space-2);
    text-align: center;
    padding-block: var(--space-4);
    position: relative;
}

.stat-number {
    font-family: var(--font-display);
    font-size: var(--text-stat);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-none);
}

.stat-caption {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

/* Pattern 4: Centered section */
.section-centered {
    padding-block: var(--section-padding-y-mobile);
    background: var(--color-bg-primary);
}

.section-centered .section-header {
    width: min(calc(100% - 2rem), var(--max-width-copy));
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-centered .section-content {
    width: min(calc(100% - 2rem), var(--max-width-container));
    margin-inline: auto;
}

/* Pattern 5: Full-bleed image */
.section-fullbleed-image {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    padding-block: var(--section-padding-y-mobile);
}

.section-fullbleed-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-image-overlay);
    pointer-events: none;
}

.section-fullbleed-image .section-inner {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 2rem), var(--max-width-copy));
    margin-inline: auto;
    color: var(--color-text-inverse);
}

/* Pattern 6: CTA banner */
.section-cta-banner {
    padding-block: var(--section-padding-y-mobile);
    background: var(--gradient-cta-banner);
    text-align: center;
}

.section-cta-banner .section-inner {
    width: min(calc(100% - 2rem), var(--max-width-copy));
    margin-inline: auto;
    display: grid;
    gap: var(--space-8);
}

.section-cta-banner .inline-actions {
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* ========================================= */
/* RESPONSIVE: NEW SECTION PATTERNS          */
/* ========================================= */

@media (min-width: 768px) {
    .section-hero-fullbleed {
        padding-block: calc(var(--section-padding-y-hero) + var(--header-height)) var(--section-padding-y-tablet);
    }

    .section-split-left,
    .section-split-right {
        padding-block: var(--section-padding-y-tablet);
    }

    .section-split-inner {
        grid-template-columns: minmax(0, var(--split-ratio-image)) minmax(0, var(--split-ratio-copy));
        gap: var(--split-gap);
        align-items: center;
    }

    /* For split-right, flip column order so image is on the right */
    .section-split-right .section-split-inner {
        grid-template-columns: minmax(0, var(--split-ratio-copy)) minmax(0, var(--split-ratio-image));
    }

    /* Reset mobile ordering — desktop controls column position */
    .section-split-left .split-image,
    .section-split-left .split-copy,
    .section-split-right .split-image,
    .section-split-right .split-copy {
        order: initial;
    }

    /* split-right: copy first in source stays in col 1, image in col 2 */
    .section-split-right .split-copy {
        order: -1;
    }

    .section-centered {
        padding-block: var(--section-padding-y-tablet);
    }

    .section-cta-banner {
        padding-block: var(--section-padding-y-tablet);
    }

    .section-cta-banner .inline-actions {
        flex-direction: row;
        justify-content: center;
    }

    .section-fullbleed-image {
        min-height: 70vh;
    }

    .stats-bar-inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .section-hero-fullbleed {
        padding-block: calc(var(--section-padding-y-hero) + var(--header-height)) var(--section-padding-y-desktop);
    }

    .section-split-left,
    .section-split-right {
        padding-block: var(--section-padding-y-desktop);
    }

    .section-centered {
        padding-block: var(--section-padding-y-desktop);
    }

    .section-cta-banner {
        padding-block: var(--section-padding-y-hero);
    }
}

@media (min-width: 1280px) {
    .section-split-inner {
        width: min(calc(100% - 4rem), var(--max-width-container));
    }
}