:root[data-theme="light"] {
    --use-case-bg-start: rgba(0, 0, 0, 0.03); /* Soft subtle tint for light mode */
    --use-case-bg-end: var(--bg-card);
    
    /* Light Mode Specific Accents (keeping your originals) */
    --detail-inputs-accent: #2563eb; --detail-inputs-tint: #eff6ff;
    --detail-context-accent: #4f46e5; --detail-context-tint: #eef2ff;
    --detail-rules-accent: #b45309;   --detail-rules-tint: #fffbeb;
    --detail-process-accent: #0f766e; --detail-process-tint: #ecfeff;
    --detail-output-accent: #7c3aed;  --detail-output-tint: #f5f3ff;
}

:root[data-theme="dark"] {
    --use-case-bg-start: rgba(255, 255, 255, 0.05); /* Soft glow for dark mode */
    --use-case-bg-end: var(--bg-card);

    /* Dark Mode Specific Accents (deeper tints so text remains readable) */
    --detail-inputs-accent: #60a5fa; --detail-inputs-tint: rgba(37, 99, 235, 0.15);
    --detail-context-accent: #818cf8; --detail-context-tint: rgba(79, 70, 229, 0.15);
    --detail-rules-accent: #fbbf24;   --detail-rules-tint: rgba(180, 83, 9, 0.15);
    --detail-process-accent: #2dd4bf; --detail-process-tint: rgba(15, 118, 110, 0.15);
    --detail-output-accent: #a78bfa;  --detail-output-tint: rgba(124, 58, 237, 0.15);
}

.centroai-case-idp-page {
            --primary: var(--primary-blue);
            --accent: var(--primary-blue);
            --accent-dark: var(--primary-blue);
            --action: var(--primary-orange);
            --action-hover: var(--primary-orange);
            --bg-light: var(--bg-secondary);
            --bg-card: var(--card-bg);
            --text-main: var(--text-primary);
            --text-muted: var(--text-secondary);
            --border: var(--card-border, var(--border-color));
            --success: #22c55e;
            --warning: var(--primary-orange);
            --success-soft: rgba(34, 197, 94, 0.14);
            --accent-soft: rgba(0, 159, 227, 0.14);
            --warning-soft: rgba(255, 122, 31, 0.16);
            --badge-bg: var(--surface-soft);
            --badge-text: var(--primary-blue);
            --soft-blue-bg: rgba(0, 159, 227, 0.12);
            --soft-blue-border: rgba(0, 159, 227, 0.28);
            --chip-bg: var(--surface-soft);
            --chip-border: var(--surface-soft-border);
            --roi-surface: var(--surface-elevated);
            --roi-border: var(--surface-elevated-border);
            --roi-panel: var(--surface-soft);
            --roi-input-bg: var(--bg-primary);
            --roi-input-border: var(--border-color);
            --roi-muted: var(--text-secondary);
            --roi-positive: #10B981;
        }
.centroai-case-idp-page {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.5;
            color: var(--text-main);
            margin: 0;
            padding: 0;
            background-color: var(--bg-primary);
        }
.centroai-case-idp-page .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 24px;
        }
.centroai-case-idp-page .section {
            padding: 60px 0;
            border-bottom: 1px solid var(--border);
        }
.centroai-case-idp-page .hero.hero--subpage {
    padding-bottom: 40px;
}

.centroai-case-idp-page .hero.hero--subpage.hero-section {
            border-bottom: 1px solid var(--border);
        }
.centroai-case-idp-page .hero-section .hero-media img {
            object-fit: cover;
        }
.centroai-case-idp-page .centroai-hero-benefits-wrap {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 4px 40px 0;
            box-sizing: border-box;
        }
.centroai-case-idp-page .hero--subpage .centroai-hero-benefits-wrap {
            padding-top: 8px;
        }
.centroai-case-idp-page .centroai-hero-benefits {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 24px;
            width: 100%;
            padding-top: 26px;
            border-top: 1px solid var(--border-color);
        }
.centroai-case-idp-page .centroai-hero-benefit {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--text-muted);
            font-size: 1.05rem;
            line-height: 1.4;
        }
.centroai-case-idp-page .centroai-hero-benefit p {
            margin: 0;
        }
.centroai-case-idp-page .centroai-hero-benefit strong {
            color: var(--text-main);
            font-weight: 700;
        }
.centroai-case-idp-page .centroai-hero-benefit-icon {
            width: 36px;
            height: 36px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.centroai-case-idp-page .centroai-hero-benefit-icon-speed {
            background: var(--success-soft);
            color: var(--success);
        }
.centroai-case-idp-page .centroai-hero-benefit-icon-control {
            background: var(--accent-soft);
            color: var(--accent);
        }
.centroai-case-idp-page .centroai-hero-benefit-icon-roi {
            background: var(--warning-soft);
            color: var(--warning);
        }
        .centroai-case-idp-page .centroai-certifications-section {
            padding: 24px 0;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
        }
        .centroai-case-idp-page .centroai-certifications {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 24px;
            flex-wrap: wrap;
        }
        .centroai-case-idp-page .centroai-certification-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background: var(--soft-blue-bg);
            border: 1px solid var(--soft-blue-border);
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-main);
        }
        .centroai-case-idp-page .centroai-certification-badge svg {
            color: var(--accent);
            flex-shrink: 0;
        }
        .centroai-case-idp-page .centroai-certifications-subtitle {
            text-align: center;
            margin-top: 16px;
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        .centroai-case-idp-page .centroai-governance-subtitle {
            font-size: 1rem;
            margin-bottom: 32px;
        }
        @media (max-width: 768px) {
            .centroai-case-idp-page .centroai-certifications {
                gap: 12px;
            }
            .centroai-case-idp-page .centroai-certification-badge {
                font-size: 0.8rem;
                padding: 8px 14px;
            }
        }
.centroai-case-idp-page .what-it-does-section {
            padding-top: 44px;
        }
.centroai-case-idp-page .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.centroai-case-idp-page .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.centroai-case-idp-page .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 768px) {
            .centroai-case-idp-page .grid-2, .centroai-case-idp-page .grid-3, .centroai-case-idp-page .grid-4 { grid-template-columns: 1fr; }
            .centroai-case-idp-page .centroai-hero-benefits { grid-template-columns: 1fr; gap: 16px; }
            .centroai-case-idp-page .comparison-table { font-size: 0.82rem; }
            .centroai-case-idp-page .comparison-table-head-cell, .centroai-case-idp-page .comparison-table-cell { padding: 10px 8px; }
        }
.centroai-case-idp-page h1,
.centroai-case-idp-page h2,
.centroai-case-idp-page h3,
.centroai-case-idp-page h4 { color: var(--text-main); font-weight: 700; margin-top: 0; }
.centroai-case-idp-page h1 { font-size: 3rem; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 24px; }
.centroai-case-idp-page h2 { font-size: 2rem; margin-bottom: 40px; }
.centroai-case-idp-page h3 { font-size: 1.25rem; margin-bottom: 12px; }
.centroai-case-idp-page .lead { font-size: 1.25rem; color: var(--text-muted); max-width: 700px; margin-bottom: 32px; }
.centroai-case-idp-page .badge { background: var(--badge-bg); color: var(--badge-text); padding: 4px 12px; border-radius: 99px; font-weight: 600; font-size: 0.85rem; display: inline-block; margin-bottom: 16px; }
.centroai-case-idp-page .card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            transition: box-shadow 0.2s;
            display: flex;
            flex-direction: column;
        }
.centroai-case-idp-page .card:hover { box-shadow: var(--card-shadow-hover, 0 10px 30px -10px rgba(0,0,0,0.1)); }
.centroai-case-idp-page .card-icon { margin-bottom: 16px; color: var(--accent); }
.centroai-case-idp-page .old-way-section .card-icon { color: var(--warning); }
.centroai-case-idp-page .text-sm { font-size: 0.95rem; color: var(--text-muted); }
.centroai-case-idp-page .section-muted {
            background: var(--bg-light);
        }
.centroai-case-idp-page .outcomes-title {
            text-align: center;
            margin-bottom: 48px;
        }
.centroai-case-idp-page .outcomes-grid {
            text-align: center;
        }
.centroai-case-idp-page .outcomes-value {
            font-size: 3rem;
            font-weight: 800;
            color: var(--accent);
        }
.centroai-case-idp-page .outcomes-label {
            font-weight: 600;
        }
.centroai-case-idp-page .outcomes-note {
            font-size: 0.9rem;
            color: var(--text-muted);
        }
.centroai-case-idp-page .use-cases-empty {
            display: none;
            text-align: center;
        }
.centroai-case-idp-page .governance-list {
            list-style: none;
            padding: 0;
            font-size: 0.95rem;
            color: var(--text-muted);
        }
.centroai-case-idp-page .governance-list-item {
            margin-bottom: 8px;
        }
.centroai-case-idp-page .section-intro-grid {
            margin-bottom: 24px;
        }
.centroai-case-idp-page .controls-code-sample {
            font-size: 0.75rem;
            color: var(--accent);
            display: block;
            margin-top: 8px;
        }
.centroai-case-idp-page .diagram-warning-text {
            fill: var(--warning);
        }
.centroai-case-idp-page .comparison-table-wrap {
            overflow-x: auto;
        }
.centroai-case-idp-page .comparison-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--bg-card);
            border-radius: 8px;
            overflow: hidden;
        }
.centroai-case-idp-page .comparison-table-head-row {
            background: var(--primary);
            color: #fff;
        }
.centroai-case-idp-page .comparison-table-head-cell {
            padding: 16px;
            text-align: left;
        }
.centroai-case-idp-page .comparison-table-cell {
            padding: 16px;
            border-bottom: 1px solid var(--border);
        }
.centroai-case-idp-page .timeline-step-title {
            margin-bottom: 6px;
        }
.centroai-case-idp-page .roi-input-grid {
            gap: 12px;
        }
.centroai-case-idp-page .cta-container-center {
            text-align: center;
        }
.centroai-case-idp-page .cta-lead {
            margin: 0 auto 32px auto;
        }
.centroai-case-idp-page .cta-actions {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }
.centroai-case-idp-page svg { display: block; }
.centroai-case-idp-page .diagram-container {
            background: var(--bg-light);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 32px;
            display: flex;
            justify-content: center;
            margin-bottom: 24px;
            overflow-x: auto;
        }
.centroai-case-idp-page .architecture-flow-svg {
            display: block;
            width: 100%;
            height: auto;
        }
.centroai-case-idp-page .architecture-flow-svg--desktop {
            max-width: 800px;
        }
.centroai-case-idp-page .architecture-flow-svg--mobile {
            display: none;
            max-width: 360px;
            margin: 0 auto;
        }
.centroai-case-idp-page .control-lifecycle-svg {
            display: block;
            width: 100%;
            height: auto;
        }
.centroai-case-idp-page .control-lifecycle-svg--desktop {
            max-width: 800px;
        }
.centroai-case-idp-page .control-lifecycle-svg--mobile {
            display: none;
            max-width: 360px;
            margin: 0 auto;
        }
.centroai-case-idp-page .diagram-container.diagram-container--integration {
            padding: 0;
            overflow: hidden;
        }
.centroai-case-idp-page .integration-topology-svg {
            display: block;
            width: 100%;
            max-width: none;
            height: auto;
        }
.centroai-case-idp-page .tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.centroai-case-idp-page .ca-tab-btn {
            background: none;
            border: none;
            padding: 12px 24px;
            cursor: pointer;
            font-weight: 600;
            color: var(--text-muted);
            border-bottom: 2px solid transparent;
        }
.centroai-case-idp-page .ca-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.centroai-case-idp-page .tab-content { display: none; }
.centroai-case-idp-page .tab-content.active { display: block; }
.centroai-case-idp-page .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 24px;
            font-weight: 600;
            border-radius: 6px;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s;
        }
.centroai-case-idp-page .btn-primary { background: var(--action); color: #fff; border: 1px solid var(--action); }
.centroai-case-idp-page .btn-primary:hover { background: var(--action-hover); }
.centroai-case-idp-page .btn-secondary { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); }
.centroai-case-idp-page .btn-secondary:hover { background: var(--bg-light); }
.centroai-case-idp-page .roi-section {
            background: var(--primary-blue);
            color: #fff;
            --text-main: #ffffff;
            --text-muted: rgba(255, 255, 255, 0.84);
            --roi-muted: rgba(255, 255, 255, 0.86);
            --roi-panel: rgba(255, 255, 255, 0.12);
            --roi-border: rgba(255, 255, 255, 0.25);
            --roi-surface: rgba(8, 15, 35, 0.46);
            --roi-input-bg: rgba(255, 255, 255, 0.08);
            --roi-input-border: rgba(255, 255, 255, 0.35);
            --roi-positive: #10B981;
        }
.centroai-case-idp-page .roi-title {
            color: #fff;
        }
.centroai-case-idp-page .roi-layout { align-items: flex-start; }
.centroai-case-idp-page .roi-copy .lead {
            color: var(--roi-muted);
            max-width: none;
            margin-bottom: 24px;
        }
.centroai-case-idp-page .roi-callout {
            background: var(--roi-panel);
            border: 1px solid var(--roi-border);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
        }
.centroai-case-idp-page .roi-callout h4 {
            margin: 0 0 8px 0;
            color: var(--text-main);
            font-size: 1rem;
        }
.centroai-case-idp-page .roi-callout p {
            margin: 0;
            font-size: 0.9rem;
            color: var(--roi-muted);
        }
.centroai-case-idp-page .roi-calculator-card {
            background: var(--roi-surface);
            border: 1px solid var(--roi-border);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--surface-elevated-shadow);
        }
.centroai-case-idp-page .roi-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
.centroai-case-idp-page .roi-card-header svg {
            color: var(--roi-muted);
        }
.centroai-case-idp-page .roi-card-header h3 {
            color: var(--text-main);
            margin: 0;
            font-size: 1.35rem;
        }
.centroai-case-idp-page .roi-input label {
            display: block;
            font-size: 0.8rem;
            margin-bottom: 4px;
            color: var(--roi-muted);
        }
.centroai-case-idp-page .roi-input input {
            width: 100%;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--roi-input-border);
            background: var(--roi-input-bg);
            color: var(--text-main);
            margin-bottom: 14px;
            box-sizing: border-box;
        }
.centroai-case-idp-page .roi-input input:focus {
            border-color: var(--accent);
            outline: none;
        }
.centroai-case-idp-page .roi-calculator-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
            gap: 20px;
            align-items: start;
        }
.centroai-case-idp-page .roi-input,
.centroai-case-idp-page .roi-output-panel {
            min-width: 0;
        }
.centroai-case-idp-page .roi-output-panel {
            background: var(--roi-panel);
            border: 1px solid var(--roi-border);
            border-radius: 12px;
            padding: 20px;
        }
.centroai-case-idp-page .roi-main-label {
            font-size: 0.82rem;
            color: var(--roi-muted);
        }
.centroai-case-idp-page .roi-main-value {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--roi-positive);
            margin-top: 4px;
            margin-bottom: 16px;
        }
.centroai-case-idp-page .roi-mini-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
.centroai-case-idp-page .roi-mini-metric {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 4px;
            min-height: 56px;
            text-align: left;
        }
.centroai-case-idp-page .roi-mini-label {
            font-size: 0.75rem;
            color: var(--roi-muted);
            margin-bottom: 4px;
            white-space: nowrap;
        }
.centroai-case-idp-page .roi-mini-value {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--text-main);
        }
.centroai-case-idp-page .roi-note {
            margin-top: 14px;
            font-size: 0.72rem;
            color: var(--roi-muted);
        }
.centroai-case-idp-page .diagram-node { fill: var(--bg-card); stroke: var(--text-main); stroke-width: 1.5; }
.centroai-case-idp-page .diagram-text { font-family: sans-serif; font-size: 12px; fill: var(--text-main); text-anchor: middle; }
.centroai-case-idp-page .diagram-edge { stroke: var(--text-muted); stroke-width: 1.5; fill: none; }
.centroai-case-idp-page .diagram-accent { stroke: var(--accent); fill: var(--soft-blue-bg); }
.centroai-case-idp-page .diagram-accent-text { fill: var(--accent); font-weight: bold; }
.centroai-case-idp-page .use-cases-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 24px;
        }
.centroai-case-idp-page .filter-btn {
            --chip-bg: var(--bg-card);
            --chip-text: var(--text-main);
            --chip-border: var(--border);
            --chip-bg-active: var(--bg-card);
            --chip-text-active: var(--text-main);
            --chip-border-active: var(--accent);
            border: 1px solid var(--chip-border);
            background: var(--chip-bg);
            color: var(--chip-text);
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
.centroai-case-idp-page .filter-btn:hover {
            border-color: var(--chip-border-active);
            background: color-mix(in srgb, var(--chip-border-active) 6%, var(--bg-card) 94%);
        }
.centroai-case-idp-page .filter-btn.active {
            background: color-mix(in srgb, var(--chip-border-active) 10%, var(--chip-bg-active) 90%);
            border-color: var(--chip-border-active);
            color: var(--chip-text-active);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--chip-border-active) 36%, transparent);
        }
.centroai-case-idp-page .filter-btn--default {
            --chip-bg: var(--bg-card);
            --chip-text: var(--text-main);
            --chip-border: var(--border);
            --chip-text-active: var(--text-main);
            --chip-border-active: var(--accent);
        }
.centroai-case-idp-page .filter-btn--banking {
            --chip-border: #bfd4ff;
            --chip-border-active: #1d4ed8;
        }
.centroai-case-idp-page .filter-btn--insurance {
            --chip-border: #ddd6fe;
            --chip-border-active: #7c3aed;
        }
.centroai-case-idp-page .filter-btn--engineering {
            --chip-border: #fdba74;
            --chip-border-active: #c2410c;
        }
.centroai-case-idp-page .filter-btn--energy {
            --chip-border: #fcd34d;
            --chip-border-active: #a16207;
        }
.centroai-case-idp-page .filter-btn--government {
            --chip-border: #c7d2fe;
            --chip-border-active: #4338ca;
        }
.centroai-case-idp-page .filter-btn--healthcare {
            --chip-border: #fecdd3;
            --chip-border-active: #be185d;
        }
.centroai-case-idp-page .filter-btn--finance {
            --chip-border: #86efac;
            --chip-border-active: #047857;
        }
.centroai-case-idp-page .filter-btn--utilities {
            --chip-border: #7dd3fc;
            --chip-border-active: #0e7490;
        }
.centroai-case-idp-page .use-case-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }
.centroai-case-idp-page .industry-tag {
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 0.75rem;
            font-weight: 700;
            border: 1px solid;
            white-space: nowrap;
        }
.centroai-case-idp-page .industry-banking {
            background: #e0ecff;
            color: #1e3a8a;
            border-color: #bfd4ff;
        }
.centroai-case-idp-page .industry-insurance {
            background: #f3e8ff;
            color: #6b21a8;
            border-color: #ddd6fe;
        }
.centroai-case-idp-page .industry-engineering {
            background: #ffedd5;
            color: #9a3412;
            border-color: #fdba74;
        }
.centroai-case-idp-page .industry-energy {
            background: #fef3c7;
            color: #854d0e;
            border-color: #fcd34d;
        }
.centroai-case-idp-page .industry-government {
            background: #eae8ff;
            color: #3730a3;
            border-color: #c7d2fe;
        }
.centroai-case-idp-page .industry-healthcare {
            background: #ffe4ef;
            color: #9d174d;
            border-color: #fecdd3;
        }
.centroai-case-idp-page .industry-finance {
            background: #dcfce7;
            color: #065f46;
            border-color: #86efac;
        }
.centroai-case-idp-page .industry-utilities {
            background: #e0f2fe;
            color: #0c4a6e;
            border-color: #7dd3fc;
        }
.centroai-case-idp-page .use-case-link {
            color: var(--accent);
            font-size: 0.9rem;
            font-weight: 600;
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
            text-decoration: none;
        }
.centroai-case-idp-page .use-case-link:hover {
            color: var(--accent-dark);
        }
.centroai-case-idp-page .use-case-card {
            padding: 24px;
            min-height: 320px;
            display: flex;
            flex-direction: column;
        }
.centroai-case-idp-page .use-case-head .card-icon {
            margin-bottom: 0;
        }
.centroai-case-idp-page .use-case-summary {
            margin-top: 0;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
.centroai-case-idp-page .use-case-footer {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-top: 16px;
        }
.centroai-case-idp-page .use-case-badge {
            margin-bottom: 0;
            font-size: 0.78rem;
            padding: 4px 10px;
        }
body.modal-open {
            overflow: hidden;
        }
.centroai-case-idp-page .use-case-modal {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(15, 23, 42, 0.62);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: 1200;
        }
.centroai-case-idp-page .use-case-modal.open {
            opacity: 1;
            pointer-events: auto;
        }
.centroai-case-idp-page .use-case-modal__panel {
            position: relative;
            width: min(980px, 94vw);
            max-height: min(88vh, 840px);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 18px;
            box-shadow: var(--card-shadow-hover, 0 20px 40px -20px rgba(15, 23, 42, 0.45));
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: translateY(8px) scale(0.99);
            transition: transform 0.2s ease;
        }
.centroai-case-idp-page .use-case-modal.open .use-case-modal__panel {
            transform: translateY(0) scale(1);
        }
.centroai-case-idp-page .use-case-modal__close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 42px;
            height: 42px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-main);
            font-size: 1.25rem;
            line-height: 1;
            cursor: pointer;
            z-index: 3;
        }
.centroai-case-idp-page .use-case-modal__close:hover {
            background: var(--bg-light);
        }
.centroai-case-idp-page .use-case-modal__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 20px 84px 14px 28px;
            background: linear-gradient(180deg, color-mix(in srgb, var(--bg-light) 75%, var(--bg-card) 25%) 0%, var(--bg-card) 100%);
            border-bottom: 1px solid var(--border);
        }
.centroai-case-idp-page .use-case-modal__lead {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
.centroai-case-idp-page .use-case-modal__header .card-icon {
            margin-bottom: 0;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--soft-blue-bg);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            flex-shrink: 0;
        }
.centroai-case-idp-page .use-case-modal__eyebrow {
            font-size: 0.78rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-muted);
        }
.centroai-case-idp-page .use-case-modal__body {
            margin: 0;
            padding: 10px 28px 16px;
            overflow: auto;
            min-height: 0;
        }
.centroai-case-idp-page .use-case-modal__title {
            margin: 0 0 10px;
            font-size: clamp(1.65rem, 2vw, 2.35rem);
            line-height: 1.15;
            letter-spacing: -0.01em;
            max-width: 26ch;
        }
.centroai-case-idp-page .use-case-modal__summary {
            margin: 0 0 16px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
            font-size: 1.03rem;
            line-height: 1.55;
            max-width: 88ch;
        }
.centroai-case-idp-page .use-case-modal__section-title {
            margin: 0 0 10px;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
.centroai-case-idp-page .use-case-modal__details {
            margin: 0;
            padding: 0;
            overflow: visible;
            max-height: none;
        }
.centroai-case-idp-page .use-case-detail-list {
            margin: 0;
            padding-left: 0;
            list-style: none;
            color: var(--text-muted);
            font-size: 0.98rem;
            line-height: 1.5;
            display: grid;
            gap: 10px;
        }
 .centroai-case-idp-page .use-case-detail-item {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    border-left: 4px solid var(--detail-accent);
    /* Updated gradient to use the dynamic tint and the standard card background */
    background: linear-gradient(90deg, var(--detail-tint) 0%, var(--use-case-bg-end) 44%);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    transition: background 0.3s ease;
}

/* 3. Modifier assignments using the variables above */
.centroai-case-idp-page .use-case-detail-item--inputs {
    --detail-accent: var(--detail-inputs-accent);
    --detail-tint: var(--detail-inputs-tint);
}
.centroai-case-idp-page .use-case-detail-item--context {
    --detail-accent: var(--detail-context-accent);
    --detail-tint: var(--detail-context-tint);
}
.centroai-case-idp-page .use-case-detail-item--rules {
    --detail-accent: var(--detail-rules-accent);
    --detail-tint: var(--detail-rules-tint);
}
.centroai-case-idp-page .use-case-detail-item--process {
    --detail-accent: var(--detail-process-accent);
    --detail-tint: var(--detail-process-tint);
}
.centroai-case-idp-page .use-case-detail-item--output {
    --detail-accent: var(--detail-output-accent);
    --detail-tint: var(--detail-output-tint);
}


.centroai-case-idp-page .use-case-detail-label {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            font-weight: 700;
            color: var(--text-main);
            margin: 0;
            min-width: 0;
        }
.centroai-case-idp-page .use-case-detail-text {
            color: var(--text-muted);
        }
.centroai-case-idp-page .use-case-modal__footer {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            border-top: 1px solid var(--border);
            padding: 14px 28px 16px;
            background: var(--bg-card);
        }
.centroai-case-idp-page .use-case-modal__meta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
.centroai-case-idp-page .use-case-modal-delivered {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            font-weight: 700;
            color: #047857;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.35);
            border-radius: 999px;
            padding: 3px 10px;
        }
.centroai-case-idp-page .use-case-modal-delivered.is-hidden {
            display: none;
        }
.centroai-case-idp-page .use-case-story-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--accent);
            text-decoration: none;
            padding: 3px 0;
        }
.centroai-case-idp-page .use-case-story-link:hover {
            color: var(--accent-dark);
        }
.centroai-case-idp-page .use-case-story-link.is-hidden {
            display: none;
        }
.centroai-case-idp-page .use-case-modal__back {
            font-size: 1rem;
            font-weight: 700;
            border-radius: 8px;
            padding: 6px 10px;
        }
.centroai-case-idp-page .use-case-modal__back:hover {
            background: var(--bg-light);
        }
.centroai-case-idp-page .use-case-modal__industry {
            margin-right: 8px;
        }
.centroai-case-idp-page .use-case-actions {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }
.centroai-case-idp-page .show-more-btn {
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-main);
            padding: 10px 18px;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
        }
.centroai-case-idp-page .show-more-btn:hover {
            border-color: var(--chip-border);
            background: var(--bg-light);
        }
.centroai-case-idp-page .what-it-does-intro {
            max-width: 860px;
            margin-bottom: 28px;
        }
.centroai-case-idp-page .what-it-does-diagram {
            background: var(--soft-blue-bg);
            border: 1px solid var(--soft-blue-border);
            border-radius: 12px;
            padding: 10px 12px;
            margin-bottom: 18px;
            overflow-x: auto;
            box-shadow: 0 6px 16px -12px rgba(37, 99, 235, 0.45);
        }
.centroai-case-idp-page .what-it-does-svg {
            display: block;
            width: 100%;
            min-width: 980px;
            height: auto;
        }
.centroai-case-idp-page .what-pipeline-grid {
            display: none;
            margin: 0;
        }
.centroai-case-idp-page .what-pipeline-step {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 11px;
            text-align: center;
        }
.centroai-case-idp-page .what-pipeline-step-accent {
            background: var(--soft-blue-bg);
            border-color: var(--soft-blue-border);
        }
.centroai-case-idp-page .what-pipeline-title {
            margin: 0 0 4px 0;
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-main);
            line-height: 1.25;
        }
.centroai-case-idp-page .what-pipeline-sub {
            margin: 0;
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.3;
        }
.centroai-case-idp-page .what-node {
            fill: var(--bg-card);
            stroke: var(--border);
            stroke-width: 1.5;
        }
.centroai-case-idp-page .what-node-accent {
            fill: var(--soft-blue-bg);
            stroke: var(--soft-blue-border);
            stroke-width: 1.5;
        }
.centroai-case-idp-page .what-link {
            stroke: var(--text-muted);
            stroke-width: 1.8;
            fill: none;
            marker-end: url(#what-arrow);
        }
.centroai-case-idp-page .what-label {
            font-family: sans-serif;
            font-size: 12px;
            font-weight: 700;
            fill: var(--text-main);
            text-anchor: middle;
        }
.centroai-case-idp-page .what-sub {
            font-family: sans-serif;
            font-size: 10px;
            fill: var(--text-muted);
            text-anchor: middle;
        }
.centroai-case-idp-page .what-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: var(--soft-blue-bg);
            color: var(--accent);
            margin-bottom: 0;
            flex-shrink: 0;
        }
.centroai-case-idp-page .what-title-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }
.centroai-case-idp-page .what-title-row h3 {
            margin: 0;
        }
.centroai-case-idp-page .what-diagram-caption {
            margin-top: 10px;
            margin-bottom: 0;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
.centroai-case-idp-page .solution-list {
            margin: 0;
            padding-left: 18px;
            color: var(--text-muted);
            font-size: 0.95rem;
        }
.centroai-case-idp-page .solution-list li {
            margin-bottom: 8px;
        }
.centroai-case-idp-page .what-it-does-cards .card {
            padding: 28px;
        }
.centroai-case-idp-page .what-it-does-cards .solution-list li {
            margin-bottom: 12px;
            line-height: 1.55;
        }
.centroai-case-idp-page .what-it-does-footer {
            margin-top: 16px;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
.centroai-case-idp-page .what-proof-bar {
            margin-top: 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
.centroai-case-idp-page .what-proof-chip {
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 600;
            background: var(--chip-bg);
            border: 1px solid var(--chip-border);
            color: var(--text-main);
        }
.centroai-case-idp-page .timeline-wrapper {
            position: relative;
            margin-top: 24px;
        }
.centroai-case-idp-page .timeline-track {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--border);
            transform: translateY(-50%);
            display: none;
        }
.centroai-case-idp-page .timeline-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            position: relative;
            z-index: 1;
        }
.centroai-case-idp-page .timeline-step {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }
.centroai-case-idp-page .timeline-step-index {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin: 0 auto 12px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 700;
            color: #fff;
            background: var(--text-muted);
        }
.centroai-case-idp-page .timeline-step.active .timeline-step-index {
            background: var(--accent);
        }
.centroai-case-idp-page .timeline-time {
            color: var(--accent);
            font-weight: 700;
            font-size: 0.8rem;
            margin-bottom: 6px;
        }
.centroai-case-idp-page .timeline-desc {
            margin: 0;
            font-size: 0.9rem;
            color: var(--text-muted);
        }
@media (min-width: 769px) {
            .centroai-case-idp-page .timeline-track { display: block; }
        }
@media (max-width: 1024px) {
            .centroai-case-idp-page .roi-calculator-grid {
                grid-template-columns: 1fr;
            }
.centroai-case-idp-page .centroai-hero-benefits {
                grid-template-columns: 1fr;
                gap: 16px;
                padding-top: 20px;
            }
.centroai-case-idp-page .what-it-does-diagram {
                padding: 10px 12px;
                overflow: visible;
            }
.centroai-case-idp-page .what-it-does-svg {
                display: none;
            }
.centroai-case-idp-page .what-pipeline-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 12px;
            }
        }
@media (max-width: 768px) {
            .centroai-case-idp-page .container {
                padding: 0 16px;
            }
.centroai-case-idp-page .diagram-container {
                padding: 16px;
            }
.centroai-case-idp-page .architecture-flow-svg--desktop {
                display: none;
            }
.centroai-case-idp-page .architecture-flow-svg--mobile {
                display: block;
            }
.centroai-case-idp-page .control-lifecycle-svg--desktop {
                display: none;
            }
.centroai-case-idp-page .control-lifecycle-svg--mobile {
                display: block;
            }
.centroai-case-idp-page .filter-btn {
                font-size: 0.8rem;
                padding: 8px 12px;
            }
.centroai-case-idp-page .centroai-hero-benefits-wrap {
                padding: 8px 20px 0;
            }
.centroai-case-idp-page .what-it-does-section {
                padding-top: 36px;
            }
.centroai-case-idp-page .centroai-hero-benefit {
                font-size: 0.98rem;
            }
.centroai-case-idp-page .what-pipeline-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
.centroai-case-idp-page .comparison-table-wrap {
                margin: 0 -8px;
                padding: 0 8px;
                overflow-x: auto;
            }
.centroai-case-idp-page .comparison-table {
                min-width: 420px;
                table-layout: fixed;
            }
.centroai-case-idp-page .comparison-table-head-cell,
.centroai-case-idp-page .comparison-table-cell {
                word-break: normal;
                overflow-wrap: break-word;
                padding: 9px 6px;
            }
.centroai-case-idp-page .comparison-table-head-cell:nth-child(1),
.centroai-case-idp-page .comparison-table-cell:nth-child(1) {
                width: 22%;
            }
.centroai-case-idp-page .comparison-table-head-cell:nth-child(2),
.centroai-case-idp-page .comparison-table-cell:nth-child(2) {
                width: 30%;
            }
.centroai-case-idp-page .comparison-table-head-cell:nth-child(3),
.centroai-case-idp-page .comparison-table-cell:nth-child(3) {
                width: 48%;
            }
.centroai-case-idp-page .timeline-grid { grid-template-columns: 1fr; }
.centroai-case-idp-page .use-case-modal {
                padding: 0;
                align-items: flex-end;
            }
.centroai-case-idp-page .use-case-modal__panel {
                width: 100%;
                max-height: 90vh;
                border-radius: 18px 18px 0 0;
                border-bottom: none;
            }
.centroai-case-idp-page .use-case-modal__close {
                top: 12px;
                right: 12px;
                width: 38px;
                height: 38px;
            }
.centroai-case-idp-page .use-case-modal__header {
                padding: 14px 60px 10px 16px;
            }
.centroai-case-idp-page .use-case-modal__eyebrow {
                font-size: 0.72rem;
            }
.centroai-case-idp-page .use-case-modal__body {
                padding: 10px 16px 12px;
            }
.centroai-case-idp-page .use-case-modal__title {
                font-size: 1.35rem;
                max-width: none;
            }
.centroai-case-idp-page .use-case-modal__footer {
                margin-left: 16px;
                margin-right: 16px;
                padding-top: 12px;
                padding-bottom: 16px;
            }
.centroai-case-idp-page .use-case-detail-item {
                padding: 9px 10px;
                grid-template-columns: 1fr;
                gap: 4px;
            }
.centroai-case-idp-page .use-case-detail-label {
                min-width: 0;
            }
        }
.centroai-case-idp-page .diagram-node { fill: var(--bg-card); stroke: var(--text-main); stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.centroai-case-idp-page .diagram-text { font-family: sans-serif; font-size: 12px; fill: var(--text-main); text-anchor: middle; font-weight: 600; }
.centroai-case-idp-page .diagram-edge { stroke: var(--text-muted); stroke-width: 2; fill: none; }
.centroai-case-idp-page .diagram-accent { stroke: var(--accent); fill: var(--soft-blue-bg); }
.centroai-case-idp-page .diagram-accent-text { fill: var(--accent); }
.centroai-case-idp-page .loop-path { stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 4; fill: none; }