:root {
            --bg: #f6f8fb;
            --panel: #ffffff;
            --panel-strong: #ffffff;
            --text: #111827;
            --muted: #64748b;
            --line: #d9e2ea;
            --accent: #0f766e;
            --accent-strong: #0b4f4a;
            --accent-soft: #d7f3ee;
            --blue: #2563eb;
            --salesforce-blue: #0176d3;
            --salesforce-navy: #032d60;
            --danger: #b91c1c;
            --warning: #b45309;
            --radius: 8px;
            --shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
        }
        * { box-sizing: border-box; }
        html { overflow-x: hidden; }
        body {
            margin: 0;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.5;
            overflow-x: hidden;
        }
        img { max-width: 100%; height: auto; }
        a { color: inherit; text-decoration: none; }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }
        .shell { max-width: 1180px; margin: 0 auto; padding: 16px 24px 48px; }
        .nav, .panel { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
        .nav {
            display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--radius); margin: 0 0 24px;
        }
        .brand { display: inline-flex; align-items: center; font-size: 1.08rem; font-weight: 800; }
        .brand img { width: 200px; max-width: min(200px, 58vw); }
        .nav-links { display: flex; gap: 18px; align-items: center; color: var(--muted); }
        .nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
        .nav-burger {
            display: none;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            cursor: pointer;
        }
        .nav-burger span {
            display: block;
            width: 20px;
            height: 2px;
            border-radius: 2px;
            background: var(--salesforce-navy);
        }
        .hero { display: grid; grid-template-columns: 1.3fr .8fr; gap: 24px; margin-bottom: 28px; }
        .panel { border-radius: var(--radius); padding: 28px; }
        h1, h2, h3 { margin-top: 0; line-height: 1.1; }
        h1 { font-size: 3.2rem; margin-bottom: 18px; }
        h2 { font-size: 1.7rem; }
        h3 { font-size: 1.12rem; }
        p { margin-top: 0; }
        .tabs { display: grid; gap: 20px; }
        .tab-input { position: absolute; opacity: 0; pointer-events: none; }
        .tab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-strong); }
        .tab-list { display: inline-flex; gap: 6px; max-width: 100%; overflow-x: auto; }
        .tab-label { flex: 0 0 auto; padding: 10px 14px; border-radius: var(--radius); color: var(--muted); cursor: pointer; font-weight: 700; white-space: nowrap; }
        .export-menu { position: relative; flex: 0 0 auto; }
        .export-menu__button { display: grid; place-items: center; gap: 4px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); cursor: pointer; list-style: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
        .export-menu__button::-webkit-details-marker { display: none; }
        .export-menu__button span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
        .export-menu[open] .export-menu__button,
        .export-menu__button:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 74, 143, .12); }
        .export-menu__button:active { transform: translateY(1px); }
        .export-menu__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; display: grid; gap: 4px; min-width: 250px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(0, 40, 80, .16); animation: menu-pop .16s ease-out; }
        .export-menu__panel a { padding: 10px 12px; border-radius: 6px; color: var(--text); font-weight: 700; text-decoration: none; }
        .export-menu__panel a:hover,
        .export-menu__panel a:focus { background: var(--panel-strong); color: var(--accent); outline: none; }
        @keyframes menu-pop {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .tab-panel { display: none; }
        #tab-compatible:checked ~ .tab-toolbar label[for="tab-compatible"],
        #tab-major:checked ~ .tab-toolbar label[for="tab-major"],
        #tab-inventory:checked ~ .tab-toolbar label[for="tab-inventory"],
        #tab-security:checked ~ .tab-toolbar label[for="tab-security"],
        #tab-lts-upgrade:checked ~ .tab-toolbar label[for="tab-lts-upgrade"] { background: var(--text); color: #fff; }
        #tab-compatible:checked ~ .tab-panels .compatible-panel,
        #tab-major:checked ~ .tab-panels .major-panel,
        #tab-inventory:checked ~ .tab-panels .inventory-panel,
        #tab-security:checked ~ .tab-panels .security-panel,
        #tab-lts-upgrade:checked ~ .tab-panels .lts-upgrade-panel { display: block; }
        .kpi-grid, .cards { display: grid; gap: 18px; }
        .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
        .cards { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
        .muted { color: var(--muted); }
        .badge {
            display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-strong); font-size: .9rem; font-weight: 700; overflow-wrap: anywhere;
        }
        .grade {
            width: 58px; height: 58px; border-radius: var(--radius); display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; color: #fff;
        }
        .grade-a { background: #15803d; }
        .grade-b { background: #4d7c0f; }
        .grade-c { background: #ca8a04; }
        .grade-d { background: #ea580c; }
        .grade-e { background: #c2410c; }
        .grade-f { background: #991b1b; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
        .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .advisory { margin-bottom: 10px; }
        .advisory-meta { display: grid; gap: 6px; margin-top: 4px; }
        .inventory-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
        .inventory-pill { display: inline-flex; gap: 8px; align-items: center; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-strong); color: var(--muted); overflow-wrap: anywhere; }
        .inventory-pill strong { color: var(--text); }
        .support-pill-warning { border-color: rgba(181,71,8,.42); background: #fff6e8; }
        .support-warning {
            display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
            background: var(--warning); color: #fff; font: 700 .82rem Arial, sans-serif; line-height: 1;
        }
        .support-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
        .package-section + .package-section { margin-top: 28px; }
        .package-section h3 { margin-bottom: 8px; }
        .sections { display: grid; gap: 22px; }
        .section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
        .section-heading h2 { margin-bottom: 0; }
        .accordion summary { cursor: pointer; list-style: none; }
        .accordion summary::-webkit-details-marker { display: none; }
        .accordion summary .section-heading { margin-bottom: 0; }
        .accordion summary .section-heading h2::before { content: "+ "; color: var(--accent); }
        .accordion[open] summary .section-heading { margin-bottom: 14px; }
        .accordion[open] summary .section-heading h2::before { content: "− "; }
        .source-note { color: var(--muted); font-size: .92rem; margin-top: 4px; }
        .status-line { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
        .status-line .inventory-pill { background: rgba(255,255,255,.72); }
        .status-line .support-pill-warning { background: #fff6e8; }
        .risk-summary { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8fafc; }
        .risk-summary strong { display: block; margin-bottom: 6px; }
        .risk-summary p { margin-bottom: 0; }
        .risk-summary p + p { margin-top: 12px; }
        .risk-summary .muted strong {
            display: inline;
            color: #334155;
            margin-bottom: 0;
        }
        .project-risk-summary { margin-bottom: 28px; }
        .severity-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }
        .severity-badge {
            display: inline-flex;
            width: fit-content;
            max-width: 100%;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 5px 9px;
            border: 1px solid transparent;
            border-radius: var(--radius);
            font-size: .78rem;
            font-weight: 900;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }
        .severity-badge--critical {
            border-color: #7f1d1d;
            background: #991b1b;
            color: #fff;
        }
        .severity-badge--high {
            border-color: #f97316;
            background: #fff7ed;
            color: #9a3412;
        }
        .severity-badge--medium {
            border-color: #facc15;
            background: #fefce8;
            color: #854d0e;
        }
        .severity-badge--low {
            border-color: #86efac;
            background: #f0fdf4;
            color: #166534;
        }
        .severity-badge--unknown,
        .severity-badge--none {
            border-color: #cbd5e1;
            background: #f8fafc;
            color: #475569;
        }
        .package-kind {
            display: inline-grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            color: var(--salesforce-navy);
        }
        .package-kind svg {
            width: 21px;
            height: 21px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .package-kind--core {
            border-color: #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
        }
        .package-kind--community {
            border-color: #99f6e4;
            background: #f0fdfa;
            color: #0f766e;
        }
        .package-kind--custom {
            border-color: #ddd6fe;
            background: #f5f3ff;
            color: #6d28d9;
        }
        .package-kind--vulnerability {
            border-color: #fecaca;
            background: #fef2f2;
            color: #b91c1c;
        }
        .solution-badge {
            display: inline-flex;
            max-width: 100%;
            align-items: center;
            gap: 9px;
            min-height: 40px;
            padding: 7px 11px;
            border: 1px solid #bfdbfe;
            border-radius: var(--radius);
            background: #eaf5fe;
            color: var(--salesforce-blue);
            font-size: .95rem;
            font-weight: 900;
            line-height: 1.2;
        }
        .solution-badge svg {
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .solution-badge img {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            object-fit: contain;
        }
        .solution-badge--typo3 {
            border-color: #ffb38a;
            background: #fff3ed;
            color: #f26f22;
        }
        .solution-badge--drupal {
            border-color: #93c5fd;
            background: #eff6ff;
            color: #2563eb;
        }
        .solution-badge--symfony {
            border-color: #cbd5e1;
            background: #f8fafc;
            color: #111827;
        }
        .section-heading__title {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .section-heading__title .package-kind {
            width: 32px;
            height: 32px;
            flex: 0 0 32px;
        }
        .section-heading__title .package-kind svg {
            width: 20px;
            height: 20px;
        }
        .grade-card,
        .score-card { display: grid; gap: 8px; align-content: start; }
        .grade-card .grade {
            width: 82px;
            height: 82px;
            font-size: 2rem;
        }
        .score-card--prominent {
            gap: 10px;
        }
        .score-card--prominent h3 {
            margin-bottom: 0;
            font-size: 2.2rem;
        }
        .steps { margin: 0; padding-left: 20px; }
        .steps li + li { margin-top: 6px; }
        .severity-critical { color: var(--danger); }
        .severity-high { color: var(--danger); }
        .severity-medium { color: var(--warning); }
        .severity-unknown { color: var(--warning); }
        .severity-low { color: var(--accent); }
        .button, button {
            display: inline-flex; justify-content: center; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 11px 16px; border: 0; border-radius: var(--radius); background: var(--text); color: #fff; cursor: pointer; font-size: 1rem; font-weight: 700; text-align: center; white-space: normal; overflow-wrap: anywhere;
        }
        .link-button {
            min-height: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--salesforce-blue);
            font-size: .95rem;
            font-weight: 800;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .link-button:hover,
        .link-button:focus-visible {
            color: var(--salesforce-navy);
            outline: none;
        }
        .cve-count-with-help {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }
        .cve-count-with-help strong {
            line-height: 1;
        }
        .package-name-with-help {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            max-width: 100%;
        }
        .column-title-with-help {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .mobile-cell-title {
            display: none;
        }
        .context-help-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            min-height: 0;
            padding: 0;
            flex: 0 0 28px;
            border: 1px solid #bfdbfe;
            border-radius: 50%;
            background: #eff6ff;
            color: var(--salesforce-blue);
            font-size: .92rem;
            font-weight: 900;
            line-height: 1;
            cursor: pointer;
            transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
        }
        .context-help-button:hover,
        .context-help-button:focus-visible {
            border-color: var(--salesforce-blue);
            background: #dbeafe;
            color: var(--salesforce-navy);
            transform: translateY(-1px);
            outline: none;
        }
        .context-help-button--warning {
            border-color: #fbbf24;
            background: #fffbeb;
            color: #b45309;
        }
        .context-help-button--warning:hover,
        .context-help-button--warning:focus-visible {
            border-color: #f59e0b;
            background: #fef3c7;
            color: #92400e;
        }
        .context-help-button svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        label.button {
            margin-bottom: 0;
        }
        .button svg, button svg {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .button.secondary { background: #fff; color: var(--text); border: 1px solid var(--line); }
        .button.accent { background: var(--accent); }
        form { display: grid; gap: 16px; }
        label { font-weight: 600; display: block; margin-bottom: 8px; }
        input[type="text"], input[type="email"], input[type="password"], input[type="file"] {
            width: 100%; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff;
        }
        .flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; background: #fff6e8; color: #8a4b08; }
        .stack { display: grid; gap: 16px; }
        textarea {
            width: 100%;
            min-height: 160px;
            padding: 14px 16px;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background: #fff;
            font: inherit;
        }

        .site-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 18px;
            margin-top: 48px;
            padding: 24px 0 0;
            border-top: 1px solid var(--line);
            color: var(--muted);
        }
        .site-footer__brand {
            display: grid;
            gap: 4px;
        }
        .site-footer__brand strong {
            color: var(--salesforce-navy);
        }
        .site-footer__links {
            display: flex;
            justify-content: flex-end;
            gap: 16px;
            flex-wrap: wrap;
            font-weight: 700;
        }
        .site-footer__links a:hover {
            color: var(--salesforce-blue);
        }

        .landing { display: grid; gap: 42px; min-width: 0; }
        .landing > * { min-width: 0; }
        .landing-hero {
            position: relative;
            width: 100%;
            min-height: 480px;
            overflow: hidden;
            display: grid;
            align-items: center;
            border-radius: var(--radius);
            padding: 64px;
            background: #14213d;
            color: #fff;
        }
        .landing-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(10, 16, 30, .88) 0%, rgba(10, 16, 30, .72) 44%, rgba(10, 16, 30, .18) 100%);
        }
        .landing-hero__content { position: relative; z-index: 2; width: 100%; max-width: 620px; min-width: 0; }
        .landing-hero .muted { color: #d7e3ef; }
        .landing-cta { display: flex; flex-wrap: wrap; gap: 12px; max-width: 100%; margin-top: 24px; }
        .landing-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
        .landing-metric { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.1); border-radius: var(--radius); padding: 10px 12px; }
        .landing-visual {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(135deg, rgba(15, 118, 110, .75), rgba(37, 99, 235, .45)),
                #14213d;
        }
        .visual-window {
            position: absolute;
            right: 42px;
            top: 56px;
            width: min(500px, 48%);
            min-height: 370px;
            border: 1px solid rgba(255,255,255,.28);
            border-radius: var(--radius);
            background: rgba(255,255,255,.94);
            color: var(--text);
            box-shadow: 0 26px 70px rgba(0,0,0,.28);
            padding: 18px;
        }
        .visual-topline { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 16px; }
        .visual-dots { display: flex; gap: 6px; }
        .visual-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
        .visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .visual-tile, .visual-list {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #f8fafc;
            padding: 14px;
        }
        .visual-score { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
        .visual-bar { height: 8px; border-radius: 8px; background: #d9e2ea; overflow: hidden; margin-top: 8px; }
        .visual-bar span { display: block; height: 100%; background: var(--accent); }
        .visual-list { grid-column: 1 / -1; display: grid; gap: 10px; }
        .visual-row { display: grid; grid-template-columns: 92px 1fr 72px; gap: 10px; align-items: center; font-size: .9rem; }
        .visual-tag { display: inline-flex; width: fit-content; border-radius: var(--radius); padding: 4px 8px; background: #e0f2fe; color: #075985; font-weight: 700; }
        .landing-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
        .landing-section__head { max-width: 760px; }
        .landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
        .articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
        .feature-card, .article-card, .provider-cta {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--panel);
            box-shadow: var(--shadow);
        }
        .feature-card, .article-card { padding: 22px; }
        .feature-icon {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border-radius: var(--radius);
            background: #eef6ff;
            color: var(--blue);
            font-weight: 900;
            margin-bottom: 14px;
        }
        .article-card { display: grid; gap: 12px; }
        .article-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .92rem; }
        .article-link {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: fit-content;
            min-height: 34px;
            padding: 7px 10px;
            border: 1px solid var(--salesforce-blue);
            border-radius: var(--radius);
            color: var(--salesforce-blue);
            font-size: .86rem;
            font-weight: 800;
        }
        .article-body { max-width: 820px; white-space: pre-line; }
        .article-source { margin-top: 22px; }
        .provider-cta {
            display: grid;
            grid-template-columns: 1.3fr .7fr;
            gap: 24px;
            align-items: center;
            padding: 30px;
            background: #f9fbfc;
        }
        .provider-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
        .cms-strip { display: flex; flex-wrap: wrap; gap: 10px; }
        .cms-chip { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 8px 10px; font-weight: 800; }

        .landing-page, .article-page { background: #fff; }
        .landing-page .shell, .article-page .shell { max-width: none; padding: 0; }
        .landing-page .nav, .article-page .nav {
            max-width: 1240px;
            margin: 0 auto;
            padding: 18px 24px;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            background: #fff;
        }
        .landing-page .brand, .article-page .brand { color: var(--salesforce-navy); font-size: 1.18rem; }
        .landing-page .nav-links, .article-page .nav-links { color: #223b53; font-weight: 700; }
        .landing-page .nav .button.secondary, .article-page .nav .button.secondary { border-color: var(--salesforce-blue); color: var(--salesforce-blue); }
        .landing-page .site-footer, .article-page .site-footer {
            margin: 0;
            padding: 28px max(24px, calc((100vw - 1200px) / 2 + 24px));
            background: #fff;
        }

        .landing { gap: 0; }
        .landing-hero {
            min-height: 650px;
            border-radius: 0;
            padding: 96px max(24px, calc((100vw - 1200px) / 2 + 24px)) 120px;
            background-image:
                linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 38%, rgba(255,255,255,.54) 62%, rgba(255,255,255,.08) 100%),
                url('/images/landing-security-hero.png');
            background-size: cover;
            background-position: center right;
            color: var(--salesforce-navy);
        }
        .landing-hero::after, .landing-visual { display: none; }
        .landing-hero__content { max-width: 610px; }
        .landing-hero h1 {
            color: var(--salesforce-navy);
            font-size: 4rem;
            letter-spacing: 0;
            margin-bottom: 22px;
        }
        .landing-hero .muted { color: #243f5a; font-size: 1.18rem; }
        .landing-hero .badge {
            background: #eaf5fe;
            color: var(--salesforce-blue);
            margin-bottom: 18px;
        }
        .landing-hero .button.accent, .button.accent { background: var(--salesforce-blue); }
        .landing-hero .button.secondary { border-color: var(--salesforce-blue); color: var(--salesforce-blue); }
        .landing-metrics { color: #17324d; }
        .landing-metric {
            border-color: #cfe4f5;
            background: #fff;
            color: var(--salesforce-navy);
            font-weight: 800;
            box-shadow: 0 8px 20px rgba(1, 118, 211, .08);
        }
        .landing-section {
            padding: 76px 24px;
            background: #fff;
        }
        .landing-section--soft { background: #f4f8fc; }
        .landing-section > * {
            width: 100%;
            max-width: 1200px;
            min-width: 0;
            margin-left: auto;
            margin-right: auto;
        }
        .landing-section__head {
            text-align: center;
            max-width: 860px;
        }
        .landing-section__head h2, .provider-cta h2 { color: var(--salesforce-navy); font-size: 2.55rem; }
        .feature-card, .article-card {
            border-color: #dbe8f3;
            box-shadow: 0 18px 44px rgba(3, 45, 96, .08);
        }
        .feature-card {
            min-height: 230px;
            display: grid;
            align-content: start;
        }
        .feature-icon {
            background: #eaf5fe;
            color: var(--salesforce-blue);
        }
        .article-card {
            overflow: hidden;
            padding: 0;
            align-content: start;
        }
        .article-card__image {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            background: #eaf5fe;
            border-bottom: 1px solid var(--line);
        }
        .article-card__body { display: grid; gap: 12px; padding: 22px; }
        .articles-grid .article-card__body { gap: 10px; padding: 18px; }
        .articles-grid .article-card__image { aspect-ratio: auto; height: 150px; }
        .articles-grid .article-meta { font-size: .88rem; }
        .articles-grid h3 { font-size: 1.08rem; margin-bottom: 0; }
        .articles-grid p {
            display: -webkit-box;
            min-height: 4.2em;
            overflow: hidden;
            font-size: .95rem;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
        .article-card strong { color: var(--salesforce-blue); }
        .provider-cta {
            max-width: none;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            padding: 84px max(24px, calc((100vw - 1200px) / 2 + 24px));
            background: linear-gradient(180deg, #eaf5fe 0%, #f8fbff 100%);
        }
        .provider-cta > * { max-width: 1200px; }
        .cms-chip { color: var(--salesforce-navy); border-color: #cfe4f5; }

        .article-hero {
            position: relative;
            min-height: 430px;
            overflow: hidden;
            display: grid;
            align-items: end;
            padding: 96px max(24px, calc((100vw - 980px) / 2 + 24px)) 76px;
            background: linear-gradient(135deg, #eaf5fe, #f8fbff);
            color: var(--salesforce-navy);
        }
        .article-hero--image { color: #fff; background: #132f4c; }
        .article-hero--image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(3,45,96,.88) 0%, rgba(3,45,96,.72) 42%, rgba(3,45,96,.25) 100%);
        }
        .article-hero__image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .article-hero__content {
            position: relative;
            z-index: 1;
            max-width: 780px;
        }
        .article-hero__content h1 {
            color: inherit;
            font-size: 3.35rem;
        }
        .article-hero__content .muted { color: inherit; opacity: .84; font-size: 1.14rem; }
        .article-content-band { padding: 64px 24px 92px; background: #fff; }
        .article-content {
            max-width: 820px;
            margin: 0 auto;
            font-size: 1.08rem;
        }
        .article-content .article-body { max-width: none; line-height: 1.75; white-space: normal; }
        .article-content .article-body h2,
        .article-content .article-body h3 {
            color: var(--salesforce-navy);
            margin-top: 1.6em;
        }
        .article-content .article-body h1 {
            color: var(--salesforce-navy);
            font-size: 2.2rem;
            margin-top: 1.4em;
        }
        .article-content .article-body h2 { font-size: 1.65rem; }
        .article-content .article-body h3 { font-size: 1.25rem; }
        .article-content .article-body a {
            color: var(--salesforce-blue);
            font-weight: 800;
        }

        .workspace-page {
            background: #f4f8fc;
        }
        .workspace-page .shell {
            max-width: none;
            padding: 0 0 48px;
        }
        .workspace-page .nav {
            border: 0;
            border-bottom: 1px solid #dbe8f3;
            border-radius: 0;
            box-shadow: none;
            margin: 0 0 32px;
            padding: 18px max(24px, calc((100vw - 1200px) / 2 + 24px));
            background: #fff;
            width: 100%;
        }
        .workspace-page .shell > :not(.nav):not(.site-footer):not(.side-panel):not(.side-panel-overlay) {
            width: calc(100% - 48px);
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
        }
        .workspace-page .site-footer {
            margin: 48px 0 0;
            padding: 28px max(24px, calc((100vw - 1200px) / 2 + 24px)) 0;
            background: #f4f8fc;
            width: 100%;
        }
        .workspace-page .nav-links {
            color: #223b53;
            font-weight: 700;
        }
        .workspace-page .panel {
            border-color: #dbe8f3;
            box-shadow: 0 18px 44px rgba(3, 45, 96, .08);
        }
        .workspace-page .hero {
            grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
            align-items: stretch;
        }
        .workspace-page .hero > .panel:first-child {
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
        }
        .workspace-page h1,
        .workspace-page h2 {
            color: var(--salesforce-navy);
        }
        .workspace-page .badge {
            background: #eaf5fe;
            color: var(--salesforce-blue);
        }
        .workspace-page .button {
            background: var(--salesforce-blue);
        }
        .workspace-page .button.secondary {
            background: #fff;
            color: var(--salesforce-blue);
            border-color: var(--salesforce-blue);
        }
        .project-overview {
            position: relative;
            overflow: hidden;
        }
        .project-scan-loader {
            position: absolute;
            inset: 0;
            z-index: 5;
            display: grid;
            place-items: center;
            align-content: center;
            gap: 10px;
            padding: 24px;
            background: rgba(248, 251, 255, .92);
            color: var(--salesforce-navy);
            text-align: center;
        }
        .project-scan-loader[hidden] {
            display: none;
        }
        .project-scan-loader__spinner {
            width: 42px;
            height: 42px;
            border: 4px solid #bfdbfe;
            border-top-color: var(--salesforce-blue);
            border-radius: 50%;
            animation: project-scan-spin .8s linear infinite;
        }
        .project-scan-loader span {
            max-width: 420px;
            color: #526783;
        }
        @keyframes project-scan-spin {
            to { transform: rotate(360deg); }
        }
        .project-lock-update {
            max-width: 620px;
            margin-top: 18px;
            padding-top: 18px;
            border-top: 1px solid #dbe8f3;
        }
        .project-last-scan {
            margin: 0 0 14px;
        }
        .project-last-scan strong {
            color: var(--text);
        }
        .project-lock-toggle {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .project-lock-trigger {
            width: 100%;
            transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
        }
        .project-lock-toggle:checked + .project-lock-trigger {
            border: 1px solid var(--salesforce-blue);
            background: #fff;
            color: var(--salesforce-blue);
            box-shadow: inset 0 0 0 1px rgba(1, 118, 211, .08);
        }
        .project-lock-trigger__open {
            display: none;
        }
        .project-lock-toggle:checked + .project-lock-trigger .project-lock-trigger__closed {
            display: none;
        }
        .project-lock-toggle:checked + .project-lock-trigger .project-lock-trigger__open {
            display: inline;
        }
        .project-lock-panel {
            max-height: 0;
            margin-top: 0;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-8px);
            transition: max-height .28s ease, margin-top .28s ease, opacity .2s ease, transform .28s ease;
            visibility: hidden;
        }
        .project-lock-toggle:checked ~ .project-lock-panel {
            max-height: 620px;
            margin-top: 14px;
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }
        .project-lock-panel__inner {
            padding-top: 1px;
        }
        .project-lock-panel__form {
            width: 100%;
            border: 1px solid #cfe4f5;
            border-radius: var(--radius);
            display: grid;
            gap: 16px;
            padding: 18px;
            background: #f8fbff;
        }
        .project-lock-panel__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            color: var(--salesforce-navy);
        }
        .project-lock-panel__head strong {
            font-size: 1.12rem;
        }
        .project-lock-panel__close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            min-height: 36px;
            padding: 0;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            color: var(--salesforce-navy);
            cursor: pointer;
        }
        .project-lock-panel__close svg {
            width: 18px;
            height: 18px;
        }
        .project-lock-panel__error {
            padding: 10px 12px;
            border: 1px solid #fecaca;
            border-radius: var(--radius);
            background: #fef2f2;
            color: #991b1b;
            font-weight: 700;
        }
        .project-lock-panel input[type="file"] {
            width: 100%;
            min-width: 0;
            padding: 12px;
            border: 1px solid #cfe4f5;
            border-radius: var(--radius);
            background: #f8fbff;
            color: #243f5a;
        }
        .project-lock-panel__actions {
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 10px;
        }
        .side-panel-overlay {
            position: fixed;
            inset: 0;
            z-index: 40;
            background: rgba(15, 23, 42, .22);
            opacity: 0;
            transition: opacity .2s ease;
        }
        .side-panel-overlay[hidden],
        .side-panel[hidden] {
            display: none;
        }
        .side-panel-overlay.is-open {
            opacity: 1;
        }
        .side-panel {
            position: fixed;
            top: 0;
            right: 0;
            z-index: 41;
            width: 360px;
            max-width: calc(100vw - 32px);
            height: 100vh;
            max-height: 100dvh;
            display: grid;
            align-content: start;
            gap: 12px;
            padding: 28px;
            overflow-y: auto;
            overscroll-behavior: contain;
            border-left: 1px solid #dbe8f3;
            background: #fff;
            box-shadow: -20px 0 60px rgba(15, 23, 42, .18);
            color: var(--text);
            transform: translateX(100%);
            transition: transform .24s cubic-bezier(.22, 1, .36, 1);
            -webkit-overflow-scrolling: touch;
        }
        body.side-panel-open {
            overflow: hidden;
        }
        .side-panel.is-open {
            transform: translateX(0);
        }
        .side-panel__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 2px;
        }
        .side-panel__close {
            width: 40px;
            height: 40px;
            min-height: 40px;
            padding: 0;
            border: 1px solid #dbe8f3;
            border-radius: 50%;
            background: #f8fbff;
            color: var(--salesforce-navy);
            font-size: 1.5rem;
            line-height: 1;
        }
        .side-panel__eyebrow {
            margin: 0;
            color: var(--salesforce-blue);
            font-size: 1rem;
            font-weight: 900;
            text-transform: uppercase;
        }
        .side-panel h2 {
            margin: 0 0 8px;
            color: var(--salesforce-navy);
            font-size: clamp(1.75rem, 4.8vw, 2.15rem);
            line-height: 1.12;
        }
        .side-panel__content {
            margin: 0;
            color: #526783;
            font-size: 1rem;
            line-height: 1.6;
        }
        .priority-score-badge {
            border-color: hsl(var(--priority-hue), 72%, 36%);
            background: hsl(var(--priority-hue), 78%, 93%);
            color: hsl(var(--priority-hue), 72%, 23%);
        }
        .side-panel__link {
            width: fit-content;
            margin-top: 8px;
            color: var(--salesforce-blue);
            font-weight: 900;
        }
        .side-panel-advisory-list {
            display: grid;
            gap: 14px;
        }
        .side-panel-advisory {
            display: grid;
            gap: 10px;
            padding: 14px;
            border: 1px solid #dbe8f3;
            border-radius: var(--radius);
            background: #f8fbff;
        }
        .side-panel-advisory h3,
        .side-panel-advisory p {
            margin: 0;
        }
        .side-panel-advisory h3 {
            color: var(--salesforce-navy);
            font-size: 1.05rem;
        }
        .side-panel-advisory a {
            width: fit-content;
            color: var(--salesforce-blue);
            font-weight: 900;
        }
        .advisory--compact {
            display: grid;
            gap: 8px;
        }
        .advisory--compact + .advisory--compact {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #dbe8f3;
        }
        .advisory--compact .advisory-meta {
            align-items: center;
        }
        .project-card {
            display: grid;
            gap: 16px;
            min-height: 100%;
        }
        .dashboard-project-list {
            grid-template-columns: 1fr;
            gap: 12px;
        }
        .dashboard-project-list .project-card {
            grid-template-columns: auto minmax(0, 1fr) auto minmax(180px, 240px);
            align-items: center;
            gap: 18px;
            min-height: 0;
            padding: 16px 18px;
        }
        .dashboard-project-list .project-card__top {
            display: contents;
        }
        .dashboard-project-list .project-card__meta {
            gap: 5px;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .project-card__solution-logo {
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            border: 1px solid #dbe8f3;
            border-radius: var(--radius);
            background: #f8fbff;
        }
        .project-card__solution-logo img {
            width: 40px;
            height: 40px;
            object-fit: contain;
        }
        .project-card__solution-logo span {
            color: var(--muted);
            font-size: 1.2rem;
            font-weight: 900;
        }
        .dashboard-project-list .project-card__meta h2 {
            margin-bottom: 0;
            font-size: 1.18rem;
        }
        .dashboard-project-list .project-card__meta p,
        .dashboard-project-list .project-card__meta span,
        .dashboard-project-list .project-card__meta div {
            margin-bottom: 0;
        }
        .dashboard-project-list .grade {
            width: 48px;
            height: 48px;
            font-size: 1.18rem;
        }
        .dashboard-project-list .project-card__footer {
            justify-content: flex-end;
            align-items: flex-end;
            flex-direction: column;
            gap: 4px;
            padding-top: 0;
            border-top: 0;
            text-align: right;
        }
        .project-card__top {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: flex-start;
        }
        .project-card__meta {
            display: grid;
            gap: 8px;
        }
        .project-card__footer {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            padding-top: 12px;
            border-top: 1px solid #dbe8f3;
        }
        .mini-kpi {
            display: grid;
            align-content: start;
            min-height: 132px;
        }
        .mini-kpi h3 {
            color: var(--salesforce-navy);
            font-size: 2rem;
            margin-bottom: 4px;
        }

        @media (min-width: 900px) {
            .side-panel {
                width: 25vw;
                min-width: 320px;
                max-width: 430px;
            }
        }

        @media (max-width: 1100px) {
            h1 { font-size: 2.7rem; }
            .landing-hero h1 { font-size: 3.25rem; }
            .dashboard-project-list .project-card {
                grid-template-columns: auto minmax(0, 1fr) auto;
            }
            .dashboard-project-list .project-card__footer {
                grid-column: 1 / -1;
                align-items: flex-start;
                text-align: left;
                padding-top: 10px;
                border-top: 1px solid #dbe8f3;
            }
        }

        @media (max-width: 900px) {
            .hero { grid-template-columns: 1fr; }
            .nav {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 12px;
                border-radius: var(--radius);
            }
            .nav-burger { display: inline-flex; }
            .nav-toggle:checked + .brand + .nav-burger span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
            }
            .nav-toggle:checked + .brand + .nav-burger span:nth-child(2) {
                opacity: 0;
            }
            .nav-toggle:checked + .brand + .nav-burger span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
            }
            .nav-burger span { transition: transform .16s ease, opacity .16s ease; }
            .nav-links {
                grid-column: 1 / -1;
                display: none;
                width: 100%;
                min-width: 0;
                grid-template-columns: 1fr;
                gap: 8px;
                padding-top: 12px;
                border-top: 1px solid var(--line);
            }
            .nav-toggle:checked ~ .nav-links { display: grid; }
            .nav-links .button,
            .nav-links a {
                width: 100%;
            }
            .nav-links a:not(.button),
            .nav-links span {
                min-height: 38px;
                display: inline-flex;
                align-items: center;
                overflow-wrap: anywhere;
            }
            .landing-page .nav, .article-page .nav {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 12px;
            }
            .landing-hero {
                min-height: 540px;
                padding: 64px 24px 84px;
                background-image:
                    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 54%, rgba(255,255,255,.32) 100%),
                    url('/images/landing-security-hero.png');
                background-position: center bottom;
            }
            .landing-hero h1 { font-size: 2.75rem; }
            .visual-window { position: relative; inset: auto; width: 100%; margin-top: 32px; z-index: 2; }
            .visual-row { grid-template-columns: 1fr; }
            .provider-cta { grid-template-columns: 1fr; }
            .provider-actions { justify-content: flex-start; }
            .shell { padding: 12px 16px 36px; }
            .landing-page .shell, .article-page .shell { padding: 0; }
            .landing-section { padding: 54px 20px; }
            .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .landing-section__head { text-align: left; }
            .landing-section__head h2, .provider-cta h2 { font-size: 2rem; }
            .provider-cta { padding: 58px 20px; }
            .article-hero { min-height: 360px; padding: 70px 24px 54px; }
            .article-hero__content h1 { font-size: 2.45rem; }
            .workspace-page .hero { grid-template-columns: 1fr; }
            .workspace-page .shell > :not(.nav):not(.site-footer):not(.side-panel):not(.side-panel-overlay) { width: calc(100% - 32px); }
            .workspace-page .nav { padding-left: 16px; padding-right: 16px; }
            .workspace-page .site-footer { padding-left: 16px; padding-right: 16px; }
            .project-lock-update .button {
                width: 100%;
            }
            .project-lock-panel__actions {
                display: grid;
                grid-template-columns: 1fr;
            }
            .project-lock-panel__actions .button {
                width: 100%;
            }
            .dashboard-project-list .project-card {
                grid-template-columns: auto minmax(0, 1fr) auto;
            }
            .dashboard-project-list .project-card__footer {
                grid-column: 1 / -1;
                align-items: flex-start;
                text-align: left;
                padding-top: 10px;
                border-top: 1px solid #dbe8f3;
            }
            .site-footer {
                align-items: flex-start;
                flex-direction: column;
            }
            .site-footer__links { justify-content: flex-start; }
            .provider-cta { gap: 18px; }
        }

        @media (max-width: 680px) {
            h1 { font-size: 2rem; }
            h2 { font-size: 1.45rem; }
            .nav-links {
                grid-template-columns: 1fr;
                align-items: stretch;
            }
            .nav-toggle:checked ~ .nav-links { display: grid; }
            .nav-links .button,
            .nav-links a {
                width: 100%;
            }
            .nav-links a:not(.button) {
                min-height: 38px;
                display: inline-flex;
                align-items: center;
            }
            .landing-hero {
                min-height: 500px;
                padding: 44px 16px 62px;
            }
            .landing-hero h1 { font-size: 2.25rem; }
            .landing-hero .muted { font-size: 1rem; }
            .landing-cta { display: grid; grid-template-columns: 1fr; }
            .landing-cta .button { width: 100%; min-width: 0; }
            .landing-metrics { gap: 8px; }
            .landing-metric { padding: 8px 10px; }
            .landing-section { padding: 44px 16px; }
            .landing-section__head h2,
            .provider-cta h2 { font-size: 1.75rem; }
            .articles-grid { grid-template-columns: 1fr; }
            .article-card__body,
            .articles-grid .article-card__body { padding: 16px; }
            .articles-grid .article-card__image { height: 170px; }
            .provider-cta { padding: 44px 16px; }
            .provider-actions {
                display: grid;
                grid-template-columns: 1fr;
                width: 100%;
            }
            .provider-actions .button { width: 100%; }
            .article-hero {
                min-height: 300px;
                padding: 54px 16px 42px;
            }
            .article-hero__content h1 { font-size: 2rem; }
            .article-content-band { padding: 42px 16px 62px; }
            .article-content { font-size: 1rem; }
            .article-content .article-body h1 { font-size: 1.75rem; }
            .article-content .article-body h2 { font-size: 1.4rem; }
            .section-heading {
                align-items: flex-start;
                flex-direction: column;
                gap: 6px;
            }
            .tab-toolbar { width: 100%; }
            .tab-list { flex: 1 1 auto; min-width: 0; }
            .export-menu__panel { right: -5px; min-width: min(260px, calc(100vw - 54px)); }
            .workspace-page .table-wrap {
                overflow-x: visible;
            }
            .workspace-page .table {
                display: block;
                width: 100%;
                min-width: 0;
                font-size: .92rem;
            }
            .workspace-page .table thead {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap;
            }
            .workspace-page .table tbody {
                display: grid;
                gap: 12px;
                width: 100%;
            }
            .workspace-page .table tr {
                display: grid;
                gap: 0;
                width: 100%;
                padding: 12px;
                border: 1px solid var(--line);
                border-radius: var(--radius);
                background: var(--panel-strong);
            }
            .workspace-page .table td {
                display: block;
                width: 100%;
                min-width: 0;
                padding: 10px 0;
                border-bottom: 1px solid var(--line);
                overflow-wrap: anywhere;
            }
            .workspace-page .table td:last-child {
                border-bottom: 0;
                padding-bottom: 0;
            }
            .workspace-page .table td:first-child {
                padding-top: 0;
            }
            .workspace-page .table td[data-label]::before {
                content: attr(data-label);
                display: block;
                margin-bottom: 4px;
                color: var(--muted);
                font-size: .78rem;
                font-weight: 800;
                line-height: 1.25;
                text-transform: uppercase;
            }
            .workspace-page .table td.has-mobile-help::before {
                content: none;
                display: none;
            }
            .mobile-cell-title {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 6px;
                color: var(--muted);
                font-size: .78rem;
                font-weight: 800;
                line-height: 1.25;
                text-transform: uppercase;
            }
            .mobile-cell-title .context-help-button {
                width: 24px;
                height: 24px;
                flex-basis: 24px;
                font-size: .8rem;
            }
            .workspace-page .table td[colspan] {
                display: block;
            }
            .dashboard-project-list .project-card {
                grid-template-columns: auto minmax(0, 1fr);
                padding: 14px;
            }
            .project-card__solution-logo {
                width: 50px;
                height: 50px;
            }
            .project-card__solution-logo img {
                width: 34px;
                height: 34px;
            }
            .dashboard-project-list .grade {
                width: 42px;
                height: 42px;
                font-size: 1.05rem;
            }
            .dashboard-project-list .project-card__footer {
                grid-column: 1 / -1;
                align-items: flex-start;
                text-align: left;
                width: 100%;
            }
        }

        @media (max-width: 560px) {
            .panel, .feature-card, .article-card, .provider-cta { padding: 18px; }
            .article-card { padding: 0; }
            .visual-grid { grid-template-columns: 1fr; }
            .provider-actions .button { width: 100%; }
            .project-card__top, .project-card__footer { flex-direction: column; align-items: flex-start; }
            .dashboard-project-list .project-card__top { display: contents; }
            .kpi-grid { grid-template-columns: 1fr; }
            .status-line,
            .inventory-summary { display: grid; grid-template-columns: 1fr; }
            .inventory-pill { width: 100%; }
        }

        @media (max-width: 420px) {
            .brand img { max-width: 170px; }
            h1 { font-size: 1.8rem; }
            .landing-hero h1,
            .article-hero__content h1 { font-size: 1.85rem; }
            .shell { padding-left: 12px; padding-right: 12px; }
            .workspace-page .shell > :not(.nav):not(.site-footer):not(.side-panel):not(.side-panel-overlay) { width: calc(100% - 24px); }
            .button, button { width: 100%; }
        }

        /* Business priority, exploitability and compliance */
        #tab-compliance:checked ~ .tab-toolbar label[for="tab-compliance"] { background: var(--text); color: #fff; }
        #tab-compliance:checked ~ .tab-panels .compliance-panel { display: block; }
        .export-menu__link { margin: 0; padding: 10px 12px; border-radius: 6px; color: var(--text); font-weight: 700; cursor: pointer; }
        .export-menu__link:hover { background: var(--panel-strong); color: var(--accent); }
        .export-menu__panel a .muted { font-weight: 400; font-size: .85rem; }
        .priority-badge {
            display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 28px; padding: 5px 9px;
            border: 1px solid transparent; border-radius: var(--radius); font-size: .78rem; font-weight: 900; line-height: 1.2; white-space: nowrap;
        }
        .priority-badge--p1 { border-color: #7f1d1d; background: #991b1b; color: #fff; }
        .priority-badge--p2 { border-color: #c2410c; background: #fff7ed; color: #9a3412; }
        .priority-badge--p3 { border-color: #d97706; background: #fffbeb; color: #92400e; }
        .priority-badge--p4 { border-color: #cbd5e1; background: #f8fafc; color: #475569; }
        .kev-badge {
            display: inline-flex; margin-top: 6px; padding: 3px 8px; border-radius: var(--radius); background: #111827; color: #fff;
            font-size: .72rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
        }
        .kpi-card--warning { border-color: #fdba74; background: #fff7ed; }
        .kpi-card--danger { border-color: #fca5a5; background: #fef2f2; }
        .kpi-card--danger h3 { color: var(--danger); }
        .grade-card .muted strong { color: var(--text); }
        .grade-explainer .column-title-with-help strong { margin-bottom: 0; }
        .grade-reasons { margin: 10px 0 0; padding-left: 20px; color: #334155; }
        .grade-reasons li + li { margin-top: 4px; }
        .ease-meter { display: block; width: 92px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
        .ease-meter span { display: block; width: var(--ease); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #facc15, #ea580c 60%, #991b1b); }
        .vulnerability-table td { vertical-align: middle; }
        .button--small { min-height: 34px; padding: 6px 12px; font-size: .88rem; white-space: nowrap; }
        .side-panel { width: 460px; }
        .vulnerability-detail { display: grid; gap: 8px; color: #334155; }
        .vulnerability-detail h3 { margin: 10px 0 0; color: var(--salesforce-navy); font-size: 1rem; }
        .vulnerability-detail p { margin: 0; }
        .vulnerability-detail ul { margin: 0; padding-left: 20px; }
        .vulnerability-detail__badges { display: flex; flex-wrap: wrap; gap: 6px; }
        .vulnerability-detail__badges .kev-badge { margin-top: 0; }
        .vulnerability-detail__lead { padding: 12px 14px; border-left: 3px solid var(--salesforce-blue); background: #f8fbff; color: var(--text); }
        .vulnerability-detail__action { padding: 12px 14px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
        .vulnerability-detail__tech { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .9rem; }
        .vulnerability-detail__tech summary { cursor: pointer; color: var(--salesforce-blue); font-weight: 800; }
        .vulnerability-detail__tech dl { display: grid; gap: 4px; margin: 10px 0; }
        .vulnerability-detail__tech dt { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
        .vulnerability-detail__tech dd { margin: 0 0 6px; overflow-wrap: anywhere; }
        .vulnerability-detail__tech a { color: var(--salesforce-blue); font-weight: 900; }
        .compliance-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
        .compliance-card { display: grid; align-content: start; gap: 10px; }
        .compliance-card h3, .compliance-card p { margin: 0; }
        .compliance-card .badge { justify-self: start; }
        .compliance-card .button { width: fit-content; margin-top: 4px; }
        code.hash { font-size: .82rem; color: #475569; }
        .dashboard-priority-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

        @media (max-width: 680px) {
            .side-panel { width: 100%; max-width: 100vw; }
            .ease-meter { width: 100%; max-width: 160px; }
        }

        /* CMS integration (API token) */
        .tab-list a.tab-label { text-decoration: none; }
        .integration-page { display: grid; gap: 16px; }
        .integration-page h1 { margin: 0; }
        .integration-page .badge { justify-self: start; }
        .integration-back { width: fit-content; color: var(--salesforce-blue); font-weight: 700; text-decoration: none; }
        .integration-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
        .integration-card { display: grid; align-content: start; gap: 12px; }
        .integration-card h2, .integration-card p { margin: 0; }
        .integration-actions { display: flex; flex-wrap: wrap; gap: 10px; }
        .integration-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0 0; }
        .integration-facts dt { color: var(--muted); font-weight: 700; }
        .integration-facts dd { margin: 0; overflow-wrap: anywhere; }
        .integration-steps { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
        .integration-api summary { cursor: pointer; color: var(--salesforce-blue); font-weight: 800; }
        .integration-api pre { overflow-x: auto; padding: 12px 14px; border-radius: var(--radius); background: #0f172a; color: #e2e8f0; }
        .status-badge { display: inline-flex; padding: 3px 9px; border-radius: var(--radius); font-size: .78rem; font-weight: 900; }
        .status-badge--active { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
        .button--danger { color: var(--danger) !important; border-color: var(--danger) !important; }
        .token-reveal { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid #f59e0b; border-radius: var(--radius); background: #fffbeb; }
        .token-reveal p { margin: 0; }
        .token-reveal__field { display: flex; flex-wrap: wrap; gap: 10px; }
        .token-reveal__field input { flex: 1 1 320px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

        /* Text pages (legal notice, privacy policy...): compact header, title and text on the same column */
        .page-header { padding: 40px 24px 30px; border-bottom: 1px solid #dbe8f3; background: linear-gradient(135deg, #eaf5fe, #f8fbff); }
        .page-header__inner, .page-content__inner { width: 100%; max-width: 860px; margin: 0 auto; }
        .page-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .9rem; }
        .page-breadcrumb a { color: var(--salesforce-blue); font-weight: 700; text-decoration: none; }
        .page-breadcrumb a:hover { text-decoration: underline; }
        .page-header h1 { margin: 10px 0 0; color: var(--salesforce-navy); font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.15; overflow-wrap: anywhere; }
        .page-header__meta { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
        .page-content { padding: 36px 24px 64px; background: #fff; }
        .rich-text { color: #1f2937; font-size: 1.02rem; line-height: 1.7; overflow-wrap: anywhere; }
        .rich-text > :first-child { margin-top: 0; }
        .rich-text h2 { margin: 2em 0 .6em; color: var(--salesforce-navy); font-size: 1.35rem; line-height: 1.3; }
        .rich-text h3 { margin: 1.6em 0 .5em; color: var(--salesforce-navy); font-size: 1.12rem; line-height: 1.35; }
        .rich-text div, .rich-text p { margin: 0 0 1em; }
        .rich-text ul, .rich-text ol { margin: 0 0 1em; padding-left: 1.4em; }
        .rich-text li + li { margin-top: .3em; }
        .rich-text a { color: var(--salesforce-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
        .rich-text img { max-width: 100%; height: auto; }
        .rich-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }

        @media (max-width: 680px) {
            .page-header { padding: 26px 16px 20px; }
            .page-content { padding: 24px 16px 44px; }
            .rich-text { font-size: 1rem; }
            .rich-text h2 { margin-top: 1.6em; font-size: 1.2rem; }
        }

        /* Responsive pass: the tab bar must shrink with the screen instead of widening the page */
        .tabs { grid-template-columns: minmax(0, 1fr); }
        .tab-list { flex: 1 1 auto; min-width: 0; }
        .integration-steps code, .integration-facts code { overflow-wrap: anywhere; word-break: break-all; }
        @media (max-width: 680px) {
            .tab-toolbar { align-items: flex-start; }
            .tab-list { flex-wrap: wrap; overflow: visible; }
            .tab-label { padding: 8px 11px; }
        }

        /* Contact page: form above the fold, SEO content below */
        .contact-page { background: #fff; }
        .contact-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 40px; align-items: start; padding: 48px max(24px, calc((100vw - 1200px) / 2 + 24px)) 56px; border-bottom: 1px solid #dbe8f3; background: linear-gradient(135deg, #eaf5fe, #f8fbff); }
        .contact-hero h1 { margin: 12px 0 0; color: var(--salesforce-navy); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; }
        .contact-hero h2, .contact-form-card h2 { margin: 26px 0 10px; color: var(--salesforce-navy); font-size: 1.2rem; }
        .contact-form-card h2 { margin-top: 0; }
        .contact-hero__lead { margin: 14px 0 0; color: #334155; font-size: 1.08rem; line-height: 1.65; }
        .contact-checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: #334155; line-height: 1.55; }
        .contact-checklist li { position: relative; padding-left: 30px; }
        .contact-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--salesforce-blue); color: #fff; font-size: .75rem; font-weight: 900; }
        .contact-form-card { position: sticky; top: 24px; padding: 28px; border: 1px solid #dbe8f3; border-radius: 12px; background: #fff; box-shadow: var(--shadow); scroll-margin-top: 24px; }
        .contact-form-card .button { width: 100%; margin-top: 6px; }
        .contact-section { padding: 56px max(24px, calc((100vw - 1200px) / 2 + 24px)); }
        .contact-section--soft { background: #f8fbff; border-top: 1px solid #dbe8f3; border-bottom: 1px solid #dbe8f3; }
        .contact-section__inner { max-width: 1000px; }
        .contact-section h2 { margin: 0 0 22px; color: var(--salesforce-navy); font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; }
        .contact-section__lead { margin: 0; max-width: 820px; color: #334155; font-size: 1.05rem; line-height: 1.7; }
        .contact-columns { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
        .contact-columns h3 { margin: 0 0 8px; color: var(--salesforce-navy); font-size: 1.08rem; line-height: 1.35; }
        .contact-columns p { margin: 0; color: #475569; line-height: 1.65; }
        .contact-faq { max-width: 860px; border-top: 1px solid #dbe8f3; }
        .contact-faq details { padding: 16px 0; border-bottom: 1px solid #dbe8f3; }
        .contact-faq summary { cursor: pointer; color: var(--salesforce-navy); font-weight: 800; line-height: 1.4; }
        .contact-faq p { margin: 10px 0 0; color: #475569; line-height: 1.65; }

        @media (max-width: 900px) {
            .contact-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 16px 40px; }
            .contact-form-card { position: static; padding: 22px 18px; }
            .contact-section { padding: 40px 16px; }
        }