/* stylelint-disable no-descending-specificity */

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
    /* nav height */
    --nav-height: 4.25rem;
    --nav-height-new: 4.25rem;
    --header-height: var(--nav-height-new);

    /* consent bar */
    --consent-bar-height: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =======================================================
   CSS RESET — <a> elements
   Removes browser default blue color + underline globally.
   Header/footer/nav links inherit color from their parent
   and no longer need explicit text-decoration overrides.
   ======================================================= */
a {
    color: inherit;
    text-decoration: none;
}

body {
    display: none;
    margin: 0;
    background-color: var(--bg-page);
    color: var(--color-text-default);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: 1.6;
}

body.appear {
    display: block;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 1rem);
}

main [id],
main section[id],
main h1[id],
main h2[id],
main h3[id],
main h4[id],
main h5[id],
main h6[id] {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.skip-to-main-content-link {
    position: absolute;
    left: -624.9375rem;
    z-index: 1;
    padding: 0 1em;
    background-color: var(--color-text-default);
    color: var(--color-text-inverse);
    opacity: 0;
}

.skip-to-main-content-link:focus,
.skip-to-main-content-link:focus-visible {
    position: fixed;
    left: 50%;
    top: -0.25rem;
    transform: translateX(-50%);
    opacity: 1;
    z-index: var(--z-index-skip-link);
    padding: 0.5rem 2.25rem;
    background-color: var(--color-text-default);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    outline: 0.1875rem solid var(--color-text-inverse);
    outline-offset: 0.125rem;
    white-space: nowrap;
}

/* Reserve header height before header JS runs to prevent main from shifting (CLS).
   height: var(--nav-height) ensures the spacer never collapses to 0 before
   has-header-gap is applied by header.js. */
header.header-wrapper {
    height: var(--nav-height);
}

header.header-hidden {
    transform: translateY(-100%);
}

header.header-wrapper.has-secondary-nav {
    height: 7.75rem;
}

/* Landing page (no breadcrumb): reserve the fixed nav height; the first section's
   built-in 40px (2.5rem) top padding provides the gap before the body. */
header.header-wrapper.has-header-gap {
    min-height: var(--nav-height);
    max-height: var(--nav-height);
}

header .header,
footer .footer {
    visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
    visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    margin: 0;
}

h1 {
    font-size: var(--font-size-4xl);
    line-height: 2.4375rem;
    font-weight: var(--font-weight-light);
}

h2 {
    font-size: var(--font-size-3xl);
    line-height: 2rem;
    font-weight: var(--font-weight-medium);
}

body:not(.blogs-page) main > .section:not(.cards-container) h1,
body:not(.blogs-page) main > .section:not(.cards-container) h2,
body:not(.blogs-page) main > .section:not(.cards-container) h3,
body:not(.blogs-page) main > .section:not(.cards-container) h4,
body:not(.blogs-page) main > .section:not(.cards-container) h5,
body:not(.blogs-page) main > .section:not(.cards-container) h6 {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

h3 {
    font-size: var(--font-size-2xl);
    line-height: 1.875rem;
    font-weight: var(--font-weight-medium);
}

h4 {
    font-size: var(--font-size-xl);
    line-height: 1.6875rem;
    font-weight: var(--font-weight-medium);
}

h5 {
    font-size: 1.1875rem;
    line-height: 1.5625rem;
    font-weight: var(--font-weight-medium);
}

h6 {
    font-size: 1.0625rem;
    line-height: 1.4375rem;
    font-weight: var(--font-weight-medium);
}

p {
    font-size:var(--font-size-lg);
    line-height: 1.5rem;
}

/* Scoped p styles — excluded from blog/author pages which manage their own p typography */
body:not(.blogs-page) main > .section p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin: 0;
}

body:not(.blogs-page) main > .section p:not(:empty):not(.button-container) {
    padding-top: 1rem;
}

strong {
    font-weight: var(--font-weight-semibold);
}

p,
dl,
ol,
ul,
pre,
blockquote {
    margin-top: 0.8em;
    margin-bottom: 0.25em;
}

body:not(.blogs-page) main > .section:not(.cards-container) ul,
body:not(.blogs-page) main > .section:not(.cards-container) ol {
    padding: 1rem 0 1rem 1.3rem;
    margin: 0;
}

body:not(.blogs-page) main > .section:not(.cards-container) ul li,
body:not(.blogs-page) main > .section:not(.cards-container) ol li {
    margin-top: 1rem;
    line-height: 1.55;
    font-size: 1.125rem;
}

body:not(.blogs-page) main > .section a:not(.cta-section__cta) {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
}

code,
pre {
    font-size: var(--font-size-sm);
}

sup,
sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

/* Trademark / registered / copyright superscripts � authored as (TM), (R), (C) */
sup.trademark {
    font-size: 0.45em;
    font-weight: inherit;
    letter-spacing: normal;
    vertical-align: super;
    line-height: 0;
}

sub {
    bottom: -0.25em;
}

pre {
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    white-space: pre;
}

input,
textarea,
select,
button {
    font: inherit;
}

/* =======================================================
   LINKS — light theme, 4 states per Figma (node 38-157)
   Scoped to 'main' — header/footer inherit via CSS reset.
   Colors sourced from theme-netscaler.css --color-link-*
   ======================================================= */
main a:any-link {
    color: var(--color-link-default);                             /* default: black #000000 */
    overflow-wrap: break-word;
    transition: color var(--transition-fast, 150ms ease-in-out);
}

/* Inline content links (inside paragraphs, lists, tables) must have a
   non-color visual indicator (WCAG 1.4.1) since the default link color
   matches body text. Block-level card/component links are excluded. */
main p a:any-link,
main li a:any-link,
main blockquote a:any-link,
main td a:any-link,
main th a:any-link {
    text-decoration: underline;
}

main a:hover {
    color: var(--color-link-hover);
}

main a:active {
    color: var(--color-link-pressed);             /* pressed: cobalt-70 #00236E */
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
}

main a[aria-disabled="true"],
main a.disabled {
    color: var(--color-link-disabled);            /* disabled: grey-50 #97A09F */
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    pointer-events: none;
    cursor: not-allowed;
}

/* =======================================================
   LINKS — dark theme, 4 states per Figma (node 10159-6037)
   Apply .dark class to any section with a dark background.
   Colors sourced from theme-netscaler.css --color-link-*-dark
   ======================================================= */

/* =======================================================
   DARK / LIGHT SECTION THEMES
   Apply .dark class to any section with a dark background.
   All text and links become inverse (white) automatically.
   ======================================================= */
main .section.dark {
    color: var(--color-text-inverse);
}

main .section.dark.dark h1,
main .section.dark.dark h2,
main .section.dark.dark h3,
main .section.dark.dark h4,
main .section.dark.dark h5,
main .section.dark.dark h6,
main .section.dark.dark p,
main .section.dark.dark li,
main .section.dark.dark td,
main .section.dark.dark th,
main .section.dark.dark blockquote,
main .section.dark.dark dt,
main .section.dark.dark dd,
main .section.dark.dark figcaption,
main .section.dark.dark caption,
main .section.dark.dark *:not(a.btn-custom, a.btn-custom *, a.button, a.button *, button, button *) {
    color: var(--color-text-inverse);
}
main .section.dark a:not(.btn-custom):not(.button):any-link {
    color: var(--color-link-default-dark);                /* white — all links in dark sections */
    overflow-wrap: break-word;
    transition: color var(--transition-fast, 150ms ease-in-out);
}

main .section.dark p a:not(.btn-custom):not(.button):any-link,
main .section.dark li a:not(.btn-custom):not(.button):any-link,
main .section.dark blockquote a:not(.btn-custom):not(.button):any-link,
main .section.dark td a:not(.btn-custom):not(.button):any-link,
main .section.dark th a:not(.btn-custom):not(.button):any-link {
    text-decoration: underline;
}

main .section.dark a:not(.btn-custom):not(.button):hover {
    color: color-mix(in srgb, var(--color-link-default-dark) 80%, transparent);
    text-decoration: underline;
}

main .section.dark a:not(.btn-custom):not(.button):active {
    color: var(--color-link-pressed-dark);        /* pressed: mint-40 #71FD95 */
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
}

main .section.dark a[aria-disabled="true"],
main .section.dark a.disabled {
    color: var(--color-link-disabled-dark);       /* disabled: grey-50 #97A09F */
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    pointer-events: none;
    cursor: not-allowed;
}

/* buttons */
a.button:any-link,
button {
    display: inline-block;
    max-width: 100%;
    border: 0.125rem solid transparent;
    border-radius: 2.4em;
    padding: 0.5em 1.2em;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    background-color: var(--action-primary-bg);
    color: var(--color-text-inverse);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button:disabled,
button:disabled:hover {
    background-color: var(--bg-disabled-subtle);
    cursor: unset;
}

a.button.secondary,
button.secondary {
    background-color: unset;
    border: 0.125rem solid currentcolor;
    color: var(--color-text-default);
}

main img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.icon {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
}

.icon img {
    height: 100%;
    width: 100%;
}

/* sections */
:where(body:not(.blogs-page)) main > .section {
    width: 100%;
    padding: 2rem 0;
}

main > .section.blog-detail-container,
main > .section.blog-listing-container,
main > .section.author-detail-container,
main > .section.author-listing-container {
    padding: 2.5rem 0 6.38rem 0;
}

body:not(.blogs-page) main > .section > div {
    width: min(100%, 90rem);
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

body.blogs-page main > .section.blog-listing-container > .blog-listing-wrapper {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (width >= 48rem) {
    :where(body:not(.blogs-page)) main > .section {
        padding: 3.09375rem 0;
    }

    main > .section > div {
        padding-inline: 3rem;
    }

    body.blogs-page main > .section.blog-listing-container > .blog-listing-wrapper {
        padding-inline: 3rem;
    }
}

@media (width >= 64rem) {
    main > .section > div {
        padding-inline: 5rem;
    }

    body.blogs-page main > .section.blog-listing-container > .blog-listing-wrapper {
        padding-inline: 5rem;
    }
}

/* Full-bleed hero banners reset the wrapper to allow edge-to-edge background.
   This rule re-applies the content-width constraint on the inner layout div.
   Uses data-block-name^="hero-banner" so it covers ALL hero banner variants
   automatically � no need to list each block name individually. */
[data-block-name^="hero-banner"] {
    max-width: var(--content-container-width);
    margin-inline: auto;
}

[data-block-name^="hero-banner"] > div:first-child {
    max-width: var(--content-container-width);
    margin: 0 auto;
}

main > .section:first-of-type {
    margin-top: 0;
}

/* section metadata */
main .section.light,
main .section.highlight {
    background-color: var(--bg-surface-subtle);
    margin: 0;
    padding: 2.5rem 0;
}

/* ====================
    Section Spacing
   ==================== */

/* Padding Vertical (py-*) */
main > .section.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

main > .section.py-xs {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

main > .section.py-18 {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

main > .section.py-sm {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

main > .section.py-md {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

main > .section.py-lg {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

main > .section.py-36 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

main > .section.py-xl {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

main > .section.py-2xl {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

main > .section.py-3xl {
    padding-top: 5.625rem;
    padding-bottom: 5.625rem;
}

main > .section.py-custom-50 {
    padding-top: 3.09375rem;
    padding-bottom: 3.09375rem;
}

/* Padding Top (pt-*) */
main > .section.pt-0 {
    padding-top: 0;
}

main > .section.pt-xs {
    padding-top: 0.5rem;
}

main > .section.pt-18 {
    padding-top: 1.125rem;
}

main > .section.pt-sm {
    padding-top: 1rem;
}

main > .section.pt-md {
    padding-top: 1.5rem;
}

main > .section.pt-lg {
    padding-top: 2rem;
}

main > .section.pt-36 {
    padding-top: 2.25rem;
}

main > .section.pt-xl {
    padding-top: 2.5rem;
}

main > .section.pt-2xl {
    padding-top: 3rem;
}

main > .section.pt-3xl {
    padding-top: 5.625rem;
}

main > .section.pt-4xl {
    padding-top: 7.5rem;
}

main > .section.pt-custom-50 {
    padding-top: 3.09375rem;
}

/* Padding Bottom (pb-*) */
main > .section.pb-0 {
    padding-bottom: 0;
}

main > .section.pb-xs {
    padding-bottom: 0.5rem;
}

main > .section.pb-18 {
    padding-bottom: 1.125rem;
}

main > .section.pb-sm {
    padding-bottom: 1rem;
}

main > .section.pb-md {
    padding-bottom: 1.5rem;
}

main > .section.pb-lg {
    padding-bottom: 2rem;
}

main > .section.pb-36 {
    padding-bottom: 2.25rem;
}

main > .section.pb-xl {
    padding-bottom: 2.5rem;
}

main > .section.pb-2xl {
    padding-bottom: 3rem;
}

main > .section.pb-3xl {
    padding-bottom: 5.625rem;
}

main > .section.pb-4xl {
    padding-bottom: 7.5rem;
}

main > .section.pb-custom-50 {
    padding-bottom: 3.09375rem;
}

/* Mobile-specific padding utilities — apply on mobile, reset on tablet+ */
body:not(.blogs-page) main > .section.pt-m-0 {
    padding-top: 0;
}

body:not(.blogs-page) main > .section.pt-m-10 {
    padding-top: 0.625rem;
}

body:not(.blogs-page) main > .section.pt-m-20 {
    padding-top: 1.25rem;
}

body:not(.blogs-page) main > .section.pt-m-30 {
    padding-top: 1.875rem;
}

body:not(.blogs-page) main > .section.pt-m-40 {
    padding-top: 2.5rem;
}

body:not(.blogs-page) main > .section.pb-m-0 {
    padding-bottom: 0;
}

body:not(.blogs-page) main > .section.pb-m-10 {
    padding-bottom: 0.625rem;
}

body:not(.blogs-page) main > .section.pb-m-20 {
    padding-bottom: 1.25rem;
}

body:not(.blogs-page) main > .section.pb-m-30 {
    padding-bottom: 1.875rem;
}

body:not(.blogs-page) main > .section.pb-m-40 {
    padding-bottom: 2.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-0 {
    padding-top: 0;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-10 {
    padding-top: 0.625rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-20 {
    padding-top: 1.25rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-30 {
    padding-top: 1.875rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-40 {
    padding-top: 2.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-0 {
    padding-bottom: 0;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-10 {
    padding-bottom: 0.625rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-20 {
    padding-bottom: 1.25rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-30 {
    padding-bottom: 1.875rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-40 {
    padding-bottom: 2.5rem;
}

/* Tablet+: reset mobile-only padding utilities to section default */

/* Margin Vertical (my-*) */
main > .section.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

main > .section.my-xs {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

main > .section.my-sm {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

main > .section.my-md {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

main > .section.my-lg {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

main > .section.my-xl {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* ===========================
   Section Background Colors
   =========================== */

/* Primary */
main > .section.bg-primary-dep-blue-1   { background-color: var(--brand-deep-blue); }
main > .section.bg-primary-dep-blue-2   { background-color: var(--brand-dependable-blue-1); }
main > .section.bg-primary-blue-2       { background-color: var(--brand-blue-2); }
main > .section.bg-primary-blue-3       { background-color: var(--brand-blue-3); }
main > .section.bg-primary-black        { background-color: var(--brand-neutral-black); }
main > .section.bg-primary-grey-1       { background-color: var(--brand-grey-1); }
main > .section.bg-primary-grey-2       { background-color: var(--brand-purple-tint); }

/* Secondary */
main > .section.bg-secondary-bright-blue    { background-color: var(--brand-bright-blue); }
main > .section.bg-secondary-charcoal       { background-color: var(--brand-charcoal); }
main > .section.bg-secondary-orange         { background-color: var(--brand-orange); }
main > .section.bg-secondary-green          { background-color: var(--brand-teal); }
main > .section.bg-secondary-purple         { background-color: var(--brand-purple-100); }
main > .section.bg-secondary-rose           { background-color: var(--brand-rose); }
main > .section.bg-secondary-blue-tint-1    { background-color: var(--brand-blue-tint-1); }
main > .section.bg-secondary-blue-tint-2    { background-color: var(--brand-blue-tint-2); }
main > .section.bg-secondary-grey-tint-1    { background-color: var(--brand-grey-tint-1); }
main > .section.bg-secondary-grey-tint-2    { background-color: var(--brand-grey-tint-2); }
main > .section.bg-secondary-orange-tint-1  { background-color: var(--brand-orange-tint-1); }
main > .section.bg-secondary-orange-tint-2  { background-color: var(--brand-orange-tint-2); }
main > .section.bg-secondary-green-tint-1   { background-color: var(--brand-green-tint-1); }
main > .section.bg-secondary-green-tint-2   { background-color: var(--brand-green-tint-2); }
main > .section.bg-secondary-purple-tint-1  { background-color: var(--brand-purple-tint-1); }
main > .section.bg-secondary-purple-tint-2  { background-color: var(--brand-purple-tint-2); }
main > .section.bg-secondary-rose-tint-1    { background-color: var(--brand-rose-tint-1); }
main > .section.bg-secondary-rose-tint-2    { background-color: var(--brand-rose-tint-2); }
main > .section.bg-secondary-white          { background-color: var(--brand-neutral-white); }

/* ===========================
   Section 50/50 Split Layout
   =========================== */

/* 50/50 Layout: Target the section itself - mobile first: single column */
body:not(.blogs-page) main > .section.layout-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 2rem 1rem;
}

body:not(.blogs-page) main > .section.layout-split-70-30 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 2rem 0rem;
}

body:not(.blogs-page) main > .section.layout-split > div,
body:not(.blogs-page) main > .section.layout-split-70-30 > div {
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
}

body:not(.blogs-page) main > .section.layout-split-70-30 > div:first-child {
    grid-column: 1;
}

body:not(.blogs-page) main > .section.layout-split-70-30 > div:last-child {
    grid-column: 1;
}

body:not(.blogs-page) main > .section.layout-split-70-30 > div > .block {
    width: 100%;
}


/* Target the wrapper divs directly as grid children */
body:not(.blogs-page) main > .section.layout-split > div:first-child {
    grid-column: 1;
    width: stretch;
}

body:not(.blogs-page) main > .section.layout-split > div:last-child {
    grid-column: 1;
    width: stretch; /* Optional: Limit width of content in the right column */
}

/* Ensure blocks inside wrappers take full width */
body:not(.blogs-page) main > .section.layout-split > div > .block {
    width: 100%;
}

/* Override padding when applied to layout-split */
body:not(.blogs-page) main > .section.layout-split.pt-0 {
    padding-top: 0;
}

body:not(.blogs-page) main > .section.layout-split.pt-xs {
    padding-top: 0.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-18 {
    padding-top: 1.125rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-sm {
    padding-top: 1rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-md {
    padding-top: 1.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-lg {
    padding-top: 2rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-36 {
    padding-top: 2.25rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-xl {
    padding-top: 2.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-2xl {
    padding-top: 3rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-3xl {
    padding-top: 5.625rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-4xl {
    padding-top: 7.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-custom-50 {
    padding-top: 3.09375rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-0 {
    padding-bottom: 0;
}

body:not(.blogs-page) main > .section.layout-split.pb-xs {
    padding-bottom: 0.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-18 {
    padding-bottom: 1.125rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-sm {
    padding-bottom: 1rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-md {
    padding-bottom: 1.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-lg {
    padding-bottom: 2rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-36 {
    padding-bottom: 2.25rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-xl {
    padding-bottom: 2.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-2xl {
    padding-bottom: 3rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-3xl {
    padding-bottom: 5.625rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-4xl {
    padding-bottom: 7.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-custom-50 {
    padding-bottom: 3.09375rem;
}

/* Mobile: Stack vertically — already handled by base 1-column grid above */

/* ===========================
   Global Button Styles
   =========================== */

/* Base Custom Button Style */
a.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 8.75rem;
    border-radius: 2.5rem;
    /* background: var(--action-primary-bg); */
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-regular);
    color: var(--action-primary-text);
    /* border: 0.0625rem solid var(--action-primary-bg); */
    transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

@media (width < 48rem) {
    a.btn-custom {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        flex-shrink: 1;
    }
}

body:not(.blogs-page) main > .section a.btn-custom {
    margin-top: 3.09375rem;
}

/* ===========================
   Section Button Alignment
   =========================== */

/* Center align only the buttons in the section */
body:not(.blogs-page) main > .section.btn-center .button-container,
body:not(.blogs-page) main > .section.btn-center p:has(> a.button),
body:not(.blogs-page) main > .section.btn-center div:has(> a.button),
body:not(.blogs-page) main > .section.btn-center a.button,
body:not(.blogs-page) main > .section.btn-center button {
    text-align: center;
}

body:not(.blogs-page) main > .section.btn-center .button-container,
body:not(.blogs-page) main > .section.btn-center p:has(> a.button),
body:not(.blogs-page) main > .section.btn-center div:has(> a.button),
body:not(.blogs-page) main > .section.btn-center a.button,
body:not(.blogs-page) main > .section.btn-center button {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Center align only text in the section (leaving buttons unaffected) */
body:not(.blogs-page) main > .section.align-center > div > *:not(a.button):not(button):not(.button-container):not(.btn-custom):not(.button-custom-wrapper) {
    text-align: center;
}

/* Left align all buttons in the section */
body:not(.blogs-page) main > .section.btn-left {
    text-align: left;
}

body:not(.blogs-page) main > .section.btn-left a.button {
    margin-right: auto;
}

/* Right align all buttons in the section */
body:not(.blogs-page) main > .section.btn-right {
    text-align: right;
}

body:not(.blogs-page) main > .section.btn-right a.button {
    margin-left: auto;
}

/* Primary Button */
a.button.primary:any-link {
    padding: 0.625rem;
    border-radius: var(--radius-md);
    background: var(--action-primary-bg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-lg);
    color: var(--color-text-inverse);
}

/* CITRIX DOTS LOADER STYLES */
.citrix-dots-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.375rem;
    height: 3.3125rem;
}

.citrix-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 3.125rem;
    background-color: var(--bg-loader-dot);
}

.citrix-dot:nth-child(1) {
    animation: dot1-trail 0.8s infinite ease-in-out;
}

.citrix-dot:nth-child(2) {
    animation: dot2-trail 0.8s infinite ease-in-out;
}

.citrix-dot:nth-child(3) {
    animation: dot3-trail 0.8s infinite ease-in-out;
}

@keyframes dot1-trail {
    0% {
        height: 2rem;
        opacity: 0.3;
    }

    15% {
        height: 3.3125rem;
        opacity: 1;
    }

    30% {
        height: 2rem;
        opacity: 0.7;
    }

    90% {
        height: 2rem;
        opacity: 0.7;
    }

    100% {
        height: 2rem;
        opacity: 0.3;
    }
}

@keyframes dot2-trail {
    0% {
        height: 2rem;
        opacity: 0.3;
    }

    30% {
        height: 2rem;
        opacity: 0.3;
    }

    45% {
        height: 3.3125rem;
        opacity: 1;
    }

    60% {
        height: 2rem;
        opacity: 0.7;
    }

    90% {
        height: 2rem;
        opacity: 0.7;
    }

    100% {
        height: 2rem;
        opacity: 0.3;
    }
}

@keyframes dot3-trail {
    0% {
        height: 2rem;
        opacity: 0.3;
    }

    60% {
        height: 2rem;
        opacity: 0.3;
    }

    75% {
        height: 3.3125rem;
        opacity: 1;
    }

    90% {
        height: 2rem;
        opacity: 0.7;
    }

    100% {
        height: 2rem;
        opacity: 0.3;
    }
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

html {
    scrollbar-gutter: stable;
}

.nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    color: var(--color-link-hover);
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    line-height: 1.875rem;
    margin: 0;
    padding: var(--spacing-xs) 0;
}

.nav-btn:disabled {
    color: var(--color-text-secondary);
    cursor: default;
    background-color: transparent;
}

.nav-btn:disabled:hover {
    background-color: transparent;
    cursor: unset;
}

.icon-arrow-left,
.icon-arrow-right {
    display: inline-block;
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    background-color: var(--action-primary-bg);
    mask-image: url("../../icons/p-arr.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.icon-arrow-left {
    transform: rotate(180deg);
}

.nav-btn:disabled .icon-arrow-left,
.nav-btn:disabled .icon-arrow-right {
    background-color: var(--color-text-secondary);
}

.show-text {
    margin-right: 0.5625rem;
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    line-height: 1.875rem;
}

/* Tablet+: Increase font-size for nav buttons */
@media (width >= 48rem) {
    .nav-btn {
        font-size: 1.375rem;
    }
}

/* Breadcrumb theme variants */
.breadcrumb-wrapper.theme-br-black a {
    color: var(--color-text-default);
}

.breadcrumb-wrapper.theme-br-black a.current,
.breadcrumb-wrapper.theme-br-black li:last-child {
    color: rgb(0 0 0 / 50%);
}

.breadcrumb-wrapper.theme-br-black .breadcrumb-separator {
    background: none;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color-text-default);
    mask: url("../icons/bc-arrow.svg") no-repeat center / contain;
    vertical-align: middle;
}

/* stylelint-disable-next-line selector-id-pattern */
body #consent_blackbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-index-consent);
}

/* Tablet+: larger typography */
@media (width >= 48rem) {
    h1 {
        font-size: 3rem;
        line-height: 3.5rem;
        font-weight: var(--font-weight-semibold);
    }

    h2 {
        font-size: 2.25rem;
        line-height: 2.4375rem;
    }

    h3 {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }

    h4 {
        font-size: 1.375rem;
        line-height: 1.875rem;
    }

    h5 {
        font-size: 1.125rem;
        line-height: 1.6875rem;
    }

    h6 {
        font-size: 1rem;
        line-height: 1.125rem;
    }

    p {
        font-size: 1.125rem;
        line-height:1.5rem;
    }
    body:not(.blogs-page) main > .section[class*="pt-m-"] {
        padding-top: 5rem;
    }

    body:not(.blogs-page) main > .section[class*="pb-m-"] {
        padding-bottom: 5rem;
    }
    body:not(.blogs-page) main > .section.layout-split {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    body:not(.blogs-page) main > .section.layout-split > div:last-child {
        grid-column: 2;
    }

    body:not(.blogs-page) main > .section.layout-split-70-30 {
        grid-template-columns: 7fr 3fr;
        gap: 3rem;
    }

    body:not(.blogs-page) main > .section.layout-split-70-30 > div:last-child {
        grid-column: 2;
    }
    .nav-btn {
        font-size: var(--font-size-xl);
        padding: 0;
    }

    .show-text {
        font-size: 1.375rem;
    }
}

@media (width >= 64rem) {
    body:not(.blogs-page) main > .section > div {
        padding-inline: 5rem;
        /* background-color: var(--bg-surface); */
    }

    /* Split layout: padding on the section (not divs) keeps background full-width
       while aligning content at 5rem from edges — columns get wider space (536px vs 448px) */
    body:not(.blogs-page) main > .section.layout-split {
        padding-inline: 0;
    }

    body:not(.blogs-page) main > .section.layout-split > div {
        padding-inline: 5rem;
    }

    body:not(.blogs-page) main > .section.layout-split-70-30 {
        padding-inline: 0;
    }

    /* 70-30 split: columns are full-width, no inner padding needed */
    body:not(.blogs-page) main > .section.layout-split-70-30 > div {
        padding-inline: 5rem;
    }
}

@media (width >= 90rem) {
    /* Keep split-section backgrounds full width while centering content
       on the same 90rem rail used by standard section wrappers. */
    body:not(.blogs-page) main > .section.layout-split,
    body:not(.blogs-page) main > .section.layout-split-70-30 {
        padding-inline: calc((100% - 90rem) / 2);
    }
}

/* Scroll-to-top button with scroll-progress ring */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background: conic-gradient(var(--bg-primary) var(--scroll-progress, 0%), #e0e0e0 0);
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
    z-index: 99;
    padding: 0;
    margin: 0;
}

/* Only surface the scroll-to-top button from tablet up; hidden on mobile */
@media (width >= 48rem) {
    .scroll-to-top {
        display: flex;
    }
}

.scroll-to-top::before {
    content: "";
    position: absolute;
    inset: 0.0938rem;
    background-color: var(--bg-surface);
    border-radius: 50%;
    z-index: 1;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top .icon-arrow-up {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--bg-primary);
    mask: url("../icons/arrow-up.svg") no-repeat center / contain;
    transition: background-color 0.3s ease;
}

.scroll-to-top.completed .icon-arrow-up {
    background-color: var(--bg-primary);
}

/* ================================================================
   BLOG DETAIL PAGE � critical first-paint rules
   Duplicated from blog-detail.css so they apply at first paint
   (styles.css is preloaded) and prevent CLS when blog-detail.css
   and header.css load lazily after body.appear.
   ================================================================ */

/* Pre-reserve section padding so it doesn't change when blog-detail.css loads */
body .section.blog-detail-container {
    padding: 0 1.5rem var(--spacing-2xl);
    border-radius: var(--spacing-md);
}

/* Pre-reserve wrapper padding so the default 0 1.5rem doesn't shift when blog-detail.css loads */
.section.blog-detail-container .blog-detail-wrapper {
    padding: 0;
}

/* Prevent nav-secondary going full-bleed when header.css loads lazily.
   header.css has a generic full-bleed rule for nav-secondary inside sections;
   this higher-specificity rule locks it to the section edge from first paint. */
.section.blog-detail-container > .nav-secondary {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.section.blog-detail-container > .nav-secondary .nav-secondary-inner {
    max-width: none;
    padding-inline: 0;
}

/* Hide the authored breadcrumb section on blog detail pages.
   The breadcrumb is provided via JS (nav-secondary inside blog-detail-container)
   so the authored section is empty — remove its padding/space from layout. */
body:has(.blog-detail-container) .section.breadcrumb-container {
    display: none;
}