/* VettiGuard Phase 97 — deterministic /developers bundle. Consolidates Phases 94-96. */

/* VettiGuard Phase 94 — developer identity/document quickstarts */
.vg94-developer-hub{--vg94-border:rgba(148,163,184,.20);--vg94-panel:rgba(15,23,42,.55);--vg94-panel-strong:rgba(15,23,42,.76);--vg94-accent:#6ea8ff;--vg94-success:#34d399;--vg94-warn:#fbbf24;--vg94-danger:#fb7185;--vg94-muted:#9fb0c9}
.vg94-developer-hub .public-section{scroll-margin-top:110px}
.vg94-hero{align-items:stretch}
.vg94-hero-mark{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.7rem;min-width:0}
.vg94-hero-mark strong{font-size:1.05rem;line-height:1.25;color:inherit}
.vg94-hero-badges{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.25rem}
.vg94-hero-badges span{font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:.34rem .55rem;border:1px solid var(--vg94-border);border-radius:999px;background:rgba(255,255,255,.04)}

.vg94-integration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vg94-integration-card{display:flex;flex-direction:column;gap:.48rem;min-width:0;padding:1rem;border:1px solid var(--vg94-border);border-radius:16px;background:var(--vg94-panel);text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.vg94-integration-card:hover,.vg94-integration-card:focus-visible{transform:translateY(-2px);border-color:rgba(110,168,255,.55);background:var(--vg94-panel-strong);outline:none}
.vg94-integration-card.featured{background:linear-gradient(145deg,rgba(44,86,173,.28),rgba(71,50,153,.22));border-color:rgba(110,168,255,.45)}
.vg94-integration-card strong{font-size:1rem}
.vg94-integration-card p{margin:0;color:var(--vg94-muted);font-size:.9rem;line-height:1.5}
.vg94-integration-card code{display:block;overflow-wrap:anywhere;font-size:.78rem;color:#c5d8ff}
.vg94-card-kicker{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8fb7ff}

.vg94-auth-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:18px;align-items:center;border:1px solid var(--vg94-border);border-radius:18px;background:linear-gradient(145deg,rgba(11,30,58,.72),rgba(30,25,68,.55));padding:clamp(1rem,2vw,1.4rem)}
.vg94-auth-panel h2{margin:.35rem 0 .55rem}
.vg94-auth-panel p{margin:0;color:var(--vg94-muted)}
.vg94-scope-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.vg94-scope-grid>div{min-width:0;padding:.72rem;border:1px solid var(--vg94-border);border-radius:12px;background:rgba(8,15,31,.45)}
.vg94-scope-grid strong{display:block;font-size:.76rem;margin-bottom:.35rem;color:#dce8ff}
.vg94-scope-grid code{font-size:.72rem;overflow-wrap:anywhere;white-space:normal}

.vg94-product-section{position:relative}
.vg94-doc-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:14px;margin:1.1rem 0}
.vg94-capability-builder,.vg94-boundary-card,.vg94-result-card{min-width:0;border:1px solid var(--vg94-border);border-radius:16px;background:var(--vg94-panel);padding:1rem}
.vg94-capability-builder h3{margin:.35rem 0 .45rem}
.vg94-capability-builder p{color:var(--vg94-muted)}
.vg94-capability-builder label{display:grid;gap:.4rem;font-size:.8rem;font-weight:700;margin:.8rem 0}
.vg94-capability-builder select{width:100%;min-height:44px;border:1px solid var(--vg94-border);border-radius:10px;padding:.6rem .75rem;background:rgba(9,18,34,.76);color:inherit;outline:none}
.vg94-capability-builder select:focus{border-color:rgba(110,168,255,.7);box-shadow:0 0 0 3px rgba(110,168,255,.14)}
.vg94-endpoint-preview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center;padding:.68rem .75rem;border-radius:10px;background:rgba(5,12,25,.74);border:1px solid rgba(148,163,184,.14);margin:.55rem 0}
.vg94-endpoint-preview span{font-size:.68rem;font-weight:900;color:#7dd3fc}
.vg94-endpoint-preview code{min-width:0;overflow-wrap:anywhere;white-space:normal;font-size:.76rem}
.vg94-note{font-size:.78rem;margin:.7rem 0 0!important}
.vg94-boundary-card dl{margin:.65rem 0 0;display:grid;gap:.75rem}
.vg94-boundary-card dl>div{padding-bottom:.7rem;border-bottom:1px solid rgba(148,163,184,.13)}
.vg94-boundary-card dl>div:last-child{border-bottom:0;padding-bottom:0}
.vg94-boundary-card dt{font-size:.78rem;font-weight:800;color:#dce8ff;margin-bottom:.25rem}
.vg94-boundary-card dd{margin:0;color:var(--vg94-muted);font-size:.85rem;line-height:1.45;overflow-wrap:anywhere}
.vg94-boundary-card code{white-space:normal;overflow-wrap:anywhere}

.vg94-code-card{min-width:0;border:1px solid var(--vg94-border);border-radius:16px;overflow:hidden;background:rgba(5,11,23,.8);margin:1rem 0}
.vg94-compat-note{margin:.75rem 0 0;padding:.72rem .85rem;border-left:3px solid rgba(110,168,255,.7);background:rgba(59,130,246,.08);border-radius:0 10px 10px 0;color:var(--vg94-muted);font-size:.82rem;line-height:1.5}
.vg94-code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--vg94-border);padding:.55rem .65rem;background:rgba(15,23,42,.82)}
.vg94-code-toolbar [role="tablist"]{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:thin}
.vg94-code-toolbar [role="tab"]{min-height:36px;padding:.45rem .7rem;border:0;border-radius:8px;background:transparent;color:var(--vg94-muted);font:inherit;font-size:.78rem;font-weight:750;white-space:nowrap;cursor:pointer}
.vg94-code-toolbar [role="tab"][aria-selected="true"]{background:rgba(79,118,214,.22);color:#e8f1ff;box-shadow:inset 0 0 0 1px rgba(110,168,255,.3)}
.vg94-code-toolbar [role="tab"]:focus-visible,.vg94-copy-code:focus-visible{outline:2px solid var(--vg94-accent);outline-offset:2px}
.vg94-copy-code{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;min-height:36px;padding:.42rem .65rem;border:1px solid var(--vg94-border);border-radius:8px;background:rgba(255,255,255,.04);color:inherit;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer}
.vg94-code-panel{min-width:0}
.vg94-code-panel[hidden]{display:none!important}
.vg94-code-panel .code{margin:0;border:0;border-radius:0;max-height:460px;overflow:auto;white-space:pre;overscroll-behavior:contain}

.vg94-result-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:1rem}
.vg94-result-card .code{max-height:430px;overflow:auto;margin:.7rem 0;white-space:pre}
.vg94-decision-list{display:grid;gap:8px}
.vg94-decision-list article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;padding:.8rem;border:1px solid var(--vg94-border);border-radius:13px;background:var(--vg94-panel)}
.vg94-decision-list strong{display:block;font-size:.88rem;margin-bottom:.18rem}
.vg94-decision-list p{margin:0;font-size:.8rem;line-height:1.45;color:var(--vg94-muted)}
.vg94-state{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:.3rem .46rem;border-radius:999px;font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent}
.vg94-state.verify{color:#8ff0c6;background:rgba(16,185,129,.11);border-color:rgba(52,211,153,.26)}
.vg94-state.review{color:#fbd38d;background:rgba(245,158,11,.10);border-color:rgba(251,191,36,.25)}
.vg94-state.recapture{color:#9edcff;background:rgba(14,165,233,.11);border-color:rgba(56,189,248,.27)}
.vg94-state.reject{color:#fca5b3;background:rgba(244,63,94,.09);border-color:rgba(251,113,133,.24)}

.vg94-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:1rem 0}
.vg94-flow>div{display:flex;flex-direction:column;gap:.35rem;min-width:0;padding:.75rem;border:1px solid var(--vg94-border);border-radius:12px;background:var(--vg94-panel)}
.vg94-flow span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:rgba(71,105,203,.25);color:#dce8ff;font-size:.72rem;font-weight:850}
.vg94-flow strong{font-size:.78rem}
.vg94-flow code{font-size:.68rem;white-space:normal;overflow-wrap:anywhere;color:#bcd1ff}
.vg94-hosted-grid{align-items:start}
.vg94-hosted-grid h3{margin-top:0}

.vg94-state-grid article{min-width:0}
.vg94-error-table{overflow:auto;border:1px solid var(--vg94-border);border-radius:14px;background:var(--vg94-panel);overscroll-behavior:contain}
.vg94-error-table table{width:100%;min-width:680px;border-collapse:collapse}
.vg94-error-table th,.vg94-error-table td{text-align:left;vertical-align:top;padding:.76rem .85rem;border-bottom:1px solid rgba(148,163,184,.12);font-size:.82rem;line-height:1.45}
.vg94-error-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.045em;color:#b7c9e8;background:rgba(15,23,42,.75)}
.vg94-error-table tbody tr:last-child td{border-bottom:0}
.vg94-api-summary .endpoint-list code{overflow-wrap:anywhere}

.vg94-copy-flash{animation:vg94-copy-flash .55s ease}
@keyframes vg94-copy-flash{0%{box-shadow:0 0 0 0 rgba(52,211,153,.4)}100%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}

@media (max-width:1100px){
  .vg94-integration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vg94-auth-panel,.vg94-doc-layout,.vg94-result-grid{grid-template-columns:1fr}
  .vg94-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vg94-developer-hub .public-section{scroll-margin-top:96px}
}
@media (max-width:680px){
  .vg94-integration-grid,.vg94-scope-grid,.vg94-flow{grid-template-columns:1fr}
  .vg94-integration-card{padding:.9rem}
  .vg94-code-toolbar{align-items:stretch;flex-direction:column}
  .vg94-code-toolbar [role="tablist"]{width:100%}
  .vg94-copy-code{width:100%;justify-content:center}
  .vg94-code-panel .code,.vg94-result-card .code{font-size:.73rem;line-height:1.55}
  .vg94-decision-list article{grid-template-columns:1fr}
  .vg94-state{justify-self:start}
  .vg94-auth-panel{padding:.9rem}
  .vg94-hero-badges{gap:.35rem}
  .vg94-error-table{margin-inline:-2px}
}
@media (max-width:390px){
  .vg94-capability-builder,.vg94-boundary-card,.vg94-result-card{padding:.82rem}
  .vg94-code-toolbar{padding:.5rem}
  .vg94-code-toolbar [role="tab"]{padding-inline:.58rem}
}
@media (prefers-reduced-motion:reduce){.vg94-integration-card{transition:none}.vg94-copy-flash{animation:none}}
@media (forced-colors:active){.vg94-integration-card,.vg94-auth-panel,.vg94-capability-builder,.vg94-boundary-card,.vg94-code-card,.vg94-result-card,.vg94-decision-list article,.vg94-flow>div,.vg94-error-table{border:1px solid CanvasText}.vg94-code-toolbar [role="tab"][aria-selected="true"]{outline:2px solid Highlight}}


/* VettiGuard Phase 95 — server-backed developer navigation + browser-local simulator */

.vg95-dev-menu-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 8px 0;
    padding: 12px 13px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 13px !important;
    background: rgba(7, 18, 35, .44) !important;
    color: inherit !important;
    text-decoration: none !important;
}
.vg95-dev-menu-card:hover,
.vg95-dev-menu-card:focus-visible {
    border-color: rgba(96, 165, 250, .42) !important;
    background: rgba(37, 99, 235, .10) !important;
    outline: none;
}
.vg95-dev-menu-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(37, 99, 235, .18);
    color: #7db0ff;
}
.vg95-dev-menu-icon svg { width: 20px; height: 20px; }
.vg95-dev-menu-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vg95-dev-menu-copy strong { font-size: 13px; line-height: 1.25; color: inherit; }
.vg95-dev-menu-copy small { font-size: 11px; line-height: 1.35; color: rgba(203, 213, 225, .72); }
.vg95-dev-menu-badge {
    align-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid rgba(96, 165, 250, .24);
    border-radius: 999px;
    background: rgba(37, 99, 235, .13);
    color: #bfdbfe;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vg95-simulator-section { scroll-margin-top: 110px; }
.vg95-simulator-shell {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: start;
}
.vg95-sim-controls,
.vg95-sim-output {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, .17);
    border-radius: 20px;
    background: rgba(8, 19, 35, .56);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
}
.vg95-sim-controls { padding: 18px; }
.vg95-sim-output { overflow: hidden; }
.vg95-sim-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(34, 197, 94, .20);
    border-radius: 13px;
    background: rgba(34, 197, 94, .08);
}
.vg95-sim-banner strong { color: #bbf7d0; }
.vg95-sim-banner span { color: rgba(220, 252, 231, .72); font-size: 12px; }
.vg95-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}
.vg95-field-grid label,
.vg95-upload-fieldset label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
}
.vg95-field-grid select,
.vg95-upload input[type="file"] {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 12px;
    background: rgba(9, 20, 36, .76);
    color: inherit;
    padding: 10px 12px;
    font: inherit;
}
.vg95-field-wide { grid-column: 1 / -1; }
.vg95-upload-fieldset {
    margin: 16px 0 0;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 15px;
}
.vg95-upload-fieldset legend { padding: 0 7px; font-size: 12px; font-weight: 800; }
.vg95-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.vg95-upload small { color: rgba(203, 213, 225, .68); font-weight: 500; overflow-wrap: anywhere; }
.vg95-local-only { margin: 10px 0 0; color: rgba(203, 213, 225, .68); font-size: 11px; }
.vg95-sim-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.vg95-sim-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}
.vg95-sim-statusbar > div { display: flex; flex-direction: column; gap: 3px; }
.vg95-sim-statusbar strong { font-size: 20px; }
.vg95-http {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .12);
    font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.vg95-sim-output[data-state="verify"] .vg95-http { background: rgba(34, 197, 94, .13); color: #bbf7d0; }
.vg95-sim-output[data-state="recapture"] .vg95-http { background: rgba(245, 158, 11, .13); color: #fde68a; }
.vg95-sim-output[data-state="review"] .vg95-http { background: rgba(59, 130, 246, .13); color: #bfdbfe; }
.vg95-sim-output[data-state="reject"] .vg95-http { background: rgba(239, 68, 68, .13); color: #fecaca; }
.vg95-sim-output[data-state="unavailable"] .vg95-http { background: rgba(168, 85, 247, .13); color: #e9d5ff; }
.vg95-sim-tabs {
    display: flex;
    gap: 4px;
    padding: 9px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    overflow-x: auto;
}
.vg95-sim-tabs button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    padding: 9px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.vg95-sim-tabs button[aria-selected="true"] { background: rgba(59, 130, 246, .14); color: #bfdbfe; }
.vg95-sim-panel { padding: 0; min-width: 0; }
.vg95-sim-panel .code {
    min-height: 310px;
    max-height: 480px;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: auto;
    white-space: pre;
}
.vg95-timeline { margin: 0; padding: 20px 22px 22px 42px; min-height: 310px; }
.vg95-timeline li { margin: 0 0 12px; padding-left: 5px; }
.vg95-output-actions { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid rgba(148,163,184,.14); }
.vg95-assurance-note { margin: 0; padding: 0 16px 16px; color: rgba(203,213,225,.72); font-size: 11px; line-height: 1.55; }

@media (max-width: 1100px) {
    .vg95-simulator-shell { grid-template-columns: 1fr; }
    .vg95-sim-panel .code, .vg95-timeline { min-height: 250px; }
}
@media (max-width: 680px) {
    .vg95-field-grid, .vg95-upload-grid { grid-template-columns: 1fr; }
    .vg95-field-wide { grid-column: auto; }
    .vg95-sim-banner { align-items: flex-start; flex-direction: column; }
    .vg95-sim-actions .btn { flex: 1 1 100%; justify-content: center; }
    .vg95-sim-statusbar { align-items: flex-start; flex-direction: column; }
    .vg95-output-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .vg95-dev-menu-card { transition: none !important; }
}
@media (forced-colors: active) {
    .vg95-dev-menu-card,
    .vg95-sim-controls,
    .vg95-sim-output,
    .vg95-upload-fieldset { border: 1px solid CanvasText !important; }
    .vg95-sim-tabs button[aria-selected="true"] { outline: 2px solid Highlight; }
}


/* VettiGuard Phase 96 — /developers visual consolidation */

.vg96-developer-hub {
    --vg96-border: color-mix(in srgb, currentColor 14%, transparent);
    --vg96-border-strong: color-mix(in srgb, #5b8cff 44%, transparent);
    --vg96-surface: color-mix(in srgb, Canvas 96%, #315fca 4%);
    --vg96-surface-2: color-mix(in srgb, Canvas 91%, #315fca 9%);
    --vg96-surface-3: color-mix(in srgb, Canvas 84%, #14254b 16%);
    --vg96-muted: color-mix(in srgb, currentColor 69%, transparent);
    --vg96-accent: #5b8cff;
    --vg96-accent-soft: color-mix(in srgb, #5b8cff 15%, transparent);
    --vg96-success: #22c55e;
    width: min(1280px, calc(100% - clamp(28px, 5vw, 76px))) !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
    padding: clamp(24px, 4vw, 52px) 0 clamp(64px, 7vw, 104px) !important;
}

body.vg-phase96-developers .vg92-docs-toc { display: none !important; }
body.vg-phase96-developers.vg-phase92-docs .public-main { padding-left: 0 !important; }

.vg96-developer-hub > section,
.vg96-developer-hub > nav { min-width: 0; }

/* Hero ----------------------------------------------------------------- */
.vg96-developer-hub .vg94-hero {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(290px, .5fr) !important;
    gap: clamp(24px, 4vw, 58px) !important;
    align-items: center !important;
    overflow: hidden;
    padding: clamp(28px, 4.5vw, 58px) !important;
    border: 1px solid var(--vg96-border) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 88% 8%, color-mix(in srgb, #7c5cff 26%, transparent), transparent 36%),
        radial-gradient(circle at 4% 100%, color-mix(in srgb, #2d8cff 18%, transparent), transparent 34%),
        linear-gradient(135deg, var(--vg96-surface-2), var(--vg96-surface));
    box-shadow: 0 28px 90px rgba(2, 6, 23, .13);
}
.vg96-developer-hub .vg94-hero::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -150px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, #7ba6ff 20%, transparent);
    box-shadow: 0 0 0 34px color-mix(in srgb, #7ba6ff 4%, transparent), 0 0 0 72px color-mix(in srgb, #7ba6ff 3%, transparent);
    pointer-events: none;
}
.vg96-developer-hub .vg94-hero > * { position: relative; z-index: 1; min-width: 0; }
.vg96-developer-hub .vg94-hero h1 {
    max-width: 880px;
    margin: .45rem 0 .85rem;
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}
.vg96-developer-hub .vg94-hero p {
    max-width: 780px;
    margin: 0;
    color: var(--vg96-muted);
    font-size: clamp(.96rem, 1.3vw, 1.08rem);
    line-height: 1.75;
}
.vg96-developer-hub .hero-actions { margin-top: 1.45rem; gap: 10px; }
.vg96-developer-hub .hero-actions .btn { min-height: 44px; border-radius: 12px; }
.vg96-developer-hub .vg94-hero-mark {
    min-height: 230px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, #7ca6ff 28%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, Canvas 78%, #173369 22%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 9%, transparent);
}
.vg96-developer-hub .vg94-hero-mark > svg {
    width: 44px;
    height: 44px;
    padding: 9px;
    border-radius: 13px;
    background: var(--vg96-accent-soft);
    color: color-mix(in srgb, #5b8cff 82%, currentColor 18%);
}
.vg96-developer-hub .vg94-hero-badges span {
    background: color-mix(in srgb, Canvas 86%, #3568d4 14%);
    border-color: color-mix(in srgb, #7ca6ff 25%, transparent);
}

/* Local developer navigation ------------------------------------------ */
.vg96-developer-subnav {
    position: sticky;
    top: var(--vg92-docs-top, 88px);
    z-index: 9900;
    margin: 16px 0 clamp(28px, 4vw, 48px);
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--vg96-border);
    border-radius: 15px;
    background: color-mix(in srgb, Canvas 88%, transparent);
    box-shadow: 0 15px 42px rgba(2, 6, 23, .11);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    scrollbar-width: none;
}
.vg96-developer-subnav::-webkit-scrollbar { display: none; }
.vg96-developer-subnav-track { display: flex; align-items: center; gap: 5px; width: max-content; min-width: 100%; }
.vg96-developer-subnav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-size: .79rem;
    font-weight: 760;
    white-space: nowrap;
    opacity: .72;
}
.vg96-developer-subnav a:hover,
.vg96-developer-subnav a:focus-visible,
.vg96-developer-subnav a[aria-current="location"] {
    opacity: 1;
    background: var(--vg96-accent-soft);
    color: color-mix(in srgb, #5b8cff 78%, currentColor 22%);
    outline: none;
}

/* Section rhythm ------------------------------------------------------- */
.vg96-developer-hub .public-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 clamp(28px, 4.5vw, 58px) !important;
}
.vg96-developer-hub .public-section-head {
    max-width: 880px;
    margin-bottom: 20px;
}
.vg96-developer-hub .public-section-head h2,
.vg96-developer-hub .developer-step-copy h2 {
    margin: .35rem 0 .6rem;
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
    line-height: 1.13;
    letter-spacing: -.025em;
}
.vg96-developer-hub .public-section-head p,
.vg96-developer-hub .developer-step-copy p { color: var(--vg96-muted); line-height: 1.72; }
.vg96-developer-hub .section-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--vg96-accent-soft);
    color: color-mix(in srgb, #5b8cff 78%, currentColor 22%);
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Choose integration --------------------------------------------------- */
.vg96-developer-hub .vg94-integration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.vg96-developer-hub .vg94-integration-card {
    min-height: 154px;
    padding: 18px;
    border-color: var(--vg96-border);
    border-radius: 17px;
    background: var(--vg96-surface);
    box-shadow: 0 10px 28px rgba(2, 6, 23, .05);
}
.vg96-developer-hub .vg94-integration-card.featured {
    background: linear-gradient(145deg, color-mix(in srgb, Canvas 84%, #2f68df 16%), color-mix(in srgb, Canvas 89%, #7145d8 11%));
    border-color: var(--vg96-border-strong);
}
.vg96-developer-hub .vg94-integration-card:hover,
.vg96-developer-hub .vg94-integration-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--vg96-border-strong);
    background: var(--vg96-surface-2);
}
.vg96-developer-hub .vg94-integration-card p { color: var(--vg96-muted); }
.vg96-developer-hub .vg94-integration-card code { margin-top: auto; color: color-mix(in srgb, #5b8cff 74%, currentColor 26%); }
.vg96-developer-hub .vg94-card-kicker { color: color-mix(in srgb, #5b8cff 76%, currentColor 24%); }

/* Shared cards --------------------------------------------------------- */
.vg96-developer-hub .vg94-auth-panel,
.vg96-developer-hub .vg94-capability-builder,
.vg96-developer-hub .vg94-boundary-card,
.vg96-developer-hub .vg94-result-card,
.vg96-developer-hub .vg94-decision-list article,
.vg96-developer-hub .vg94-flow > div,
.vg96-developer-hub .vg94-error-table,
.vg96-developer-hub .vg95-sim-controls,
.vg96-developer-hub .vg95-sim-output,
.vg96-developer-hub .trust-card,
.vg96-developer-hub .api-summary-panel {
    border-color: var(--vg96-border) !important;
    background: var(--vg96-surface) !important;
    color: inherit;
    box-shadow: 0 14px 38px rgba(2, 6, 23, .055);
}
.vg96-developer-hub .vg94-auth-panel {
    padding: clamp(20px, 3vw, 32px);
    border-radius: 22px;
    background: linear-gradient(135deg, var(--vg96-surface-2), var(--vg96-surface)) !important;
}
.vg96-developer-hub .vg94-auth-panel p,
.vg96-developer-hub .vg94-capability-builder p,
.vg96-developer-hub .vg94-boundary-card dd,
.vg96-developer-hub .vg94-decision-list p,
.vg96-developer-hub .vg95-local-only,
.vg96-developer-hub .vg95-assurance-note { color: var(--vg96-muted); }
.vg96-developer-hub .vg94-scope-grid > div,
.vg96-developer-hub .vg94-endpoint-preview,
.vg96-developer-hub .vg95-field-grid select,
.vg96-developer-hub .vg95-upload input[type="file"] {
    background: color-mix(in srgb, Canvas 91%, #203d7b 9%) !important;
    border-color: var(--vg96-border) !important;
    color: inherit !important;
}
.vg96-developer-hub .vg94-scope-grid strong,
.vg96-developer-hub .vg94-boundary-card dt { color: inherit; }

/* Human verification steps -------------------------------------------- */
.vg96-developer-hub .developer-step {
    display: grid !important;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    gap: clamp(22px, 4vw, 48px) !important;
    align-items: center !important;
    padding: clamp(22px, 3.4vw, 38px) !important;
    border: 1px solid var(--vg96-border);
    border-radius: 22px;
    background: var(--vg96-surface);
}
.vg96-developer-hub .developer-step.reverse > *:first-child { order: 2; }
.vg96-developer-hub .developer-step.reverse > *:last-child { order: 1; }
.vg96-developer-hub .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border-radius: 10px;
    background: var(--vg96-accent-soft);
    color: color-mix(in srgb, #5b8cff 80%, currentColor 20%);
    font-size: .76rem;
    font-weight: 850;
}

/* Technical/code surfaces --------------------------------------------- */
.vg96-developer-hub .code-wrap,
.vg96-developer-hub .vg94-code-card {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #8fa9d8 18%, transparent) !important;
    border-radius: 16px !important;
    background: #07111f !important;
    box-shadow: 0 18px 40px rgba(2, 6, 23, .12);
}
.vg96-developer-hub .code,
.vg96-developer-hub pre.code,
.vg96-developer-hub .vg94-code-panel .code,
.vg96-developer-hub .vg95-sim-panel .code {
    color: #dbeafe !important;
    background: #07111f !important;
    border-color: transparent !important;
    font-size: .79rem;
    line-height: 1.65;
}
.vg96-developer-hub .vg94-code-toolbar,
.vg96-developer-hub .vg95-sim-tabs,
.vg96-developer-hub .vg95-sim-statusbar,
.vg96-developer-hub .vg95-output-actions {
    background: #0a1729 !important;
    border-color: rgba(148, 163, 184, .14) !important;
    color: #e5efff;
}
.vg96-developer-hub .vg94-code-toolbar [role="tab"],
.vg96-developer-hub .vg95-sim-tabs button { color: #9fb4d2; }
.vg96-developer-hub .vg94-code-toolbar [role="tab"][aria-selected="true"],
.vg96-developer-hub .vg95-sim-tabs button[aria-selected="true"] { color: #eaf2ff; background: rgba(91, 140, 255, .18); }
.vg96-developer-hub .code-copy { z-index: 2; }

/* Product sections ----------------------------------------------------- */
.vg96-developer-hub .vg94-product-section {
    padding: clamp(22px, 3.5vw, 40px) !important;
    border: 1px solid var(--vg96-border);
    border-radius: 24px;
    background: linear-gradient(180deg, var(--vg96-surface), color-mix(in srgb, var(--vg96-surface) 94%, transparent));
    box-shadow: 0 20px 60px rgba(2, 6, 23, .055);
}
.vg96-developer-hub .vg94-doc-layout,
.vg96-developer-hub .vg94-result-grid,
.vg96-developer-hub .vg95-simulator-shell { gap: 16px; }
.vg96-developer-hub .vg94-capability-builder,
.vg96-developer-hub .vg94-boundary-card,
.vg96-developer-hub .vg94-result-card,
.vg96-developer-hub .vg95-sim-controls,
.vg96-developer-hub .vg95-sim-output { border-radius: 18px; }

/* Simulator ------------------------------------------------------------ */
.vg96-developer-hub .vg95-sim-banner {
    border-color: color-mix(in srgb, var(--vg96-success) 30%, transparent);
    background: color-mix(in srgb, var(--vg96-success) 9%, transparent);
}
.vg96-developer-hub .vg95-sim-banner strong { color: color-mix(in srgb, var(--vg96-success) 70%, currentColor 30%); }
.vg96-developer-hub .vg95-sim-banner span { color: var(--vg96-muted); }
.vg96-developer-hub .vg95-upload-fieldset { border-color: var(--vg96-border); }

/* Results / errors / footer CTA --------------------------------------- */
.vg96-developer-hub .vg94-error-table table { min-width: 720px; }
.vg96-developer-hub .vg94-error-table th {
    color: inherit;
    background: var(--vg96-surface-2);
}
.vg96-developer-hub .trust-split { gap: 16px; }
.vg96-developer-hub .trust-card { border-radius: 19px; }
.vg96-developer-hub .api-summary-panel {
    padding: clamp(22px, 3vw, 34px);
    border-radius: 22px;
}

@media (max-width: 1180px) {
    .vg96-developer-hub { width: min(100% - 32px, 1120px) !important; }
    .vg96-developer-hub .vg94-integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .vg96-developer-hub .vg94-hero { grid-template-columns: 1fr !important; }
    .vg96-developer-hub .vg94-hero-mark { min-height: 0; }
    .vg96-developer-hub .vg94-integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vg96-developer-hub .developer-step,
    .vg96-developer-hub .developer-step.reverse { grid-template-columns: 1fr !important; }
    .vg96-developer-hub .developer-step.reverse > *:first-child,
    .vg96-developer-hub .developer-step.reverse > *:last-child { order: initial; }
}

@media (max-width: 680px) {
    .vg96-developer-hub {
        width: calc(100% - 24px) !important;
        padding-top: 18px !important;
    }
    .vg96-developer-hub .vg94-hero,
    .vg96-developer-hub .vg94-product-section,
    .vg96-developer-hub .developer-step { padding: 20px !important; border-radius: 19px !important; }
    .vg96-developer-hub .vg94-hero h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
    .vg96-developer-hub .vg94-integration-grid { grid-template-columns: 1fr; }
    .vg96-developer-hub .vg94-integration-card { min-height: 0; }
    .vg96-developer-subnav { margin-inline: 0; top: 72px; }
    .vg96-developer-hub .vg94-doc-layout,
    .vg96-developer-hub .vg94-result-grid,
    .vg96-developer-hub .vg95-simulator-shell { grid-template-columns: 1fr !important; }
    .vg96-developer-hub .vg95-field-grid,
    .vg96-developer-hub .vg95-upload-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
    .vg96-developer-hub .vg94-integration-card { transition: none !important; }
}

@media (forced-colors: active) {
    .vg96-developer-hub .vg94-hero,
    .vg96-developer-hub .public-section,
    .vg96-developer-subnav,
    .vg96-developer-hub .vg94-integration-card,
    .vg96-developer-hub .vg95-sim-controls,
    .vg96-developer-hub .vg95-sim-output { border: 1px solid CanvasText !important; }
}

/* Phase 97 hardening --------------------------------------------------- */
.vg97-developer-hub {
    isolation: isolate;
}
.vg97-developer-hub .vg96-developer-subnav {
    display: block;
}
.vg97-developer-hub .vg94-integration-card,
.vg97-developer-hub .vg96-developer-subnav a {
    text-decoration: none !important;
}
.vg97-developer-hub .vg94-integration-card strong,
.vg97-developer-hub .vg94-card-kicker,
.vg97-developer-hub .vg94-integration-card p,
.vg97-developer-hub .vg94-integration-card code {
    display: block;
}
.vg97-developer-hub .vg94-integration-card strong {
    line-height: 1.25;
}
.vg97-developer-hub .vg94-integration-card p {
    line-height: 1.55;
}
.vg97-developer-hub :where(pre, code) {
    max-width: 100%;
}
.vg97-developer-hub .vg94-error-table,
.vg97-developer-hub .code-wrap,
.vg97-developer-hub .vg94-code-card,
.vg97-developer-hub .vg95-sim-output {
    min-width: 0;
}
.vg97-developer-hub .vg94-error-table {
    overflow-x: auto;
}
.vg97-developer-hub [id] {
    scroll-margin-top: 150px;
}
@media (max-width: 680px) {
    .vg97-developer-hub [id] { scroll-margin-top: 132px; }
}