/**
 * ia-homepage.css
 * VDP IA Homepage Stylesheet — served from AEM DAM at /content/dam/vdp/ia/styles/ia-homepage.css
 * Custom styles for the New Homepage template.
 * Uses nova-styles.css utility classes where possible; this file
 * covers layout, spacing, and the CSS-generated decorative backgrounds
 * that nova-styles.css does not provide.
 */

/* ============================================================
   IA HEADLINE
   ============================================================ */
.nova-headline.nova-align--center .nova-headline__inner {
    justify-content: center;
}

.nova-headline.nova-align--center .nova-headline__title {
    text-align: center;
}

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

.nova-headline.nova-align--right .nova-headline__title {
    text-align: right;
}

.nova-headline.nova-headline--section {
    padding-block: 60px;
    max-width: 1400px;
    margin-inline: auto;
}

@media screen and (max-width: 768px) {
    .nova-headline.nova-headline--section {
        padding-inline: 24px;
    }
}

/* ============================================================
   NOVA HERO — decoration light / dark switching
   Default (dark mode): show dark decoration, hide light
   ============================================================ */
.nova-hero__decoration--light {
    display: none;
}

html[data-theme=light] .nova-hero__decoration--dark {
    display: none;
}

html[data-theme=light] .nova-hero__decoration--light {
    display: block;
}

/* ============================================================
   NOVA HERO
   ============================================================ */
.nova-hero {
    overflow: visible;
    background-color: transparent;
    position: relative;
    align-items: flex-start;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 100px 0;
}

/* Decoration images — left and right ASCII art overlays */
.nova-hero__decoration {
    position: absolute;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.nova-hero__decoration--left {
    width: 441.639px;
    height: 422.619px;
    transform: rotate(-15.405deg);
    position: absolute;
    opacity: 0.6;
    bottom: 154px;
    left: -120px;
}

.nova-hero__decoration--right {
    top: -40px;
    right: -60px;
    width: 417px;
    height: 429px;
}

.nova-hero__inner {
    position: relative;
    z-index: 1;
    margin: 0px !important;
    max-width: none !important;
}

.nova-hero__subtitle {
    max-width: 620px;
}

/* Hero heading — unlayered so it beats @layer utilities (.v-typography-display-1) */
.nova-hero__title {
    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-display-1, 90px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-display-1, 94px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
}

/* Hero subtitle — unlayered so it beats @layer utilities (.v-typography-body-1).
   Targets structurally (no .nova-hero__subtitle class on the element).
   text-shadow only in dark mode to soften text over the hero background. */
.nova-hero p {
    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-body-1, 18px);
    font-style: normal;
    font-weight: 400 !important;
    line-height: var(--Typography-line-height-body-1, 28px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
}

.nova-hero-heading {
           font-size: var(--Typography-font-size-body-1, 18px) !important;
           line-height: var(--Typography-line-height-body-1, 28px) !important;
}

html[data-theme=dark] .nova-hero p {
    text-shadow: 0 0 100px #000;
}

/* Hero button — unlayered so it beats @layer components/utilities Nova button styles.
   Keeps "Visa Sans BETA 20260130" intentionally as specific fallback for this context. */
.nova-hero__btn {
    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, "Visa Sans BETA 20260130");
    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: var(--size-75, 8px);
    border-radius: var(--medium, 27px);
    border: 1px solid var(--vdp-text);
}

.nova-hero__btn:hover,
.nova-hero__btn:focus-visible {
    color: var(--vdp-active, #9AF900);
    border-color: var(--vdp-active, #9AF900);
}

/* ============================================================
   NUMBERED STEPS
   ============================================================ */
.nova-steps {
    position: relative;
    overflow: visible;
    padding: 200px 0px 0px 0px;
    background-color: transparent;
}

/* Decoration image — bottom-left ASCII art accent (pink sphere).
   Size/opacity confirmed via Figma Dev Mode inspect on "Group 1370":
   width 653.441px, height 655.202px, opacity 0.6.
   Position (bottom/left) computed from Group 1370's canvas coordinates
   relative to this component's Section frame — not read directly from
   Dev Mode, so verify visually against Figma after deploying. */
.nova-steps__decoration {
    position: absolute;
    bottom: -199.66px;
    left: -309.85px;
    width: 653.441px;
    height: 655.202px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* Default (dark mode): show dark decoration, hide light */
.nova-steps__decoration--light {
    display: none;
}

/* Light mode: swap visibility */
html[data-theme=light] .nova-steps__decoration--dark {
    display: none;
}

html[data-theme=light] .nova-steps__decoration--light {
    display: block;
}

.nova-steps__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-self: stretch;
    max-width: none !important;
}

/* Section title typography — both modes */
.nova-steps__title {
    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);
}

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

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

/* Structure — both modes.
   No padding here: the illustration band is full-bleed (flush with the
   card edges per Figma), and the text below gets its inset from
   .number__container's own 28px padding, not from this container. */
.nova-steps__step {
    flex: 1;
    display: flex;
    min-width: 200px;
    max-width: 1000px;
    min-height: 130px;
    flex-direction: column;
    align-items: flex-start;
    justify-self: stretch;
    border-radius: var(--small, 18px);
    overflow: hidden;
}

.nova-steps .nova-steps__step {
    padding: 0 !important;
    border-radius: var(--small, 18px) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* Dark mode — glassmorphism surface */
html[data-theme=dark] .nova-steps__step {
    border: 1px solid var(--Color-Decorative-border, rgba(255, 255, 255, 0.35));
    background: var(--Color-Surface-surface-4, rgba(99, 99, 99, 0.30));
    -webkit-backdrop-filter: blur(7.5px);
    backdrop-filter: blur(7.5px);
}

/* Light mode — semi-transparent so gradient shows through.
   Matches the "Develop end to end" clickable cards' fill exactly
   (confirmed via Plugin API: rgb(245,245,245) @ 40% opacity, not
   white @ 60% — this rule was never corrected to the real Figma value). */
html[data-theme=light] .nova-steps__step {
    border: 1px solid var(--vdp-border, rgba(0, 0, 0, 0.1));
    background: rgba(246, 246, 246, 0.40);
    backdrop-filter: blur(7.5px);
}

/* Number/content container — both modes (layout only, no colour differences) */
.number__container {
    display: flex;
    padding: var(--size-275, 28px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-130, 14px);
    align-self: stretch;
}

/* ia-shared.css's ".nova-steps__step .number__container" flex-reset rule
   (compound selector, higher specificity) also zeroes padding — re-declare
   here at matching specificity so the 28px inset above actually applies. */
.nova-steps__step .number__container {
    padding: var(--size-275, 28px);
}

/* Illustration band — full-bleed, flush with the card's own top corners
   (clipped by .nova-steps__step's overflow:hidden + border-radius).
   Sits above a bottom-only separator border, matching Figma's
   "Illustrations" frame (strokeTopWeight:0, strokeBottomWeight:1). */
.nova-steps__img-frame {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.nova-steps .nova-steps__img-frame {
    height: 300px !important;
    overflow: hidden !important;
}

html[data-theme=dark] .nova-steps__img-frame {
    background: rgba(0, 0, 0, 0.40);
    border-bottom: 1px solid var(--Color-Decorative-border, rgba(255, 255, 255, 0.35));
}

html[data-theme=light] .nova-steps__img-frame {
    background: rgba(255, 255, 255, 0.50);
    border-bottom: 1px solid var(--vdp-border, rgba(0, 0, 0, 0.1));
}

/* Structure — both modes */
.nova-steps__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nova-steps .nova-steps__img {
    height: 100% !important;
    object-fit: cover !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

/* Dark mode — glassmorphism */
html[data-theme=dark] .nova-steps__img {
    background: linear-gradient(114deg, rgba(99, 99, 99, 0.40) 0%, rgba(99, 99, 99, 0.10) 100%);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

/* Light mode — solid surface */
html[data-theme=light] .nova-steps__img {
    background: var(--vdp-surface-2, #F6F6F6);
    backdrop-filter: none;
}

/* Default (dark mode): show dark image, hide light */
.nova-steps__img--light {
    display: none;
}

/* Light mode: swap visibility */
html[data-theme=light] .nova-steps__img--dark {
    display: none;
}

html[data-theme=light] .nova-steps__img--light {
    display: block;
}

/* Typography — both modes */
.nova-steps__number {
    display: block;
    margin-bottom: 12px;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: 48px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--Typography-line-height-display-2, 62px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
}

/* Light mode — accent purple */
html[data-theme=light] .nova-steps__number {
    color: var(--Color-Accent-accent-3, #AF00FF);
}

/* Dark mode — accent pink */
html[data-theme=dark] .nova-steps__number {
    color: var(--Color-Accent-accent-3, #FF61E5);
}

/* Step description typography — both modes */
.nova-steps__step-desc {
    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) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: var(--Typography-line-height-body-2, 24px) !important;
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
}

.nova-steps__step-title {
    font-feature-settings: 'liga' off, 'clig' off;

    /* VDP/Headline 3 */
    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); /* 130% */
    letter-spacing: var(--Typography-letter-spacing-none, 0);
}

    .nova-steps__step-link {
    font-feature-settings: 'liga' off, 'clig' off;
    /* VDP/Button medium */
    font-family: var(--font-family-font-family-1, "Work Sans") !important;
    font-size: var(--Typography-font-size-button-medium, 14px) !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: var(--Typography-line-height-button-medium, 16px); /* 114.286% */
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px) !important;
    /* Pin to the bottom of .number__container's flex column regardless of
       description length, instead of just following the text naturally. */
    margin-top: auto;
    }

    /* Dark mode — green */
    html[data-theme=dark] .nova-steps__step-link {
        color: var(--Color-Active-active, #9AF900);
    }

    /* Light mode — blue - primary text */
    html[data-theme=light] .nova-steps__step-link {
        color: var(--Color-Active-active, #1434CB);
    }

    /* Hover — same "VDP link with icon" component convention as the other
       CTA links on this page (not part of the original ask, but this is
       the identical Figma component so it had the same gap). */
    html[data-theme=dark] .nova-steps__step-link:hover {
        color: #79D500;
    }
    html[data-theme=light] .nova-steps__step-link:hover {
        color: #173BE8;
    }

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

/* Light mode — primary text */
html[data-theme=light] .nova-steps__step-desc, nova-steps__step-title {
    color: var(--Color-Text-text, #000);
}

.nova-steps__link {
    padding-left: 0;
}

/* Step link — VDP link with icon: flex row, gap 6px, no padding */
.nova-steps .v-link {
    display: inline-flex;
    align-items: center;
    gap: var(--size-65, 6px);
    padding: var(--Link-link-padding-TB, 0) 0;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-button-medium, 14px);
    font-weight: 500;
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
    text-decoration: none;
}
html[data-theme=dark]  .nova-steps .v-link { color: var(--Color-Active-active, #9AF900); }
html[data-theme=light] .nova-steps .v-link { color: var(--vdp-active, #1434CB); }

/* Arrow icon — inherits color via currentColor */
.nova-steps .v-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

/* ============================================================
   MCP BANNER
   ============================================================ */
.nova-mcp {
    position: relative;
    overflow: hidden;
    padding: 200px 0px;
    background: none !important;
    overflow: visible !important;
    background-color: var(--vdp-surface-1, #ffffff);
}

/* Decoration image — left-side ASCII art accent */
.nova-mcp__decoration {
    position: absolute;
    top: 50%;
    left: -80px;
    transform: translateY(-50%);
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.nova-mcp__container {
    position: relative;
    z-index: 1;
    gap: 147px;
    flex-wrap: nowrap;
    max-width: none !important;
}

.nova-mcp__content {
    flex: 0 0 auto;
    width: 574px;
    max-width: 100%;
}

/* MCP banner title typography — both modes */
.nova-mcp__title {
    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-mcp__title {
    color: var(--Color-Text-text, #FFF);
}

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

/* MCP banner subtitle typography — both modes */
.nova-mcp__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-2, 14px) !important;
        font-style: normal;
        font-weight: 400 !important;
        line-height: var(--Typography-line-height-body-2, 24px) !important;
        letter-spacing: var(--Typography-letter-spacing-small, 0.25px) !important;
        align-self: stretch;
}

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

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

/* MCP primary button — structure (both modes) */
.nova-mcp__btn-primary {
    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: var(--size-75, 8px);
    border-radius: var(--medium, 27px);
}

/* Dark mode — lime green active */
html[data-theme=dark] .nova-mcp__btn-primary {
    border: 1px solid var(--Color-Active-active, #9AF900);
    background: var(--Color-Active-active, #9AF900);
    color: #000000;
}

/* Light mode — Visa blue active */
html[data-theme=light] .nova-mcp__btn-primary {
    border: 1px solid var(--vdp-active, #1434CB);
    background: var(--vdp-active, #1434CB);
    color: #FFFFFF;
}

/* Hover — resolved from Figma's "Size=Medium, State=Hover" component via its
   bound variables (Color/Active/active-hover): dark #79D500, light #173BE8.
   Text colour is unchanged (Color/Text/on-active is the same for default and
   hover states in both themes). */
html[data-theme=dark] .nova-mcp__btn-primary:hover {
    border-color: #79D500;
    background: #79D500;
}

html[data-theme=light] .nova-mcp__btn-primary:hover {
    border-color: #173BE8;
    background: #173BE8;
}

/* MCP secondary button ("Learn more") — VDP tertiary text button */
.nova-mcp__btn-secondary {
    display: flex;
    gap: var(--size-75, 8px);
    align-items: center;
    justify-content: center;
    padding: var(--size-125, 13px) var(--size-100, 11px);
    border: 1px solid transparent;
    border-radius: var(--medium, 27px);
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-button-medium, 14px);
    font-weight: 500;
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
    text-decoration: none;
}
html[data-theme=dark]  .nova-mcp__btn-secondary {
color: var(--Color-Active-active, #9AF900) !important;
}
html[data-theme=light] .nova-mcp__btn-secondary { color: var(--vdp-active, #1434CB); }

/* Hover — Figma's "VDP link with icon / State=Hover" binds text+icon to
   Color/Active/active-hover: dark #79D500, light #173BE8. */
html[data-theme=dark] .nova-mcp__btn-secondary:hover {
    color: #79D500 !important;
}
html[data-theme=light] .nova-mcp__btn-secondary:hover {
    color: #173BE8;
}

/* Arrow icon — inherits color via currentColor from parent link */
.nova-mcp__btn-secondary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.nova-mcp__image-wrapper {
    position: relative;
    min-width: 0;
    align-self: stretch;
    border-radius: 17px;
    overflow: visible;
}

.nova-mcp__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nova-mcp__image-placeholder {
    color: #999;
    font-style: italic;
}

/* ============================================================
   SUPPORT CARDS
   ============================================================ */
.nova-support {
    padding: 0px 0px 100px 0px;
    overflow: visible;
    background-color: transparent;
}

/* Decoration image — right-side ASCII art accent */
.nova-support__decoration {
    position: absolute;
    top: 50%;
    right: -95px;
    transform: translateY(-33%);
    width: 450px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

/* Default (dark mode): show dark decoration, hide light */
.nova-support__decoration--light {
    display: none;
}

/* Light mode: swap visibility */
html[data-theme=light] .nova-support__decoration--dark {
    display: none;
}

html[data-theme=light] .nova-support__decoration--light {
    display: block;
}

.nova-support__container {
    position: relative;
    z-index: 1;
    max-width: none !important;
    margin: 0px !important;
}

/* Card — structure shared across both modes */
.nova-support__card {
    flex: 1;
    min-width: 280px;
    max-width: 424px;
    border-radius: var(--small, 18px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-130, 14px);
    padding: var(--size-275, 28px);
    overflow: hidden;
    isolation: isolate;
}

/* Light mode — semi-transparent so gradient shows through */
html[data-theme=light] .nova-support__card {
    background: rgba(255, 255, 255, 0.60);
    border: 1px solid var(--Color-Decorative-border, rgba(0, 0, 0, 0.10));
    backdrop-filter: blur(7.5px);
}

/* Dark mode — Figma: surface-4 rgba(99,99,99,0.30), border rgba(255,255,255,0.35), blur 7.5px */
html[data-theme=dark] .nova-support__card {
    background: var(--Color-Surface-surface-4, rgba(99, 99, 99, 0.30));
    border: 1px solid var(--Color-Decorative-border, rgba(255, 255, 255, 0.35));
    -webkit-backdrop-filter: blur(7.5px);
    backdrop-filter: blur(7.5px);
}

/* Support card title — VDP/Headline 2 */
.nova-support__card-title {
    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, 0px);
    margin: 0;
}
html[data-theme=dark]  .nova-support__card-title { color: var(--Color-Text-text, #FFF); }
html[data-theme=light] .nova-support__card-title { color: var(--vdp-text, #000000); }

/* Support card description — VDP/Body 2 */
.nova-support__card-desc {
    flex: 1;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-body-2, 14px);
    font-weight: 400;
    line-height: var(--Typography-line-height-body-2, 24px);
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
    margin: 0;
}
html[data-theme=dark]  .nova-support__card-desc { color: var(--Color-Text-text, #FFF); }
html[data-theme=light] .nova-support__card-desc { color: var(--vdp-text, #000000); }

/* Support card link — layout matches Figma "VDP link with icon": flex row, gap 6px */
.nova-support__card-link {
    padding-top: 8px;
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-button-medium, 14px);
    font-weight: 500;
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
html[data-theme=dark]  .nova-support__card-link { color: var(--Color-Active-active, #9AF900) !important; }
html[data-theme=light] .nova-support__card-link { color: var(--vdp-active, #1434CB); }

/* Hover — same "VDP link with icon" component convention as elsewhere. */
html[data-theme=dark] .nova-support__card-link:hover {
    color: #79D500 !important;
}
html[data-theme=light] .nova-support__card-link:hover {
    color: #173BE8;
}

/* Arrow icon — inline SVG in HTML uses fill="currentColor", inheriting the link color above */
.nova-support__card-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

/* Support section title — VDP/Headline 1 */
.nova-support__title {
    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;
}
html[data-theme=dark]  .nova-support__title { color: var(--Color-Text-text, #FFF); }
html[data-theme=light] .nova-support__title { color: var(--vdp-text, #000000); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.nova-cta {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    text-align: center;
    background: none;
}

/* Decoration image — bottom-right ASCII art accent */
.nova-cta__decoration {
    position: absolute;
    bottom: -40px;
    right: -60px;
    width: 350px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

.nova-cta__container {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
}

/* CTA secondary link — "Browse docs" — VDP tertiary text button */
.nova-cta__btn-secondary {
    display: flex;
    gap: var(--size-75, 8px);
    align-items: center;
    justify-content: center;
    padding: var(--size-125, 13px) var(--size-100, 11px);
    border: 1px solid transparent;
    border-radius: var(--medium, 27px);
    font-family: var(--font-family-font-family-1, "Work Sans");
    font-size: var(--Typography-font-size-button-medium, 14px);
    font-weight: 500;
    letter-spacing: var(--Typography-letter-spacing-small, 0.25px);
    text-decoration: none;
}
html[data-theme=dark]  .nova-cta__btn-secondary { color: var(--Color-Active-active, #9AF900) !important; }
html[data-theme=light] .nova-cta__btn-secondary { color: var(--vdp-active, #1434CB); }

/* Hover — same "VDP link with icon" component convention as elsewhere. */
html[data-theme=dark] .nova-cta__btn-secondary:hover {
    color: #79D500 !important;
}
html[data-theme=light] .nova-cta__btn-secondary:hover {
    color: #173BE8;
}

/* Arrow icon — inherits color via currentColor from parent link */
.nova-cta__btn-secondary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

/* ============================================================
   CTA TYPOGRAPHY & BUTTON UTILITY CLASSES
   ============================================================ */

.cta-heading-text {
    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-display-1, 90px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Typography-line-height-display-1, 94px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
    align-self: stretch;
}
html[data-theme=dark]  .cta-heading-text { color: var(--vdp-text, #FFFFFF); }
html[data-theme=light] .cta-heading-text { color: var(--vdp-text, #000000); }

.cta-subtitle-text {
    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-body-1, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typography-line-height-body-1, 28px);
    letter-spacing: var(--Typography-letter-spacing-none, 0);
    align-self: stretch;
}
html[data-theme=dark]  .cta-subtitle-text { color: var(--vdp-text, #FFFFFF); }
html[data-theme=light] .cta-subtitle-text { color: var(--vdp-text, #000000); }

.cta-primary-text {
    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: var(--size-75, 8px);
    border-radius: var(--medium, 27px);
}
html[data-theme=dark] .cta-primary-text {
    border: 1px solid var(--Color-Active-active, #9AF900);
    background: var(--Color-Active-active, #9AF900);
    color: #000000;
}
html[data-theme=light] .cta-primary-text {
    border: 1px solid var(--vdp-active, #1434CB);
    background: var(--vdp-active, #1434CB);
    color: #FFFFFF;
}

/* Hover — same "VDP primary text button / State=Hover" convention as
   .nova-mcp__btn-primary above. */
html[data-theme=dark] .cta-primary-text:hover {
    border-color: #79D500;
    background: #79D500;
}
html[data-theme=light] .cta-primary-text:hover {
    border-color: #173BE8;
    background: #173BE8;
}

/* ============================================================
   DARK MODE OVERRIDES
   Explicit overrides for sections whose CSS-variable fallbacks are
   light-mode colours. These fire only when nova-styles.css vars are
   unavailable (e.g. before Maven deploy) so dark mode still works.
   ============================================================ */

/* Hero, steps, MCP, support, CTA — transparent in both modes so gradient shows through */
html[data-theme=dark] .nova-hero    { background-color: transparent; }
html[data-theme=dark] .nova-steps   { background-color: transparent; }
html[data-theme=dark] .nova-mcp     { background-color: transparent; }
html[data-theme=dark] .nova-support { background-color: transparent; }
html[data-theme=dark] .nova-cta     { background: transparent; }

/* ============================================================
   RESPONSIVE — tablet and below
   ============================================================ */
@media screen and (max-width: 768px) {
    .nova-hero,
    .nova-steps,
    .nova-mcp,
    .nova-support,
    .nova-cta {
        padding-left: 24px;
        padding-right: 24px;
    }

    .nova-mcp__container {
        flex-direction: column;
    }

    .nova-mcp__image-wrapper {
        width: 100%;
    }

    .nova-mcp__content {
        width: 100%;
    }

    .nova-steps__grid {
        flex-direction: column;
    }

    .nova-steps__step {
        min-width: unset;
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .nova-hero {
        padding-top: 60px;
        padding-bottom: 48px;
    }

    .nova-hero__decoration,
    .nova-steps__decoration,
    .nova-mcp__decoration,
    .nova-support__decoration,
    .nova-cta__decoration {
        display: none;
    }

    .nova-cta {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .nova-support__grid {
        flex-direction: column;
    }

    .nova-support__card {
        min-width: unset;
        width: 100%;
    }

    .nova-mcp__content,
    .nova-mcp__image-wrapper {
        min-width: unset;
        width: 100%;
    }

    .nova-cta__actions {
        justify-content: center;
    }

    /* R5: Buttons full-width on mobile */
    .nova-hero__btn,
    .cta-primary-text,
    .nova-mcp__btn-primary {
        width: 100%;
        justify-content: center;
    }

    .nova-hero__actions,
    .nova-cta__actions,
    .nova-mcp__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* R6: Hero/CTA heading font scaling */
    .nova-hero__title,
    .cta-heading-text {
        font-size: 48px;
        line-height: 52px;
    }

    /* R7: Tighter section side padding */
    .nova-hero,
    .nova-steps,
    .nova-mcp,
    .nova-support,
    .nova-cta {
        padding-left: 16px;
        padding-right: 16px;
    }

}

/* ============================================================
   GRADIENT BACKGROUND SYSTEM
   Two-layer animated gradient covering the full page.

   Layer 1 — .ia-gradient-bg (fixed, viewport):
     Five radial-gradient circles orbit via CSS keyframes.
     An SVG goo filter (feGaussianBlur + feColorMatrix alpha
     threshold) makes overlapping circles morph together.
     A sixth circle follows the mouse cursor in real time.
     Dark mode: screen blend on black → neon aurora.
     Light mode: multiply blend on white → pastel watercolor.
     Fades out via JS as user scrolls past 60-100% of viewport.

   Layer 2 — .ia-static-bg (absolute, full page height):
     12 SVG aurora-streak blobs cover the below-fold content.
     Wide flat ellipses + feTurbulence / feDisplacementMap
     warp them into organic streaks. Fades in as layer 1 fades
     out — seamless crossfade handled by the inline script.
   ============================================================ */

/* ── Gradient CSS custom properties ── */
.ia-gradient-bg {
    --ia-color1: 20, 52, 203;
    --ia-color2: 55, 232, 255;
    --ia-color3: 154, 249, 0;
    --ia-color4: 20, 52, 203;
    --ia-color5: 55, 232, 255;
    --ia-color-interactive: 154, 249, 0;
    --ia-circle-size: 80%;
}

/* ── SVG filter container — structurally present but never rendered ── */
.ia-gradient-filter-defs {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
}

/* ── Fixed animated layer ── */
.ia-gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

html[data-theme=dark]  .ia-gradient-bg { background: linear-gradient(40deg, #000000, #04061a); }
html[data-theme=light] .ia-gradient-bg { background: linear-gradient(40deg, #ffffff, #f0f4ff); }

.ia-gradients-container {
    filter: url('#ia-gooey') blur(40px);
    width: 100%;
    height: 100%;
}

/* ── Base circle shared styles ── */
.ia-g1, .ia-g2, .ia-g3, .ia-g4, .ia-g5 {
    position: absolute;
    width: var(--ia-circle-size);
    height: var(--ia-circle-size);
    top:  calc(50% - var(--ia-circle-size) / 2);
    left: calc(50% - var(--ia-circle-size) / 2);
    opacity: 1;
}

/* Dark mode: screen blend — additive colours emerge from black */
html[data-theme=dark] .ia-g1,
html[data-theme=dark] .ia-g2,
html[data-theme=dark] .ia-g3,
html[data-theme=dark] .ia-g4,
html[data-theme=dark] .ia-g5,
html[data-theme=dark] .ia-interactive { mix-blend-mode: screen; }

/* Light mode: multiply blend — colours tint white to pastel */
html[data-theme=light] .ia-g1,
html[data-theme=light] .ia-g2,
html[data-theme=light] .ia-g3,
html[data-theme=light] .ia-g4,
html[data-theme=light] .ia-g5,
html[data-theme=light] .ia-interactive { mix-blend-mode: multiply; }

/* Blue — orbits wide left */
.ia-g1 {
    background: radial-gradient(circle at center,
        rgba(var(--ia-color1), 0.35) 0,
        rgba(var(--ia-color1), 0) 50%) no-repeat;
    transform-origin: calc(50% - 400px);
    animation: ia-moveInCircle 32s reverse infinite;
}

/* Cyan — orbits wide right */
.ia-g2 {
    background: radial-gradient(circle at center,
        rgba(var(--ia-color2), 0.3) 0,
        rgba(var(--ia-color2), 0) 50%) no-repeat;
    transform-origin: calc(50% + 400px);
    animation: ia-moveInCircle 28s linear infinite;
}

/* Lime — offset top-left, slow orbit */
.ia-g3 {
    background: radial-gradient(circle at center,
        rgba(var(--ia-color3), 0.28) 0,
        rgba(var(--ia-color3), 0) 50%) no-repeat;
    top:  calc(50% - var(--ia-circle-size) / 2 + 200px);
    left: calc(50% - var(--ia-circle-size) / 2 - 500px);
    transform-origin: calc(50% + 400px);
    animation: ia-moveInCircle 60s linear infinite;
}

/* Blue — sweeps horizontally */
.ia-g4 {
    background: radial-gradient(circle at center,
        rgba(var(--ia-color4), 0.3) 0,
        rgba(var(--ia-color4), 0) 50%) no-repeat;
    transform-origin: calc(50% - 200px) calc(50% + 200px);
    animation: ia-moveHorizontal 55s ease infinite;
    opacity: 0.6;
}

/* Cyan — double-size, slow reverse orbit, anchors lower half */
.ia-g5 {
    background: radial-gradient(circle at center,
        rgba(var(--ia-color5), 0.25) 0,
        rgba(var(--ia-color5), 0) 50%) no-repeat;
    width:  calc(var(--ia-circle-size) * 2);
    height: calc(var(--ia-circle-size) * 2);
    top:    calc(50% - var(--ia-circle-size));
    left:   calc(50% - var(--ia-circle-size));
    transform-origin: calc(50% - 500px) calc(50% + 200px);
    animation: ia-moveInCircle 36s reverse infinite;
    opacity: 0.4;
}

/* Lime — interactive mouse-follow bubble */
.ia-interactive {
    position: absolute;
    background: radial-gradient(circle at center,
        rgba(var(--ia-color-interactive), 0.3) 0,
        rgba(var(--ia-color-interactive), 0) 50%) no-repeat;
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.5;
}

@keyframes ia-moveInCircle {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ia-moveHorizontal {
    0%   { transform: translateX(-50%) translateY(-10%); }
    50%  { transform: translateX(50%)  translateY(10%); }
    100% { transform: translateX(-50%) translateY(-10%); }
}

/* ── Page wrap — positions static blobs behind all content ── */
.ia-page-wrap {
    position: relative;
    z-index: 1;
}

/* ── Static aurora blobs layer ── */
.ia-static-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.ia-sb { position: absolute; pointer-events: none; }

/* Group 1 — LEFT */
.ia-sb-1  { width: 2250px; height: 780px;  top: -60px;   left: -260px;  opacity: .28; transform: rotate(-9deg);  }
.ia-sb-2  { width: 1380px; height: 1050px; top: 200px;   left: -150px;  opacity: .24; transform: rotate(24deg);  }
.ia-sb-3  { width: 2070px; height: 720px;  top: 400px;   left: -180px;  opacity: .26; transform: rotate(-6deg);  }
/* Group 2 — RIGHT */
.ia-sb-4  { width: 1230px; height: 945px;  top: 950px;   right: -160px; opacity: .22; transform: rotate(21deg);  }
.ia-sb-5  { width: 2130px; height: 750px;  top: 1100px;  right: -250px; opacity: .27; transform: rotate(13deg);  }
.ia-sb-6  { width: 1320px; height: 1005px; top: 1250px;  right: -150px; opacity: .22; transform: rotate(-27deg); }
/* Group 3 — LEFT */
.ia-sb-7  { width: 1950px; height: 690px;  top: 1900px;  left: -200px;  opacity: .24; transform: rotate(7deg);   }
.ia-sb-8  { width: 1350px; height: 1020px; top: 2050px;  left: -150px;  opacity: .24; transform: rotate(-17deg); }
.ia-sb-9  { width: 2175px; height: 765px;  top: 2200px;  left: -220px;  opacity: .28; transform: rotate(19deg);  }
/* Group 4 — RIGHT */
.ia-sb-10 { width: 1290px; height: 975px;  top: 2800px;  right: -160px; opacity: .22; transform: rotate(-13deg); }
.ia-sb-11 { width: 2025px; height: 720px;  top: 2950px;  right: -220px; opacity: .25; transform: rotate(27deg);  }
.ia-sb-12 { width: 1380px; height: 1050px; top: 3100px;  right: -150px; opacity: .26; transform: rotate(14deg);  }

    .ia-section-header {
        position: relative;
        z-index: 2;
        max-width: 1400px;
        margin: 0 auto;
}

@media screen and (max-width: 880px) {
    .ia-section-header {
        padding-right:25px;
        padding-left:25px;
        overflow:hidden;
    }
}

@media (min-width: 881px) and (max-width: 1590px) {
    .ia-section-header {
        padding-right: 60px;
        padding-left:60px;
        overflow:hidden;
    }
}

@media screen and (min-width: 1591px) {
    .ia-section-header {
        padding-right: 0px;
        padding-left:0px;
    }
}

/* ── Reduced motion — disable keyframe animations ── */
@media (prefers-reduced-motion: reduce) {
    .ia-g1, .ia-g2, .ia-g3, .ia-g4, .ia-g5 {
        animation: none;
    }
}