/* ============================================================
   Bootcamp sales page — modern design layer
   Loaded AFTER styles.css; scoped to dotnetbootcamp.html only.
   ============================================================ */

:root {
    /* Brand & accent */
    --brand: #5f4dee;
    /* purple — nav, header, primary chrome */
    --brand-dark: #4a3ad0;
    --accent: #2d4de0;
    /* blue — content icons, checks, links */
    --brand-ink: #2e3676;
    /* deep brand — small icon blocks */

    /* Neutrals / text */
    --ink: #1f2733;
    /* near-black headings (replaces #2c3e50) */
    --muted: #5a6c7d;
    /* secondary body copy */

    /* Surfaces */
    --bg: #ffffff;
    --bg-alt: #f6f8fb;
    /* modernized section tint (replaces #f8f9fa) */
    --border: #e7ebf3;

    /* Semantic */
    --success: #16a34a;
    --warning: #eb8a2f;
    --danger: #e74c3c;

    /* Shape & depth */
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 10px rgba(16, 24, 40, .06);
    --shadow-md: 0 14px 36px rgba(16, 24, 40, .10);
    --shadow-brand: 0 18px 44px rgba(95, 77, 238, .20);

    /* Type scale */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Typography ---------- */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.navbar,
.nav-link,
.btn-solid-lg,
.btn-solid-sm,
.btn-outline-lg,
.card-title,
.chapter-title,
.lesson-title,
.lead,
input,
button,
textarea,
select {
    font-family: var(--font-sans);
}

/* Inter benefits from slightly tighter display headings */
.h2-heading,
.display-3,
.display-4 {
    letter-spacing: -0.02em;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Token-driven helpers ---------- */
.section-alt {
    background: var(--bg-alt);
}

.text-ink {
    color: var(--ink);
}

.text-muted-2 {
    color: var(--muted);
}

.text-brand-ink {
    color: var(--brand-ink);
}

.text-accent {
    color: var(--accent);
}

.text-brand {
    color: var(--brand);
}

/* ---------- Feature rows (image + checklist) ---------- */
.feature-list {
    font-size: 1.15rem;
}

.feature-check {
    gap: 0.75rem;
}

.feature-check-icon {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Unify every list/check icon on this page to the accent token
   (styles.css otherwise pins these to a slightly different blue). */
.list-unstyled .fas,
.feature-check-icon .fas {
    color: var(--accent);
}

.screenshot-img {
    width: 100%;
}

/* ---------- Technology / capability cards ---------- */
.tech-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

.tech-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.tech-icon {
    color: var(--accent);
}

/* ---------- Pillar section headers (the 3 "chapters") ---------- */
.pillar-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
    background: rgba(95, 77, 238, .08);
    padding: 0.4rem 1rem;
    border-radius: 50rem;
    margin-bottom: 1rem;
}

/* ---------- Featured "new course" callout ---------- */
.featured-card {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand);
    padding: 3rem 2rem 2rem;
}

.featured-badge-wrap {
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    text-align: center;
}

.featured-badge {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 1.2rem;
    border-radius: 50rem;
    box-shadow: 0 8px 18px rgba(95, 77, 238, .35);
}

/* ---------- Pricing: compact purple focal card ---------- */
/* Reuses the shared purple `.cards-2 .card.best-value` (light text on brand). Now that
   the card is compact and centered, the purple makes the section stand out against the
   white page instead of reading as an oversized slab. ID selectors win over the base. */
#pricing .pricing-card {
    max-width: 600px;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand);
    /* purple-tinted glow lifts it off the white page */
}

#pricing .pricing-card .card-body {
    padding: 2.75rem;
}

#pricing .pricing-card .card-title {
    font-size: 1.7rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

#pricing .pricing-boxes {
    max-height: 280px;
    margin-bottom: 1.75rem;
}

/* Value anchor — concrete scale + tangible deliverables, above the price to justify it. */
#pricing .pricing-anchor {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 0.4rem;
}

#pricing .pricing-extras {
    color: #d4d9f7;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

#pricing .pricing-reassure {
    color: #e4e7fc;
    font-size: 0.9rem;
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}


/* ---------- Misc modern polish ---------- */
.header-decoration {
    display: none;
}

/* drop the dated SVG wave */