/* Certification page — redesign */

.cert-page {
    --cert-cells: #00ebff;
    --cert-ops: #fbbf24;
    --cert-care: #4ade80;
    --cert-font-serif: 'IBM Plex Serif', serif;
    --cert-font-mono: 'JetBrains Mono', monospace;
    --cert-max-w: 1200px;
    --cert-section-gap: 120px;
    --cert-bg-surface: rgba(255,255,255,0.02);
    --cert-bg-elevated: rgba(255,255,255,0.04);
    --cert-text-secondary: rgba(255,255,255,0.55);
    --cert-text-tertiary: rgba(255,255,255,0.32);
    --cert-text-disabled: rgba(255,255,255,0.18);
    --cert-border-subtle: rgba(255,255,255,0.10);
    --cert-border-mid: rgba(255,255,255,0.25);
}

/* ── DISCIPLINE COLOR CUSTOM PROPERTIES ── */
.cert-role-page--cells { --cert-discipline-color: #00ebff; }
.cert-role-page--ops   { --cert-discipline-color: #fbbf24; }
.cert-role-page--care  { --cert-discipline-color: #4ade80; }

/* ── SECTION LABEL ── */
.cert-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--cert-text-tertiary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.cert-section-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--cert-border-subtle);
}

/* ── SHARED HEADING ── */
.cert-page h2 {
    font-family: var(--cert-font-serif);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    margin-bottom: 48px;
}

/* ── BUTTONS ── */
.cert-btn {
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s, border-color 0.2s, color 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.cert-btn-primary {
    background: #fff;
    color: #000;
    border-color: var(--color-text-primary);
}

.cert-btn-primary:hover {
    opacity: 0.9;
}

.cert-btn-cyan-ghost {
    background: transparent;
    color: var(--cert-cells);
    border: 1px solid var(--cert-cells);
}

.cert-btn-cyan-ghost:hover {
    background: rgba(0,235,255,0.08);
}

.cert-btn-discipline-ghost {
    background: transparent;
    color: var(--cert-discipline-color, var(--cert-cells));
    border: 1px solid var(--cert-discipline-color, var(--cert-cells));
}

.cert-btn-discipline-ghost:hover {
    background: rgba(255,255,255,0.04);
}

.cert-btn-full {
    width: 100%;
}

/* ── HERO ── */
.cert-hero {
    position: relative;
    /* Previously 160px top / 120px bottom which created a huge vertical
       void above the h1 on the /certification overview (and role/path
       pages that reuse these classes). Dropped to match .hero spacing
       used throughout the rest of the site. */
    padding: var(--space-xl) 48px var(--space-xl);
    max-width: var(--cert-max-w);
    margin: 0 auto;
    text-align: left;
}

/* Split cert-hero layout: left body column + right Freepik illustration. */
.cert-hero--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: nowrap;
}

.cert-hero__body {
    flex: 1 1 0;
    min-width: 0;
}

.cert-hero__illustration {
    flex: 0 0 auto;
    color: var(--cert-cells);
    width: 360px;
    height: 360px;
}

@media (max-width: 1100px) {
    .cert-hero__illustration {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 860px) {
    .cert-hero--split {
        flex-direction: column;
        align-items: flex-start;
    }
    .cert-hero__illustration {
        align-self: center;
        width: 280px;
        height: 280px;
    }
}

.cert-hero-orb {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(ellipse at center, rgba(0,120,255,0.10) 0%, rgba(0,80,200,0.04) 35%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.cert-hero h1 {
    /* Fallback chain: use the cert-page local if present, otherwise the
       global --font-serif, otherwise IBM Plex Serif directly. This keeps
       the title serif on both the original .cert-page-wrapped templates
       and the newer .cert-theme-wrapped path/role templates. */
    font-family: var(--cert-font-serif, var(--font-serif, 'IBM Plex Serif', serif));
    font-size: clamp(44px, 7vw, 68px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.04em;
    margin-bottom: 20px;
    max-width: 800px;
}

.cert-hero-subtitle {
    font-size: 18px;
    color: var(--cert-text-secondary);
    max-width: 560px;
    margin-bottom: 40px;
    line-height: 1.7;
}

.cert-hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── JENSEN HUANG QUOTE BOX ── */
.cert-quote-box {
    max-width: var(--cert-max-w);
    margin: 0 auto;
    padding: 0 48px 80px;
}

.cert-quote-box--main {
    padding-bottom: var(--cert-section-gap);
}

.cert-quote-box blockquote {
    background: rgba(255,255,255,0.04);
    border-left: 4px solid #00ebff;
    border-radius: 4px;
    padding: 40px 48px;
    margin: 0;
}

.cert-quote-box blockquote p {
    font-family: 'IBM Plex Serif', serif;
    font-style: italic;
    font-size: clamp(18px, 2.5vw, 24px);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}

.cert-quote-box blockquote cite {
    display: block;
    font-family: inherit;
    font-style: normal;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ── DISCIPLINES ── */
.cert-disciplines {
    padding: 0 48px var(--cert-section-gap);
    max-width: var(--cert-max-w);
    margin: 0 auto;
}

/* Discipline card: full width, colored left border */
.cert-discipline-card {
    background: var(--cert-bg-surface);
    border-radius: 4px;
    border-left: 4px solid #fff;
    padding: 32px;
    margin-bottom: 32px;
}

.cert-discipline-card:last-child {
    margin-bottom: 0;
}

.cert-discipline-cells { border-left-color: var(--cert-cells); }
.cert-discipline-ops   { border-left-color: var(--cert-ops); }
.cert-discipline-care  { border-left-color: var(--cert-care); }

.cert-discipline-header {
    margin-bottom: 28px;
}

.cert-discipline-name {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.cert-color-cells { color: var(--cert-cells); }
.cert-color-ops   { color: var(--cert-ops); }
.cert-color-care  { color: var(--cert-care); }

.cert-discipline-tagline {
    font-size: 14px;
    color: var(--cert-text-secondary);
    margin: 0;
}

/* Roles grid */
.cert-roles-grid {
    display: grid;
    gap: 16px;
}

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

.cert-role-card {
    background: var(--cert-bg-elevated);
    border: 1px solid var(--cert-border-subtle);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: border-color 0.2s;
}

.cert-role-card:hover.cert-role-cells { border-color: var(--cert-cells); }
.cert-role-card:hover.cert-role-ops   { border-color: var(--cert-ops); }
.cert-role-card:hover.cert-role-care  { border-color: var(--cert-care); }

.cert-role-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.cert-role-icon svg {
    display: block;
}

.cert-role-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.cert-role-zone {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--cert-text-tertiary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cert-role-desc {
    font-size: 13px;
    color: var(--cert-text-secondary);
    line-height: 1.5;
    margin: 0;
}

a.cert-role-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.cert-role-link {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-top: 12px;
    transition: opacity 0.2s;
}

.cert-role-cells .cert-role-link { color: var(--cert-cells); }
.cert-role-ops .cert-role-link   { color: var(--cert-ops); }
.cert-role-care .cert-role-link  { color: var(--cert-care); }

a.cert-role-card:hover .cert-role-link {
    opacity: 0.8;
}

/* ── CROSS-REFERENCE COMPARISON TABLE ── */
.cert-comparison {
    padding: 0 48px var(--cert-section-gap);
    max-width: var(--cert-max-w);
    margin: 0 auto;
}

.cert-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cert-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cert-comparison-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cert-text-tertiary);
    border-bottom: 1px solid var(--cert-border-mid);
    white-space: nowrap;
}

.cert-comparison-table tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--cert-border-subtle);
    color: var(--cert-text-secondary);
    vertical-align: middle;
}

.cert-comparison-table tbody tr:hover {
    background: var(--cert-bg-surface);
}

.cert-comparison-table tbody td:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
}

.cert-comparison-table tbody td:first-child a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.cert-comparison-table tbody td:first-child a:hover {
    color: var(--cert-cells);
}

.cert-table-discipline {
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

a.cert-table-discipline:hover {
    text-decoration: underline;
}

/* ── CERTIFICATION PRICING ── */
.cert-pricing {
    padding: 0 48px var(--cert-section-gap);
    max-width: var(--cert-max-w);
    margin: 0 auto;
}

.cert-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cert-pricing-card {
    background: var(--cert-bg-surface);
    border: 1px solid var(--cert-border-subtle);
    border-radius: 4px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.cert-pricing-card--featured {
    border-color: var(--cert-cells);
    background: var(--cert-bg-elevated);
}

.cert-pricing-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.cert-pricing-amount {
    font-family: var(--cert-font-serif);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.cert-pricing-amount span {
    font-size: 16px;
    font-weight: 400;
    color: var(--cert-text-secondary);
}

.cert-pricing-plus {
    font-size: 16px;
    color: var(--cert-text-secondary);
    margin-bottom: 8px;
}

.cert-pricing-desc {
    font-size: 14px;
    color: var(--cert-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.cert-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}

.cert-pricing-features li {
    padding: 6px 0;
    font-size: 14px;
    color: var(--cert-text-secondary);
    padding-left: 20px;
    position: relative;
}

.cert-pricing-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--cert-cells);
    font-weight: 600;
}

.cert-pricing-card .cert-btn {
    margin-top: auto;
}

/* ── HOW IT WORKS ── */
.cert-process {
    padding: 0 48px var(--cert-section-gap);
    max-width: var(--cert-max-w);
    margin: 0 auto;
}

.cert-process-track {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.cert-process-step {
    flex: 1;
    text-align: left;
    padding: 0 16px;
}

.cert-process-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--cert-border-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.cert-process-step h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.cert-process-step p {
    font-size: 13px;
    color: var(--cert-text-secondary);
    line-height: 1.6;
    max-width: 200px;
    margin: 0;
}

.cert-process-line {
    width: 60px;
    height: 1px;
    background: var(--cert-border-mid);
    flex-shrink: 0;
    margin-top: 24px;
}

/* ── METRICS ── */
.cert-metrics {
    padding: 0 48px var(--cert-section-gap);
    max-width: var(--cert-max-w);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 32px;
}

.cert-metric-card {
    border: 1px solid var(--cert-border-subtle);
    border-radius: 4px;
    background: var(--cert-bg-surface);
    padding: 40px 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cert-metric-number {
    font-family: var(--cert-font-serif);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--color-text-primary);
}

.cert-metric-label {
    font-size: 13px;
    color: var(--cert-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── ENROLLMENT FORM ── */
.cert-enrollment {
    padding: 0 48px var(--cert-section-gap);
    max-width: var(--cert-max-w);
    margin: 0 auto;
}

.cert-form-wrapper {
    max-width: 480px;
}

.cert-form-group {
    margin-bottom: 20px;
}

.cert-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--cert-text-tertiary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cert-form-group input {
    width: 100%;
    background: var(--color-bg, #000);
    border: 1px solid var(--cert-border-subtle);
    border-radius: 4px;
    padding: 12px 14px;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.cert-form-group input:focus {
    outline: none;
    border-color: var(--cert-border-mid);
}

.cert-form-group input::placeholder {
    color: var(--cert-text-disabled);
}

.cert-form-success {
    display: none;
    padding: 24px;
    background: var(--cert-bg-elevated);
    border: 1px solid var(--cert-border-subtle);
    border-radius: 4px;
    text-align: left;
    color: var(--cert-care);
    font-weight: 500;
}

.cert-form-alt {
    margin-top: 20px;
    font-size: 13px;
    color: var(--cert-text-tertiary);
}

.cert-form-alt a {
    color: var(--cert-cells);
    text-decoration: none;
}

.cert-form-alt a:hover {
    text-decoration: underline;
}

/* ── FAQ ── */
.cert-faq {
    padding: 0 48px var(--cert-section-gap);
    max-width: var(--cert-max-w);
    margin: 0 auto;
}

.cert-faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cert-faq-item {
    border-bottom: 1px solid var(--cert-border-subtle);
    padding: 24px 0;
}

.cert-faq-item:first-child {
    border-top: 1px solid var(--cert-border-subtle);
}

.cert-faq-question {
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    text-align: left;
    transition: color 0.2s;
}

.cert-faq-question:hover {
    color: var(--cert-cells);
}

.cert-faq-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.cert-faq-item.open .cert-faq-toggle {
    transform: rotate(45deg);
}

.cert-faq-answer {
    display: none;
    color: var(--cert-text-secondary);
    font-size: 14px;
    margin-top: 16px;
    line-height: 1.8;
}

.cert-faq-item.open .cert-faq-answer {
    display: block;
}

/* ── FINAL CTA ── */
.cert-final-cta {
    padding: 0 48px var(--cert-section-gap);
    max-width: var(--cert-max-w);
    margin: 0 auto;
    text-align: left;
}

.cert-final-cta h2 {
    margin-bottom: 32px;
}

.cert-final-cta .cert-hero-ctas {
    justify-content: flex-start;
}

/* ══════════════════════════════════════════════════
   INDIVIDUAL ROLE PAGE STYLES
   ══════════════════════════════════════════════════ */

.cert-role-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
}

.cert-role-hero {
    padding: 160px 0 80px;
    position: relative;
}

.cert-role-hero .cert-hero-orb {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(ellipse at center, rgba(0,120,255,0.10) 0%, rgba(0,80,200,0.04) 35%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.cert-role-discipline-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.cert-role-hero-title-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.cert-role-hero-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.cert-role-hero-icon svg {
    display: block;
    width: 48px;
    height: 48px;
}

.cert-role-hero h1 {
    font-family: 'IBM Plex Serif', serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 0;
    max-width: 800px;
}

.cert-role-hero-tagline {
    font-size: 18px;
    color: var(--color-text-secondary);
    max-width: 560px;
    line-height: 1.7;
}

/* Role page quote box (inside role-page container) */
.cert-role-page .cert-quote-box {
    padding: 0 0 80px;
}

.cert-role-section {
    margin-bottom: 80px;
}

.cert-role-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.cert-role-section-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: rgba(255,255,255,0.10);
}

.cert-role-section h2 {
    font-family: 'IBM Plex Serif', serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    padding-left: 16px;
    border-left: 3px solid var(--cert-discipline-color, rgba(255,255,255,0.10));
}

.cert-role-overview {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.8;
    max-width: 720px;
}

.cert-role-overview p {
    margin-bottom: 16px;
}

.cert-role-context {
    max-width: 720px;
}

.cert-role-context-text {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 24px;
}

.cert-role-quote {
    border-left: 3px solid;
    padding-left: 24px;
    margin: 0;
}

.cert-role-quote p {
    font-family: 'IBM Plex Serif', serif;
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

.cert-role-quote cite {
    font-size: 14px;
    font-style: normal;
    color: var(--color-text-secondary);
}

/* Skills list with discipline-colored bullets */
.cert-role-skills-list {
    list-style: none;
    padding: 0;
    max-width: 600px;
}

.cert-role-skills-list li {
    padding: 8px 0;
    font-size: 15px;
    color: var(--color-text-secondary);
    padding-left: 24px;
    position: relative;
}

.cert-role-skills-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--cert-discipline-color, rgba(255,255,255,0.55));
}

/* Cross-reference cards with top border in discipline color */
.cert-role-crossref-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 720px;
}

.cert-role-crossref-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.10);
    border-top: 3px solid var(--cert-discipline-color, rgba(255,255,255,0.10));
    border-radius: 4px;
    padding: 20px;
}

.cert-role-crossref-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.cert-role-crossref-relevance {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.cert-role-modules-list {
    list-style: none;
    padding: 0;
    max-width: 600px;
    counter-reset: module;
}

.cert-role-modules-list li {
    padding: 12px 0;
    font-size: 15px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    counter-increment: module;
    padding-left: 36px;
    position: relative;
}

.cert-role-modules-list li::before {
    content: counter(module, decimal-leading-zero);
    position: absolute;
    left: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-tertiary);
}

.cert-role-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    max-width: 600px;
}

.cert-role-exam-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 4px;
    padding: 20px;
}

.cert-role-exam-value {
    display: block;
    font-family: 'IBM Plex Serif', serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.cert-role-exam-label {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Pricing callout on role pages */
.cert-role-pricing-callout {
    background: var(--cert-bg-elevated);
    border: 1px solid var(--cert-border-subtle);
    border-left: 4px solid var(--cert-discipline-color, var(--cert-cells));
    border-radius: 4px;
    padding: 32px;
    max-width: 600px;
}

.cert-role-pricing-included {
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1.7;
    margin-bottom: 8px;
}

.cert-role-pricing-included strong {
    color: var(--color-text-primary);
}

.cert-role-pricing-individual {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.cert-role-pricing-individual strong {
    color: var(--color-text-primary);
}

.cert-role-cta {
    padding: 60px 0 120px;
}

.cert-role-cta h2 {
    margin-bottom: 24px;
}

.cert-role-cta-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── RESPONSIVE: TABLET ── */
@media (max-width: 1024px) {
    .cert-page {
        --cert-section-gap: 80px;
    }

    .cert-roles-3col {
        grid-template-columns: 1fr;
    }

    .cert-roles-2col {
        grid-template-columns: 1fr;
    }

    .cert-process-track {
        flex-direction: column;
        align-items: center;
    }

    .cert-process-line {
        width: 1px;
        height: 32px;
        margin-top: 0;
    }

    .cert-metrics {
        flex-direction: column;
        align-items: center;
    }

    .cert-metric-card {
        width: 100%;
        max-width: 360px;
    }

    .cert-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

/* ── RESPONSIVE: MOBILE ── */
@media (max-width: 768px) {
    .cert-hero {
        padding: var(--space-lg) 24px var(--space-lg);
    }

    .cert-hero-ctas {
        flex-direction: column;
    }

    .cert-btn {
        width: 100%;
    }

    .cert-disciplines,
    .cert-process,
    .cert-metrics,
    .cert-enrollment,
    .cert-faq,
    .cert-final-cta,
    .cert-comparison,
    .cert-pricing,
    .cert-quote-box {
        padding-left: 24px;
        padding-right: 24px;
    }

    .cert-discipline-card {
        padding: 24px;
    }

    .cert-metric-card {
        padding: 32px;
    }

    .cert-role-page {
        padding: 0 24px;
    }

    .cert-role-hero {
        padding: 120px 0 60px;
    }

    .cert-role-hero-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cert-role-section {
        margin-bottom: 60px;
    }

    .cert-role-cta-actions {
        flex-direction: column;
    }

    .cert-role-cta-actions .cert-btn {
        width: 100%;
    }

    .cert-quote-box blockquote {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .cert-page {
        --cert-section-gap: 60px;
    }

    .cert-hero {
        padding: var(--space-md) 16px var(--space-lg);
    }

    .cert-disciplines,
    .cert-process,
    .cert-metrics,
    .cert-enrollment,
    .cert-faq,
    .cert-final-cta,
    .cert-comparison,
    .cert-pricing,
    .cert-quote-box {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cert-hero h1 {
        font-size: 32px;
    }

    .cert-discipline-name {
        font-size: 22px;
    }

    .cert-role-page {
        padding: 0 16px;
    }

    .cert-role-hero {
        padding: 100px 0 48px;
    }
}

/* ══════════════════════════════════════════════════
   DISCIPLINE PATH PAGE STYLES
   ══════════════════════════════════════════════════ */

.cert-path-subtitle {
    font-family: var(--cert-font-serif);
    font-size: clamp(20px, 3vw, 28px);
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    font-style: italic;
}

.cert-path-description {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.8;
    max-width: 720px;
    margin-bottom: 24px;
    white-space: pre-line;
}

.cert-path-tagline-short {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

/* Path role cards */
.cert-path-roles-grid {
    display: grid;
    gap: 20px;
    max-width: 800px;
}

.cert-path-role-card {
    background: var(--cert-bg-elevated);
    border: 1px solid var(--cert-border-subtle);
    border-radius: 4px;
    padding: 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s;
}

.cert-path-role-card:hover.cert-role-cells { border-color: var(--cert-cells); }
.cert-path-role-card:hover.cert-role-ops   { border-color: var(--cert-ops); }
.cert-path-role-card:hover.cert-role-care  { border-color: var(--cert-care); }

.cert-path-role-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 4px;
}

.cert-path-role-icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

.cert-path-role-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.cert-path-role-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 12px;
}

.cert-path-role-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.cert-path-role-duration,
.cert-path-role-exam {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

.cert-path-progression-text {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.8;
    max-width: 720px;
    white-space: pre-line;
}

/* Discipline name as link */
a.cert-discipline-name {
    text-decoration: none;
    transition: opacity 0.2s;
}

a.cert-discipline-name:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Discipline badge as link */
a.cert-role-discipline-badge {
    text-decoration: none;
    transition: opacity 0.2s;
}

a.cert-role-discipline-badge:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .cert-path-role-card {
        flex-direction: column;
        gap: 12px;
    }

    .cert-path-role-meta {
        flex-direction: column;
        gap: 4px;
    }
}

/* ===== Discipline-themed cert page (generic, parameterized by --cert-accent) ===== */
/* Each discipline's template sets --cert-accent on a wrapper element. */
.cert-theme {
    --cert-accent: var(--cert-accent, #a78bfa); /* fallback */
}

/* Per-discipline defaults if the template doesn't set --cert-accent inline. */
.cert-theme--cells { --cert-accent: #00ebff; }
.cert-theme--ops   { --cert-accent: #fbbf24; }
.cert-theme--care  { --cert-accent: #4ade80; }
.cert-theme--dev   { --cert-accent: var(--cert-accent, #a78bfa); }

.eyebrow--dev { color: var(--cert-accent); }

.cert-role-page--dev { --cert-discipline-color: var(--cert-accent, #a78bfa); }

/* Transparent background + z-index layering for the hero. The base
   .cert-hero rule at the top of this file controls padding + size.
   The !important on padding is defensive: prior iterations of this
   file set padding: 160px 48px var(--cert-section-gap) (200px+ of
   vertical dead-space). This clamps it regardless of cascade order. */
.cert-hero {
    background: transparent;
    padding: var(--space-xl) 48px var(--space-xl) !important;
}

.cert-hero > * {
    position: relative;
    z-index: 1;
}

.cert-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.cert-stat {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.cert-stat strong {
    color: var(--color-text-primary);
    font-weight: 600;
    margin-right: 4px;
}

.cert-level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.cert-level-card {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    display: flex;
    flex-direction: column;
}

.cert-level-card--dev {
    border-color: rgba(167, 139, 250, 0.3);
}

.cert-level-card--dev:hover {
    border-color: var(--cert-accent, #a78bfa);
}

.cert-level-card__icon {
    margin-bottom: var(--space-md);
}

.cert-level-card h3 {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.cert-level-card__level {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cert-accent, #a78bfa);
    margin-bottom: var(--space-xs);
}

.cert-level-card__duration {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
}

.cert-level-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
}

.cert-level-card .btn {
    align-self: flex-start;
}

/* Learning path visualization */
.learning-path {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    max-width: 520px;
    margin: 0 auto;
}

.learning-path__step {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.learning-path__step--dev {
    border-color: rgba(167, 139, 250, 0.4);
}

.learning-path__step--master {
    border-color: var(--color-accent-cyan);
    background: var(--color-accent-cyan-muted);
}

.learning-path__node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--color-bg);
    background: var(--cert-accent, #a78bfa);
    border-radius: 50%;
    flex-shrink: 0;
}

.learning-path__step--master .learning-path__node {
    background: var(--color-accent-cyan);
}

.learning-path__step strong {
    font-size: var(--text-base);
    color: var(--color-text-primary);
    display: block;
}

.learning-path__detail {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.learning-path__arrow {
    color: var(--color-text-tertiary);
    font-size: var(--text-xl);
}

.learning-path__timeline {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Overview grid */
.cert-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
}

.cert-overview__item {
    display: flex;
    flex-direction: column;
}

.cert-overview__label {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
}

.cert-overview__value {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Outcomes list */
.outcomes-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.outcomes-list li {
    position: relative;
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.outcomes-list li::before {
    content: "✓";
    position: absolute;
    left: var(--space-md);
    top: var(--space-md);
    color: var(--cert-accent, #a78bfa);
    font-weight: 700;
}

/* Module timeline */
.module-timeline {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.module-timeline__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.module-timeline__item--exam {
    border-color: var(--color-accent-cyan);
    background: var(--color-accent-cyan-muted);
}

.module-timeline__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--cert-accent, #a78bfa);
    background: var(--color-surface-3);
    border-radius: 50%;
    flex-shrink: 0;
}

.module-timeline__item--exam .module-timeline__number {
    color: var(--color-bg);
    background: var(--color-accent-cyan);
}

.module-timeline__body {
    display: flex;
    justify-content: space-between;
    flex: 1;
    gap: var(--space-md);
}

.module-timeline__body strong {
    color: var(--color-text-primary);
    font-weight: 500;
}

.module-timeline__body span {
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
}

.exam-details {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.exam-details li {
    padding: var(--space-md);
    background: var(--color-surface-1);
    border-left: 3px solid var(--cert-accent, #a78bfa);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.exam-details strong {
    color: var(--color-text-primary);
    margin-right: var(--space-sm);
}

.section__sub {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

.section__prose {
    color: var(--color-text-secondary);
    line-height: 1.8;
}