*, *::before, *::after { box-sizing: border-box; }

:root {
    --dcx-red-1: #b10d28;
    --dcx-red-2: #c8102e;
    --dcx-red-3: #ff4d5f;
    --dcx-dark: #0f172b;
    --dcx-charcoal: #2f2f31;
    --dcx-text-soft: #62748e;
    --dcx-surface: #f8fafc;
    --dcx-white: #ffffff;
    --dcx-header-height: 84px;
    --dcx-container-max: 1280px;
    --dcx-container-gutter: 20px;
}

@media (max-width: 1199px) {
    :root {
        --dcx-container-gutter: 16px;
    }
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--dcx-dark);
    background: var(--dcx-white);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

#dcx-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#dcx-main {
    flex: 1;
}

.dcx-content-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 20px;
}

.dcx-content-page--centered {
    text-align: center;
}

/* Shared section label. Hero, pricing and status badges intentionally use
   their own component-specific treatments. */
.dcx-section-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    max-width: 100%;
    padding: 7px 20px;
    border: 1px solid rgba(231, 25, 57, 0.24);
    border-radius: 999px;
    background: #fff;
    color: #e71939;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

/* ── Section vertical rhythm ──────────────────────────────── */
/* Each section owns its own breathing room — no inter-section margins.
   Optical correction: sections ending with heavy elements (cards)
   naturally need the same padding as sections ending with text,
   because the padding is measured from the section edge, not the
   visual weight of the last child. */
.dcx-section {
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (max-width: 1024px) {
    .dcx-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media (max-width: 767px) {
    .dcx-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}