/* 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; }
}