/*
 * ia-shared.css
 * VDP IA Shared Stylesheet — served from AEM DAM at /content/dam/vdp/ia/styles/ia-shared.css
 * Contains fonts (@font-face) and VDP IA theme overrides (dark/light mode).
 * Font paths are absolute (/etc/designs/vdp/assets/css/_fonts/) because DAM CSS
 * is static and cannot use HTL expressions.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'MaterialIcons';
  font-style: normal;
  font-weight: 400;
  src: url("/etc/designs/vdp/assets/css/_fonts/MaterialIcons-Regular.eot");
  src: local("Material Icons"), local("MaterialIcons-Regular"),
       url("/etc/designs/vdp/assets/css/_fonts/MaterialIcons-Regular.woff2") format("woff2"),
       url("/etc/designs/vdp/assets/css/_fonts/MaterialIcons-Regular.woff") format("woff"),
       url("/etc/designs/vdp/assets/css/_fonts/MaterialIcons-Regular.ttf") format("truetype"); }

@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  src: url("/content/dam/vdp/ia/fonts/WorkSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal; }

@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  src: url("/content/dam/vdp/ia/fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic; }

/* ── VDP IA Theme Overrides ─────────────────────────────────────────────────
 * Bridges the gap between nova-styles.css CSS-variable-only theming and the
 * legacy hardcoded #fff backgrounds in vdc-header-footer.css / vdc-templates.css.
 * Load this AFTER nova-styles.css.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── IA Button keyboard focus ring (redesign/ia-button) ──────────────────────
 * Figma "VDP primary/secondary/tertiary text button" specs a dashed ring,
 * offset 3px outward, in the "active-pressed" color, for the keyboard-focus
 * state — on top of Nova's own :focus-visible background/border color swap
 * (which already happens correctly via --v-button-default-focus-background).
 * Nova's .v-button:focus-visible rule only swaps colors; it never adds this
 * ring, so we add it here via .ia-button — a dedicated class ia-button.html
 * adds solely for this stylesheet's own hooks, so it never has any meaning
 * beyond this AEM component and can't collide with anything else. Never
 * selecting the bare .v-button class. */
.ia-button:focus-visible {
    outline: 1px dashed var(--vdp-active-pressed, #65B100);
    outline-offset: 3px;
}

/* ── IA Button — Secondary style overrides (redesign/ia-button) ──────────────
 * Figma "VDP secondary text button" is a neutral ghost button: white/theme-
 * text border+label by default, turning the plain "active" color (not
 * active-hover/active-pressed) on hover, focus, AND pressed alike — all
 * three interaction states look identical, and none of them ever gain a
 * background fill. Nova's own secondary tokens disagree on all four points:
 * default border/text is pre-colored active, hover/focus add a
 * surface-highlight fill, pressed adds a *different* surface-lowlight fill
 * and a darker active-pressed color. Overriding the custom properties Nova's
 * own .v-button-secondary rule consumes — never touching that rule itself. */
.ia-button.v-button-secondary {
    --v-button-secondary-border-color: var(--palette-default-text, #ffffff);
    --v-button-secondary-foreground: var(--palette-default-text, #ffffff);
    --v-button-secondary-hover-background: transparent;
    --v-button-secondary-hover-border-color: var(--palette-default-active, #9AF900);
    --v-button-secondary-hover-foreground: var(--palette-default-active, #9AF900);
    --v-button-secondary-focus-background: transparent;
    --v-button-secondary-focus-border-color: var(--palette-default-active, #9AF900);
    --v-button-secondary-focus-foreground: var(--palette-default-active, #9AF900);
    --v-button-secondary-active-background: transparent;
    --v-button-secondary-active-border-color: var(--palette-default-active, #9AF900);
    --v-button-secondary-active-foreground: var(--palette-default-active, #9AF900);
}

/* Secondary's dashed focus ring uses the plain "active" color (matching its
   own hover/pressed color), not active-pressed like the primary/tertiary
   default above — overrides that generic rule via higher specificity. */
.ia-button.v-button-secondary:focus-visible {
    outline: 1px dashed var(--palette-default-active, #9AF900);
    outline-offset: 3px;
}

/* Dark theme has its own [data-theme=dark] .v-button-secondary rule inside
 * nova-styles.css's `@layer overrides`, which sets --v-button-default-* directly
 * (bypassing the --v-button-secondary-* indirection above entirely) and hardcodes
 * a #1C1C1C fill + green text/border for every state including default. CSS
 * layers always beat unlayered rules regardless of specificity, so the fix above
 * has no effect in dark mode unless placed in a layer of the same name — this
 * block does that, still scoped through .ia-button, never the bare Nova class. */
@layer overrides {
    [data-theme=dark] .ia-button.v-button-secondary {
        --v-button-default-background: transparent;
        --v-button-default-border-color: var(--palette-default-text, #ffffff);
        --v-button-default-foreground: var(--palette-default-text, #ffffff);
    }
    [data-theme=dark] .ia-button.v-button-secondary:hover,
    [data-theme=dark] .ia-button.v-button-secondary:focus-visible,
    [data-theme=dark] .ia-button.v-button-secondary:active {
        --v-button-default-background: transparent;
        --v-button-default-border-color: var(--vdp-active, #9AF900);
        --v-button-default-foreground: var(--vdp-active, #9AF900);
    }

    /* Secondary's trailing arrow: Nova applies one green(dark)/blue(light) PNG
     * background-image uniformly regardless of interaction state (also inside
     * this same layer), which already matches the "active" color kept above for
     * hover/focus/active, but not the default-state white(dark)/black(light)
     * text color set above. No white/black arrow asset exists to swap to, so
     * recolor via CSS mask — using the existing PNG's shape as an alpha mask —
     * letting --palette-default-text supply the theme-correct color. */
    .ia-button.v-button-secondary:not(:hover):not(:focus-visible):not(:active) .nova-button__arrow {
        background-image: none;
        background-color: var(--palette-default-text, #ffffff);
        -webkit-mask-image: var(--nova-btn-tertiary-arrow-md-dark);
        mask-image: var(--nova-btn-tertiary-arrow-md-dark);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }
    .ia-button.v-button-secondary.v-button-large:not(:hover):not(:focus-visible):not(:active) .nova-button__arrow {
        -webkit-mask-image: var(--nova-btn-tertiary-arrow-lg-dark);
        mask-image: var(--nova-btn-tertiary-arrow-lg-dark);
    }
}

/* ── Restricted-product lock icon (homepagesection/docs-category-card/link-item) ──
 * Nova's .v-icon-visa .v-icon-primary/.v-icon-secondary rules are
 * `fill: var(--v-icon-primary)` / `fill: var(--v-icon-secondary)` with NO
 * currentColor fallback, so setting `color` here does nothing — we set the
 * custom properties themselves instead, which Nova's own (untouched) rule
 * then consumes. --palette-default-active-subtle is already theme-aware. */
/* ── Numbered content-card number (redesign/content-card, "numbered" cardType) ──
 * Nova's own .v-typography-display-1 defaults to font-weight 600; Figma spec
 * for this card ("Go from Sandbox to Production" on the homepage) wants
 * light (300) weight and the accent-3 pink color instead. Extra class,
 * .v-typography-display-1 itself is never touched. */
.ia-card-number {
    font-weight: 300;
    color: var(--vdp-accent-3, #FF61E5);
}

.ia-restricted-icon {
    --v-icon-primary: var(--palette-default-active-subtle, rgba(0, 0, 0, 0.5));
    --v-icon-secondary: var(--palette-default-active-subtle, rgba(0, 0, 0, 0.5));
}

/* ── Dark Mode ──────────────────────────────────────────────────────────────── */

html[data-theme=dark],
html[data-theme=dark] body {
    background-color: var(--vdp-surface-1, #000000);
    color: var(--vdp-text, #ffffff);
    color-scheme: dark;
    --vdp-surface-4:  rgba(99, 99, 99, 0.3);
    --vdp-border:     rgba(255, 255, 255, 0.35);
    --vdp-active:        #9AF900;
    --vdp-active-hover:  #79D500;
}

html[data-theme=dark] .container-fluid,
html[data-theme=dark] .container,
html[data-theme=dark] .wrap {
    background-color: var(--vdp-surface-1, #000000);
}

html[data-theme=dark] ::-webkit-scrollbar {
    background-color: var(--vdp-surface-2, #111111);
    width: 8px;
    height: 8px;
}
html[data-theme=dark] ::-webkit-scrollbar-track {
    background-color: var(--vdp-surface-2, #111111);
}
html[data-theme=dark] ::-webkit-scrollbar-thumb {
    background-color: var(--vdp-surface-3, #333333);
    border-radius: 4px;
}
html[data-theme=dark] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--vdp-text-subtle, #cccccc);
}

html[data-theme=dark] ::selection {
    background-color: var(--vdp-active, #9AF900);
    color: #000000;
}

/* ── Light Mode ─────────────────────────────────────────────────────────────── */

html[data-theme=light],
html[data-theme=light] body {
    background-color: var(--vdp-surface-1, #ffffff);
    color: var(--vdp-text, #000000);
    color-scheme: light;
    --vdp-surface-4:  rgba(244, 244, 244, 0.4);
    --vdp-border:     rgba(0, 0, 0, 0.1);
    --vdp-active:        #1434cb;
    --vdp-active-hover:  #0f28a9;
}

html[data-theme=light] .container-fluid,
html[data-theme=light] .container,
html[data-theme=light] .wrap {
    background-color: var(--vdp-surface-1, #ffffff);
}

html[data-theme=light] ::-webkit-scrollbar {
    background-color: var(--vdp-surface-2, #f6f6f6);
}
html[data-theme=light] ::-webkit-scrollbar-thumb {
    background-color: var(--vdp-surface-3, #e0e0e0);
    border-radius: 4px;
}

/* ── Portal-docs: reset legacy nav offset ───────────────────────────────────── */

body .vdc-component-header-background.portal-docs {
    margin-top: 0;
}

/* ── Docs Left Navigation Panel — dark mode ─────────────────────────────────── */

html[data-theme=dark] body .vdc-component-header-background.portal-docs {
    background: var(--Color-Surface-surface-2, #1A1A1A) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme=dark] body .portal-docs .docs-template-layout__left {
    background: var(--vdp-surface-1, #0f0f0f) !important;
    color: var(--vdp-text, #ffffff) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme=dark] body .portal-docs .docs-template-layout__left a {
    color: var(--vdp-text, #ffffff);
}

html[data-theme=dark] body .vdp-docs-left-nav__separator {
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme=dark] body .vdc-global-docs-body__left {
    border-right-color: rgba(255, 255, 255, 0.08);
}

html[data-theme=dark] body .vdc-on-this-page {
    border-left-color: var(--vdp-border) !important;
}

html[data-theme=dark] body .vdc-on-this-page__title {
    color: var(--vdp-text, #ffffff);
}

.vdc-global-docs-on-this-page {
    align-self: stretch;
}

/* ── Docs Left Navigation Panel — light mode ─────────────────────────────────── */

html[data-theme=light] body .vdc-component-header-background.portal-docs {
    background: var(--vdp-surface-2, #f7f7f7) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom-color: #e0e0e0 !important;
    position: relative;
    overflow: hidden;
    padding: 0px !important;
}

html[data-theme=light] body .portal-docs .docs-template-layout__left {
    background: #ffffff !important;
    color: #333333 !important;
    border-right-color: #e0e0e0 !important;
}

html[data-theme=light] body .portal-docs .docs-template-layout__left a {
    color: #333333;
}

html[data-theme=light] body .vdp-docs-left-nav__separator {
    background: #e0e0e0 !important;
}

html[data-theme=light] body .vdc-global-docs-body__left {
    border-right-color: #e0e0e0 !important;
}

html[data-theme=light] body .vdc-on-this-page {
    border-left-color: #e0e0e0 !important;
}

html[data-theme=light] body .vdc-on-this-page__title {
    color: #555555;
}

/* ── Docs Landing Page — dark/light mode ───────────────────────────────────── */

html[data-theme=dark] body .docs-landing-page .vdc-headline--primary {
    color: var(--vdp-text, #ffffff) !important;
}

html[data-theme=dark] body .docs-landing-page .docs-landing-hero__subtitle {
    color: var(--vdp-text-subtle, rgba(255, 255, 255, 0.7)) !important;
}

html[data-theme=dark] body .vdc-docs-landing-body__left {
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

 .vdc-docs-landing-body {
    padding-top: 60px;
    padding-bottom: 128px;
 }

html[data-theme=light] body .vdc-docs-landing-body__left {
    border-right-color: #e0e0e0 !important;
}

html[data-theme=dark] body .docs-landing-page .vdc-component-header-background.portal-docs {
    background: var(--palette-default-surface-3, #1c1c1c) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme=dark] body .docs-landing-page .portal-docs .docs-template-layout__left {
    background: var(--palette-default-surface-2, #141414) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme=dark] body .docs-landing-page .portal-docs .docs-template-layout__left a {
    color: var(--vdp-text, #ffffff) !important;
}

/* ── Docs Landing Page — light mode header white override ──────────────────────
 * Specificity (0,4,2) beats the general portal-docs grey rule (0,3,2) above.
 * Mirrors the dark-mode docs-landing override immediately above.
 * ─────────────────────────────────────────────────────────────────────────── */
html[data-theme=light] body .docs-landing-page__content .vdc-component-header-background.portal-docs {
    background: #ffffff !important;
    border-bottom: none;
}

/* ── Product Docs Page (docs-overview-new-page) — dark mode title overrides ─
 * docs_overview_new.html hardcodes .vdc-headline--primary and
 * .vdc-headline--tagline to dark text (#000000 / #333333) for light mode.
 * The general portal-docs rule above sets the header background to #0f0f0f in
 * dark mode, making those black titles invisible.
 * Pattern mirrors the Docs Landing Page section above.
 * ─────────────────────────────────────────────────────────────────────────── */

html[data-theme=dark] body .docs-overview-new-page .vdc-headline--primary {
    color: var(--vdp-text, #ffffff) !important;
}

html[data-theme=dark] body .docs-overview-new-page .vdc-headline--tagline {
    color: var(--vdp-text-subtle, rgba(255, 255, 255, 0.7)) !important;
}

    .product-docs-body-row {
        display: flex;
        align-items: flex-start;
        padding: 29px;
    }

      .product-docs-layout {
        padding: 64px 20px;
      }
      html[data-theme=dark] .product-docs-layout {
        background: var(--Color-Surface-surface-2, #1A1A1A);
        padding: 0px !important;
      }
      .product-docs-name-and-desc {
            display: flex;
            flex-direction: column;
            gap: 10px;
      }

/* ── Nova spacer utility classes ─────────────────────────────────────────────
 * Matches the Spacing/Padding token table in the nova design system.
 * Applied as margin-bottom on the component wrapper via the Spacer dialog field.
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-spacer--xxsmall { margin-bottom: 8px;  }
.nova-spacer--xsmall  { margin-bottom: 16px; }
.nova-spacer--small   { margin-bottom: 24px; }
.nova-spacer--medium  { margin-bottom: 36px; }
.nova-spacer--large   { margin-bottom: 48px; }
.nova-spacer--xlarge  { margin-bottom: 64px; }

/* ── Nova Code Block (redesign/code component) ───────────────────────────────
 * Previously lived as an inline <style> inside code.html.
 * Angular's DomSanitizer strips <style> tags when injecting component HTML via
 * [innerHTML], so the code block was unstyled on the portal even though it
 * rendered correctly in AEM's full-page render.
 * Moving the rules here (a <link> stylesheet loaded in <head>) makes them
 * available in every rendering context.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Container ───────────────────────────────────────────────────────────── */
.nova-code-block {
    position: relative;
    /*border-radius: var(--x-large, 16px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: var(--palette-default-surface-2, #1a1a1a);*/
    
	border-radius: var(--x-large, 16px);
	border: 1px solid var(--Color-Decorative-border, rgba(255, 255, 255, 0.35));
	background: var(--Color-Surface-surface-2, #1A1A1A);
    
    overflow: visible;
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    line-height: 22px;
}

html[data-theme=light] .nova-code-block {
    background: var(--vdp-surface-1, #ffffff);
    border-color: rgba(0, 0, 0, 0.1);
}

.nova-code-block__inner {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 15px;
    overflow: hidden;
    /* Sibling of .nova-code-block__controls in the .nova-code-block__row flex
       row (gap: 12px). Without flex-grow this only sizes to its content,
       leaving a gap before the scrollbar reaches the block's right edge. */
    flex: 1;
    min-width: 0;
}

/* ── Controls (language pill + copy icon) — floats over the top-right of the
 * code so the code column spans the full card width and its native scrollbar
 * lands flush at the card's true right edge (Figma: overlay, not a column). ── */
.nova-code-block__row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.nova-code-block__controls {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 32px;
    box-sizing: border-box;
    background: var(--Color-Surface-surface-2, #1A1A1A);
    border-radius: var(--full, 9999px);
}

html[data-theme=light] .nova-code-block__controls {
    background: var(--vdp-surface-1, #ffffff);
}

/* ── Language pill button ─────────────────────────────────────────────────── */
.nova-code-block__lang-selector {
    position: relative;
}

.nova-code-block__lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 19px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: var(--color-text-text-subtle, #cccccc);
    font-family: "Visa Sans BETA 20260130", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

html[data-theme=light] .nova-code-block__lang-btn {
    border-color: rgba(0, 0, 0, 0.3);
    color: var(--vdp-text-subtle, #4a4a4a);
}

.nova-code-block__lang-btn:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme=light] .nova-code-block__lang-btn:hover {
    border-color: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.04);
}

.nova-code-block__chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.nova-code-block__lang-btn[aria-expanded=true] .nova-code-block__chevron {
    transform: rotate(180deg);
}

/* ── Language dropdown menu ───────────────────────────────────────────────── */
.nova-code-block__lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 172px;
    background: var(--palette-default-surface-3, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 4px 0;
    list-style: none;
    margin: 0;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

html[data-theme=light] .nova-code-block__lang-menu {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.nova-code-block__lang-menu[hidden] { display: none; }

.nova-code-block__lang-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: sans-serif;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    transition: background 0.1s;
}

html[data-theme=light] .nova-code-block__lang-item {
    color: #333333;
}

.nova-code-block__lang-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme=light] .nova-code-block__lang-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.nova-code-block__lang-item--active {
    color: var(--vdp-active, #9AF900);
    font-weight: 600;
}

html[data-theme=light] .nova-code-block__lang-item--active {
    color: var(--vdp-active, #1434CB);
}

/* ── Copy button ──────────────────────────────────────────────────────────── */
.nova-code-block__copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--vdp-active, #9AF900);
    cursor: pointer;
    border-radius: var(--full, 48px);
    transition: color 0.15s, background 0.15s;
}

html[data-theme=light] .nova-code-block__copy-btn {
    color: var(--vdp-active, #1434CB);
}

.nova-code-block__copy-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme=light] .nova-code-block__copy-btn:hover {
    color: #333333;
    background: rgba(0, 0, 0, 0.06);
}

/* ── "Copied!" confirmation message ──────────────────────────────────────── */
.nova-code-block__copied {
    display: none;
    font-size: 0.75rem;
    font-family: sans-serif;
    color: var(--vdp-active, #9AF900);
    white-space: nowrap;
}

html[data-theme=light] .nova-code-block__copied {
    color: var(--vdp-active, #1434CB);
}

.nova-code-block__copied.nova-code-block__copied--visible {
    display: inline;
}

/* ── Code panels (one per language) ──────────────────────────────────────── */
.nova-code-block__panel { display: none; position: relative; }
.nova-code-block__panel--active { display: block; }

/* ── Pre / code ───────────────────────────────────────────────────────────── */
.nova-code-block__pre {
    position: relative;
    margin: 0;
    padding: 10px 16px 20px 56px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 240px;   /* Figma: card-level max-height */
    tab-size: 2;
    background: transparent !important;
    color: var(--vdp-text, #ffffff);
    -webkit-overflow-scrolling: touch;
    counter-reset: linenumber;
    /* Native scrollbar hidden — replaced by the .nova-code-block__scrollbar
       overlay further down, built by code.html's inline script. This avoids
       the browser/OS auto-hide "overlay scrollbar" fade that made the native
       thumb flicker in and out during scroll. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nova-code-block__pre::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

html[data-theme=light] .nova-code-block__inner {
    background: #F6F6F6 !important;
}

/* ── Expand/Collapse — long code blocks truncate to 240px with a toggle bar ── */
.nova-code-block--truncated .nova-code-block__pre,
.nova-code-block--expanded .nova-code-block__pre {
    padding: 16px 150px 16px 56px;
}

.nova-code-block--truncated .nova-code-block__pre {
    max-height: 240px;   /* Figma: card-level max-height */
}

.nova-code-block--expanded .nova-code-block__pre {
    max-height: none;
}

.nova-code-block__toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 16px 8px 56px;   /* left = aligned with code's line-number gutter (Figma) */
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 15px 15px;   /* match card's own rounded corners */
    background: var(--Color-Surface-surface-2, #1A1A1A);
    color: var(--color-text-text-subtle, #cccccc);
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    cursor: pointer;
}

html[data-theme=light] .nova-code-block__toggle {
    border-top-color: rgba(0, 0, 0, 0.1);
    background: var(--vdp-surface-1, #ffffff);
    color: var(--vdp-text-subtle, #4a4a4a);
}

.nova-code-block--truncated .nova-code-block__toggle,
.nova-code-block--expanded .nova-code-block__toggle {
    display: flex;
}

.nova-code-block__toggle-icon {
    flex-shrink: 0;
}

.nova-code-block__pre code {
    font-family: inherit;
    font-size: inherit;
    background: transparent !important;
    padding: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: inherit;
    text-shadow: none;
}

/* ── Custom scrollbar overlay — Figma: 16px track, inset floating pill ─────
 * Native scrollbar is hidden (see .nova-code-block__pre above). This track +
 * thumb pair is built and positioned by code.html's inline script, which
 * mirrors .nova-code-block__pre's scroll position — no external JS/CSS
 * dependency (previously relied on an untracked legacy Prism vendor bundle).
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-code-block__scrollbar {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 16px;
    box-sizing: border-box;
}

.nova-code-block__scrollbar--visible {
    display: block;
}

.nova-code-block__scrollbar-thumb {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 7px;
    background: var(--Color-Active-active-subtle, rgba(255, 255, 255, 0.50));
    cursor: pointer;
}

.nova-code-block__scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.65);
}

html[data-theme=light] .nova-code-block__scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
}

html[data-theme=light] .nova-code-block__scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.45);
}

/* ── Line numbers — one counter per .nova-code-block__line (built by
   code.html's inline script), not a separate synced column, so a wrapped
   line's number can never drift from its content. ─────────────────────── */
.nova-code-block__line {
    display: block;
    position: relative;
    min-height: 1em;
}

.nova-code-block__line::before {
    content: counter(linenumber);
    counter-increment: linenumber;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -56px;
    width: 40px;
    padding-right: 8px;
    text-align: right;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-accent-accent-1, #bdeaff);
    opacity: 0.7;
    user-select: none;
}

html[data-theme=light] .nova-code-block__line::before {
    color: var(--vdp-active, #1434CB);
    opacity: 1;
    border-right-color: rgba(0, 0, 0, 0.1);
}

/* ── IA Header Section ────────────────────────────────────────────────────────
 * Page-level wrapper. Content centering is delegated to .mw-1000 inside each
 * .nova-hero section.
 * ─────────────────────────────────────────────────────────────────────────── */
.ia-section-header {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.ia-typography-subtitle-1{
    color: var(--vdp-text);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-1, 40px) !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: var(--Typography-line-height-headline-1, 44px) !important;
    letter-spacing: var(--Typography-letter-spacing-medium, 0.5px);
}

@media screen and (min-width: 1024px) {
    .nova-heading-text {
        align-items: flex-start;
        display: flex;
        max-width: 1000px;
        min-width: 1000px;
    }
}

/* Typography — both modes */
.nova-text-style {
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-1, 40px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-headline-1, 44px);
    letter-spacing: var(--Typography-letter-spacing-medium, 0.5px);
    align-self: stretch;
}

/* Dark mode — white */
html[data-theme=dark] .nova-text-style {
    color: var(--Color-Text-text, #FFF);
}

/* Light mode — primary text */
html[data-theme=light] .nova-text-style {
    color: var(--vdp-text, #000000);
}

.ia-typography-subtitle-1 {
    color: var(--vdp-text);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-1, 40px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-headline-1, 44px);
    letter-spacing: var(--Typography-letter-spacing-medium, 0.5px);
}

.v-px-100 {
    padding: 0 100px;
}

.mw-1000 {
    width: 100%;
    max-width: 1000px !important;
    margin: 0 auto;
}

/* ── MCP Banner Card — VDP Redesign (nova-mcp-card) ────────────────────── */
/*    Used by redesign/mcp-banner on non-homepage pages.                    */
/*    Figma: "VDP - Content card (non-clickable)" node I883:109692;13504:98997 */
/*    Same surface token as "Jump in and start building" (--vdp-surface-4). */

/* Outer wrapper — constrains card width and centres it */
.nova-mcp-card {
   /* max-width: 1000px; */
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: 24px !important;
    margin-bottom: 24px;
}

/* Card shell */
.nova-mcp-card__inner {
    background: var(--vdp-surface-4, rgba(244, 244, 244, 0.4));
    border: 1px solid var(--vdp-border, rgba(0, 0, 0, 0.1));
    border-radius: 18px;
    backdrop-filter: blur(7.5px);
    padding: 18px;
    min-height: 130px;
    min-width: 200px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
}

/* Title — Work Sans Medium, 25px / 33px lh / 0px letter-spacing */
/* Figma token: typography/font-size/headline-3 = 25px              */
.nova-mcp-card__title {
    font-family: var(--font-family-font-family-1, 'Work Sans', sans-serif);
    font-weight: 500;
    font-size: 25px;
    line-height: 33px;
    letter-spacing: 0;
    color: var(--vdp-text, #000000);
    margin: 0;
}

/* Description — Work Sans Regular, body-2: 14px / 24px lh / 0.25px */
.nova-mcp-card__subtitle {
    font-family: var(--font-family-font-family-1, 'Work Sans', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.25px;
    color: var(--vdp-text, #000000);
    margin: 0;
}

/* Actions row */
.nova-mcp-card__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

/* Secondary link with arrow — Work Sans Medium, plain text color, no underline */
.nova-mcp-card__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vdp-text, #000000);
    text-decoration: none;
    font-family: var(--font-family-font-family-1, 'Work Sans', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    transition: opacity 0.2s ease-out;
}
.nova-mcp-card__btn-secondary svg {
    transition: transform 0.2s ease-out;
}
/* Hover/focus — underline + trailing arrow nudges right (Figma Smart Animate reaction) */
.nova-mcp-card__btn-secondary:hover,
.nova-mcp-card__btn-secondary:focus-visible {
    text-decoration: none;
}
.nova-mcp-card__btn-secondary:hover svg,
.nova-mcp-card__btn-secondary:focus-visible svg {
    transform: translateX(4px);
}
/* Pressed */
.nova-mcp-card__btn-secondary:active {
    opacity: 0.7;
}

/* Primary-style variant for secondary button slot — outlined pill matching Nova Hero */
.nova-mcp-card__btn-primary {
    display: inline-flex;
    color: var(--vdp-text);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, 'Work Sans', sans-serif);
    font-size: var(--Typography-font-size-button-medium, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-button-medium, 16px);
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
    min-width: 100px;
    min-height: var(--Button-button-h-w-min, 24px);
    padding: var(--size-125, 12px) var(--size-200, 20px);
    justify-content: center;
    align-items: center;
    gap: 0;   /* icon reveal below controls spacing via its own margin-left, same as .primary-button-font */
    border-radius: var(--medium, 27px);
    border: 1px solid var(--vdp-text);
    text-decoration: none;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}
/* Hover/focus and pressed — outlined pill fills with a subtle tint (Figma reaction) */
html[data-theme=light] .nova-mcp-card__btn-primary:hover,
html[data-theme=light] .nova-mcp-card__btn-primary:focus-visible {
    background: rgba(0, 0, 0, 0.20);
    border-color: var(--vdp-text, #000000);
}
html[data-theme=light] .nova-mcp-card__btn-primary:active {
    background: rgba(0, 0, 0, 0.1);
}
html[data-theme=dark] .nova-mcp-card__btn-primary:hover,
html[data-theme=dark] .nova-mcp-card__btn-primary:focus-visible {
    background: rgba(255, 255, 255, 0.20);
    border-color: var(--vdp-text, #ffffff);
}
html[data-theme=dark] .nova-mcp-card__btn-primary:active {
    background: rgba(255, 255, 255, 0.16);
}

/* Trailing icon reveal — same hover/focus behavior as .primary-button-font__icon.
   Uses currentColor for its fill, so it automatically picks up whichever
   --vdp-text this button is already themed with (#000000 light / #ffffff
   dark, see the base .nova-mcp-card__btn-primary color rule above) — no
   separate light/dark SVG needed. */
.nova-mcp-card__btn-primary__icon {
    display: inline-flex;
    align-items: center;
    width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.3s ease-out, margin-left 0.3s ease-out, opacity 0.3s ease-out;
}
.nova-mcp-card__btn-primary:hover .nova-mcp-card__btn-primary__icon,
.nova-mcp-card__btn-primary:focus-visible .nova-mcp-card__btn-primary__icon {
    width: 16px;
    margin-left: 8px;
    opacity: 1;
}

/* Edit-mode placeholder */
.nova-mcp-card__placeholder {
    color: var(--palette-default-text-subtle, #767676);
    font-size: 0.875rem;
    font-style: italic;
}

/* Dark theme — surface-4: rgba(99,99,99,0.3), border: rgba(255,255,255,0.35) */
html[data-theme=dark] .nova-mcp-card__inner {
    background: var(--vdp-surface-4, rgba(99, 99, 99, 0.3));
    border-color: var(--vdp-border, rgba(255, 255, 255, 0.35));
}

html[data-theme=dark] .nova-mcp-card__title,
html[data-theme=dark] .nova-mcp-card__subtitle,
html[data-theme=dark] .nova-mcp-card__btn-secondary {
    color: var(--vdp-text, #FFFFFF);
}

/* Responsive */
@media screen and (max-width: 768px) {
    .nova-mcp-card__inner {
        border-radius: 12px;
    }
}
@media screen and (max-width: 480px) {
       .sling-grid--fluid .row {
        display: flex;
        box-sizing: border-box;
        flex-direction: column-reverse !important;
        flex-wrap: wrap;
        width: 100%;
                }
    }

/* ── Blank Template Layout ────────────────────────────────────────────────────
 * Page-level main wrapper for the blank_template page template.
 * Moved from blank_template.html inline <style> — Angular's DomSanitizer strips
 * inline <style> blocks when injecting via [innerHTML], so the padding was not
 * applied on portal even though the class was on the <main> element.
 * ─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 480px) {
    .blank-template-layout {
        padding: 24px 20px 48px 20px !important;
    }
}

@media screen and (max-width: 768px) {
    .blank-template-layout {
        padding: 36px 29px 64px 29px !important;
    }
}


@media screen and (max-width: 1050px) {
    .blank-template-layout {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 25px;
        gap: 64px;
    }
}

@media screen and (min-width: 1051px) {
    .blank-template-layout {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 0px;
        gap: 64px;
    }
}

/* ── CSS variable fallbacks ──────────────────────────────────────────────────
 * Ensures consistent theme shades on the published portal where nova-styles.css
 * may not load. Values match nova-styles.css exactly.
 * ─────────────────────────────────────────────────────────────────────────── */
html[data-theme=dark] {
    --vdp-surface-1: #000000;
    --vdp-surface-2: #000000;
    --vdp-surface-3: #111111;
    --palette-default-surface-1: #0A0A0A;
    --palette-default-surface-2: #1A1A1A;
    --palette-default-surface-3: #2E2E2E;
}
html[data-theme=light] {
    --vdp-surface-1: #FFFFFF;
    --vdp-surface-2: #F6F6F6;
    --vdp-surface-3: #F0F0F0;
    --palette-default-surface-1: #FFFFFF;
    --palette-default-surface-2: #f5f5f5;
    --palette-default-surface-3: #f0f0f0;
}

/* ── MaterialIcons icon utility ──────────────────────────────────────────────
 * Moved from docs_landing_page/head.html inline <style>.
 * ─────────────────────────────────────────────────────────────────────────── */
.sling-icon {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    direction: ltr;
    display: inline-block;
    font-family: 'MaterialIcons';
    font-feature-settings: 'liga';
    font-size: 1.125em;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-rendering: optimizeLegibility;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
}

/* ── Pre-footer separator ────────────────────────────────────────────────────
 * Moved from global_docs, docs_landing_page, new_homepage,
 * guides_without_leftnav, new_api_reference, blank_template inline <style>.
 * ─────────────────────────────────────────────────────────────────────────── */
.vdp-pre-footer-separator {
    border: none;
    border-top: 1px solid var(--palette-default-border);
    margin: 0;
}
html[data-theme=dark] body .vdp-pre-footer-separator {
    border-top-color: #FFFFFF59 !important;
}
html[data-theme=light] body .vdp-pre-footer-separator {
    border-top-color: #e0e0e0 !important;
}

/* ── Docs Landing Page content layout ────────────────────────────────────────
 * Moved from docs_landing_page/docs_landing_page.html inline <style>.
 * ─────────────────────────────────────────────────────────────────────────── */
.docs-landing-page__content {
    position: relative;
    background: #ffffff;
    padding: 60px 60px 0px 60px;
    overflow: hidden;
}
html[data-theme=dark] .docs-landing-page__content {
    background: var(--vdp-surface-1, #000000);
}

/* ── Docs Overview New Header (product docs template) ────────────────────────
 * Moved from docs_overview_header_new.html inline <style>.
 * Scoped to .docs-overview-header-new so styles don't bleed into other templates.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Product name chip ───────────────────────────────────────────────────── */
.docs-overview-header-new .docs-overview-product-name {
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-4, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-headline-4, 24px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
    display: flex;
    min-height: var(--Padding-overrides-badge-min-height, 22px);
    padding: var(--size-75, 8px) var(--size-130, 14px);
    justify-content: center;
    align-items: center;
    gap: var(--size-25, 2px);
    border-radius: var(--size-75, 8px);
    border:none;
}

html[data-theme=dark] .docs-overview-header-new .docs-overview-product-name {
    background: var(--Color-Surface-surface-lowlight, rgba(62, 62, 62, 0.60));
    color: var(--vdp-active, #9AF900);
}

html[data-theme=light] .docs-overview-header-new .docs-overview-product-name {
    color: var(--vdp-active, #1434CB);
    background: var(--Color-Surface-surface-lowlight, rgba(179, 215, 255, 0.60));
}

@media screen and (max-width: 480px) {
    html[data-theme=light] .docs-overview-header-new .docs-overview-product-name {
            padding: 0px !important;
            border: none !important;
            background: none !important;
    }
    html[data-theme=dark] .docs-overview-header-new .docs-overview-product-name {
        padding: 0px !important;
        background: none !important;
        border: none !important;
    }
}

/* ── Two-column layout (left nav + main content) ─────────────────────────── */
.docs-overview-header-new .docs-template-layout {
    display: grid;
    align-items: start;
    width: 100%;
}

.docs-overview-header-new .docs-template-layout__left {
    width: 300px;
    max-width: 300px;
    min-width: 0;
    border-right: 0.76px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.76px 2.29px 0 rgba(0, 0, 0, 0.05);
}

.docs-overview-header-new .docs-template-layout__main {
    min-width: 0;
    width: 100%;
}

/* Portal mode: left nav suppressed by Angular SPA; collapse grid to full width */
.docs-overview-header-new .docs-template-layout--portal {
    grid-template-columns: minmax(0, 1fr);
}

.docs-overview-header-new .docs-template-layout--portal .docs-template-layout__main {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 36px;
}

.docs-overview-header-new .portal-docs .docs-template-layout__left {
    color: #ffffff;
}

.docs-overview-header-new .portal-docs .docs-template-layout__left a {
    color: #ffffff;
}

/* ── Page title ──────────────────────────────────────────────────────────── */
.docs-overview-header-new .product-docs-header__title {
    color: var(--vdp-text, #ffffff);
    font-feature-settings: 'liga' off, 'clig' off;

    /* VDP/Headline 1 */
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-1, 40px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-headline-1, 44px); /* 110% */
    letter-spacing: var(--Typography-letter-spacing-medium, 0.5px);
    align-self: stretch;
}

html[data-theme=light] .docs-overview-header-new .product-docs-header__title {
    color: var(--vdp-text, #000000);
}

/* ── Page description ────────────────────────────────────────────────────── */
.docs-overview-header-new .product-docs-header__description {
    font-family: var(--font-family-font-family-1, 'Work Sans', sans-serif);
    font-size: var(--Typography-font-size-body-1, 18px);
    font-weight: 400;
    line-height: var(--Typography-line-height-body-1, 28px);
    color: var(--vdp-text-subtle, rgba(255, 255, 255, 0.7));
    /* Spacing to the next section (.docs-overview-available-for) is owned by
       the parent's row-gap: 36px — this trailing margin was additive on top
       of it (flex gap + margin don't collapse), producing ~60px instead of 36px. */
    margin: 0;
}

html[data-theme=light] .docs-overview-header-new .product-docs-header__description {
    color: var(--vdp-text-subtle, #4A4A4A);
}

.docs-overview-header-new .docs-overview-available-for__label {
    display: block;
    margin-bottom: 16px;
    color: var(--Color-Text-text-subtle, #CCC);
    font-weight: 500;
    font-feature-settings: 'liga' off, 'clig' off;

    /* VDP/Subtitle 3 */
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-subtitle-3, 14px);
    font-style: normal;
    line-height: var(--Typography-line-height-subtitle-3, 18px); /* 128.571% */
    letter-spacing: var(--Typography-letter-spacing-none, 0);
}

html[data-theme=light] .docs-overview-header-new .docs-overview-available-for__label {
    color: var(--vdp-text-subtle, #333333);
}

.docs-overview-header-new .docs-overview-available-for__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.docs-overview-header-new .docs-overview-available-for__pills .v-chip {
        border: none !important;
        padding: 4px !important;
        border-radius: var(--small, 4px) !important;
        text-align: center;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: var(--font-family-font-family-1, "Work Sans");
        font-size: var(--Typography-font-size-ui-label-small, 11px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--Typography-line-height-ui-label-small, 14px);
        letter-spacing: var(--Typography-letter-spacing-none, 0);
    }

html[data-theme=dark] .docs-overview-header-new .docs-overview-available-for__pills .v-chip {
        background-color: var(--color-messaging-positive-surface-highlight, rgba(30, 72, 50, 0.35)) !important;
        color: var(--vdp-text, #ffffff) !important;
}
html[data-theme=light] .docs-overview-header-new .docs-overview-available-for__pills .v-chip {
    background-color: #eefbef !important;
    color: #000000 !important;
    background: var(--Color-Messaging-positive-surface-highlight, rgba(214, 242, 196, 0.35));
}

/* ── Grid container overrides ────────────────────────────────────────────── */
.docs-overview-header-new .vdc-component-grid {
    display: block;
    margin: 0;
    width: 100%;
}
.docs-overview-header-new .vdc-component-grid.full-width .vdc-component-grid--width {
}
.docs-overview-header-new .vdc-component-grid.full-width .vdc-component-grid--content {
    /* margin-right: 0.3125rem; */
}
.docs-overview-header-new .vdc-component-grid.bg-transparent {
    background: transparent;
}
.docs-overview-header-new .padding-top-medium    { padding-top:    36px !important; }
.docs-overview-header-new .padding-bottom-medium { padding-bottom: 36px !important; }

/* ── Global Docs Header (global_docs template) ───────────────────────────────
 * Moved from global_docs_header.html inline <style>.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Outer header background */
.global-docs-page .vdc-component-header-background.portal-docs,
html[data-theme=light] .global-docs-page .vdc-component-header-background.portal-docs {
    background: var(--vdp-surface-2, #f7f7f7) !important;
    border-bottom: 0px solid rgba(0, 0, 0, 0.08) !important;
    position: relative;
    overflow: hidden;
}

html[data-theme=dark] body .vdc-component-header-background.portal-docs.global-docs-header {
    background: var(--Color-Surface-surface-2, #1A1A1A) !important;
    position: relative;
    overflow: hidden;
    padding-bottom: 0px !important;
}

/* 2-column row: left nav (300px) + right content */
.global-docs-header-row {
    /* display: grid; grid-template-columns: 300px minmax(0, 1fr); */
    align-items: stretch;
    width: 100%;
    min-height: 248px;
    align-self: center;
    min-height: inherit;
}

/* Portal mode: left nav is suppressed by Angular SPA; collapse to full width */
.global-docs-header-row--portal {
    /* grid-template-columns: minmax(0, 1fr);*/
}

/* Left nav column */
.global-docs-header__left {
    width: 300px;
    border-right: 0.76px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.76px 2.29px 0 rgba(0, 0, 0, 0.05);
    padding: 1rem;
    overflow: hidden;
    align-self: stretch;
}

html[data-theme=light] .global-docs-page .global-docs-header__left {
    background: var(--vdp-surface-1, #ffffff);
    color: var(--vdp-text, #333333);
}

html[data-theme=dark] .global-docs-page .global-docs-header__left {
    background: var(--vdp-surface-1, #000000);
    border-right-color: #FFFFFF59;
    color: var(--vdp-text, #ffffff);
}

html[data-theme=dark] .global-docs-page .global-docs-header__left a {
    color: var(--vdp-text, #ffffff);
}

/* Right content column */
.global-docs-header__content {
    min-width: 0;
}

/* html[data-theme=dark] .global-docs-header__content {
    background: var(--Color-Surface-surface-2, #1A1A1A);
} */

/* Page-header layout inside right column */
.global-docs-header__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: visible;
}

.global-docs-header__text {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.global-docs-header__title {
    margin: 0 0 8px 0;
    color: var(--vdp-text, #000000);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-1, 40px) !important;
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-headline-1, 44px) !important;
    letter-spacing: var(--Typography-letter-spacing-medium, 0.5px) !important;
    word-break: break-word;
}

html[data-theme=dark] .global-docs-header__title {
    color: var(--vdp-text, #ffffff);
}

.global-docs-header__description {
    margin: 0;
    color: var(--Color-Text-text, #000000);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-body-1, 18px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: var(--Typography-line-height-body-1, 28px) !important;
    letter-spacing: var(--Typography-letter-spacing-none, 0);
    max-width: 650px;
}

html[data-theme=dark] .global-docs-header__description {
    color: var(--Color-Text-text, #FFF)
}

.global-docs-header__deco {
    position: absolute;
    right: -105px;
    top: 75%;
    transform: translateY(-50%);
    width: 467px;
    height: 304px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.global-docs-header__deco-img {
    width: 407px;
    height: 369px;
    object-fit: cover;
    display: block;
    user-select: none;
}

/* ── Light/dark decorative image switching (Global Docs Page Header) ──
   Both <img> tags are always in the markup; CSS shows only the one for the
   active theme. Dark-mode markup falls back to the light-mode DAM asset via
   HTL when no dark-mode image is authored (see global_docs_header.html), so
   this toggle is safe for pages authored before dark/light variants existed. */
.global-docs-header__deco-img--dark  { display: none; }
.global-docs-header__deco-img--light { display: block; }
html[data-theme=dark] .global-docs-header__deco-img--dark  { display: block; }
html[data-theme=dark] .global-docs-header__deco-img--light { display: none; }

.global-docs-header__deco-placeholder {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-family: sans-serif;
    color: #999;
    font-style: italic;
}

@media screen and (max-width: 768px) {
    .global-docs-header-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .global-docs-header__left {
        display: none;
    }
    .global-docs-header__deco {
        height: auto;
        top: 75%;
        right: -62px;
    }
    .global-docs-header__deco-img {
        width: 100%;
        height: auto;
    }
    .docs-landing-page__content {
        position: relative;
        background: #ffffff;
        padding: 60px 30px 0px 30px;
        overflow: hidden;
    }
}

@media screen and (min-width: 769px) {
    .global-docs-header-row {
        padding: 64px 20px;
    }
}

/* ── Docs Overview New header overrides ───────────────────────────────────────
 * Moved from reusable/content/docssection/docs_overview_new/docs_overview_new.html
 * inline <style>. NOTE: the body/TOC layout (.vdc-global-docs-body__layout,
 * .vdc-global-docs-body-row, .vdc-global-docs-on-this-page, etc.) is NOT here —
 * it lives in the "Global Docs Body" section below, sourced from
 * global_docs.html which is the template that actually renders it.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Tablet (768px) — Figma: content padding 29px each side, max-width 668px ── */
@media screen and (max-width: 768px) {
    .global-docs-header__content {
        margin-left: auto;
        margin-right: auto;
    }
}

.vdc-global-docs-on-this-page .vdc-on-this-page {
    position: sticky;
    top: calc(var(--vdp-header-height, 64px) + 16px);
    max-height: calc(100vh - var(--vdp-header-height, 64px) - 32px);
    overflow-y: auto;
    scrollbar-width: none;
    padding-left: 9px;
    border-left: 1px solid #e0e0e0;
}
.vdc-global-docs-on-this-page .vdc-on-this-page::-webkit-scrollbar { display: none; }

.vdc-on-this-page__title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0 0 12px 12px;
    color: #333333;
    margin-bottom: 0;
}

.vdc-on-this-page__list {
    list-style: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.vdc-on-this-page__list a {
    display: block;
    position: relative;
    padding: 4px 0 4px 0;
    line-height: 1.5;
    color: inherit;
    text-decoration: none;
    font-size: 12px;
}

.vdc-on-this-page__list a.active {
    color: #1434cb;
}

.vdc-on-this-page__list a.active::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #1a5cff;
    border-radius: 2px;
}

html[data-theme=dark] .vdc-on-this-page__list a.active {
    color: var(--vdp-active, #9AF900);
}

html[data-theme=dark] .vdc-on-this-page__list a.active::before {
    background-color: var(--vdp-active, #9AF900);
}

/* Header light-mode overrides scoped to .docs-overview-new-page */
.docs-overview-new-page .vdc-component-header-background.portal-docs {
    background: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

.docs-overview-new-page .vdc-component-header-background.portal-docs .vdc-component-grid--content {
    position: relative;
    z-index: 1;
}

.docs-overview-new-page .portal-docs .docs-template-layout {
    align-items: stretch;
}

.docs-overview-new-page .portal-docs .docs-template-layout__left {
    background: #ffffff !important;
    color: #333333;
    border-right: 0.76px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.76px 2.29px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: -2.5rem;
    margin-top: -2.5rem;
    padding: 2.5rem 1rem;
}

.docs-overview-new-page .portal-docs .docs-template-layout__left a {
    color: #333333;
}

.docs-overview-new-page .vdp-docs-left-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.docs-overview-new-page .vdp-docs-left-nav__list {
    flex: 1;
}

.docs-overview-new-page .vdp-docs-left-nav__separator {
    background: #e0e0e0;
    margin: 0;
    width: 100%;
}

.docs-overview-new-page .vdc-headline--primary {
    color: #000000;
}

.docs-overview-new-page .vdc-headline--tagline {
    color: #333333;
}

/* Back to top button — Figma: "VDP primary text button", node 24303:131093 */
.docs-go-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--vdp-active, #1434cb);
    color: #ffffff;
    border: none;
    border-radius: 27px;
    padding: 13px 21px;
    font-family: var(--font-family-font-family-1, "Work Sans", sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.25px;
    cursor: pointer;
    z-index: 100;
    box-shadow: var(--elevation-small, 0 2px 8px rgba(0,0,0,0.25));
}
    html[data-theme=dark] .docs-go-top {
        color: var(--Color-Text-on-active, #000);
    }
.docs-go-top:hover {
    background: var(--vdp-active-hover, #0f28a9);
}
.docs-go-top.visible {
    display: flex;
}
.docs-go-top__icon {
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .docs-overview-header-new .docs-template-layout {
        display: block;
    }

    .docs-overview-header-new .docs-template-layout__left {
        width: 100%;
        max-width: 100%;
        margin-bottom: 24px;
    }
}


.nova-align--left   { text-align: left; }
.nova-align--center { text-align: center; }
.nova-align--right  { text-align: right; }

.nova-text--no-bullets .nova-text__content ul,
.nova-text--no-bullets .nova-text__content ol {
    list-style: none;
    padding-left: 0;
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
}

.nova-text__content p {
    margin: 0 0 16px;
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: var(--Typography-font-size-body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-line-height-body-2, 24px);
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
}
.nova-text__content p:last-child { margin-bottom: 0; }

html[data-theme=light] .nova-text__content p, .nova-text__content ul,
.nova-text__content ol, .nova-text__content li {
    color: var(--vdp-text-subtle, #4A4A4A);
}

.nova-text__content h1, .nova-text__content h2, .nova-text__content h3,
.nova-text__content h4, .nova-text__content h5, .nova-text__content h6 {
    margin: 1em 0 0.4em;
    font-weight: 600;
    line-height: 1.25;
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
}
.nova-text__content h1:first-child, .nova-text__content h2:first-child,
.nova-text__content h3:first-child, .nova-text__content h4:first-child,
.nova-text__content h5:first-child, .nova-text__content h6:first-child { margin-top: 0; }

.nova-text__content h1 { font-size: var(--vdp-h1-font-size, 2rem);      line-height: var(--vdp-h1-line-height, 1.2); }
.nova-text__content h2 { font-size: var(--vdp-h2-font-size, 25px);    line-height: var(--vdp-h2-line-height, 33px); font-weight: 500; }
.nova-text__content h3 { font-size: var(--vdp-h3-font-size, 1.25rem);   line-height: var(--vdp-h3-line-height, 1.3); }
.nova-text__content h4 { font-size: var(--vdp-h4-font-size, 18px);  line-height: var(--vdp-h4-line-height, 24px); font-weight: 500; }
.nova-text__content h5 { font-size: var(--vdp-h5-font-size, 1rem);      font-weight: 700; }
.nova-text__content h6 { font-size: var(--vdp-h6-font-size, 0.875rem);  font-weight: 700; }

.nova-text__content ul, .nova-text__content ol {
    margin: 0 0 0.75em;
    padding-left: 1.5em;
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
}
.nova-text__content ul { list-style: disc; }
.nova-text__content ol { list-style: decimal; }
/* margin-bottom was 0 — relying entirely on line-height's leading for
 * visual gap between consecutive <li>s. Plain text glyphs are shorter than
 * the 24px line-height box, so some leading survives as a perceived gap —
 * but the leading <code> badge in many list items (see rule above) is
 * inline-block and fills its box almost edge-to-edge, leaving no leftover
 * leading. Two list items that each start with a code badge end up flush
 * against each other with zero visible gap (UAT feedback #118.4). An
 * explicit margin fixes this regardless of what a given item's content is. */
.nova-text__content li { margin-bottom: 0; line-height: 24px; font-family: var(--font-family-font-family-1, "Work Sans") !important; font-size: 14px !important;}
.nova-text__content li:last-child { margin-bottom: 0; }
.nova-text__content ul:last-child, .nova-text__content ol:last-child { margin-bottom: 0; font-family: var(--font-family-font-family-1, "Work Sans") !important; }

.nova-text__content a {
    color: var(--vdp-text, #000);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-body-2, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-body-2, 24px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.nova-text__content a:hover, .nova-text__content a:focus { text-decoration: underline; }

.nova-text__content strong, .nova-text__content b {
    font-weight: 600; font-family: var(--font-family-font-family-1, "Work Sans") !important;
    color: var(--vdp-text, #000000);
}
.nova-text__content em, .nova-text__content i { font-style: italic; font-family: var(--font-family-font-family-1, "Work Sans") !important; }
.nova-text__content u { text-decoration: underline; font-family: var(--font-family-font-family-1, "Work Sans") !important; }
.nova-text__content s, .nova-text__content strike { text-decoration: line-through; font-family: var(--font-family-font-family-1, "Work Sans") !important; }
.nova-text__content sup { vertical-align: super; font-size: 0.75em; font-family: var(--font-family-font-family-1, "Work Sans") !important; }
.nova-text__content sub { vertical-align: sub;   font-size: 0.75em; font-family: var(--font-family-font-family-1, "Work Sans") !important; }

.nova-text__content hr {
    border: none;
    border-top: 1px solid var(--vdp-border, rgba(0, 0, 0, 0.12));
    margin: 1.5em 0;
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
}

.nova-text__content blockquote {
    margin: 0 0 0.75em;
    padding: 0.5em 0 0.5em 1em;
    border-left: 3px solid var(--palette-default-active, #1434cb);
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
    opacity: 0.85;
}

.nova-text__content code, .nova-text__content .nova-inline-code {
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 0.875em;
    background: var(--vdp-surface-3, #F0F0F0);
    color: inherit;
    padding: 1px 8px;
    border-radius: 6px;
    border: none;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
    margin-bottom: 8px;
}
.nova-text__content code + code,
.nova-text__content .nova-inline-code + .nova-inline-code { margin-left: 10px; }

.nova-text__content pre {
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 0.875em;
    background: var(--vdp-surface-3, rgba(0, 0, 0, 0.06));
    padding: 1em 1.25em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0 0 0.75em;
    white-space: pre-wrap;
}
.nova-text__content pre code { background: none; padding: 0; font-size: inherit; font-family: var(--font-family-font-family-1, "Work Sans") !important; }

.nova-text__content table { border-collapse: collapse; width: 100%; margin: 0 0 0.75em; font-family: var(--font-family-font-family-1, "Work Sans") !important; }
.nova-text__content th, .nova-text__content td {
    border: 1px solid var(--vdp-border, rgba(0, 0, 0, 0.12));
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
}
.nova-text__content th { font-weight: 600; background: var(--vdp-surface-3, #f5f5f5); font-family: var(--font-family-font-family-1, "Work Sans") !important; }

html[data-theme=dark] .nova-text__content a { color: var(--vdp-text, #FFF); }
html[data-theme=dark] .nova-text__content p, .nova-text__content ul,
.nova-text__content ol, .nova-text__content li { color: var(--vdp-text-subtle, #CCC); }
html[data-theme=dark] .nova-text__content strong, html[data-theme=dark] .nova-text__content b { color: var(--vdp-text, #ffffff); }
html[data-theme=dark] .nova-text__content hr { border-top-color: rgba(255, 255, 255, 0.15); }
html[data-theme=dark] .nova-text__content blockquote { border-left-color: #6B85F5; }
html[data-theme=dark] .nova-text__content code,
html[data-theme=dark] .nova-text__content .nova-inline-code {
    border-radius: 6px;
    background: var(--Color-Surface-surface-3, #363636);
    padding: 1px var(--size-65, 6px);
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
html[data-theme=dark] .nova-text__content pre { background: var(--vdp-surface-3, #363636); }
html[data-theme=dark] .nova-text__content th { background: rgba(255, 255, 255, 0.06); }
html[data-theme=dark] .nova-text__content th,
html[data-theme=dark] .nova-text__content td { border-color: rgba(255, 255, 255, 0.15); }

.word-wrap-headline {
    word-break: break-word;
}

.nova-headline { width: 100%; margin-top: 0; margin-right: 0; margin-left: 0; padding: 0; }
.nova-headline__inner { display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 0; }
.nova-headline__icon { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; display: block; }
.nova-headline__title { margin: 0; padding: 0; font-family: var(--font-family-font-family-1, "Work Sans") !important; }
/* UAT #91: Nova's own H2/H3 tokens don't match VDP spec (H2 should be 25px,
   H3 should be 20px/medium instead of Nova's 22.86px/600) — scoped through
   the AEM .nova-headline__title class already on the element, never the
   bare .v-typography-headline-* class. */
.nova-headline__title.v-typography-headline-2 { font-size: 25px !important; }
.nova-headline__title.v-typography-headline-3 { font-size: 20px !important; font-weight: 500 !important; }
/* Wiki row 249: Nova's H4 token is 600, VDP spec wants 500 — same scoped
   pattern as H2/H3 above, confirmed against the "Regional variation"
   heading on /resources/working-with-visa-apis (ia-headline component). */
.nova-headline__title.v-typography-headline-4 { font-weight: 500 !important; }

.nova-headline.nova-align--center .nova-headline__inner { justify-content: center; }
.nova-headline.nova-align--right  .nova-headline__inner { justify-content: flex-end; }

html[data-theme=dark] .v-typography-color-active { color: var(--vdp-active); }
html[data-theme=dark] .v-typography-color-subtle { color: rgba(255, 255, 255, 0.6); }

/* ── Nova Icon (redesign/ia-icon) ────────────────────────────────────────── */
.nova-icon { display: block; }
.nova-icon__image { display: inline-block; object-fit: contain; }
.nova-icon--small   { width: 16px; height: 16px; }
.nova-icon--medium  { width: 24px; height: 24px; }
.nova-icon--large   { width: 32px; height: 32px; }
.nova-icon--xlarge  { width: 48px; height: 48px; }
.nova-icon--xxlarge { width: 64px; height: 64px; }

/* Legacy pre-redesign size values, still stored on content authored before
   the current dialog's Small/Medium/Large options existed. */
.nova-icon--vdc-component-icon-xs  { width: 18px; height: 18px; }
.nova-icon--vdc-component-icon-s   { width: 21px; height: 21px; }
.nova-icon--vdc-component-icon-m   { width: 30px; height: 26px; }
.nova-icon--vdc-component-icon-l   { width: 38px; height: 36px; }
.nova-icon--vdc-component-icon-xl  { width: 48px; height: 46px; }
.nova-icon--vdc-component-icon-xxl { width: 60px; height: 60px; }
.nova-icon--vdc-component-icon-xxxl { width: 96px; height: 94px; }

/* Legacy pre-redesign grid, still authored on content from before the
   redesign template stopped loading vdc-templates.css. */
.row { display: flex; flex-wrap: wrap; margin: 0; }
.vdc-grid-col { flex: 1 0 0%; max-width: 100%; }
.vdc-grid-col--1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.vdc-grid-col--2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.vdc-grid-col--3  { flex: 0 0 25%;      max-width: 25%; }
.vdc-grid-col--4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.vdc-grid-col--5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.vdc-grid-col--6  { flex: 0 0 50%;      max-width: 50%; }
.vdc-grid-col--7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.vdc-grid-col--8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.vdc-grid-col--9  { flex: 0 0 75%;      max-width: 75%; }
.vdc-grid-col--10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.vdc-grid-col--11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.vdc-grid-col--12 { flex: 0 0 100%;     max-width: 100%; }

@media (max-width: 767px) {
    .vdc-grid-col--1, .vdc-grid-col--2, .vdc-grid-col--3, .vdc-grid-col--4,
    .vdc-grid-col--5, .vdc-grid-col--6, .vdc-grid-col--7, .vdc-grid-col--8,
    .vdc-grid-col--9, .vdc-grid-col--10, .vdc-grid-col--11, .vdc-grid-col--12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.spacer-xxsmall { margin-bottom: 8px;  }
.spacer-xsmall  { margin-bottom: 16px; }
.spacer-small   { margin-bottom: 24px; }
.spacer-medium  { margin-bottom: 36px; }
.spacer-large   { margin-bottom: 48px; }
.spacer-xlarge  { margin-bottom: 64px; }

/* ── Nova Icon/Image Text Block (redesign/ia-icon-image-text-block) ──────────
 * Moved from apps/vdp/components/redesign/ia-icon-image-text-block/ia-icon-image-text-block.html
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-icon-text-block { display: flex; align-items: flex-start; }

.nova-icon-text-block--layout-icon { flex-direction: row; gap: 16px; }
.nova-icon-text-block--layout-icon .nova-icon-text-block__media {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--size-rounded-large, 16px);
    border: 0px;
    box-sizing: border-box;
}
.nova-icon-text-block--layout-icon .nova-icon-text-block__icon { width: 86px; height: 86px; flex-shrink: 0; object-fit: contain; display: block; }
.nova-icon-text-block--layout-icon .nova-icon-text-block__content { flex: 1; }

.nova-icon-text-block--layout-icon.nova-align--center { flex-direction: column; align-items: center; text-align: center; }

.nova-icon-text-block--layout-icon-stacked { flex-direction: column; align-items: flex-start; gap: 16px; }
.nova-icon-text-block--layout-icon-stacked .nova-icon-text-block__media {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--size-rounded-large, 16px);
    border: 0px;
    box-sizing: border-box;
}
.nova-icon-text-block--layout-icon-stacked .nova-icon-text-block__icon { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; display: block; }
.nova-icon-text-block--layout-icon-stacked .nova-icon-text-block__content { width: 100%; }
.nova-icon-text-block--layout-icon-stacked.nova-align--center { align-items: center; text-align: center; }
.nova-icon-text-block--layout-icon-stacked.nova-align--right { align-items: flex-end; text-align: right; }

.nova-icon-text-block--layout-image { flex-direction: row; gap: 24px; }
.nova-icon-text-block--layout-image .nova-icon-text-block__media { flex: 0 0 42%; }
.nova-icon-text-block--layout-image .nova-icon-text-block__image { width: 100%; height: auto; display: block; object-fit: cover; }
.nova-icon-text-block--layout-image .nova-icon-text-block__content { flex: 1; align-self: flex-start; }
.nova-icon-text-block--layout-image.nova-align--right { flex-direction: row-reverse; }

.nova-icon-text-block__content { display: flex; flex-direction: column; gap: 8px; }
.nova-icon-text-block--border-bottom { border-bottom: 1px solid var(--color-border-default); padding-bottom: 24px; }

.nova-icon-text-block__icon--dark, .nova-icon-text-block__image--dark { display: none !important; }
html[data-theme=dark] .nova-icon-text-block__icon--light,
html[data-theme=dark] .nova-icon-text-block__image--light { display: none !important; }
html[data-theme=dark] .nova-icon-text-block__icon--dark,
html[data-theme=dark] .nova-icon-text-block__image--dark { display: block !important; }

.nova-icon-text-block__description .nova-inline-code {
    font-family: 'Roboto Mono', 'Courier New', Courier, monospace;
    font-size: 0.875em;
    background: var(--vdp-surface-3, #F0F0F0);
    color: inherit;
    padding: 1px 8px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
}
html[data-theme=dark] .nova-icon-text-block__description .nova-inline-code { background: var(--vdp-surface-3, #363636); }

.nova-icon-text-block__description ul, .nova-icon-text-block__description ol { margin: 0 0 0.75em; padding-left: 1.5em; }
.nova-icon-text-block__description ul { list-style: disc; }
.nova-icon-text-block__description ol { list-style: decimal; }
.nova-icon-text-block__description li { margin-bottom: 0.3em; }
.nova-icon-text-block__description ul:last-child, .nova-icon-text-block__description ol:last-child { margin-bottom: 0; }
.nova-icon-text-block__description p a, .nova-icon-text-block__description li a {
    color: var(--vdp-text, #000);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-body-2, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-body-2, 24px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
html[data-theme=dark] .nova-icon-text-block__description p a,
.nova-icon-text-block__description li a { color: var(--vdp-text, #FFF); }

/* ── Nova Grid — auto-cards (redesign/ia-grid) ────────────────────────────────
 * Moved from apps/vdp/components/redesign/ia-grid/ia-grid.html
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-grid { position: relative; width: 100%; box-sizing: border-box; }

.nova-grid--auto {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--size-100, 16px) !important;
    align-items: stretch !important;
    align-content: flex-start !important;
}

.nova-grid--auto > .nova-grid__cell {
    flex: 1 1 calc(25% - 12px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden;
}

.nova-grid--auto-flat > .nova-grid__cell { display: contents !important; }
.nova-grid--auto-flat > .nova-grid__cell > cq,
.nova-grid--auto-flat > .nova-grid__cell > style { display: none !important; }

.nova-grid--auto-flat .v-content-card {
    flex: 1 1 calc(25% - 12px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden;
}

/* UAT #8 Responsive/Mobile: Figma 375px mock stacks these cards full-width
   instead of the 25%-basis row used at wider breakpoints.
   NOTE: the "buttons should span full-width" part of this UAT item was
   investigated and reverted — the real CTA ("VDP link with icon", e.g.
   "Browse documentation") stays a small text+arrow link at every breakpoint
   in Figma (87-112px wide). The full-width button instances found earlier
   belong to a decorative "Sandbox UI" mockup illustration inside the card
   image, not a real interactive element — not a valid basis for a CSS fix. */
@media screen and (max-width: 768px) {
    .nova-grid--auto-flat .v-content-card {
        flex: 1 1 calc(50% - 12px) !important;
    }
}
@media screen and (max-width: 480px) {
    .nova-grid--auto-flat .v-content-card {
        flex: 1 1 100% !important;
    }
}

.nova-grid--auto .nova-grid__cell-parsys {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-width: 0;
    min-height: var(--size-500, 60px);
}

.nova-grid--auto .nova-grid__cell > .section,
.nova-grid--auto .nova-grid__cell-parsys > .section {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.nova-grid--auto .nova-grid__cell .v-content-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

html[data-theme=dark] .nova-grid--auto .nova-grid__cell .v-content-card {
    border: 1px solid var(--Color-Decorative-border, rgba(255, 255, 255, 0.35));
}
html[data-theme=light] .nova-grid--auto .nova-grid__cell .v-content-card {
    border: 1px solid var(--Color-Decorative-border, rgba(0, 0, 0, 0.10));
    background: rgba(246, 246, 246, 0.40);
}

.nova-grid--auto .nova-grid__cell a.v-content-card-clickable {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--small, 18px);
}

html[data-theme=dark] .nova-grid--auto .nova-grid__cell a.v-content-card-clickable {
    background: transparent;
}

html[data-theme=light] .nova-grid--auto .nova-grid__cell a.v-content-card-clickable {
    background: transparent;
}

.nova-grid--auto .nova-grid__cell .v-content-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

.nova-grid__cell .v-content-card-title,
.nova-grid__cell .v-content-card-subtitle,
.nova-grid__cell .v-content-card-body p,
.nova-grid__cell .v-content-card-body div {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    min-width: 0;
}

.nova-grid__edit-label {
    flex: 0 0 100%;
    background: var(--vdp-info-surface, #f0f4ff);
    border: 1px dashed var(--vdp-info-graphics, #4a86e8);
    padding: var(--size-25, 3px) var(--size-75, 8px);
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--vdp-body-3-font-size, 11px);
    color: var(--vdp-info-text, #1155cc);
    box-sizing: border-box;
}

.nova-grid__cell-label {
    background: var(--vdp-info-surface, #f0f4ff);
    border: 1px dashed var(--vdp-info-graphics, #4a86e8);
    padding: var(--size-15, 2px) var(--size-50, 6px);
    margin-bottom: var(--size-30, 4px);
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--vdp-ui-label-small-font-size, 10px);
    color: var(--vdp-info-text, #1155cc);
    text-align: center;
}

@media screen and (max-width: 1200px) { .nova-grid--auto > .nova-grid__cell { flex-basis: calc(33.333% - 11px) !important; } }
@media screen and (max-width: 768px)  { .nova-grid--auto > .nova-grid__cell { flex-basis: calc(50% - 8px) !important; } }
@media screen and (max-width: 480px)  { .nova-grid--auto > .nova-grid__cell { flex-basis: 100% !important; } }

/* ── Nova Table (redesign/table) ──────────────────────────────────────────────
 * Moved from apps/vdp/components/redesign/table/table.html
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-table { width: 100%; box-sizing: border-box; }
.nova-table__wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nova-table__wrapper table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.5;
    border: none;
    color: var(--palette-default-text, #000000);
}
.nova-table__wrapper thead th {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid var(--palette-default-text, #000000);
    background: transparent;
    color: var(--palette-default-text, #000000);
    vertical-align: bottom;
}
.nova-table__th--sortable { cursor: pointer; user-select: none; }
.nova-table__th--sortable:focus-visible { outline: 2px solid var(--palette-default-active, #1434CB); outline-offset: -2px; }
.nova-table__sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 0;
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.2s ease;
    color: inherit;
}
.nova-table__sort-btn:focus { outline: none; }
.nova-table__sort-btn svg { fill: currentColor; display: block; }
.nova-table__th--sortable[data-sort="asc"]  .nova-table__sort-btn,
.nova-table__th--sortable[data-sort="desc"] .nova-table__sort-btn { opacity: 1; color: var(--palette-default-active, #1434CB); }
.nova-table__th--sortable[data-sort="desc"] .nova-table__sort-btn { transform: rotate(180deg); }
.nova-table__wrapper tbody td {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--palette-default-border, rgba(0, 0, 0, 0.08));
    vertical-align: top;
    color: var(--palette-default-text, #000000);
    min-width: 80px;
    /* Figma "VDP Table: Rows" cell spec — UI label large / regular.
       Color already correct above via --palette-default-text, which is
       redefined per html[data-theme] elsewhere, so no dark-mode override
       needed here. */
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
}
.nova-table__wrapper td p, .nova-table__wrapper th p { margin: 0 0 16px; line-height: 24px; }
.nova-table__wrapper td p:last-child, .nova-table__wrapper th p:last-child { margin-bottom: 0; }
.nova-table__wrapper td ul, .nova-table__wrapper td ol,
.nova-table__wrapper th ul, .nova-table__wrapper th ol { margin: 0.25em 0 0.25em 1.25em; padding: 0; list-style-position: outside; line-height: 24px; }
.nova-table__wrapper td ul, .nova-table__wrapper th ul { list-style-type: disc; }
.nova-table__wrapper td ol, .nova-table__wrapper th ol { list-style-type: decimal; }
.nova-table__wrapper td li, .nova-table__wrapper th li { margin-bottom: 0.25em; }
.nova-table__wrapper td li:last-child, .nova-table__wrapper th li:last-child { margin-bottom: 0; }
.nova-table__wrapper td code, .nova-table__wrapper td .nova-inline-code,
.nova-table__wrapper th code, .nova-table__wrapper th .nova-inline-code {
    display: inline-block;
    background: rgba(0, 0, 0, 0.07);
    color: inherit;
    font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8125rem;
    padding: 1px 7px;
    border-radius: 4px;
    white-space: nowrap;
    vertical-align: baseline;
}
html[data-theme=dark] .nova-table__wrapper td code, html[data-theme=dark] .nova-table__wrapper td .nova-inline-code,
html[data-theme=dark] .nova-table__wrapper th code, html[data-theme=dark] .nova-table__wrapper th .nova-inline-code { background: rgba(255, 255, 255, 0.18); }
.nova-table__wrapper table a {     color: var(--vdp-text, #FFF); text-decoration: underline; font-weight: 500;}
.nova-table__wrapper table a:hover { text-decoration: none; }
html[data-theme=dark] .nova-table__wrapper table a { color: #FFFFFF; }
.nova-table--zebra .nova-table__wrapper { background-color: var(--palette-default-surface-2, #f5f5f5); }
.nova-table--zebra .nova-table__wrapper tbody td { border-bottom: none; }
.nova-table--zebra .nova-table__wrapper tbody tr:nth-child(even) td { background-color: var(--palette-default-surface-1, #ffffff); }
html[data-theme=dark] .nova-table__wrapper { background-color: var(--palette-default-surface-1, #0A0A0A); }
html[data-theme=dark] .nova-table__wrapper tbody td { border-bottom: 1px solid #FFFFFF59; }
html[data-theme=dark] .nova-table__th--sortable[data-sort="asc"]  .nova-table__sort-btn,
html[data-theme=dark] .nova-table__th--sortable[data-sort="desc"] .nova-table__sort-btn { color: var(--palette-default-active, #BDEAFF); }
html[data-theme=dark] .nova-table--zebra .nova-table__wrapper { background-color: var(--palette-default-surface-2, #1A1A1A); }
html[data-theme=dark] .nova-table--zebra .nova-table__wrapper tbody td { border-bottom: none; }
html[data-theme=dark] .nova-table--zebra .nova-table__wrapper tbody tr:nth-child(even) td { background-color: #000000; }
.nova-table__edit-label {
    background: #f0f4ff; border: 1px dashed #4a86e8; padding: 4px 10px; font-size: 11px;
    font-family: sans-serif; color: #1155cc; box-sizing: border-box; margin-bottom: 8px; display: block;
}
.nova-table__empty { padding: 16px; text-align: center; color: #999; font-style: italic; border: 1px dashed #ccc; border-radius: 4px; font-size: 0.875rem; }

/* ── IA Table (redesign/ia-table) — bulk-paste table for large datasets ──────
 * Reuses .nova-table / .nova-table__wrapper / .nova-table__th--sortable /
 * .nova-table__sort-btn and the zebra-stripe rules above; adds only what's
 * specific to this component: a heavier header divider and the bottom
 * pagination bar.
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-table--ia .nova-table__wrapper thead th { border-bottom-width: 3px; }
.nova-table--ia .nova-table__wrapper tbody tr[hidden] { display: none; }

/* Status badges (redesign/ia-table's iatabledata.js renderBadge()) — this CSS
 * was missing entirely, which is why the icon (and the whole pill) wasn't
 * rendering: the markup was already correct, there was just nothing sizing
 * or coloring it. Icon shape matches etc/designs/vdp/assets/images/icons/
 * category/Available-Tick.svg + Available-half-Tick.svg exactly (the same
 * two paths, just combined into one inline <svg> instead of two files).
 *
 * Figma dev-mode spec (light mode) applied for .v-badge-stable ("Available").
 * display:flex in that spec is Figma's export for "hug contents" auto-layout;
 * kept as inline-flex here since a literal flex <span> is block-level and
 * would stretch to the table cell's full width. Text color kept white
 * (matching the actual screenshot) rather than the spec's literal
 * var(--Color-Text-text, #000), which would be unreadable on this dark fill
 * and looks like a mis-grabbed generic token rather than the intended value.
 *
 * Only the "stable/Available" spec was provided — warning/critical colors
 * below are a placeholder same-pattern guess (dark fill + white text) until
 * an actual spec for those states exists. */
.v-badge {
    display: inline-flex;
    min-height: 24px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    align-self: stretch;
    border-radius: 4px;
    text-align: center;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    white-space: nowrap;
    color: #ffffff;
}
.v-badge-icon { width: 14px; height: 14px; flex-shrink: 0; }
.v-badge-stable { background: #1E4832; }
.v-badge-stable .v-badge-icon { color: #C9E8D8; }
.v-badge-warning { background: #523C14; }
.v-badge-warning .v-badge-icon { color: #F8F0E2; }
/* Correct reference confirmed via screenshot: light gray pill, dark text,
 * dark gray icon — opposite of .v-badge-stable's dark-fill/white-text
 * pattern, so color has to be overridden here (base .v-badge defaults to
 * white for the other two variants). The literal Figma token fallback
 * (10%-opacity white, and black text on top of what turned out to be a
 * mis-copied background) didn't match this reference, so using concrete
 * values from the screenshot instead. */
.v-badge-critical { background: #E5E5E5; color: #000000; }
.v-badge-critical .v-badge-icon { color: #404040; }

.nova-table__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 4px 4px;
    font-size: 0.875rem;
    color: var(--palette-default-text, #000000);
}
.nova-table__pagination-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nova-table__pagination-size-label { display: flex; align-items: center; gap: 8px; }
.nova-table__pagination-size {
    font-size: 0.875rem;
    padding: 4px 8px;
    border: 1px solid var(--palette-default-border, rgba(0, 0, 0, 0.24));
    border-radius: 4px;
    background: var(--palette-default-surface-1, #ffffff);
    color: var(--palette-default-text, #000000);
}
.nova-table__pagination-info { color: var(--palette-default-text-secondary, #616161); }
.nova-table__pagination-nav { display: flex; align-items: center; gap: 4px; }
.nova-table__pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--palette-default-active, #1434CB);
    font-size: 0.875rem;
    cursor: pointer;
}
.nova-table__pagination-btn:hover:not(:disabled) { background: var(--palette-default-surface-2, #f5f5f5); }
.nova-table__pagination-btn:disabled { color: var(--palette-default-text-disabled, #bdbdbd); cursor: default; }
.nova-table__pagination-btn--current {
    border: 1px solid var(--palette-default-active, #1434CB);
    font-weight: 600;
}
.nova-table__pagination-ellipsis { padding: 0 4px; color: var(--palette-default-text-secondary, #616161); }

html[data-theme=dark] .nova-table__pagination { color: #FFFFFF; }
html[data-theme=dark] .nova-table__pagination-size {
    border-color: #FFFFFF59;
    background: var(--palette-default-surface-1, #0A0A0A);
    color: #FFFFFF;
}
html[data-theme=dark] .nova-table__pagination-info { color: #BDBDBD; }
html[data-theme=dark] .nova-table__pagination-btn { color: var(--palette-default-active, #BDEAFF); }
html[data-theme=dark] .nova-table__pagination-btn:hover:not(:disabled) { background: #313030; }
html[data-theme=dark] .nova-table__pagination-btn:disabled { color: #6B6B6B; }
html[data-theme=dark] .nova-table__pagination-btn--current { border-color: var(--palette-default-active, #BDEAFF); }

/* ── Content Card image fix (redesign/content-card) ───────────────────────────
 * Moved from apps/vdp/components/redesign/content-card/content-card.html
 * ─────────────────────────────────────────────────────────────────────────── */
.v-content-card-image { overflow: hidden; }
.v-content-card-image--light, .v-content-card-image--dark { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ── Nova Image/Video (redesign/ia-image-video) ───────────────────────────────
 * Moved from apps/vdp/components/redesign/ia-image-video/ia-image-video.html
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-image-video { width: 100%; box-sizing: border-box; overflow: hidden; }
.nova-image-video__image-wrap { position: relative; width: 100%; }
.nova-image-video__img { max-width: 100%; height: auto; display: block; width: 100%; }
.nova-image-video--small .nova-image-video__img { max-width: 480px; width: 100%; }
/* .nova-image-video__zoom-link had no CSS at all — an <a> containing a
 * block-level <img> defaults to display:inline, which browsers blockify
 * inconsistently. Explicit display:block makes it a reliable, single
 * positioning/layout unit matching .image-wrap's full width. */
.nova-image-video__zoom-link { display: block; }
/* UAT feedback #178: this was in-flow content (display:inline-flex;
 * margin-top:6px) after two display:block <img> elements, so ordinary block
 * flow forced it onto its own line below the image — it should instead look
 * like the legacy docsection/image-video component it replaces, which
 * overlays a small pill badge on the image's corner (vdc-templates.css
 * ~L14016: position:absolute; right/top-based). Same effect here, using
 * plain top/right offsets against .image-wrap's position:relative instead
 * of the old %-based transform hack. */
.nova-image-video__zoom {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem;
    position: absolute; top: 8px; right: 8px;
    cursor: pointer; background: #ffffff; border: 1px solid #ebebeb; border-radius: 4px;
    padding: 4px 8px; color: #4A4A4A; text-decoration: none;
}
/* Badge stays white/blue regardless of theme, matching the legacy
 * component's unconditional background:#fff — a small white overlay reads
 * fine against any image in either theme. */
.nova-image-video__lightbox {
    display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.88);
    align-items: center; justify-content: center; cursor: zoom-out;
}
.nova-image-video__lightbox.nova-image-video__lightbox--open { display: flex; }
.nova-image-video__lightbox-img {
    max-width: 92vw; max-height: 92vh; object-fit: contain; display: block; cursor: default;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); border-radius: 4px;
}
.nova-image-video__lightbox-close {
    position: fixed; top: 16px; right: 20px; font-size: 2rem; line-height: 1; color: #ffffff;
    background: none; border: none; cursor: pointer; padding: 4px 8px; opacity: 0.8; font-family: sans-serif;
}
.nova-image-video__lightbox-close:hover { opacity: 1; }
.nova-image-video__video-wrap { position: relative; width: 100%; }
.nova-image-video__video-link { display: block; position: relative; }
.nova-image-video__video-thumb { position: relative; cursor: pointer; display: block; }
.nova-image-video__video-iframe { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; border-radius: inherit; }
.nova-image-video__play-icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; transition: opacity 0.2s ease;
}
.nova-image-video__video-thumb:hover .nova-image-video__play-icon { opacity: 0.85; }
@media screen and (max-width: 768px) { .nova-image-video--small .nova-image-video__img { max-width: 100%; } }
.nova-image-video__placeholder {
    display: flex; align-items: center; justify-content: center; min-height: 120px;
    border: 2px dashed #cccccc; border-radius: 4px; background: #f9f9f9; color: #999999;
    font-size: 0.875rem; font-style: italic;
}

/* ── Accordion (redesign/accordion) ───────────────────────────────────────────
 * Moved from apps/vdp/components/redesign/accordion/accordion.html
 * ─────────────────────────────────────────────────────────────────────────── */
/* Wrapper itself no longer carries the "v-accordion" class (it was duplicating
   the class used by each <details> item below, which made compound/descendant
   selectors like ".vdp-accordion-wrap .v-accordion" paint a SECOND border on
   top of Nova's own per-item border — the "duplicate rounded border" bug).
   display:flex/column here replaces what that stray class used to provide,
   so the "gap" inline style set on this element still spaces the items. */
.vdp-accordion-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}
.vdp-accordion-wrap > .v-accordion { padding-bottom: 24px; }
/* Chevron + question text were top-aligned (Nova's default --v-accordion-align-items
   is flex-start) inside the fixed-height heading row. Center them vertically to
   match Figma — set directly rather than via the --v-accordion-align-items variable
   so it isn't at the mercy of Nova re-asserting its own default further down the cascade. */
.vdp-accordion-wrap .v-accordion-heading {
    align-items: center !important;
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
    /* Nova's default heading padding is 0 block / 12px inline (relies on a
       fixed block-size instead); Figma calls for uniform 11px padding. */
    padding: 11px;
    gap: 6px;
    align-self: stretch;
    /* Nova's own --typography-subtitle-2-* tokens are 18.3px/500/24px —
       NOT the same as Figma's "VDP/Subtitle 2" (16px/400/21px), despite
       the matching name. Set the real spec directly. */
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    letter-spacing: 0 !important;
}
.vdp-accordion-wrap .v-accordion-toggle-icon { transition: transform 0.2s ease; transform: rotate(0deg); }
.vdp-accordion-wrap details[open] > .v-accordion-heading .v-accordion-toggle-icon {
    transform: rotate(90deg);
    color: inherit;
    --v-icon-primary: currentColor;
}
.vdp-accordion-wrap details[open] > .v-accordion-heading { color: inherit; }
/* Nova's own panel padding (--v-accordion-panel-padding-block: 8px 16px,
   --v-accordion-panel-padding-inline: 40px) already matches Figma exactly —
   no override needed here beyond font-family. */
.vdp-accordion-wrap .v-accordion-panel {
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}
/* Dark mode: override the CSS variables Nova's own .v-accordion-heading /
   .v-accordion-panel rules already consume, instead of layering a second
   literal border on top of them. One border per item — no duplicate box.
   Background is intentionally NOT overridden here — Nova's own default
   (--v-accordion-background / --v-accordion-panel-background-color both
   resolve to --palette-default-surface-1) already gives the opaque black
   box Figma calls for; forcing it to transparent was the actual bug. */
html[data-theme=dark] .vdp-accordion-wrap {
    --v-accordion-border-color: var(--vdp-border, rgba(255, 255, 255, 0.35));
}
/* Moved from nova-styles.css (@layer overrides) — same layer here so its
   priority relative to other layered/unlayered rules stays unchanged. */
@layer overrides {
[data-theme=dark] [v-accordion],
[data-theme=dark] .v-accordion {
    --v-accordion-icon-color: var(--vdp-active);
    --v-accordion-border-color: var(--vdp-border);
    --v-accordion-panel-border-color: var(--vdp-border);
    --v-accordion-background: var(--vdp-surface-3);
    --v-accordion-panel-background-color: var(--vdp-surface-3);
}
}
/* Caret indicates expand state per business ask: white while collapsed,
   green while expanded. Nova's own dark-theme default paints the caret
   green in BOTH states (--v-accordion-icon-color: var(--vdp-active)), so
   the collapsed state needs an explicit white override; the open-state
   selector below is more specific and wins back to green when expanded. */
html[data-theme=dark] .vdp-accordion-wrap .v-accordion-toggle-icon {
    --v-icon-primary: var(--vdp-text, #ffffff);
}
html[data-theme=dark] .vdp-accordion-wrap details[open] > .v-accordion-heading .v-accordion-toggle-icon {
    --v-icon-primary: var(--vdp-active, #9AF900);
}
/* Squared-off corners (6px, Nova's --size-rounded-medium / Figma "medium")
   instead of the large/pill radius a competing layered Nova rule forces.
   Set directly on the elements Nova paints the border on — heading gets
   full radius except where a panel is open below it (flat bottom edge so
   the two pieces read as one seamless box); panel gets the flat top +
   rounded bottom to close that box out.
   Unscoped by theme — the shape should be the same in light and dark,
   only the border colour/background differ (handled above/below).
   MUST be declared inside @layer overrides: nova-styles.css has its own
   "@layer overrides { .v-accordion-heading{border-radius:24px!important}
   details[open]>.v-accordion-heading{border-top-*-radius:24px!important} }".
   Per the CSS cascade-layers spec, !important reverses layer priority —
   an unlayered !important rule (which is what this was) loses to ANY
   named-layer !important rule regardless of specificity, which is why the
   top corners stayed at Nova's 24px while only the bottom (where Nova has
   no competing !important) picked up our 8px. Joining the same "overrides"
   layer makes it a normal specificity fight again, which our more specific
   .vdp-accordion-wrap-prefixed selectors win. */
@layer overrides {
.vdp-accordion-wrap .v-accordion-heading {
    border-radius: 6px !important;
}
.vdp-accordion-wrap details[open] > .v-accordion-heading,
.vdp-accordion-wrap .v-accordion-heading[aria-expanded=true] {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
}
.vdp-accordion-wrap .v-accordion-panel {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
html[data-theme=dark] .vdp-accordion-wrap .v-accordion-panel p { color: var(--vdp-text, #ffffff); }

/* "Expand all" / "Collapse all" control above the accordion items — toggles
   every item in this .vdp-accordion-wrap instance at once (see the inline
   script in accordion.html). Chevron reuses the same rotate(0)→rotate(90)
   convention as each item's own toggle icon. */
.vdp-accordion-wrap__toggle-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    background: none;
    border: none;
    padding: 4px 0;
    margin-bottom: 8px;
    cursor: pointer;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 14px;
    font-weight: 600;
    color: var(--palette-default-active, #1434CB);
}
.vdp-accordion-wrap__toggle-all:hover { text-decoration: underline; }
.vdp-accordion-wrap__toggle-all-icon { transition: transform 0.2s ease; transform: rotate(0deg); }
.vdp-accordion-wrap__toggle-all[aria-expanded="true"] .vdp-accordion-wrap__toggle-all-icon { transform: rotate(90deg); }
html[data-theme=dark] .vdp-accordion-wrap__toggle-all { color: var(--vdp-active, #9AF900); }

/* ── Content Card (redesign/content-card) ───────────────────────────────────── */

/* Card headings ("Visa Direct", "Visa B2B Payment Controls", ...) render
   green in dark mode — nova sets --v-content-card-title-color to the accent
   green by default (and .v-content-card-title sits inside the .v-link-styled
   clickable <a>, which also asserts a green foreground). Override the title
   element directly with !important to guarantee it stays white. */
html[data-theme=dark] .v-content-card-title {
    color: var(--vdp-text, #ffffff) !important;
}

/* ── Icon switching — unscoped (portal fallback: no .ia-cards ancestor) ──
 * Card grids outside .ia-cards / .vdp-capability-cards (e.g. mcp.html) had
 * no size constraint on this <img> at all, so any real icon asset stretched
 * to fill its container — the "unwanted giant blurry image" author-mode bug.
 * ─────────────────────────────────────────────────────────────────────────── */
.vdp-card-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* ── CTA "Button" style (content-card ctaStyle=button, the default) ─────────
 * The pill button sat flush against the card edge while the link-style CTA
 * above (and the headline/description) are inset — scope the same 20px
 * indent to just this button (not .v-button globally, which is used
 * everywhere else on the site) via margin so its own pill padding/shape
 * stays untouched. */
.vdp-card-cta .v-button {
    margin-left: -3px;
}

/* ── Callout Block (redesign/callout-block) ───────────────────────────────────
 * Moved from apps/vdp/components/redesign/callout-block/callout-block.html
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-callout {
    width: 100%; box-sizing: border-box; padding: 12px; border-radius: 16px;
    background: var(--palette-default-surface-2, #f5f5f5); color: var(--palette-default-text, #000000);
}
html[data-theme=dark] .nova-callout { background: var(--palette-default-surface-2, #1a1a1a); border: 1px solid rgba(255, 255, 255, 0.25); }
/* Wiki row 270 #6: icon-to-text gap is 8px (was 12px). */
.nova-callout__header { display: flex; align-items: flex-start; gap: 8px; }
.nova-callout__icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--palette-default-text, #000000); }
.nova-callout__icon-img { width: 28px; height: 28px; object-fit: contain; display: block; }
html[data-theme=dark] .nova-callout__icon-img { filter: invert(1); }
/* Wiki row 270 #5: title/description/actions are grouped together (not
   icon+title), so the 8px gap below the title is measured against the
   title's own line box, not against the taller icon it used to be grouped
   with — previously that inflated the visible gap past 8px. */
.nova-callout__content { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
/* Wiki row 270 #3/#4: Work Sans / 14px (was Open Sans / 12.25px). */
.nova-callout__title {
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 14px; font-weight: 600; line-height: 1.4;
    color: var(--palette-default-text, #000000); margin: 0 0 8px;
}
.nova-callout__text {
    margin: 0 0 16px;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 14px; line-height: 1.6;
    color: var(--vdp-text-subtle, #4A4A4A);
}
html[data-theme=dark] .nova-callout__text { color: var(--vdp-text-subtle, #CCCCCC); }
/* Hyperlinks inside the description use full-contrast text colour, not the
   browser default anchor blue, and weight 500 per wiki row 270 #7. */
.nova-callout__text a { color: var(--vdp-text, #000000); font-weight: 500; }
html[data-theme=dark] .nova-callout__text a { color: var(--vdp-text, #FFFFFF); }
.nova-callout__text p { margin: 0 0 8px; }
.nova-callout__text p:last-child { margin-bottom: 0; }
.nova-callout__desc-img { display: block; max-width: 100%; height: auto; margin-bottom: 12px; }
.nova-callout__desc-img--dark { display: none; }
html[data-theme=dark] .nova-callout__desc-img--light { display: none; }
html[data-theme=dark] .nova-callout__desc-img--dark { display: block; }
.nova-callout--inline .nova-callout__desc-img { display: block; flex-shrink: 0; width: 24px; height: 24px; max-width: none; object-fit: contain; margin-bottom: 0; }
.nova-callout--inline .nova-callout__desc-img--dark { display: none; }
html[data-theme=dark] .nova-callout--inline .nova-callout__desc-img--light { display: none; }
html[data-theme=dark] .nova-callout--inline .nova-callout__desc-img--dark { display: block; }
.nova-callout__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nova-callout__btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px;
    /* Wiki row 248: 2px border was too thick vs Figma; 1px matches the
       site's standard pill/outline button convention. */
    border: 1px solid var(--palette-default-text, #000000); border-radius: 9999px; background: transparent;
    color: var(--palette-default-text, #000000);
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 14px; font-weight: 700;
    text-decoration: none; white-space: nowrap; transition: opacity 0.15s ease; cursor: pointer;
}
.nova-callout__btn:hover { opacity: 0.7; }
.nova-callout__link {
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 14px; font-weight: 600;
    color: var(--palette-default-text, #000000); text-decoration: underline; white-space: nowrap;
}
.nova-callout__link:hover { text-decoration: none; }
.nova-callout--inline { display: flex; align-items: center; padding: 14px 20px; }
.nova-callout--inline .nova-callout__header { flex: 1 1 auto; min-width: 0; align-items: center; }
.nova-callout--inline .nova-callout__text { display: flex; align-items: center; gap: 8px; margin-bottom: 0; color: var(--palette-default-text, #000000); }
.nova-callout--inline .nova-callout__text p { margin: 0; }
html[data-theme=dark] .nova-callout--inline .nova-callout__text { color: var(--palette-default-text, #ffffff); }
.nova-callout__edit-label {
    display: block; background: #f0f4ff; border: 1px dashed #4a86e8; padding: 3px 10px;
    font-size: 11px; font-family: sans-serif; color: #1155cc; border-radius: 4px; margin-bottom: 12px;
}

/* ── Nova Tabs (redesign/ia-tabs) ─────────────────────────────────────────────
 * Moved from apps/vdp/components/redesign/ia-tabs/ia-tabs.html
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-tabs { width: 100%; font-family: inherit; }
.nova-tabs__nav {
    display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0; border-bottom: 2px solid #e0e0e0;
    padding: 0 0 8px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.nova-tabs__nav::-webkit-scrollbar { display: none; }
.nova-tabs__tab {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
    position: relative; padding: 10px 12px; cursor: pointer;
    color: #555555; font-size: 14px; font-weight: 400; line-height: 1.5; white-space: nowrap;
    text-decoration: none; transition: color 0.15s ease, background 0.15s ease;
}
.nova-tabs__tab:hover, .nova-tabs__tab:focus { color: var(--palette-default-active, #1434CB); }
.nova-tabs__tab:hover, .nova-tabs__tab:focus, .nova-tabs__tab--active {
    border-radius: 999px;
    background: rgba(20, 52, 203, 0.08);
}
.nova-tabs__tab:focus { outline: none; }
.nova-tabs__tab:focus-visible {
    outline: 2px dotted var(--palette-default-active, #1434CB);
    outline-offset: -4px;
}
.nova-tabs__tab--active {
    color: var(--palette-default-active, #1434CB);
    font-weight: 600;
}
.nova-tabs__tab--active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -8px;
    height: 2px;
    border-radius: 1px;
    background: var(--palette-default-active, #1434CB);
}
.nova-tabs__tab-icon { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
.nova-tabs__panels { position: relative; }
.nova-tabs__panel { display: none; padding: 24px; background: #ffffff; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 8px 8px; }
.nova-tabs__panel--active { display: block; }
.nova-tabs__edit-hint {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #0054a6;
    background: #e8f0fe; border: 1px solid #90b8f8; border-radius: 4px; padding: 3px 10px; margin: 0 0 12px; display: inline-block;
}
.nova-tabs--vertical { display: flex; align-items: flex-start; gap: 0; }
.nova-tabs--vertical .nova-tabs__nav {
    flex-direction: column; align-items: stretch; border-bottom: none; border-right: 2px solid #e0e0e0;
    overflow-x: visible; overflow-y: auto; min-width: 160px; flex-shrink: 0; padding: 0;
}
.nova-tabs--vertical .nova-tabs__tab {
    border-bottom: none; border-right: 3px solid transparent; border-radius: 4px 0 0 4px;
    margin-bottom: 0; margin-right: -2px; justify-content: flex-start; white-space: normal;
}
.nova-tabs--vertical .nova-tabs__tab--active { border-radius: 20px 0 0 20px; border-right-color: var(--palette-default-active, #1434CB); }
.nova-tabs--vertical .nova-tabs__panels { flex: 1; min-width: 0; }
.nova-tabs--vertical .nova-tabs__panel { border: 1px solid #e0e0e0; border-radius: 0 8px 8px 0; }
html[data-theme=light] .nova-tabs__nav { border-bottom-color: #e0e0e0; }
html[data-theme=light] .nova-tabs__tab { color: #555555; }
html[data-theme=light] .nova-tabs__tab:hover, html[data-theme=light] .nova-tabs__tab:focus { color: var(--palette-default-active, #1434CB); }
html[data-theme=light] .nova-tabs__tab--active { color: var(--palette-default-active, #1434CB); }
html[data-theme=light] .nova-tabs__panel { background: #ffffff; border-color: #e0e0e0; }
html[data-theme=dark] .nova-tabs__nav { border-bottom-color: rgba(255, 255, 255, 0.15); }
html[data-theme=dark] .nova-tabs__tab { color: rgba(255, 255, 255, 0.6); }
html[data-theme=dark] .nova-tabs__tab:hover, html[data-theme=dark] .nova-tabs__tab:focus { color: var(--vdp-active, #9AF900); }
html[data-theme=dark] .nova-tabs__tab:hover, html[data-theme=dark] .nova-tabs__tab:focus, html[data-theme=dark] .nova-tabs__tab--active {
    background: rgba(154, 249, 0, 0.08);
}
html[data-theme=dark] .nova-tabs__tab:hover { background: rgba(154, 249, 0, 0.16); }
html[data-theme=dark] .nova-tabs__tab--active { color: var(--vdp-active, #9AF900); }
html[data-theme=dark] .nova-tabs__tab--active::after { background: var(--vdp-active, #9AF900); }
html[data-theme=dark] .nova-tabs__tab:focus-visible { outline-color: var(--vdp-active, #9AF900); }
html[data-theme=dark] .nova-tabs__panel { background: var(--vdp-surface-2, #1a1a1a); border-color: rgba(255, 255, 255, 0.12); }
html[data-theme=dark] .nova-tabs--vertical .nova-tabs__nav { border-right-color: rgba(255, 255, 255, 0.15); }
html[data-theme=dark] .nova-tabs--vertical .nova-tabs__tab--active { border-radius: 20px 0 0 20px; border-right-color: var(--vdp-active, #9AF900); }
html[data-theme=dark] .nova-tabs--vertical .nova-tabs__panel { border-left: none; }

/* ── MCP Banner Card button (redesign/mcp-banner) ─────────────────────────────
 * Moved from apps/vdp/components/redesign/mcp-banner/mcp-banner.html
 * ─────────────────────────────────────────────────────────────────────────── */
.primary-button-font {
    display: flex; min-width: 100px; min-height: var(--Button-button-h-w-min, 24px);
    padding: var(--size-125, 12px) var(--size-200, 20px); justify-content: center; align-items: center;
    gap: 0; border-radius: var(--medium, 27px);
    /* UAT #91: Nova's own button-medium token is font-weight 600; VDP spec wants medium (500). */
    font-weight: 500 !important;
}
html[data-theme=light] .primary-button-font { border: 1px solid var(--Color-Active-active, #1434CB); background: var(--Color-Active-active, #1434CB); }
html[data-theme=dark] .primary-button-font {
    border: 1px solid var(--Color-Active-active, #9AF900); background: var(--Color-Active-active, #9AF900);
    /* UAT #91: Nova's dark-mode button foreground resolves to #0A0A0A (--palette-default-surface-1), not pure black. */
    color: #000000 !important;
}

html[data-theme=light] .primary-button-font:hover,
html[data-theme=light] .primary-button-font:focus-visible {
    border-color: var(--vdp-active-hover, #173BE8);
    background: var(--vdp-active-hover, #173BE8);
}
html[data-theme=light] .primary-button-font:active {
    border-color: var(--vdp-active-pressed, #0F2595);
    background: var(--vdp-active-pressed, #0F2595);
}
html[data-theme=dark] .primary-button-font:hover,
html[data-theme=dark] .primary-button-font:focus-visible {
    border-color: var(--vdp-active-hover, #79D500);
    background: var(--vdp-active-hover, #79D500);
}
html[data-theme=dark] .primary-button-font:active {
    border-color: var(--vdp-active-pressed, #65B100);
    background: var(--vdp-active-pressed, #65B100);
}

/* Trailing icon reveal — Figma: hover/focus reaction, Smart Animate, ease-out 0.3s.
   Icon width/margin animate from 0 instead of the literal Figma label-width keyframe
   (58px->94px), since that value is specific to the "Get started" text length and
   would break for any other author-entered button label.
   Note: .primary-button-font's own `gap` was changed to 0 (was 8px) above, since
   flex `gap` reserves space between children regardless of width — leaving it at
   8px would show a persistent gap after the label even while this icon is
   collapsed to width:0. Spacing here is controlled entirely by this rule instead. */
.primary-button-font__icon {
    display: inline-flex;
    align-items: center;
    width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.3s ease-out, margin-left 0.3s ease-out, opacity 0.3s ease-out;
}
.primary-button-font:hover .primary-button-font__icon,
.primary-button-font:focus-visible .primary-button-font__icon {
    width: 16px;
    margin-left: 8px;
    opacity: 1;
}

/* ── Global Docs Body (reusable/content/docssection/global_docs) ─────────────
 * Moved from apps/vdp/components/reusable/content/docssection/global_docs/global_docs.html
 * NOTE: 229px matches the header left-nav column width used by
 * global_docs_header.html — intentionally NOT 300px (see project memory
 * "responsive-spec-audit" for the header/body width discrepancy this exposed).
 * This is now the single canonical copy — global_docs.html no longer carries
 * its own inline duplicate.
 * ─────────────────────────────────────────────────────────────────────────── */
.vdc-global-docs-body__layout {
    display: grid;
    grid-template-columns: 229px minmax(0, 1fr);
    align-items: start;
    width: 100%;
}
.vdc-global-docs-body__layout--portal { display: block; width: 100%; }
.vdc-global-docs-body__left {
    width: 229px;
    border-right: 1px solid var(--palette-default-border, #e0e0e0);
    align-self: stretch;
}
html[data-theme=dark] .vdc-global-docs-body__left { border-right-color: rgba(255, 255, 255, 0.08) !important; }
.vdc-global-docs-body__main { min-width: 0; width: 100%; }
.vdc-global-docs-body-row {
    display: flex;
    gap: 40px;
}
.vdc-global-docs-body-content { min-width: 0; width: 73.6%; overflow: hidden; }
.vdc-global-docs-body-content h2 { scroll-margin-top: 75px; }

.vdc-global-docs-on-this-page { width: 224px; flex-shrink: 0; align-self: stretch; }

@media (min-width: 481px) and (max-width: 768px) {
    .vdc-global-docs-on-this-page {
            width: 100%;
            margin-left: 0;
            margin-top: 24px;
        }
}

@media screen and (max-width: 768px) {
    .vdc-global-docs-body__layout { display: block; }
    .vdc-global-docs-body__left { display: none; }
}

@media screen and (max-width: 480px) {
    .vdc-global-docs-body-row {
    padding: 40px 20px;
    flex-direction: column-reverse;
    }
    .vdc-global-docs-on-this-page {
        width: 100%;
        margin-left: 0;
        margin-top: 0px;
    }
}

@media (min-width: 481px) and (max-width: 877px) {
    .vdc-global-docs-body-row {
        flex-direction: column-reverse;
        padding: 24px 70px;
    }
    .global-docs-header-row {
        padding: 40px 70px;
    }
}

@media (min-width: 878px) and (max-width: 1367px) {
    .vdc-global-docs-body-row {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 40px 20px;
    }
    .guides-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 20px;
        }
}
@media screen and (max-width: 1368px) {
     .guides-header .vdc-component-grid.bg-transparent {
            background: transparent;
            padding: 64px 25px;
        }
}

@media screen and (min-width: 1368px) {
    .vdc-global-docs-body-row {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 40px 0px;
    }
    .guides-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 0px;
    }
    .guides-header .vdc-component-grid.bg-transparent {
        background: transparent;
        padding: 100px 0px;
    }
}

@media screen and (min-width: 1042px) {
    .guides-container {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

/* Product-docs variant of the same body row (docs_overview_new.html reuses
   global_docs's markup with an extra .product-docs-body-row class) */
.product-docs-body-row .vdc-global-docs-body-content h2 { scroll-margin-top: 75px; }

/* ── Docs Landing Body (reusable/content/docssection/docs_landing_body) ──────
 * Moved from apps/vdp/components/reusable/content/docssection/docs_landing_body/docs_landing_body.html
 * ─────────────────────────────────────────────────────────────────────────── */
.vdc-docs-landing-body__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; width: 100%; }
.vdc-docs-landing-body__left { width: 260px; align-self: stretch; min-height: 100%; background: transparent; }
.vdc-docs-landing-body__portal { width: 100%; }
.vdc-docs-landing-body__main { min-width: 0; width: 100%; box-sizing: border-box; }
html[data-theme=dark] .vdc-docs-landing-body__main { background: var(--palette-default-surface-1, #0A0A0A); }
.vdc-docs-landing-body__main > * + * { margin-top: 120px; }
.vdc-docs-landing-body__main > div > * + * { margin-top: 32px; }
@media screen and (max-width: 768px) {
    .vdc-docs-landing-body__layout { display: block; }
    .vdc-docs-landing-body__left { display: none; }
}

/* ── Guides Header (reusable/structure/guides_header) ─────────────────────────
 * Moved from apps/vdp/components/reusable/structure/guides_header/guides_header.html
 * ─────────────────────────────────────────────────────────────────────────── */
.guides-header__layout { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; overflow: visible; }
.guides-header__text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.guides-header__deco { position: absolute; bottom: 0; right: -43px; width: 407px; height: 270px; pointer-events: none; z-index: 0; }
.guides-header__deco-img { width: 100%; height: auto; display: block; opacity: 0.85; user-select: none; }
/* ── Light/dark decorative image switching (Guides Page Header) ── */
.guides-header__deco-img--dark  { display: none; }
.guides-header__deco-img--light { display: block; }
html[data-theme=dark] .guides-header__deco-img--dark  { display: block; }
html[data-theme=dark] .guides-header__deco-img--light { display: none; }
.guides-header__deco-placeholder { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 11px; font-family: sans-serif; color: #999; font-style: italic; }
.guides-header.vdc-component-header-background.portal-docs,
html[data-theme=light] .guides-header.vdc-component-header-background.portal-docs {
    background: var(--vdp-surface-2, #f7f7f7) !important; border-bottom: 0px solid rgba(0, 0, 0, 0.08) !important;
    position: relative; padding: 100px 20px; overflow: hidden;
}
html[data-theme=dark] .guides-header.vdc-component-header-background.portal-docs {
    background: var(--Color-Surface-surface-2, #1A1A1A) !important;
    overflow: hidden;
    align-self: stretch;
    padding: 0px !important;
}
.guides-header__title {
    margin: 0 0 10px 0;
    color: var(--vdp-text, #000000);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-1, 40px) !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: var(--Typography-line-height-headline-1, 44px) !important;
    letter-spacing: var(--Typography-letter-spacing-medium, 0.5px) !important;
    word-break: break-word;

}
html[data-theme=dark] .guides-header__title { color: var(--vdp-text, #ffffff); }
.guides-header__description {
    margin: 0; color: var(--vdp-text-subtle, #4A4A4A); font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans"); font-size: var(--Typography-font-size-body-1, 18px) !important;
    font-style: normal; font-weight: 400 !important; line-height: var(--Typography-line-height-body-1, 28px) !important;
    letter-spacing: var(--Typography-letter-spacing-none, 0) !important; max-width: 900px; align-self: stretch;
}
html[data-theme=dark] .guides-header__description { color: var(--vdp-text-subtle, #cccccc); }
.guides-header .vdc-component-grid { display: block; margin: 0; padding: 0; width: 100%; }
.guides-header .vdc-component-grid.full-width .vdc-component-grid--width { max-width: 100%; margin: 0 auto; }
.guides-header .vdc-component-grid.full-width .vdc-component-grid--content { padding-left: 0; margin-right: 0; }
.guides-header .padding-top-medium    { padding-top:    48px !important; }
.guides-header .padding-bottom-medium { padding-bottom: 48px !important; }
@media screen and (max-width: 768px) {
    .guides-header__text { max-width: 100%; }
}

/* ── Docs Landing Header (reusable/structure/docs_landing_header) ─────────────
 * Moved from apps/vdp/components/reusable/structure/docs_landing_header/docs_landing_header.html
 * NOTE: .vdc-component-grid / .padding-top-medium / .padding-bottom-medium here
 * are scoped to .docs-landing-page__content (not left bare/global) — this
 * codebase already has several differently-scoped copies of these same class
 * names (guides-header at 48px, docs-overview-header-new at 36px), and a bare
 * global copy would leak into unrelated pages, possibly including legacy ones.
 * ─────────────────────────────────────────────────────────────────────────── */
html[data-theme=dark] .docs-landing-page__content { background: var(--palette-default-surface-1, #0A0A0A); }
.docs-landing-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 40px; align-items: start; width: 100%; }
.docs-landing-layout .docs-template-layout__left { width: 260px; max-width: 260px; min-width: 0; }
.docs-landing-layout .docs-template-layout__main { min-width: 0; width: 100%; }
.docs-landing-layout--portal { grid-template-columns: minmax(0, 1fr); }
.docs-landing-layout--portal .docs-template-layout__main { grid-column: 1; width: 100%; }
.docs-landing-hero { position: relative; overflow: visible; }
.docs-landing-hero__title {
    position: relative; z-index: 1; max-width: 620px; color: var(--vdp-active);
    font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-display-2, 60px); font-style: normal; font-weight: 500;
    line-height: var(--Typography-line-height-display-2, 62px); letter-spacing: var(--Typography-letter-spacing-none, 0);
}
.vdc-component-header-background.portal-docs { padding-bottom: 60px; }
.docs-landing-hero__subtitle {
    font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-body-1, 18px) !important; font-style: normal; font-weight: 400 !important;
    line-height: var(--Typography-line-height-body-1, 28px) !important; letter-spacing: var(--Typography-letter-spacing-none, 0);
    max-width: 700px; align-self: stretch;
}
html[data-theme=light] .docs-landing-hero__subtitle { color: var(--vdp-text-subtle, #4A4A4A); }
html[data-theme=dark] .docs-landing-hero__subtitle { color: var(--vdp-text-subtle, #CCC); }
.docs-landing-hero__deco-img {
    width: 609.906px;
    height: 520px;
    position: absolute;
    right: -230.906px;
    bottom: -305px;
}

@media screen and (min-width: 1725px) {
    .docs-landing-hero__deco-img {
        width: 100%;
        right: -410px;
     }
}

/* Light/dark split — both images render in the DOM (see docs_landing_header.html),
   CSS toggles which one is visible. Both rules explicitly theme-scoped (not a
   bare default) to avoid the specificity-tie regression found in the MCP banner. */
html[data-theme=light] .docs-landing-hero__deco-img--dark  { display: none; }
html[data-theme=dark]  .docs-landing-hero__deco-img--light { display: none; }
.docs-landing-page__content .vdc-component-header-background.portal-docs,
html[data-theme=light] .docs-landing-page__content .vdc-component-header-background.portal-docs {
    background: #ffffff !important;
    border-bottom: none !important;
    overflow: visible !important;
    position: relative;
}
.docs-landing-page__content .portal-docs .docs-landing-layout { align-items: stretch; }
.docs-landing-page__content .portal-docs .docs-template-layout__left {
    background: transparent !important; color: #333333; border-right: none !important;
    margin-left: 0; margin-bottom: 0; margin-top: 0; padding: 1rem 1rem 1rem 1rem;
}
.docs-landing-page__content .portal-docs .docs-template-layout__left a { color: #333333; }
.docs-landing-page__content .vdp-docs-left-nav { display: flex; flex-direction: column; height: 100%; }
.docs-landing-page__content .vdp-docs-left-nav__list { flex: 1; }
.docs-landing-page__content .vdp-docs-left-nav__separator { background: #e0e0e0; margin: 0; width: 100%; }
html[data-theme=dark] .docs-landing-page__content .vdc-component-header-background.portal-docs {
    background: var(--palette-default-surface-1, #0A0A0A) !important; border-bottom: none !important;
}
html[data-theme=dark] .docs-landing-page__content .portal-docs .docs-template-layout__left {
    background: transparent !important; color: var(--palette-default-text, #ffffff) !important; border-right: none !important;
}
html[data-theme=dark] .docs-landing-page__content .portal-docs .docs-template-layout__left a { color: var(--palette-default-active, #BDEAFF) !important; }
html[data-theme=dark] .docs-landing-page__content .vdp-docs-left-nav__separator { background: rgba(255, 255, 255, 0.08) !important; }
@media screen and (max-width: 768px) {
    .docs-landing-layout { display: block; }
    .docs-landing-layout .docs-template-layout__left { width: 100%; max-width: 100%; margin-bottom: 24px; }
}
@media screen and (min-width: 1360px) {
    .docs-landing-page__content {
     max-width: 1400px;
     margin: 0 auto;
     }
}
.docs-landing-page__content .vdc-component-grid { display: block; margin: 0; padding: 0; width: 100%; }
.docs-landing-page__content .vdc-component-grid.full-width .vdc-component-grid--width { margin: 0 1.25rem 0 0; max-width: 100%; }
.docs-landing-page__content .vdc-component-grid.full-width .vdc-component-grid--content { margin-right: 0.3125rem; }
.docs-landing-page__content .vdc-component-grid.bg-transparent { background: transparent; }
.docs-landing-page__content .padding-top-medium    { padding-top:    36px !important; }
.docs-landing-page__content .padding-bottom-medium { padding-bottom: 36px !important; }

/* ── Docs Landing Quicklinks (homepagesection/docs-landing-quicklinks) ────────
 * Moved from apps/vdp/components/homepagesection/docs-landing-quicklinks/docs-landing-quicklinks.html
 * ─────────────────────────────────────────────────────────────────────────── */
.docs-landing-quicklinks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quicklinks-font {
    font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-body-2, 14px); font-style: normal; font-weight: 500;
    line-height: var(--Typography-line-height-body-2, 24px); letter-spacing: var(--Typography-letter-spacing-none, 0);
    text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none;
    text-decoration-thickness: auto; text-underline-offset: auto; flex: 1 0 0; text-underline-position: from-font;
}
html[data-theme=light] .quicklinks-font { color: var(--vdp-text, #000); }
html[data-theme=dark] .quicklinks-font { color: var(--vdp-text, #FFF); }
.jump-links-font {
    font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-1, 40px); font-style: normal; font-weight: 500;
    line-height: var(--Typography-line-height-headline-1, 44px); letter-spacing: var(--Typography-letter-spacing-medium, 0.5px);
    max-width: 1000px; align-self: stretch;
}
.docs-landing-quicklinks__col {
    border: 1px solid var(--vdp-border, rgba(0, 0, 0, 0.1)); border-radius: 20px; padding: 20px;
    backdrop-filter: blur(7.5px); background: var(--vdp-surface-4, rgba(244, 244, 244, 0.40));
}
.docs-landing-quicklinks__col-heading {
    font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-2, 25px); font-style: normal; font-weight: 500;
    line-height: var(--Typography-line-height-headline-2, 33px); letter-spacing: var(--Typography-letter-spacing-none, 0);
}
.docs-landing-quicklinks__links { list-style: none; margin: 0; padding: 0; }
.docs-landing-quicklinks__links li { margin-bottom: 8px; }
@media screen and (max-width: 768px) { .docs-landing-quicklinks__grid { grid-template-columns: 1fr; } }

/* ── Docs Landing Categories (homepagesection/docs-landing-categories) ────────
 * Moved from apps/vdp/components/homepagesection/docs-landing-categories/docs-landing-categories.html
 * ─────────────────────────────────────────────────────────────────────────── */
/* Gap above this section, separating it from the preceding "Jump in and start
   building" (docs-landing-quicklinks) section — neither component had any
   spacing between them. Reusing the 60px value already established as this
   page's section-spacing convention (see .browse-category-gap below). */
.docs-landing-categories { padding: 0; margin-top: 120px; }
.browse-category-gap { margin-bottom: 60px; }
.browse-category-font {
    font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-1, 40px); font-style: normal; font-weight: 500;
    line-height: var(--Typography-line-height-headline-1, 44px); letter-spacing: var(--Typography-letter-spacing-medium, 0.5px);
    max-width: 1000px; align-self: stretch;
}
html[data-theme=dark] .browse-category-font { color: var(--vdp-text, #FFF); }
html[data-theme=light] .browse-category-font { color: var(--vdp-text, #000); }
.docs-landing-categories__container { max-width: 1200px; margin: 0 auto; }
.docs-landing-categories__grid { display: flex; flex-direction: column; gap: 40px; }

/* ── Docs Category Card (homepagesection/docs-category-card) ──────────────────
 * Moved from apps/vdp/components/homepagesection/docs-category-card/docs-category-card.html
 * and .../docs-category-card/link-item/link-item.html
 * ─────────────────────────────────────────────────────────────────────────── */
.docs-category-card__icon { width: 60px; height: 60px; object-fit: contain; }
.browse-category-sections-font {
    font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-2, 25px); font-style: normal; font-weight: 500;
    line-height: var(--Typography-line-height-headline-2, 33px); letter-spacing: var(--Typography-letter-spacing-none, 0);
}
html[data-theme=dark] .browse-category-sections-font { color: var(--vdp-text, #FFF); }
html[data-theme=light] .browse-category-sections-font { color: var(--vdp-text, #000); }
.docs-category-card__header { scroll-margin-top: 80px; }
.docs-category-card__header { flex-direction: column !important; }
.docs-category-card__icon--dark { display: none; }
html[data-theme=dark] .docs-category-card__icon--light { display: none; }
html[data-theme=dark] .docs-category-card__icon--dark { display: inline-block; }
.docs-category-card__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; }
@media screen and (max-width: 960px) { .docs-category-card__links { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px) { .docs-category-card__links { grid-template-columns: 1fr; } }
.docs-category-card__link-item { display: flex; align-items: center; gap: 4px; }
.docs-category-card__link {
    font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-body-2, 14px); font-style: normal; font-weight: 500;
    line-height: var(--Typography-line-height-body-2, 24px); letter-spacing: var(--Typography-letter-spacing-none, 0);
    text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none;
    text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; max-width: 290px;
}
html[data-theme=light] .docs-category-card__link { color: var(--vdp-text, #000); }
html[data-theme=dark] .docs-category-card__link { color: var(--vdp-text, #FFF); }
.docs-category-card__link:hover { text-decoration: underline; }
.docs-category-card__link-item .v-typography-color-subtle { color: var(--vdp-text-subtle, #767676); font-size: 0.75rem; display: inline-flex; align-items: center; }

/* ── MCP Banner — homepage variant (homepagesection/mcp-banner) ──────────────
 * Moved from apps/vdp/components/homepagesection/mcp-banner/mcp-banner.html
 * The dynamic --nova-btn-tertiary-arrow-* :root vars stay inline in that file
 * (HTL-generated asset URLs — cannot live in a static DAM stylesheet).
 * ─────────────────────────────────────────────────────────────────────────── */
html[data-theme=light] .nova-mcp__image--dark  { display: none; }
html[data-theme=dark]  .nova-mcp__image--light { display: none; }
.nova-mcp__image-placeholder { color: var(--palette-default-text-subtle, #767676); font-size: 0.875rem; }

/* ── Numbered Steps additions (homepagesection/numbered-steps) ────────────────
 * Moved from apps/vdp/components/homepagesection/numbered-steps/numbered-steps.html
 * Extends the base .nova-steps__step rules already defined above (homepage
 * section). The original inline copy also had a leftover
 * ".number-style { color: hotpink !important; }" debug rule that was
 * overriding the theme-aware active color on every step number — removed
 * here rather than carried forward, since hotpink matches no design token
 * anywhere in this system and was clearly an accidental leftover.
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-steps__grid { align-items: stretch !important; }
.nova-steps__step { display: flex !important; flex-direction: column !important; min-height: 0; }
.nova-steps__step .number__container { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0; padding: 0px; }

/* ── Nova Grid Layout — equal-width columns (redesign/ia-grid-layout) ────────
 * Moved from apps/vdp/components/redesign/ia-grid-layout/ia-grid-layout.html
 * ─────────────────────────────────────────────────────────────────────────── */
.nova-grid-layout {
    position: relative; width: 100%; box-sizing: border-box;
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: stretch !important; align-content: flex-start !important;
}
.nova-grid-layout__col {
    flex: 1 1 0%; min-width: 0 !important; box-sizing: border-box;
    display: flex !important; flex-direction: column !important; align-self: stretch !important;
}
.nova-grid-layout__col-parsys {
    flex: 1 1 auto !important; display: flex !important; flex-direction: column !important;
    width: 100%; min-width: 0; min-height: var(--size-500, 60px);
}
.nova-grid-layout__col > .section,
.nova-grid-layout__col-parsys > .section {
    flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; width: 100%; min-width: 0;
}
.nova-col-gap--xsmall  { gap: 18px !important; }
.nova-col-gap--small   { gap: 24px !important; }
.nova-col-gap--medium  { gap: 36px !important; }
.nova-col-gap--large   { gap: 48px !important; }
.nova-col-gap--xlarge  { gap: 64px !important; }
.nova-col-gap--xxlarge { gap: 96px !important; }
.nova-grid-layout--contained { max-width: 1400px; margin-left: auto; margin-right: auto; }
.nova-grid-layout--narrow    { max-width: 960px;  margin-left: auto; margin-right: auto; }
.nova-grid-layout--wide      { max-width: 1440px; margin-left: auto; margin-right: auto; }
.nova-grid-layout__edit-label {
    flex: 0 0 100%; background: var(--vdp-info-surface, #f0f4ff); border: 1px dashed var(--vdp-info-graphics, #4a86e8);
    padding: var(--size-25, 3px) var(--size-75, 8px); font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--vdp-body-3-font-size, 11px); color: var(--vdp-info-text, #1155cc); box-sizing: border-box;
}
.nova-grid-layout__col-label {
    background: var(--vdp-info-surface, #f0f4ff); border: 1px dashed var(--vdp-info-graphics, #4a86e8);
    padding: var(--size-15, 2px) var(--size-50, 6px); margin-bottom: var(--size-30, 4px);
    font-family: var(--font-family-font-family-1, "Work Sans"); font-size: var(--vdp-ui-label-small-font-size, 10px);
    color: var(--vdp-info-text, #1155cc); text-align: center;
}
@media screen and (max-width: 768px) { .nova-grid-layout__col { flex: 1 1 calc(50% - 12px) !important; } }
@media screen and (max-width: 480px) { .nova-grid-layout__col { flex: 1 1 100% !important; } }

/* ── API Reference Header (reusable/structure/new_api_reference_header) ──────
 * Moved from apps/vdp/components/reusable/structure/new_api_reference_header/new_api_reference_header.html
 * ─────────────────────────────────────────────────────────────────────────── */
.api-reference-header.vdc-component-header-background.portal-docs,
html[data-theme=light] .api-reference-header.vdc-component-header-background.portal-docs {
    background: var(--vdp-surface-2, #f7f7f7) !important; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    position: relative; 
    overflow: hidden;
    padding-bottom: 0px !important;
}
html[data-theme=dark] .api-reference-header.vdc-component-header-background.portal-docs {
    background: var(--Color-Surface-surface-2, #1A1A1A) !important; 
    border-bottom: 0px solid rgba(255, 255, 255, 0.35) !important;
    padding-bottom: 0px !important;
}
.api-reference-header-row { display: grid; align-items: stretch; width: 100%; align-self: center; }
.api-reference-header-row--portal { grid-template-columns: minmax(0, 1fr); }
.api-reference-header__left {
    width: 229px; border-right: 0.76px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.76px 2.29px 0 rgba(0, 0, 0, 0.05);
    padding: 1rem; overflow: hidden; align-self: stretch;
}
html[data-theme=light] .api-reference-header__left { background: var(--vdp-surface-1, #ffffff); color: var(--vdp-text, #333333); }
html[data-theme=dark] .api-reference-header__left { background: var(--vdp-surface-1, #000000); border-right-color: #FFFFFF59; color: var(--vdp-text, #ffffff); }
html[data-theme=dark] .api-reference-header__left a { color: var(--vdp-text, #ffffff); }
.api-reference-header__content { min-width: 0; }
html[data-theme=dark] .api-reference-header__content { background: var(--Color-Surface-surface-2, #1A1A1A); }
.api-reference-header__layout { display: flex; align-items: center; justify-content: space-between; position: relative; overflow: visible; }
.api-reference-header__text { flex: 1; min-width: 0; max-width: 100%; position: relative; z-index: 1; }
.api-reference-header__title {
    margin: 0 0 10px 0; color: var(--Color-Text-text, #000); font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans"); font-size: var(--Typography-font-size-headline-1, 40px) !important;
    font-style: normal; font-weight: 500 !important; line-height: var(--Typography-line-height-headline-1, 44px) !important;
    letter-spacing: var(--Typography-letter-spacing-medium, 0.5px) !important; align-self: stretch;max-width: inherit !important;
    word-break: break-word;
}
html[data-theme=dark] .api-reference-header__title { color: var(--vdp-text, #ffffff); }
.api-reference-header__description {
    color: var(--Color-Text-text, #000); font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans"); font-size: var(--Typography-font-size-body-1, 18px) !important;
    font-style: normal; font-weight: 400 !important; line-height: var(--Typography-line-height-body-1, 28px) !important;
    letter-spacing: var(--Typography-letter-spacing-none, 0); max-width: 68%;
}
html[data-theme=dark] .api-reference-header__description { color: var(--vdp-text-subtle, #cccccc); }
.api-reference-header__deco {
    position: absolute; right: -139px; top: 83%; transform: translateY(-50%); width: 407px; height: 270px;
    pointer-events: none; z-index: 0; overflow: hidden; aspect-ratio: 101 / 67;
}
.api-reference-header__deco-img { width: 310.9px; height: 206.25px; object-fit: cover; display: block; user-select: none; }
/* ── Light/dark decorative image switching (IA API Reference Page Header) ── */
.api-reference-header__deco-img--dark  { display: none; }
.api-reference-header__deco-img--light { display: block; }
html[data-theme=dark] .api-reference-header__deco-img--dark  { display: block; }
html[data-theme=dark] .api-reference-header__deco-img--light { display: none; }
.api-reference-header__deco-placeholder { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 11px; font-family: sans-serif; color: #999; font-style: italic; }
@media screen and (max-width: 768px) {
    .api-reference-header-row { grid-template-columns: minmax(0, 1fr); }
    .api-reference-header__left { display: none; }
    .api-reference-header__text { max-width: 100%; }
    .api-reference-header__deco { height: auto; right: -35px; top: 60%;}
    .api-reference-header__deco-img { width: 100%; height: auto; }
}

/* ── API Reference Body (reusable/content/docssection/new_api_reference) ─────
 * Moved from apps/vdp/components/reusable/content/docssection/new_api_reference/new_api_reference.html
 * ─────────────────────────────────────────────────────────────────────────── */
.api-reference-body__layout { display: grid; grid-template-columns: 229px minmax(0, 1fr); align-items: start; width: 100%; }
.api-reference-body__layout--portal { display: block; width: 100%; }
.api-reference-body__left { width: 229px; border-right: 0.76px solid rgba(0, 0, 0, 0.1); align-self: stretch; }
html[data-theme=dark] .api-reference-body__left { border-right-color: #FFFFFF59; }
.api-reference-body .vdc-global-docs-body__main { min-width: 0; width: 100%; }
.api-reference-body .vdc-api-ref-body-row {
    padding: 64px 0px; box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .api-reference-body__layout { display: block; }
    .api-reference-body__left { display: none; }
    .api-reference-body .vdc-api-ref-body-row { padding: 32px 25px; }
}
@media screen and (max-width: 480px) {
    .api-reference-body .vdc-api-ref-body-row { padding: 24px 20px; max-width: 293px; }
}

/* ── Guides Without Left Nav (reusable/content/docssection/guides_without_leftnav) ──
 * Moved from apps/vdp/components/reusable/content/docssection/guides_without_leftnav/guides_without_leftnav.html
 * ─────────────────────────────────────────────────────────────────────────── */
.guides-without-leftnav .docs-template-layout__left { display: none; }
.guides-without-leftnav .docs-template-layout { grid-template-columns: minmax(0, 1fr); }
.guides-overview h2 { scroll-margin-top: 75px; }
.vdc-docs-right-nav .vdc-on-this-page { position: sticky; top: 120px; padding-left: 10px; border-left: 1px solid var(--vdp-border, rgba(0, 0, 0, 0.12)); }
html[data-theme=dark] .vdc-docs-right-nav .vdc-on-this-page { border-left-color: #FFFFFF59; }
html[data-theme=dark] .vdc-docs-right-nav .vdc-on-this-page .vdc-on-this-page__title { color: var(--vdp-text-subtle, rgba(255, 255, 255, 0.5)); }
html[data-theme=light] .vdc-docs-right-nav .vdc-on-this-page .vdc-on-this-page__title { color: var(--vdp-text, #000) !important; }
.vdc-docs-right-nav .vdc-on-this-page__list a { color: var(--vdp-text, #000); font-feature-settings: 'liga' off, 'clig' off; font-family: var(--font-family-font-family-1, "Work Sans"); font-size: var(--Typography-font-size-ui-label, 12px); font-style: normal; font-weight: 400 !important; line-height: var(--Typography-line-height-ui-label, 16px); letter-spacing: var(--Typography-letter-spacing-none, 0); }
.vdc-docs-right-nav .vdc-on-this-page__list a.active { color: var(--vdp-active, #1434cb); font-weight: 600; }
.vdc-docs-right-nav .vdc-on-this-page__list a.active::before { content: ""; position: absolute; left: -21px; top: 0; bottom: 0; width: 2px; background-color: var(--vdp-active, #1434cb); border-radius: 2px; }
html[data-theme=dark] .vdc-docs-right-nav .vdc-on-this-page__list a { color: var(--vdp-text, #FFF); }
html[data-theme=dark] .vdc-docs-right-nav .vdc-on-this-page__list a.active { color: var(--vdp-active, #9AF900); }
html[data-theme=dark] .vdc-docs-right-nav .vdc-on-this-page__list a.active::before { background-color: var(--vdp-active, #9AF900); }
@media screen and (max-width: 881px) { .vdc-docs-right-nav { max-width: 100% !important; display: block !important; } }
@media screen and (max-width: 481px) {

.vdc-docs-right-nav { max-width: 100% !important; display: block !important; }

.guides-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    }
}

.sling-grid--fluid { display: block; margin: auto; width: 100%; }
.guides-without-leftnav-body { box-sizing: border-box; }
.sling-grid--fluid .row { display: flex; box-sizing: border-box; flex-direction: row; flex-wrap: wrap; width: 100%; }
.sling-grid--fluid .col--sm-4  { flex: 0 0 100%;    max-width: 100%;    padding: 6px 10px; }
.sling-grid--fluid .col--md-3  { flex: 0 0 25%;     max-width: 25%;     padding: 6px 10px; }
.sling-grid--fluid .col--md-9  { flex: 0 0 75%;     max-width: 75%;     padding: 6px 10px; }
.sling-grid--fluid .col--lg-3  { flex: 0 0 25%;     max-width: 25%;     padding: 6px 10px; }
.sling-grid--fluid .col--lg-9  { flex: 0 0 75%;     max-width: 75%;     padding: 6px 10px; }
.sling-grid--fluid .col--xg-2  { flex: 0 0 16.66%;  max-width: 16.66%;  padding: 6px 10px; }
.sling-grid--fluid .col--xg-10 { flex: 0 0 83.33%;  max-width: 83.33%;  padding: 6px 10px; }
.guides-container { position: relative; }
.guides-container .guides-overview { padding: 0px 10px 0px 0px !important; }

/* Feedback #121: content/anchor-menu split was 83.33%/16.66% of the generic
 * .col--xg-10/.col--xg-2 grid classes above — once the nested .guides-overview
 * (28px right-padding) and .vdc-on-this-page (10px left-padding) insets are
 * included, that rendered as ~785px content / ~58px gap / ~137px menu inside
 * .guides-container's 1000px max-width, leaving the anchor-menu column far too
 * narrow and wrapping its link labels onto multiple short lines. Figma expects
 * 736px content / 40px gap / 224px menu. Retargeting the two percentages (and
 * reducing .guides-overview's right-padding above from 28px to 10px) spreads
 * the 40px gap evenly across all four contributing paddings — 10px each from
 * .col--xg-10's own right-padding, .guides-overview's right-padding, .col--xg-2's
 * own left-padding, and .vdc-on-this-page's left-padding (line ~3251, unchanged)
 * — while flushing both outer edges to 0 to match the Figma frame exactly.
 * Scoped under .guides-container so the shared .col--xg-10/.col--xg-2 grid
 * utilities are untouched everywhere else they're used. */
.guides-container .col--xg-10 {
    flex: 0 0 75.6%;
    max-width: 75.6%;
    padding: 6px 10px 6px 0;
}
.guides-container .col--xg-2 {
    flex: 0 0 24.4%;
    max-width: 24.4%;
    padding: 6px 0 6px 10px;
}

@media screen and (min-width: 768px)  {
    .guides-container .guides-overview {
        padding: 56px 10px 56px 0;
        }
  }
@media screen and (min-width: 1024px) { .guides-container .guides-overview { padding-left: 10px; } }

/* ═══════════════════════════════════════════════════════════════════════════
 * LARGE-SCREEN CONTENT CAPS (min-width: 1400px)
 * Below 1400px, main content is left to fill its natural available width
 * (bounded by the left-nav/"Right section" grid columns already in place).
 * At 1400px and above — covering the 1440px Figma desktop reference and any
 * wider/ultrawide monitor — content is explicitly capped so it stops growing
 * indefinitely. Caps are inclusive of the adjacent "On this page" nav where
 * one exists (the row is capped, not the content column alone), per Figma.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1919px) {
    .docs-overview-header-new .docs-template-layout__main {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    .api-reference-header__content {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    .product-docs-header-content {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    .global-docs-header__content {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 769px) {

    .guides-header__layout {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

}

@media screen and (max-width: 375px) {
.api-reference-header-row {
    padding: 64px 25px;
}
.global-docs-header-row {
    display: flex;
    max-width: 1120px;
    padding-top: 30px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    align-self: stretch;
}
}

@media (min-width: 376px) and (max-width:768px) {

.api-reference-header-row {
    padding: 64px 25px;
}

}

@media (min-width: 769px) and (max-width: 1423px) {
    .api-reference-header-row {
        padding: 64px 25px;
    }
}

@media (min-width: 1424px) and (max-width:1919px) {

.api-reference-header-row {
    padding: 100px 78px;
}

}

@media screen and (min-width: 1920px) {

.api-reference-header-row {
    padding: 48px 0px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.global-docs-header-row {
    padding: 64px 0px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.product-docs-header-content {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

}

@media (min-width: 769px) and (max-width: 1340px) {
    .api-reference-body .vdc-api-ref-body-row {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 64px 24px;
    }
}

@media screen and (min-width: 1340px) {
    .api-reference-body .vdc-api-ref-body-row {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding :64px 0px
    }

   .product-docs-header-content {
       max-width: 1000px;
       margin-left: auto;
       margin-right: auto;
   }
}

/* ── Mobile (480px) — Figma: content padding 20px each side, max-width 293px ── */
@media screen and (max-width: 480px) {
    .global-docs-header__content {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .docs-overview-header-new .docs-template-layout__main {
        padding:30px 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .guides-container .guides-overview {
        /* padding: 0px 28px 0px 0px !important; */
        max-width: 100% !important;
        padding: 0px 20px;
    }
}

@media (min-width: 481px) and (max-width: 877px) {
    .docs-overview-header-new .docs-template-layout__main {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 40px 70px;
    }
    .guides-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 20px;
        }
}

@media (min-width: 878px) and (max-width: 1362px) {
    .docs-overview-header-new .docs-template-layout__main {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 64px 20px;
    }
}

@media screen and (min-width: 1363px) {
    .docs-overview-header-new .docs-template-layout__main {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 64px 0px;
    }
}

/* ============================================================
   CONTENT CARD — image light / dark switching (Image Card type)
   Default (dark mode): show dark image, hide light
   ============================================================ */
.v-content-card-image--light {
    display: none;
}

html[data-theme=light] .v-content-card-image--dark {
    display: none;
}

html[data-theme=light] .v-content-card-image--light {
    display: block;
}

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */

/* Section background — transparent so page gradient shows through */
.ia-cards {
    background: transparent;
    padding: 40px 0px 0px 0px;
}

html[data-theme=dark] .ia-cards {
    background: transparent;
}

/* ── VDP token overrides for nova v-content-card ── */
.ia-cards .v-content-card {
    --v-content-card-border: 1px solid var(--vdp-border);
    --v-content-card-border-radius: 18px;
}

/* ── Clickable card: suppress v-link underline that propagates to title/desc ──
   The AEM component wraps card content in <a class="v-content-card-clickable v-link">.
   Nova's a.v-content-card rule doesn't fire here (outer element is a div),
   so we explicitly remove underline on the anchor and its children.            */
.ia-cards .v-content-card-clickable.v-link {
    text-decoration: none;
    --v-link-text-decoration: none;
}


.ia-cards .v-content-card-clickable .v-content-card-title,
.ia-cards .v-content-card-clickable .v-content-card-subtitle {
    text-decoration: none;
}

html[data-theme=dark] .ia-cards .v-content-card {
    background: var(--Color-Surface-surface-4, rgba(99, 99, 99, 0.30));
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
    border-radius: 18px;
    overflow: hidden;
}

html[data-theme=light] .ia-cards .v-content-card {
    /* Figma samples this fill as rgb(245,245,245) @ 40% opacity, not white
       @ 60% — confirmed via Plugin API inspection of the clickable card
       instance in the light-mode frame. */
    background: rgba(246, 246, 246, 0.40);
    border: 1px solid rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
    border-radius: 18px;
    overflow: hidden;
}

/* ── Clickable card anchor — Dark mode glassmorphism surface (all clickable cards) ──
   Selector uses `a.v-content-card-clickable` (with element type) so it beats
   Nova's base `a` tag resets that override class-only selectors.               */
html[data-theme=dark] .ia-cards.nova-grid--auto .nova-grid__cell a.v-content-card-clickable {
    display: flex;
    width: 100%;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

/* ============================================================
   ALL CAPABILITY CARDS — Dark mode overrides
   Applies to every card in the capability cards grid (all rows).
   Scoped without .visa-developer-center so styles work on the
   published portal where the Angular SPA strips that body class.
   ============================================================ */

/* Card body */
html[data-theme=dark] .ia-cards.nova-grid--auto .nova-grid__cell .v-content-card-body {
    display: flex;
    padding: var(--size-175, 18px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-125, 12px);
    align-self: stretch;
    background: transparent;
}

/* html[data-theme=dark] .icon-card-dark {
    background: var(--Color-Surface-surface-4, rgba(99, 99, 99, 0.80));
} */

/* Icon container */
html[data-theme=dark] .ia-cards.nova-grid--auto .nova-grid__cell .v-mb-16 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}

.ia-cards .v-content-card > div:has(> .v-mb-16) {
    padding-top: var(--v-content-card-padding-block);
    padding-inline: var(--v-content-card-padding-inline);
}

/* Headline */
html[data-theme=dark] .ia-cards.nova-grid--auto .nova-grid__cell .v-content-card-title {
    color: var(--Color-Text-text, #FFF);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-3, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-headline-3, 26px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
}

/* Description */
html[data-theme=dark] .ia-cards.nova-grid--auto .nova-grid__cell .v-content-card-subtitle {
    color: var(--Color-Text-text-subtle, #CCC);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-line-height-body-2, 24px);
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
    flex: 1 0 0;
}

/* ── Icon: size and light/dark switching ── */
.ia-cards .vdp-card-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
}

.ia-cards.learning-hub-cards .vdp-card-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Light mode: show light icon, hide dark icon */
.ia-cards .vdp-card-icon--dark {
    display: none;
}
.ia-cards .vdp-card-icon--light {
    display: block;
}

/* Dark mode: show dark icon, hide light icon */
html[data-theme=dark] .ia-cards .vdp-card-icon--dark {
    display: block;
}
html[data-theme=dark] .ia-cards .vdp-card-icon--light {
    display: none;
}

/* ── Icon switching — unscoped (portal fallback: no .ia-cards ancestor) ── */
.vdp-card-icon--dark  { display: none; }
.vdp-card-icon--light { display: block; }
html[data-theme=dark] .vdp-card-icon--dark  { display: block; }
html[data-theme=dark] .vdp-card-icon--light { display: none; }

/* ── C3: Whole-card hover state ── */
.ia-cards .v-content-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.ia-cards .v-content-card:hover {
    transform: translateY(-3px);
}

html[data-theme=dark] .ia-cards .v-content-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.100);
    border-color: rgba(255, 255, 255, 0.50);
}

html[data-theme=light] .ia-cards .v-content-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.100);
    border-color: rgba(0, 0, 0, 0.18);
}

.ia-cards.nova-grid--auto .nova-grid__cell .v-content-card:hover .v-content-card-title {
    color: var(--palette-default-active-hover);
}

/* ── C4: Image card — constrain container so object-fit:cover works ──
 * aspect-ratio matches the illustration SVGs' native viewBox (424x300),
 * not an arbitrary 16:9 — the old 16:9 ratio was ~26% wider than the
 * artwork, so object-fit:cover scaled/cropped it unevenly and sliced
 * asymmetrically into the illustration's own rounded-corner mockup
 * graphic, making the radius look inconsistent from card to card. */
.ia-cards .v-content-card-image {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 424 / 300;
}

.ia-cards .v-content-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Capability cards section background — transparent so page gradient shows through ── */
.vdp-capability-cards {
    background: transparent;
    padding: 40px 32px;
}
html[data-theme=dark] .vdp-capability-cards {
    background: transparent;
}

/* ── Clickable-card action extension — mirrors v-content-card-body padding ── */
.vdp-card-body-ext {
    padding-block-end: var(--v-content-card-padding-block);
    padding-inline: var(--v-content-card-padding-inline);
    padding-left: 20px;
    flex-shrink: 0;
}

/* ── Card title — VDP/Headline 3 ── */
.text-view {
    text-decoration: none !important;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-headline-3, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-headline-3, 26px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
}
html[data-theme=light] .text-view { color: var(--Color-Text-text, #000); }
html[data-theme=dark]  .text-view { color: var(--Color-Text-text, #FFF); }

/* ── Card description — VDP/Body 2 ── */
.text-view-description {
    flex: 1 0 0;
    font-feature-settings: 'liga' off, 'clig' off !important;
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
    font-size: var(--Typography-font-size-body-2, 14px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--Typography-line-height-body-2, 24px) !important;
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px) !important;
}
html[data-theme=light] .text-view-description { color: var(--Color-Text-text-subtle, #4A4A4A); }
html[data-theme=dark]  .text-view-description { color: var(--Color-Text-text-subtle, #CCC); }

/* ── Footer links ── */
.vdp-card-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.vdp-card-footer__link {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ── CTA "Link with Arrow" style (content-card ctaStyle=link) ──────────────
 * Figma "Visit ... MCP →" pattern: plain text link, no pill background.
 * display/justify-content mirror .v-content-card-title (the headline row
 * right above it) so both arrows land on the same right-aligned column
 * instead of the arrow sitting immediately after the label text.
 * ─────────────────────────────────────────────────────────────────────── */
.vdp-card-cta__link {
    display: flex !important;
    align-items: center;
    width: 100%;
    font-size: 0.975rem;
    font-weight: 500;
    text-decoration: none;
    margin-left: -3px;
    white-space: nowrap;
}
/* Pushes just the arrow to the far edge — robust regardless of how the
   label text node behaves as a flex item (unlike justify-content: space-between,
   which depends on exactly 2 evenly-treated flex items). */
.vdp-card-cta__link .vdp-card-cta__arrow {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-inline-start: auto;
    color: currentColor;
}
.vdp-card-cta__link .vdp-card-cta__arrow svg { display: block; fill: currentColor; }

.vdp-card-cta__link:hover,
.vdp-card-cta__link:focus-visible {
    text-decoration: none;
}

html[data-theme=dark] .vdp-card-cta__link:not(.vdp-card-cta__link--secondary) {
    color: var(--vdp-text, #ffffff);
}
html[data-theme=dark] .vdp-card-cta__link:not(.vdp-card-cta__link--secondary):hover {
    color: var(--vdp-active, #9AF900);
}
html[data-theme=light] .vdp-card-cta__link:not(.vdp-card-cta__link--secondary) {
    color: var(--vdp-text, #000000);
}
html[data-theme=light] .vdp-card-cta__link:not(.vdp-card-cta__link--secondary):hover {
    color: var(--vdp-active, #1434CB);
}

.vdp-card-cta__link--secondary {
    color: var(--vdp-text-subtle, #CCCCCC);
}

/* ============================================================
   CAPABILITY CARDS — RESPONSIVE
   ============================================================ */
@media screen and (max-width: 768px) {
    .ia-cards {
        padding: 32px 16px;
    }
}

@media screen and (max-width: 480px) {
    .ia-cards {
        padding: 32px 16px;
    }
}