/* ==========================================================================
   AI Conversation Analyzer — Layout (Sections, Grids, Page Header, Content)
   ========================================================================== */

/* ===========================
   Section Layout
   =========================== */

.section {
    padding: 120px 0;
}

.section-header {
    max-width: 720px;
    margin: 0 auto 72px;
    text-align: center;
}

.section-header .badge { margin-bottom: 20px; }

.section-header h2 {
    margin-bottom: 18px;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--muted);
}

.section-label {
    display: inline-block;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.section-alt {
    background: var(--bg-2);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.divider {
    height: 1px;
    background: var(--border-light);
    margin: 0;
    border: none;
}

/* ===========================
   Grid Layouts
   =========================== */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

/* ===========================
   Page Header
   =========================== */

.page-header {
    padding: calc(var(--nav-height) + 80px) 0 60px;
    text-align: center;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-light);
}

.page-header h1 { margin-bottom: 14px; }
.page-header p { max-width: 600px; margin: 0 auto; font-size: 1.1rem; }

/* ===========================
   Content Pages
   =========================== */

.content-section {
    padding: 80px 0;
}

.content-section + .content-section {
    border-top: 1px solid var(--border-light);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.content-block h3 { margin-bottom: 14px; }
.content-block p { margin-bottom: 16px; }